:root{
  --bg:#f4f4f4; --panel:#e6e6e6; --fill:#cfcfcf; --fill-2:#b8b8b8; --line:#9a9a9a;
  --muted:#6b6b6b; --ink:#1e1e1e; --strong:#000;
  --gutter:clamp(20px,4vw,64px); --col-gap:clamp(24px,2.2vw,48px); --row-pad:24px; --row-gap:40px; --rule:1px solid var(--line);
  --serif:system-ui,sans-serif; --sans:system-ui,sans-serif; --act:var(--fill-2); --proof:var(--ink);
  --w-head:700; --ft-bg:var(--panel); --ft-ink:var(--ink); --ft-link:var(--muted); --ft-rule:var(--line); --ft-word:var(--fill); --head-case:none; --rh-w:1px; --vr:1px solid transparent;
  --f-body:16px; --f-small:13px; --f-h1:clamp(34px,4.2vw,64px); --f-h2:clamp(24px,2.4vw,36px);
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font:var(--f-body)/1.5 var(--serif)}
h1,h2,h3{text-wrap:balance}
p,li,small,figcaption{text-wrap:pretty}
b,dd,dt,span,a,td{text-wrap:balance}
a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.note{font:var(--f-small)/1.4 ui-monospace,monospace;color:var(--muted)}
.wrap{padding:0 var(--gutter)}

/* 0. Screens on one grid (grid-layout skill): every section is one 1440x900 screen on 12 columns */
.screen{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:var(--row-gap);
  min-height:0;padding:72px var(--gutter);align-content:start}
