/* ══════════════════════════════════════════════════════════════════════
   The Shortlist — one stylesheet, every page.
   Written clean 26 Aug 2026, replacing the stacked override blocks.

   The system:
     ground    one cream, #F1ECE3, with the hero dissolving into it
     ink       #0A0A0A headings, #4E4B47 body
     accent    #A63D40, used only on the small labels
     type      Inter throughout; the serif is the wordmark alone
     shape     [ label ]  [ content ]  — no rules, space divides
   No copy is altered anywhere.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --cream:#F1ECE3; --card:#F7F3EC; --sink:#E9E3D8;
  --ink:#0A0A0A;  --body:#4E4B47;  --accent:#A63D40;
  --edge:clamp(20px,4vw,64px);
  /* Two different jobs used to share one name. --labelcol is the narrow track
     the kicker sits in beside a headline; --gutter is the side padding every
     section in styles.css is built on. While both were called --gutter, this
     file — which loads last on every inner page — was overwriting that padding,
     and the phone rule below set it to zero, so founders, investors, funds,
     the method, apply, jobs, refer, subscribe and the resources index all ran
     their copy flush to the edge of the screen. */
  --labelcol:clamp(96px,10vw,140px);
  --gutter:clamp(96px,10vw,140px);
  --air:clamp(64px,8vw,132px);
  --wrap:1180px;
}

/* ─── ground ─────────────────────────────────────────────────────── */
body,.sec,.marq,.next-sec,.section-final-cta,.subscribe-section,
#premise,#ways,#method,#issue,#subscribe{background:var(--cream)}
body{color:var(--body);font-size:15px}
.card,.pane,.tile{background:var(--card);border:0}

/* ─── type ───────────────────────────────────────────────────────── */
body,h1:not(.giant):not(.brand):not(.sl-wm),h2,h3,h4,
.huge,.cover-headline,.section-title,.subscribe-title,.next-lab,.say{
  font-family:var(--sans),"Inter",-apple-system,sans-serif}
.giant,.brand b,.sl-wm{font-family:var(--serif),"DM Serif Display",Georgia,serif;
  text-transform:none;font-weight:400}

/* the section name is a label, never a giant */
.huge,.marq-lab,.wlab,.kicker,.kick,.next-lab,
.subscribe-eyebrow,.tiny{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:var(--accent);line-height:1.4}
/* .section-title used to sit in that list, which set the inner pages' section
   HEADLINES as 11px red caps directly under their eyebrows. Founders and
   investors therefore opened every section with two small red labels stacked
   on each other and no sentence at all. It is a headline: same treatment the
   homepage gives .say. */
.section-head .section-eyebrow{margin:0 0 clamp(14px,1.6vw,22px)}
.section-title{font-weight:300;font-size:clamp(26px,4vw,58px);line-height:1.12;
  letter-spacing:-.034em;text-transform:none;color:var(--ink);max-width:20ch;margin:0}
.huge br,.next-lab br{display:none}

/* the sentence is the section */
.say,.cover-headline,#method .stmt > p:first-child{
  font-weight:300;font-size:clamp(26px,4vw,58px);line-height:1.12;
  letter-spacing:-.034em;color:var(--ink);max-width:18ch;margin:0}
h3{font-weight:300;font-size:clamp(23px,2.9vw,36px);line-height:1.12;
  letter-spacing:-.03em;color:var(--ink)}
p,li,.say-note,.prose,.cover-lede,.stmt p{
  font-size:17px;line-height:1.65;color:var(--body)}
.say-note b,.prose b,p b{color:var(--ink);font-weight:500}

/* ─── the hero, dissolving ───────────────────────────────────────── */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;
  padding-bottom:clamp(30px,4vw,60px)}
.hero-mid{flex:1;align-content:center}
.hero > *:not(.cover){position:relative;z-index:5}
.hero .cover{top:-14%;height:128%;will-change:transform}
.hero::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(96deg,rgba(6,6,8,.88),rgba(6,6,8,.62) 30%,rgba(6,6,8,.12) 56%,rgba(6,6,8,.34)),
    linear-gradient(180deg,rgba(6,6,8,.62),transparent 20%,transparent 62%,rgba(6,6,8,.8))}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;z-index:3;
  pointer-events:none;background:linear-gradient(180deg,
    rgba(241,236,227,0),rgba(241,236,227,.06) 34%,rgba(241,236,227,.34) 64%,
    rgba(241,236,227,.82) 86%,var(--cream))}
.hero .giant{color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.6)}

.herostats{position:absolute;left:0;right:0;bottom:12px;z-index:5;
  display:flex;gap:clamp(34px,5vw,76px);padding:0 var(--edge)}
