/* ============================================================
   ESE MSc Marketing — V2 "zen" layer
   Sits ON TOP of ../styles.css. Same theme (paper + gold),
   same dark rotating hero. Goal: calm, airy, far less content.
   ============================================================ */

/* kill the injected open-day/deadline ticker banner on v2 only */
.v2 .ticker{display:none !important}

/* roomier rhythm, narrower measure */
.v2{--maxw:1080px}
.v2 .zsec{position:relative;padding-block:var(--sec-base)}  /* position:relative is load-bearing: ::before/::after overlays are inset:0 and
     without it they resolve against the initial containing block — five grain layers
     and two gold glows stacked on the hero, and no section ever got its texture. */
.v2 .zsec + .zsec{border-top:1px solid var(--line)}
.v2 .zsec.tint{background:var(--surface);border-top:1px solid var(--line)}
.v2 .wrap.narrow{max-width:760px}

/* trim the dark hero: shorter, no busy badges, calmer facts */
.v2 .hero-zen .wrap{padding-block:clamp(48px,7vw,84px)}
.v2 .hero-zen .hero-lead{margin-block:22px 30px}
.v2 .hero-zen .plate-cap{opacity:.7}

/* section headers */
.zhead{max-width:60ch;margin-bottom:clamp(30px,4vw,48px)}
.zhead.center{margin-inline:auto;text-align:center}
.zhead h2{font-size:clamp(1.7rem,1.2rem + 1.9vw,2.7rem);margin:14px 0 0;line-height:1.1}
.zhead p{color:var(--ink-2);font-size:1.08rem;margin:14px 0 0;max-width:56ch}
.zhead.center p{margin-inline:auto}

/* ---- careers highlights ---- */
.cstats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:720px){.cstats{grid-template-columns:1fr;gap:14px}}
.cstat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px}
.tint .cstat{background:var(--paper)}
.cstat b{display:block;font-family:var(--serif);font-size:2rem;color:var(--ink);letter-spacing:-.02em;line-height:1}
.cstat span{display:block;color:var(--ink-2);font-size:.95rem;margin-top:8px}
.clogos{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;align-items:center}

/* career tracks */
.tracks{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:820px){.tracks{grid-template-columns:1fr}}
.track{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 26px}
.tint .track{background:var(--paper)}
.track .rk{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600}
.track h3{font-size:1.28rem;margin:10px 0 8px}
.track p{color:var(--ink-2);font-size:.98rem;margin:0;line-height:1.55}

/* ---- testimonial cards ---- */
.vgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media(max-width:720px){.vgrid{grid-template-columns:1fr}}
.vcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 26px;box-shadow:var(--shadow-sm)}
.tint .vcard{background:var(--paper)}
.vcard blockquote{margin:0 0 18px;font-family:var(--serif);font-size:1.22rem;line-height:1.42;color:var(--ink);font-style:italic}
.vcard figcaption,.vcard.dest{display:flex;align-items:center;gap:14px}
.vcard .av{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--gold-soft);color:#3a3410;font-family:var(--serif);font-weight:700;font-size:1rem;border:1px solid var(--line-2)}
.vcard b{font-weight:600;color:var(--ink);font-size:1.02rem}
.vcard .rl{display:block;color:var(--ink-2);font-size:.9rem;margin-top:2px}
.vcard .co{display:block;color:var(--green-700);font-weight:600;font-size:.86rem;margin-top:3px;font-family:var(--mono);letter-spacing:.02em}

/* ---- blog: quiet list, no heavy thumbs ---- */
.bloglist{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.brow{display:grid;grid-template-columns:auto 120px 1fr auto;align-items:center;gap:22px;padding:22px 6px;border-bottom:1px solid var(--line);color:var(--ink);transition:background var(--dur) var(--ease),padding var(--dur) var(--ease)}
.brow:hover{text-decoration:none;background:var(--surface);padding-inline:16px}
.brow .bcat{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green-700)}
.brow .btitle{font-family:var(--serif);font-size:1.24rem;font-weight:600;line-height:1.24;letter-spacing:-.01em}
.brow:hover .btitle{color:var(--green-800)}
.brow .bmeta{font-family:var(--mono);font-size:.74rem;color:var(--ink-3);white-space:nowrap}
@media(max-width:640px){.brow{grid-template-columns:auto 1fr;gap:6px 14px}.brow .bmeta{order:-1}.brow .bthumb{grid-row:1/4}}

/* ---- big blog list on blog.html ---- */
.blogfull .brow .btitle{font-size:1.4rem}
.blogfull .brow p{grid-column:2;color:var(--ink-2);font-size:.98rem;margin:6px 0 0;max-width:62ch}
@media(max-width:640px){.blogfull .brow p{grid-column:1}}

/* ---- faq accordion, hairline ---- */
.v2 .faq details{border-bottom:1px solid var(--line)}

.v2 .zsec .source{display:block;margin-top:18px}

/* a11y: eyebrows on light bands must not use low-contrast gold */
.v2 .zsec .eyebrow{color:var(--green-700) !important}
.v2 .zsec .eyebrow::before{background:var(--green-700)}

/* ============================================================
   V2 — gold made prominent (ESE colours), kept accessible
   ============================================================ */
/* accessible gold for TEXT on light paper (deeper so it passes AA) */
.v2{--gold-ink:#7a5e00}  /* AA: 5.2:1 on --paper, 4.7:1 on tint, 5.8:1 on --surface.
   Was #8a6a00, which measured 4.30 on paper and 3.90 on the tint band — both fail AA. */
/* eyebrow: dark, readable label + a bold prominent GOLD bar */
.v2 .zsec .eyebrow{color:var(--ink-2) !important}
.v2 .zsec .eyebrow::before{background:var(--gold);width:30px;height:2.5px}
/* gold hairline on top of every light section for rhythm */
.v2 .zsec + .zsec{border-top:2px solid var(--gold)}
.v2 .zsec.tint{border-top:2px solid var(--gold)}
/* gold top-accent on cards */
.v2 .cstat,.v2 .track,.v2 .vcard{border-top:3px solid var(--gold)}
/* gold underline flourish under section headings */
.v2 .zhead h2{position:relative;padding-bottom:14px}
.v2 .zhead h2::after{content:"";position:absolute;left:0;bottom:0;width:54px;height:3px;background:var(--gold);border-radius:2px}
/* track kicker + blog category in accessible deep gold */
.v2 .track .rk{color:var(--gold-ink)}
.v2 .post .post-cat{background:var(--gold);color:#141313}
/* page-hero crumb + h1 get a gold tick */
.v2 .page-hero h1{border-left:5px solid var(--gold);padding-left:18px;margin-left:-23px}
@media(max-width:640px){.v2 .page-hero h1{margin-left:0;padding-left:14px;border-left-width:4px}}

/* ============================================================
   Social "Stay up to date" band (EN + logos) — theme gold
   ============================================================ */
.follow-h{font-family:var(--serif);font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem);margin:0 0 26px}
.follow-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:760px){.follow-grid{grid-template-columns:1fr}}
.follow-card{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:var(--r-lg);padding:24px 26px;color:var(--ink);box-shadow:var(--shadow-sm);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.tint .follow-card{background:var(--paper)}
.follow-card:hover{text-decoration:none;transform:translateY(-2px);box-shadow:var(--shadow)}
.follow-card .fc-eyebrow{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);font-weight:600}
.follow-card .fc-name{display:block;font-family:var(--serif);font-size:1.5rem;font-weight:600;color:var(--ink);margin-top:4px;letter-spacing:-.01em}
.follow-card .fc-ico{flex:none;width:40px;height:40px;color:var(--gold);opacity:.9}
.follow-card:hover .fc-ico{opacity:1}

/* ============================================================
   V2 REDESIGN — floating nav bar + reworked light hero
   ============================================================ */
/* --- floating rounded nav card (over the hero) --- */
.v2 .nav{position:static;z-index:50;background:transparent;border:0;backdrop-filter:none;padding:14px clamp(12px,3vw,26px) 0}
.v2 .nav .wrap{max-width:1140px;height:66px;background:rgba(251,248,240,.92);backdrop-filter:blur(16px) saturate(1.1);border:1px solid var(--line-2);border-radius:20px;box-shadow:0 16px 48px -22px rgba(20,20,20,.42),0 2px 0 rgba(246,184,0,.9);padding-inline:22px}
.v2 .nav nav a[aria-current="page"]{border-color:var(--gold)}
@media(max-width:1039px){.v2 .nav .wrap{height:60px;border-radius:16px}}

/* --- redesigned hero (light, gold diagonal wedge, floating photo) --- */
.herov2{position:relative;overflow:hidden;background:var(--paper)}
.herov2-wedge{position:absolute;inset:0;z-index:0}
.herov2-wedge::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 10% -10%,rgba(246,184,0,.22),transparent 58%),linear-gradient(180deg,var(--surface),var(--paper))}
.herov2-wedge::after{content:"";position:absolute;right:-12%;top:-30%;width:62%;height:170%;transform:skewX(-13deg);background:linear-gradient(135deg,rgba(246,184,0,.20),rgba(246,184,0,.04));border-left:3px solid rgba(246,184,0,.65)}
.herov2-inner{position:relative;z-index:1;display:grid;gap:40px;align-items:center;padding-block:clamp(30px,5vw,60px) clamp(52px,8vw,92px)}
@media(min-width:940px){.herov2-inner{grid-template-columns:1.05fr .95fr}}
.herov2-kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);font-weight:600}
.herov2-kicker::before{content:"";width:26px;height:2.5px;background:var(--gold)}
.herov2 h1{font-size:clamp(2.8rem,1.9rem + 5vw,5.6rem);letter-spacing:-.03em;line-height:.98;margin:18px 0 0;color:var(--ink);font-family:var(--serif);font-weight:600}
.herov2 h1 .u{color:var(--gold-ink);font-style:italic;position:relative;z-index:0}
.herov2 h1 .u::after{content:"";position:absolute;left:-.02em;right:-.02em;bottom:.08em;height:.16em;background:var(--gold);opacity:.55;z-index:-1;border-radius:2px}
.herov2-lead{font-family:var(--serif);font-size:clamp(1.1rem,1rem + .5vw,1.42rem);color:var(--ink-2);max-width:46ch;margin:22px 0 30px;line-height:1.5}
.herov2-cta{display:flex;gap:12px;flex-wrap:wrap}
.herov2-facts{display:flex;flex-wrap:wrap;gap:20px 34px;margin-top:38px;padding-top:22px;border-top:2px solid var(--gold)}
.herov2-facts span{font-size:.88rem;color:var(--ink-2)}
.herov2-facts b{display:block;font-family:var(--serif);font-size:1.12rem;color:var(--ink)}
/* .herov2-media: removed — the old floating-photo hero, selected by nothing. */
.herov2 .hero-chip{position:absolute;right:-8px;bottom:-20px;background:var(--ink);color:#fff;border-radius:16px;padding:15px 20px;box-shadow:var(--shadow-lg);max-width:238px;border:1px solid rgba(255,255,255,.08);z-index:3}
.herov2 .hero-chip .num{display:block;font-family:var(--serif);font-size:1.5rem;color:var(--gold);line-height:1}
.herov2 .hero-chip span{display:block;font-size:.8rem;color:rgba(255,255,255,.82);margin-top:4px}
.herov2 .hero-chip .source{color:rgba(255,255,255,.5);margin-top:7px;font-size:.66rem}
@media(max-width:939px){.herov2 .hero-chip{position:static;margin-top:20px;max-width:none}}

/* ============================================================
   V2 HERO v3 — FULL-BLEED image, dark gold scrim (fixes "too light")
   Overrides the pale floating-card hero above.
   ============================================================ */
.herov2{min-height:clamp(580px,84vh,780px);display:flex;align-items:center;background:#100f0e;color:#fff;overflow:hidden;position:relative}
.herov2-wedge{display:none}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg .hero-carousel{position:absolute;inset:0;border:0;border-radius:0;box-shadow:none;aspect-ratio:auto;background:none}
.hero-bg .hslide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s var(--ease)}
.hero-bg .hslide.active{opacity:1}
.herov2 .hdots{position:absolute;right:22px;bottom:20px;left:auto;transform:none;display:flex;align-items:center;gap:8px;z-index:4}
.herov2 .hdot{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.55);cursor:pointer;transition:width var(--dur) var(--ease),background var(--dur)}
.herov2 .hdot.active{background:var(--gold);width:24px;border-radius:5px}
.hero-scrim{position:absolute;inset:0;z-index:1;background:
  linear-gradient(90deg,rgba(12,11,10,.95),rgba(12,11,10,.82) 36%,rgba(12,11,10,.34) 64%,rgba(12,11,10,.04) 88%),
  linear-gradient(0deg,rgba(12,11,10,.6),transparent 46%),
  radial-gradient(65% 65% at 6% 16%,rgba(246,184,0,.16),transparent 62%)}