.screen.first{min-height:0}
.screen.alt{background:#fff}
.c1-5{grid-column:1/6}.c1-6{grid-column:1/7}.c1-7{grid-column:1/8}.c1-8{grid-column:1/9}.c1-4{grid-column:1/5}.c1-12{grid-column:1/-1}.c5-12{grid-column:5/13}
.c6-12{grid-column:6/13}.c7-12{grid-column:7/13}.c8-12{grid-column:8/13}.c9-12{grid-column:9/13}
@media (max-width:760px){
  .screen{grid-template-columns:repeat(4,minmax(0,1fr));min-height:0;padding:40px var(--gutter);row-gap:28px}
  .screen.first{min-height:0}
  .screen>*{grid-column:1/-1}
}

/* 1. Header: the site's shared part */
header{display:flex;align-items:center;gap:32px;padding:18px var(--gutter);border-bottom:var(--rule)}
/* The empty header tag holds the height of the header site.js builds in its place, so nothing below it moves when it arrives or if it never does. The heights are measured at the widths where the header's menu wraps. */
header[data-part]{min-height:81px}
@media(max-width:339px){header[data-part]{min-height:122px}}
@media(min-width:761px){header[data-part]{min-height:117px}}
@media(min-width:1150px){header[data-part]{min-height:107px}}
@media(min-width:1280px){header[data-part]{min-height:83px}}
.mark{display:flex;align-items:center;gap:10px;font-weight:700}
.mark i{width:28px;height:28px;background:var(--fill-2);display:block}
footer .mark i{background:var(--ft-ink)}
footer .mark{color:var(--ft-ink)}
nav{display:flex;gap:24px;flex:1}
nav a{text-decoration:none;white-space:nowrap}
.menu{flex:1}
.menu summary{display:none;list-style:none;cursor:pointer;font-family:var(--sans);font-weight:700;border:var(--rule);background:#fff;padding:8px 14px}
.menu summary::-webkit-details-marker{display:none}

/* The six facts: one shared part on the company page and the home page */
.sym{width:22px;height:22px;display:inline-block;border:2px solid var(--ink)}
.sym.yes{background:var(--proof)}
.sym.part{background:linear-gradient(90deg,var(--ink) 50%,#fff 50%)}
.sym.none{background:#fff}
.sym.away{background:linear-gradient(to top right,#fff calc(50% - 1.5px),var(--ink) calc(50% - 1px) calc(50% + 1px),#fff calc(50% + 1.5px))}
.key{display:flex;gap:8px 22px;font-size:var(--f-small);color:var(--muted);margin:18px 0 28px;align-items:center;flex-wrap:wrap}
.key .sym,.sym.sm{width:14px;height:14px;vertical-align:-2px;margin-right:6px}
.marksays{font-size:var(--f-small);color:var(--muted);max-width:80ch;margin-top:4px;text-wrap:balance}
.facts{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--col-gap);row-gap:30px}
.f{display:grid;grid-template-columns:30px 1fr;column-gap:12px}
.f .lab{font-size:var(--f-small);color:var(--muted);grid-column:2}
.f .sym{grid-row:1/4}
.f b{font-weight:600;grid-column:2;text-wrap:balance}
.f small{grid-column:2;color:var(--muted);font-size:var(--f-small);margin-top:4px}
@media (max-width:1100px){.facts{grid-template-columns:1fr}}

footer{border-top:var(--rule);background:var(--ft-bg);color:var(--ft-ink);overflow:hidden}
.ft-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:48px;padding:56px var(--gutter) 40px}
.ft-id p{margin-top:12px}
.ft-id p:first-of-type{max-width:30ch}
.ft-live{font-size:var(--f-small);color:var(--ft-link)}
.ft-live b{color:var(--ft-ink)}
.ft-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;font-size:var(--f-small)}
.ft-cols h3{font-size:var(--f-small);margin-bottom:10px}
.ft-cols a{display:block;text-decoration:none;color:var(--ft-link);padding:3px 0}
.ft-bar{display:flex;gap:24px;flex-wrap:wrap;padding:16px var(--gutter);border-top:1px solid var(--ft-rule);font-size:var(--f-small);color:var(--ft-link)}
.ft-bar a{color:var(--ft-link)}
.ft-name{padding:16px var(--gutter) 40px;line-height:0}
.ft-name svg{display:block;width:100%;height:auto}

@media (max-width:1100px){
  .ft-top{grid-template-columns:minmax(0,1fr)}
  header{flex-wrap:wrap;row-gap:12px}
  nav{gap:16px;white-space:nowrap}
}
/* 761 to 860: the five links no longer fit beside the name, so the links take their own row. */
@media (min-width:761px) and (max-width:860px){
  .mark{order:1}
  .menu{order:3;flex:1 1 100%}
}
@media (max-width:760px){
  header{flex-wrap:wrap;gap:12px;justify-content:space-between}
  .menu{flex:0 0 auto}
  .menu summary{display:block}
  .menu[open] summary{box-shadow:inset 0 -3px 0 var(--live)}
  .menu[open]{flex:1 1 100%;order:3}
  .menu nav{flex-direction:column;gap:0;margin-top:12px;border-top:var(--rule)}
  .menu nav a{padding:14px 0;border-bottom:var(--rule)}
  .ft-top{grid-template-columns:minmax(0,1fr);gap:32px}
  .ft-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}

/* The look's shared parts, built once (#4184). Grey by default; look.css's tokens switch them on. */
h1,h2,h3,h4{font-weight:var(--w-head)}
header nav,.tabs,.btn,.chips button,.pages,.go,.more,.rh .see,.ft-top,.ft-bar{font-family:var(--sans)}
header nav a.on,.tabs a.on,.pages .cur{color:var(--ink);font-weight:700;padding:3px 8px}

/* Ruled section head: a rule on top, the heading left, "see all" right */
.rh{border-top:var(--rh-w) solid var(--line);padding-top:12px}
.rh:is(h1,h2),.rh :is(h1,h2){text-transform:var(--head-case);font-size:var(--f-h2);line-height:1.25;font-weight:var(--w-head)}
.rh .see{float:right;margin-left:20px;font-size:var(--f-small);font-weight:700;text-decoration:none;white-space:nowrap}

/* Fine vertical dividers between stories that sit side by side */
.vr>*+*{position:relative}
.vr>*+*::before{content:"";position:absolute;left:calc(var(--col-gap) / -2);top:0;bottom:0;border-left:var(--vr)}

/* Tabs under a page title: one part for news, the encyclopedia, companies and jobs */
.tabs{display:flex;flex-wrap:wrap;gap:20px;font-size:var(--f-small)}
.tabs a{color:var(--muted);text-decoration:none;padding:3px 0}
.tabs a:hover{color:var(--link)}
.tabs a.on{color:var(--ink)}
/* The strip: tabs as one ruled object, each cell an icon, a label and a count. The active cell is white and joins the page below it
   (no rule under it); the others sit on --fill with a rule beneath. Under 761px the strip scrolls sideways. */
.tabs.strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;border:1px solid var(--line);border-bottom:0;padding:0;font-size:var(--f-text)}
.tabs.strip a{display:block;padding:22px 18px 18px;background:var(--fill);border-left:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--ink);line-height:1.3}
.tabs.strip a:first-child{border-left:0}
.tabs.strip a.on{background:#fff;border-bottom-color:transparent;font-weight:600;padding:22px 18px 18px}
.tabs.strip a:hover:not(.on){background:#fff;color:var(--ink)}
.tabs.strip a[aria-disabled]{color:var(--muted);cursor:default;background:var(--fill)}
.tabs.strip a[aria-disabled]:hover{background:var(--fill);color:var(--muted)}
.tabs.strip a[aria-disabled] .ic,.tabs.strip a[aria-disabled] span:not(.n){opacity:.55}
.tabs.strip a:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}
.tabs.strip .n{display:block;margin-top:8px;font:500 var(--f-small)/1 ui-monospace,monospace;color:var(--muted)}
.ic{display:block;width:40px;height:40px;margin-bottom:14px}
.ic svg{display:block;width:100%;height:100%;fill:none;stroke:var(--ic,var(--muted));stroke-width:2;stroke-linecap:square;stroke-linejoin:miter}
/* The figure under a page title: the mono line of numbers that the page's data run supports. */
.fig{font:500 var(--f-small)/1.3 ui-monospace,monospace;color:var(--muted);margin-bottom:12px}

/* Actions: yellow under the look, grey in the greybox */
.btn{display:inline-block;padding:12px 18px;border:2px solid var(--ink);font-weight:700;text-decoration:none}

/* Filter chips and the page counter under result lists: shared by companies and jobs */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{border:var(--rule);padding:4px 10px;font:inherit;font-family:var(--sans);font-size:var(--f-small);background:#fff;color:var(--ink);cursor:pointer}
.pages{display:flex;gap:8px;align-items:center;margin-top:24px;font-size:var(--f-small)}
.pages a,.pages span{padding:6px 10px}
.pages .cur{text-decoration:none}
@media (max-width:760px){
  .tabs{flex:1 1 100%}
  .tabs.strip{display:flex;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin}
  .tabs.strip a{flex:0 0 calc((100% - 40px) / 2);scroll-snap-align:center}
  .vr>*+*::before{display:none}
}
.jobs .rows li a{white-space:nowrap}
.f .nc{grid-column:2;color:var(--muted);font-weight:400}