.herostats b{display:block;font-weight:300;font-size:clamp(22px,2.6vw,34px);
  line-height:1;letter-spacing:-.04em;color:#fff;text-shadow:0 1px 18px rgba(0,0,0,.7)}
.herostats span{display:block;margin-top:7px;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(241,236,227,.62)}

/* ─── the funds, their own band ──────────────────────────────────── */
.marq{padding:clamp(44px,5.4vw,84px) 0;border:0}
.marq-lab{padding-inline:var(--edge);margin:0 0 clamp(26px,3vw,42px)}
.marq-mask{-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.marq-track{gap:clamp(44px,5vw,88px);align-items:center}
/* index.html sets an explicit height on these, and a max-height can only cap a
   box, never grow one, so every logo rendered at 23px against 41px wordmarks.
   Setting height here is what actually makes them read at the scale of the
   names beside them. */
.marq-track img{height:clamp(36px,4vw,58px);max-height:none;max-width:none;width:auto;
  filter:brightness(0);opacity:1}
/* An icon mark plus its name has to read as ONE object at the same weight as a
   wordmark logo. The names were left at 14px beside 51px wordmarks, so JECA and
   DNX looked like captions in a row of logos. The mark stays a little shorter
   than a wordmark because it is square rather than wide. */
.marq-track span.jeca img,.marq-track span:has(> img + *) img{
  height:clamp(28px,3vw,44px);max-height:none}
.marq-track span.jeca,.marq-track span:has(> img + *){
  font-size:clamp(20px,2.2vw,31px);font-weight:500;letter-spacing:-.015em;
  color:var(--ink);gap:clamp(10px,1vw,16px)}
.marq-track span{width:auto;white-space:nowrap;gap:16px;
  font-size:clamp(26px,3.2vw,46px);font-weight:600;letter-spacing:-.025em;color:var(--ink)}

/* ─── the unit: label, then content ──────────────────────────────── */
.sec{padding-top:var(--air);border:0}
.sec-top{max-width:var(--wrap);margin:0 auto clamp(18px,2.2vw,30px);
  padding-inline:var(--edge);border:0;text-align:left}
#premise .two{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--edge);display:block}
#premise .shot,.stats{display:none}
.say-note{margin-top:clamp(16px,1.8vw,24px);max-width:46ch}

/* ─── the routes ─────────────────────────────────────────────────── */
.ways{max-width:var(--wrap);margin:clamp(18px,2vw,28px) auto 0;
  padding-inline:var(--edge);display:block;border:0}
.ways .way{position:relative;display:flex;align-items:center;
  gap:clamp(24px,4vw,80px);margin:0;border:0;border-radius:0;background:none;
  padding:clamp(26px,3vw,42px) 0;min-height:0;
  transition:padding-left .45s cubic-bezier(.16,.72,.24,1),background .45s ease}
.ways .way:hover{padding-left:16px;background:var(--sink)}
.ways .way + .way{box-shadow:0 -1px 0 rgba(10,10,10,.10)}
.ways .way > div{flex:1 1 auto;display:grid;max-width:820px;
  grid-template-columns:clamp(96px,10vw,140px) minmax(0,1fr);
  gap:clamp(18px,2.4vw,40px);align-items:start}
.ways .way > div > .wlab{grid-column:1;grid-row:1;margin:0;padding-top:.55em}
.ways .way > div > h3{grid-column:2;grid-row:1;margin:0 0 8px}
.ways .way > div > p{grid-column:2;grid-row:2;margin:0;max-width:44ch}
.ways .way > .go{display:none}
.ways .way::after{content:"↗";flex:0 0 52px;width:52px;height:52px;border-radius:50%;
  border:1px solid rgba(10,10,10,.16);display:grid;place-content:center;
  font-size:16px;color:var(--ink);margin-left:auto;
  transition:background .3s,color .3s,border-color .3s}
.ways .way:hover::after{background:var(--accent);border-color:var(--accent);color:#fff}

/* ─── the method ─────────────────────────────────────────────────── */
#method .stmt{display:block;text-align:left;max-width:var(--wrap);
  margin-inline:auto;padding-inline:var(--edge)}
#method .stmt > *{margin-left:0;text-align:left;max-width:20ch}
#method .stmt > p:not(:first-child){max-width:44ch;margin-top:18px;
  font-size:17px;color:var(--body)}

/* ─── the close ──────────────────────────────────────────────────── */
/* These set the standalone subscribe SECTION's air on founders, investors and
   the resources index. On the homepage the same id sits on a pane inside the
   #issue grid, where it was adding 77px of top padding to one of two panes that
   are supposed to start on the same line, so the pair read as misaligned.
   :not(.pane) keeps the section spacing and leaves the pane alone. */
#issue,#subscribe:not(.pane){padding-top:clamp(48px,6vw,96px)}
#subscribe:not(.pane){padding-bottom:clamp(52px,6.5vw,100px)}
#issue h3,.ititle,.subscribe-title{font-weight:300;color:var(--ink);
  font-size:clamp(22px,2.9vw,38px);line-height:1.14;letter-spacing:-.03em;
  text-transform:none;letter-spacing:-.03em}
.field input{background:#fff;border:1px solid rgba(10,10,10,.14);color:var(--ink)}
.field input::placeholder{color:#8F8A83}
/* The footer sits inside .wrap on every page, so its black ground stopped at the
   wrapper's max-width and its padding, and read as a black box hanging in the
   middle of the page rather than the foot of it. Pulled full-bleed so the ground
   runs edge to edge, with the padding restoring the text to the same left edge
   the rest of the page uses. */
footer,.foot{background:var(--ink);border:0;
  width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  padding:clamp(30px,3.6vw,52px) max(var(--edge),calc(50vw - 50% + var(--edge)));
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px}
footer *,.foot *{color:rgba(241,236,227,.62);font-size:11px;
  letter-spacing:.18em;text-transform:uppercase}

/* ─── inner pages take the same shape ────────────────────────────── */
section.cover,header.cover{position:relative;isolation:isolate;overflow:hidden;background:var(--ink);
  padding:clamp(70px,9vw,140px) 0 clamp(90px,11vw,170px)}
section.cover::before,header.cover::before{content:"";position:absolute;inset:0;z-index:-2;
  background:url("/shortlist-brand-assets/photo/tv-desk@1200.jpg") center 62%/cover no-repeat;
  filter:grayscale(.30) brightness(.62) contrast(1.02) saturate(.84)}
/* The wash used to sit near-opaque right across the cover, so whichever
   photograph was underneath it made no difference. It is now heavy only where
   the type is, on the left and along the two edges, and lets the picture come
   through on the right. */
section.cover::after,header.cover::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(8,8,8,.94) 0%,rgba(8,8,8,.84) 32%,rgba(8,8,8,.50) 60%,rgba(8,8,8,.30) 100%),
    linear-gradient(180deg,rgba(8,8,8,.78) 0%,rgba(8,8,8,.16) 26%,rgba(8,8,8,.30) 62%,var(--cream))}
section.cover .cover-image,section.cover .caption,
section.cover .cover-image,section.cover .caption,
header.cover .cover-image,header.cover .caption{display:none}
.cover-grid{grid-template-columns:1fr;max-width:var(--wrap);margin-inline:auto;
  padding-inline:var(--edge)}
.cover-text{display:grid;grid-template-columns:var(--labelcol) minmax(0,1fr);
  gap:clamp(18px,2.4vw,40px);align-items:start;margin:0;max-width:none}