.herov2-inner{position:relative;z-index:2;display:block;padding-block:clamp(44px,7vw,88px)}
.herov2-copy{max-width:620px}
.herov2 .herov2-kicker{color:var(--gold)}
.herov2 h1{color:#fff;font-size:clamp(3rem,2rem + 5.4vw,6rem);margin-top:16px}
.herov2 h1 .u{color:var(--gold)}
.herov2 h1 .u::after{background:var(--gold);opacity:.38}
.herov2-lead{color:rgba(255,255,255,.9);font-style:italic;max-width:44ch}
.herov2-facts{border-top:2px solid rgba(255,255,255,.28)}
.herov2-facts span{color:rgba(255,255,255,.78)}
.herov2-facts b{color:#fff}
.btn-hero-ghost{background:rgba(255,255,255,.09);color:#fff;border:1.5px solid rgba(255,255,255,.42);backdrop-filter:blur(4px)}
.btn-hero-ghost:hover{background:rgba(255,255,255,.17);border-color:#fff;text-decoration:none}
.herov2 .hero-chip{position:absolute;right:clamp(16px,4vw,52px);bottom:26px;z-index:3;background:rgba(16,15,14,.82);backdrop-filter:blur(8px);border:1px solid rgba(246,184,0,.4);max-width:240px}
.herov2 .hero-chip .num{color:var(--gold)}
@media(max-width:780px){.herov2 .hero-chip{display:none}}

/* ============================================================
   V2 tuning — nav overlays image + wider; hero text clears billboard;
   light inner heroes (de-stack careers); clean logo name-pills
   ============================================================ */
/* wider floating bar (the narrow look was the zen --maxw) */
.v2{--maxw:1220px}
.v2 .nav .wrap{max-width:none;margin-inline:clamp(14px,2.5vw,46px)}
.v2.p-home .nav .wrap{background:rgba(251,248,240,.85)}

/* HOME: pull the hero up so the floating bar OVERLAYS the image */
.v2.p-home .herov2{margin-top:-82px}
.v2.p-home .herov2-inner{padding-top:clamp(120px,12vw,160px)}

/* stop the billboard's own text clashing with our headline:
   shift image right (billboard sits in the lighter right zone) */
.herov2 .hslide{object-position:74% center}
.hero-scrim{background:
  linear-gradient(90deg,rgba(12,11,10,.96),rgba(12,11,10,.9) 34%,rgba(12,11,10,.62) 52%,rgba(12,11,10,.24) 74%,rgba(12,11,10,.06) 92%),
  linear-gradient(0deg,rgba(12,11,10,.62),transparent 46%),
  radial-gradient(60% 60% at 4% 16%,rgba(246,184,0,.14),transparent 60%)}

/* inner-page heroes: light + zen (de-stacks Careers' dark hero+band) */
.v2 .page-hero{background:var(--paper);color:var(--ink)}
/* NOTE: ::before is reclaimed as the per-page watermark further down; the grain
   overlay it used to carry now lives on .v2 .page-hero::after. */
.v2 .page-hero .crumb,.v2 .page-hero .crumb a{color:var(--ink-3)}
.v2 .page-hero h1{color:var(--ink)}
.v2 .page-hero p{color:var(--ink-2)}
.v2 .page-hero{border-bottom:2px solid var(--gold)}

/* logo chips -> clean monochrome NAME pills (no cheap favicons) */
.v2 .chip.logo img{display:none}
.v2 .chip.logo{width:auto;height:auto;min-width:0;padding:8px 15px;border-radius:999px;background:var(--surface);border:1px solid var(--line-2);font-family:var(--sans);font-weight:600;font-size:.82rem;color:var(--ink-2);letter-spacing:-.01em;line-height:1;display:inline-flex;align-items:center}
.v2 .chip.logo::after{content:attr(data-name)}
.v2 .career .chip.logo,.v2 .cshow .chip.logo{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.92)}

/* hero: defined dark LEFT content panel so our text never fights the
   billboard text in the mockups; image + its text live on the right */
.herov2-copy{max-width:560px}
.herov2 .hslide{object-position:86% center}
.hero-scrim{background:
  linear-gradient(90deg,rgba(11,10,9,.97) 0%,rgba(11,10,9,.95) 42%,rgba(11,10,9,.72) 56%,rgba(11,10,9,.32) 74%,rgba(11,10,9,.06) 92%,transparent 100%),
  linear-gradient(0deg,rgba(11,10,9,.5),transparent 42%),
  radial-gradient(55% 60% at 3% 16%,rgba(246,184,0,.13),transparent 60%)}

/* ============================================================
   HERO SPLIT (final) — dark gold panel left (our copy),
   rotating image right (its OWN text fully visible). No overlap.
   ============================================================ */
.herov2{display:flex;align-items:center}
.hero-bg{left:auto;right:0;width:58%}
.herov2 .hslide{object-position:center}
.hero-scrim{left:0;right:auto;width:55%;clip-path:polygon(0 0,100% 0,calc(100% - 6vw) 100%,0 100%);
  background:radial-gradient(64% 72% at 12% 20%,rgba(246,184,0,.20),transparent 56%),linear-gradient(118deg,#151210,#241d14)}
.herov2-copy{max-width:520px}
.herov2 .hero-chip{right:clamp(16px,3vw,42px);bottom:24px}
@media(max-width:860px){
  .hero-bg{width:100%}
  .hero-scrim{width:100%;clip-path:none;background:linear-gradient(90deg,rgba(12,11,10,.96),rgba(12,11,10,.72) 58%,rgba(12,11,10,.34)),radial-gradient(60% 60% at 6% 16%,rgba(246,184,0,.14),transparent 60%)}
}

/* hero copy: refine the "proven." accent (was a heavy block) + tighten rhythm */
.herov2 h1 .u::after{left:.02em;right:.08em;bottom:.04em;height:.055em;opacity:.9;border-radius:2px}
.herov2 h1{margin-top:14px}
.herov2-lead{margin:26px 0 32px;line-height:1.55;color:rgba(255,255,255,.86)}
.herov2-cta{gap:14px}
.herov2-facts{margin-top:34px;padding-top:20px;gap:18px 40px;max-width:520px}
.herov2-facts b{font-size:1.08rem;margin-bottom:2px}
.herov2-kicker{letter-spacing:.18em}

/* hero: give the copy its OWN left area (inside the dark panel) + bigger headline */
.herov2 .herov2-inner{max-width:none;width:100%;padding-inline:clamp(40px,6vw,104px)}
.herov2-copy{max-width:500px;margin-left:0}
.herov2 h1{font-size:clamp(3.2rem,2rem + 6vw,6.6rem);line-height:.95}
.herov2-lead{max-width:26ch}
.herov2-facts{max-width:500px}

/* ============================================================
   HERO — merged design-swarm refinements (final)
   ============================================================ */
/* headline: keep it LARGE + prominent, tighten leading/tracking */
.herov2 h1{font-size:clamp(3.1rem,2rem + 6vw,6.2rem);line-height:.93;letter-spacing:-.035em;margin:14px 0 0;text-wrap:balance}
/* "proven." accent: thin, fully-saturated gold rule (no more heavy slab) */
.herov2 h1 .u{text-decoration:none}
.herov2 h1 .u::after{left:.01em;right:.02em;bottom:.03em;height:.06em;opacity:1;border-radius:2px;background:var(--gold)}
/* kicker as a quiet label */
.herov2-kicker{font-size:.7rem;letter-spacing:.18em;gap:12px;margin-bottom:2px}
/* lead: calmer size, shorter measure so it stays on the panel */
.herov2-lead{font-size:clamp(1.05rem,1rem + .35vw,1.24rem);line-height:1.45;max-width:30ch;color:rgba(255,255,255,.86);margin:20px 0 0}
/* even vertical rhythm + true vertical centering in the panel */
.herov2{align-items:stretch}
.v2.p-home .herov2-inner{display:flex;flex-direction:column;justify-content:center;min-height:100%;padding-top:clamp(104px,11vw,148px);padding-bottom:clamp(52px,8vw,92px)}
.herov2-copy{display:flex;flex-direction:column;align-items:flex-start;max-width:500px}
.herov2-cta{margin-top:26px;gap:14px;align-items:center}
.herov2-cta .btn{min-height:48px}
.btn-hero-ghost{background:transparent;border-color:rgba(255,255,255,.36)}
/* facts: fixed 3-col, mono micro-label + serif value, hairline divider */
.herov2-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(16px,2vw,26px);width:100%;max-width:480px;margin-top:30px;padding-top:20px;border-top:1px solid rgba(255,255,255,.2)}
.herov2-facts span{display:flex;flex-direction:column;gap:3px;font-family:var(--mono);font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.6);line-height:1.35}
.herov2-facts b{font-family:var(--serif);font-weight:600;font-size:1.1rem;letter-spacing:-.01em;text-transform:none;color:#fff;margin:0}
/* CONTAINMENT: stop copy crossing the diagonal seam at mid widths */
@media(min-width:861px) and (max-width:1180px){
  .herov2 .hero-scrim{width:64%}
  .herov2 .hero-bg{width:52%}
  .herov2-copy{max-width:min(500px,50vw)}
}
@media(max-width:860px){
  .herov2-copy{max-width:min(560px,88vw)}
  .herov2-facts{gap:0 20px;max-width:none}
  .v2.p-home .herov2-inner{padding-top:clamp(96px,22vw,132px)}
}
@media(max-width:460px){
  .herov2-facts{grid-template-columns:1fr 1fr}
  .herov2-facts span:last-child{grid-column:1/-1;margin-top:8px}
}

/* ============================================================
   HERO fit — no dead space, facts above the fold, chip on image
   ============================================================ */
/* height = content (kills the empty bottom band; image crops to fit) */
.v2.p-home .herov2{min-height:auto}
.v2.p-home .herov2-inner{padding-top:clamp(92px,10vw,118px);padding-bottom:clamp(34px,4.5vw,54px)}
/* headline still big+prominent but a touch shorter so facts fit on load */
.herov2 h1{font-size:clamp(3rem,1.9rem + 5vw,5.6rem)}
/* lead fills the panel width better */
.herov2-copy{max-width:540px}
.herov2-lead{max-width:34ch;margin:18px 0 0}
.herov2-cta{margin-top:24px}
.herov2-facts{margin-top:26px;padding-top:18px}
/* ~2 months chip overlaid on the IMAGE side (right) */
.herov2 .hero-chip{left:auto;top:auto;right:clamp(20px,4vw,56px);bottom:clamp(24px,5vw,50px);z-index:4}

/* FORCE hero copy hard-left (its own area on the dark panel) */
.v2.p-home .herov2-inner{max-width:none !important;width:100% !important;margin:0 !important;align-items:flex-start !important;padding-left:clamp(32px,4.5vw,80px) !important;padding-right:clamp(20px,3vw,48px) !important}
.v2.p-home .herov2-copy{margin:0 !important;align-self:flex-start !important}

/* hero copy: fill the panel (less gap to image), stretch lead, lift block up */
.v2.p-home .herov2-inner{justify-content:flex-start !important;padding-top:clamp(74px,8vw,102px) !important;padding-bottom:clamp(30px,4vw,48px) !important}
.v2.p-home .herov2-copy{max-width:640px !important}
.herov2-lead{max-width:42ch;margin-top:22px}
.herov2-facts{max-width:600px}

/* ============================================================
   HERO fill (swarm) — widths track the panel, block lifted
   ============================================================ */
/* Widths track the image seam, so they are meaningful ONLY where the two-zone
   layout exists. Fenced at 861px to match the .hero-scrim/.hero-bg split below. */
@media(min-width:861px){
  .v2.p-home .herov2-copy{max-width:min(48vw,780px) !important}
  .herov2 h1{max-width:min(48vw,760px);width:100%}
  .herov2-facts{max-width:min(44vw,700px) !important;gap:0 clamp(28px,3.2vw,60px)}
}
.herov2 h1{margin-top:12px}
.v2.p-home .herov2-inner{padding-top:clamp(56px,6vw,84px) !important;padding-bottom:clamp(26px,3.2vw,42px) !important}
.herov2-lead{max-width:54ch;line-height:1.5;margin-top:20px}
.herov2-cta{margin-top:22px}
.herov2-facts{margin-top:24px;padding-top:18px}
@media(min-width:861px) and (max-width:1180px){
  .v2.p-home .herov2-copy{max-width:min(52vw,640px) !important}
  .herov2 h1{max-width:min(52vw,600px)}
  .herov2-facts{max-width:min(50vw,560px) !important}
}

/* ============================================================
   "Scroll for more" — vertical cue (home hero)
   ============================================================ */
.scroll-hint{position:absolute;left:clamp(18px,3.2vw,42px);bottom:0;z-index:5;display:none;flex-direction:column;align-items:center;gap:14px;padding-bottom:clamp(16px,3vw,34px);color:rgba(255,255,255,.72)}
.v2.p-home .scroll-hint{display:flex}
.scroll-hint:hover{text-decoration:none;color:#fff}
.scroll-hint span{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase}
.scroll-hint i{width:1.5px;height:52px;background:linear-gradient(var(--gold),rgba(246,184,0,0));border-radius:2px;animation:scrollpulse 2.2s ease-in-out infinite}
@keyframes scrollpulse{0%,100%{opacity:.4;transform:scaleY(.6);transform-origin:top}50%{opacity:1;transform:scaleY(1);transform-origin:top}}
@media (prefers-reduced-motion:reduce){.scroll-hint i{animation:none;opacity:.8}}
@media(max-width:860px){.scroll-hint{display:none !important}}

/* move "scroll for more" onto the IMAGE side (declutters the left panel) */
.v2.p-home .scroll-hint{left:auto;bottom:auto;right:clamp(16px,2vw,30px);top:50%;transform:translateY(-50%);padding-bottom:0;color:rgba(255,255,255,.92);text-shadow:0 1px 8px rgba(0,0,0,.55)}
.v2.p-home .scroll-hint i{background:linear-gradient(#fff,rgba(255,255,255,0));box-shadow:0 1px 6px rgba(0,0,0,.4)}

/* hero: more air between the text tiers (was cramped) */
.v2.p-home .herov2-inner{padding-top:clamp(46px,5vw,74px) !important}
.herov2-kicker{margin-bottom:8px}
.herov2 h1{margin-top:22px !important}
.herov2-lead{margin-top:30px !important;line-height:1.55}
.herov2-cta{margin-top:38px !important}
.herov2-facts{margin-top:40px !important;padding-top:26px !important}

/* ============================================================
   SKILL-SWARM FIXES — a11y contrast, dead-system revival, WP-safe
   ============================================================ */
/* reveal + JS-search are progressive enhancement: never blank in a WP port */
html:not(.js) .reveal{opacity:1 !important;transform:none !important}
html:not(.js) .faq-search,html:not(.js) .faq-empty{display:none}

/* AA contrast: gold/grey on light paper */
.v2 .zsec .source,.v2 .page-hero .crumb,.v2 .page-hero .crumb a{color:var(--ink-2)}
.v2 .brow .bmeta{color:var(--ink-2)}
.v2 .faq summary::before{color:var(--gold-ink)}
.p-blog .post-meta,.p-blog .featured .post-meta,.p-blog .source{color:#5c6459}

/* drop the redundant per-section gold underline (read templated) */
.v2 .zhead h2::after{display:none}

/* name-pills: real text content now lives in the DOM */
.v2 .chip.logo::after{content:none}
.v2 .chip.logo img{display:none}
.v2 .chip.logo{width:auto;height:auto;min-width:0;padding:8px 15px;border-radius:999px;background:var(--surface);border:1px solid var(--line-2);font-family:var(--sans);font-weight:600;font-size:.82rem;color:var(--ink-2);letter-spacing:-.01em;line-height:1;display:inline-flex;align-items:center}
.v2 .career .chip.logo,.v2 .cshow .chip.logo{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.92)}

/* careers office carousel: ≥24px dot hit area, gold active */
/* capsule scrim: the inactive dots vanished against bright skies (ASML, Booking) */
.v2 .off-dots{background:rgba(12,11,10,.45);backdrop-filter:blur(5px);border-radius:999px;padding:1px 5px}
.v2 .off-dot{width:24px;height:24px;background:transparent;position:relative;border:0}
.v2 .off-dot::after{content:"";position:absolute;inset:0;margin:auto;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5);transition:background .2s,transform .2s}
.v2 .off-dot.active::after{background:var(--gold);transform:scale(1.3)}
.v2 .off-dot:hover::after{background:rgba(255,255,255,.85)}
.v2 .off-dots{gap:5px}

/* home careers teaser: tighten so it is not an empty band */
.v2 #careers{padding-block:clamp(44px,6vw,76px)}
.v2 #careers .zhead{margin-bottom:18px}

/* alumni voices: even card heights + full-width featured quote + 3-up grid
   section-scoped (not body-class-scoped) so it survives the WP block theme too */
.v2 .vgrid{align-items:start}
.vlead{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:clamp(28px,4vw,44px);margin:0 0 18px;position:relative}
.tint .vlead{background:var(--paper)}
.vlead::before{content:"\201C" / "";position:absolute;top:2px;left:22px;font-family:var(--serif);font-size:5rem;line-height:1;color:var(--gold);opacity:.24}
.vlead blockquote{margin:0 0 20px;font-family:var(--serif);font-size:clamp(1.35rem,1.1rem + 1vw,1.9rem);line-height:1.34;color:var(--ink);max-width:36ch}
.vlead figcaption{display:flex;align-items:center;gap:14px}
#alumni .vgrid{grid-template-columns:repeat(3,1fr);margin:0;padding:0;list-style:none;align-items:stretch}
@media(max-width:820px){#alumni .vgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){#alumni .vgrid{grid-template-columns:1fr}}
/* even card heights per row: quote grows, attribution sits on the baseline */
#alumni .vcard{display:flex;flex-direction:column}
#alumni .vcard figcaption{margin-top:auto}

/* blog: preview cards (non-link) + coming-soon cue + band padding */
.p-blog .post.is-preview{cursor:default}
.p-blog .post.is-preview:hover{transform:none;box-shadow:var(--shadow-sm)}
.p-blog .post.is-preview:hover .post-thumb img{transform:none}
.p-blog .post.is-preview:hover .post-body h3{color:var(--ink)}
.p-blog #inbox .wrap{padding-block:clamp(56px,8vw,104px)}

/* faq group header rhythm */
.v2 .faq-h{padding-bottom:8px}

/* featured alumni caption: avatar circle + stacked name/role */
.vlead .av{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--gold-soft);color:#3a3410;font-family:var(--serif);font-weight:700;font-size:1rem;border:1px solid var(--line-2)}
.vlead figcaption b{display:block;font-weight:600;color:var(--ink)}
.vlead .rl{display:block;color:var(--ink-2);font-size:.9rem;margin-top:2px}

/* ============================================================
   RICHER EDITORIAL — depth + contrast (kill the flat pale look)
   ============================================================ */
/* paper grain over light sections for print-stock texture */
.v2 .zsec::before{content:"";position:absolute;inset:0;background:var(--grain);opacity:.4;mix-blend-mode:multiply;pointer-events:none;z-index:0}
.v2 .zsec > .wrap{position:relative;z-index:1}

/* deeper, clearly-different tint band + warm gold corner glow */
.v2 .zsec.tint{background:linear-gradient(180deg,#eae1cd,#f1ebdb)}
.v2 .zsec.tint::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(56% 66% at 90% -6%,rgba(246,184,0,.13),transparent 60%)}

/* bolder section headers so light bands carry weight */
.v2 .zhead h2{font-size:clamp(1.9rem,1.3rem + 2.1vw,3rem)}
.v2 .zhead .eyebrow{font-size:.76rem}

/* richer inner page-hero: warm gradient + gold glow + presence */
.v2 .page-hero{background:radial-gradient(66% 120% at 0% 0,rgba(246,184,0,.14),transparent 52%),linear-gradient(180deg,#f5f0e4,var(--paper));border-bottom:2px solid var(--gold);position:relative;overflow:hidden}
.v2 .page-hero::after{content:"";position:absolute;inset:0;background:var(--grain);opacity:.35;mix-blend-mode:multiply;pointer-events:none;z-index:0}
.v2 .page-hero > .wrap{position:relative;z-index:1}
.v2 .page-hero h1{font-size:clamp(2.4rem,1.6rem + 3vw,4rem)}

/* FAQ: carded groups + gold hover so it reads structured, not floating */
.v2 .faq-group{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:4px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);position:relative;z-index:1}
.v2 .faq-group .faq-h{border-bottom:1px solid var(--line);margin-bottom:4px}
.v2 .faq details:last-child{border-bottom:0}
.v2 .faq summary{transition:color .2s var(--ease)}
.v2 .faq summary:hover{color:var(--green-800)}

/* ============================================================
   BOLD inner page-heroes — dark charcoal+gold, textured, watermark
   (replaces the pale/boring version)
   ============================================================ */
.v2 .page-hero{position:relative;overflow:hidden;color:#fff;border-bottom:3px solid var(--gold);
  background:radial-gradient(78% 130% at 90% -14%,rgba(246,184,0,.18),transparent 55%),linear-gradient(155deg,#272219,#100f0e 72%)}
.v2 .page-hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;mix-blend-mode:overlay;background:var(--grain),var(--grid-dark);background-size:180px 180px,120px 120px}
/* giant faded gold watermark fills the empty right side
   (resets inset/background/opacity/mask inherited from styles.css .page-hero::before) */
.v2 .page-hero::before{content:"";display:block;position:absolute;inset:auto;background:none;opacity:1;mask-image:none;right:-1.5%;top:50%;transform:translateY(-50%);z-index:1;pointer-events:none;white-space:nowrap;font-family:var(--serif);font-weight:700;font-size:clamp(6rem,15vw,14rem);line-height:.8;letter-spacing:-.045em;color:rgba(246,184,0,.09)}
.p-faq .page-hero::before{content:"FAQ"}
.p-blog .page-hero::before{content:"Journal"}
.p-careers .page-hero::before{content:"Careers"}
.p-legal .page-hero::before{content:"Privacy"}
.v2 .page-hero > .wrap{position:relative;z-index:2}
.v2 .page-hero h1{color:#fff;border-left-color:var(--gold)}
.v2 .page-hero .crumb,.v2 .page-hero .crumb a{color:rgba(255,255,255,.62)}
.v2 .page-hero p{color:rgba(255,255,255,.84)}

/* watermark a touch more present */
.v2 .page-hero::before{color:rgba(246,184,0,.12)}

/* ============================================================
   BLOG redesign — magazine featured (title overlaid on image)
   ============================================================ */
.p-blog .featured{position:relative;display:block;min-height:clamp(360px,46vw,500px);border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-2);box-shadow:var(--shadow)}
.p-blog .featured .fmedia{position:absolute;inset:0;margin:0;border-radius:0}
.p-blog .featured .fmedia img{width:100%;height:100%;object-fit:cover}
.p-blog .featured .fcat{position:absolute;top:18px;left:18px;z-index:2;background:var(--gold);color:#141313;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;padding:7px 13px;border-radius:999px;font-weight:600}
.p-blog .featured .fbody{position:absolute;left:0;right:0;bottom:0;z-index:1;max-width:none;padding:clamp(28px,5vw,56px);color:#fff;background:linear-gradient(transparent,rgba(12,11,10,.4) 30%,rgba(10,9,8,.92))}
.p-blog .featured .fbody .post-meta{color:rgba(255,255,255,.82)}
.p-blog .featured .fbody .post-meta::before{background:var(--gold)}
.p-blog .featured .fbody h2{color:#fff;font-size:clamp(1.7rem,1.1rem + 1.9vw,2.9rem);line-height:1.05;max-width:22ch;margin:10px 0}
.p-blog .featured .fbody p{color:rgba(255,255,255,.86);max-width:56ch}
.p-blog .featured .fauthor{margin-top:14px}
.p-blog .featured .fauthor .nm{color:#fff}
.p-blog .featured .fauthor .rl{color:rgba(255,255,255,.72)}
.p-blog .featured .fauthor .av{background:var(--gold);color:#141313}

/* grid cards: a little more presence */
.p-blog .postgrid{gap:24px}
.p-blog .post{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);box-shadow:var(--shadow-sm);transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
.p-blog .post:not(.is-preview):hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.p-blog .post .post-thumb{aspect-ratio:16/10}
.p-blog .post .post-body{padding:20px 22px 24px}

/* ============================================================
   BLOG — "THE REVIEW" journal/index (court winner)
   Dark hero kept; lead essay (one photo) + numbered type index.
   ============================================================ */
/* colophon strip inside the dark page-hero */
.p-blog .page-hero .rev-colophon{display:flex;flex-wrap:wrap;gap:0;margin:26px 0 0;border-top:1px solid rgba(255,255,255,.18);padding-top:16px}
.p-blog .page-hero .rev-colophon > div{padding-right:clamp(20px,3vw,44px);margin-right:clamp(20px,3vw,44px);border-right:1px solid rgba(255,255,255,.18)}
.p-blog .page-hero .rev-colophon > div:last-child{border:0;margin:0;padding-right:0}
.p-blog .page-hero .rev-colophon dt{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);margin:0 0 3px}
.p-blog .page-hero .rev-colophon dd{font-family:var(--serif);font-size:.98rem;color:#fff;margin:0;font-weight:600}
@media(max-width:460px){.p-blog .page-hero .rev-colophon > div{border:0;margin:0;padding-right:20px;flex:1 0 45%;margin-bottom:8px}}

/* shared: category tag + coming-soon */
.p-blog .rev-cat{display:inline-block;font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;font-weight:500;color:var(--gold-ink)}
.p-blog .rev-soon{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:#5c6459;margin:0;display:inline-flex;align-items:center;gap:8px}
.p-blog .rev-soon::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none;box-shadow:0 0 0 3px rgba(246,184,0,.22)}

/* lead essay */
.p-blog .rev-lead{display:grid;gap:clamp(22px,4vw,44px);align-items:center;padding:clamp(30px,5vw,52px) 0 clamp(34px,5vw,56px);border-bottom:3px double var(--ink)}
@media(min-width:820px){.p-blog .rev-lead{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}}
.p-blog .rev-lead-media{position:relative;display:block;aspect-ratio:5/4;overflow:hidden;border-radius:var(--r-lg);border:1px solid var(--line-2);box-shadow:var(--shadow);background:var(--surface)}
.p-blog .rev-lead-media img{width:100%;height:100%;object-fit:cover;display:block}
.p-blog .rev-lead-tag{position:absolute;left:16px;top:16px;background:var(--gold);color:#141313;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding:7px 13px;border-radius:999px}
.p-blog .rev-kicker{margin:0 0 12px}
.p-blog .rev-lead-flag{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);font-weight:600;padding:4px 11px;border:1px solid var(--gold);border-radius:999px;background:rgba(246,184,0,.12)}
.p-blog .rev-lead-title{font-family:var(--serif);font-weight:700;color:var(--ink);font-size:clamp(1.9rem,1.3rem + 2.4vw,3.2rem);line-height:1.04;letter-spacing:-.02em;margin:0 0 .4em;text-wrap:balance}
.p-blog .rev-dek{font-family:var(--serif);color:var(--ink-2);font-size:clamp(1.02rem,.98rem + .35vw,1.18rem);line-height:1.55;max-width:52ch;margin:0 0 20px}
.p-blog .rev-byline{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 14px}
.p-blog .rev-by{font-family:var(--sans);font-weight:600;font-size:.92rem;color:var(--ink)}
.p-blog .rev-meta{font-family:var(--mono);font-size:.76rem;color:#5c6459;letter-spacing:.02em}

/* index / contents */
.p-blog .rev-index{padding-top:clamp(20px,3vw,34px)}
.p-blog .rev-index-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 6px}
.p-blog .rev-index-title{font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);margin:0}
.p-blog .rev-index-count{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:0}
.p-blog .rev-list{list-style:none;margin:0;padding:0;counter-reset:rev;border-top:2px solid var(--ink)}
.p-blog .rev-item{border-bottom:1px solid var(--line)}
.p-blog .rev-row{counter-increment:rev;display:grid;grid-template-columns:auto auto 1fr auto;align-items:baseline;gap:clamp(16px,3vw,34px);padding:clamp(20px,2.6vw,30px) clamp(6px,1.5vw,14px);transition:background var(--dur) var(--ease),padding var(--dur) var(--ease)}
.p-blog .rev-item:hover .rev-row{background:var(--surface);padding-inline:clamp(14px,2.5vw,26px)}
.p-blog .rev-num{font-family:var(--mono);font-size:.9rem;font-weight:500;color:var(--gold-ink);line-height:1.2;min-width:2.4ch;padding-top:.35em}
.p-blog .rev-num::before{content:counter(rev,decimal-leading-zero)}
.p-blog .rev-item-main{display:block;min-width:0}
.p-blog .rev-item-main .rev-cat{margin-bottom:7px}
.p-blog .rev-item-title{display:block;font-family:var(--serif);font-weight:600;color:var(--ink);font-size:clamp(1.24rem,1.05rem + 1vw,1.7rem);line-height:1.18;letter-spacing:-.012em;margin:0;text-wrap:balance;transition:color var(--dur) var(--ease)}
.p-blog .rev-item:hover .rev-item-title{color:var(--gold-ink)}
.p-blog .rev-item-dek{display:block;font-family:var(--serif);color:var(--ink-2);font-size:.98rem;line-height:1.5;max-width:62ch;margin:7px 0 0}
.p-blog .rev-item-meta{display:flex;flex-direction:column;align-items:flex-end;gap:3px;font-family:var(--mono);font-size:.74rem;color:#5c6459;letter-spacing:.02em;white-space:nowrap;text-align:right;padding-top:.35em}
.p-blog .rev-item-meta em{font-style:normal;color:var(--ink-3);font-size:.68rem}
.p-blog .rev-note{margin:clamp(22px,3vw,32px) 0 0}

/* responsive */
@media(max-width:720px){
  .p-blog .rev-row{grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;gap:4px 14px}
  .p-blog .rev-num{grid-row:1;grid-column:1}
  .p-blog .rev-item-main{grid-row:1/3;grid-column:2}
  .p-blog .rev-item-meta{grid-row:2;grid-column:1;align-items:flex-start;text-align:left;flex-direction:row;gap:8px;padding-top:2px}
  .p-blog .rev-item-dek{display:none}
  .p-blog .rev-lead{border-bottom-style:solid}
}
@media(prefers-reduced-motion:reduce){.p-blog .rev-row,.p-blog .rev-item-title{transition:none}}

/* ============================================================
   CAREERS & ALUMNI (merged tab) — in-page jump nav + band note
   ============================================================ */
/* jump nav: mono pills on the dark page-hero, gold on hover.
   The page carries four chapters now, so give it a contents bar. */
.v2 .page-hero .jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(22px,3vw,30px);padding-top:20px;border-top:1px solid rgba(255,255,255,.2)}
.v2 .page-hero .jump a{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.24);border-radius:999px;padding:9px 14px;line-height:1;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.v2 .page-hero .jump a:hover{text-decoration:none;color:#fff;border-color:var(--gold);background:rgba(246,184,0,.16)}
@media(prefers-reduced-motion:reduce){.v2 .page-hero .jump a{transition:none}}

/* dark band note — fills the column the merged-away alumni mini-list left */
.career .cnote{margin:20px 0 0;max-width:46ch;color:rgba(255,255,255,.74);font-size:.98rem;line-height:1.6}

/* ============================================================
   ALUMNI — native-block card markup
   Core blocks cannot emit <figure>/<figcaption>, so the attribution row is
   .vcap and the name is .nm. index.html still uses figure/figcaption; both
   are supported so staff can edit alumni as real blocks in WordPress.
   ============================================================ */
.vcard .vcap,.vlead .vcap{display:flex;align-items:center;gap:14px}
#alumni .vcard .vcap{margin-top:auto}
.vcap .vwho{min-width:0}
.vcap .av{margin:0}
.vcap .nm{margin:0;font-weight:600;color:var(--ink);font-size:1.02rem}
.vcap .rl{margin:2px 0 0}
.vcap .co{margin:3px 0 0}
/* core quote block inside a card: strip its borders/padding + inner p margins */
.vcard .wp-block-quote,.vlead .wp-block-quote{border:0;padding:0;margin:0 0 18px}
.vcard .wp-block-quote p,.vlead .wp-block-quote p{margin:0}

/* ============================================================
   ALUMNI ROSTER — "where they work now" (name · role · employer)
   An editorial hairline list: the facts, above the quotes.
   ============================================================ */
/* sub-label inside a light band (.ceyebrow itself is mint, built for the dark band) */
.v2 #alumni .rlbl{display:block;color:var(--gold-ink);font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;margin:0 0 14px}
.v2 #alumni .rlbl + .roster{margin-top:0}
.v2 #alumni .source + .rlbl{margin-top:clamp(34px,4.5vw,52px)}
.roster{list-style:none;margin:0 0 clamp(26px,3.5vw,40px);padding:0;border-top:2px solid var(--ink)}
.roster .rrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px 18px;padding:18px 6px;border-bottom:1px solid var(--line);transition:background var(--dur) var(--ease),padding var(--dur) var(--ease)}
.roster .rrow:hover{background:var(--surface);padding-inline:14px}
.tint .roster .rrow:hover{background:var(--paper)}
.roster .rav{flex:none;margin:0;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-weight:700;font-size:.95rem;color:#3a3410;background:var(--gold-soft);border:1px solid var(--line-2)}
.roster .nm{margin:0;font-weight:600;color:var(--ink);font-size:1.06rem;letter-spacing:-.01em}
.roster .rl{margin:2px 0 0;color:var(--ink-2);font-size:.92rem}
.roster .rat{margin:0;justify-self:end;text-align:right;font-family:var(--mono);font-size:.82rem;font-weight:500;color:var(--green-700);letter-spacing:.01em}
@media(max-width:600px){
  .roster .rrow{grid-template-columns:auto minmax(0,1fr);gap:4px 14px}
  .roster .rat{grid-column:2;justify-self:start;text-align:left;margin-top:6px}
}
@media(prefers-reduced-motion:reduce){.roster .rrow{transition:none}}

/* ============================================================
   ARTICLE PAGES (.p-post) — The Review, single post
   ============================================================ */
.p-post .art-hero{position:relative;width:100%;height:clamp(340px,52vh,560px);overflow:hidden;background:var(--green-900)}
.p-post .art-hero img{width:100%;height:100%;object-fit:cover;display:block}
.p-post .art-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,14,15,.28) 0%,rgba(14,14,15,.05) 34%,rgba(14,14,15,.72) 78%,rgba(14,14,15,.9) 100%)}
.p-post .art-figcap{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);padding:.55rem 0 0;border-top:1px solid var(--line);margin-top:.9rem}
.p-post .art-head{position:relative;margin-top:-7.5rem;z-index:2}
.p-post .art-plate{background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--gold);
  border-radius:2px;padding:clamp(1.5rem,3vw,2.6rem);max-width:60rem;box-shadow:0 24px 60px -34px rgba(0,0,0,.5)}
.p-post .art-cat{font-family:var(--mono);font-size:.62rem;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold-ink);display:flex;align-items:center;gap:.7em;margin-bottom:1rem}
.p-post .art-cat::before{content:"";width:26px;height:2px;background:var(--gold);flex:none}
.p-post .art-title{font-family:var(--serif);font-weight:700;line-height:1.04;letter-spacing:-.018em;
  font-size:clamp(1.85rem,1.1rem + 2.7vw,3.3rem);color:var(--ink);margin:0 0 .6em;max-width:22ch}
.p-post .art-dek{font-family:var(--serif);font-style:italic;font-size:clamp(1.02rem,.9rem + .5vw,1.32rem);
  line-height:1.5;color:var(--ink-2);max-width:52ch;margin:0 0 1.5em}
.p-post .art-byline{display:flex;flex-wrap:wrap;gap:.6em 1.1em;align-items:baseline;
  border-top:1px solid var(--line);padding-top:.95rem;font-size:.8rem}
.p-post .art-by{font-weight:600;color:var(--ink)}
.p-post .art-meta{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--ink-3);text-transform:uppercase}
.p-post .art-read{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--ink-3);text-transform:uppercase}
.p-post .art-plate .wp-block-post-excerpt{margin:0}
.p-post .art-plate .wp-block-post-excerpt__excerpt{margin:0}
.p-post .art-byline .wp-block-shortcode{margin:0}
.p-post .art-body>.wp-block-post-content{margin:0}
.p-post .art-body>.wp-block-post-content>p{margin:0 0 1.35em}
.p-post .art-body>.wp-block-post-content>h2{font-family:var(--serif);font-weight:700;font-size:1.42rem;line-height:1.2;margin:2em 0 .75em}
.p-post .art-body{max-width:38rem;margin:clamp(2.4rem,5vw,4rem) auto 0;font-family:var(--serif);
  font-size:1.075rem;line-height:1.72;color:var(--ink)}
.p-post .art-body>p{margin:0 0 1.35em}
.p-post .art-body>p.lede{font-size:1.3rem;line-height:1.55;color:var(--ink)}
/* No drop cap. A floated 3.4em initial fights the dek directly above it, and on a
   40-character measure it eats the first two lines of the lede. The lede earns its
   emphasis from size and colour instead. (Removed on request, all posts.) */
.p-post .art-body h2{font-family:var(--serif);font-weight:700;font-size:1.42rem;line-height:1.2;
  margin:2.3em 0 .7em;color:var(--ink)}
.p-post .art-body strong{font-weight:600}
.p-post .art-body em{font-style:italic}
.p-post .art-body ol{margin:0 0 1.5em;padding:0;list-style:none;counter-reset:artn}
.p-post .art-body ol li{counter-increment:artn;position:relative;padding-left:2.6em;margin-bottom:1em}
.p-post .art-body ol li::before{content:counter(artn);position:absolute;left:0;top:.16em;
  font-family:var(--mono);font-size:.72rem;font-weight:500;color:var(--gold-ink);border:1px solid var(--line-2);
  width:1.85em;height:1.85em;display:grid;place-items:center;border-radius:50%}
.p-post .pull{position:relative;margin:2.6em 0;padding:0 0 0 2.2rem;border:0;
  font-family:var(--serif);font-style:italic;font-size:1.32rem;line-height:1.42;color:var(--ink)}
.p-post .art-sources{max-width:38rem;margin:3rem auto 0;padding:1.15rem 1.3rem;background:var(--surface-2);
  border-left:3px solid var(--gold);font-family:var(--sans);font-size:.78rem;line-height:1.6;color:var(--ink-2)}
.p-post .art-sources b{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-ink);display:block;margin-bottom:.5em}
.p-post .art-back{max-width:38rem;margin:2.6rem auto 0;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.1em;text-transform:uppercase}
.p-post .art-back a{color:var(--gold-ink);text-decoration:none;border-bottom:1px solid var(--line-2);padding-bottom:2px}
.p-post .art-back a:hover{border-color:var(--gold-ink)}
@media (max-width:640px){
  .p-post .art-head{margin-top:-4rem}
  .p-post .art-body{font-size:1.02rem}
  .p-post .art-body>p.lede{font-size:1.14rem}
}

/* issue-list thumbnails */
.p-blog .rev-thumb{width:clamp(84px,9vw,124px);aspect-ratio:4/3;object-fit:cover;display:block;
  border:1px solid var(--line);border-radius:2px;align-self:center;
  filter:saturate(.92);transition:filter var(--dur) var(--ease),transform var(--dur) var(--ease)}
.p-blog .rev-item:hover .rev-thumb{filter:saturate(1.05);transform:scale(1.015)}
.p-blog a.rev-row{text-decoration:none;color:inherit}
.p-blog a.rev-row .rev-item-title{transition:color var(--dur) var(--ease)}
.p-blog a.rev-row:hover .rev-item-title{color:var(--gold-ink)}
@media (max-width:640px){
  .p-blog .rev-thumb{grid-row:3;grid-column:1/3;width:100%;aspect-ratio:16/9;margin-top:10px}
}

/* homepage blog teaser thumbnails */
.v2 .brow .bthumb{width:clamp(56px,5vw,76px);aspect-ratio:1/1;object-fit:cover;border:1px solid var(--line);
  border-radius:2px;display:block;align-self:center;filter:saturate(.92);
  transition:filter var(--dur) var(--ease),transform var(--dur) var(--ease)}
.v2 .brow:hover .bthumb{filter:saturate(1.05);transform:scale(1.02)}

/* Alumni cards: only a real, sourced quotation gets quotation styling.
   A third-person description of someone is a fact about them, not speech —
   it must not inherit blockquote/serif-italic/quote-mark treatment. */
.v2 .vcard .vfact{margin:0 0 18px;font-family:var(--sans);font-size:1rem;line-height:1.55;color:var(--ink-2)}
.v2 .vcard .vwho{display:flex;align-items:center;gap:12px}
.v2 .vcard.is-quote blockquote{margin:0 0 18px}
.v2 .vcard .source{margin:12px 0 0;font-size:.7rem}

/* Hero pause/play — a real WCAG 2.2.2 control, so it must be visible and ≥44px hit area. */
.v2 .herov2 .hdots{z-index:4}
.v2 .hpause{position:relative;width:22px;height:22px;margin-left:10px;border:0;padding:0;
  background:transparent;cursor:pointer;border-radius:50%;flex:none;
  display:inline-grid;place-items:center}
.v2 .hpause::after{content:"";position:absolute;inset:-11px}   /* 44px target, no layout shift */
.v2 .hpause::before{content:"";display:block;width:10px;height:10px;
  background:rgba(255,255,255,.62);transition:background var(--dur) var(--ease),clip-path var(--dur) var(--ease);
  clip-path:polygon(0 0,32% 0,32% 100%,0 100%,0 0,68% 0,100% 0,100% 100%,68% 100%)}
.v2 .hpause[data-state="paused"]::before{clip-path:polygon(0 0,100% 50%,100% 50%,0 100%)}
.v2 .hpause:hover::before{background:#fff}
.v2 .hpause:focus-visible{outline:2px solid var(--gold-ink);outline-offset:3px}


/* ============================================================
   SITE FOOTER — four areas, on ONE declaration.
   There used to be two `.v2 .sitefoot{}` blocks. The dead one still leaked
   `padding-block:clamp(48px,6vw,80px)` onto the live footer, stacking with
   .sf-main's own padding: ~138px of nothing before any content. That, not the
   column count, was the "strange and long" footer.
   Background is --green-950 (#0e0e0f), NOT --green-900: .final's gradient
   terminates at #0a0a0b, so a #161617 footer made the page go dark -> darker ->
   LIGHTER again. That inverted step is what read as an overlap.
   ============================================================ */
.v2 .sitefoot{background:var(--green-950);color:rgba(255,255,255,.66)}
.v2 .sitefoot .sf-grid{display:grid;grid-template-columns:1.7fr .9fr 1.1fr 1.2fr;gap:clamp(26px,3.4vw,48px);
  padding-block:clamp(40px,4.6vw,60px);border-bottom:1px solid rgba(255,255,255,.12)}
.v2 .sitefoot .sf-claim{font-family:var(--serif);font-size:clamp(1.4rem,1.1rem + .8vw,1.8rem);font-weight:700;
  line-height:1.04;letter-spacing:-.02em;color:#fff;margin:0 0 12px}
.v2 .sitefoot .sf-claim em{font-style:italic;color:var(--gold)}
.v2 .sitefoot .sf-org{font-size:.86rem;line-height:1.55;color:rgba(255,255,255,.58);margin:0;max-width:34ch}
.v2 .sitefoot .sf-h{font-family:var(--mono);font-size:.6rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);margin:0 0 14px}   /* gold on #0e0e0f = 10.4:1 */
.v2 .sitefoot .sf-col ul{list-style:none;margin:0;padding:0}
.v2 .sitefoot .sf-col li{margin:0}
.v2 .sitefoot .sf-col a{display:block;padding:7px 0;font-size:.88rem;line-height:1.35;min-height:24px}
.v2 .sitefoot a{color:rgba(255,255,255,.84);text-decoration:none;
  border-bottom:1px solid transparent;transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.v2 .sitefoot a:hover{color:#fff;border-bottom-color:var(--gold)}
.v2 .sitefoot :focus-visible{outline:2px solid var(--gold-ink);outline-offset:3px;border-radius:1px}
.v2 .sitefoot .sf-base{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;
  justify-content:space-between;padding-block:15px}
.v2 .sitefoot .sf-note{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;
  color:rgba(255,255,255,.55);margin:0}   /* .4 alpha measured 3.83:1 and failed 1.4.3 */
.v2 .sitefoot .sf-legal{display:flex;flex-wrap:wrap;gap:4px 20px}
.v2 .sitefoot .sf-legal a{font-size:.78rem;color:rgba(255,255,255,.62);padding:10px 0;min-height:24px}
.v2 .sitefoot .sf-legal a:hover{color:#fff}
@media(max-width:900px){
  .v2 .sitefoot .sf-grid{grid-template-columns:1fr 1fr;gap:30px}
  .v2 .sitefoot .sf-brand{grid-column:1/-1}
}
@media(max-width:560px){
  .v2 .sitefoot .sf-grid{grid-template-columns:1fr}
  .v2 .sitefoot .sf-base{flex-direction:column;align-items:flex-start;gap:6px}
}

/* legal / prose pages */
.p-legal .legal{max-width:38rem;font-size:1.02rem;line-height:1.68;color:var(--ink-2)}
.p-legal .legal h2{font-family:var(--serif);font-weight:700;font-size:1.32rem;line-height:1.2;
  color:var(--ink);margin:2.2em 0 .6em}
.p-legal .legal h2:first-child{margin-top:0}
.p-legal .legal p{margin:0 0 1.15em}
.p-legal .legal ul{margin:0 0 1.3em;padding-left:1.1em}
.p-legal .legal li{margin-bottom:.5em}
.p-legal .legal strong{color:var(--ink);font-weight:600}
.p-legal .legal code{font-family:var(--mono);font-size:.86em;background:var(--surface-2);padding:.1em .35em;border-radius:2px}
.p-legal .legal-updated{margin-top:2.4em;padding-top:1em;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}

/* ============================================================
   OUTCOMES BAND (#careers). The old failure: .zhead{max-width:60ch} STACKED
   above a full-width child — a ~55% column with 45% air beside it, six times.
   Head sits BESIDE the evidence. Two INDEPENDENT columns, not a shared row grid
   (a shared grid makes row 1 as tall as its tallest cell and strands the short one).
   Evidence is rule-work, not boxes: bordered cards floating in paper read as SaaS.
   ============================================================ */
.v2 .out{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(26px,4vw,60px);align-items:start}
.v2 .out-l{position:sticky;top:96px}
.v2 .out-r{display:flex;flex-direction:column;gap:clamp(20px,2.2vw,30px);min-width:0}
.v2 .out-head h2{margin:.3em 0 .45em;font-size:clamp(1.6rem,1.2rem + 1.4vw,2.4rem);line-height:1.06}
.v2 .out-head p{max-width:34ch;color:var(--ink-2);margin:0}
.v2 .out-cta{margin:20px 0 0}

/* the two figures: a rule-topped pair, tabular, no card chrome */
.v2 .out-stats{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(20px,2.4vw,34px);margin:0;
  border-top:2px solid var(--ink);padding-top:16px}
.v2 .out-stat dt{font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-2);margin:0 0 8px;line-height:1.5}
.v2 .out-stat dd{margin:0;font-family:var(--serif);font-weight:700;
  font-size:clamp(1.5rem,1.1rem + 1.1vw,2.05rem);line-height:1;letter-spacing:-.025em;color:var(--ink);
  font-variant-numeric:tabular-nums lining-nums slashed-zero}
.v2 .out-stat .source{margin:9px 0 0;font-size:.63rem}

.v2 .out-dest .ceyebrow{display:block;margin-bottom:10px}
.v2 .dest-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(20px,2.4vw,34px)}
.v2 .dest-list li{padding:7px 0;border-bottom:1px solid var(--line);font-size:.89rem;color:var(--ink-2)}
.v2 .out-dest .source{margin:10px 0 0;font-size:.63rem}

/* the quote closes the evidence column — it is testimony about the outcome above it */
.v2 .out-quote{margin:0;padding:16px 0 0;border-top:1px solid var(--line)}
.v2 .out-quote blockquote{margin:0 0 12px;font-family:var(--serif);font-style:italic;
  font-size:1.05rem;line-height:1.45;color:var(--ink);max-width:44ch}
.v2 .out-quote figcaption{display:flex;align-items:center;gap:11px}
.v2 .out-quote figcaption b{display:block;font-size:.88rem;color:var(--ink)}
.v2 .out-quote .rl{display:block;font-size:.75rem;color:var(--ink-2)}
.v2 .out-quote .source{margin:11px 0 0;font-size:.63rem}

@media(max-width:1000px){
  .v2 .out{grid-template-columns:1fr;gap:30px}
  .v2 .out-l{position:static}
}
@media(max-width:560px){.v2 .out-stats,.v2 .dest-list{grid-template-columns:1fr}}

/* ============================================================
   SECTION RHYTHM SCALE
   Four named steps rather than magic clamps scattered through the file. The values
   are unchanged — this only gives the tiers below a vocabulary, so a new section
   picks a step instead of inventing a seventh number.
   ============================================================ */
:root{
  --sec-tight:clamp(48px,5vw,72px);
  --sec-mid:clamp(56px,6vw,84px);
  --sec-loose:clamp(64px,7vw,96px);
  --sec-base:clamp(64px,9vw,120px);
}

/* ============================================================
   BELOW-HERO RHYTHM.
   Every .zsec had the SAME padding-block:clamp(64px,9vw,120px) — six equally
   tall bands tell the reader nothing matters. Three tiers instead, so the page
   has a heartbeat: dense evidence, then air around the argument.
   ============================================================ */
.v2 #careers{padding-block:var(--sec-mid)}
.v2 #latest {padding-block:var(--sec-tight)}
.v2 #faq    {padding-block:var(--sec-loose)}

/* ============================================================
   HEAD-BESIDE-CONTENT (.lat) — the fix for the dead right column.
   The old .zhead{max-width:60ch} sat ABOVE a full-width child, so every band
   was a ~55% column with 45% air next to it. Here the head is a real column.
   ============================================================ */
.v2 .lat{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(26px,4vw,60px);align-items:start}
.v2 .lat-head{position:sticky;top:96px}          /* 66px floating nav + air */
.v2 .lat-head h2{margin:.3em 0 .45em;font-size:clamp(1.6rem,1.2rem + 1.4vw,2.4rem);line-height:1.06}
.v2 .lat-head p{max-width:34ch;color:var(--ink-2);margin:0}
/* Section CTA. Not a floating pill (reads as debris in a sticky column) and not a
   whisper either — a gold-underscored link with real weight. The gold bar IS the
   affordance, so the type stays ink and passes AA on paper. */
.v2 .lat-more{margin:22px 0 0!important}
.v2 .lat-more a{position:relative;display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--sans);font-size:1.02rem;font-weight:600;letter-spacing:-.005em;
  color:var(--ink);text-decoration:none;padding:6px 2px 10px;text-transform:none}
.v2 .lat-more a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
  background:var(--gold);transform-origin:left;transition:height var(--dur) var(--ease)}
.v2 .lat-more a span,.v2 .lat-more a::first-letter{transition:none}
.v2 .lat-more a:hover{color:var(--ink)}
.v2 .lat-more a:hover::after{height:9px}
.v2 .lat-more a:focus-visible{outline:2px solid var(--gold-ink);outline-offset:3px}
@media(max-width:900px){
  .v2 .lat{grid-template-columns:1fr;gap:24px}
  .v2 .lat-head{position:static}
}

/* FAQ inside .lat: questions are the content column, two-up on wide screens */
.v2 #faq .faq{columns:2;column-gap:clamp(24px,3vw,44px)}
.v2 #faq .faq details{break-inside:avoid;margin:0 0 12px}
@media(max-width:900px){.v2 #faq .faq{columns:1}}

/* the blog list drops its own top margin — the grid owns spacing now */
.v2 #latest .bloglist,.v2 #latest .home-bloglist{margin-top:0}

/* Homepage query loop keeps the prototype's three compact journal rows. */
.v2 .home-bloglist ul.wp-block-post-template{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-top:1px solid var(--line)}
.v2 .home-bloglist li.wp-block-post{display:grid;grid-template-columns:76px 120px minmax(0,1fr) auto;grid-template-areas:"img cat title meta";align-items:center;gap:22px;padding:22px 6px;border-bottom:1px solid var(--line);transition:background var(--dur) var(--ease),padding var(--dur) var(--ease)}
.v2 .home-bloglist li.wp-block-post:hover{background:var(--surface);padding-inline:16px}
.v2 .home-bloglist .bimg{grid-area:img;margin:0}
.v2 .home-bloglist .bimg img{display:block;width:clamp(56px,5vw,76px);height:clamp(56px,5vw,76px);object-fit:cover;border:1px solid var(--line);border-radius:2px;filter:saturate(.92);transition:filter var(--dur) var(--ease),transform var(--dur) var(--ease)}
.v2 .home-bloglist li:hover .bimg img{filter:saturate(1.05);transform:scale(1.02)}
.v2 .home-bloglist .bcat{grid-area:cat;margin:0;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green-700)}
.v2 .home-bloglist .bcat a{color:inherit;text-decoration:none}
.v2 .home-bloglist .btitle{grid-area:title;margin:0;font-family:var(--serif);font-size:1.24rem;font-weight:600;line-height:1.24;letter-spacing:-.01em}
.v2 .home-bloglist .btitle a{color:var(--ink);text-decoration:none}
.v2 .home-bloglist li:hover .btitle a{color:var(--green-800)}
.v2 .home-bloglist .bmeta{grid-area:meta;margin:0;font-family:var(--mono);font-size:.74rem;color:var(--ink-2);white-space:nowrap}
@media(max-width:640px){
  .v2 .home-bloglist li.wp-block-post{grid-template-columns:76px minmax(0,1fr);grid-template-areas:"img meta" "img cat" "img title";gap:6px 14px}
  .v2 .home-bloglist .bimg{align-self:start}
}

/* ============================================================
   THE CLOSE — "Still deciding?" + footer were 462px + 457px = 919px,
   a fifth of the page spent saying goodbye. Both tightened; the CTA keeps
   the dark and the gold plot line, but stops being a full band.
   ============================================================ */
.v2 .final{padding-block:clamp(38px,3.6vw,52px);background-size:100% 92px,auto,auto}
.v2 .final h2{margin:.25em 0 .4em;font-size:clamp(1.7rem,1.3rem + 1.4vw,2.5rem)}
.v2 .final p{margin:0 auto;max-width:46ch}
.v2 .final .hero-cta{margin-top:22px}
.v2 .sitefoot .sf-grid{padding-block:clamp(26px,2.6vw,34px)}
.v2 .sitefoot .sf-col a{padding:5px 0}
.v2 .sitefoot .sf-claim{margin-bottom:9px}
.v2 .sitefoot .sf-org{font-size:.82rem;max-width:32ch}
.v2 .sitefoot .sf-base{padding-block:12px}


/* ============================================================
   ALUMNI (#alumni) — was: a stacked .zhead, then a roster, then a 4-card wall
   that repeated two of the same people, then three source notes. Now one list
   beside a sticky head. Type sizes unchanged — this is structure, not scale.
   ============================================================ */
.v2 #alumni .alum{list-style:none;margin:0;padding:0}
.v2 #alumni .alum-row{display:grid;grid-template-columns:auto 1fr;gap:clamp(14px,1.6vw,22px);
  padding:clamp(18px,2vw,26px) 0;border-bottom:1px solid var(--line)}
.v2 #alumni .alum-row:first-child{padding-top:0}
.v2 #alumni .alum-row:last-child{border-bottom:0;padding-bottom:0}
.v2 #alumni .alum-av{width:38px;height:38px;flex:none;margin:0;display:grid;place-items:center;
  border-radius:50%;background:var(--gold-soft);color:var(--ink);
  font-family:var(--serif);font-weight:700;font-size:.78rem;letter-spacing:-.01em}
.v2 #alumni .alum-body{min-width:0}
.v2 #alumni .alum-body blockquote{position:relative;margin:0 0 14px;font-family:var(--serif);font-style:italic;
  font-size:clamp(1.14rem,1rem + .5vw,1.38rem);line-height:1.38;color:var(--ink);max-width:46ch;
  letter-spacing:-.008em;text-wrap:balance}
.v2 #alumni .alum-body blockquote::before{content:"";position:absolute;left:-1.05em;top:.34em;
  width:22px;height:2px;background:var(--gold)}
.v2 #alumni .alum-body .vfact{margin:0 0 12px;font-family:var(--sans);font-size:1rem;
  line-height:1.55;color:var(--ink-2);max-width:52ch}
.v2 #alumni .alum-who{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
.v2 #alumni .alum-who b{font-size:.92rem;color:var(--ink);font-weight:600}
.v2 #alumni .alum-who .rl{font-size:.82rem;color:var(--ink-2)}
.v2 #alumni .alum-who .co{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gold-ink)}
.v2 #alumni .alum-body .source{margin:9px 0 0;font-size:.64rem}
.v2 #alumni .alum-src{margin-top:clamp(24px,3vw,38px);padding-top:14px;border-top:1px solid var(--line)}
@media(max-width:560px){
  .v2 #alumni .alum-row{grid-template-columns:1fr}
  .v2 #alumni .alum-av{display:none}
}

/* ============================================================
   THE REVIEW — subscribe block (#inbox). The form is disabled until Brevo is
   wired, so the block must still be worth reading: masthead facts on the left,
   the switched-off form plus the live LinkedIn alternative on the right.
   ============================================================ */
.v2 #inbox .subscribe{display:grid;gap:clamp(26px,4vw,56px);align-items:start;
  padding:clamp(28px,3.4vw,44px);border-radius:2px}