.cover-text .kicker{grid-column:1;padding-top:.55em;color:#D2A24A}
.cover-text > *:not(.kicker){grid-column:2}
.cover-headline{color:#fff;max-width:17ch;margin:0 0 clamp(18px,2.2vw,28px)}
.cover-lede{color:#B5B0A6;max-width:46ch}

/* ─── founders + investors: the photo hero ────────────────────────
   Headline top left, the facts stacked down the right, the sentence and the
   one action along the bottom, and the photograph carrying all of it rather
   than sitting behind a black panel. The type is the homepage's: the label is
   the homepage kicker with its short rule, the headline is Inter 200, and the
   facts are set exactly like the homepage's own hero figures. */
section.cover.cover-hero{padding:0;background:#0D0B08}
section.cover.cover-hero::before{
  background:url("/shortlist-brand-assets/photo/tv-desk@1200.jpg") center 55%/cover no-repeat;
  filter:grayscale(.24) brightness(.88) contrast(1.03) saturate(.88)}
section.cover.cover-hero::after{
  background:
    linear-gradient(180deg,rgba(6,6,8,.66) 0%,rgba(6,6,8,.14) 24%,rgba(6,6,8,0) 48%),
    linear-gradient(0deg,rgba(6,6,8,.82) 0%,rgba(6,6,8,.46) 22%,rgba(6,6,8,0) 54%),
    linear-gradient(94deg,rgba(6,6,8,.78) 0%,rgba(6,6,8,.44) 34%,rgba(6,6,8,.08) 70%)}

section.cover.cover-hero .cover-grid{display:grid;
  grid-template-columns:minmax(0,1fr) clamp(210px,22vw,300px);
  grid-template-rows:auto 1fr auto;
  gap:clamp(28px,4vw,64px);
  min-height:calc(100vh - 56px);max-width:var(--wrap);margin-inline:auto;
  padding:clamp(52px,7vw,104px) var(--edge) clamp(44px,6vw,84px)}

section.cover.cover-hero .cover-text{display:block;grid-column:1;grid-row:1;
  max-width:none;margin:0}
section.cover.cover-hero .kicker{display:flex;align-items:center;gap:12px;
  margin:0 0 clamp(16px,2vw,26px);padding-top:0;font-size:10px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:#D2A24A}
section.cover.cover-hero .kicker::before{content:"";flex:0 0 34px;height:1px;
  background:currentColor;display:block}
section.cover.cover-hero .cover-headline{font-weight:200;
  font-size:clamp(34px,5.4vw,76px);line-height:1.04;letter-spacing:-.036em;
  color:#fff;max-width:15ch;margin:0;text-shadow:0 2px 30px rgba(0,0,0,.5)}

/* the facts, set like the homepage's hero figures */
section.cover.cover-hero .cover-stats{grid-column:2;grid-row:2/4;align-self:end;
  list-style:none;margin:0;padding:0}
section.cover.cover-hero .cover-stats li{padding:clamp(16px,2vw,24px) 0;
  border-top:1px solid rgba(241,236,227,.24)}
section.cover.cover-hero .cover-stats li:last-child{
  border-bottom:1px solid rgba(241,236,227,.24)}
section.cover.cover-hero .cover-stats b{display:block;font-weight:300;
  font-size:clamp(22px,2.6vw,34px);line-height:1;letter-spacing:-.04em;color:#fff;
  text-shadow:0 1px 18px rgba(0,0,0,.6)}
section.cover.cover-hero .cover-stats span{display:block;margin-top:7px;
  font-size:10.5px;line-height:1.5;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(241,236,227,.68)}

section.cover.cover-hero .cover-foot{grid-column:1;grid-row:3;align-self:end}
section.cover.cover-hero .cover-lede{font-size:16px;line-height:1.6;
  color:rgba(241,236,227,.84);max-width:42ch;margin:0}
section.cover.cover-hero .cta-primary{margin-top:clamp(20px,2.4vw,30px);
  padding:15px clamp(24px,3vw,38px);font-size:11px}

@media(max-width:860px){
  section.cover.cover-hero .cover-grid{grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto auto;gap:clamp(30px,7vw,44px);
    min-height:0;padding:clamp(40px,10vw,64px) var(--edge) clamp(40px,10vw,60px)}
  section.cover.cover-hero .cover-text,
  section.cover.cover-hero .cover-stats,
  section.cover.cover-hero .cover-foot{grid-column:1;grid-row:auto;align-self:auto}
  section.cover.cover-hero .cover-headline{font-size:clamp(30px,8.2vw,44px);max-width:none}
  section.cover.cover-hero .cover-lede{max-width:none}
  section.cover.cover-hero .cover-stats span{letter-spacing:.16em}
  section.cover.cover-hero::after{
    background:
      linear-gradient(180deg,rgba(6,6,8,.78) 0%,rgba(6,6,8,.52) 30%,rgba(6,6,8,.58) 70%,rgba(6,6,8,.82) 100%)}
}

.next-sec{padding:var(--air) 0}
.next-sec-in,.final-cta-inner,.subscribe-inner{
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--edge)}
.next-lab{margin-bottom:clamp(26px,3.2vw,44px)}
/* Three fixed tracks left an empty column on any section that carries two
   panes, which is what the homepage close does: the issue and the subscribe
   box, then a third of the page showing the grid's own ground. auto-fit takes
   the count from the content, so two panes make two columns and three make
   three. The ground goes too, since the gap is space here and not a hairline. */
.panes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:clamp(24px,3vw,52px);background:none}
.pane{padding:0}
/* the subscribe pane carries an id, and the ground rule at the top of this file
   matches on it, so one card came out cream and its neighbour card-coloured */
.panes .pane#subscribe,.panes .pane{background:var(--card)}
/* the homepage close sits in that page's own 1440 wrap, so the two cards ran
   wider than every section above them and their left edge missed the column
   the rest of the page is set to */
#issue .panes{max-width:calc(var(--wrap) - var(--edge)*2);margin-inline:auto}
/* these need to out-specify the page's own rules, which set a serif */
.next-sec .panes .pane h3,.panes .pane h3{margin:12px 0 10px;
  font-family:var(--sans),"Inter",-apple-system,sans-serif;
  font-weight:300;font-size:clamp(20px,2.3vw,28px);line-height:1.14;
  letter-spacing:-.028em;color:var(--ink);text-transform:none}
.next-sec .panes .pane p,.panes .pane p{font-size:15.5px;line-height:1.6;color:var(--body)}
.next-sec .panes .pane .kick{color:var(--accent)}
.next-sec .panes .pane .pane-in{background:none;padding:0;border:0}
.section-final-cta{padding:var(--air) 0}

/* ─── motion ─────────────────────────────────────────────────────── */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto}
.mv{opacity:0;transform:translateY(64px);
  transition:opacity 1.05s cubic-bezier(.16,.72,.24,1),
             transform 1.05s cubic-bezier(.16,.72,.24,1)}
.mv.in{opacity:1;transform:none}

/* ─── small screens ──────────────────────────────────────────────── */
@media(max-width:860px){
  :root{--labelcol:0px;--gutter:var(--edge);--air:clamp(48px,11vw,72px)}
  .cover-text,.ways .way > div{grid-template-columns:1fr;row-gap:10px}
  /* These have to be written out one by one. The single track above is only
     half the job: the children still carry grid-column:2 and grid-row:1 from
     the desktop rules, and a wildcard selector loses to them on specificity,
     so the browser opened a second implicit column and the labels stayed
     wedged in a gutter beside the heading. Matching the desktop selectors
     exactly is what lets these win. */
  .cover-text > *,.cover-text > *:not(.kicker),.cover-text .kicker,
  .ways .way > div > *,
  .ways .way > div > .wlab,
  .ways .way > div > h3,
  .ways .way > div > p{grid-column:1;grid-row:auto}
  .cover-text .kicker{padding-top:0}
  .ways .way{flex-direction:column;align-items:flex-start;gap:10px}
  .ways .way::after{display:none}
  .panes{grid-template-columns:1fr}
  .say,.cover-headline,#method .stmt > p:first-child{font-size:27px;max-width:none}
  h3{font-size:22px}
  .herostats{gap:28px;bottom:10px}
  .marq-track img{height:30px;max-height:none}
  .marq-track span.jeca img,.marq-track span:has(> img + *) img{height:23px}
  .marq-track span.jeca,.marq-track span:has(> img + *){font-size:16px}
  .marq-track span{font-size:21px}
}
@media(prefers-reduced-motion:reduce){
  .mv{opacity:1;transform:none;transition:none}
  .hero .cover{transform:none}
  .marq-track{animation:none}
}


/* ─── inner-page sections take the homepage's grammar ─────────────
   founders.html and investors.html had a hero in the new system and a body
   still in the old one: serif step titles, red italic numerals, bordered tier
   tiles. Nothing below the fold looked like the homepage. These map the
   existing class names onto the same [label][content] row the homepage uses
   for "Two ways in", so the markup and the copy are untouched. */

/* the three steps. The numbering stays because this IS a sequence, but it is
   set as apparatus in the left column rather than as red serif ornament. */
.loop-steps{list-style:none;margin:clamp(18px,2vw,28px) 0 0;padding:0}
.loop-steps > li{display:grid;
  grid-template-columns:clamp(96px,10vw,140px) minmax(0,1fr);
  gap:clamp(18px,2.4vw,40px);align-items:start;
  padding:clamp(26px,3vw,42px) 0;margin:0;border:0}
.loop-steps > li + li{box-shadow:0 -1px 0 rgba(10,10,10,.10)}
.loop-steps .step-num{grid-column:1;grid-row:1;margin:0;padding-top:.55em;
  font-family:var(--sans),"Inter",-apple-system,sans-serif;font-style:normal;
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);line-height:1.4}
.loop-steps .step-title{grid-column:2;grid-row:1;margin:0 0 8px;
  font-family:var(--sans),"Inter",-apple-system,sans-serif;
  font-weight:300;font-size:clamp(23px,2.9vw,36px);line-height:1.12;
  letter-spacing:-.03em;color:var(--ink);text-transform:none}
.loop-steps .step-desc{grid-column:2;grid-row:2;margin:0;max-width:52ch;
  font-size:17px;line-height:1.65;color:var(--body)}

/* the tiers. Boxes with borders were the one shape on the site that had a
   frame around it; the rest of the system divides with space and a hairline. */
/* styles.css sets this as `.section-tiers .tiers-grid`, three fixed columns.
   A bare .tiers-grid loses to it, which squeezed each tile into a third of the
   width and broke the text into one word per line. Match its selector. */
.section-tiers .tiers-grid,.tiers-grid{display:grid;grid-template-columns:1fr;gap:0;
  margin:clamp(18px,2vw,28px) 0 0;background:none}
.tiers-grid .tier-tile{display:grid;
  grid-template-columns:clamp(150px,16vw,220px) minmax(0,1fr);
  gap:clamp(18px,2.4vw,40px);align-items:start;
  padding:clamp(24px,2.8vw,38px) 0;background:none;border:0;border-radius:0}
.tiers-grid .tier-tile + .tier-tile{box-shadow:0 -1px 0 rgba(10,10,10,.10)}
.tiers-grid .tier-tile-tier{grid-column:1;margin:0;padding:0;background:none;
  border:0;border-radius:0;font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;line-height:1.4;color:var(--body)}
/* only the top tier carries colour, the same way the funnel does */
.tiers-grid .tier-tile:first-child .tier-tile-tier{color:var(--accent)}
.tiers-grid .tier-tile-text{grid-column:2;margin:0;max-width:52ch;
  font-size:17px;line-height:1.65;color:var(--body)}

/* the editor's note: a drop cap is the last piece of the old broadsheet */
.section-memo .memo-inner{max-width:var(--wrap);margin-inline:auto;
  padding-inline:var(--edge)}
.section-memo .drop-cap{font-family:var(--sans),"Inter",-apple-system,sans-serif;
  font-weight:300;font-size:clamp(26px,4vw,58px);line-height:1.12;
  letter-spacing:-.034em;color:var(--ink);max-width:20ch;margin:0 0 clamp(16px,1.8vw,24px)}
.section-memo .drop-cap::first-letter{font-size:inherit;float:none;margin:0;
  line-height:inherit;font-family:inherit;color:inherit}
.section-memo .memo-sign{margin-top:clamp(18px,2vw,28px);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:var(--body)}

@media(max-width:860px){
  .loop-steps > li,.tiers-grid .tier-tile{grid-template-columns:1fr;row-gap:10px}
  .loop-steps .step-num,.loop-steps .step-title,.loop-steps .step-desc,
  .tiers-grid .tier-tile-tier,.tiers-grid .tier-tile-text{grid-column:1;grid-row:auto}
  .loop-steps .step-num{padding-top:0}
  .loop-steps .step-title{font-size:22px}
  .section-title,.section-memo .drop-cap{font-size:27px;max-width:none}
}


/* ─── the footer mark ─────────────────────────────────────────────
   The footer set the words "The Shortlist" in the display serif and then the
   footer's own rule put uppercase and .18em tracking through it, so the
   wordmark came out as spaced-out serif capitals: a shape that appears nowhere
   in the brand. The real lockup is the mark plus the wordmark, the same object
   the nav carries, in the cream cut made for a dark ground. */
.footer .foot-lockup,.foot .foot-lockup{display:inline-flex;align-items:center;
  gap:11px;text-decoration:none;margin:0 0 clamp(14px,1.6vw,20px)}
.footer .foot-lockup img,.foot .foot-lockup img{height:clamp(26px,2.6vw,32px);
  width:auto;display:block}
.footer .foot-lockup .sl-wm,.foot .foot-lockup .sl-wm{
  font-family:var(--logo),"Libre Caslon Display",Georgia,serif;
  font-weight:400;font-size:clamp(19px,2vw,23px);letter-spacing:0;
  text-transform:none;color:#F5F1E7;line-height:1}
.footer .foot-lockup .sl-wm sup,.foot .foot-lockup .sl-wm sup{
  font-family:var(--sans),"Inter",-apple-system,sans-serif;font-size:.17em;
  font-weight:500;letter-spacing:.02em;text-transform:none;
  vertical-align:baseline;position:relative;top:-3.74em;margin-left:-.6em}


/* ─── the subscribe block ─────────────────────────────────────────
   This was the one panel on the site still built the way a template builds
   one: everything centred, hard black keylines around every field, and a solid
   red slab for the button. The homepage's own subscribe pane is none of that,
   so this takes the same grammar. Left aligned like every other section, the
   email and its button as a single joined field on a hairline, and the two
   optional fields quiet underneath. Copy untouched. */
/* The Thursday read is a different offer from everything above it, and on the
   page it was the same cream with a hairline over it, so it read as one more
   section rather than a thing you could take on its own. It now sits on --sink,
   full-bleed, so the band itself is the separation. Runs on every page: the id
   is on the homepage block and the class on the inner pages.
   --sink was already in the palette. Contrast holds: ink 15.4:1, dim 5.2:1,
   oxblood 4.85:1, so the Subscribe button and the small print both clear AA. */
/* On the homepage the ground goes on #issue, not on #subscribe: the inner
   .close-one carries "background:none" at higher specificity further down
   the file, which cancelled it silently. */
.subscribe-section,#issue{
  background:var(--sink);border-top:0;border-bottom:0;
  width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  padding-block:clamp(46px,6vw,92px);
  padding-inline:max(var(--edge),calc(50vw - 50% + var(--edge)))}
.subscribe-inner{max-width:var(--wrap);margin-inline:auto;text-align:left}
.subscribe-inner .subscribe-eyebrow{margin:0 0 clamp(14px,1.6vw,22px)}
.subscribe-title{font-family:var(--sans),"Inter",-apple-system,sans-serif;
  font-weight:300;font-size:clamp(26px,4vw,58px);line-height:1.12;
  letter-spacing:-.034em;color:var(--ink);text-transform:none;
  margin:0 0 clamp(16px,1.8vw,24px);max-width:20ch}
.subscribe-lede{margin:0 0 clamp(26px,3vw,40px);max-width:52ch;
  margin-left:0;margin-right:0;font-size:17px;line-height:1.65;color:var(--body)}

/* the field is one object: input and action joined on a single hairline */
.subscribe-form{display:flex;gap:1px;max-width:520px;margin:0;
  background:rgba(10,10,10,.16)}
.subscribe-form input[type="email"]{flex:1;min-width:0;height:54px;
  border:0;border-radius:0;background:#fff;padding:0 16px;
  font-size:15px;color:var(--ink)}
.subscribe-form .cta-primary{flex:0 0 auto;height:54px;margin:0;border:0;
  border-radius:0;padding:0 clamp(24px,3vw,34px);background:var(--accent);
  color:var(--cream);font-size:10.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .16s}
.subscribe-form .cta-primary:hover{background:#8a2f32}

/* the optional pair sits quietly under it, on hairlines rather than keylines */
.subscribe-extras{max-width:520px;margin:10px 0 0;gap:10px}
.subscribe-extras input,.subscribe-extras select{height:48px;border-radius:0;
  border:1px solid rgba(10,10,10,.14);background:transparent;
  padding:0 14px;font-size:14px;color:var(--ink)}
.subscribe-extras input::placeholder{color:#8F8A83}
.subscribe-extras input:focus,.subscribe-extras select:focus,
.subscribe-form input:focus{border-color:rgba(10,10,10,.42)!important;outline:none}
.subscribe-fineprint{margin:clamp(16px,1.8vw,22px) 0 0;max-width:52ch;
  font-size:12px;line-height:1.6;color:#8F8A83}
.subscribe-thanks{text-align:left;padding:22px 0 0}

@media(max-width:860px){
  .subscribe-title{font-size:27px;max-width:none}
  .subscribe-lede,.subscribe-fineprint{max-width:none}
  .subscribe-form{flex-direction:column;gap:10px;background:none;max-width:none}
  .subscribe-form input[type="email"]{border:1px solid rgba(10,10,10,.16);height:52px}
  .subscribe-form .cta-primary{width:100%;height:52px}
  .subscribe-extras{max-width:none}
}


/* ─── jobs ────────────────────────────────────────────────────────
   This page was built before the rest of the site settled: 12px cards, a 20px
   location pill, a tinted cream callout, a drop-shadowed modal and Bodoni on
   every heading. Nothing else here is rounded, tinted or shadowed, and the
   display serif is the mark alone. Same content, same markup, the site's own
   grammar: space and a hairline divide, Inter carries the headings. */
.jobs-hero h1{font-family:var(--sans),"Inter",-apple-system,sans-serif;
  font-weight:300;font-size:clamp(28px,4.6vw,62px);line-height:1.08;
  letter-spacing:-.034em;color:var(--ink);max-width:16ch}
.jcount{border-bottom:1px solid rgba(10,10,10,.16);font-size:11px;
  letter-spacing:.2em;color:var(--accent);padding-bottom:14px;margin-bottom:0}
.job{border-bottom:1px solid rgba(10,10,10,.10);padding:clamp(22px,2.6vw,32px) 0}
.job h2{font-family:var(--sans),"Inter",-apple-system,sans-serif;
  font-weight:300;font-size:clamp(21px,2.4vw,28px);line-height:1.14;
  letter-spacing:-.028em;color:var(--ink)}
/* a location is a label, not a pill */
.job .loc{border:0;border-radius:0;padding:0;font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:#8F8A83}
.job .apply{font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent)}

/* the empty state is a statement, not a boxed card */
.empty-state{background:none;border:0;border-radius:0;text-align:left;
  padding:clamp(30px,4vw,54px) 0 0;margin:0}
.empty-state .mark{display:none}
.empty-state h2{font-family:var(--sans),"Inter",-apple-system,sans-serif;
  font-weight:300;font-size:clamp(24px,3.4vw,42px);line-height:1.12;
  letter-spacing:-.032em;color:var(--ink);margin:0 0 clamp(12px,1.4vw,18px);
  max-width:20ch}
.empty-state p{margin:0 0 14px;max-width:52ch;font-size:17px;line-height:1.65;
  color:var(--body)}
.empty-cta{justify-content:flex-start;align-items:stretch;gap:14px;
  margin-top:clamp(20px,2.4vw,30px)}
/* the two actions sat at different heights because only one carried padding */
.empty-cta > a{display:inline-flex;align-items:center;justify-content:center;
  height:52px;margin:0;padding:0 clamp(22px,2.6vw,32px);border-radius:0;
  font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}

/* loading is a quiet line in place, not a centred announcement */
.loading{text-align:left;padding:clamp(26px,3vw,40px) 0;color:#8F8A83;
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}

/* the post-a-role note joins the page on a hairline instead of a tinted box */
.founder-note{background:none;border:0;border-radius:0;
  border-top:1px solid rgba(10,10,10,.10);
  margin:clamp(40px,5vw,72px) 0 0;padding:clamp(28px,3.4vw,44px) 0 0}
.founder-note h3{font-family:var(--sans),"Inter",-apple-system,sans-serif;
  font-weight:300;font-size:clamp(21px,2.4vw,28px);line-height:1.14;
  letter-spacing:-.028em;color:var(--ink);margin:0 0 10px}
.founder-note p{color:var(--body);font-size:16px;max-width:52ch}
.founder-note .post-cta{border-radius:0;font-size:10.5px;letter-spacing:.16em;
  padding:14px 26px;background:var(--accent)}
.founder-note .post-alt{color:var(--body)}

/* the apply modal */
.am{border-radius:0;background:var(--card);box-shadow:0 30px 80px rgba(0,0,0,.22)}
.am h2{font-family:var(--sans),"Inter",-apple-system,sans-serif;font-weight:300;
  font-size:clamp(21px,2.4vw,28px);letter-spacing:-.028em;color:var(--ink)}
.am-f input,.am-f textarea{border-radius:0;border:1px solid rgba(10,10,10,.16);
  background:#fff}
.am-f input:focus,.am-f textarea:focus{border-color:rgba(10,10,10,.42)}


/* ─── never red on black ──────────────────────────────────────────
   The homepage footer was rendering its two lines in the accent on the ink
   ground. `footer *` was meant to hold the colour, but a universal selector
   adds nothing to specificity, so (0,0,1) lost to .tiny's (0,1,0) and the red
   from the label rule won. Naming the classes inside the footer is what
   actually wins. Red is a label colour on paper; it never sits on the dark. */
footer .tiny,.foot .tiny,
footer .kicker,.foot .kicker,
footer .kick,.foot .kick,
footer .huge,.foot .huge,
footer .wlab,.foot .wlab,
footer .subscribe-eyebrow,.foot .subscribe-eyebrow{color:rgba(241,236,227,.62)}
footer a:hover,.foot a:hover{color:#F5F1E7}
/* the hero's folio label had the same problem as the footer: an accent label
   sitting on the photograph's near-black ground */
.hero .kicker,.hero-mid .kicker{color:rgba(247,245,240,.72)}


/* ─── quieter closes ──────────────────────────────────────────────
   Two of these blocks were set at hero scale inside a small container: the
   close panes ran a 37px headline inside a 520px card, and the subscribe title
   ran past 50px above a single email field. At that size a card stops being a
   card and reads as another opening statement, so the bottom of the page
   competed with the top of it. The type here should invite rather than
   announce. */
#issue .panes .pane h3,.next-sec .panes .pane h3,.panes .pane h3{
  font-size:clamp(20px,1.9vw,25px);line-height:1.18;letter-spacing:-.022em;
  max-width:22ch}
#issue .panes .pane p,.panes .pane p{font-size:15px;line-height:1.62;max-width:40ch}
#issue .pane-in,.panes .pane-in{gap:clamp(14px,1.5vw,18px)}

/* the subscribe block: the ask is the field, not the sentence above it */
.subscribe-title{font-size:clamp(22px,2.4vw,31px);line-height:1.16;
  letter-spacing:-.024em;max-width:24ch}
.subscribe-inner .subscribe-lede{display:none}


/* ─── where to next ───────────────────────────────────────────────
   This block is navigation, and it was carrying a headline, a sentence of body
   copy and a link in each of three cards. Nine pieces of text to choose
   between three destinations. The sentence never told a reader anything the
   headline had not, so it goes, and each card becomes a label, a destination
   and the way in. The tint goes too: three panels floating on the ground read
   as three more things to read, where three columns divided by space read as a
   choice. */
.next-sec .panes .pane{background:none}
.next-sec .panes .pane .pane-in > div > p{display:none}
.next-sec .panes .pane h3{font-size:clamp(19px,1.8vw,24px);line-height:1.2;
  letter-spacing:-.022em;max-width:16ch;margin:0}
.next-sec .panes .pane .pane-in{gap:clamp(16px,1.8vw,24px);
  padding:clamp(22px,2.4vw,30px) 0 0;
  border-top:1px solid rgba(10,10,10,.16)}
.next-sec .panes{gap:clamp(24px,3vw,52px)}
.next-sec .panes .pane .go{font-size:10px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink);opacity:.85}
.next-sec .panes .pane .go:hover{opacity:1;color:var(--accent)}
@media(max-width:860px){
  .next-sec .panes .pane h3{font-size:20px;max-width:none}
}


/* ─── one close ───────────────────────────────────────────────────
   The page ended with two panes that were both the newsletter: a teaser for
   the latest issue beside a box asking you to subscribe to it. Two headlines
   at the same weight, one ask split in half. This is the single version. The
   issue is still there, as one line under the field, because it is evidence
   that the thing exists rather than a second thing to read. */
#issue .close-one{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--edge);
  background:none}
#issue .close-one > .tiny{display:block;margin:0 0 clamp(14px,1.6vw,22px)}
#issue .close-one h3{font-weight:300;font-size:clamp(26px,3.4vw,44px);line-height:1.12;
  letter-spacing:-.032em;color:var(--ink);max-width:20ch;margin:0}
#issue .close-one > p{margin:clamp(14px,1.6vw,20px) 0 0;max-width:48ch;
  font-size:17px;line-height:1.65;color:var(--body)}
#issue .close-one form{margin:clamp(22px,2.6vw,34px) 0 0}
#issue .close-one .field{max-width:480px;margin:0}
#issue .close-one .fine{margin:12px 0 0;font-size:12px;color:#8F8A83}

/* the latest issue, as a line rather than a panel */
#issue .latest{display:flex;align-items:baseline;gap:clamp(12px,1.6vw,22px);
  flex-wrap:wrap;margin:clamp(30px,3.6vw,48px) 0 0;
  padding:clamp(20px,2.2vw,28px) 0 0;border-top:1px solid rgba(10,10,10,.12);
  text-decoration:none;max-width:var(--wrap)}
#issue .latest .tiny{color:var(--accent);flex:0 0 auto}
#issue .latest b{font-weight:300;font-size:clamp(17px,1.7vw,21px);letter-spacing:-.02em;
  color:var(--ink);flex:1 1 auto;min-width:0}