@media(min-width:820px){.v2 #inbox .subscribe{grid-template-columns:1.15fr .85fr}}
.v2 #inbox .eyebrow{color:var(--gold)}
.v2 #inbox h2{margin:.3em 0 .45em}
.v2 #inbox .sub-copy p{max-width:44ch;margin:0}
.v2 #inbox .sub-facts{display:flex;flex-wrap:wrap;gap:0 clamp(22px,3vw,40px);margin:22px 0 0;
  padding-top:16px;border-top:1px solid rgba(255,255,255,.16)}
.v2 #inbox .sub-facts dt{font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.5);margin:0 0 5px}
.v2 #inbox .sub-facts dd{margin:0;font-family:var(--serif);font-size:.98rem;font-weight:600;color:#fff}
.v2 #inbox .sub-lbl{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:9px}
.v2 #inbox .field{display:flex;gap:8px;flex-wrap:wrap}
.v2 #inbox .field input{flex:1 1 190px;min-width:0}
.v2 #inbox .field input:disabled,.v2 #inbox .btn:disabled{opacity:.5;cursor:not-allowed}
.v2 #inbox .note{margin:12px 0 0;font-size:.76rem;line-height:1.5;color:rgba(255,255,255,.6)}
.v2 #inbox .note a{color:rgba(255,255,255,.85)}
.v2 #inbox .sub-alt{margin:22px 0 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.16);
  font-size:.84rem;line-height:1.7;color:rgba(255,255,255,.6)}
.v2 #inbox .sub-li{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;color:var(--gold);
  text-decoration:none;border-bottom:1px solid rgba(246,184,0,.4);padding-bottom:2px}
.v2 #inbox .sub-li:hover{border-bottom-color:var(--gold)}
.v2 #inbox :focus-visible{outline:2px solid var(--gold-ink);outline-offset:3px}

/* ============================================================
   FAQ PAGE — was `.wrap narrow` wrapping `.faq{max-width:840px}`: a column
   inside a column, ~390px dead on BOTH sides of a 1470px viewport. Now the
   index and search are the left column and the questions use the width.
   ============================================================ */
.v2 .faq-lat{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.v2 .faq-lat .faq{max-width:none;border-top:0}
.v2 .faq-idx-h{margin:.3em 0 .45em}
.v2 .faq-lbl{margin-top:22px;color:var(--ink-2)}
.v2 .faq-lat .faq-search{max-width:none;margin-top:8px}
.v2 .faq-idx{display:flex;flex-direction:column;margin-top:26px;border-top:1px solid var(--line)}
.v2 .faq-idx a{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--line);font-size:.92rem;color:var(--ink-2);
  text-decoration:none;transition:color var(--dur) var(--ease),padding var(--dur) var(--ease)}
.v2 .faq-idx a span{font-family:var(--mono);font-size:.68rem;color:var(--gold-ink)}
.v2 .faq-idx a:hover{color:var(--ink);padding-inline:5px}
.v2 .faq-idx a:focus-visible{outline:2px solid var(--gold-ink);outline-offset:2px}
.v2 .faq-lat .faq-group{scroll-margin-top:110px}
.v2 .faq-lat .faq-group:first-child .faq-h{margin-top:0}
@media(max-width:900px){
  .v2 .faq-lat{grid-template-columns:1fr}
  .v2 .faq-idx{display:none}          /* the questions are right there on mobile */
}

/* :has() fallback — the markup already carries .is-quote intent on quoted rows'
   siblings elsewhere; here we mirror the plate for engines without :has(). */

/* The identity line lives INSIDE the h1 so the heading carries the keywords
   ("Erasmus School of Economics · MSc Marketing") instead of a keyword-free
   "Marketing, proven." It renders exactly as the old kicker did. */
.v2 .herov2-copy h1{display:block}
.v2 .herov2-copy h1 .herov2-kicker{display:inline-flex}   /* keep the gold ::before bar */
.v2 .herov2-copy h1 .h1-line{display:block}

/* ============================================================
   MOBILE — tested at 390/606px, not assumed.
   ============================================================ */

/* 1. TEXT-ON-TEXT. Below 860px the photo goes full-bleed behind the copy and the
   scrim fades to .34 alpha on the right. The campaign photos carry their OWN
   "Master in Marketing" wordmark, so it punched straight through the lead
   paragraph. The desktop design solved this with a diagonal split; mobile has no
   split, so the scrim has to do the whole job. */