#issue .latest .latest-go{font-size:10px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink);opacity:.75;flex:0 0 auto;
  transition:opacity .18s,color .18s}
#issue .latest:hover .latest-go{opacity:1;color:var(--accent)}
@media(max-width:860px){
  #issue .close-one h3{font-size:27px;max-width:none}
  #issue .close-one > p{max-width:none}
  #issue .latest{gap:8px}
  #issue .latest b{flex:1 1 100%}
}


/* ─── the application ─────────────────────────────────────────────
   This page never got the restyle the rest of the site had. It was still
   Bodoni headings, red italic numerals, bordered pill badges and a tinted
   card, all of which came off every other page. Same content, same markup,
   the site's own grammar. */
.form-legend{font-family:var(--sans),"Inter",-apple-system,sans-serif;
  font-weight:300;font-size:clamp(21px,2.4vw,29px);line-height:1.14;
  letter-spacing:-.028em;color:var(--ink);text-transform:none;
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 6px}
/* the numeral is apparatus, not ornament */
.form-legend .form-num{font-family:var(--sans),"Inter",-apple-system,sans-serif;
  font-style:normal;font-size:11px;font-weight:600;letter-spacing:.2em;
  color:var(--accent);flex:0 0 auto}
/* required and optional are labels, not pills */
.req-tag,.opt-tag{border:0;border-radius:0;padding:0;background:none;
  font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  line-height:1}