@media(max-width:860px){
  /* Fixed by moving the CROP, not by darkening further. The earlier diagonal scrim
     tried to hide the billboard where it fell; but `object-position:74% center`
     (correct on desktop, where the billboard sits in the light right-hand zone the
     copy never reaches) drops that same wordmark straight under the lead once the
     photo goes full-bleed. Re-crop to the right edge on mobile and the photographed
     type leaves the frame entirely — verified against all three carousel slides.

     The scrim then only has to guarantee contrast, so it becomes one honest vertical
     gradient instead of two stacked diagonals fighting the composition. */
  .v2 .herov2 .hero-bg .hslide{object-position:100% 32%}
  .v2 .herov2 .hero-scrim{
    background:linear-gradient(180deg,
      rgba(12,11,10,.93) 0%,
      rgba(12,11,10,.88) 46%,
      rgba(12,11,10,.66) 72%,
      rgba(12,11,10,.55) 100%);
  }
  /* The crop does the work now, so the photo keeps its own contrast. */
  .v2 .herov2 .hero-bg .hslide{filter:brightness(.94)}

  /* Hero was 1012px on an 844px viewport — two full screens before any content.
     Trim the padding rather than capping the height: .herov2 is overflow:hidden, so a
     max-height amputates the fact rows instead of shortening the block. */
  .v2.p-home .herov2-inner{
    padding-top:clamp(66px,15vw,92px) !important;
    padding-bottom:clamp(38px,6vw,54px) !important}
  /* tighten the vertical rhythm between tiers on a phone */
  .herov2-lead{margin-top:20px !important}
  .herov2-cta{margin-top:26px !important}
  .herov2-facts{margin-top:26px !important;padding-top:18px !important}

  /* Dots sit clear of the copy: the block is taller on a phone, and at bottom:20px
     they landed on top of the fact rows. */
  .v2 .herov2 .hdots{right:auto;left:clamp(20px,5vw,32px);bottom:14px}
}

/* Facts read as a list on a phone, not a broken 2+1 grid. One row per fact, value
   and label on a shared baseline, hairline between — same information, scannable. */
@media(max-width:520px){
  .herov2-facts{grid-template-columns:1fr;gap:0;max-width:none}
  /* One line per fact: value then label, both on the baseline. Wraps rather than
     right-aligns — right alignment pushed the longer labels past the container. */
  .herov2-facts span{
    flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:2px 10px;
    padding:6px 0;border-bottom:1px solid rgba(255,255,255,.12)}
  .herov2-facts span:last-child{border-bottom:0;grid-column:auto;margin-top:0}
  .herov2-facts b{margin:0}
}

/* 2. The identity line wraps to two lines on a phone; its gold ::before bar was
   inline-flex, so it clung to line 1 and left the second line hanging. */
@media(max-width:640px){
  .v2 .herov2-copy h1 .herov2-kicker{
    display:grid;grid-template-columns:auto 1fr;align-items:start;gap:0 10px;
    line-height:1.45;text-wrap:balance}
  .v2 .herov2-copy h1 .herov2-kicker::before{margin-top:.52em}
}

/* 3. Carousel dots were 9×9. WCAG 2.5.8 (AA) wants 24×24; these are the primary
   hero control. Same ::after trick already used on .hpause — grow the hit area
   without moving the dot. */
.v2 .herov2 .hdot{position:relative}
.v2 .herov2 .hdot::after{content:"";position:absolute;left:50%;top:50%;
  width:44px;height:44px;transform:translate(-50%,-50%)}
@media(max-width:640px){
  .v2 .herov2 .hdots{right:auto;left:clamp(20px,5vw,32px);bottom:16px;gap:12px}
}

/* 4. Nav: the logo and the pill buttons sat at 38–42px. */
@media(max-width:1039px){
  .v2 .nav .logo{min-height:44px;display:inline-flex;align-items:center}
  .v2 .nav-toggle{width:44px;height:44px;border-radius:12px;border-color:var(--line)}
  .v2 .nav-toggle i{width:18px}
}

/* ============================================================
   PRINT — what a printed page should be: the article, and nothing else.
   Navigation, the closing CTA, the newsletter block and the footer are all
   screen furniture; on paper they are noise and they generate blank pages
   (sticky columns + 100vh sections confuse Chrome's paginator).
   ============================================================ */
@media print{
  /* chrome off */
  .v2 .nav,.v2 .strip,.v2 .sitefoot,.v2 .final,.v2 #inbox,
  .v2 .hpause,.v2 .hdots,.v2 .skip,.v2 .art-back,.v2 #follow{display:none!important}

  /* content always visible — reveal is a scroll effect and never fires in print */
  .v2 .reveal,.reveal-armed .reveal{opacity:1!important;transform:none!important}
  .v2 .lat-head,.v2 .out-l{position:static!important}
  .v2 .herov2{min-height:auto!important}

  /* article geometry for paper */
  .v2 .art-hero{height:250px!important}
  .v2 .art-head{margin-top:-3rem!important}
  .v2 .art-body{max-width:none!important;font-size:10.5pt;line-height:1.5}
  .v2 .zsec{padding-block:18px!important}

  /* never split a unit across a page break */
  .v2 .rev-lead,.v2 .rev-item,.v2 .alum-row,.v2 .out-stat,.v2 .art-plate,
  .v2 .art-sources,.v2 .out-quote,.v2 figure{break-inside:avoid}
  .v2 .art-body>p,.v2 .art-body>ol,.v2 .pull{break-inside:avoid-page}
  .v2 .art-body h2{break-after:avoid}

  a[href]::after{content:""}
  @page{margin:14mm}
}

/* ============================================================
   WP Query-Loop blog cards (theme-only; the static prototype has no
   query loop). The loop outputs ul.wp-block-post-template > li.wp-block-post
   with .bimg/.bcat/.btitle/.bdek/.bmeta blocks — style them as the compact
   journal rows of The Review instead of raw full-width blocks.
   ============================================================ */
.bloglist ul.wp-block-post-template{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;counter-reset:revnum}
/* — index rows (every post after the lead): number · thumb · text · meta — */
.bloglist li.wp-block-post{position:relative;display:grid;grid-template-columns:44px 150px minmax(0,1fr) auto;grid-template-areas:"num img cat meta" "num img title meta" "num img dek meta";column-gap:22px;row-gap:3px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line);counter-increment:revnum}
.bloglist li.wp-block-post::before{content:counter(revnum,decimal-leading-zero);grid-area:num;align-self:start;padding-top:4px;font-family:var(--mono);font-size:.8rem;color:var(--ink-3)}
.bloglist .bimg{grid-area:img;margin:0}
.bloglist .bimg img{width:150px;height:102px;object-fit:cover;border-radius:10px;display:block}
.bloglist .bcat{grid-area:cat;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green-700);margin:0}
.bloglist .bcat a{color:inherit;text-decoration:none}
.bloglist .btitle{grid-area:title;font-family:var(--serif);font-size:1.24rem;font-weight:600;line-height:1.24;letter-spacing:-.01em;margin:0}
.bloglist .btitle a{color:inherit;text-decoration:none}
.bloglist .btitle a:hover{color:var(--green-800)}
.bloglist .bdek{grid-area:dek;color:var(--ink-2);margin:0;max-width:62ch;font-size:.95rem}
.bloglist .bmeta{grid-area:meta;align-self:start;padding-top:4px;font-family:var(--mono);font-size:.74rem;color:var(--ink-3);margin:0;white-space:nowrap}
/* — the lead: first post renders as the featured essay card, photo left — */
.bloglist li.wp-block-post:first-child{grid-template-columns:minmax(0,46%) minmax(0,1fr);grid-template-areas:"img cat" "img title" "img dek" "img meta";grid-template-rows:auto auto auto 1fr;column-gap:clamp(26px,3vw,44px);row-gap:14px;align-items:start;align-content:start;padding:0 0 36px;margin-bottom:8px;border-bottom:2px solid var(--ink,#1c1c18);counter-increment:none}
.bloglist li.wp-block-post:first-child::before{content:none}
.bloglist li.wp-block-post:first-child .bimg img{width:100%;height:clamp(300px,31vw,420px);border-radius:14px}
.bloglist li.wp-block-post:first-child .btitle{font-size:2rem;line-height:1.15}
.bloglist li.wp-block-post:first-child .bdek{font-size:1.05rem;font-family:var(--serif);max-width:42ch}
.bloglist li.wp-block-post:first-child .bmeta{align-self:end}
.bloglist .wp-block-query-pagination{display:flex;gap:18px;padding:18px 0;font-family:var(--mono);font-size:.8rem}
@media(max-width:760px){
  .bloglist li.wp-block-post,.bloglist li.wp-block-post:first-child{grid-template-columns:1fr;grid-template-areas:"img" "cat" "title" "dek" "meta"}
  .bloglist li.wp-block-post::before{content:none}
  .bloglist .bimg img,.bloglist li.wp-block-post:first-child .bimg img{width:100%;height:200px}
}

/* Programme & Admissions landing pages — share the legal prose layout, own watermark. */

/* Socials band (home, above the closing CTA). Icons are inline SVG — nothing external. */
.v2 .socband .socgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.v2 .socband .soccard{display:flex;flex-direction:column;gap:8px;padding:22px 20px;border:1px solid var(--line);border-radius:6px;text-decoration:none;color:var(--ink);background:var(--surface);transition:border-color .18s,transform .18s}
.v2 .socband .soccard:hover{border-color:var(--gold);transform:translateY(-2px)}
.v2 .socband .socico{width:26px;height:26px;color:var(--green-700)}
.v2 .socband .soccard:hover .socico{color:var(--gold)}
.v2 .socband .socname{font-family:var(--serif);font-weight:700;font-size:1.06rem}
.v2 .socband .socsub{font-size:.86rem;color:var(--ink-2);line-height:1.45}
@media(max-width:720px){.v2 .socband .socgrid{grid-template-columns:1fr}}

/* ── 2026-07-28 · "After you graduate" (zoekjaar) fact list ─────────────────
   Careers page, #international. Native core/list so staff can edit each line
   in the block editor; this only restyles it into a spec list. New selector,
   nothing above is overridden. NB: .art-read is already taken (line ~656,
   post read-time) — do not reuse that name.
   ------------------------------------------------------------------------ */
.v2 .ifacts-list{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--line)}
.v2 .ifacts-list li{margin:0;padding:14px 0;border-bottom:1px solid var(--line);
  color:var(--ink-2);font-size:.98rem;line-height:1.6}
/* The label is the leading <strong>; everything after it stays inline prose.
   Do NOT put display:grid or flex on the <li> — that promotes every inline <a>
   and <strong> in the sentence to its own row, which broke "IND" and
   "three years" onto separate lines. Label above, sentence below. */
.v2 .ifacts-list li strong:first-child{display:block;font-family:var(--mono);
  font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  font-weight:500;margin-bottom:5px}
.v2 .ifacts-list li strong:not(:first-child){color:var(--ink);font-weight:600}

/* ── Alumni testimonials as native blocks ──────────────────────────────────
   The alumni list moved from a wp:html island to core blocks so staff can edit
   each testimonial (and link a name to LinkedIn) in the editor. Two knock-ons:
   core/paragraph emits <strong> where the island used <b>, and core/quote wraps
   the text in its own <p> and brings wp-block-quote's default border/padding.
   ------------------------------------------------------------------------ */
.v2 #alumni .alum-who strong{font-size:.92rem;color:var(--ink);font-weight:600}
.v2 #alumni .alum-who strong a{color:inherit;text-decoration:none;
  border-bottom:1px solid var(--line-2)}
.v2 #alumni .alum-who strong a:hover{border-color:var(--gold-ink);color:var(--gold-ink)}
.v2 #alumni .alum-body .wp-block-quote{border:0;padding:0;background:none}
.v2 #alumni .alum-body .wp-block-quote p{margin:0;font:inherit;color:inherit}
.v2 #alumni .alum-body .wp-block-quote cite{display:none}

/* ══ 2026-07-29 · design pass ══════════════════════════════════════════════
   1. The Review index — the loop rendered every post at identical weight, so
      nothing read as the lead. First item now gets a two-column lead layout,
      the rest become a numbered index. Pure CSS: the Query Loop blocks stay
      exactly as they are, so the page is still editable in the site editor.
   2. Pull quotes in posts — core/pullquote arrived unstyled next to the
      prototype's .pull rule.
   3. .ifacts — the zoekjaar facts are now foldable <details>.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── 2. Pull quotes inside a post ────────────────────────────────────── */
/* Pull quote. A gold left rule was tidy but read as a blockquote, which is what every
   other site does. This is the paper's own voice interrupting the article, so it gets
   the display face at display size, a hanging gold quote mark set in the margin, and
   air above and below instead of a border doing the separating. */
.v2 .art-body .wp-block-pullquote{position:relative;margin:2.6em 0;padding:0 0 0 2.2rem;
  background:none;border:0;text-align:left}
.v2 .art-body .wp-block-pullquote::before{content:"\201C" / "";position:absolute;left:-.08em;top:-.24em;
  font-family:var(--serif);font-size:4.1rem;line-height:1;color:var(--gold);opacity:.9;
  pointer-events:none}
.v2 .art-body .wp-block-pullquote::after{content:"";position:absolute;left:.62rem;top:2.6em;bottom:0;
  width:1px;background:linear-gradient(var(--gold),transparent)}
.v2 .art-body .wp-block-pullquote p{margin:0;font-family:var(--serif);font-style:italic;
  font-weight:400;font-size:clamp(1.28rem,1.02rem+.95vw,1.72rem);line-height:1.3;
  letter-spacing:-.005em;color:var(--ink);text-wrap:balance}
@media(max-width:620px){
  .v2 .art-body .wp-block-pullquote{padding-left:1.5rem}
  .v2 .art-body .wp-block-pullquote::before{font-size:3rem}
  .v2 .art-body .wp-block-pullquote::after{left:.35rem;top:2.2rem}
}
.v2 .art-body .wp-block-pullquote blockquote{margin:0;padding:0;border:0;max-width:none}
.v2 .art-body .wp-block-pullquote cite{display:block;margin-top:.75em;font-style:normal;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}

/* ── 3. Foldable "After you graduate" facts ──────────────────────────── */
.v2 .ifacts{margin:26px 0 0;border-top:1px solid var(--line)}
.v2 .ifacts details{border-bottom:1px solid var(--line)}
.v2 .ifacts summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;
  align-items:center;gap:16px;padding:14px 2px;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);transition:color var(--dur)}
.v2 .ifacts summary::-webkit-details-marker{display:none}
.v2 .ifacts summary::after{content:"+";font-family:var(--mono);font-size:1.05rem;
  line-height:1;color:var(--gold-ink);transition:transform var(--dur) var(--ease)}
.v2 .ifacts details[open] summary{color:var(--ink)}
.v2 .ifacts details[open] summary::after{content:"\2013"}
.v2 .ifacts summary:hover{color:var(--ink)}
.v2 .ifacts details>p,.v2 .ifacts details>.wp-block-paragraph{margin:0 0 16px;padding-right:24px;
  color:var(--ink-2);font-size:.98rem;line-height:1.62;max-width:62ch}

/* Social icons as CSS masks. Inline <svg> inside post_content is stripped by
   KSES whenever the seeding request is not a logged-in admin, which silently
   emptied the cards. A mask cannot be stripped and keeps currentColor hover. */
.v2 .socband span.socico,.socband span.socico{display:block;width:26px;height:26px;
  background:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain}
.socband span.socico.soc-ig{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3' y='3' width='18' height='18' rx='5' fill='none' stroke='%23000' stroke-width='1.8'/><circle cx='12' cy='12' r='4' fill='none' stroke='%23000' stroke-width='1.8'/><circle cx='17.2' cy='6.8' r='1.3' fill='%23000'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3' y='3' width='18' height='18' rx='5' fill='none' stroke='%23000' stroke-width='1.8'/><circle cx='12' cy='12' r='4' fill='none' stroke='%23000' stroke-width='1.8'/><circle cx='17.2' cy='6.8' r='1.3' fill='%23000'/></svg>")}
.socband span.socico.soc-tt{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14 3v10.5a3.75 3.75 0 1 1-3.2-3.71' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/><path d='M14 5.5c.7 2.2 2.4 3.7 4.8 3.9' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14 3v10.5a3.75 3.75 0 1 1-3.2-3.71' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/><path d='M14 5.5c.7 2.2 2.4 3.7 4.8 3.9' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/></svg>")}
.socband span.socico.soc-li{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3' y='3' width='18' height='18' rx='2.5' fill='none' stroke='%23000' stroke-width='1.8'/><path d='M7.5 10.5V17M7.5 7.6v.1M11.5 17v-4a2.2 2.2 0 0 1 4.4 0v4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3' y='3' width='18' height='18' rx='2.5' fill='none' stroke='%23000' stroke-width='1.8'/><path d='M7.5 10.5V17M7.5 7.6v.1M11.5 17v-4a2.2 2.2 0 0 1 4.4 0v4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/></svg>")}

/* Social icons as CSS masks. Inline <svg> inside post_content is stripped by
   KSES whenever the seeding request is not a logged-in admin, which silently
   emptied the cards. A mask cannot be stripped and keeps currentColor hover. */
.v2 .socband span.socico,.socband span.socico{display:block;width:26px;height:26px;
  background:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain}
.socband span.socico.soc-ig{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3' y='3' width='18' height='18' rx='5' fill='none' stroke='%23000' stroke-width='1.8'/><circle cx='12' cy='12' r='4' fill='none' stroke='%23000' stroke-width='1.8'/><circle cx='17.2' cy='6.8' r='1.3' fill='%23000'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3' y='3' width='18' height='18' rx='5' fill='none' stroke='%23000' stroke-width='1.8'/><circle cx='12' cy='12' r='4' fill='none' stroke='%23000' stroke-width='1.8'/><circle cx='17.2' cy='6.8' r='1.3' fill='%23000'/></svg>")}
.socband span.socico.soc-tt{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14 3v10.5a3.75 3.75 0 1 1-3.2-3.71' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/><path d='M14 5.5c.7 2.2 2.4 3.7 4.8 3.9' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14 3v10.5a3.75 3.75 0 1 1-3.2-3.71' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/><path d='M14 5.5c.7 2.2 2.4 3.7 4.8 3.9' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/></svg>")}
.socband span.socico.soc-li{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3' y='3' width='18' height='18' rx='2.5' fill='none' stroke='%23000' stroke-width='1.8'/><path d='M7.5 10.5V17M7.5 7.6v.1M11.5 17v-4a2.2 2.2 0 0 1 4.4 0v4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3' y='3' width='18' height='18' rx='2.5' fill='none' stroke='%23000' stroke-width='1.8'/><path d='M7.5 10.5V17M7.5 7.6v.1M11.5 17v-4a2.2 2.2 0 0 1 4.4 0v4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/></svg>")}

/* ── The Review, pass two ──────────────────────────────────────────────────
   Sections strip, a lead that actually reads as the lead, and a hover
   affordance on the index rows. CSS only — the Query Loop blocks are
   untouched and still editable in the site editor.
   ------------------------------------------------------------------------ */
.v2 .rev-sections{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 18px;
  margin:0 0 30px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.v2 .rev-sections span{font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-3)}
.v2 .rev-sections a{font-family:var(--sans);font-size:.9rem;color:var(--ink-2);
  text-decoration:none;padding-bottom:3px;border-bottom:1px solid transparent;
  transition:color var(--dur),border-color var(--dur)}
.v2 .rev-sections a:hover{color:var(--ink);border-bottom-color:var(--gold)}

/* Lead: bigger picture, tighter headline, a real read-on cue. */
.v2 .bloglist li.wp-block-post:first-child{column-gap:clamp(26px,3.4vw,52px)}
.v2 .bloglist li.wp-block-post:first-child .bimg img{aspect-ratio:5/4;border-radius:2px}
.v2 .bloglist li.wp-block-post:first-child .bcat{font-size:.66rem;letter-spacing:.2em}
.v2 .bloglist li.wp-block-post:first-child .btitle a{letter-spacing:-.02em}
.v2 .bloglist li.wp-block-post:first-child .bdek{max-width:46ch;color:var(--ink-2)}
.v2 .bloglist li.wp-block-post:first-child .bmeta::after{content:"Read the essay \2192";
  display:block;margin-top:14px;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold-ink)}

/* Index rows: a chevron that only appears on hover, so the list stays quiet. */
.v2 .bloglist li.wp-block-post:not(:first-child){position:relative}
.v2 .bloglist li.wp-block-post:not(:first-child)::after{content:"\2192";position:absolute;
  right:10px;top:50%;transform:translateY(-50%) translateX(-6px);opacity:0;
  font-family:var(--mono);font-size:.95rem;color:var(--gold-ink);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.v2 .bloglist li.wp-block-post:not(:first-child):hover::after{opacity:1;transform:translateY(-50%) translateX(0)}
.v2 .bloglist li.wp-block-post:not(:first-child):hover{padding-right:34px}
.v2 .bloglist li.wp-block-post:last-child{border-bottom:0}

/* Pagination, when there is ever a second page. */
.v2 .bloglist .wp-block-query-pagination{margin-top:26px;gap:14px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase}
.v2 .bloglist .wp-block-query-pagination a{color:var(--ink-2);text-decoration:none}
.v2 .bloglist .wp-block-query-pagination a:hover{color:var(--gold-ink)}
.v2 .bloglist .wp-block-query-pagination .current{color:var(--ink);font-weight:600}

@media(max-width:780px){
  .v2 .rev-sections{gap:0 14px}
  .v2 .bloglist li.wp-block-post:not(:first-child)::after{display:none}
  .v2 .bloglist li.wp-block-post:not(:first-child):hover{padding-right:4px}
}

/* ── The Review index — additive polish only ───────────────────────────────
   The grid for .bloglist already exists further up (search "WP Query-Loop blog
   cards"). Do NOT redefine it here — a second grid definition fought the first
   and its inherited align-content:stretch is what blew the lead's text column
   apart into evenly-spaced bands. Everything below is additive.
   ------------------------------------------------------------------------ */

/* Core wraps the excerpt/date/terms in their own elements, and those inner
   children carry WordPress's default margins. Zero them or the tidy row-gap
   above is fought by ~1em of block margin. */
.bloglist .bdek p,
.bloglist .wp-block-post-excerpt__excerpt{margin:0}
.bloglist .bmeta time,
.bloglist .bcat a{margin:0}

/* Sections strip above the index. */
.rev-sections{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 18px;
  margin:0 0 28px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.rev-sections span{font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-3)}
.rev-sections a{font-family:var(--sans);font-size:.9rem;color:var(--ink-2);text-decoration:none;
  padding-bottom:3px;border-bottom:1px solid transparent;transition:color var(--dur),border-color var(--dur)}
.rev-sections a:hover{color:var(--ink);border-bottom-color:var(--gold)}

.rev-index-head{display:flex;align-items:baseline;gap:16px;margin:0 0 20px}
.rev-index-head::after{content:"";flex:1;height:1px;background:var(--line)}
.rev-index-title{font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-3);margin:0;font-weight:500}

/* Lead: a read-on cue, without adding a block to the loop. */
.bloglist li.wp-block-post:first-child .bmeta::after{content:"Read the essay \2192";
  display:block;margin-top:12px;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold-ink)}

/* Index rows: quiet until hovered. */
.bloglist li.wp-block-post:not(:first-child){transition:background var(--dur) var(--ease),padding var(--dur) var(--ease)}
.bloglist li.wp-block-post:not(:first-child):hover{background:var(--surface);padding-inline:14px}
.bloglist li.wp-block-post:not(:first-child) .bimg img{transition:transform var(--dur) var(--ease)}
.bloglist li.wp-block-post:not(:first-child):hover .bimg img{transform:scale(1.03)}
.bloglist li.wp-block-post:last-child{border-bottom:0}

/* Pagination — unstyled before this, and raw the moment there are >12 posts. */
.bloglist .wp-block-query-pagination{margin-top:24px;letter-spacing:.1em;text-transform:uppercase}
.bloglist .wp-block-query-pagination a{color:var(--ink-2);text-decoration:none}
.bloglist .wp-block-query-pagination a:hover{color:var(--gold-ink)}
.bloglist .wp-block-query-pagination .current{color:var(--ink);font-weight:600}

/* Category / tag archive header. */
.arch-head{margin:0 0 26px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.arch-head .arch-eyebrow{font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 8px}
.arch-head h1{font-family:var(--serif);font-weight:700;letter-spacing:-.018em;
  font-size:clamp(1.6rem,1.2rem + 1.4vw,2.3rem);line-height:1.06;margin:0}
.arch-head p{margin:10px 0 0;color:var(--ink-2);max-width:56ch}

/* ============================================================
   THE REVIEW — index redesign (2.5.0)

   The page's job is to make a sceptical applicant believe this
   department produces evidence, then get them into one essay.
   So the index prints the evidence: each entry carries a ledger
   line naming the outlet or occasion and the size of the thing
   that was studied. That replaces the 01/02/03 numbering, which
   encoded nothing the date did not already say.

   Three fixes ride along: the rows stop being floating panels
   and become a ruled ledger; the lead stops stretching its text
   column into 150px of dead space; and the index runs in ink
   while only the lead keeps its colour, so seven unrelated
   stock photographs stop fighting each other.
   ============================================================ */

/* --- the ledger line ------------------------------------- */
.bloglist .bledger{grid-area:ledger;margin:6px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;
  gap:0 8px;font-family:var(--mono);font-size:.68rem;letter-spacing:.07em;color:var(--ink-3)}
.bloglist .bledger-src{color:var(--green-700)}
.bloglist .bledger-sep{color:var(--line)}
.bloglist .bledger-read{white-space:nowrap}

/* --- rows: a ruled ledger, not a stack of cards ----------- */
.bloglist ul.wp-block-post-template > li.wp-block-post{
  background:transparent;box-shadow:none;border-radius:0;
  grid-template-columns:116px minmax(0,1fr) auto;
  grid-template-areas:"img cat meta" "img title title" "img dek dek" "img ledger ledger";
  column-gap:clamp(18px,2vw,28px);row-gap:2px;align-items:start;
  padding:26px 0;border-bottom:1px solid var(--line);
  transition:padding var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.bloglist li.wp-block-post::before{content:none}      /* the numbering retires here */
.bloglist li.wp-block-post:last-child{border-bottom:0}

/* Hover moves the rule, not a filled panel: the row stays part of the ledger. */
.bloglist ul.wp-block-post-template > li.wp-block-post:hover{background:transparent;padding-inline:0}
.bloglist ul.wp-block-post-template > li.wp-block-post:hover{border-bottom-color:var(--ink-3)}

.bloglist li.wp-block-post .bmeta{align-self:start;padding-top:1px;text-align:right}
.bloglist li.wp-block-post .btitle{margin-top:2px}
.bloglist li.wp-block-post .bdek{margin-top:4px;max-width:64ch}

/* --- plates: the index reads in ink, the lead in colour ---- */
.bloglist li.wp-block-post .bimg img{width:116px;height:116px;border-radius:2px;
  filter:grayscale(1) contrast(1.04) brightness(1.04);
  transition:filter var(--dur) var(--ease)}
.bloglist li.wp-block-post:hover .bimg img{filter:grayscale(.55) contrast(1.04) brightness(1.04)}

/* --- the lead ---------------------------------------------- */
/* Was: four rows with a 1fr filler, which stretched the text column and stranded
   the date ~150px below the excerpt. Now every row is content-sized and the
   date sits with the ledger, immediately under the dek. */
.bloglist ul.wp-block-post-template > li.wp-block-post:first-child{
  grid-template-columns:minmax(0,46%) minmax(0,1fr);
  grid-template-areas:"img cat" "img title" "img dek" "img ledger" "img meta";
  grid-template-rows:auto auto auto auto auto;
  align-items:start;align-content:start;
  padding:0 0 34px;border-bottom:2px solid var(--ink)}
.bloglist li.wp-block-post:first-child .bimg img{width:100%;height:auto;aspect-ratio:5/4;
  object-fit:cover;filter:none}
.bloglist li.wp-block-post:first-child:hover .bimg img{filter:none}
.bloglist li.wp-block-post:first-child .bmeta{align-self:start;text-align:left;margin-top:14px}
.bloglist li.wp-block-post:first-child .bledger{margin-top:16px;padding-top:14px;
  border-top:1px solid var(--line)}

/* --- section eyebrow gets a tick, so the three beats read --- */
.bloglist .bcat{position:relative;padding-left:14px}
.bloglist .bcat::before{content:"";position:absolute;left:0;top:.42em;width:7px;height:2px;
  background:var(--gold)}

/* --- mobile ------------------------------------------------- */
@media(max-width:760px){
  .bloglist ul.wp-block-post-template > li.wp-block-post,
  .bloglist ul.wp-block-post-template > li.wp-block-post:first-child{
    grid-template-columns:84px minmax(0,1fr);
    grid-template-areas:"img cat" "img title" "dek dek" "ledger ledger" "meta meta";
    column-gap:16px;row-gap:4px}
  .bloglist li.wp-block-post .bimg img,
  .bloglist li.wp-block-post:first-child .bimg img{width:84px;height:84px;aspect-ratio:auto}
  .bloglist li.wp-block-post .bmeta{text-align:left}
  .bloglist li.wp-block-post:first-child .bledger{margin-top:10px}
}

@media(prefers-reduced-motion:reduce){
  .bloglist li.wp-block-post,.bloglist li.wp-block-post .bimg img{transition:none}
}

/* --- the dead gap at the top of the index -------------------
   .zsec pads 64–120px top, and the masthead already ends on a
   gold rule, so the list started a screen-third down on desktop. */
.p-blog .zsec:first-of-type{padding-top:clamp(28px,3.4vw,46px)}

/* --- index head ------------------------------------------- */
.p-blog .rev-index-head{align-items:baseline}
.p-blog .rev-index-note{margin:0;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;
  color:var(--ink-3);text-align:right}
@media(max-width:640px){.p-blog .rev-index-head{flex-direction:column;gap:2px}
  .p-blog .rev-index-note{text-align:left}}

/* ============================================================
   THE THREE BEATS — contents block under the issue list.
   Replaces the old "Sections" strip, which was three links to
   noindex archives holding one to three posts each.
   ============================================================ */
.revsec{margin-top:clamp(48px,6vw,84px);padding-top:clamp(26px,3vw,38px);
  border-top:2px solid var(--ink)}
.revsec-head{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  flex-wrap:wrap;margin:0 0 clamp(20px,2.6vw,32px)}
.revsec-title{font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink);margin:0}
.revsec-note{margin:0;color:var(--ink-3);font-size:.9rem;max-width:52ch}

.revsec-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0 clamp(24px,3vw,44px)}
.revsec-col{padding-right:clamp(18px,2vw,32px);border-right:1px solid var(--line)}
.revsec-col:last-child{border-right:0;padding-right:0}

.revsec-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 4px;
  padding-bottom:8px;border-bottom:1px solid var(--ink)}
.revsec-name{font-family:var(--serif);font-size:1.12rem;font-weight:700;letter-spacing:-.01em;
  color:var(--ink)}
.revsec-count{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap}
.revsec-blurb{margin:10px 0 14px;color:var(--ink-2);font-size:.88rem;line-height:1.45}

.revsec-items{list-style:none;margin:0;padding:0}
.revsec-item{padding:11px 0;border-bottom:1px solid var(--line)}
.revsec-item:last-child{border-bottom:0}
.revsec-link{display:block;font-family:var(--serif);font-size:1rem;line-height:1.25;
  color:var(--ink);text-decoration:none;letter-spacing:-.005em}
.revsec-link:hover{color:var(--green-800);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--gold)}
.revsec-link:focus-visible{outline:2px solid var(--gold-ink);outline-offset:3px}
.revsec-meta{display:flex;flex-wrap:wrap;gap:0 8px;margin-top:5px;font-family:var(--mono);
  font-size:.62rem;letter-spacing:.06em;color:var(--ink-3)}
.revsec-src{color:var(--green-700)}
.revsec-date{white-space:nowrap}

@media(max-width:860px){
  .revsec-grid{grid-template-columns:1fr;gap:0}
  .revsec-col{border-right:0;padding-right:0;padding-bottom:22px;margin-bottom:22px;
    border-bottom:1px solid var(--line)}
  .revsec-col:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
}

/* ============================================================
   Index revisions, 7 Aug 2026
   - the three-beats contents block is gone; filtering happens
     in place instead, which is what it was really standing in for
   - plates run in colour again
   ============================================================ */

/* Dead now that the block is removed — kept as a no-op guard in case an old
   cached page still ships the empty wrapper. */
.revsec{display:none}

/* Colour, not greyscale. The plates are also bigger: at 116px the photographs
   were unreadable, which is what made them look like noise. */
.bloglist li.wp-block-post .bimg img{width:150px;height:112px;border-radius:3px;
  filter:none;transition:transform var(--dur) var(--ease)}
.bloglist li.wp-block-post:hover .bimg img{filter:none;transform:scale(1.015)}
.bloglist ul.wp-block-post-template > li.wp-block-post{grid-template-columns:150px minmax(0,1fr) auto}

/* --- filter bar ------------------------------------------- */
.p-blog .rev-index-head{display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:14px}
.revfilter{display:flex;flex-wrap:wrap;gap:6px}
.revfilter-btn{appearance:none;background:transparent;border:1px solid var(--line);
  border-radius:999px;padding:6px 14px;cursor:pointer;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2);transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
  border-color var(--dur) var(--ease)}
.revfilter-btn:hover{border-color:var(--ink-3);color:var(--ink)}
.revfilter-btn:focus-visible{outline:2px solid var(--gold-ink);outline-offset:2px}
.revfilter-btn.is-on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.revfilter-status{margin:0 0 10px;font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;
  color:var(--ink-3);min-height:1em}

/* When a filter is on, the first visible row must not keep the lead treatment —
   :first-child still matches a hidden row, so scope the lead to the unfiltered list. */
.bloglist ul.wp-block-post-template.is-filtered > li.wp-block-post:first-child{
  grid-template-columns:150px minmax(0,1fr) auto;
  grid-template-areas:"img cat meta" "img title title" "img dek dek" "img ledger ledger";
  padding:26px 0;border-bottom:1px solid var(--line)}
.bloglist ul.wp-block-post-template.is-filtered > li.wp-block-post:first-child .bimg img{
  width:150px;height:112px;aspect-ratio:auto}
.bloglist ul.wp-block-post-template.is-filtered > li.wp-block-post:first-child .btitle{font-size:1.24rem}
.bloglist ul.wp-block-post-template.is-filtered > li.wp-block-post:first-child .bdek{
  font-size:.95rem;font-family:var(--sans);max-width:64ch}
.bloglist ul.wp-block-post-template.is-filtered > li.wp-block-post:first-child .bledger{
  margin-top:6px;padding-top:0;border-top:0}
.bloglist ul.wp-block-post-template.is-filtered > li.wp-block-post:first-child .bmeta{
  text-align:right;margin-top:0}

@media(max-width:760px){
  .bloglist li.wp-block-post .bimg img,
  .bloglist li.wp-block-post:first-child .bimg img{width:84px;height:84px}
  .bloglist ul.wp-block-post-template.is-filtered > li.wp-block-post:first-child .bimg img{width:84px;height:84px}
}

/* Photo credit under a licensed hero. Rendered from attachment meta, so it appears
   wherever the image does and cannot be edited out of the article by accident. */
.art-credit{margin:10px auto 0;font-family:var(--mono);font-size:.66rem;line-height:1.5;
  letter-spacing:.04em;color:var(--ink-3);
  /* The hero is full-bleed, but its credit is text: without the page wrap it printed
     flush against the left edge of the viewport, the full width of the screen. */
  max-width:1220px;padding-inline:clamp(18px,4vw,46px)}
.art-credit a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:var(--line)}
.art-credit a:hover{color:var(--ink);text-decoration-color:var(--gold)}
.art-credit a:focus-visible{outline:2px solid var(--gold-ink);outline-offset:2px}
.art-credit-links{white-space:nowrap}

/* ============================================================
   THE REVIEW — Research Ledger (final index system, 7 Aug 2026)

   Written after a review that found the honest problem: the most
   valuable thing on the page — the evidence each piece rests on —
   was set as microprint under the dek, while a decorative gold tick
   was repeated seven times and the row hover implied a click target
   the markup never provided.

   So the register has four columns and each one holds one kind of
   fact: WHEN it ran, WHAT it looked like, WHAT IT SAYS, and WHAT IT
   RESTS ON. Date and evidence become stable rails you can scan down.

   This block is the resolved system and deliberately overrides the
   iterations above it; append below only if you are extending it.
   ============================================================ */

/* --- index header: one heavy rule, flat tabs, no pills ------ */
.p-blog .zsec:first-of-type{padding-top:clamp(24px,2.6vw,36px)}
.p-blog .rev-index-head{display:grid;grid-template-columns:max-content 1fr;align-items:end;
  gap:10px 28px;margin:0;padding-bottom:0;border-bottom:2px solid var(--ink)}
.p-blog .rev-index-head::after{content:none}
.p-blog .rev-index-title{font-size:.72rem;letter-spacing:.18em;padding-bottom:12px}

.revfilter{justify-self:end;gap:0 20px}
.revfilter-btn{border:0;border-radius:0;background:transparent;padding:0 0 12px;
  min-height:34px;font-size:.7rem;letter-spacing:.14em;color:var(--ink-3);
  border-bottom:2px solid transparent;margin-bottom:-2px}
.revfilter-btn:hover{color:var(--ink);border-bottom-color:var(--line);background:transparent}
.revfilter-btn.is-on{background:transparent;color:var(--ink);border-bottom-color:var(--gold)}
.revfilter-status{margin:0;min-height:0;padding:10px 0 0}
.revfilter-status:empty{display:none}

/* --- the register ------------------------------------------ */
.bloglist{border-top:0}
.bloglist ul.wp-block-post-template > li.wp-block-post,
.bloglist ul.wp-block-post-template > li.wp-block-post:first-child{
  display:grid;
  grid-template-columns:74px 132px minmax(0,1fr) minmax(190px,244px);
  grid-template-areas:"meta img cat    ledger"
                      "meta img title  ledger"
                      "meta img dek    ledger";
  column-gap:clamp(16px,2vw,26px);row-gap:3px;align-items:start;
  padding:24px 0;margin:0;border-bottom:1px solid var(--line);border-radius:0;
  background:transparent;box-shadow:none;transform:none}
.bloglist ul.wp-block-post-template > li.wp-block-post:last-child{border-bottom:0}

/* Date is a rail, not a floating right-hand note. Tabular figures so the
   column actually lines up instead of merely being right-aligned. */
.bloglist li.wp-block-post .bmeta{grid-area:meta;text-align:left;margin:0;padding-top:2px;
  font-size:.68rem;color:var(--ink-3);font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1}

.bloglist li.wp-block-post .bimg{grid-area:img;margin:0}
.bloglist li.wp-block-post .bimg img{width:132px;height:99px;border-radius:2px;
  object-fit:cover;filter:none;transform:none;transition:opacity var(--dur) var(--ease)}

/* The gold tick is gone: it appeared on all seven rows and encoded nothing. */
.bloglist .bcat{grid-area:cat;padding-left:0;margin:0;font-size:.66rem;font-weight:500;
  letter-spacing:.16em}
.bloglist .bcat::before{content:none}

.bloglist li.wp-block-post .btitle{grid-area:title;margin:1px 0 0;font-size:1.36rem;
  font-weight:600;line-height:1.18}
.bloglist li.wp-block-post .bdek{grid-area:dek;margin:5px 0 0;font-size:.95rem;line-height:1.5;
  color:var(--ink-2);max-width:56ch}

/* The evidence gets its own column and stops being microprint. */
.bloglist li.wp-block-post .bledger{grid-area:ledger;display:block;margin:2px 0 0;padding:0;
  border-top:0;font-size:.68rem;line-height:1.55;letter-spacing:.04em;color:var(--ink-3)}
.bloglist .bledger-src{display:block;color:var(--green-700)}
.bloglist .bledger-sep{display:none}
.bloglist .bledger-read{display:block;margin-top:3px}

/* Hover: only the title is a link, so only the title reacts. The old row-wide
   hover promised a click target the HTML never had. */
.bloglist ul.wp-block-post-template > li.wp-block-post:hover{background:transparent;
  padding-inline:0;border-bottom-color:var(--line)}
.bloglist li.wp-block-post:hover .bimg img{filter:none;transform:none;opacity:.92}
.bloglist .btitle a:hover{color:var(--green-800);text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:var(--gold)}
.bloglist .btitle a:focus-visible{outline:2px solid var(--gold-ink);outline-offset:3px}

/* --- the lead ------------------------------------------------
   .is-lead is set by the filter script on the first VISIBLE row, so a
   filtered view still opens on a lead instead of a flat result list. */
.bloglist ul.wp-block-post-template > li.wp-block-post.is-lead{
  grid-template-columns:minmax(0,42%) minmax(0,1fr);
  /* cat before meta: every entry in the index reads CATEGORY then DATE, and the lead
     was the one row that inverted it. */
  grid-template-areas:"img cat" "img meta" "img title" "img dek" "img ledger";
  column-gap:clamp(24px,3vw,44px);row-gap:10px;
  padding:22px 0 32px;border-bottom:2px solid var(--ink)}
.bloglist li.wp-block-post.is-lead .bimg img{width:100%;height:auto;aspect-ratio:5/4}
.bloglist li.wp-block-post.is-lead .bmeta{text-align:left;padding-top:0}
.bloglist li.wp-block-post.is-lead .btitle{font-size:clamp(1.8rem,1.2rem + 1.5vw,2.5rem);
  line-height:1.1;margin:0}
.bloglist li.wp-block-post.is-lead .bdek{font-size:1.05rem;font-family:var(--sans);
  max-width:48ch;margin:0}
.bloglist li.wp-block-post.is-lead .bledger{display:flex;flex-wrap:wrap;gap:0 10px;
  margin:4px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:.7rem}
.bloglist li.wp-block-post.is-lead .bledger-src,
.bloglist li.wp-block-post.is-lead .bledger-read{display:inline;margin:0}
.bloglist li.wp-block-post.is-lead .bledger-sep{display:inline;color:var(--line)}

/* --- responsive --------------------------------------------- */
@media(max-width:1040px){
  .bloglist ul.wp-block-post-template > li.wp-block-post{
    grid-template-columns:74px 118px minmax(0,1fr);
    grid-template-areas:"meta img cat" "meta img title" "meta img dek" "meta img ledger"}
  .bloglist li.wp-block-post .bimg img{width:118px;height:89px}
  .bloglist li.wp-block-post .bledger{margin-top:7px}
  .bloglist .bledger-src,.bloglist .bledger-read{display:inline}
  .bloglist .bledger-sep{display:inline;color:var(--line)}
  .bloglist li.wp-block-post .bledger{display:flex;flex-wrap:wrap;gap:0 9px}
}
@media(max-width:760px){
  .bloglist ul.wp-block-post-template > li.wp-block-post,
  .bloglist ul.wp-block-post-template > li.wp-block-post.is-lead{
    grid-template-columns:96px minmax(0,1fr);
    grid-template-areas:"img meta" "img cat" "img title" "dek dek" "ledger ledger";
    column-gap:14px;row-gap:4px;padding:20px 0}
  .bloglist li.wp-block-post .bimg img,
  .bloglist li.wp-block-post.is-lead .bimg img{width:96px;height:96px;aspect-ratio:auto}
  .bloglist li.wp-block-post.is-lead .btitle{font-size:1.36rem;line-height:1.18}
  .bloglist li.wp-block-post.is-lead .bdek{font-size:.95rem;max-width:none}
  .bloglist li.wp-block-post.is-lead .bledger{padding-top:8px}
  .p-blog .rev-index-head{grid-template-columns:1fr;gap:8px}
  .revfilter{justify-self:start}
}
@media(prefers-reduced-motion:reduce){
  .bloglist li.wp-block-post .bimg img{transition:none}
}

/* --- Research Ledger, corrections after first render ---------
   1. The ledger paragraph is injected after the excerpt, so the DOM puts it
      INSIDE div.bdek. It was therefore not a grid child of the row and its
      grid-area was silently ignored. display:contents promotes both children
      into the row grid, which is what makes the four-column register real.
   2. "Read the essay →" was generated on .bmeta::after, keyed to :first-child,
      so it printed next to the date and survived filtering. The title is the
      link; the lead states it once, in the right place. */
.bloglist li.wp-block-post .bdek{display:contents}
.bloglist li.wp-block-post .bdek > .wp-block-post-excerpt__excerpt{
  grid-area:dek;margin:5px 0 0;font-size:.95rem;line-height:1.5;color:var(--ink-2);max-width:56ch}
.bloglist li.wp-block-post.is-lead .bdek > .wp-block-post-excerpt__excerpt{
  font-size:1.05rem;font-family:var(--sans);max-width:48ch;margin:0}

.bloglist li.wp-block-post .bmeta::after,
.bloglist li.wp-block-post:first-child .bmeta::after,
.v2 .bloglist li.wp-block-post:first-child .bmeta::after{content:none}

.bloglist li.wp-block-post.is-lead .btitle a::after{content:" \2192";color:var(--gold);
  font-family:var(--mono);font-size:.62em;vertical-align:.14em;letter-spacing:0}

@media(max-width:1040px){
  .bloglist li.wp-block-post .bdek > .wp-block-post-excerpt__excerpt{max-width:none}
}

/* ============================================================
   Article measure, 8 Aug 2026

   .p-post .art-body was capped at 38rem (~608px). On a desktop that is a
   narrow column: the line breaks every ten or eleven words, so a 1,400-word
   piece turns into a very long scroll and reads as heavier than it is.

   Widened to 52rem (~832px). At the serif body size that lands around 72-76
   characters a line, which is still inside the comfortable measure — the aim
   is fewer line breaks, not a wall of text. Phones are untouched: below the
   breakpoint the cap already exceeds the viewport, so the column is governed
   by the wrapper padding exactly as before.
   ============================================================ */
.p-post .art-body{max-width:52rem}

/* The pull quote and any figure run wider than the text, so the page reads as full
   rather than as one thin ribbon under a full-bleed hero — which is most of why the
   old column felt so narrow. */
.p-post .art-body > figure.wp-block-pullquote{max-width:58rem;margin-inline:auto}
.p-post .art-body > figure.wp-block-image{max-width:62rem;margin-inline:auto}

/* A wider measure needs slightly larger type to keep the line count honest. */
@media(min-width:1200px){
  .p-post .art-body{max-width:56rem;font-size:1.09rem}
}
@media(min-width:1600px){
  .p-post .art-body{max-width:60rem}
}
/* Below this the cap is irrelevant — the viewport is narrower than the measure —
   so nothing changes for iPhone, only the horizontal breathing room is kept. */
@media(max-width:820px){
  .p-post .art-body{max-width:100%;padding-inline:clamp(18px,5vw,28px)}
}

/* ============================================================
   Single-post fixes, 8 Aug 2026

   1. The four-column register written for the blog index was also
      hitting "More from The Review" at the foot of an article, which
      sits inside .wrap.narrow. Three fixed columns inside a 760px
      wrap left the title about 150 characters-per-line short, so
      headlines broke mid-word ("apocalyps / e"). The register is now
      scoped to the index; the related list gets its own two columns.

   2. The title plate and the body column were centred on different
      widths, so the article read as two misaligned blocks. Both now
      share one measure.
   ============================================================ */

/* --- 1. related posts under an article --------------------- */
.p-post .bloglist ul.wp-block-post-template > li.wp-block-post,
.p-post .bloglist ul.wp-block-post-template > li.wp-block-post.is-lead{
  grid-template-columns:104px minmax(0,1fr);
  grid-template-areas:"img cat" "img title" "img meta";
  column-gap:18px;row-gap:2px;align-items:start;
  padding:18px 0;border-bottom:1px solid var(--line);border-top:0}
.p-post .bloglist li.wp-block-post .bimg img,
.p-post .bloglist li.wp-block-post.is-lead .bimg img{width:104px;height:78px;aspect-ratio:auto}
.p-post .bloglist li.wp-block-post .btitle,
.p-post .bloglist li.wp-block-post.is-lead .btitle{font-size:1.12rem;line-height:1.25;margin:1px 0 0}
.p-post .bloglist li.wp-block-post .bmeta,
.p-post .bloglist li.wp-block-post.is-lead .bmeta{grid-area:meta;text-align:left;margin-top:4px;
  padding-top:0}
/* The dek and the evidence ledger belong to the index, not to a "more from" list. */
.p-post .bloglist .bdek,
.p-post .bloglist .bledger{display:none}
.p-post .bloglist li.wp-block-post.is-lead{border-bottom:1px solid var(--line);padding:18px 0}

@media(max-width:600px){
  .p-post .bloglist ul.wp-block-post-template > li.wp-block-post,
  .p-post .bloglist ul.wp-block-post-template > li.wp-block-post.is-lead{
    grid-template-columns:76px minmax(0,1fr);column-gap:14px}
  .p-post .bloglist li.wp-block-post .bimg img,
  .p-post .bloglist li.wp-block-post.is-lead .bimg img{width:76px;height:76px}
}

/* --- 2. title plate on the same measure as the body --------- */
.p-post .art-head .art-plate{max-width:52rem;margin-inline:auto}
@media(min-width:1200px){
  .p-post .art-head .art-plate{max-width:56rem}
}
@media(min-width:1600px){
  .p-post .art-head .art-plate{max-width:60rem}
}

/* ============================================================
   Filter fix, 8 Aug 2026

   The filter set row.hidden and nothing happened. The browser's own
   rule is [hidden]{display:none}, but this stylesheet sets
   display:grid on the same element with a heavier selector, so the
   grid won and every row stayed on screen. The JS was correct the
   whole time; the CSS silently outvoted it.

   Worth remembering: any element you intend to toggle with [hidden]
   must not be given a display value by a stronger selector.
   ============================================================ */
.bloglist ul.wp-block-post-template > li.wp-block-post[hidden],
.p-post .bloglist ul.wp-block-post-template > li.wp-block-post[hidden]{display:none !important}

/* --- careers: what employers ask for ------------------------ */
.emp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,3vw,40px);
  margin-top:clamp(20px,2.6vw,32px)}
.emp-col{padding-top:16px;border-top:2px solid var(--ink)}
.emp-h{font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;margin:0 0 12px}
.emp-h.emp-yes{color:var(--green-800)}
.emp-h.emp-no{color:var(--ink-3)}
.emp-col ul{margin:0;padding-left:1.05em}
.emp-col li{margin:0 0 10px;font-size:.95rem;line-height:1.5;color:var(--ink-2)}
.emp-col li strong{color:var(--ink)}
@media(max-width:760px){.emp-grid{grid-template-columns:1fr;gap:26px}}

/* ============================================================
   Contrast fixes, 8 Aug 2026 — WCAG 1.4.3

   --gold (#f6b800) on --paper (#f1ece0) measures about 1.5:1.
   v2.css:103 already fixed .track .rk with --gold-ink; four more
   selectors carrying gold text on paper were missed, and both
   stylesheets load, so they were still failing.
   ============================================================ */