.req-tag{color:var(--accent)}
.opt-tag{color:#8F8A83}
.field-prompt{font-size:16px;line-height:1.65;color:var(--body);max-width:60ch}
.field > label{font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--body)}
.field > span{font-size:13px;color:#8F8A83;line-height:1.55}
.field input,.field textarea,.field select{border-radius:0;
  border:1px solid rgba(10,10,10,.16);background:#fff}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:rgba(10,10,10,.45);outline:none}
/* the optional block was a tinted card floating mid-page */
details.more,.more-card,details.more > summary{background:none;border:0;
  border-radius:0;text-align:left}
details.more > summary{border-top:1px solid rgba(10,10,10,.12);
  padding:clamp(22px,2.4vw,30px) 0 0;cursor:pointer;list-style:none;max-width:none}
details.more > summary h3,details.more > summary p{text-align:left}
/* the page headline was still the display serif while every other page moved
   to Inter. The serif is the mark alone. */
.form-title{font-family:var(--sans),"Inter",-apple-system,sans-serif;
  font-weight:300;font-size:clamp(26px,4vw,58px);line-height:1.12;
  letter-spacing:-.034em;color:var(--ink);max-width:20ch}
/* the intro spans 760 inside the section padding; the form had the same 760 cap
   AND its own gutter inside it, so every field sat a gutter to the right of the
   headline above it. */
.application-form{max-width:calc(760px + var(--gutter) * 2)}
@media(max-width:860px){
  .form-legend{font-size:20px}
  .form-title{font-size:27px;max-width:none}
  .field-prompt{max-width:none}
}

/* ─── one photograph per page ─────────────────────────────────────
   Every inner page drew the same tv-desk crop, greyscaled to .8 and taken down
   to a quarter brightness, so five pages opened on one picture you could barely
   read. They now each take their own frame from the Out of Office shoot the
   homepage hero comes from, and the treatment sits closer to the hero's so the
   pages look like one site rather than two. */
/* no people in any of these: a figure in frame turns a brand photograph into a
   stock photograph, and the whole point of this shoot is the empty room. */
body.p-founders  section.cover::before{background-image:url("/shortlist-brand-assets/photo/bare-desk@1600.jpg")}
/* the telescope frame cropped to a portrait and read as a headshot, which is
   not what a fund is here to look at. A notebook open on the ground is the
   same shoot and the same idea: something being read. */
body.p-investors section.cover::before{background-image:url("/shortlist-brand-assets/photo/notebook@1600.jpg");
  filter:grayscale(.34) brightness(.42) contrast(1.04) saturate(.8)}
/* the lone chair was too dark to register under the wash at all */
body.p-list header.cover::before,body.p-list section.cover::before{background-image:url("/shortlist-brand-assets/photo/papers-wide@1600.jpg")}
body.p-method    section.cover::before{background-image:url("/shortlist-brand-assets/photo/instrument@1600.jpg")}
body.p-privacy   section.cover::before{background-image:url("/shortlist-brand-assets/photo/white-desk@1600.jpg")}

/* ─── the nav action ──────────────────────────────────────────────
   Apply was a filled red rectangle sitting on the photograph, which is the
   default shape every generated page reaches for and the one thing in the bar
   that did not look drawn by the same hand as the rest. It is now the word
   itself in oxblood on a rule, which is how the site sets an action everywhere
   else. Still the only saturated thing in the bar, so it still reads first. */
.sl-cta,.bar nav a.cta{
  background:none!important;border:0!important;border-radius:0!important;
  border-bottom:1px solid var(--red,#A63D40)!important;
  color:#D9776F!important;font-weight:600!important;letter-spacing:.16em!important;
  padding:4px 0 5px!important;transition:color .16s,border-color .16s}
.sl-cta:hover,.bar nav a.cta:hover{
  background:none!important;color:#F8F5EE!important;border-bottom-color:#F8F5EE!important}

/* ─── actions are set, not built ──────────────────────────────────
   Every action on the site was a filled rectangle, which is the one shape a
   generated page always reaches for. They are now the word itself over a rule,
   which is how this site sets an action everywhere it is doing its own thing.
   The colour still carries it: oxblood is the only saturated thing on the page. */
.cover-act{display:inline-block;margin-top:clamp(20px,2.4vw,30px);
  font-family:var(--sans),"Inter",sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:#E08A82;
  border-bottom:1px solid #A63D40;padding:0 0 6px;
  transition:color .16s,border-color .16s}
.cover-act:hover{color:#F8F5EE;border-bottom-color:#F8F5EE}

/* the same on the light ground, where oxblood reads at 5.7:1 */
.section a.cta-primary,p > a.cta-primary{
  background:none!important;border:0!important;border-radius:0!important;
  border-bottom:1px solid var(--red,#A63D40)!important;
  color:var(--red,#A63D40)!important;padding:0 0 6px!important;
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.section a.cta-primary:hover,p > a.cta-primary:hover{
  background:none!important;color:var(--ink,#0A0A0A)!important;
  border-bottom-color:var(--ink,#0A0A0A)!important}

/* two outcomes, not three tiers, so the grid stops at two */
.section-tiers .tiers-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:820px){.section-tiers .tiers-grid{grid-template-columns:1fr}}

/* ─── jobs and refer join the rest of the site ────────────────────
   Both opened on a plain cream band with a small label and a headline, which
   next to five pages that open on a photograph read as unfinished rather than
   restrained. They now take the same cover: photograph, one wash heavy where
   the type sits, kicker in the left column, headline in Inter 200.
   Jobs gets the empty chair, which is what an open role is. Refer gets the
   coiled cord, which is what an introduction is. */
body.p-jobs .jobs-hero,body.p-refer .ref-hero{
  position:relative;isolation:isolate;overflow:hidden;background:#0D0B08;
  max-width:none;margin:0;
  padding:clamp(62px,8vw,120px) max(var(--edge,32px),calc(50vw - 590px + var(--edge,32px)))
          clamp(70px,9vw,132px)}
body.p-jobs .jobs-hero::before,body.p-refer .ref-hero::before{
  content:"";position:absolute;inset:0;z-index:-2;background-size:cover;
  background-position:center 54%;background-repeat:no-repeat;
  filter:grayscale(.30) brightness(.60) contrast(1.02) saturate(.84)}
body.p-jobs .jobs-hero::before{background-image:url("/shortlist-brand-assets/photo/lone-chair@1600.jpg")}
body.p-refer .ref-hero::before{background-image:url("/shortlist-brand-assets/photo/cord@1600.jpg")}
body.p-jobs .jobs-hero::after,body.p-refer .ref-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,rgba(8,8,8,.94) 0%,rgba(8,8,8,.84) 32%,
    rgba(8,8,8,.52) 62%,rgba(8,8,8,.30) 100%)}
body.p-jobs .jobs-hero .kicker,body.p-refer .ref-hero .kicker,
body.p-jobs .jobs-hero .kick,body.p-refer .ref-hero .kick{color:#D2A24A}
body.p-jobs .jobs-hero h1,body.p-jobs .jobs-hero h2,
body.p-refer .ref-hero h1,body.p-refer .ref-hero h2{
  color:#F8F5EE;font-family:var(--sans),"Inter",sans-serif;font-weight:200;
  letter-spacing:-.035em;line-height:1.06;max-width:17ch}
body.p-jobs .jobs-hero p,body.p-refer .ref-hero p{color:#B5B0A6}
/* the second half of the refer headline stays the accent, on a ground where it
   is finally readable: marigold is 6.19:1 on night against 2.92:1 on cream */
body.p-refer .ref-hero h1 em{color:#D2A24A!important}

/* ─── utility pages open on ground, not on a photograph ───────────
   Jobs and the issues archive are lists. A moody photographic hero over five
   job rows is over-dressed, and both were drawing frames so dark they read as a
   broken image rather than a mood. The lone chair had already been pulled off
   the list page for exactly that and should not have gone onto jobs.
   Ground and type instead, which is what the wordmark wants anyway. */
body.p-jobs .jobs-hero::before,
body.p-jobs .jobs-hero::after{content:none}
body.p-jobs .jobs-hero{
  background:
    radial-gradient(120% 88% at 78% 6%,rgba(58,50,38,.55) 0%,rgba(13,11,8,0) 62%),
    radial-gradient(92% 74% at 4% 94%,rgba(42,36,28,.42) 0%,rgba(13,11,8,0) 70%),
    #0D0B08}

body.p-issues section.cover::before,
body.p-issues section.cover::after{content:none}
body.p-issues section.cover{
  background:
    radial-gradient(120% 88% at 78% 6%,rgba(58,50,38,.55) 0%,rgba(13,11,8,0) 62%),
    radial-gradient(92% 74% at 4% 94%,rgba(42,36,28,.42) 0%,rgba(13,11,8,0) 70%),
    #0D0B08}