.role .rk,
.p-careers .role .rk,
.skills .rank,
.ecard .fig-no,
.faq summary::before{color:var(--gold-ink)}

/* ─────────────────────────────────────────────────────────────────────────────
   Post body: foldables, lists and source notes (all posts, current and future)

   A post body can now contain core/details, and core/details ships with the raw
   UA triangle, no rules and no spacing, which is why the "Learn more" block read
   as unstyled markup. These give it the same mono-label + hairline + "+"/"-"
   language the FAQ and the careers fold-outs already use, so a foldable looks
   the same wherever it appears on the site.

   Lists get the gold mono "+" marker instead of a UA disc, matching the careers
   requirement lists. The trailing source note (a fully italic final paragraph in
   every seeded post) drops to the mono caption treatment used everywhere else:
   it is apparatus, not prose, and at body size it competed with the article.
   ─────────────────────────────────────────────────────────────────────────── */
.v2 .art-body .wp-block-details{margin:0 0 2px;border-top:1px solid var(--line)}
.v2 .art-body .wp-block-details:last-of-type{border-bottom:1px solid var(--line)}
.v2 .art-body .wp-block-details > summary{list-style:none;cursor:pointer;
  display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:16px 0;font-family:var(--mono);font-size:.7rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2);
  transition:color .2s var(--ease)}
.v2 .art-body .wp-block-details > summary::-webkit-details-marker{display:none}
.v2 .art-body .wp-block-details > summary::marker{content:""}
.v2 .art-body .wp-block-details > summary::after{content:"+";font-family:var(--mono);
  font-size:1.02rem;line-height:1;color:var(--gold-ink)}
.v2 .art-body .wp-block-details[open] > summary{color:var(--ink)}
.v2 .art-body .wp-block-details[open] > summary::after{content:"\2013"}
.v2 .art-body .wp-block-details > summary:hover{color:var(--ink)}
.v2 .art-body .wp-block-details > p{margin:0 0 18px;font-size:1rem;line-height:1.62;
  color:var(--ink-2);max-width:60ch}
.v2 .art-body .wp-block-details > p:last-child{margin-bottom:20px}

.v2 .art-body > ul.wp-block-list,
.v2 .art-body > .wp-block-post-content > ul.wp-block-list{margin:0 0 1.5em;padding-left:0;list-style:none}
.v2 .art-body > ul.wp-block-list li,
.v2 .art-body > .wp-block-post-content > ul.wp-block-list li{position:relative;margin:0 0 .7em;padding-left:1.4em}
.v2 .art-body > ul.wp-block-list li::before,
.v2 .art-body > .wp-block-post-content > ul.wp-block-list li::before{content:"\2192";position:absolute;left:0;top:.06em;
  font-family:var(--mono);font-size:.78rem;color:var(--gold-ink)}

/* The closing source note carries class="source" in the seeded body. An earlier
   version tried to find it with :has(> em:only-child); :only-child counts elements,
   not text nodes, so it also caught ordinary prose containing one <em> and turned a
   paragraph of the article into a caption. */
/* The source note is the most-cited thing on the page and it was set as one block of
   italic mono with no label, which reads as small print rather than as evidence. It gets
   a name, roman type, a readable measure, and italics reserved for journal titles. */
.v2 .art-body p.source{position:relative;margin:0;padding-top:0;
  border-top:0;font-family:var(--mono);font-size:.74rem;
  font-style:normal;letter-spacing:.01em;line-height:1.72;color:var(--ink-2);
  max-width:46em}

.v2 .art-body p.source a{color:var(--ink);text-decoration:underline;
  text-underline-offset:2px;text-decoration-color:var(--line)}
.v2 .art-body p.source a:hover{text-decoration-color:var(--gold)}
.v2 .art-body p.source em{font-style:italic;color:var(--ink)}

/* ─────────────────────────────────────────────────────────────────────────────
   Careers: .zstagger. Both sections used to sit in .wrap.narrow (760px), so a
   two-verdict list and seven short facts ran down one thin column with the page
   empty either side. Wider measure, and each block structured for what it is.

   The job ads are a ledger with two verdicts, so the two columns share one rule
   line and are separated by a hairline spine: a comparison you read across, not
   two stacks that happen to be adjacent. An earlier version offset the second
   column to make a diagonal; it just looked misaligned, which is the honest
   reading of a rule that starts halfway down the page.

   The orientation-year facts stay foldable, because on a phone seven answers at
   once is a wall, but they flow in two columns on a wide screen instead of
   stepping across it. Below 1000px both blocks are a single column again.
   ─────────────────────────────────────────────────────────────────────────── */
.v2 .wrap.zstagger{max-width:1160px}
.v2 .zstagger .zhead,.v2 .zstagger > p{max-width:64ch}

.v2 .zstagger .emp-col ul{list-style:none;margin:0;padding-left:0}
.v2 .zstagger .emp-col li{position:relative;margin:0 0 12px;padding-left:22px}
.v2 .zstagger .emp-col li::before{content:"+";position:absolute;left:0;top:0;
  font-family:var(--mono);font-size:.78rem;line-height:1.7;color:var(--gold-ink)}

.v2 .zstagger .emp-grid + p{margin-top:34px;padding-top:20px;
  border-top:1px solid var(--line);font-family:var(--serif);font-size:1.12rem;
  font-style:italic;line-height:1.5;color:var(--ink);max-width:38ch}
.v2 .zstagger .emp-grid + p + .source{margin-top:14px}

@media(min-width:761px){
  .v2 .zstagger .emp-grid{grid-template-columns:1fr 1fr;gap:0;align-items:stretch}
  .v2 .zstagger .emp-grid > .emp-col{margin-top:0;padding-top:16px}
  .v2 .zstagger .emp-grid > .emp-col:first-child{padding-right:clamp(30px,4vw,60px)}
  .v2 .zstagger .emp-grid > .emp-col:nth-child(2){padding-left:clamp(30px,4vw,60px);
    border-left:1px solid var(--line)}

  /* Lead-out line and its apparatus sit side by side, so the closing statement
     does not leave half the page blank under a full-width block. */
  .v2 .zstagger .emp-grid + p{display:inline-block;width:56%;max-width:none;vertical-align:top;
    padding-right:clamp(30px,4vw,60px);box-sizing:border-box}
  .v2 .zstagger .emp-grid + p + .source{display:inline-block;width:42%;
    vertical-align:top;margin-top:34px;padding-top:20px;
    border-top:1px solid var(--line);box-sizing:border-box}

  .v2 .zstagger .ifacts{columns:2;column-gap:clamp(40px,5vw,72px);border-top:0}
  .v2 .zstagger .ifacts details{break-inside:avoid;margin:0;
    border-top:1px solid var(--line);border-bottom:0}
  .v2 .zstagger .ifacts details:last-child{border-bottom:1px solid var(--line)}
  .v2 .zstagger .ifacts details > p,
  .v2 .zstagger .ifacts details > .wp-block-paragraph{padding-right:0;max-width:46ch}
}

/* Inline photographs inside an article. Posts had only a hero until now, so a
   figure in the body rendered full-bleed and uncaptioned. */
.v2 .art-body .art-inline,
.v2 .art-body .wp-block-image.art-inline{margin:2.9em 0 2.2em;max-width:none}
/* An in-body photograph is evidence inside an argument, not an interruption of it. At the
   920px measure a 3:2 frame renders 613px tall, which is most of a laptop screen for one
   picture, and the reader loses the thread of the paragraph above it. Cap the height and
   let the frame crop rather than the column shrink. */
.v2 .art-body .art-inline img{width:100%;height:auto;display:block;border-radius:var(--r-sm);
  max-height:min(50vh,420px);object-fit:cover;object-position:center 42%}
.v2 .art-body .art-inline figcaption,
.v2 .art-body .art-inline .wp-element-caption{margin-top:10px;font-family:var(--mono);
  font-size:.68rem;line-height:1.5;letter-spacing:.02em;color:var(--ink-3)}
/* A photo credit is not a caption. Same family, quieter, so it stops reading as
   part of the article's own voice. */
.v2 .art-body .art-inline figcaption .credit{display:block;margin-top:4px;
  font-size:.62rem;letter-spacing:.06em;color:var(--ink-3);opacity:.85}

/* the prototype's own p.pull gets the same treatment as the core block */
.p-post .pull::before{content:"\201C" / "";position:absolute;left:-.08em;top:-.24em;font-family:var(--serif);
  font-size:4.1rem;line-height:1;color:var(--gold);opacity:.9}
.p-post .pull::after{content:"";position:absolute;left:.62rem;top:2.6em;bottom:0;width:1px;
  background:linear-gradient(var(--gold),transparent)}
.p-post .pull{font-family:var(--serif);font-style:italic;
  font-size:clamp(1.28rem,1.02rem+.95vw,1.72rem);line-height:1.3;color:var(--ink);text-wrap:balance}
@media(max-width:620px){.p-post .pull{padding-left:1.5rem}.p-post .pull::before{font-size:3rem}}


/* "Read more" sat directly on the last accordion row's border, so the two blocks read as
   one broken element. It also needed its links to look like links: they are the whole
   point of the section. */
.v2 .art-body .wp-block-details + h3,
.v2 .art-body .wp-block-details + .wp-block-heading{margin-top:3rem}
.v2 .art-body > ul.wp-block-list li a,
.v2 .art-body > .wp-block-post-content > ul.wp-block-list li a{text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:var(--line);color:var(--ink)}
.v2 .art-body > ul.wp-block-list li a:hover,
.v2 .art-body > .wp-block-post-content > ul.wp-block-list li a:hover{text-decoration-color:var(--gold)}
.v2 .art-body > ul.wp-block-list li,
.v2 .art-body > .wp-block-post-content > ul.wp-block-list li{margin-bottom:.55em}

/* Opening letter. Sized to three lines of body text and kept on the baseline grid so it
   does not shove the first line sideways. Only the first paragraph of the article. */
.v2 .art-body p.lede::first-letter,
.v2 .art-body > p:first-of-type::first-letter,
.v2 .art-body > .wp-block-post-content > p:first-of-type::first-letter{
  float:left;font-family:var(--serif);font-weight:600;font-size:3.9em;line-height:.82;
  padding:.06em .1em 0 0;margin:.02em .04em 0 0;color:var(--ink)}
@media(max-width:620px){
  .v2 .art-body p.lede::first-letter,
  .v2 .art-body > p:first-of-type::first-letter,
  .v2 .art-body > .wp-block-post-content > p:first-of-type::first-letter{font-size:3.1em}
}


/* The sticky has to live on the wrapper, not on the nav: a sticky element can only move
   within its containing block, and .nav's wrapper was only as tall as .nav itself, so it
   had no travel and silently never stuck on any page. */
.v2 .wp-site-blocks > .wp-block-template-part:has(> .nav){position:sticky;top:0;z-index:50}



/* Sources fold away. They are the guarantee behind every claim on the page, so they must
   stay one click from the reader, but eight lines of citation should not be the last thing
   a prospective student reads. Closed by default, open on click, and still in the DOM for
   anything that indexes the page. */
.v2 .art-sources-fold{margin:3.4em 0 0;border-top:1px solid var(--line);
  border-bottom:0;padding-top:.2rem}
.v2 .art-sources-fold > summary{list-style:none;cursor:pointer;display:flex;
  align-items:center;justify-content:space-between;gap:16px;padding:1rem 2px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);transition:color var(--dur,.2s)}
.v2 .art-sources-fold > summary::-webkit-details-marker{display:none}
.v2 .art-sources-fold > summary::after{content:"+";font-family:var(--mono);
  font-size:1.05rem;line-height:1;color:var(--gold)}
.v2 .art-sources-fold[open] > summary::after{content:"\2013"}
.v2 .art-sources-fold > summary:hover{color:var(--ink)}
.v2 .art-sources-fold > summary:focus-visible{outline:2px solid var(--gold-ink,var(--gold));
  outline-offset:3px}
.v2 .art-sources-fold[open] > summary{color:var(--ink)}
.v2 .art-sources-fold > .source,
.v2 .art-sources-fold > div{padding:0 0 1.6rem;font-family:var(--mono);font-size:.74rem;
  line-height:1.72;letter-spacing:.01em;color:var(--ink-2);max-width:46em}
.v2 .art-sources-fold > div a{color:var(--ink);text-decoration:underline;
  text-underline-offset:2px;text-decoration-color:var(--line)}
.v2 .art-sources-fold > div a:hover{text-decoration-color:var(--gold)}
/* the mirrors' aside styling would otherwise fight the fold: it was a padded call-out
   box on a narrower measure, which left the summary indented from the article text */
.v2 details.art-sources{background:none;border-left:0;border-right:0;padding:0;
  max-width:38rem;margin:3.4em auto 0}
@media(max-width:620px){
  .v2 .art-sources-fold > summary{min-height:44px}
}

/* Kept last on purpose: these are same-specificity overrides of base rules
   defined earlier, so source order is what makes them win. */
/* ── MOBILE READABILITY ────────────────────────────────────────────────────
   Measured on a real device profile at 360, 390 and 430px. The furniture layer
   (captions, credits, bylines, cites, meta) was all set between 9.6px and 12.5px:
   sizes chosen for a desktop column and never lifted for a phone. */
@media(max-width:620px){
  .v2 .art-body .art-inline figcaption,
  .v2 .art-body .art-inline .wp-element-caption{font-size:.85rem;line-height:1.55}
  /* the credit differed from the caption by one pixel, so it read as caption line two */
  .v2 .art-body .art-inline figcaption .credit{font-size:.75rem;margin-top:7px;opacity:1;
    color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em}
  .v2 .art-body p.source,
  .v2 .art-sources-fold > .source,
  .v2 .art-sources-fold > div{font-size:.875rem;line-height:1.68}
  .v2 .art-credit{font-size:.8rem}
  .v2 .art-body .wp-block-pullquote cite{font-size:.8rem}
  .v2 .art-body .wp-block-details summary{font-size:.9rem}
  .v2 .wp-block-post-excerpt__excerpt{font-size:1rem}
  .v2 .art-plate h1{line-height:1.12}

  /* 50vh never wins on a phone: 50vh is 400-466px, so the 420px arm always applied */
  .v2 .art-body .art-inline img{max-height:min(46vh,420px)}

  /* the gold rule beside a two-line quote collapsed to a 7px stub that read as a glitch */
  .v2 .art-body .wp-block-pullquote::after{content:none}

  /* tap targets: everything below was under the 44px minimum */
  .v2 .revfilter-btn{min-height:44px;padding:11px 4px;font-size:.8rem}
  .v2 .art-credit a,
  .v2 .art-body p.source a,
  .v2 .art-body > ul.wp-block-list li a,
  .v2 .art-body > .wp-block-post-content > ul.wp-block-list li a{
    display:inline-flex;align-items:center;min-height:44px;padding:0 2px}
  .v2 .art-back a{display:inline-block;min-height:44px;line-height:44px;font-size:.85rem}
  .v2 .hdot{min-width:44px;min-height:44px;background-clip:content-box;padding:17px}
  .v2 .hpause{min-width:44px;min-height:44px}
}

/* Shown to editors only: a licensed image whose bytes no longer match its recorded
   checksum is withheld from visitors, because the licence is conditional on a credit
   we can no longer prove. */
.v2 .art-body .art-credit-missing{margin:2.4em 0;padding:1rem 1.1rem;border:1px dashed var(--gold);
  background:var(--surface-2,transparent)}
.v2 .art-body .art-credit-missing p{margin:0;font-family:var(--mono);font-size:.72rem;
  line-height:1.6;color:var(--ink-2)}

/* CAREERS, 27 Aug 2026: the page now closes ladder -> CTA, so two dark bands meet.
   A gold hairline keeps them reading as two sections rather than one long slab. */
.v2 .career + .final{border-top:1px solid rgba(246,184,0,.3)}

/* ============================================================
   MOBILE DRAWER — full-height sheet, scroll-locked, honest current-page mark
   ============================================================ */
@media(max-width:1039px){
  /* Was position:absolute with max-height:calc(100vh - 68px), which left the hero
     visible under a 351px panel and let the page scroll behind it. dvh, not vh, so
     the mobile browser's collapsing address bar cannot clip the last item. */
  .v2 .mobile-menu{
    position:fixed;left:0;right:0;bottom:0;max-height:none;height:auto;
    overflow-y:auto;overscroll-behavior:contain;
    transform-origin:top;
    padding-bottom:calc(24px + env(safe-area-inset-bottom))}
  .v2 .mobile-menu:not(.open){visibility:hidden}
}
/* Scroll lock for the page behind the open drawer. */
html.nav-open,html.nav-open body{overflow:hidden}

/* The current page was marked with a floating "·" at the right edge, which read as a
   rendering artefact rather than a state. A gold rule on the leading edge is a state. */
.mobile-menu .mm-link[aria-current="page"]::after{content:none}
.mobile-menu .mm-link[aria-current="page"]{
  position:relative;padding-left:14px;font-style:normal}
.mobile-menu .mm-link[aria-current="page"]::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:1.15em;background:var(--gold);border-radius:2px}

/* ============================================================
   TOUCH TARGETS
   WCAG 2.5.8 Target Size (Minimum, AA) is 24x24 CSS px — not the 44px often quoted,
   which is 2.5.5 (AAA) / Apple HIG. 2.5.8 also exempts targets "in a sentence or
   whose size is constrained by the line-height of non-target text", which covers the
   inline citation and prose links (.source a, body copy links, alumni names): padding
   those to 44px would break the leading of the paragraphs they sit in for no gain.

   What follows are the STANDALONE controls, which have no such excuse.
   ============================================================ */

/* Blog card category tags were 14px, sitting alone above the headline. */
.brow .bcat,.bcat a{display:inline-flex;align-items:center;min-height:24px}

/* Breadcrumb links were 17px. */
.crumb a{display:inline-flex;align-items:center;min-height:24px}

/* Footer links were 30px: AA-passing but the footer has room to be comfortable. */
.v2 .sitefoot .sf-col a{padding:11px 0;min-height:44px;display:flex;align-items:center}

/* Chip / filter links were 31px. */
.v2 .chip{min-height:44px;display:inline-flex;align-items:center}

/* Primary buttons landed on 43px — one pixel under the Apple HIG target. */
.btn{min-height:44px}

/* Source credits where the link IS the whole credit (13px) are standalone targets, so
   the inline exception does not cover them. :only-child keeps this off the citation
   links that genuinely sit inside a sentence, whose leading must not change. */
.source > a:only-child,.src > a:only-child{
  display:inline-flex;align-items:center;min-height:24px}

/* ============================================================
   ARTICLE FURNITURE — reading progress, share row, desk bio, evidence callout
   ============================================================ */

/* 2px gold rule, pinned above everything, scaled by JS rather than animated width
   so it never triggers layout on scroll. */
.read-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:100;
  background:var(--gold);transform:scaleX(0);transform-origin:0 50%;will-change:transform}
@media print{.read-progress{display:none}}


/* The desk bio closes the article: who wrote this and what they promise. */
.art-bio{max-width:39rem;margin:3.2rem auto 0;padding:1.4rem 0 0;border-top:2px solid var(--gold)}
.art-bio-name{margin:0 0 .5rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3)}
.art-bio-text{margin:0;font-family:var(--serif);font-size:1rem;line-height:1.62;color:var(--ink-2)}
@media(max-width:820px){.art-bio{max-width:none;margin-inline:clamp(18px,5vw,28px)}}

/* "The evidence" callout — the house claim-first, then-the-evidence structure made
   into a block an editor can reach for. Add class="evidence" to a group in the editor. */
.v2 .art-body .evidence{margin:2.6em 0;padding:1.15rem 1.3rem;background:var(--surface);
  border-left:3px solid var(--gold);border-radius:0 var(--r-sm) var(--r-sm) 0}
.v2 .art-body .evidence > *:first-child{margin-top:0}
.v2 .art-body .evidence > *:last-child{margin-bottom:0}
.v2 .art-body .evidence p{font-size:.98rem;line-height:1.6}
.v2 .art-body .evidence::before{content:"The evidence";display:block;margin-bottom:.6rem;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}


/* RSS in the colophon: the desk publishes on a cadence, so give people a way to
   follow it that is not a mailing list the department has not approved yet. */
.rev-colophon .rev-rss{color:inherit;text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:var(--gold);
  display:inline-flex;align-items:center;min-height:24px}
.rev-colophon .rev-rss:hover{color:var(--gold)}

/* ============================================================
   FAQ — jump nav and per-answer deep links
   ============================================================ */

/* The copy affordance is quiet until the row is hovered or focused — it is a tool for
   the few people sending links, not a second call to action on every question. */
.v2 .faq .wp-block-details > summary{position:relative}
/* Positioned into the summary row from outside it — see the note in functions.php. */
.v2 .faq .wp-block-details{position:relative}
.faq-copy{position:absolute;top:26px;right:2.6rem;z-index:1;margin-left:0;padding:0 10px;border:1px solid var(--line-2);border-radius:999px;
  background:transparent;cursor:pointer;font-family:var(--mono);font-size:.58rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  /* standalone control, so WCAG 2.5.8's in-a-sentence exception does not apply */
  display:inline-flex;align-items:center;min-height:24px;vertical-align:middle;
  opacity:0;transition:opacity var(--dur),border-color var(--dur),color var(--dur)}
.wp-block-details:hover .faq-copy,.faq-copy:focus-visible,.faq-copy.is-done{opacity:1}
.faq-copy:hover{border-color:var(--gold);color:var(--ink)}
@media(hover:none){.faq-copy{opacity:1}}

/* A linked answer must not open flush against the sticky-ish nav. */
.v2 .faq .wp-block-details{scroll-margin-top:110px}
.v2 .faq-h{scroll-margin-top:110px}

/* ============================================================
   STICKY SECTION NAV — a copy of the hero's jump nav, promoted on scroll
   ============================================================ */
/* visibility, not just opacity: opacity:0 leaves the links keyboard-focusable, so focus
   landed on an invisible off-screen bar that is also aria-hidden. */
.jump-sticky{visibility:hidden;position:fixed;top:0;left:0;right:0;z-index:60;
  background:rgba(251,248,240,.94);backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid var(--line);
  transform:translateY(-100%);opacity:0;pointer-events:none;
  transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.jump-sticky.is-on{visibility:visible;transform:none;opacity:1;pointer-events:auto}
.jump-sticky-inner{display:flex;gap:4px;overflow-x:auto;
  max-width:1220px;margin-inline:auto;padding:8px clamp(14px,2.5vw,46px);
  scrollbar-width:none}
.jump-sticky-inner::-webkit-scrollbar{display:none}
.jump-sticky a{display:inline-flex;align-items:center;min-height:40px;padding:0 13px;
  white-space:nowrap;border-radius:999px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2);text-decoration:none;border:1px solid transparent}
.jump-sticky a:hover{color:var(--ink);border-color:var(--line-2);text-decoration:none}
.jump-sticky a[aria-current="true"]{color:var(--ink);border-color:var(--gold);
  background:rgba(246,184,0,.14)}
/* The reading-progress rule sits above it on posts; keep them from stacking. */
.p-post .jump-sticky{top:2px}
@media(prefers-reduced-motion:reduce){.jump-sticky{transition:none}}
@media print{.jump-sticky{display:none}}

/* FAQ source line: quiet, but present under any answer carrying a figure that the
   faculty owns (fees, deadlines, credits). Same register as the article credits. */
.v2 .faq .faq-src{margin:14px 0 0;font-family:var(--mono);font-size:.66rem;line-height:1.55;
  letter-spacing:.03em;color:var(--ink-3)}
.v2 .faq .faq-src a{color:var(--ink-2);text-decoration:underline;
  text-underline-offset:2px;text-decoration-color:var(--line)}
.v2 .faq .faq-src a:hover{color:var(--ink);text-decoration-color:var(--gold)}

/* The hero credit now lives inside "Sources and notes", so it reads as a row in that
   list rather than as a caption. */
.v2 .art-body .art-credit-filed{margin:0 0 14px;font-size:.72rem;line-height:1.6;
  max-width:none;padding-inline:0}
.v2 .art-body .art-credit-filed strong{color:var(--ink-2);font-weight:600}

/* Licence links beside an inline picture credit: same quiet register as the credit. */
.v2 .art-body .art-inline figcaption .credit .credit-links{white-space:nowrap}
.v2 .art-body .art-inline figcaption .credit a{color:inherit;text-decoration:underline;
  text-underline-offset:2px;text-decoration-color:var(--line)}
.v2 .art-body .art-inline figcaption .credit a:hover{text-decoration-color:var(--gold)}

/* Alumni quote provenance: kept on the page in full, folded away by default. It is
   there so a reader can check where a quote came from, which is a question people ask
   after reading the quotes, not before. */
.v2 .alum-srcbox{margin-top:26px;border-top:1px solid var(--line)}
.v2 .alum-srcbox > summary{list-style:none;cursor:pointer;padding:12px 0;min-height:44px;
  display:flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3)}
.v2 .alum-srcbox > summary::-webkit-details-marker{display:none}
.v2 .alum-srcbox > summary::marker{content:""}
.v2 .alum-srcbox > summary::after{content:"+";font-family:var(--mono);margin-left:auto;font-size:.9rem}
.v2 .alum-srcbox[open] > summary::after{content:"\2013"}
.v2 .alum-srcbox > summary:hover{color:var(--ink)}
.v2 .alum-srcbox > summary:focus-visible{outline:2px solid var(--gold-ink);outline-offset:3px}
.v2 .alum-srcbox .alum-src{margin:0 0 16px}

/* The skip link's target is focusable but must not draw a ring when reached that way. */
.v2 main#main:focus{outline:none}
.v2 main#main:focus-visible{outline:2px solid var(--gold-ink);outline-offset:4px}

/* Only the visible office slide should be in the accessibility tree: opacity:0 leaves all
   eight images exposed, so a screen reader announced eight buildings where one is shown. */
.off-slide{visibility:hidden}
.off-slide.active{visibility:visible}

/* ── Hero section boxes ─────────────────────────────────────────────────────
   Four routes into the site, sitting beside the headline. The pattern is taken
   from rechtinrotterdam.nl, which the faculty asked us to follow: a small tag,
   a title, an arrow, and deliberately no description. The absence of a
   supporting sentence is the point; it is what makes their page read calm. */
/* Cards are opaque with a real border, and the arrow is absolutely positioned in
   the corner with the card right-padded to clear it.

   Both reviews said the same thing about the previous translucent version: the
   boxes sit over the EXPOSED right side of the photograph (the scrim clips only
   the left ~55%), and while ink on an 86%-white card keeps its contrast, the
   card's EDGE washed out against bright sky so it stopped reading as an object.
   Opaque sidesteps that rather than tuning around it.

   No index pill. The design pass proposed 01-04 in the tag slot the reference
   uses, but the faculty had just asked for the 01/02/03 nav numbering to be
   removed, so a numbered pill here would reintroduce what was cut. */
.v2 .hbox{position:relative;display:block;padding:22px 46px 20px 22px;
  border-radius:var(--r-sm);background:#fff;border:1px solid rgba(20,19,19,.14);
  text-decoration:none;color:var(--ink);
  box-shadow:0 1px 2px rgba(18,18,18,.06),0 14px 30px -18px rgba(18,18,18,.38);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
             border-color var(--dur) var(--ease)}
.v2 .hbox-t{display:block;font-family:var(--serif);font-weight:600;font-size:1.05rem;
  line-height:1.28;letter-spacing:-.006em;color:var(--ink)}
.v2 .hbox-arrow{position:absolute;top:19px;right:20px;font-size:1.2rem;line-height:1;
  font-weight:700;color:var(--gold-ink);transition:transform var(--dur) var(--ease)}
/* Bright gold only where the black stroke that carries its contrast is supported.
   Unstroked, --gold is about 1.5:1 on white, so the fallback above is --gold-ink. */
@supports (-webkit-text-stroke:1px #000){
  .v2 .hbox-arrow{color:var(--gold);-webkit-text-stroke:1px #141313;paint-order:stroke fill}
}
.v2 .hbox:hover{transform:translateY(-2px);border-color:rgba(246,184,0,.6);
  box-shadow:0 4px 10px rgba(18,18,18,.10),0 22px 44px -18px rgba(18,18,18,.44)}
.v2 .hbox:hover .hbox-arrow{transform:translate(2px,-2px)}
.v2 .hbox:active{transform:translateY(0);
  box-shadow:0 1px 2px rgba(18,18,18,.06),0 8px 18px -14px rgba(18,18,18,.32)}
/* styles.css:1176 sets outline-color:#fff for everything inside .herov2, correct on
   the dark panel and invisible on a white card. Scoped, so the headline and CTA keep
   their white ring. */
.v2 .hbox:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (prefers-contrast:more){ .v2 .hbox{border-color:var(--ink)} }
@media(min-width:560px) and (max-width:899px){ .v2 .hbox{padding:18px 40px 16px 18px} }
/* Freeze the resting state, not just the duration: a 0s transition still lets
   :hover snap the translate through. */
@media (prefers-reduced-motion:reduce){
  .v2 .hbox,.v2 .hbox-arrow{transition:none}
  .v2 .hbox:hover,.v2 .hbox:active{transform:none}
  .v2 .hbox:hover .hbox-arrow{transform:none}
}

/* ── Programme page ─────────────────────────────────────────────────────────
   The "in numbers" band and course tables, following the shape rechtinrotterdam.nl
   uses on a programme page: a short row of figures, then the detail. */
.v2 .pnum{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,3vw,34px);
  margin:0 0 22px;padding:0;border-top:2px solid var(--ink);padding-top:22px}
@media(min-width:760px){.v2 .pnum{grid-template-columns:repeat(4,minmax(0,1fr))}}
.v2 .pnum dt{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 6px}
.v2 .pnum dd{margin:0;font-family:var(--serif);font-weight:600;font-size:clamp(1.5rem,3.4vw,2.1rem);line-height:1}
.v2 .pcourses{width:100%;border-collapse:collapse;margin:0 0 30px;font-size:.95rem}
.v2 .pcourses th{text-align:left;font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);font-weight:500;padding:0 12px 8px 0;border-bottom:1px solid var(--line)}
.v2 .pcourses td{padding:11px 12px 11px 0;border-bottom:1px solid var(--line);vertical-align:top}
.v2 .pcourses td:nth-child(2){font-family:var(--mono);font-size:.82rem;color:var(--ink-2);white-space:nowrap}
.v2 .pcourses td:last-child{text-align:right;font-family:var(--mono);font-size:.82rem;white-space:nowrap}


/* Tracking is size-specific. Montserrat is geometric and reads wider than the
   serif it replaced, so the display sizes need more negative tracking than the
   single -0.018em the base rule applies to every heading. */
.v2 .herov2-copy h1{letter-spacing:-.032em}
.v2 .page-hero h1{letter-spacing:-.026em}
.v2 h3{letter-spacing:-.008em}

/* Four facts rather than three, so the band carries start date, application
   deadline, language and type of education, as mastersinrecht.nl does under its
   headline. Two-up on narrow screens so no label truncates. */
.v2 .herov2-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 22px}
@media(min-width:1080px){.v2 .herov2-facts{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 20px}}

/* ── Hero layout, home only ─────────────────────────────────────────────────
   Written at .v2.p-home specificity with !important because the earlier hero
   rules (v2.css:280 display:flex, v2.css:322 align-items:flex-start !important)
   outrank anything less. The photograph splits right at 861px, so the cards have
   to move right at the same point or the layout contradicts itself between
   861 and 1079px, which is what it did. */
.v2.p-home .herov2-inner{display:grid !important;grid-template-columns:1fr;
  gap:clamp(28px,4vw,56px);align-items:stretch !important}
.v2.p-home .herov2-boxes{display:grid;grid-template-columns:1fr;gap:10px;width:100%}
@media(min-width:560px){
  .v2.p-home .herov2-boxes{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:900px){
  .v2.p-home .herov2-inner{grid-template-columns:minmax(0,1.05fr) minmax(300px,.85fr);
    align-items:end !important;column-gap:clamp(32px,4vw,64px)}
  .v2.p-home .herov2-boxes{align-self:end;padding-bottom:6px}
}

/* ── Footer and closing CTA, compacted ──────────────────────────────────────
   The footer was running to nearly a full screen: a 1.8rem claim, a two-line
   description that repeated the hero, and four link columns at 7px vertical
   padding a row. Tightened without dropping a single link, and the 24px
   minimum target size is kept (WCAG 2.5.8) by holding min-height rather than
   relying on the padding. */
.v2 .sitefoot .sf-grid{padding-block:clamp(20px,2vw,26px);gap:clamp(20px,2.6vw,34px)}
.v2 .sitefoot .sf-claim{font-size:clamp(1.15rem,1rem + .5vw,1.4rem);margin-bottom:6px}
.v2 .sitefoot .sf-org{font-size:.82rem;line-height:1.45;max-width:28ch}
.v2 .sitefoot .sf-h{margin-bottom:4px}
.v2 .sitefoot .sf-col a{padding:4px 0;min-height:24px;font-size:.85rem}
.v2 .sitefoot .sf-base{padding-block:10px}
.v2 .sitefoot .sf-legal a{padding:6px 0;min-height:24px}
/* The closing CTA carried more vertical air than any other band on the page. */
.v2 .final{padding-block:clamp(30px,3vw,42px)}

/* .final is text-align:center, but wp-block-buttons is a flex row that ignores
   it, so the three CTAs sat hard left under centred copy. */
.v2 .final .wp-block-buttons{justify-content:center}

/* Compaction versus touch targets, resolved by pointer type rather than by
   picking one and living with it.

   Measured: the compacted footer links render 26.4px tall (.sf-col) and 28.8px
   (.sf-legal). That clears the WCAG 2.5.8 minimum of 24px but not the 44px that
   is comfortable for a thumb. Giving every link 44px unconditionally would put
   roughly 70px back into the footer, which is the height the faculty asked us to
   take out.

   So: compact where the pointer is precise, 44px where it is not. */
@media (pointer:coarse){
  .v2 .sitefoot .sf-col a,.v2 .sitefoot .sf-legal a{min-height:44px;display:flex;align-items:center}
}

/* ── 4 September 2026 · programme director's second feedback round ──────────
   Nav: the current tab is no longer italic. Hero: the four white cards carry a
   one-line description and more room, so they read at the size of the "in short"
   boxes on mastersinrecht.nl; the facts row is label-over-value. A band about the
   school sits under the hero, mirroring the "Studying at Erasmus School of Law"
   block on the reference site. /programme/ is back: watermark and pillar checks. */
.v2 .nav nav a[aria-current="page"],.v2 .mobile-menu .mm-link[aria-current="page"]{font-style:normal}

/* hero cards */
.v2 .hbox{padding:26px 56px 24px 26px;min-height:112px}
.v2 .hbox-t{font-size:1.22rem}
.v2 .hbox-d{display:block;margin-top:6px;font-size:.86rem;line-height:1.4;color:var(--ink-2)}
.v2 .hbox-arrow{top:23px;right:22px}
@media(min-width:560px) and (max-width:899px){ .v2 .hbox{padding:20px 46px 18px 20px;min-height:0} }
@media(min-width:900px){
  .v2.p-home .herov2-inner{grid-template-columns:minmax(0,1fr) minmax(320px,.95fr)}
}
/* facts: the label sits above the value, so the label is the header */
.v2 .herov2-facts span{gap:5px}

/* about the school */
.v2 .about-grid{display:grid;gap:clamp(26px,4vw,56px);align-items:center}
@media(min-width:900px){ .v2 .about-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)} }
.v2 .about-media{margin:0}
.v2 .about-media img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center 30%;
  border-radius:var(--r-lg);border:1px solid var(--line-2);box-shadow:var(--shadow)}
@media(max-width:899px){ .v2 .about-media img{aspect-ratio:16/10} }
/* The Why band's picture is a wide campus view, not a close-up: cropping it to the 4:5
   portrait the About band uses throws away the students on the left and most of the
   square, which is the whole point of the shot. It keeps a 4:3 frame instead — the file
   itself is already trimmed on the right, so nothing is cut here; the taller frame just
   lets the picture fill more of a narrow column than 16:9 would. */
.v2 .about-grid.flip .about-media img{aspect-ratio:1/1;object-position:center}
.v2 .about-media .wp-element-caption{margin:8px 0 0;font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);text-align:left}
.v2 .about-body h2{margin:.3em 0 .5em;font-size:clamp(1.7rem,1.2rem + 1.9vw,2.7rem);line-height:1.08}
.v2 .about-body p{color:var(--ink-2);font-size:1.02rem;line-height:1.62;max-width:58ch;margin:0 0 1em}
.v2 .about-body p.eyebrow{margin:0}
.v2 .about-body p:last-child{margin-bottom:0}

/* programme page */
.p-programme .page-hero::before{content:"Programme"}
.v2 .pwhy{list-style:none;margin:clamp(22px,3vw,30px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 22px}
@media(max-width:820px){ .v2 .pwhy{grid-template-columns:1fr} }
.v2 .pwhy li{position:relative;padding-left:28px;color:var(--ink-2);font-size:.95rem;line-height:1.5;margin:0}
.v2 .pwhy li::before{content:"";position:absolute;left:2px;top:.36em;width:13px;height:7px;
  border-left:2.5px solid var(--gold-ink);border-bottom:2.5px solid var(--gold-ink);transform:rotate(-45deg)}
.v2 .pnum{margin-top:0}
.p-programme #blocks h3{margin:clamp(30px,4vw,44px) 0 8px}
.p-programme #blocks h3 + p{margin:0 0 16px;color:var(--ink-2);max-width:70ch}
.p-programme #blocks .pcourses{margin-bottom:0}

/* ── Programme: the year map ────────────────────────────────────────────────
   The five blocks as five columns, so the year reads left to right like the
   schedule it comes from. Gold-topped = fixed for everyone (the same mark the
   pillar cards carry); dashed = a choice; the thesis is one dark bar that runs
   under blocks 3 to 5 because that is when it runs. The ledger row is the 60. */
  display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:baseline}
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
/* phones: keep the label above the value (the ≤520px rule at ~line 1071 lays each
   fact out as one row, which was right when the value came first). Two columns,
   so four facts take four lines rather than eight. */
@media(max-width:520px){
  .v2 .herov2-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
  .v2 .herov2-facts span{flex-direction:column;align-items:flex-start;flex-wrap:nowrap;gap:3px;padding:0;border-bottom:0}
  .v2 .herov2-facts span:last-child{margin-top:0}
}

/* ── Programme, 5 September 2026: what the peer-page research added ─────────
   A framing line per block (Bocconi), the blog posts linked from the block they
   describe (UvA/ESCP), a teaching strip (Imperial's legend), and a curriculum FAQ
   beside the curriculum (UvA/RSM). Exposed, not folded: the year map stays visible. */
.v2 .pnum.teach{margin-top:clamp(18px,2.5vw,26px);margin-bottom:26px}
.v2 .pnum.teach dd{font-size:1.02rem;line-height:1.4;font-weight:600;letter-spacing:-.005em}
.v2 .pfaq .wp-block-details{margin:0;border-top:1px solid var(--line-2)}
.v2 .pfaq .wp-block-details:last-of-type{border-bottom:1px solid var(--line-2)}
.v2 .pfaq .wp-block-details > summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:18px 0;font-family:var(--serif);font-weight:600;font-size:1.05rem;color:var(--ink);transition:color .2s var(--ease)}
.v2 .pfaq .wp-block-details > summary::-webkit-details-marker{display:none}
.v2 .pfaq .wp-block-details > summary::marker{content:""}
.v2 .pfaq .wp-block-details > summary::after{content:"+";font-family:var(--mono);font-size:1.1rem;line-height:1;color:var(--gold-ink);flex:none}
.v2 .pfaq .wp-block-details[open] > summary::after{content:"\2013"}
.v2 .pfaq .wp-block-details > summary:hover{color:var(--gold-ink)}
.v2 .pfaq .wp-block-details > p{margin:0 0 18px;max-width:64ch;color:var(--ink-2);line-height:1.6}
@media(prefers-reduced-motion:reduce){ .v2 .pfaq .wp-block-details > summary{transition:none} }

/* ── 5 September 2026, programme director's third note ─────────────────────
   Home gets a "Why Marketing?" band that mirrors the school band: text left,
   photo right. (The pillar rule-work that lived here was replaced by .thirds.) */
@media(min-width:900px){
  .v2 .about-grid.flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .v2 .about-grid.flip .about-media{order:2}
  .v2 .about-grid.flip .about-body{order:1}
}
.v2 .about-body .lat-more{margin:18px 0 0;max-width:none;color:var(--ink)}

/* ── 5 September 2026 (evening): pillars as thirds, year map stripped ───────
   The pillars are one dark bar cut into three equal segments; the gold rule
   across the top reads as a single bar with two cuts, which is the claim: equal
   weight. The year map drops codes, blog links, the card legend and the two
   decision cards; what stays is names, credits, the two choice tags, the thesis
   bar and the ledger. Choices are one solid card style with a tag, nothing else. */
/* year map, simplified */
@media(max-width:820px){ .v2 .ym-notes{grid-template-columns:1fr} }
/* the three checks inside the home "Why Marketing?" band */
.v2 .about-body .pwhy{grid-template-columns:1fr;gap:9px;margin:18px 0 0}
.v2 .about-body .pwhy li{max-width:none}
.v2 .about-body .lat-more{margin-top:22px}
/* courses that belong to each pillar (Take-Off deck 2026, slide 16), inside the thirds bar */
.v2 .about-body .pwhy li strong{color:var(--ink);font-weight:600}

/* teaching facts sit under the numbers as a second row of the same table */
.v2 .pnum.teach{margin-top:clamp(18px,2.5vw,26px);margin-bottom:0;border-top:1px solid var(--line-2);padding-top:18px}
.v2 .pnum.teach dd{font-size:1rem}

/* ── Closing band, 5 September 2026 ─────────────────────────────────────────
   The gold plot line was cutting through the buttons. Plain dark band now: grain
   only, two buttons, one text link. The eur.nl "Official page" button is gone;
   the nav already carries it. */
.v2 .final::after{display:none}
.v2 .final{background-image:none;background-color:#141313}
.v2 .final .wp-block-buttons{gap:10px 12px}
.v2 .final .final-link{margin:16px auto 0;max-width:none;font-size:.95rem}
.v2 .final .final-link a{color:rgba(255,255,255,.82);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(246,184,0,.6)}
.v2 .final .final-link a:hover{color:#fff;text-decoration-color:var(--gold)}
/* the why band carries four paragraphs now: photo pinned to the top, not floated mid-text */
@media(min-width:900px){ .v2 .about-grid.flip{align-items:start} .v2 .about-grid.flip .about-media{position:sticky;top:96px} }
.v2 .about-body h2{text-wrap:balance}
/* links inside a dark page-hero lead were inheriting body ink and vanished */
.v2 .page-hero p a{color:#fff;text-decoration-color:rgba(246,184,0,.7)}
.v2 .page-hero p a:hover{color:var(--gold)}

/* ── 8 September 2026 · programme director's third feedback round ──────────
   Hero: the three photos are plain campus and city shots now (the banner mockups
   are gone) and, on desktop, the photo is a smaller left-pointing arrow beside the
   copy, the shape mastersinrecht.nl uses, with nothing printed inside it. The four
   white cards keep sitting over the lower part of the photo. On a phone the photo
   stays full-bleed under the copy, which he did not flag. The photo, scrim, dots
   and credit moved inside .herov2-inner so one markup serves both; the dots and
   the credit are siblings of the photo, not children, so the mobile scrim (which
   stacks above the photo) cannot swallow the buttons. */
.v2.p-home .hero-arrow{background:radial-gradient(64% 72% at 12% 20%,rgba(246,184,0,.20),transparent 56%),linear-gradient(118deg,#151210,#241d14)}
.v2.p-home .hero-arrow .herov2-inner{position:relative;z-index:2}
.v2.p-home .hero-arrow .hero-bg{position:absolute;inset:0;width:auto;height:auto;margin:0;z-index:0;clip-path:none}
.v2.p-home .hero-arrow .hero-scrim{position:absolute;inset:0;width:auto;z-index:1;clip-path:none;pointer-events:none}
.v2.p-home .hero-arrow .herov2-copy,.v2.p-home .hero-arrow .herov2-boxes{position:relative;z-index:2}
.v2.p-home .hero-arrow .hdots{z-index:3}
.v2.p-home .hero-arrow .hero-credit{position:absolute;right:16px;bottom:16px;z-index:3;max-width:60%;text-align:right;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.06em;line-height:1.35;color:rgba(255,255,255,.62);text-shadow:0 1px 4px rgba(0,0,0,.6)}
/* phone: the dot row (44px targets) and the credit sit in the band's bottom padding, below the cards */
@media(max-width:899px){
  .v2.p-home .hero-arrow .herov2-inner{padding-bottom:calc(clamp(38px,6vw,54px) + 56px) !important}
  .v2.p-home .hero-arrow .hdots{bottom:14px}
  .v2.p-home .hero-arrow .hero-credit{right:16px;bottom:30px;max-width:48%}
  /* the 44px touch padding on .hdot is painted by the active dot's background shorthand
     (it resets background-clip), so the active dot showed as a 58x43 yellow slab */
  .v2.p-home .hero-arrow .hdot.active{background-clip:content-box}
}
/* 861-899px used the diagonal panel; without its clip it would hide the photo entirely */
@media(min-width:861px) and (max-width:899px){
  .v2.p-home .hero-arrow .hero-scrim{background:linear-gradient(90deg,rgba(12,11,10,.96),rgba(12,11,10,.72) 58%,rgba(12,11,10,.34)),radial-gradient(60% 60% at 6% 16%,rgba(246,184,0,.14),transparent 60%)}
}
@media(min-width:900px){
  .v2.p-home .hero-arrow{--hero-pt:clamp(46px,5vw,74px);--hero-pr:clamp(20px,3vw,48px)}
  .v2.p-home .hero-arrow .herov2-inner{grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr) !important;grid-template-rows:auto;
    align-items:stretch !important;column-gap:clamp(28px,4vw,56px);
    padding-top:var(--hero-pt) !important;padding-right:0 !important;padding-bottom:clamp(34px,4vw,52px) !important}
  .v2.p-home .hero-arrow .hero-scrim{display:none}
  .v2.p-home .hero-arrow .herov2-copy{grid-column:1;grid-row:1;align-self:center !important}
  .v2.p-home .hero-arrow .hero-bg{grid-column:2;grid-row:1;position:relative;inset:auto;z-index:1;min-height:540px;
    margin-top:calc(-1 * var(--hero-pt));clip-path:polygon(17% 0,100% 0,100% 100%,17% 100%,0 46%)}
  .v2.p-home .hero-arrow .hero-bg .hslide{object-position:center;filter:none}
  /* the cards sit over the lower part of the photo, inset from the viewport edge */
  .v2.p-home .hero-arrow .herov2-boxes{grid-column:2;grid-row:1;align-self:end;z-index:3;
    grid-template-columns:repeat(2,minmax(0,1fr));padding:0 var(--hero-pr) 0 clamp(28px,3.5vw,52px);margin-bottom:clamp(18px,2.2vw,30px)}
  .v2.p-home .hero-arrow .hbox{padding:22px 52px 20px 22px;min-height:92px}
  .v2.p-home .hero-arrow .hdots{grid-column:2;grid-row:1;position:relative;inset:auto;align-self:start;justify-self:end;margin:14px 18px 0 0}
  /* credit just under the photo's bottom edge, in the band's own padding, not on the picture */
  .v2.p-home .hero-arrow .hero-credit{grid-column:2;grid-row:1;position:relative;inset:auto;align-self:end;justify-self:start;
    margin:0 0 0 calc(17% + 4px);transform:translateY(calc(100% + 8px));text-align:left;max-width:none}
}

/* Careers/programme/FAQ: the sticky section nav was fixed at top:0, z-index 60, so it
   landed on top of the floating main nav and the logo (the way home) became unreachable.
   It now sits underneath the nav wrapper (z-index 50), padded down by the nav's height,
   and anchored sections leave room for both bars. */
.jump-sticky{top:0;padding-top:80px;z-index:49}
@media(max-width:1039px){.jump-sticky{padding-top:74px}}
.v2.p-careers section[id],.v2.p-programme section[id],.v2.p-faq section[id],
.v2.p-faq .faq .wp-block-details,.v2.p-faq .faq-h,.v2.p-faq .faq-lat .faq-group{scroll-margin-top:150px}

/* Home, careers band: "Alumni are typically in a role within / Two months" read as a thin
   grey label over a number nobody could attach to anything. One sentence now, the
   number still carrying the weight (his wording). */
.v2 .out-stats{display:block}
.v2 .out-claim{margin:0;font-family:var(--serif);font-weight:700;font-size:clamp(1.45rem,1.1rem + 1.3vw,2.15rem);
  line-height:1.15;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.v2 .out-claim b{position:relative;z-index:0;white-space:nowrap;color:var(--ink)}
.v2 .out-claim b::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:.14em;background:var(--gold);opacity:.85;z-index:-1;border-radius:2px}

/* Careers: nine roles instead of three tracks, same card, tighter. */
.v2 .tracks.roles{gap:14px}
.v2 .tracks.roles .track{padding:22px 22px 20px}
.v2 .tracks.roles .track h3{font-size:1.1rem;margin:0 0 8px;letter-spacing:-.01em}
.v2 .tracks.roles .track p{font-size:.92rem;line-height:1.5}
@media(min-width:821px) and (max-width:1000px){.v2 .tracks.roles{grid-template-columns:repeat(2,1fr)}}

/* Programme grid: the notes under it were one grey .84rem paragraph; three lines in
   body ink now, one rule each. Block 4 lists Sustainable Marketing next to Global
   Marketing in the same cell. */

/* Fedde, 8 September: the four cards say only Programme / Careers / Student blog / FAQ.
   9 September: they had shrunk to a label strip; back to a card you can aim at. */
.v2 .hbox{min-height:92px;padding:22px 52px 20px 22px}
.v2 .hbox-t{font-size:1.2rem}
.v2 .hbox-arrow{top:21px;right:21px}
.v2.p-home .herov2-boxes{gap:10px}

/* Fedde, 8 September (later): the hero fills the first screen on desktop (there was a
   dark strip of dead space under the credit), and the four cards are a touch less
   white, translucent over the photo. The section is display:flex, so the grid inner
   stretches with it and the single auto row fills the height: copy stays centred,
   the arrow photo grows with the screen. */
@media(min-width:900px){
  /* measured at 1920x992: the SECTION carried 104px of bottom padding, so the photo stopped
     104px short of the next band. Zero it; the solid base colour under the gradient stops a
     hairline of paper showing at a fractional 100svh boundary. */
  .v2.p-home .hero-arrow{min-height:100vh;min-height:100svh;padding-bottom:0 !important;background-color:#1c1712}
  .v2.p-home .hero-arrow .hero-bg{margin-bottom:-1px}
  .v2.p-home .hero-arrow .herov2-inner{min-height:100%;padding-bottom:0 !important}
  .v2.p-home .hero-arrow .hero-bg{min-height:0}
  /* the photo runs to the band's bottom edge; the credit sits on its bottom-left corner,
     under the cards, instead of in a padding strip that read as dead space */
  .v2.p-home .hero-arrow .hero-credit{transform:none;margin:0 0 10px calc(17% + 12px);color:rgba(255,255,255,.72);text-shadow:0 1px 4px rgba(0,0,0,.7)}
  .v2.p-home .hero-arrow .herov2-boxes{margin-bottom:clamp(30px,3vw,44px)}
}
.v2.p-home .hero-arrow .hbox{background:rgba(255,255,255,.84);backdrop-filter:blur(6px) saturate(1.05);-webkit-backdrop-filter:blur(6px) saturate(1.05);border-color:rgba(255,255,255,.55)}
.v2.p-home .hero-arrow .hbox:hover{background:rgba(255,255,255,.94)}

/* Fedde, 8 September (later): the programme director found no way back to the home page
   from the careers page. A "Home" pill leads the section bar on careers, programme and FAQ,
   and travels into the sticky copy. The ninth careers card is the open-ended one. */
.v2 .page-hero .jump a.jump-home{color:var(--gold);border-color:rgba(246,184,0,.55)}
.jump-sticky a.jump-home{color:var(--gold-ink);border-color:rgba(246,184,0,.55)}
.v2 .tracks.roles .track.more{background:var(--ink);border-color:var(--ink)}
.v2 .tracks.roles .track.more h3{color:#fff}
.v2 .tracks.roles .track.more p{color:rgba(255,255,255,.82)}

/* ── The curriculum grid, restored 9 September 2026 ──────────────────────────
   Fedde, 9 September: the five-column year map read as an information dump, and the
   pillar dashes repeated in every block without adding anything. Back to the grid he
   kept: pillars are rows with their name on the left, blocks are columns, every course
   is one cell. The block-3 seminar and the thesis span all three pillars because they
   do, so neither repeats the pillar names. New since the old grid: Marketing Strategy
   takes two rows in block 4, because that pillar offers two of the four seminars.
   Calm on purpose: paper, hairlines, one tinted cell, one dark cell, gold only on the
   choice tags. */
.v2 .matrix{display:grid;grid-template-columns:minmax(150px,1.15fr) repeat(5,minmax(0,1fr));gap:6px;align-items:stretch;margin:0 0 clamp(20px,3vw,28px)}
.v2 .matrix .mx-corner{grid-row:1;grid-column:1}
.v2 .matrix .mx-col{grid-row:1;padding:0 0 10px;border-bottom:2px solid var(--ink);display:flex;flex-direction:column;gap:3px}
.v2 .matrix .mx-col b{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink)}
.v2 .matrix .mx-col span{font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;color:var(--ink-3);line-height:1.4}
.v2 .matrix .mx-row{grid-column:1;padding:12px 14px 12px 0;display:flex;flex-direction:column;justify-content:center;gap:5px;border-top:1px solid var(--line-2)}
.v2 .matrix .mx-row b{font-family:var(--serif);font-weight:600;font-size:1rem;line-height:1.2;letter-spacing:-.01em;color:var(--ink)}
.v2 .matrix .mx-row span{font-size:.8rem;line-height:1.45;color:var(--ink-2)}
/* rows: 2 and 3 are Marketing Strategy (two seminars in block 4), 4 Experience, 5 Insights */
.v2 .matrix .mx-row.r1{grid-row:2/span 2}
.v2 .matrix .mx-cell.r1{grid-row:2/span 2}
.v2 .matrix .mx-cell.r1.b4{grid-row:2}
.v2 .matrix .mx-cell.r1b{grid-row:3}
.v2 .matrix .mx-row.r2,.v2 .matrix .mx-cell.r2{grid-row:4}
.v2 .matrix .mx-row.r3,.v2 .matrix .mx-cell.r3{grid-row:5}
.v2 .matrix .b1{grid-column:2}.v2 .matrix .b2{grid-column:3}.v2 .matrix .b4{grid-column:5}
.v2 .matrix .mx-cell{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:12px 12px 11px;display:flex;flex-direction:column;min-width:0}
.v2 .matrix .mx-cell .nm{font-family:var(--serif);font-weight:600;font-size:.88rem;line-height:1.3;letter-spacing:-.005em;color:var(--ink)}
.v2 .matrix .mx-cell .ec{margin-top:auto;padding-top:8px;font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;font-weight:600;color:var(--ink)}
.v2 .matrix .mx-tag{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);font-weight:600;margin:0 0 5px}
.v2 .matrix .mx-sem{grid-column:4;grid-row:2/span 4;background:var(--surface-2);justify-content:center;text-align:center}
.v2 .matrix .mx-sem .ec{margin-top:10px}
.v2 .matrix .mx-thesis{grid-column:6;grid-row:2/span 4;background:var(--ink);border-color:var(--ink);color:var(--paper);justify-content:center;text-align:center}
.v2 .matrix .mx-thesis .nm{color:#fff}
.v2 .matrix .mx-thesis .mx-tag{color:var(--gold)}
.v2 .matrix .mx-thesis .ec{color:var(--gold);margin-top:10px}
/* row 6: "Other Econ courses". The block-2 electives a student may swap in were a line of
   footnote prose; as a fourth row they read as choice, which is what they are. The card
   looks like the two elective cards above it and opens downward — nothing else sits in
   this row, so opening it pushes nothing sideways. */
.v2 .matrix .mx-row.r4,.v2 .matrix .mx-cell.r4{grid-row:6}
.v2 .matrix .mx-row.r4{justify-content:flex-start;padding-top:14px}
.v2 .matrix .mx-swap{padding:0}
.v2 .matrix .mx-swap details{display:flex;flex-direction:column;flex:1;min-width:0}
.v2 .matrix .mx-swap summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;flex:1;padding:12px 30px 11px 12px;position:relative}
.v2 .matrix .mx-swap summary::-webkit-details-marker{display:none}
.v2 .matrix .mx-swap summary::after{content:"";position:absolute;right:13px;top:15px;width:6px;height:6px;border-right:1.5px solid var(--gold-ink);border-bottom:1.5px solid var(--gold-ink);transform:rotate(45deg);transition:transform .2s var(--ease)}
.v2 .matrix .mx-swap details[open] summary::after{transform:rotate(-135deg)}
.v2 .matrix .mx-swap summary:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.v2 .matrix .mx-swap summary .ec{margin-top:auto}
.v2 .matrix .mx-swap ul{list-style:none;margin:0;padding:0 12px 10px;display:grid;gap:7px;border-top:1px solid var(--line-2);padding-top:11px}
.v2 .matrix .mx-swap li{position:relative;margin:0;padding-left:14px;font-size:.82rem;line-height:1.35;color:var(--ink)}
.v2 .matrix .mx-swap li::before{content:"";position:absolute;left:0;top:.58em;width:8px;height:1.5px;background:var(--gold)}
.v2 .matrix .mx-swap .swap-note{margin:0;padding:0 12px 12px;font-size:.74rem;line-height:1.45;color:var(--ink-2)}
@media(prefers-reduced-motion:reduce){.v2 .matrix .mx-swap summary::after{transition:none}}
.v2 .matrix .mx-foot{grid-row:7;grid-column:1/-1;margin:6px 0 0;padding:12px 0 0;border-top:1px solid var(--line-2);display:grid;gap:7px}
.v2 .matrix .mx-foot p{margin:0;font-size:.9rem;line-height:1.55;color:var(--ink-2)}
.v2 .matrix .mx-foot b{color:var(--ink);font-weight:600}
@media(max-width:900px){
  .v2 .matrix{display:block}
  .v2 .matrix .mx-corner,.v2 .matrix .mx-col{display:none}
  .v2 .matrix .mx-row{margin-top:22px;padding:14px 0 6px;border-top:2px solid var(--ink)}
  .v2 .matrix .mx-cell{margin-top:8px}
  .v2 .matrix .mx-cell::before{content:attr(data-block);display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:0 0 5px}
  .v2 .matrix .mx-sem,.v2 .matrix .mx-thesis{text-align:left;justify-content:flex-start;margin-top:14px}
  .v2 .matrix .mx-thesis .mx-tag{display:none}
  .v2 .matrix .mx-foot{margin-top:16px}
}

/* Fedde, 10 September: a discreet line under the hero lead carrying the registry name of
   the degree (Mahrou's point). Small, muted, never competing with the h1. */
.v2 .hero-official{margin:12px 0 30px;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;
  line-height:1.6;color:rgba(255,255,255,.62);max-width:none;white-space:nowrap}
@media(max-width:700px){.v2 .hero-official{white-space:normal;max-width:34ch}}
@media(max-width:560px){.v2 .hero-official{margin:0 0 24px;font-size:.6rem}}

/* FAQ answers: a bulleted list has to sit on the same indent as the answer paragraphs
   (styles.css pads those by 2.1em + 16px), or the bullets hang out into the margin. */
.v2 .faq details ul{padding-left:calc(2.1em + 16px + 20px);margin:0 0 18px;list-style:disc}
.v2 .faq details ul li{margin:0 0 7px;color:var(--ink-2);line-height:1.6}
@media(max-width:640px){.v2 .faq details ul{padding-left:20px}}

/* ============================================================
   Fedde, 14 September 2026 — smartphone pass after the professor's phone
   critique. Every rule sits inside a max-width query; the laptop layout is
   untouched.
   ============================================================ */
/* Hamburger: .nav-toggle is a flex column with no cross-axis alignment, so the
   three 18px bars sat against the left edge of the 44px box. Centred. */
@media(max-width:1039px){
  .v2 .nav-toggle{align-items:center}
}
/* Inner heroes on a phone. The giant gold watermark (Programme / Careers / FAQ /
   Journal) is centred vertically behind the lead, and with the copy spanning the
   full width the word cut straight through the paragraph. Off below 640px. The
   lead itself drops from 19px to 17.6px so the careers hero stops eating 80% of
   the first screen. Sources were 11px mono. */
@media(max-width:640px){
  .v2 .page-hero::before{display:none}
  .v2 .page-hero h1 + p{font-size:1.1rem}
  .source{font-size:.76rem}
}
/* Home hero on a phone: four stacked cards made the band 1330px tall, 1.6 screens
   before the school section. Two by two, each card still 72px high and a full
   thumb wide, cuts about 200px. The diploma line was 9.6px and the fact labels
   10px mono on a 360px phone; both lifted to a readable size. */
@media(max-width:559px){
  .v2.p-home .herov2-boxes{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .v2 .hbox{min-height:72px;padding:16px 36px 14px 16px}
  .v2 .hbox-t{font-size:1.05rem}
  .v2 .hbox-arrow{top:14px;right:12px;font-size:1.05rem}
  .v2 .hero-official{font-size:.74rem;letter-spacing:.05em;max-width:none}
  .herov2-facts span{font-size:.68rem}
}
/* FAQ: the "Copy link" pill on every question is always visible on touch screens
   (the hover:none rule above), where it reads as a stray button next to the +.
   Gone on phones and tablets; on a laptop it still appears on hover. */
@media(max-width:640px),(hover:none){.faq-copy{display:none}}
/* Inner pages on a phone: the sticky section bar stacked a second 56px strip under
   the 74px floating nav, 15% of the screen gone for good. mastersinrecht.nl runs no
   sticky sub-nav on a phone; the hero pills and the Home entry in the menu cover it. */
@media(max-width:640px){
  .jump-sticky{display:none}
  .v2 .out-stat .source{font-size:.74rem}
}
/* Home hero: one wide primary action under the lead, the way mastersinrecht.nl's
   phone hero puts a single full-width "Onze masteropleidingen" button there. */
@media(max-width:559px){.v2.p-home .herov2-cta .btn{width:100%}}
/* .herov2-copy is a flex column aligned to flex-start, so .herov2-cta shrinks to its
   button; the button's width:100% above needs the row to span the panel first. */
@media(max-width:559px){.v2.p-home .herov2-cta{width:100%}}
/* Phone menu: two half-width buttons side by side became one full-width primary
   (Apply) with the ghost link under it, the way the mastersinrecht.nl sheet ends in
   a single full-width "Inschrijven". */
@media(max-width:640px){.mm-cta{flex-direction:column-reverse;gap:10px}}
/* At 390px the 2x2 card is 165px wide; "Student blog" at 1.05rem wrapped. 1rem and a
   tighter right gutter keep every label on one line down to 360px. Facts: label over
   value in every cell, so "Language English" and "Location / Rotterdam" stop
   alternating between one and two lines. */
@media(max-width:559px){
  .v2 .hbox{padding:16px 30px 14px 14px}
  .v2 .hbox-t{font-size:1rem}
  .v2 .hbox-arrow{right:10px}
  .herov2-facts span{flex-direction:column;align-items:flex-start;gap:3px;padding:8px 0}
}
/* 360px phones: the card is 144px wide, so "Student blog" and "September 2027"
   still broke. A notch smaller there only. */
@media(max-width:374px){
  .v2 .hbox{padding-right:26px}
  .v2 .hbox-t{font-size:.92rem}
  .herov2-facts b{font-size:1rem}
}
/* The .btn in the sheet is the block wrapper; the link inside it stayed content-wide. */
@media(max-width:640px){.mm-cta .btn>.wp-block-button__link{width:100%}}
/* The section keeps 64px of bottom padding under the inner's own 94px (where the dots
   live), a dead dark band before the school section. Desktop zeroes it at 900px+;
   the phone gets the same. */
@media(max-width:899px){.v2.p-home .hero-arrow{padding-bottom:0 !important}}
/* Footer on a phone (Fedde, 14 September): one 716px column of twelve links under
   9.6px headings. Now Programme and Apply sit side by side (the first column sized
   to its content so the long Apply labels never wrap), Follow runs full-width under
   them, headings and the copyright line are readable, and the legal links keep their
   own row. */
@media(max-width:640px){
  .v2 .sitefoot .sf-grid{grid-template-columns:auto minmax(0,1fr);column-gap:22px;row-gap:22px}
  .v2 .sitefoot .sf-brand{grid-column:1/-1}
  .v2 .sitefoot .sf-col:nth-child(4){grid-column:1/-1}
  .v2 .sitefoot .sf-h{font-size:.7rem;margin-bottom:6px}
  .v2 .sitefoot .sf-col a{white-space:nowrap}
  .v2 .sitefoot .sf-note{font-size:.74rem}
  .v2 .sitefoot .sf-org{font-size:.88rem;max-width:none}
}
/* Home "From the student blog" rows on a phone (Fedde, 14 September): a 56px thumb
   in the top-left corner with the date, category and title stacked beside it left
   two thirds of the card empty. Now the photo runs the card's full width (16:9),
   date and category share one line under it, the title follows. */
@media(max-width:640px){
  .v2 .home-bloglist li.wp-block-post{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"img img" "meta cat" "title title";gap:5px 14px;align-items:center}
  .v2 .home-bloglist .bimg{align-self:auto;width:100%;margin-bottom:6px}
  .v2 .home-bloglist .bimg img{width:100%;height:auto;aspect-ratio:16/9;border-radius:6px}
  .v2 .home-bloglist .bcat{justify-self:start}
  .v2 .home-bloglist .btitle{font-size:1.18rem;line-height:1.25}
}
/* Curriculum matrix on a phone (Fedde, 14 September): the grid collapsed into one long
   column grouped by pillar, so a student scrolled fourteen cards with a 9px "Block 4"
   whisper on each and never saw the year. A phone now reads the year the way it is
   lived, block by block: the five column headers become section headers (flex order,
   no markup change), every card names its pillar, the three pillar descriptions sit as
   a short legend on top, and the "Other Econ" row header goes (its card explains
   itself). The desktop grid is untouched. */
@media(max-width:900px){
  .v2 .matrix{display:flex;flex-direction:column;gap:0}
  .v2 .matrix .mx-corner,.v2 .matrix .mx-row.r4{display:none}
  /* legend */
  .v2 .matrix .mx-row{order:1;margin:0;padding:8px 0;gap:2px;border-top:0;border-bottom:1px solid var(--line-2)}
  .v2 .matrix .mx-row.r1{border-top:2px solid var(--ink);padding-top:12px}
  .v2 .matrix .mx-row.r1::before{content:"The three pillars";font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
  .v2 .matrix .mx-row b{font-size:.98rem}
  .v2 .matrix .mx-row span{font-size:.84rem}
  /* block headers */
  .v2 .matrix .mx-col{display:flex;flex-direction:row;align-items:baseline;justify-content:space-between;gap:12px;margin-top:26px;padding:0 0 8px;border-bottom:2px solid var(--ink)}
  .v2 .matrix .mx-col b{font-family:var(--serif);font-size:1.05rem;letter-spacing:-.01em;text-transform:none}
  .v2 .matrix .mx-col span{font-size:.66rem;text-align:right}
  .v2 .matrix .mx-col:nth-child(2){order:10}
  .v2 .matrix .mx-col:nth-child(3){order:20}
  .v2 .matrix .mx-col:nth-child(4){order:30}
  .v2 .matrix .mx-col:nth-child(5){order:40}
  .v2 .matrix .mx-col:nth-child(6){order:50}
  /* cards, block by block; block 2 lists the core course before the electives */
  .v2 .matrix .mx-cell{margin-top:8px}
  .v2 .matrix .mx-cell.b1{order:11}
  .v2 .matrix .mx-cell.b2{order:22}
  .v2 .matrix .mx-cell.r3.b2{order:21}
  .v2 .matrix .mx-sem{order:31}
  .v2 .matrix .mx-cell.b4{order:41}
  .v2 .matrix .mx-thesis{order:51}
  .v2 .matrix .mx-foot{order:60;margin-top:22px}
  /* every card names its pillar; the block is the section it sits in */
  .v2 .matrix .mx-cell::before{content:"";font-size:.62rem}
  .v2 .matrix .mx-cell.r1::before,.v2 .matrix .mx-cell.r1b::before{content:"Marketing Strategy"}
  .v2 .matrix .mx-cell.r2::before{content:"Customer Experience & Innovation"}
  .v2 .matrix .mx-cell.r3::before{content:"Customer Insights"}
  .v2 .matrix .mx-cell.r4::before{content:"Other Econ courses"}
  .v2 .matrix .mx-sem::before{content:"All three pillars"}
  .v2 .matrix .mx-thesis::before{content:"Blocks 3 to 5 · all three pillars";color:rgba(255,255,255,.6)}
  .v2 .matrix .mx-cell .nm{font-size:.98rem}
  .v2 .matrix .mx-cell .ec{font-size:.7rem}
  .v2 .matrix .mx-tag{font-size:.62rem}
  .v2 .matrix .mx-swap::before{padding:12px 12px 0}
  .v2 .matrix .mx-swap summary{padding-top:6px}
}
/* Fedde, 14 September, third phone round. Five spots, all below 640px (the social
   band at 720), the laptop untouched. */
/* 1. Home, "Why study Marketing": the section is a bordered card (styles.css .why) with
   30px of its own padding on top of the wrap's 20px, so its text started 51px in while
   "The school" above it started at 20px. On a phone the card loses its side padding
   and side borders and the two bands align. */
@media(max-width:640px){
  .v2 .zsec.about.why{padding-inline:0;border-radius:0;border-left:0;border-right:0}
}
/* 2. Home, "Where else to find us": three 136-156px cards, the icon on its own line.
   One row each: icon left, name and line beside it. */
@media(max-width:720px){
  .v2 .socband .socgrid{gap:10px;margin-top:20px}
  .v2 .socband .soccard{display:grid;grid-template-columns:26px minmax(0,1fr);grid-template-areas:"ico name" "ico sub";column-gap:14px;row-gap:2px;align-items:center;padding:14px 16px}
  .v2 .socband .socico{grid-area:ico;align-self:center}
  .v2 .socband .socname{grid-area:name}
  .v2 .socband .socsub{grid-area:sub;font-size:.84rem}
}
/* 3. Home, "Roles they go into": eight hairline rows, 307px. Chips wrap into four rows. */
@media(max-width:640px){
  .v2 .dest-list{display:flex;flex-wrap:wrap;gap:8px}
  .v2 .dest-list li{padding:7px 12px;border:1px solid var(--line-2);border-radius:999px;font-size:.84rem;line-height:1.3;color:var(--ink);background:var(--surface)}
}
/* 4. Careers, "Where graduates go": nine stacked cards, 1.4 screens of card chrome.
   A ruled list on a phone, same rhythm as the roles list on the home page; the
   open-ended ninth entry keeps its place, not its dark fill. */
@media(max-width:640px){
  .v2 .tracks.roles{gap:0;border-top:2px solid var(--ink)}
  .v2 .tracks.roles .track{padding:14px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none}
  .v2 .tracks.roles .track h3{font-size:1.02rem;margin:0 0 4px}
  .v2 .tracks.roles .track p{font-size:.9rem;line-height:1.45}
  .v2 .tracks.roles .track.more{background:transparent;border-color:var(--line)}
  .v2 .tracks.roles .track.more h3{color:var(--ink)}
  .v2 .tracks.roles .track.more p{color:var(--ink-2)}
}
/* 5. Blog index: both posts showed an 84px grey thumb. The photo runs the row's full
   width (16:9, in colour), date and section share the next line, then title and dek. */
@media(max-width:640px){
  .bloglist ul.wp-block-post-template > li.wp-block-post,
  .bloglist ul.wp-block-post-template > li.wp-block-post:first-child{
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"img img" "meta cat" "title title" "dek dek" "ledger ledger";
    column-gap:14px;row-gap:5px}
  .bloglist li.wp-block-post .bimg{margin:0 0 6px}
  .bloglist li.wp-block-post .bimg img,
  .bloglist li.wp-block-post:first-child .bimg img{width:100%;height:auto;aspect-ratio:16/9;border-radius:8px;filter:none}
  .bloglist li.wp-block-post .bmeta,.bloglist li.wp-block-post:first-child .bmeta{margin:0;padding-top:0;align-self:center}
  .bloglist li.wp-block-post .bcat{justify-self:start;align-self:center}
  .bloglist li.wp-block-post .btitle{margin-top:2px}
}
/* The lead post's 5:4 plate is set at .v2 specificity further up; the phone rule
   above lost to it, so the first photo was taller than the second. Same 16:9. */
@media(max-width:640px){.v2 .bloglist li.wp-block-post:first-child .bimg img{aspect-ratio:16/9}}
/* Fedde, 14 September, "even better" pass on the phone. Section bands carried 64px
   top and bottom on a 390px screen (mastersinrecht.nl runs about 48); the hero scrim
   opened up under the fact rows so the campus photo shows behind the four cards; the
   diploma line got air under the lead. */
@media(max-width:640px){
  .v2 .zsec{padding-block:48px}
  .v2 .herov2 .hero-scrim{background:linear-gradient(180deg,rgba(12,11,10,.94) 0%,rgba(12,11,10,.9) 48%,rgba(12,11,10,.8) 68%,rgba(12,11,10,.4) 100%)}
}
@media(max-width:560px){
  .v2 .hero-official{margin:10px 0 24px}
}
/* Fedde, 14 September: on a phone the dot row and the photo credit sat in a 100px band
   under the four cards. They move up into the gap between the nav pill and the headline
   (dots left, credit right, one line), and the band under the cards goes. */
@media(max-width:899px){
  .v2.p-home .hero-arrow .herov2-inner{padding-bottom:clamp(30px,5vw,44px) !important}
  .v2.p-home .hero-arrow .hdots{top:38px;bottom:auto;left:clamp(16px,4vw,28px)}
  .v2.p-home .hero-arrow .hero-credit{top:52px;bottom:auto;right:clamp(16px,4vw,28px);max-width:64%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
/* The first slide's credit is 48 characters; one line with an ellipsis would cut the
   attribution, so it wraps to two short right-aligned lines instead, still clear of
   the headline. */
@media(max-width:899px){
  .v2.p-home .hero-arrow .hero-credit{top:44px;max-width:50%;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.3}
}
/* Fedde, 14 September, every tab on a phone. */
/* Nav slides away while reading down (app.js adds html.nav-away below 641px), back on
   the first scroll up. The sticky lives on the template-part wrapper, so the transform
   goes there. */
@media(max-width:640px){
  .v2 .wp-site-blocks > .wp-block-template-part:has(> .nav){transition:transform .28s ease}
  html.nav-away .v2 .wp-site-blocks > .wp-block-template-part:has(> .nav){transform:translateY(-120%)}
  /* Blog post: the cover photo ran 52vh (439px) before the title plate; 40vh on a phone. */
  .p-post .art-hero{height:clamp(240px,40vh,340px)}
}
@media(prefers-reduced-motion:reduce){.v2 .wp-site-blocks > .wp-block-template-part:has(> .nav){transition:none}}