/* The Google faces are linked from each page's head rather than imported here:
   an @import at the top of a render-blocking sheet is fetched only after the
   sheet itself arrives, so the first paint waited on two round trips in
   series. The link in the head starts alongside this file. */

/* LICENSED FACES
   Extracted from the July production bundle. These load ahead of the Google
   fallbacks above, which stay in the stacks for local dev and for anyone
   without the licensed files. Marlide is declared at 400 and 500 only, per
   the standing rule: the display serif is never set heavier than medium.

   Minion Pro was long left undeclared because the bundle ships weight 400 only
   while the design system sets body copy at 300, and Source Serif 4 has a real
   300 to fall back to. The cost of that was silent: anyone with Minion Pro
   installed locally read the newsletter in it and everyone else read Source
   Serif 4, so the people approving the issue and the people receiving it were
   not seeing the same page. It is declared now, and body copy is Minion Pro
   Regular for every reader.

   Declared at 400, the one weight in the file. The 300 in the body rules still
   resolves here: CSS font matching looks for a face at or below the asked
   weight, finds none, and takes the next one up. Browsers never synthesise a
   lighter weight, so this is the real Regular, not a thinned fake. There is no
   italic in the bundle, and the serif rules never ask for one.

   Both faces are served as WOFF2 with their TTF behind them as a second src:
   same outlines, Minion 317KB to 77KB and Marlide 101KB to 33KB, and the TTFs
   are only ever fetched by a browser too old to know WOFF2. The two Marlide
   rules point at one file, as they did as TTFs, so declaring two weights off a
   single-weight face still costs a single download.

   These are cached for a year and marked immutable in vercel.json. Nothing in
   this repo has a content hash in its filename, so that promise only holds
   while the bytes behind a font filename never change. Swapping a face means
   giving it a new filename, not overwriting the old one. */
@font-face{font-family:'Marlide Display';src:url('../assets/fonts/marlide-display.woff2') format('woff2'),url('../assets/fonts/marlide-display.ttf') format('truetype');font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'Marlide Display';src:url('../assets/fonts/marlide-display.woff2') format('woff2'),url('../assets/fonts/marlide-display.ttf') format('truetype');font-weight:500;font-style:normal;font-display:block}
/* block rather than swap on the display face: the brand in the nav and every
   heading are set in it, and swap painted them in a fallback for the seconds
   the file took, then swapped. Preloaded on both pages and cached immutable
   on Vercel, the wait is a few frames on the first visit and none after. */
@font-face{font-family:'Minion Pro';src:url('../assets/fonts/minion-pro.woff2') format('woff2'),url('../assets/fonts/minion-pro.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}

:root{
  --coastal-900:#252f4a;--coastal-800:#3c506f;--coastal-700:#5d7fa0;--coastal-600:#6b95ba;
  --coastal-400:#89adc8;--coastal-300:#a7c4d8;--coastal-200:#c9dce8;--coastal-100:#e8f0f5;--coastal-50:#f4f8fb;
  --sand-100:#faf7f2;--sand-200:#f3ede4;--sand-300:#e5ddd0;
  --brass:#a8813f;
  /* what stays navy in the dark: the bands, their avatars and the sky buttons' press (see DARK) */
  --band:#252f4a;--band-2:#3c506f;--sky-press:#5d7fa0;
  --white:#fff;--gray-50:#fafafa;--gray-200:#e8e8e8;--gray-400:#a3a3a3;--gray-500:#737373;--gray-600:#525252;--gray-700:#404040;
  --font-display:'Marlide Display','Cormorant Garamond',Georgia,serif;
  --font-serif:'Minion Pro','Source Serif 4',Georgia,serif;
  --font-ui:'NHaasGroteskDSPro','DM Sans',-apple-system,sans-serif;
  --ease:cubic-bezier(0.16,1,0.3,1);--maxw:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
/* Two quick taps on a control, the hamburger opened and closed, the tabs
   flicked, is a double-tap to a phone, and Safari zooms the page. This
   keeps the tap and drops the zoom on controls only; pinching the page
   still works everywhere. */
a,button,summary,[role=button]{touch-action:manipulation}
html{scroll-behavior:smooth}
/* The canvas is navy and the page's white lives on #app, which fades in once
   the hero has rendered, so arriving from the gate is navy to navy to the
   issue rather than a white flash while the JSON loads. The white cannot sit
   on body: with html carrying its own colour, body's background paints body's
   own box rather than the canvas, and that box fills the moment the issue
   renders, under a still-transparent #app. main.js adds .ready after the
   first paint, and on a timer regardless, so a slow fetch never leaves the
   page blank. Off under reduced motion. index.html and gate.html carry the
   same navy inline, ahead of this sheet, for the very first paint. */
html{background:var(--band)}
body{font-family:var(--font-serif);color:var(--coastal-900);background:transparent;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* Nothing scrolls sideways on a phone. Safari on iOS lets the page pan
   toward anything parked past the right edge (the closed drawer, the edge
   shadow below) unless the root clips it too; clip, not hidden, so the
   sticky tabs keep sticking. */
html,body{overflow-x:clip}
#app{background:var(--white);opacity:0;transition:opacity .4s var(--ease)}
body.ready #app{opacity:1}
/* The nav arrives with the page rather than ahead of it. */
.nav{opacity:0}
body.ready .nav{opacity:1}
@media(prefers-reduced-motion:reduce){#app{opacity:1;transition:none}.nav{opacity:1}}
img{display:block;max-width:100%}a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 max(40px,env(safe-area-inset-right)) 0 max(40px,env(safe-area-inset-left))}
.display{font-family:var(--font-display);font-weight:500;letter-spacing:-.01em;line-height:1.04}
.overline{font-family:var(--font-ui);font-size:12px;letter-spacing:3px;text-transform:uppercase;font-weight:500;color:var(--coastal-600);display:inline-flex;align-items:center;gap:12px}
.overline::before{content:'';width:24px;height:1.5px;background:var(--coastal-600)}
.overline.light{color:var(--coastal-300)}.overline.light::before{background:var(--coastal-300)}
/* The hero's kicker in the campaign's brass, with its rule, only where an issue asks
   for it (`hero.kickerTone: "brass"`): the Victory identity's one accent, kept to this
   line and to the campaign's issues. Every other issue keeps the light kicker. */
.hero .overline.light.brass{color:var(--brass)}.hero .overline.light.brass::before{background:var(--brass)}
em{font-style:italic;color:var(--coastal-700)}.on-dark em{color:var(--coastal-400)}
/* .55s from .9s and 14px from 24px: at .9s a reader scrolling at desktop speed
   arrived at sections still blank and watched them fill in, which read as the
   page loading slowly rather than as motion. */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* NAV */
/* The gap is load bearing. space-between alone puts no floor under the space
   between the brand and the links, so at the width where they exactly fill
   the bar the badge ends up touching "Letter". */
/* The page runs under the phone's bars (viewport-fit=cover, so Safari's glass
   blurs real content rather than filling the strip with the canvas colour),
   so everything pinned to an edge pads by that edge's safe-area inset. */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:calc(18px + env(safe-area-inset-top)) max(40px,env(safe-area-inset-right)) 18px max(40px,env(safe-area-inset-left));transition:all .4s var(--ease)}
/* No backdrop blur. It re-blurred everything behind a screen-wide fixed bar on
   every frame of every scroll, which is the usual cause of scroll judder on
   large displays, for a softening that .96 white does on its own. */
.nav.solid{background:rgba(255,255,255,.96);box-shadow:0 1px 0 var(--gray-200);padding-top:calc(12px + env(safe-area-inset-top));padding-bottom:12px}
/* On a phone the nav slides up out of the status bar while the reader scrolls
   down (src/main.js sets .away, touch screens only), so Safari fades the page
   into the status bar rather than painting it the nav's white. */
.nav.away{transform:translateY(-100%)}
@media(prefers-reduced-motion:reduce){.nav{transition:none}}
/* inline-flex and nowrap are not a narrow-screen concern: the brand is a flex
   item competing with the links, so from about 900px down it gets squeezed
   enough that "August 2026" breaks onto its own line and the badge's border
   splits into two fragments. Holding it on one line here fixes every width at
   once, and flex:none stops the links squeezing it in the first place. */
.nav .brand{font-family:var(--font-display);font-weight:500;font-size:21px;color:#fff;transition:color .4s var(--ease);
  display:inline-flex;align-items:center;white-space:nowrap;flex:none}
.nav .brand b{font-weight:600}.nav.solid .brand{color:var(--coastal-900)}
.nav .links{display:flex;gap:26px;align-items:center}
.nav .links a{font-family:var(--font-ui);font-size:15px;color:rgba(255,255,255,.85);transition:color .3s}
.nav .links a[hidden]{display:none}
.nav.solid .links a{color:var(--gray-500)}
.nav .links a:hover{color:#fff}.nav.solid .links a:hover{color:var(--coastal-900)}
.nav .prev-btn{font-family:var(--font-ui);font-size:14px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.4);color:#fff;padding:9px 16px;cursor:pointer;background:none;transition:all .3s var(--ease)}
.nav.solid .prev-btn{border-color:var(--coastal-300);color:var(--coastal-700)}
.nav .prev-btn:hover{background:var(--coastal-600);border-color:var(--coastal-600);color:#fff}
/* 900, not 820. The full nav needs about 850px before the links start
   crowding the brand, so between 820 and 900 it was over-full and the badge
   collided with the first link. Paired with the hamburger's own breakpoint
   below; the two must move together or a width appears with no links and no
   menu button. */
/* Six links with Conferences among them need about 1,110px on one row at
   full size; under 1,200px the row tightens, and under 1,040px it hands over
   to the hamburger. Measured, not guessed: at 1,000px the row wrapped. */
@media(max-width:1200px){.nav .links{gap:18px}.nav .links a:not(.prev-btn){font-size:14px}}
@media(max-width:1040px){.nav .links a:not(.prev-btn){display:none}}

/* issue badge */
.issue-badge{font-family:var(--font-ui);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--coastal-400);
  border:1px solid rgba(167,196,216,.4);padding:4px 10px;margin-left:12px;white-space:nowrap;
  transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease)}
/* Hovering the brand fills the issue badge blue with white type, so the link
   reads as one thing that goes to the top of the current issue. Same on
   keyboard focus. */
.nav .issue-badge:hover,.nav .issue-badge:focus-visible{background:var(--coastal-600);border-color:var(--coastal-600);color:#fff}
.nav .brand-home{color:inherit;transition:opacity .25s var(--ease)}
.nav .brand-home:hover,.nav .brand-home:focus-visible{opacity:.75}

/* HERO */
/* svh, not vh and not dvh. The copy is bottom aligned, and on iOS Safari
   100vh is the height the page would have with the browser chrome collapsed,
   so the last ~90px of the hero sat behind the address bar and the dek was
   cut off. dvh fixed that but tracks the chrome live: the hero grew and shrank
   by the bar's height as it slid away and back, and every section below
   jumped with it. svh is the height with the chrome showing, and it holds
   still. The vh line stays first as the fallback for anything that lacks it. */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.hero .bg{position:absolute;inset:0}
/* <picture> is inline by default, so without this the img inside it has no
   height to fill and the hero collapses. */
.hero .bg picture{display:block;width:100%;height:100%}
.hero .bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);animation:z 14s var(--ease) forwards}
/* Only on phones. At desktop widths the whole frame is visible and there is
   nothing to choose. Below 700 the crop is a slice, so the issue picks which
   slice; default stays dead centre for any month that sets no focus. */
@media(max-width:700px){
  .hero .bg img{object-position:var(--hero-focus,50% 50%)}
  /* No slow zoom on phones. It holds the image at 1.06 for most of its 14
     seconds, which is a 6% upscale on a source that is already close to 1:1
     on a large phone, and a transformed layer is often rasterised at lower
     resolution while it animates. Desktop keeps it: there the source has
     pixels to spare. */
  .hero .bg img{transform:none;animation:none}
}
@keyframes z{to{transform:scale(1)}}
.hero .bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(37,47,74,.5),rgba(37,47,74,.2) 40%,rgba(37,47,74,.85))}
.hero .inner{position:relative;z-index:2;padding-bottom:80px;width:100%}
/* The campaign mark, when an issue opts in through `hero.mark`. Flag P at its
   locked seven by five: a fixed box, never scaled by the type around it and
   never rounded, because it is a real signal and not an ornament. */
/* Sized to the screen rather than fixed: 56px read as a poster next to a 12px
   kicker on a tablet. 3vw between 30 and 44px, the flag's own 7:5 kept. */
.hero-mark{display:block;width:clamp(30px,3vw,44px);height:auto;aspect-ratio:70/50;margin-bottom:clamp(14px,2vw,22px)}
.hero h1{font-size:clamp(44px,6.5vw,88px);max-width:14ch;margin:18px 0 22px}
.hero .dek{font-family:var(--font-serif);font-weight:300;font-size:clamp(17px,2vw,21px);line-height:1.55;color:var(--coastal-100);max-width:620px}
/* Scroll cue. Phones only: on desktop the hero does not fill the screen the
   same way and the letter is already partly in view. Just the chevron, no
   button, drifting a few pixels so it reads as an invitation rather than a
   mark. Sized past the 44px tap target even though the glyph is 26px. */
.hero-scroll{display:none;position:absolute;z-index:3;left:50%;bottom:22px;
  width:44px;height:44px;margin-left:-22px;align-items:center;justify-content:center;
  color:rgba(255,255,255,.75);transition:color .25s var(--ease)}
.hero-scroll svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;animation:heroNudge 2.4s var(--ease) infinite}
.hero-scroll:hover,.hero-scroll:focus-visible{color:#fff}
@keyframes heroNudge{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(5px)}}
@media(max-width:700px){.hero-scroll{display:flex}}
@media(prefers-reduced-motion:reduce){.hero-scroll svg{animation:none}}

/* The printed edition (src/components/print-edition.js). The section is the
   hero for the chrome's sake, so the status bar stays navy over it and the nav
   keeps its place, but it holds exactly one screen. The title and the issue
   line sit in the nav's own row, centred between the brand and Previous
   Issues, so the viewer, which needs a height of its own, takes everything
   under the nav (Elijah: the pages read larger). The row is 74px, the nav's
   18px padding either side of the 38px button. Under 1200px the row has no
   room for them, so they drop to a slim band under the nav instead. */
.hero.print-ed{min-height:0;height:100vh;height:100svh;min-height:560px;padding:0;
  display:flex;flex-direction:column;align-items:stretch;background:var(--band)}
.print-ed .print-head{position:absolute;z-index:49;top:0;left:50%;transform:translateX(-50%);
  height:calc(74px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top);
  display:flex;align-items:baseline;justify-content:center;gap:16px;white-space:nowrap;pointer-events:none}
.print-ed .print-head>*{align-self:center}
.print-ed h1{font-size:23px;max-width:none;margin:0;color:#fff;line-height:1}
.print-ed .print-line{font-family:var(--font-ui);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--coastal-300);
  display:inline-flex;align-items:center;gap:16px}
.print-ed .print-line::before{content:'';width:1px;height:16px;background:rgba(167,196,216,.45)}
.print-ed .mag{flex:1 1 0;height:auto;min-height:0;margin-top:calc(74px + env(safe-area-inset-top))}
@media(max-width:1199px){
  .print-ed .print-head{position:static;transform:none;height:auto;flex-direction:column;align-items:center;gap:6px;
    padding:calc(74px + env(safe-area-inset-top)) 16px 4px;white-space:normal;text-align:center}
  .print-ed .print-line::before{display:none}
  .print-ed .mag{margin-top:0}
}
@media(max-width:700px){
  .print-ed .print-head{padding-top:calc(68px + env(safe-area-inset-top));gap:4px}
  .print-ed h1{font-size:20px}
  .print-ed .print-line{font-size:10px;letter-spacing:1.5px}
}

/* THE ISSUES PAGE (src/components/issues-index.js), the bare address and so
   where the printed edition's QR codes land. A short navy head, the latest
   issue as one wide card with its button, then every other issue as cards. */
.hero.hub{min-height:0;align-items:stretch;background:var(--band)}
/* .hero.hub on the paddings: the phone rules for .wrap come later in the sheet and reset them */
.hero.hub .hub-head{position:relative;padding-top:calc(124px + env(safe-area-inset-top));padding-bottom:52px;
  display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px;align-items:end}
.hub-head h1{font-size:clamp(40px,5vw,68px);max-width:none;margin:16px 0 16px}
.hub-head h1 em{color:var(--coastal-300)}
.hub-head .dek{max-width:560px}
/* 56px over the latest issue, not the 120 a section takes: the head is
   short, so at 1440x900 the latest issue and its View the latest button both
   sit inside the first screen. */
section.hub-latest{padding:56px 0 24px;background:var(--white)}
.hub-feature{display:grid;grid-template-columns:1.15fr 1fr;border:1px solid var(--gray-200);overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.hub-feature:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(37,47,74,.12)}
.hub-feature .hf-img{position:relative;min-height:360px;overflow:hidden}
/* pressed: the card settles back under the finger or the click */
.hub-feature:active,.hub-card:active{transform:translateY(0) scale(.995);transition-duration:.12s}
.hub-feature.is-print .mag-thumb .mt-book{height:80%}
.hub-feature .hf-img>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.hub-feature:hover .hf-img>img{transform:scale(1.04)}
/* The past issues' photographs lean in the same way under the mouse, and under a
   finger they lean in while it is down, faster, so the press is seen before the
   page changes (Elijah). */
.hub-card .ic-img>img{transition:transform 1.2s var(--ease)}
.hub-card:hover .ic-img>img{transform:scale(1.04)}
@media(hover:none){
  .hub-card:active .ic-img>img,.hub-feature:active .hf-img>img{transform:scale(1.04);transition-duration:.35s}
}
.hub-feature .hf-panel{padding:48px 48px 44px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.hub-feature .dateline{width:100%;margin:0}
.hub-feature h2{font-size:clamp(30px,3.2vw,42px);margin:10px 0 14px;color:var(--coastal-900)}
.hub-feature p{font-family:var(--font-serif);font-weight:300;font-size:18px;line-height:1.55;color:var(--gray-600);max-width:46ch}
.hub-feature .hf-cta{margin-top:26px;display:inline-flex;align-items:center;gap:10px;font-family:var(--font-ui);font-size:14px;font-weight:600;
  letter-spacing:.5px;text-transform:uppercase;color:#fff;background:var(--coastal-600);padding:14px 22px;transition:background .25s var(--ease)}
.hub-feature:hover .hf-cta{background:var(--sky-press)}
.hf-cta svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.hub-feature:hover .hf-cta svg{transform:translateX(3px)}
section.hub-all{padding:48px 0 110px;background:var(--white)}

/* The bookmark callout in the head: page 2 of the printed edition's own
   block, a ruled kicker (brass, the words and the rule: Elijah's call for the hub, Oct 29), the address in the display face and one
   italic line, so the reader who scanned the code there meets it again. */
.hub-mark{border-left:1px solid rgba(167,196,216,.3);padding:4px 0 6px 32px}
.hm-kick{display:flex;align-items:center;font-family:var(--font-ui);font-size:11.5px;font-weight:500;letter-spacing:2.5px;text-transform:uppercase;color:var(--brass)}
.hm-kick::before{content:'';flex:none;width:30px;height:2px;margin-right:12px;background:var(--brass)}
.hm-url{margin:10px 0 0;font-family:var(--font-display);font-weight:500;font-size:25px;line-height:1.1;color:#fff;white-space:nowrap}
.hub-mark p{margin:8px 0 0;font-family:var(--font-serif);font-style:italic;font-size:16px;line-height:1.45;color:var(--coastal-100)}
.hub-mark .hm-how{font-family:var(--font-ui);font-style:normal;font-size:13px;color:var(--coastal-300);margin-top:14px}
.hm-copy{margin-top:14px;padding:8px 14px;font-family:var(--font-ui);font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;
  color:#fff;background:none;border:1px solid rgba(167,196,216,.45);cursor:pointer;transition:background .25s var(--ease),border-color .25s var(--ease)}
.hm-copy:hover{background:var(--coastal-600);border-color:var(--coastal-600)}
.hm-copy.done{border-color:var(--coastal-400);color:#fff}
.hm-how kbd{display:inline-block;min-width:22px;margin:0 2px;padding:1px 6px;border:1px solid rgba(167,196,216,.45);
  font-family:var(--font-ui);font-size:12px;line-height:18px;text-align:center;color:#fff}

/* The dateline, in the printed edition's manner: the cover's short rule and
   "The monthly edition / September 2026". Sky, and the campaign's brass only
   on an issue set in the Victory identity (.is-victory). */
.dateline{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:10px}
.dl-kick{display:flex;align-items:center;flex-wrap:wrap;font-family:var(--font-ui);font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--gray-500)}
.dl-kick::before{content:'';flex:none;width:24px;height:2px;margin-right:10px;background:var(--coastal-600)}
.dl-sep{margin:0 .55em;color:var(--coastal-600)}
.dateline.is-victory .dl-kick::before{background:var(--brass)}
.dateline.is-victory .dl-sep{color:var(--brass)}
.dl-lead{color:var(--coastal-600);font-weight:500}
.hub-card .dl-ed{display:none}
.hub-card .ic-title{margin-top:2px}
.hub-card .ic-meta{font-size:13px}
.hub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.hub-grid .issue-card{margin:0}
.hub-grid .issue-card .ic-img{height:220px}
@media(max-width:900px){
  .hero.hub .hub-head{grid-template-columns:1fr;gap:32px}
  .hub-mark{border-left:0;border-top:1px solid rgba(167,196,216,.3);padding:24px 0 0}
  .hub-feature .dl-ed{display:none}
  .hub-feature{grid-template-columns:1fr}
  .hub-feature .hf-img{min-height:240px}
  .hub-feature .hf-panel{padding:30px 24px 30px}
  .hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .hero.hub .hub-head{padding-top:calc(104px + env(safe-area-inset-top));padding-bottom:44px}
  section.hub-latest{padding:40px 0 12px}
  .hub-grid{grid-template-columns:1fr;gap:16px}
  .hub-grid .issue-card .ic-img{height:200px}
}

/* A printed edition's picture: the magazine itself (issueThumb in
   src/components/issues-index.js), on the issues page and in the drawer. The
   cover stands on the viewer's pale ground, turned a few degrees, with a
   shaded spine at the left, the page block at the fore edge as stacked
   hairlines, a soft shadow on the ground and a gloss band that slides across
   when the card is hovered. */
.mag-thumb{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;perspective:900px;
  background:radial-gradient(120% 90% at 50% 35%,#f4f7fa 0%,#e3eaf1 70%,#d8e1ea 100%)}
.mag-thumb .mt-book{position:relative;height:84%;aspect-ratio:17/22;transform:rotateY(-14deg) rotateX(3deg);transform-origin:40% 50%;
  box-shadow:1px 0 0 #f7f5f0,2px 1px 0 #d9d5cc,3px 1px 0 #f7f5f0,4px 2px 0 #d2cdc3,5px 2px 0 #f2efe8,
    14px 18px 26px -8px rgba(37,47,74,.42),3px 5px 10px rgba(37,47,74,.18);
  transition:transform .6s var(--ease)}
.issue-card .ic-img .mag-thumb img,.hub-feature .hf-img .mag-thumb img{position:static;width:100%;height:100%;object-fit:cover;transform:none}
.mag-thumb .mt-book::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.32) 0,rgba(0,0,0,.08) 2.4%,rgba(255,255,255,.22) 3.4%,rgba(255,255,255,0) 6%)}
.mag-thumb .mt-gloss{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.mag-thumb .mt-gloss::before{content:'';position:absolute;inset:-20% -60%;
  background:linear-gradient(112deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.28) 46%,rgba(255,255,255,.08) 52%,rgba(255,255,255,0) 58%);
  transform:translateX(-18%);transition:transform 1.1s var(--ease)}
.mag-thumb .mt-gloss::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 30%,rgba(0,0,0,.06))}
.issue-card:hover .mag-thumb .mt-gloss::before,.hub-feature:hover .mag-thumb .mt-gloss::before{transform:translateX(18%)}
.issue-card:hover .mag-thumb .mt-book,.hub-feature:hover .mag-thumb .mt-book{transform:rotateY(-8deg) rotateX(2deg)}
.issue-card.is-print .ic-img .cur-tag{z-index:3}
@media(prefers-reduced-motion:reduce){.mag-thumb .mt-book,.mag-thumb .mt-gloss::before{transition:none}}

section{padding:120px 0}
.sec-row{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:30px;gap:20px;flex-wrap:wrap}
/* margin-left:auto and right alignment: when a long eyebrow and a long meta
   cannot share the row on a narrow laptop, the meta wraps to a second line at
   the right, where an aside belongs, rather than flush left under the eyebrow
   where it read as a second label. */
.sec-meta{font-family:var(--font-ui);font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--gray-400);margin-left:auto;text-align:right}
/* The meta is a right-aligned aside, and a phone has no right side. Wrapped, it
   lands stacked and flush left under the eyebrow in the same uppercase
   treatment, so it reads as a second eyebrow: two labels where the section has
   one. Restyling it was tried and only rescued the short ones, ten of the
   seventeen still wrapped.
   Hidden below 620 instead, which costs almost nothing. Checked each one: the
   dates are repeated in the lists beneath them, "Collections through the end
   of August" is the partner note verbatim, "@mycoastalwealth" is on the Follow
   button, and the rest are decorative. Anything a month genuinely needs a
   reader to see belongs in the copy, not in an aside that only desktop shows. */
/* Hidden wherever the nav has collapsed (820px, the same point the menu
   appears): a phone or a tablet has no right side for an aside. It was 620,
   and between 620 and 820 the training meta wrapped under its eyebrow. */
@media(max-width:820px){.sec-meta{display:none}}
.sec-title{font-size:clamp(32px,4.5vw,52px);margin-top:14px}

/* LETTER */
.letter{background:var(--sand-100)}
/* start, not center. The figure column runs 776px against the body's 499, so
   centring the shorter one pushed the copy 138px down the page and opened a
   gap under the title that read as a mistake. Stacked on phones there is no
   second column to centre against, which is why it only ever looked right
   there. Both columns now begin at the title. */
/* The picture takes the larger share now, not the text, because the numbers
   moved onto it and they need the room. Three cells across a 432px column is
   144px each, or 108px of content box, and $264.6M sets 113px wide while
   "Lives written · July" sets 110px: the value clipped and the labels wrapped.
   Reversed, the column is 595px, a cell is 198px, and the widest of each sits
   on one line with 40px to spare. The letter pays 163px for it and still holds
   about 52 characters, inside the measure the issue sets serif at elsewhere. */
/* One column. The two-column form put the text in a 440px column beside the
   photograph, which read as shrunk on a wide screen, and a sticky photograph
   moved while the reader read, which Elijah hated. The words run at a full
   editorial measure and the photograph follows them at the same width. */
.letter .grid{display:block;margin-top:40px}
.letter .body{font-family:var(--font-serif);font-weight:300;font-size:22px;line-height:1.7;color:var(--gray-700);max-width:900px}
/* Narrower than the words on purpose: at their full 900px the photograph was
   a poster. 640px keeps it a picture at the foot of the letter. */
.letter .figure{max-width:640px;margin-top:44px}
.letter .body p{margin-bottom:18px}.letter .lead{font-size:25px;line-height:1.6;color:var(--coastal-900)}
/* The opening mark is hung, not inset: `text-indent` pulls it back into the
   padding so the first line of type still starts flush with the lines under
   it. Set inline it would shunt the first line right and the left edge would
   look broken against the rule. At 27px the .42em pull is about 11px, which
   leaves roughly the same again between the mark and the rule. */
.letter .pull{font-family:var(--font-display);font-weight:500;font-style:italic;font-size:27px;line-height:1.3;color:var(--coastal-800);border-left:2px solid var(--coastal-600);padding-left:22px;margin:26px 0;text-indent:-.42em}
.letter .pull::before{content:'\201C'}
.letter .sign{font-family:var(--font-ui);font-size:15px;color:var(--gray-500);margin-top:8px}
.letter .sign b{font-family:var(--font-display);font-weight:500;font-size:21px;color:var(--coastal-900);display:block;margin-bottom:3px}
/* The photograph drifts on hover like every other picture in the issue. The
   shadow moves off the image and onto a wrapper around it, the same split the
   Corner shot makes and for the same reason: `overflow:hidden` has to sit on
   the box that clips the zoom, and a box that clips cannot cast a shadow
   outside itself. The wrapper cannot be `.figure`, which also holds the stats.
   .7s and 1.03, the pair the Corner and Napa photographs use, rather than the
   grids' .5s and 1.05. Those are tiles in a row and this is one picture. */
.letter .figure .shot{position:relative;overflow:hidden;box-shadow:0 24px 64px rgba(37,47,74,.18)}
.letter .figure img{width:100%;display:block;transition:transform .7s var(--ease)}
.letter .figure .shot:hover img{transform:scale(1.03)}
/* The scrim, like the trip's and the Corner's. It is safe on this picture for
   the same reason it is safe on Jorge's: all three faces sit in the upper half,
   so a band across the foot falls on the floor and on shoes. It stops at 52%
   rather than the Corner's 46% because the band here is two lines deep, not
   one, and the type needs dark under all of it. */
.letter .figure .shot::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(24,32,50,.88),rgba(24,32,50,.34) 26%,rgba(24,32,50,0) 52%)}
.letter .stats{position:absolute;left:0;right:0;bottom:0;z-index:1;
  display:grid;grid-template-columns:repeat(3,1fr);margin-top:0;border:0}
/* White hairlines at low alpha, not the grey border: on the photograph a grey
   rule disappears into whatever happens to be behind it. Same value the trip
   facts use, for the same reason. */
.letter .stats .s{padding:20px 22px;border-right:1px solid rgba(255,255,255,.22)}
.letter .stats .s:last-child{border-right:0}
.letter .stats .n{font-family:var(--font-display);font-weight:500;font-size:30px;color:#fff}
.letter .stats .l{font-family:var(--font-ui);font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:rgba(255,255,255,.72);margin-top:5px;line-height:1.4}
@media(max-width:860px){
  .letter .figure{margin-top:32px}
  /* The 420px cap that used to sit here is gone with the portrait it was for.
     That photograph ran 1118px tall at full column width and swallowed the
     section; this one is landscape, so 746px wide is 497px tall, and the band
     across its foot wants every pixel of that width it can get. */
}
/* Under the picture again below 700, the same width the Corner byline gives up
   at and for the same reason: the band needs a picture with room to spare. At
   620px of column a cell is 207px and the numbers still sit on one line; under
   that they do not, and a bar the design already has is better than a cramped
   overlay. */
@media(max-width:700px){
  .letter .figure .shot::after{display:none}
  /* With the bar back in flow inside `.shot`, a clipping box with a shadow
     would wrap the numbers too and draw a panel around them. So the wrapper
     stops being a box and the shadow goes back on the photograph, which is
     where it lived before the overlay. Nothing clips the zoom then, and a tap
     latches :hover on a touch screen, so the drift comes off with it. */
  .letter .figure .shot{overflow:visible;box-shadow:none}
  .letter .figure img{box-shadow:0 24px 64px rgba(37,47,74,.18)}
  .letter .figure .shot:hover img{transform:none}
  .letter .stats{position:static;margin-top:24px;border:1px solid var(--gray-200)}
  .letter .stats .s{padding:18px;border-right:1px solid var(--gray-200)}
  .letter .stats .n{color:var(--coastal-900)}
  .letter .stats .l{color:var(--gray-400)}
}

/* RECOGNITION */
.recognition{background:var(--band);color:#fff}
.recognition .sec-title{color:#fff}.recognition .sec-meta{color:var(--coastal-400)}
/* margin-top so the lead does not sit hard against its title. It had none, so
   every section using this class ran the two together, which is the same thing
   the qualifiers intro was fixed for. Matches that 14px. */
.recog-intro{font-family:var(--font-serif);font-weight:300;font-size:22px;line-height:1.6;color:var(--coastal-100);max-width:900px;margin-top:14px;margin-bottom:40px}
.tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid rgba(167,196,216,.2);margin-bottom:6px}
.tab{font-family:var(--font-ui);font-size:15px;font-weight:500;color:var(--coastal-300);background:none;border:0;border-bottom:2px solid transparent;padding:14px 20px;cursor:pointer;transition:all .3s}
.tab:hover{color:#fff}.tab.active{color:#fff;border-bottom-color:var(--coastal-400)}
.board-head{display:flex;justify-content:space-between;align-items:flex-end;padding:26px 0 18px;flex-wrap:wrap;gap:12px}
.board-head .bcat{font-family:var(--font-ui);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--coastal-400);margin-bottom:6px}
.board-head .bttl{font-family:var(--font-display);font-weight:500;font-size:30px;color:#fff}
.board-head .bper{font-family:var(--font-ui);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--coastal-300)}
.ll{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
.ll li{display:grid;grid-template-columns:26px 38px 1fr auto;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.07);opacity:0;transform:translateY(10px);animation:ri .5s var(--ease) forwards}
@keyframes ri{to{opacity:1;transform:none}}
.ll .r{font-family:var(--font-ui);font-size:14px;font-weight:600;color:var(--coastal-400)}
.ll li.top .r{color:var(--coastal-200)}
.ll .av{width:38px;height:38px;border-radius:50%;overflow:hidden;background:var(--band-2);border:1px solid rgba(167,196,216,.3)}
.ll .av img{width:100%;height:100%;object-fit:cover}
.ll .nm{font-family:var(--font-ui);font-size:17px;font-weight:500;color:#fff}
.ll .nm .s{display:block;font-size:14px;font-weight:400;color:var(--coastal-400);margin-top:2px}
.ll .v{font-family:var(--font-ui);font-size:17px;font-weight:600;color:var(--coastal-200);font-variant-numeric:tabular-nums}
.board-note{font-family:var(--font-ui);font-size:14px;color:var(--coastal-300);margin-top:20px;line-height:1.6;max-width:760px}
@media(max-width:780px){.ll{grid-template-columns:1fr}}
.subcards{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:60px}
/* One board left, so one column, centred and held near the two-up width. Full
   width would stretch each row until the name and its figure lost each other. */
.subcards.one{grid-template-columns:minmax(0,520px);justify-content:center}
.subcard{border:1px solid rgba(167,196,216,.2);padding:28px}
.subcard .bcat{font-family:var(--font-ui);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--coastal-400);margin-bottom:6px}
.subcard .bttl{font-family:var(--font-display);font-weight:500;font-size:26px;color:#fff;margin-bottom:4px}
.subcard .draft{font-family:var(--font-ui);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--coastal-400);margin-left:8px;opacity:.8}
.subcard ul{list-style:none;margin-top:14px}
.subcard li{display:grid;grid-template-columns:24px 1fr auto;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.06);font-family:var(--font-ui);font-size:15px;color:#fff}
.subcard li:last-child{border-bottom:0}
.subcard li .rr{font-size:12px;font-weight:600;color:var(--coastal-400)}
/* A row may carry a symbol in the numeral's place, for a board of criteria rather than a ranking. */
.subcard li .rr svg{width:18px;height:18px;display:block;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;color:var(--coastal-300)}
.subcard li .ss{font-size:11px;color:var(--coastal-400);display:block}
.subcard li .vv{font-weight:600;color:var(--coastal-200)}
.subcard .fin{font-family:var(--font-ui);font-size:11.5px;color:var(--coastal-300);margin-top:14px;border-top:1px solid rgba(167,196,216,.15);padding-top:10px;line-height:1.5}
/* A subcard that is a link: the anchor reset, a hover on the card's own border, and the document pill from the conferences section at its foot. */
a.subcard{display:block;color:inherit;text-decoration:none;transition:border-color .2s var(--ease)}
a.subcard:hover{border-color:rgba(167,196,216,.55)}
a.subcard:focus-visible{outline:2px solid var(--coastal-400);outline-offset:3px}
/* One leader per tier: a face in the numeral's place. */
.subcard.faces li{grid-template-columns:34px 1fr auto}
.subcard.faces .av{width:34px;height:34px;border-radius:50%;overflow:hidden;background:var(--band-2);border:1px solid rgba(167,196,216,.3)}
.subcard.faces .av img{width:100%;height:100%;object-fit:cover}
.subcard-doc{margin-top:18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.subcard-doc .conf-doc-cta{display:inline-block;font-size:11px;padding:9px 16px}
a.subcard:hover .conf-doc-cta{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.8)}
.subcard-doc .conf-doc-note{font-size:11.5px;flex:1;min-width:16ch}
@media(max-width:780px){.subcards{grid-template-columns:1fr}}

/* VISION */
.vision{position:relative;color:#fff;min-height:90vh;display:flex;align-items:center;background:var(--band)}
/* The picture at .7 under a scrim that runs dark on the left, where the
   statement sits, to open on the right, where the boats are. At .3 under a
   near-solid scrim the boats were barely there. */
.vision .bg{position:absolute;inset:0;overflow:hidden}.vision .bg img{width:100%;height:100%;object-fit:cover;opacity:.7}
.vision .bg::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(37,47,74,.86) 0%,rgba(37,47,74,.62) 45%,rgba(37,47,74,.3) 100%)}
.vision .inner{position:relative;z-index:2;width:100%}
.vision .stmt{font-family:var(--font-display);font-weight:500;font-size:clamp(30px,5vw,58px);line-height:1.1;max-width:16ch;margin:20px 0 50px}
.vision .stmt em{color:var(--coastal-400)}
.triad{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid rgba(167,196,216,.25)}
.triad .c{padding:34px 30px;border-right:1px solid rgba(167,196,216,.2)}.triad .c:last-child{border-right:0}
.triad .big{font-family:var(--font-display);font-weight:500;font-size:clamp(40px,5vw,60px);line-height:1}
.triad .l{font-family:var(--font-ui);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--coastal-300);margin-top:12px}
@media(max-width:780px){.triad{grid-template-columns:1fr}.triad .c{border-right:0;border-bottom:1px solid rgba(167,196,216,.2)}}

/* CORNER */
.corner{background:var(--white)}
.corner .grid{display:grid;grid-template-columns:0.85fr 1fr;gap:60px;align-items:center;margin-top:40px}
.corner .portrait img{width:100%;display:block}
/* The wrapper carries the shadow now, not the image. Clipping and a shadow
   cannot live on the same box: `overflow:hidden` would cut the shadow off at
   the very edge it is meant to fall outside of. */
.corner .shot{position:relative;overflow:hidden;box-shadow:0 24px 64px rgba(37,47,74,.16)}
.corner .shot img{transition:transform .7s var(--ease)}
.corner .shot:hover img{transform:scale(1.03)}
.corner .who{margin-top:18px}
.corner .who b{font-family:var(--font-display);font-weight:500;font-size:26px;color:var(--coastal-900);display:block}
.corner .who span{font-family:var(--font-ui);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--coastal-600);display:block;margin-top:6px}
.qa{border-top:1px solid var(--gray-200);padding:24px 0}.qa:first-of-type{border-top:0;padding-top:0}
.qa .q{font-family:var(--font-display);font-weight:500;font-size:25px;color:var(--coastal-800);line-height:1.25;margin-bottom:10px;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.qa .q .tog{font-family:var(--font-ui);font-size:20px;color:var(--coastal-400);transition:transform .3s var(--ease);flex:none}
.qa.open .q .tog{transform:rotate(45deg)}
.qa .a{font-family:var(--font-serif);font-weight:300;font-size:19px;line-height:1.7;color:var(--gray-600);max-height:0;overflow:hidden;transition:max-height .5s var(--ease),margin .4s var(--ease)}
/* 240px clipped any answer longer than about 8 lines, which a real advisor
   answer passes easily once the column narrows on a phone. The value only
   needs to exceed the tallest answer; the easing is front-loaded so the extra
   headroom is not visible. */
.qa.open .a{max-height:640px;margin-top:4px}.qa .a em{color:var(--coastal-700)}
.corner .social{font-family:var(--font-ui);font-size:14px;color:var(--gray-400);margin-top:24px;border-top:1px solid var(--gray-200);padding-top:16px}
@media(max-width:860px){.corner .grid{grid-template-columns:1fr;gap:36px}}

/* PEOPLE */
.people{background:var(--gray-50)}
.people .split{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-top:40px}
.col-h{font-family:var(--font-display);font-weight:500;font-size:26px;color:var(--coastal-900);margin-bottom:3px}
.col-sub{font-family:var(--font-ui);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--coastal-600);display:block;margin-bottom:20px}
.person{display:grid;grid-template-columns:54px 1fr;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--gray-200);transition:transform .3s var(--ease)}
.person:hover{transform:translateX(4px)}.person:last-child{border-bottom:0}
.person .ph{width:54px;height:54px;border-radius:50%;overflow:hidden;border:1px solid var(--gray-200)}
.person .ph img{width:100%;height:100%;object-fit:cover}
.person .pn{font-family:var(--font-ui);font-size:18px;font-weight:500;color:var(--coastal-900)}
.person .pr{font-family:var(--font-ui);font-size:14px;color:var(--gray-500);margin-top:2px}
.miles{margin-top:60px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--gray-200);padding-top:30px}
.miles .m{padding:0 24px;border-right:1px solid var(--gray-200)}.miles .m:first-child{padding-left:0}.miles .m:last-child{border-right:0}
.miles h4{font-family:var(--font-ui);font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--coastal-600);margin-bottom:14px}
/* The one link on the board: a small arrow after "Birthdays", to the month's post on Instagram. Same arrow as the home office tile. */
.miles h4 .miles-go{display:inline-block;vertical-align:-3px;margin-left:4px;color:var(--coastal-400);transition:color .25s var(--ease)}
.miles h4 .miles-go svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block}
.miles h4 .miles-go:hover{color:var(--coastal-600)}
.miles ul{list-style:none}
.miles li{display:flex;justify-content:space-between;gap:10px;font-family:var(--font-serif);font-size:17px;color:var(--gray-700);padding:5px 0}
.miles li .d{font-family:var(--font-ui);font-size:14px;color:var(--gray-400)}
/* A name that is a mailto: the same serif, a hairline that shows on hover, and the coastal blue. */
.miles li a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:color .2s var(--ease),border-color .2s var(--ease)}
.miles li a:hover,.miles li a:focus-visible{color:var(--coastal-600);border-bottom-color:var(--coastal-300)}
.miles .m.wide{grid-column:span 2}.miles .m.wide ul{columns:2;column-gap:48px}.miles .m.wide li{break-inside:avoid}
@media(max-width:860px){.people .split{grid-template-columns:1fr;gap:40px}.miles{grid-template-columns:1fr}.miles .m{border-right:0;border-bottom:1px solid var(--gray-200);padding:18px 0}.miles .m.wide{grid-column:auto}.miles .m.wide ul{columns:1}}

/* FOUNDATIONS */
.foundations{background:var(--coastal-50)}
.event{display:grid;grid-template-columns:90px 1fr auto;gap:26px;align-items:center;padding:24px 0;border-bottom:1px solid var(--gray-200);transition:background .3s}
.event:hover{background:rgba(255,255,255,.6)}
.event .date{text-align:center}
.event .date .mo{font-family:var(--font-ui);font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--coastal-600)}
.event .date .dy{font-family:var(--font-display);font-weight:500;font-size:42px;color:var(--coastal-900);line-height:1}
.event .info h4{font-family:var(--font-display);font-weight:500;font-size:24px;line-height:1.2;color:var(--coastal-900)}
/* 8px under the title, up from 4: the display face at 24px needs the room, and
   the training rows carry three-line details that 4px ran into the title. */
.event .info p{font-family:var(--font-ui);font-size:15px;line-height:1.5;color:var(--gray-500);margin-top:8px}
.event .cta{font-family:var(--font-ui);font-size:14px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:#fff;background:var(--coastal-600);padding:11px 22px;transition:all .2s var(--ease)}
.event .cta:hover{background:var(--sky-press);transform:translateY(-1px)}
/* A row with one destination is clickable end to end: the button's hit area
   stretches over the row, and the row's hover lights the button. */
.event.is-link{position:relative}
.event.is-link .cta::after{content:"";position:absolute;inset:0}
.event.is-link:hover .cta{background:var(--sky-press)}
/* No lift on these: a transform on the anchor would pull its stretched hit
   area back to the button under the pointer, and the hover would flicker. */
.event.is-link .cta:hover{transform:none}
/* The button and its condition, stacked and right aligned so the note hangs
   off the button rather than floating in the row. */
/* Stretched, not end-aligned: under a still the button runs the still's full
   width rather than sitting narrower and flush right beneath it. */
.event .cta-wrap{display:flex;flex-direction:column;align-items:stretch;gap:7px}
/* The button's hit area reaches up over the gap to the thumbnail, so there is no dead strip between the two. */
.event .cta-wrap .cta{position:relative}
.event .cta-wrap .cta::before{content:"";position:absolute;left:0;right:0;top:-7px;height:7px}
.event .cta-wrap .cta{text-align:center}
.event .cta-note{font-family:var(--font-ui);font-size:12px;color:var(--gray-400);
  text-align:right;line-height:1.4}
/* A row with no destination renders no third cell, so the track goes with it.
   Left in place it would hold its column gap and inset the title by 26px. */
.event.no-cta{grid-template-columns:90px 1fr}
.event.no-date{grid-template-columns:1fr auto}
/* "TBD" is a word, not a numeral: it cannot carry the 42px date figure. */
.event .date.tbd .dy{font-size:22px;letter-spacing:.5px;color:var(--coastal-600);padding-top:6px}
/* .no-cta outranks a bare .event, so it has to be named here too or the phone
   layout keeps the wide desktop date column. */
@media(max-width:700px){.event,.event.no-cta{grid-template-columns:64px 1fr}
  /* The button drops under the title, so its note comes with it and both
     align left rather than hanging off the right edge of a narrow row. */
  .event.no-date{grid-template-columns:1fr}
  .event .cta,.event .cta-wrap{grid-column:2}
  /* Full width on phones, every button in the section alike: a grid item
     stretches to its cell already, the one inside the flex wrap is told to. */
  .event .cta{text-align:center}
  .event.no-date .cta-wrap{grid-column:1}
  /* Capped at the still's own width, so the button under a recording matches
     the picture rather than running past it on a tablet. */
  .event .cta-wrap{align-items:stretch;max-width:340px;justify-self:center;width:100%}
  .event .cta-note{text-align:left}}

/* COMMUNITY */
.community{position:relative;color:#fff;min-height:80vh;display:flex;align-items:flex-end}
.community .bg{position:absolute;inset:0;overflow:hidden}.community .bg img{width:100%;height:100%;object-fit:cover}
.community .bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(37,47,74,.35),rgba(37,47,74,.55) 60%,rgba(37,47,74,.9))}
.community .inner{position:relative;z-index:2;padding-bottom:80px}
.community .quote{font-family:var(--font-display);font-weight:500;font-style:italic;font-size:clamp(26px,3.5vw,40px);line-height:1.3;max-width:18ch;margin:16px 0 28px}
.community .award{display:flex;gap:16px;align-items:center;border-top:1px solid rgba(167,196,216,.35);padding-top:22px}
.community .award .ap{width:60px;height:60px;border-radius:50%;overflow:hidden;border:1px solid rgba(167,196,216,.5)}
.community .award .ap img{width:100%;height:100%;object-fit:cover}
.community .award .lab{font-family:var(--font-ui);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--coastal-300);margin-bottom:5px}
.community .award .nm{font-family:var(--font-display);font-weight:500;font-size:24px;color:#fff}

/* FOOTER */
/* A standing offer under the training rows. sand-100 against the section's
   white, so it reads as a distinct thing rather than another calendar row,
   and the host leads: booking time with a person is the point. */
/* The gap matches the session row above it, which is `.event` at 26px. The rail
   itself stays wider than that row's 90px date column: at 90 the name breaks to
   two lines and the role to three, and a wrapped byline costs more than the few
   pixels of alignment it buys. */
.trn-offer{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:start;
  margin-top:38px;padding:28px;background:var(--sand-100);border:1px solid var(--gray-200);
  position:relative;transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
/* The whole card books the session, but the card is not the anchor. The button
   stays, and the key dates trick of wrapping the block would nest an anchor
   inside an anchor, which is invalid and lets the inner one eat the clicks.
   So the button's own hit area is stretched over the card instead: one link,
   one focus stop, one thing announced, and the card still looks untouched. */
.trn-offer-cta::after{content:'';position:absolute;inset:0;z-index:1}
.trn-offer:hover{border-color:var(--coastal-300);box-shadow:0 6px 24px -14px rgba(37,47,74,.45)}
/* The pointer is usually somewhere else on the card, so the button has to
   answer for the whole surface rather than only for itself. */
.trn-offer:hover .trn-offer-cta{background:var(--sky-press)}
.trn-offer:focus-within{border-color:var(--coastal-300)}
.trn-offer-who{display:flex;flex-direction:column;align-items:center;gap:10px;width:104px;text-align:center}
.trn-offer-who .ph{width:84px;height:84px;border-radius:50%;overflow:hidden;border:1px solid var(--gray-200);flex:none}
.trn-offer-who .ph img{width:100%;height:100%;object-fit:cover}
.trn-offer-who b{font-family:var(--font-display);font-weight:500;font-size:16px;color:var(--coastal-900);display:block;line-height:1.25}
.trn-offer-who span{font-family:var(--font-ui);font-size:11px;line-height:1.4;color:var(--gray-400);display:block;margin-top:3px}
.trn-offer-eyebrow{font-family:var(--font-ui);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--coastal-600);margin-bottom:8px}
.trn-offer-body h4{font-family:var(--font-display);font-weight:500;font-size:24px;color:var(--coastal-900)}
.trn-offer-body p{font-family:var(--font-ui);font-size:15px;line-height:1.65;color:var(--gray-600);margin-top:10px;max-width:64ch}
/* Right aligned, to agree with the session button above it. Both are the
   action on their row and the session's sits hard right, so this one sitting
   left under a full-width paragraph left a wide gap beside it and made the two
   read as unrelated. It lands on the card's content edge rather than the
   card's outer edge, which is 29px further out: that is the padding, and a
   button touching its own border would be the wrong kind of aligned.
   `width:fit-content` with `margin-left:auto` rather than `text-align`, so
   only the button moves and the paragraph above keeps its own alignment. */
.trn-offer-cta{display:block;width:fit-content;margin:18px 0 0 auto;font-family:var(--font-ui);font-size:14px;font-weight:600;
  letter-spacing:.5px;text-transform:uppercase;color:#fff;background:var(--coastal-600);
  padding:12px 24px;transition:all .2s var(--ease)}
/* No lift on this one, unlike the other buttons. Its ::after is the card's hit
   area and a pseudo-element moves with its owner, so translating the button on
   hover dragged the overlay a pixel out from under the cursor, which dropped
   the hover, which put it back: the cursor flickered between arrow and hand
   the whole time it sat over the card. Colour alone here, and the card's own
   border and shadow carry the rest of the feedback. */
.trn-offer-cta:hover{background:var(--sky-press)}
@media(max-width:620px){
  .trn-offer{grid-template-columns:1fr;gap:18px;padding:22px}
  .trn-offer-who{flex-direction:row;width:auto;text-align:left;align-items:center;gap:14px}
  .trn-offer-who .ph{width:56px;height:56px}
  .trn-offer-cta{display:block;width:100%;text-align:center}
}

/* ================================================================= REFERRAL
   The recruiting referral program. sand-100, so it breaks the dark run between
   vision and the feedback band rather than adding a third navy section, and a
   reader meets the payouts on a light ground where numbers read fastest.

   The payout leads each cell because that is what a reader is deciding on. The
   source artwork colour codes the four tiers; that is dropped, along with the
   icons, since colour coding four things that differ only by amount adds no
   information the amount does not already carry. */
.referral{background:var(--sand-100)}
.rf-lead{font-family:var(--font-serif);font-weight:300;font-size:20px;line-height:1.65;
  color:var(--gray-600);max-width:70ch;margin-top:14px}
.rf-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:34px;border:1px solid var(--gray-200);background:var(--white)}
.rf-tier{padding:26px 22px;border-right:1px solid var(--gray-200)}
.rf-tier:last-child{border-right:0}
.rf-tier .amt{font-family:var(--font-display);font-weight:500;font-size:38px;line-height:1;color:var(--coastal-900)}
.rf-tier .who{font-family:var(--font-ui);font-size:12px;font-weight:600;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--coastal-600);margin-top:12px}
.rf-tier .who .sub{display:block;font-weight:400;letter-spacing:1px;color:var(--gray-400);margin-top:4px}
.rf-tier p{font-family:var(--font-ui);font-size:14px;line-height:1.55;color:var(--gray-500);
  margin-top:12px;padding-top:12px;border-top:1px solid var(--gray-200)}
/* Same face as the Foundations Register and the back-to-school flyer buttons.
   Every "go do this" on the page wears one treatment. */
/* Centred, like the Instagram follow button. The wrapper holds nothing but
   the button, so centring the line is all it takes. */
.rf-actions{margin-top:30px;text-align:center}
.rf-cta{display:inline-block;font-family:var(--font-ui);font-size:14px;font-weight:600;
  letter-spacing:.5px;text-transform:uppercase;color:#fff;background:var(--coastal-600);
  padding:13px 26px;transition:all .2s var(--ease)}
.rf-cta:hover{background:var(--sky-press);transform:translateY(-1px)}
@media(max-width:560px){.rf-cta{display:block;width:100%;text-align:center}}
@media(max-width:900px){.rf-grid{grid-template-columns:1fr 1fr}
  .rf-tier:nth-child(2n){border-right:0}
  .rf-tier:nth-child(-n+2){border-bottom:1px solid var(--gray-200)}}
@media(max-width:560px){.rf-grid{grid-template-columns:1fr}
  .rf-tier{border-right:0;border-bottom:1px solid var(--gray-200)}
  .rf-tier:last-child{border-bottom:0}}

/* ================================================================= FEEDBACK
   Closing invitation, between vision and the footer. coastal-800, a shade up
   from the 900 on both sides, so the page ends in three readable steps rather
   than one navy block. Shorter than a normal section: it is a prompt, not a
   read. */
/* Same ground as the footer it sits on, so the two read as one closing block
   rather than a band with a seam across it. The section keeps its own padding,
   which is what still separates them. */
.feedback{background:var(--band);color:#fff;padding:64px 0}
/* The global em is coastal-700, which against this ground measures 1.95:1 and
   is effectively unreadable. coastal-300 takes it to 4.49:1, comfortably past
   the 3:1 that large text needs, and keeps the italic reading as blue rather
   than washing it out to near-white the way coastal-200 does. */
.feedback .sec-title{margin-top:14px}
.feedback .sec-title em{color:var(--coastal-300)}
.fb-body{display:flex;align-items:center;justify-content:space-between;gap:40px;margin-top:8px;flex-wrap:wrap}
.fb-copy{font-family:var(--font-ui);font-size:16px;line-height:1.65;color:var(--coastal-200);
  max-width:56ch;margin-top:12px}
.fb-cta{flex:none;font-family:var(--font-ui);font-size:14px;font-weight:600;letter-spacing:.5px;
  text-transform:uppercase;color:var(--band);background:#fff;padding:14px 26px;
  transition:background .2s var(--ease),color .2s var(--ease)}
.fb-cta:hover{background:var(--coastal-200);color:var(--coastal-900)}
@media(max-width:700px){
  .feedback{padding:52px 0}
  .fb-body{gap:26px}
  .fb-cta{width:100%;text-align:center}
}

.footer{background:var(--band);color:var(--coastal-200);padding:80px 0 calc(40px + env(safe-area-inset-bottom))}
.footer .grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px}
.footer .brand{font-family:var(--font-display);font-weight:500;font-size:24px;color:#fff;margin-bottom:14px}
/* The firm's stacked wordmark, light form from the design system, linking to
   the public site. It replaced the Coastal Connect text in September 2026. */
.footer .brand-logo{display:block;width:150px;margin-bottom:18px;transition:opacity .25s var(--ease)}
.footer .brand-logo img{display:block;width:100%;height:auto}
.footer .brand-logo:hover,.footer .brand-logo:focus-visible{opacity:.8}
.footer p{font-family:var(--font-ui);font-size:15px;line-height:1.7;color:var(--coastal-300);max-width:380px}
.footer h5{font-family:var(--font-ui);font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--coastal-400);margin-bottom:14px}
.footer .col a,.footer .col button{font-family:var(--font-ui);font-size:15px;line-height:normal;color:var(--coastal-200);display:block;padding:6px 0;cursor:pointer;transition:color .3s}
.footer .col a:hover,.footer .col button:hover{color:#fff}
.footer .bar{border-top:1px solid rgba(167,196,216,.2);margin-top:48px;padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-family:var(--font-ui);font-size:14px;color:var(--coastal-400)}
/* the issues page's footer: the bar alone, on the same navy */
.footer.is-bare{padding-top:32px}
.footer.is-bare .bar{border-top:0;margin-top:0;padding-top:0}
@media(max-width:780px){.footer .grid{grid-template-columns:1fr;gap:32px}
  /* One column on a phone: the stacked logo and the line under it sit centred rather than pinned to the left edge. */
  .footer .brand-logo{margin-left:auto;margin-right:auto}
  .footer .grid>div:first-child{text-align:center}.footer .grid>div:first-child p{margin-left:auto;margin-right:auto}
  /* and the rest of it centred with them, so the column does not change its mind halfway down */
  .footer .col{text-align:center}
  .footer .col a,.footer .col button{margin-left:auto;margin-right:auto;text-align:center}
  .footer .bar{justify-content:center;text-align:center}}
/* Scaled rather than resized, with no transition: a width change laid the bar
   out again on every scroll event and the 100ms easing had it trailing the
   scroll, which read as lag. A transform is composited and lands the same
   frame. */
/* The colour lives on a pseudo-element, not on the fixed line itself: Safari
   on iOS 26 tints its bar from any fixed element within a few pixels of the
   top that is at least 3px high and most of the width, which this is
   exactly, and the address bar went blue and stayed blue. Pseudo-elements
   are not read; the transform on the line still scales the colour. */
.progress{position:fixed;top:env(safe-area-inset-top);left:0;height:3px;width:100%;background:transparent;z-index:60;transform:scaleX(0);transform-origin:0 50%;will-change:transform}
.progress::before{content:'';position:absolute;inset:0;background:var(--coastal-600)}

/* PREVIOUS ISSUES DRAWER */
.drawer-overlay{position:fixed;inset:0;background:rgba(20,22,27,.55);backdrop-filter:blur(3px);z-index:80;opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
.drawer-overlay.open{opacity:1;pointer-events:auto}
/* The soft navy edge down the right side of the page. It began as the closed
   drawer's shadow leaking back from off-screen, and it read as part of the
   page, so it is kept as a thing of its own: the full height of the screen
   (lvh, so on a phone it runs under the bottom bar and into the footer rather
   than stopping at the bar), below the nav and the menu, never in the way of
   a tap. Only its shadow shows. */
/* Identical to the drawer that cast it: the same box, min(420px,90vw) wide,
   slid fully off the right edge by its own width, the same shadow, the same
   stacking. A thin box would spread far less ink; the fade at the page's
   edge is the edge of a wide shadow. Only the height differs, lvh instead
   of 100%, which is the whole point. It steps aside while the drawer is
   open, so the drawer casts its own shadow as it always did. */
body::after{content:'';position:fixed;top:0;right:0;width:min(420px,90vw);height:100vh;height:100lvh;transform:translateX(100%);box-shadow:-20px 0 60px rgba(37,47,74,.25);pointer-events:none;z-index:90}
body:has(.drawer.open)::after{opacity:0}
/* Hidden outright while closed, not merely slid off the right edge: parked
   there, its 60px shadow reached back onto the page as a faint navy band
   down the right side, the height of the viewport, ending at the phone's
   address bar. Visibility flips at once on open and only after the slide
   on close, so the motion is unchanged. */
.drawer{position:fixed;top:0;right:0;height:100%;width:min(420px,90vw);background:var(--white);z-index:90;transform:translateX(100%);visibility:hidden;transition:transform .5s var(--ease),visibility 0s linear .5s;box-shadow:-20px 0 60px rgba(37,47,74,.25);display:flex;flex-direction:column}
.drawer.open{transform:none;visibility:visible;transition:transform .5s var(--ease),visibility 0s}
.drawer .dhead{padding:calc(28px + env(safe-area-inset-top)) max(30px,env(safe-area-inset-right)) 20px 30px;border-bottom:1px solid var(--gray-200);display:flex;justify-content:space-between;align-items:center}
.drawer .dhead .t{font-family:var(--font-display);font-weight:500;font-size:24px;color:var(--coastal-900)}
.drawer .dclose{font-family:var(--font-ui);font-size:24px;color:var(--gray-400);cursor:pointer;background:none;border:0;line-height:1;-webkit-tap-highlight-color:transparent}
.drawer .dbody{padding:20px max(30px,env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) 30px;overflow-y:auto}
.issue-card{display:block;border:1px solid var(--gray-200);margin-bottom:16px;cursor:pointer;transition:all .3s var(--ease);overflow:hidden}
.issue-card:hover{box-shadow:0 12px 30px rgba(37,47,74,.12);transform:translateY(-2px)}
.issue-card.current{border-color:var(--coastal-600);border-width:2px}
.issue-card .ic-img{height:130px;overflow:hidden;position:relative}
.issue-card .ic-img img{width:100%;height:100%;object-fit:cover}
.issue-card .ic-img .cur-tag{position:absolute;top:10px;left:10px;font-family:var(--font-ui);font-size:10px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;background:var(--coastal-600);color:#fff;padding:4px 9px}
.issue-card .ic-body{padding:16px 18px}
.issue-card .ic-issue{font-family:var(--font-ui);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--coastal-600);margin-bottom:5px}
.issue-card .ic-title{font-family:var(--font-display);font-weight:500;font-size:21px;color:var(--coastal-900);line-height:1.15}
.issue-card .ic-meta{font-family:var(--font-ui);font-size:14px;color:var(--gray-500);margin-top:6px}


/* ---- MONTHLY AWARDS CARD GRID ---- */
.awards{background:var(--white)}
.awards-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:40px;border:1px solid var(--gray-200)}
.award-card{padding:26px 18px;text-align:center;border-right:1px solid var(--gray-200);border-bottom:1px solid var(--gray-200);transition:background .3s}
.award-card:hover{background:var(--sand-100)}
.award-card:nth-child(5n){border-right:0}
/* The final row only, marked by the component since it depends on the award
   count. This was `nth-child(n+6)`, which assumed ten awards in two rows; at
   thirteen it stripped the rule from the second row as well as the third. */
.award-card.last-row{border-bottom:0}
.award-card .aph{width:78px;height:78px;border-radius:50%;overflow:hidden;margin:0 auto 14px;border:1px solid var(--gray-200);background:var(--coastal-100)}
.award-card .aph img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
/* A team logo in any circular avatar: whole, centred, on white, with room at the edge. Faces keep their crop. */
.aph img.logo,.av img.logo,.ph img.logo,.ap img.logo{object-fit:contain;object-position:center;background:#fff;padding:14%;transform:scale(var(--logo-zoom,1));transform-origin:50% 50%}
.award-card .cat{font-family:var(--font-ui);font-size:9.5px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--coastal-600);line-height:1.4;margin-bottom:8px;min-height:24px}
.award-card .nm{font-family:var(--font-display);font-weight:500;font-size:20px;color:var(--coastal-900);line-height:1.1}
.award-card .val{font-family:var(--font-ui);font-size:13px;color:var(--gray-500);margin-top:5px}
@media(max-width:900px){.awards-grid{grid-template-columns:repeat(2,1fr)}.award-card{border-right:1px solid var(--gray-200)!important;border-bottom:1px solid var(--gray-200)!important}.award-card:nth-child(2n){border-right:0!important}}

/* ---- MONTH'S ANSWERS (dense multi-col lists) ---- */
.answers{background:var(--gray-50)}
.ans-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px 40px;margin-top:40px}
.ans-col h4{font-family:var(--font-ui);font-size:11px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--coastal-600);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--gray-200)}
.ans-col ol{list-style:none}
.ans-col li{display:grid;grid-template-columns:18px 1fr;gap:8px;font-family:var(--font-ui);font-size:14.5px;color:var(--gray-700);padding:5px 0}
.ans-col li .rk{color:var(--coastal-400);font-size:11px;font-weight:600}
.ans-col li .vv{color:var(--gray-400);font-size:13px;white-space:nowrap;font-weight:400;margin-left:4px}
.ans-col li.top{color:var(--coastal-900);font-weight:500}
@media(max-width:900px){.ans-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.ans-grid{grid-template-columns:1fr}}

/* ---- MOVERS: 6 production leaderboards ---- */
.movers{background:var(--coastal-50)}
.movers-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.mv-board{border:1px solid var(--gray-200);background:var(--white);padding:22px 22px 16px}
.mv-board .mh{border-bottom:1px solid var(--gray-200);padding-bottom:10px;margin-bottom:8px}
.mv-board .mt{font-family:var(--font-display);font-weight:500;font-size:21px;color:var(--coastal-900)}
.mv-board .ms{font-family:var(--font-ui);font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--coastal-600);margin-top:3px}
.mv-board ol{list-style:none}
.mv-board li{display:grid;grid-template-columns:18px 1fr;gap:9px;font-family:var(--font-ui);font-size:14.5px;color:var(--gray-700);padding:5.5px 0;border-bottom:1px solid var(--gray-100)}
.mv-board li:last-child{border-bottom:0}
.mv-board li .rk{color:var(--coastal-400);font-size:11px;font-weight:600}
.mv-board li.top{color:var(--coastal-900);font-weight:500}
@media(max-width:900px){.movers-grid{grid-template-columns:1fr}}

/* ---- ANNUAL TRIP ---- */
.trip{background:var(--band);color:#fff}
.trip .sec-title{color:#fff}.trip .sec-meta{color:var(--coastal-400)}
/* The facts are laid over the foot of the picture. The scrim is a gradient
   rather than a flat wash, so the vineyard stays a photograph and only the
   band under the type darkens, and it stops around two thirds up rather than
   reaching the top edge. `pointer-events:none` because it covers the image and
   would otherwise sit between the cursor and anything beneath it. */
.trip .hero-img{position:relative;margin-top:30px;overflow:hidden}
/* The frame grows with the screen, 360px on a laptop to 500px on a wide
   monitor, so the picture keeps its composition rather than being sliced to
   a band: at a fixed 340px on a wide screen the Napa photograph showed only
   the vineyard rows, and its sunset and hills, the point of it, were cut off.
   Anchored low rather than centred, so the rows stay in the frame under the
   caption and the sky fills what the height allows.
   Desktop only in effect. On a phone the box is taller than the image is wide
   in proportion, so cover crops the sides instead and this has nothing to do. */
.trip .hero-img img{display:block;width:100%;height:clamp(400px,30vw,520px);object-fit:cover;object-position:50% 72%;
  transition:transform .7s var(--ease)}
/* The scrim and the caption sit on `.hero-img`, so they hold still while
   only the photograph drifts. 1.03 rather than the cards' 1.06: these are
   large images and the same ratio reads as a lurch at this size. */
.trip .hero-img:hover img{transform:scale(1.03)}
.trip .hero-img::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(21,28,44,.88),rgba(21,28,44,.55) 30%,rgba(21,28,44,0) 66%)}
.trip .facts{position:absolute;left:0;right:0;bottom:0;z-index:1;
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:0}
/* Hairlines in white at low alpha, not the old blue: on the photograph the
   blue border disappeared into whatever happened to be behind it. */
.trip .facts .f{padding:20px 22px;border-right:1px solid rgba(255,255,255,.22)}
.trip .facts .f:last-child{border-right:0}
.trip .facts .fl{font-family:var(--font-ui);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--coastal-400);margin-bottom:6px;
  display:flex;align-items:center;gap:6px}
/* 1em, so it is exactly the label's size, and currentColor so it is exactly
   the label's colour. Stroke only: at 10px a filled mark turns into a blob. */
.trip .facts .fl .fi{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.trip .facts .fv{font-family:var(--font-display);font-weight:500;font-size:20px;color:#fff}
.trip .elig{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:34px}
.trip .elig h5{font-family:var(--font-ui);font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--coastal-300);margin-bottom:12px}
.trip .elig p{font-family:var(--font-serif);font-weight:300;font-size:16px;line-height:1.6;color:var(--coastal-100);margin-bottom:8px}
.trip .elig .rule{font-family:var(--font-ui);font-size:15px;color:#fff;margin-bottom:6px}
.trip .elig .rule b{color:var(--coastal-300);font-weight:600}
.trip .pace{margin-top:40px}
.trip .pace-h{font-family:var(--font-display);font-weight:500;font-size:26px;color:#fff;margin-bottom:6px}
.trip .pace-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;margin-top:16px}
.trip .pace-grid .sub{font-family:var(--font-ui);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--coastal-400);margin:14px 0 6px;grid-column:1/-1}
.trip .pace-row{display:grid;grid-template-columns:22px 32px 1fr;gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.trip .pace-row .rk{font-family:var(--font-ui);font-size:12px;font-weight:600;color:var(--coastal-400)}
.trip .pace-row .av{width:32px;height:32px;border-radius:50%;overflow:hidden;border:1px solid rgba(167,196,216,.3)}
.trip .pace-row .av img{width:100%;height:100%;object-fit:cover}
.trip .pace-row .nm{font-family:var(--font-ui);font-size:15px;color:#fff}
.trip .note{font-family:var(--font-ui);font-size:11.5px;color:var(--coastal-400);margin-top:16px}
@media(max-width:820px){
  .trip .elig,.trip .pace-grid{grid-template-columns:1fr}
  /* Stacked, because three across a phone puts "Hotel Yountville · Napa Valley"
     on four lines. That makes the band three rows instead of one, so it needs a
     taller picture under it and a scrim that reaches the top of it: at the
     desktop gradient the upper rows sat on open sky and the labels vanished. */
  .trip .facts{grid-template-columns:1fr}
  .trip .hero-img{max-height:none;height:400px}
  .trip .hero-img img{height:400px}
  .trip .hero-img::after{background:linear-gradient(to top,rgba(21,28,44,.92),
    rgba(21,28,44,.74) 44%,rgba(21,28,44,0) 80%)}
  /* Rules run between rows now, not between columns. */
  .trip .facts .f{padding:13px 20px;border-right:0;border-bottom:1px solid rgba(255,255,255,.16)}
  .trip .facts .f:last-child{border-bottom:0}
  .trip .facts .fv{font-size:18px}
}

/* ---- CONFERENCES (destination cards) ---- */
.confs{position:relative;color:#fff;background:var(--band)}
.confs .bg{position:absolute;inset:0;overflow:hidden}.confs .bg img{width:100%;height:100%;object-fit:cover;opacity:.18}
.confs .bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(37,47,74,.88),rgba(37,47,74,.94))}
.confs .inner{position:relative;z-index:2}
.confs .sec-title{color:#fff}.confs .sec-meta{color:var(--coastal-400)}
.conf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.conf-card{border:1px solid rgba(167,196,216,.2);overflow:hidden;transition:transform .3s var(--ease)}
.conf-card:hover{transform:translateY(-4px)}
/* A 1400x949 photo into a 150px band keeps about a third of its height, and
   centred that third is the middle. These are buildings and landscapes, where
   the subject sits in the upper half, so a centre crop took the roofline off
   Atlantis. Anchored to the top instead. */
.conf-card .ci{height:150px;overflow:hidden}
.conf-card .ci img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.conf-card .cb{padding:18px 20px}
.conf-card .tier{font-family:var(--font-ui);font-size:9.5px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--coastal-300);background:rgba(107,149,186,.2);display:inline-block;padding:3px 8px;margin-bottom:10px}
.conf-card .cn{font-family:var(--font-display);font-weight:500;font-size:24px;color:#fff}
.conf-card .cl{font-family:var(--font-ui);font-size:14px;color:var(--coastal-300);margin-top:3px}
.conf-card .cd{font-family:var(--font-ui);font-size:14px;color:var(--coastal-400);margin-top:10px;border-top:1px solid rgba(167,196,216,.15);padding-top:10px}
/* Sits under the dates as a footnote to them, so it takes no rule of its own
   and drops a step in size and contrast. It qualifies the line above it rather
   than adding a fourth thing to the card. */
.conf-card .cdn{font-family:var(--font-ui);font-size:12px;line-height:1.45;color:var(--coastal-400);opacity:.75;margin-top:6px}
/* A card that is a link: the anchor reset, the calendar mark before the dates, and the Compass line at the foot in the home office tile's manner. */
a.conf-card{display:flex;flex-direction:column;color:inherit;text-decoration:none}
.conf-card .cd svg{width:13px;height:13px;vertical-align:-2px;margin-right:6px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;color:var(--coastal-300)}
.conf-card{display:flex;flex-direction:column}.conf-card .cb{display:flex;flex-direction:column;flex:1}.conf-card .csp{flex:1}
/* The arrow alone, in a small ring at the foot's right, no rule above it: the ring makes it read as a control rather than a stray glyph, and it fills on hover. */
.conf-card .cgo{display:flex;justify-content:flex-end;margin-top:16px;color:var(--coastal-300)}
.conf-card .cgo svg{width:30px;height:30px;padding:8px;box-sizing:border-box;border:1px solid rgba(167,196,216,.35);border-radius:50%;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease)}
a.conf-card:hover .cgo,a.conf-card:focus-visible .cgo{color:#fff}
a.conf-card:hover .cgo svg,a.conf-card:focus-visible .cgo svg{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.75);transform:translate(1px,-1px)}
a.conf-card:focus-visible{outline:2px solid var(--coastal-400);outline-offset:3px}
@media(max-width:820px){.conf-grid{grid-template-columns:1fr}}
/* The threshold ranges link. Outlined rather than solid: the cards above are
   the thing to want, and a PDF of qualification bands should not compete with
   them. On a dark ground, so it borrows the nav button's treatment. */
.conf-doc{margin-top:34px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.conf-doc-cta{font-family:var(--font-ui);font-size:13px;font-weight:600;letter-spacing:.5px;
  text-transform:uppercase;color:#fff;border:1px solid rgba(255,255,255,.45);padding:11px 22px;
  transition:background .2s var(--ease),border-color .2s var(--ease)}
.conf-doc-cta:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.8)}
.conf-doc-note{font-family:var(--font-ui);font-size:13px;line-height:1.5;color:var(--coastal-300);max-width:52ch}
@media(max-width:620px){
  .conf-doc{gap:12px}
  .conf-doc-cta{width:100%;text-align:center}
}

/* ---- QUALIFIERS (tiered ranked list) ---- */
.quals{background:var(--band);color:#fff}
.quals .sec-title{color:#fff}.quals .sec-meta{color:var(--coastal-400)}
/* Was the only lead paragraph on the page with no line-height and no space
   above it, so it sat tight under its title at 18px while every other section
   ran 20 to 22px on a 1.6 leading. Brought in line with those. */
.quals .intro{font-family:var(--font-serif);font-weight:300;font-size:20px;line-height:1.6;
  color:var(--coastal-100);max-width:900px;margin-top:14px;margin-bottom:34px}
.qual-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
.qual-grid .sub{font-family:var(--font-ui);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--coastal-400);margin:18px 0 6px;grid-column:auto}
.qual-row{display:grid;grid-template-columns:22px 30px 1fr;gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.qual-row .rk{font-family:var(--font-ui);font-size:11px;font-weight:600;color:var(--coastal-400)}
.qual-row .av{width:30px;height:30px;border-radius:50%;overflow:hidden;border:1px solid rgba(167,196,216,.3)}
.qual-row .av img{width:100%;height:100%;object-fit:cover}
.qual-row .nm{font-family:var(--font-ui);font-size:14.5px;color:#fff}
@media(max-width:700px){.qual-grid{grid-template-columns:1fr}}

/* ---- LEADERS RECAP (photo grid) ---- */
.recap{background:var(--white)}
.recap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:36px;grid-auto-rows:200px}
.recap-grid .ph{overflow:hidden}
.recap-grid .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.recap-grid .ph:hover img{transform:scale(1.05)}
.recap-grid .tall{grid-row:span 2}
@media(max-width:700px){.recap-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}}

/* ---- SERVICE AWARD (3 winners) ---- */
.service{background:var(--sand-100)}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.svc-card{border:1px solid var(--gray-200);background:var(--white);padding:30px 26px;text-align:center}
.svc-card.first{background:var(--band);border-color:var(--band)}
.svc-card .place{font-family:var(--font-display);font-weight:500;font-style:italic;font-size:18px;color:var(--coastal-600);margin-bottom:14px}
.svc-card.first .place{color:var(--coastal-300)}
.svc-card .ph{width:96px;height:96px;border-radius:50%;overflow:hidden;margin:0 auto 16px;border:1px solid var(--gray-200)}
.svc-card .ph img{width:100%;height:100%;object-fit:cover}
.svc-card .nm{font-family:var(--font-display);font-weight:500;font-size:24px;color:var(--coastal-900)}
.svc-card.first .nm{color:#fff}
.svc-card .amt{font-family:var(--font-ui);font-size:14px;font-weight:600;color:var(--coastal-600);margin-top:5px}
.svc-card.first .amt{color:var(--coastal-300)}
.svc-card .cause{font-family:var(--font-ui);font-size:14px;color:var(--gray-500);margin-top:14px;border-top:1px solid var(--gray-200);padding-top:14px}
.svc-card.first .cause{color:var(--coastal-200);border-color:rgba(167,196,216,.2)}
@media(max-width:820px){.svc-grid{grid-template-columns:1fr}}

/* ---- HEADSHOTS CTA ---- */
.headshot-cta{background:var(--coastal-50)}
.hc-inner{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:center;background:var(--white);border:1px solid var(--gray-200);padding:44px 48px}
.hc-inner h3{font-family:var(--font-display);font-weight:500;font-size:32px;color:var(--coastal-900);line-height:1.1}
.hc-inner p{font-family:var(--font-serif);font-weight:300;font-size:17px;line-height:1.6;color:var(--gray-600);margin-top:12px}
.hc-btn{font-family:var(--font-ui);font-size:15px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;background:var(--coastal-600);color:#fff;padding:16px 28px;text-align:center;transition:all .2s var(--ease)}
.hc-btn:hover{background:var(--sky-press);transform:translateY(-1px)}
@media(max-width:700px){.hc-inner{grid-template-columns:1fr;gap:24px;padding:32px}}

/* ---- REMINDER (a slim card just above Firm training) ---- */
/* Top padding only when training follows: the card hands its bottom gap to
   training's trimmed top padding; in a month without training it keeps its
   own. Without an accent the card is the training calendar card's recipe
   (coastal-50, coastal-300 hairline); with one, the ground and the edge are
   light tints of the partner's colour, so the card reads as theirs and the
   wordmark sits on a ground drawn for it. */
.reminder{background:var(--white);padding:64px 0 56px}
.reminder:has(+.training){padding-bottom:0}
.reminder+.training{padding-top:56px}
.rem-inner{display:grid;grid-template-columns:auto 1fr auto;gap:18px 36px;align-items:center;background:var(--coastal-50);border:1px solid var(--coastal-300);box-shadow:0 8px 24px rgba(37,47,74,.06);padding:24px 30px 24px 28px;color:inherit;text-decoration:none}
.rem-inner[style*="--rem-accent"]{background:color-mix(in srgb,var(--rem-accent) 11%,#fff);border-color:color-mix(in srgb,var(--rem-accent) 38%,#fff)}
/* The whole card is the link: it lifts like the conference cards, and the
   button inside answers the hover so the reader knows where the click goes. */
a.rem-inner{transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
a.rem-inner:hover,a.rem-inner:focus-visible{transform:translateY(-3px);box-shadow:0 18px 40px rgba(37,47,74,.12)}
a.rem-inner:focus-visible{outline:2px solid var(--coastal-400);outline-offset:3px}
.rem-logo{display:block;width:140px;height:auto}
.rem-inner .overline{white-space:nowrap}
.rem-inner h3{font-family:var(--font-display);font-weight:500;font-size:22px;line-height:1.15;color:var(--coastal-900)}
.rem-inner p{font-family:var(--font-serif);font-weight:300;font-size:16px;line-height:1.5;color:var(--gray-600);margin-top:6px}
.rem-inner p+p{margin-top:3px}
/* The day in the UI face at 600, the one face this site loads with a real bold:
   Minion and Marlide are single-weight files, so a bolder serif would be a
   synthesized smear, not a weight. */
.rem-inner p b{font-family:var(--font-ui);font-weight:600;font-size:14px;letter-spacing:.2px;color:var(--coastal-900)}
.rem-btn{justify-self:start;display:inline-flex;align-items:center;gap:10px;font-family:var(--font-ui);font-size:12px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:#fff;background:var(--rem-btn,var(--band-2));padding:12px 18px;white-space:nowrap;transition:background .2s,transform .2s var(--ease)}
.rem-btn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease)}
a.rem-inner:hover .rem-btn,a.rem-inner:focus-visible .rem-btn{background:color-mix(in srgb,var(--rem-btn,var(--band-2)) 78%,#000)}
a.rem-inner:hover .rem-btn svg,a.rem-inner:focus-visible .rem-btn svg{transform:translate(1px,-1px)}
/* Mid widths: the button drops under the text, at the left, so the lines keep
   their measure. Phones stack all three. */
@media(max-width:1040px){.rem-inner{grid-template-columns:auto 1fr;gap:14px 28px}.rem-btn{grid-column:2}}
@media(max-width:640px){.rem-inner{grid-template-columns:1fr;gap:14px;padding:22px 24px}.rem-logo{width:124px}.rem-btn{grid-column:1}.reminder{padding:48px 0 44px}.reminder:has(+.training){padding-bottom:0}.reminder+.training{padding-top:48px}}

/* ---- HOME OFFICE (bulletin + key dates) ---- */
.homeoffice{background:var(--sand-100)}
.ho-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:48px;margin-top:36px;align-items:start}
/* A lead card above the grid, then the grid at the same distance below it as the title would have given. */
.homeoffice .vc-cards+.ho-grid{margin-top:48px}
/* A long bulletin outruns the dates; the tile keeps it company as the reader
   scrolls, stopping under the nav. Only where the two sit side by side. */
@media(min-width:821px){.ho-grid .ho-dates{position:sticky;top:calc(88px + env(safe-area-inset-top))}}
.ho-item{display:grid;grid-template-columns:24px 1fr;gap:12px;padding:14px 0;border-bottom:1px solid var(--gray-200)}
.ho-item .rk{font-family:var(--font-ui);font-size:11px;font-weight:600;color:var(--coastal-400)}
.ho-item h4{font-family:var(--font-ui);font-size:15px;font-weight:600;color:var(--coastal-900);line-height:1.35;margin-bottom:4px}
.ho-item p{font-family:var(--font-serif);font-weight:300;font-size:14.5px;line-height:1.55;color:var(--gray-600)}
/* One condition for every referral tier, said once under the strip rather
   than repeated in each card. */
.rf-note{font-family:var(--font-ui);font-size:13px;line-height:1.55;color:var(--gray-500);margin-top:18px;max-width:64ch}
.ho-item h4 a{color:inherit;border-bottom:1px solid var(--coastal-300);transition:border-color .2s}
.ho-item h4 a:hover,.ho-item h4 a:focus-visible{border-color:currentColor}
.ho-item p a{color:var(--coastal-800);border-bottom:1px solid var(--coastal-300);transition:color .2s,border-color .2s}
.ho-item p a:hover,.ho-item p a:focus-visible{color:var(--coastal-900);border-color:currentColor}
.ho-dates{border:1px solid var(--gray-200);background:var(--white);padding:24px 26px}
/* The whole tile as a link, with no button. It still needs to say it is
   clickable, so the border and heading warm on hover and focus rather than
   the tile moving: a calendar that jumps under the cursor reads as a card,
   not a list. `display:block` because an anchor is inline by default and the
   tile would collapse around its text. */
.ho-dates.is-link{display:block;position:relative;color:inherit;text-decoration:none;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
/* Label and arrow, what marks the tile as a link. It closes the list rather
   than sitting in a corner: in normal flow after the last date, so it can
   never overlap a row however many dates a month runs, and it reads as the
   step you take after the list rather than a mark floating over it. */
.ho-dates.is-link .ho-go{display:flex;align-items:center;justify-content:flex-end;gap:6px;
  margin-top:20px;padding-top:14px;border-top:1px solid var(--gray-200);
  font-family:var(--font-ui);font-size:10px;font-weight:600;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--coastal-400);
  transition:color .25s var(--ease)}
.ho-dates.is-link .ho-go svg{width:11px;height:11px;flex:none;
  fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .25s var(--ease)}
.ho-dates.is-link:hover .ho-go,.ho-dates.is-link:focus-visible .ho-go{color:var(--coastal-700)}
.ho-dates.is-link:hover .ho-go svg,.ho-dates.is-link:focus-visible .ho-go svg{
  transform:translate(1px,-1px)}
.ho-dates.is-link:hover,.ho-dates.is-link:focus-visible{
  border-color:var(--coastal-300);box-shadow:0 6px 24px -14px rgba(37,47,74,.45)}
.ho-dates.is-link:hover .dh,.ho-dates.is-link:focus-visible .dh{color:var(--coastal-700)}
.ho-dates.is-link:focus-visible{outline:2px solid var(--coastal-400);outline-offset:3px}
.ho-dates .dh{font-family:var(--font-display);font-weight:500;font-size:22px;color:var(--coastal-900);margin-bottom:14px}
.ho-dates .mo{font-family:var(--font-ui);font-size:10px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--coastal-600);margin:14px 0 6px}
.ho-dates .dt{display:grid;grid-template-columns:52px 1fr;gap:10px;font-family:var(--font-ui);font-size:14px;color:var(--gray-700);padding:4px 0}
.ho-dates .dt .d{color:var(--coastal-700);font-weight:600}
/* An entry's own link, when the tile is not the link: the row's ink with a
   coastal hairline, the same treatment a link takes inside a training note. */
.ho-dates .dt a{color:inherit;border-bottom:1px solid var(--coastal-300);transition:color .2s,border-color .2s}
.ho-dates .dt a:hover,.ho-dates .dt a:focus-visible{color:var(--coastal-900);border-color:currentColor}
@media(max-width:820px){.ho-grid{grid-template-columns:1fr}}

/* ---- INSTAGRAM ---- */
.insta{background:var(--white)}
.insta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:36px}
.insta-tile{position:relative;aspect-ratio:1;overflow:hidden;cursor:pointer}
.insta-tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.insta-tile:hover img{transform:scale(1.05)}
/* Centred and at the size a player draws it, not tucked in a corner: in the
   corner it read as a decoration and readers did not take the tile for a reel. */
.insta-tile .ig-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;
  background:rgba(37,47,74,.62);border:1.5px solid rgba(255,255,255,.85);box-shadow:0 6px 22px rgba(0,0,0,.28);display:flex;align-items:center;justify-content:center;pointer-events:none;
  transition:transform .3s var(--ease),background .3s var(--ease)}
.insta-tile .ig-play svg{width:26px;height:26px;fill:#fff;display:block}
.insta-tile:hover .ig-play{transform:translate(-50%,-50%) scale(1.06);background:rgba(37,47,74,.85)}
.insta-tile .ov{position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(37,47,74,.7));display:flex;align-items:flex-end;padding:18px}
.insta-tile .ov span{font-family:var(--font-ui);font-size:14px;color:#fff;line-height:1.4}
@media(max-width:700px){.insta-grid{grid-template-columns:1fr 1fr}}

/* ADDITIONS TO THE PORTED SYSTEM
   Two, both required rather than stylistic.

   1. --gray-100 is referenced once by .mv-board li but was never declared in
      the reference, so those separators fell back to currentColor and rendered
      dark. Declaring it restores the intended hairline.
   2. The monogram fallback the spec calls for. It fills whatever circular
      container it sits in, so it inherits the existing avatar sizing and the
      circle itself. Muted on light grounds, muted on dark, never loud. */
:root{--gray-100:#f5f5f5}
.mono{display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  font-family:var(--font-ui);font-weight:600;letter-spacing:.5px;
  background:var(--coastal-100);color:var(--coastal-700);font-size:13px}
.recognition .mono,.trip .mono,.quals .mono,.svc-card.first .mono{
  background:var(--band-2);color:var(--coastal-300)}
.ll .av .mono{font-size:13px}
.award-card .aph .mono{font-size:26px}
.person .ph .mono{font-size:18px}
.svc-card .ph .mono{font-size:32px}
.trip .pace-row .av .mono,.qual-row .av .mono{font-size:11px}
.letter .body .sig{height:88px;width:auto;display:block;margin:20px 0 6px}
/* One signature, not three. 88px is right for the partner block, where the
   height covers three names side by side; a single one at that size stops
   being a sign-off. */
.letter .body .sig.sig-sm{height:52px;margin:18px 0 2px}
/* Three partners, each named under their own hand. The three files share a
   scale and a y window, so one height here keeps their real relative sizes
   and puts them on the same baseline; nothing needs aligning by hand.
   `min-width` on the column, not the image: the signatures are 58 to 66px
   wide at this height and the names are wider, so the rules would come out
   ragged if the image set the width. A floor makes all three rules match. */
.letter .signatories{display:flex;flex-wrap:wrap;gap:34px;margin:24px 0 0}
.letter .signatories .who{display:flex;flex-direction:column;justify-content:flex-end;min-width:94px}
/* `align-self` matters here. The column is a flex container, so its cross axis
   is horizontal and the default stretch overrides `width:auto`, pulling every
   signature out to the column floor and squashing three different hands into
   one width. The name keeps stretching, which is what makes the rules match. */
.letter .signatories img{height:76px;width:auto;align-self:flex-start;display:block;margin:0 0 10px}
.letter .signatories .nm{font-family:var(--font-display);font-weight:500;font-size:19px;line-height:1;
  color:var(--coastal-900);border-top:1px solid var(--sand-300);padding-top:9px}
.letter .sign.org-only{margin-top:14px}
/* Three across has to survive the narrowest phone or it wraps two-and-one,
   which reads as a typo rather than a layout. At 375px the wrap leaves 335px,
   and these numbers come to 284px, so the row holds. */
@media(max-width:560px){
  .letter .signatories{gap:22px}
  .letter .signatories .who{min-width:80px}
  .letter .signatories img{height:62px}
  .letter .signatories .nm{font-size:17px;padding-top:7px}
}
.quals .board-head{padding-top:34px}

/*  3. .award-card .aph and .svc-card .ph are spans given a width, height and
      50% radius, but they sit in plain blocks rather than grid rows, so they
      stay display:inline and the browser discards all three. The photo then
      fills the whole card. The four avatar containers that DO render as
      circles (.ll .av, .person .ph, .pace-row .av, .qual-row .av) only work
      because each is a grid item, which blockifies it. Same bug is present in
      the reference build; this restores the intended circles. */
.award-card .aph,.svc-card .ph{display:block}
.award-card .aph.team{background:#fff}
.award-card .aph.team img{object-fit:contain;padding:12px}
/*  4. Avatars load lazily, and .ll .av was the only container with a fill, so
      the others flashed as empty rings while scrolling. Same fill, so an
      in-flight avatar reads as a placeholder rather than a gap. */
.trip .pace-row .av,.qual-row .av{background:var(--band-2)}
.person .ph,.award-card .aph,.svc-card .ph{background:var(--coastal-100)}
/*  5. Section-level draft mark, for a month whose figures are not yet final.
      Deliberately quiet: same muted treatment the draft subcards already use,
      never a loud tag. */
.draft-mark{font-family:var(--font-ui);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--coastal-600);margin-left:12px;opacity:.75;vertical-align:middle}
.draft-note{font-family:var(--font-ui);font-size:14px;color:var(--gray-400);margin-top:14px;line-height:1.6}
.drawer-msg{font-family:var(--font-ui);font-size:15px;color:var(--gray-500);line-height:1.6}

/* ============================================================ DRAFT MARKER
   One visual flag for anything awaiting real data: a thin coastal rule down
   the left edge of the section or block. Driven entirely by `drafts` and
   `draft: true` in the issue JSON, so clearing one is a data edit.
   Deliberately quiet next to the design, but continuous down the page edge so
   a scroll pass catches every one. */
.is-draft{position:relative}
.is-draft::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--coastal-300);z-index:4;pointer-events:none}
/* On navy grounds the same rule needs a touch more presence. */
.recognition.is-draft::before,.trip.is-draft::before,.quals.is-draft::before,
.confs.is-draft::before,.vision.is-draft::before,.service.ground-navy.is-draft::before{
  background:var(--coastal-400)}
/* Blocks sit inside padded parents, so their rule hugs the block itself. */
.event.is-draft,.subcard.is-draft,.insta-tile.is-draft,.ph.is-draft{padding-left:14px}

/* GROUPED EVENTS
   One card per programme instead of one row per date. The heading carries the
   programme name so the rows do not have to repeat it, which is the whole
   point: thirteen flat rows said "Victory Campaign Roadshow" five times and
   "Walk to End Alzheimer's" five more.

   `wide` spans both columns. The roadshow rows carry a time and two hosts and
   need the width; the two Foundation programmes are short rows and sit side by
   side under it, which is also the split the section is named after. */
/* No `align-items:start`: the two Foundation cards share a row and sizing each
   to its own content left one visibly shorter than the other. Stretching them
   is the default, and the card is a column so the rows take up the slack. */
.ev-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:30px}
.ev-card{background:#fff;border:1px solid var(--gray-200);display:flex;flex-direction:column}
.ev-card .ev-rows{flex:1 1 auto}
.ev-card.wide{grid-column:1/-1}
/* The label sits on the photo, so it needs a floor under it at every crop. The
   scrim is a gradient rather than a flat wash: an even tint over the whole
   frame would dull the picture to protect one line of type at the bottom. */
.ev-head{position:relative;display:flex;align-items:flex-end;background:var(--band);
  min-height:58px;overflow:hidden}
.ev-head.has-img{min-height:136px}
/* The wide card runs the full width, so the same 136px makes a 6.9:1 slot and
   throws away half the picture: whatever is in the crop gets sliced through
   the middle. Taller brings it to about 3.9:1, close to the crop's own 3.59,
   so the composition survives. Above the breakpoint only. Stacked on a phone
   the card is 335px, where this height would crop the sides instead. */
@media(min-width:821px){.ev-card.wide .ev-head.has-img{min-height:240px}}
.ev-head img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease)}
.ev-head.has-img::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(24,32,50,.82),rgba(24,32,50,.18) 64%,rgba(24,32,50,.04))}
.ev-head .lb{position:relative;z-index:1;font-family:var(--font-ui);font-size:12px;font-weight:600;
  letter-spacing:2.2px;text-transform:uppercase;color:#fff;padding:15px 22px}
.ev-rows{padding:2px 22px 4px}
/* The date column is sized to the longest string it can hold, "Mon, Aug 24",
   and told not to wrap. A date broken over two lines stops looking like a
   date, and the weekday is the part that would break off. */
.ev-row{display:grid;grid-template-columns:112px 1fr;gap:18px;padding:15px 0;
  border-bottom:1px solid var(--gray-200)}
.ev-row.last{border-bottom:0}
.ev-row .dt{font-family:var(--font-display);font-weight:500;font-size:20px;line-height:1.25;
  color:var(--coastal-900);white-space:nowrap}
/* A date that is not set yet is not a date, so it does not get the numeral
   treatment. Same call the flat rows made, kept for consistency. */
.ev-row.tbd .dt{font-family:var(--font-ui);font-size:12px;font-weight:600;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--coastal-600);padding-top:4px}
.ev-row .pl{display:block;font-family:var(--font-serif);font-weight:300;font-size:17px;
  line-height:1.5;color:var(--coastal-900)}
.ev-row .mt{display:block;font-family:var(--font-ui);font-size:13px;color:var(--gray-500);margin-top:5px}
/* A row-level sign-up. Underlined rather than a button: a button on one row of
   four would outrank the card's own heading and read as the programme's CTA,
   which is exactly the thing it must not claim to be. */
.ev-row .rl{display:inline-block;margin-top:7px;font-family:var(--font-ui);font-size:13px;
  font-weight:600;letter-spacing:.4px;color:var(--coastal-700);
  border-bottom:1px solid var(--coastal-300);padding-bottom:1px;transition:border-color .2s var(--ease)}
.ev-row .rl:hover{border-bottom-color:var(--coastal-700)}
/* The sign-up spans the card rather than sitting inline with its note: it is
   the one action in the section and a short button beside grey text read as a
   footnote. The deadline goes under it, where it qualifies the button instead
   of competing with it. A note with no button, which is how the walks card
   explains its missing links, stays left and unstyled. */
/* A partner's colour, scoped to its card. The walk takes the Alzheimer's
   purple; a card without one keeps coastal. */
.ev-card{--ev-accent:var(--coastal-600)}
/* A themed section: the partner's colour on the ground at four percent and on
   the title's accent word, and inherited by the cards. */
.foundations.themed{background:color-mix(in srgb,var(--ev-accent) 4%,var(--white))}
.foundations.themed .sec-title em{color:var(--ev-accent)}
.foundations.themed .ev-card{--ev-accent:inherit}
.foundations.themed{position:relative;overflow:hidden}
/* The flowers are placed from the content column, not the screen. The section
   is full bleed, so on a wide monitor the garden sat at the far left of the
   page and the pinwheel at the far right, nowhere near the words. max() keeps
   the phone offsets until the column is narrower than the screen, then holds
   each flower at the column's edge (half of --maxw is 590px). */
.ev-flower{pointer-events:none}
/* On the title row, to the right of the short title and under the meta line. */
.ev-flower.a{position:absolute;z-index:0;top:142px;right:max(44px,calc(50% - 546px));width:62px;transform:rotate(8deg)}
.ev-garden{position:absolute;z-index:0;left:max(18px,calc(50% - 572px));bottom:-4px;display:flex;align-items:flex-end;gap:2px}
.ev-garden .ev-flower{width:58px}
.ev-garden .ev-flower:nth-child(2){width:66px}
.ev-garden .ev-flower:nth-child(3){width:52px}
.foundations.themed .wrap{position:relative;z-index:1}
@media(max-width:820px){.ev-flower.a{top:150px;width:54px}}
@media(max-width:700px){.ev-flower.a{width:50px;right:14px;top:28px}.ev-garden .ev-flower{width:40px}.ev-garden .ev-flower:nth-child(2){width:46px}.ev-garden .ev-flower:nth-child(3){width:36px}}
.ev-intro{padding:20px 22px 4px}
.ev-intro h4{font-family:var(--font-display);font-weight:500;font-size:24px;line-height:1.2;color:var(--coastal-900);margin-bottom:8px}
.ev-intro p{font-family:var(--font-serif);font-weight:300;font-size:17px;line-height:1.6;color:var(--gray-600)}
.ev-row .rl{color:var(--ev-accent);border-bottom-color:var(--ev-accent)}
/* A row's own button, at the right, in the card's accent. */
.ev-row.has-link{grid-template-columns:112px 1fr auto}
/* A team not yet formed: the button greyed and still, on any accent. */
.ev-row .rb.soon{background:var(--gray-200);color:var(--gray-500);cursor:default}
.ev-row .rb.soon:hover{transform:none;opacity:1}
.ev-row .rlc{align-self:center}
.ev-row .rb{display:inline-block;font-family:var(--font-ui);font-size:12px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;
  color:#fff;background:var(--ev-accent);padding:10px 16px;white-space:nowrap;transition:transform .2s var(--ease),opacity .2s}
.ev-row .rb:hover{transform:translateY(-1px);opacity:.92}
@media(max-width:700px){.ev-row.has-link{grid-template-columns:98px 1fr}.ev-row .rlc{grid-column:2}.ev-row .rb{margin-top:4px}}
.ev-callout{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;margin:10px 22px 22px;padding:24px 28px;background:var(--ev-accent);color:#fff}
.ev-callout-img{width:168px;aspect-ratio:6/5;overflow:hidden}
.ev-callout-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.ev-callout:hover .ev-callout-img img{transform:scale(1.03)}
.ev-callout h4{font-family:var(--font-display);font-weight:500;font-size:28px;line-height:1.1;color:#fff}
.ev-callout p{font-family:var(--font-ui);font-size:14px;line-height:1.55;color:rgba(255,255,255,.86);margin-top:8px;max-width:60ch}
.ev-callout-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.ev-callout-links a{display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--ev-accent);padding:11px 16px;
  font-family:var(--font-ui);font-size:13px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;transition:background .2s}
.ev-callout-links a:hover{background:var(--sand-100)}
.ev-callout-links a .s{font-weight:400;text-transform:none;letter-spacing:0;color:var(--gray-600)}
.ev-callout-links a svg{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ev-callout-note{display:block;margin-top:12px;font-family:var(--font-ui);font-size:12px;color:rgba(255,255,255,.7)}
@media(max-width:700px){.ev-callout{grid-template-columns:1fr;margin:8px 14px 16px;padding:20px}.ev-callout-img{width:100%;aspect-ratio:16/9}.ev-callout-links a{width:100%;justify-content:space-between}}
.ev-cta{display:flex;flex-direction:column;align-items:stretch;gap:9px;padding:6px 22px 20px}
.ev-cta .cta{text-align:center}
.ev-cta .cta+.cta-note{text-align:center}
.ev-cta .cta{font-family:var(--font-ui);font-size:14px;font-weight:600;letter-spacing:.5px;
  text-transform:uppercase;color:#fff;background:var(--coastal-600);padding:11px 22px;
  transition:background .2s var(--ease)}
.ev-cta .cta:hover{background:var(--sky-press)}
.ev-cta .cta-note{font-family:var(--font-ui);font-size:12px;color:var(--gray-400)}
@media(max-width:820px){
  .ev-grid{grid-template-columns:1fr;gap:22px}
  .ev-row{grid-template-columns:98px 1fr;gap:14px}
  .ev-row.has-link{grid-template-columns:98px 1fr auto}
  .ev-row .pl{font-size:16px}
}
.subcard.is-draft{padding-left:28px}
/* Except the subcards. A subcard already says "Draft data" beside its title,
   labels every row, and carries a note saying what it is waiting on, so the
   rule is a fourth signal saying the same thing and only makes the card sit
   differently from the one next to it. The rule stays everywhere else, where
   it is the only marker there is. */
.subcard.is-draft::before{display:none}

/* ======================================================= TYPE SCALE, DENSE
   Names and figures in the dense recognition sections ran small. About +20%
   on the name and value text; category labels and rank numerals move less, so
   the hierarchy inside each row is preserved rather than uniformly inflated. */
.award-card .nm{font-size:22.5px}
.award-card .val{font-size:14.5px}
.award-card .cat{font-size:10.5px}
.award-card{padding:30px 18px}
.award-card .aph{width:86px;height:86px}

.ans-col li{font-size:16px}
.ans-col li .vv{font-size:14.5px}
.ans-col li .rk{font-size:12.5px}
.ans-col h4{font-size:12px}

.mv-board li{font-size:16px}
.mv-board li .rk{font-size:12.5px}
.mv-board .mt{font-size:22px}
.mv-board .ms{font-size:11px}

.ll .nm{font-size:19px}
.ll .nm .s{font-size:14.5px}
.ll .v{font-size:19px}
.ll .r{font-size:15px}
.ll li{padding:15px 0}

.subcard li{font-size:17.5px}
.subcard li .rr{font-size:13px}
.subcard li .ss{font-size:12.5px}

/* ========================================================= RECOGNITION TABS
   They read as three real buttons now: a resting border and fill, a hover
   state, and a solid fill when active, so it is obvious there are boards to
   flip between. Corners stay sharp. */
.tabs{border-bottom:0;margin-bottom:6px;gap:10px}
.tab{border:1px solid rgba(167,196,216,.35);background:rgba(255,255,255,.04);
  border-bottom:1px solid rgba(167,196,216,.35);padding:13px 22px;font-size:15px;font-weight:500;
  color:var(--coastal-200);transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease)}
.tab:hover{background:rgba(255,255,255,.10);border-color:var(--coastal-400);color:#fff}
.tab.active{background:var(--coastal-600);border-color:var(--coastal-600);color:#fff;
  border-bottom-color:var(--coastal-600)}
.tab:focus-visible{outline:2px solid var(--coastal-300);outline-offset:2px}

/* ============================================================ COLOUR RHYTHM
   The page ran four navy sections back to back (recognition, trip,
   conferences, qualifiers) and then six light ones. These modifiers flip the
   ground on three sections so dark moments land as features and are spaced.
   Each is additive: delete the block and the class to revert one. */

/* Trip, navy -> sand */
.trip.ground-light{background:var(--sand-100);color:var(--coastal-900)}
.trip.ground-light .sec-title,.trip.ground-light .pace-h,
.trip.ground-light .elig .rule,
.trip.ground-light .pace-row .nm{color:var(--coastal-900)}
.trip.ground-light .sec-meta{color:var(--gray-400)}
.trip.ground-light .overline.light{color:var(--coastal-600)}
.trip.ground-light .overline.light::before{background:var(--coastal-600)}
.trip.ground-light .elig h5,
.trip.ground-light .pace-grid .sub{color:var(--coastal-600)}
.trip.ground-light .elig p{color:var(--gray-600)}
.trip.ground-light .elig .rule b{color:var(--coastal-700)}
.trip.ground-light .pace-row{border-bottom-color:var(--gray-200)}
.trip.ground-light .pace-row .rk{color:var(--coastal-400)}
.trip.ground-light .pace-row .av{background:var(--coastal-100);border-color:var(--gray-200)}
.trip.ground-light .mono{background:var(--coastal-100);color:var(--coastal-700)}
.trip.ground-light .note{color:var(--gray-500)}

/* Qualifiers, navy -> coastal-50 */
.quals.ground-light{background:var(--coastal-50);color:var(--coastal-900)}
.quals.ground-light .sec-title,.quals.ground-light .qual-row .nm,
.quals.ground-light .board-head .bttl{color:var(--coastal-900)}
.quals.ground-light .sec-meta{color:var(--gray-400)}
.quals.ground-light .overline.light{color:var(--coastal-600)}
.quals.ground-light .overline.light::before{background:var(--coastal-600)}
.quals.ground-light .intro{color:var(--gray-600)}
.quals.ground-light .qual-row{border-bottom-color:var(--gray-200)}
.quals.ground-light .qual-row .rk{color:var(--coastal-400)}
.quals.ground-light .qual-row .av{background:var(--coastal-100);border-color:var(--gray-200)}
.quals.ground-light .mono{background:var(--coastal-100);color:var(--coastal-700)}
.quals.ground-light .sub,.quals.ground-light .board-head .bcat{color:var(--coastal-600)}
.quals .board-head .bcat .place svg{width:13px;height:13px;vertical-align:-2px;margin-right:6px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.quals.ground-light .board-head .bper{color:var(--gray-500)}
.quals.ground-light .board-note{color:var(--gray-500)}

/* Service, sand -> navy, with the first-place card inverted so the winner
   still reads as the emphasised one. */
.service.ground-navy{background:var(--band)}
.service.ground-navy .sec-title{color:#fff}
.service.ground-navy .sec-meta{color:var(--coastal-400)}
.service.ground-navy .recog-intro{color:var(--coastal-100)!important}
.service.ground-navy .svc-card{background:transparent;border-color:rgba(167,196,216,.25)}
.service.ground-navy .svc-card .nm{color:#fff}
.service.ground-navy .svc-card .place{color:var(--coastal-400)}
.service.ground-navy .svc-card .amt{color:var(--coastal-300)}
.service.ground-navy .svc-card .cause{color:var(--coastal-200);border-top-color:rgba(167,196,216,.2)}
.service.ground-navy .svc-card .ph{background:var(--band-2);border-color:rgba(167,196,216,.3)}
.service.ground-navy .svc-card.first{background:var(--sand-100);border-color:var(--sand-100)}
.service.ground-navy .svc-card.first .nm{color:var(--coastal-900)}
.service.ground-navy .svc-card.first .place{color:var(--coastal-600)}
.service.ground-navy .svc-card.first .amt{color:var(--coastal-700)}
.service.ground-navy .svc-card.first .cause{color:var(--gray-600);border-top-color:var(--gray-200)}
.service.ground-navy .svc-card.first .ph{background:var(--coastal-100);border-color:var(--gray-200)}
.service.ground-navy .svc-card.first .mono{background:var(--coastal-100);color:var(--coastal-700)}

/* Headshot CTA, coastal-50 -> white, so it does not merge with Foundations. */
.headshot-cta.ground-white{background:var(--white)}
.headshot-cta.ground-white .hc-inner{background:var(--coastal-50)}

/* ==================================================================== MOTION
   Restrained: things settle, they do not perform. All of it is disabled under
   prefers-reduced-motion by the block at the end. */

/* Staggered entrance for rows and cards, layered on the section's own fade.
   The delay comes from --stagger, set per element in motion.js. */
.stagger-in{opacity:0;transform:translateY(14px)}
.reveal.in .stagger-in{opacity:1;transform:none;
  transition:opacity .45s var(--ease) var(--stagger),transform .45s var(--ease) var(--stagger)}

/* The YTD board rows keep their existing keyframe entrance, so exclude them. */
.ll li.stagger-in{opacity:0;transform:translateY(10px)}

/* Hover lift. Small, and only on things that are actually cards. */
.award-card,.mv-board,.svc-card,.ho-dates,.issue-card,.ev-card{
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s}
.award-card:hover{transform:translateY(-3px)}
.mv-board:hover,.svc-card:hover,.ev-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(37,47,74,.10)}
/* The banner drifts as the card lifts, the move the Instagram tiles already
   make. Slower than the lift so the two read as one gesture rather than as two
   things starting at once. `.ev-head` clips it, or the scaled photo would
   spill over the rows below. */
.ev-card:hover .ev-head img{transform:scale(1.06)}
/* The wide card is a different object: full width, a banner, six rows and
   its own buttons, and not itself a link. The small cards' lift and shadow
   read as a lurch at that size, so it holds still and only its banner
   drifts, at the 1.03 the large photographs use rather than the cards' 1.06. */
.ev-card.wide:hover,.reveal.in .ev-card.wide:hover{transform:none;box-shadow:none}
.ev-card.wide:hover .ev-head img{transform:scale(1.03)}
.service.ground-navy .svc-card:hover{box-shadow:0 14px 34px rgba(0,0,0,.28)}
.recap-grid .ph{transition:transform .5s var(--ease)}
.recap-grid .ph:hover{transform:translateY(-3px)}

/* Every card above is also a stagger target, and once revealed it is matched by
   `.reveal.in .stagger-in{transform:none}`. That is three classes; a bare
   `.mv-board:hover` is one class and a pseudo-class, so the reset outranked it
   and the lift never happened. The shadow did, which is why it read as working.
   `.recap-grid .ph:hover` ties on specificity and is declared later, so it was
   the only one that moved.
   Repeating the hovers under `.reveal.in` puts them a class above the reset.
   The originals stay for the no-JS case, where neither class is ever added. */
.reveal.in .award-card:hover{transform:translateY(-3px)}
.reveal.in .conf-card:hover{transform:translateY(-4px)}
.reveal.in .mv-board:hover,.reveal.in .svc-card:hover,.reveal.in .ev-card:hover{
  transform:translateY(-3px);box-shadow:0 14px 34px rgba(37,47,74,.10)}

/* Parallax targets need to sit still until motion.js moves them. */
.vision .bg img,.confs .bg img{will-change:transform}

@media(prefers-reduced-motion:reduce){
  .stagger-in{opacity:1!important;transform:none!important;transition:none!important}
  .hero .bg img{animation:none!important;transform:none!important}
  .ll li{animation:none!important;opacity:1!important;transform:none!important}
  .award-card:hover,.mv-board:hover,.svc-card:hover,.recap-grid .ph:hover,
  .conf-card:hover,.issue-card:hover,.ev-card:hover{transform:none!important}
  .reveal.in .award-card:hover,.reveal.in .conf-card:hover,.reveal.in .mv-board:hover,
  .reveal.in .svc-card:hover,.reveal.in .ev-card:hover{transform:none!important}
  .ev-card:hover .ev-head img,.trip .hero-img:hover img,
  .corner .shot:hover img,.letter .figure .shot:hover img{transform:none!important}
  .vision .bg img,.confs .bg img{transform:none!important}
}

/* ================================================================= NARROW
   The reference stopped tuning at 700 to 900px. Below ~560 the header ran out
   of room: the issue badge wrapped onto a second line and collided with the
   brand, and the eyebrow rules overlapped their own text when they wrapped. */
@media(max-width:560px){
  .wrap{padding:0 max(20px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left))}
  section{padding:76px 0}

  .nav{padding:calc(12px + env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) 12px max(20px,env(safe-area-inset-left))}
  .nav.solid{padding-top:calc(10px + env(safe-area-inset-top));padding-bottom:10px}
  /* inline-flex and nowrap now live on the base rule, since the wrap starts
     well above this breakpoint. Only the size changes here. */
  .nav .brand{font-size:17px}
  .issue-badge{font-size:9.5px;letter-spacing:1.2px;padding:3px 6px;margin-left:8px}
  .nav .links{gap:0}
  .nav .prev-btn{font-size:11px;letter-spacing:.3px;padding:8px 11px;white-space:nowrap}

  /* An inline-flex eyebrow with a leading rule needs to wrap as a block. */
  .overline{font-size:11px;letter-spacing:2px;flex-wrap:wrap;row-gap:5px}

  /* Room under the dek for the scroll cue, which is absolutely positioned and
     would otherwise sit on top of the last line. */
  .hero .inner{padding-bottom:88px}
  .hero .dek{font-size:17px}
  .hero-mark{width:30px;margin-bottom:14px}

  /* Two award cards per row at 390 leaves each about 165px, so the photo and
     the category label both need to come down a step. */
  .award-card{padding:22px 12px}
  .award-card .aph{width:66px;height:66px}
  .award-card .nm{font-size:20px}
  .award-card .cat{font-size:9.5px;letter-spacing:.6px}
  .award-card .aph .mono{font-size:20px}

  .sec-row{margin-bottom:22px}
  .letter .stats .n{font-size:25px}
  .miles .m{padding:16px 0}
  .drawer .dbody{padding:16px max(20px,env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) 20px}
}
/* ================================================================= TABLET
   The reference collapsed straight from desktop to a single column at 780 to
   900px, so a 768 wide tablet got phone layout: award cards stretched to 340px
   with a 86px photo adrift in them, and the six mover boards, the pace lists
   and the footer each ran full width with their content in the left third.
   Nothing was clipped, it was just very sparse. This band sits between the two
   and keeps a middle column count before the phone rules take over at 620. */
@media(min-width:620px) and (max-width:900px){
  /* Awards stay 2 up here. 3 up is tighter per card, but the award set is 10,
     so it lands 3/3/3/1 and leaves an empty bordered cell on the last row.
     An even count divides cleanly at 2, for any month. The card is roomy at
     this width, so trim the padding rather than add a column. */
  .award-card{padding:24px 18px}

  /* Six leaderboards, 2 up. */
  .movers-grid{grid-template-columns:repeat(2,1fr)}

  /* Name lists keep both columns: a row is name plus a 32px avatar, so it
     fits well under 300px and the single column wasted half the width. */
  .trip .pace-grid,.qual-grid{grid-template-columns:1fr 1fr;gap:0 32px}
  .subcards{grid-template-columns:1fr 1fr;gap:18px}

  /* Trip facts and the footer both have short cells; no reason to stack. */
  .trip .facts{grid-template-columns:repeat(3,1fr)}
  /* Three across again in this band, so the cells take back their divider and their padding from the phone rules above. */
  .trip .facts .f{padding:20px 22px;border-bottom:0;border-right:1px solid rgba(255,255,255,.22)}
  .trip .facts .f:last-child{border-right:0}
  .footer .grid{grid-template-columns:1.3fr 1fr 1fr;gap:32px}
}

/* ==================================================== ADVISOR CORNER, WIDE
   The `photo-above` layout, for an issue whose Corner photo is landscape or a
   group shot. The image keeps its own aspect ratio rather than filling a fixed
   box, so a family of seven is never cropped to a headshot. The Q&A below it
   is held to a reading measure instead of running the full 1180px. */
.corner.photo-above .figure{margin-top:40px}
.corner.photo-above .figure img{width:100%;height:auto;display:block}
.corner.photo-above .who{margin-top:20px;display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.corner.photo-above .who b{margin:0}
.corner.photo-above .who span{margin-top:0}
.corner.photo-above .qaset{max-width:820px;margin-top:8px}

/* The byline over the foot of the photograph. Placed after the `photo-above`
   rules on purpose: `.corner .shot .who` and `.corner.photo-above .who` are
   the same specificity, so source order is what decides, and the margin those
   rules set has to lose here. The flex row they set is kept, which is what
   holds the name and the meta on one line.
   The scrim stops just under halfway: the band is a single line, so darkening
   any more of the picture would be protecting type that is not there. */
.corner .shot::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(24,32,50,.86),rgba(24,32,50,.28) 24%,rgba(24,32,50,0) 46%)}
.corner .shot .who{position:absolute;left:0;right:0;bottom:0;z-index:1;margin:0;padding:22px 26px}
.corner .shot .who b{color:#fff}
.corner .shot .who span{color:rgba(255,255,255,.8)}
/* Under the picture again on a phone. The photograph keeps its aspect ratio at
   full width, so it is only about 215px tall there, and the byline wraps to two
   lines: over the image that band takes more than half of it. The overlay needs
   a picture with room to spare, and at this width there is none. */
@media(max-width:700px){
  .corner .shot::after{display:none}
  /* The wrapper stops being a box here. With the byline back in flow inside it,
     the shadow and the clip were wrapping the caption too, which drew a pale
     panel around it that did not match the page. The shadow goes back on the
     photograph, where it hugs the image the way it did before the overlay. */
  .corner .shot{overflow:visible;box-shadow:none}
  .corner .shot img{box-shadow:0 24px 64px rgba(37,47,74,.16)}
  /* Nothing clips the zoom now, and a tap can latch :hover on a touch screen,
     so the drift comes off with it. */
  .corner .shot:hover img{transform:none}
  .corner .shot .who{position:static;padding:16px 0 0}
  .corner .shot .who b{color:var(--coastal-900)}
  .corner .shot .who span{color:var(--coastal-600)}
}

/* Pull, sized as a section feature rather than the letter's aside. Same
   family and rule as .letter .pull so the two read as one system. */
.corner-pull{font-family:var(--font-display);font-weight:500;font-style:italic;
  font-size:clamp(23px,2.6vw,32px);line-height:1.32;color:var(--coastal-800);
  border-left:2px solid var(--coastal-600);padding-left:26px;
  margin:34px 0 30px;max-width:20ch;
  /* Hung, not inset. The mark sits out in the gutter so the first line of
     type still starts flush with the lines under it; set inline it would
     shunt the whole first line right and the left edge would look broken. */
  text-indent:-.42em}
/* In CSS rather than the copy, so the data stays a sentence someone said.
   The letter's pull carries the same mark, hung the same way, so the two
   quotes on the page read as one treatment. */
.corner-pull::before{content:'\201C'}
.corner.photo-above .corner-pull{max-width:24ch}
@media(max-width:700px){
  .corner.photo-above .figure{margin-top:28px}
  .corner-pull{font-size:21px;padding-left:18px;margin:26px 0 22px;max-width:none}
}

/* Anchor targets clear the fixed header instead of sliding under it. */
section[id],header[id]{scroll-margin-top:calc(84px + env(safe-area-inset-top))}
@media(max-width:560px){section[id],header[id]{scroll-margin-top:calc(64px + env(safe-area-inset-top))}}

/* ================================================================= MOBILE NAV
   Below 820 the quick-jump links were simply hidden, which left the nav with
   nothing but Previous Issues and no way to reach a section. They now move
   into a panel behind a hamburger, Previous Issues with them, so the same
   set of destinations is reachable at every width. */
.menu-btn{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:38px;height:38px;
  padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
/* No tap flash on a phone (the grey box iOS paints over a tapped control sat
   off the bars); the bars turning into an X is the whole response. A ring
   stays for keyboard focus only. */
.menu-btn:focus:not(:focus-visible){outline:0}
.menu-btn:focus-visible{outline:2px solid var(--coastal-400);outline-offset:2px}
.menu-btn span{display:block;height:1.5px;width:22px;background:#fff;transition:transform .3s var(--ease),opacity .2s var(--ease)}
.nav.solid .menu-btn span,.nav.menu-open .menu-btn span{background:var(--coastal-900)}
/* The open panel sits behind the nav, so the nav has to leave transparent
   mode even at scroll position zero or it is white type on a white sheet. */
.nav.menu-open{background:rgba(255,255,255,.93);backdrop-filter:blur(10px)}
.nav.menu-open .brand{color:var(--coastal-900)}
.menu-btn.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-btn.open span:nth-child(2){opacity:0}
.menu-btn.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* Same rule for the menu panel, which on a phone is display:block while closed
   (hidden by visibility, so it can fade open) and would otherwise be read as
   a white fixed sheet at the top over the navy hero. */
.menu-panel{display:none;position:fixed;top:0;left:0;right:0;z-index:45;background:transparent;
  box-shadow:0 16px 40px rgba(37,47,74,.14);border-bottom:1px solid var(--gray-200);
  padding:calc(72px + env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) 16px max(20px,env(safe-area-inset-left));visibility:hidden;opacity:0;transform:translateY(-10px);
  /* visibility is deliberately NOT transitioned: it animates discretely and
     can leave the panel stuck hidden when it flips alongside display. */
  transition:opacity .28s var(--ease),transform .28s var(--ease)}
.menu-panel::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--white)}
.menu-panel.open{visibility:visible;opacity:1;transform:none}
.menu-links{display:flex;flex-direction:column}
.menu-links a{font-family:var(--font-ui);font-size:17px;color:var(--coastal-900);
  padding:14px 2px;border-bottom:1px solid var(--gray-200)}
.menu-links a:hover{color:var(--coastal-600)}
.menu-links .menu-issues{display:flex;gap:10px;margin-top:16px}
.menu-links .menu-prev,.menu-links .menu-latest{flex:1;font-family:var(--font-ui);font-size:14px;font-weight:600;letter-spacing:.5px;
  text-transform:uppercase;color:#fff;background:var(--coastal-600);border:0;cursor:pointer;
  padding:13px 12px;text-align:center;transition:background .2s var(--ease)}
.menu-links .menu-prev:hover,.menu-links .menu-latest:hover{background:var(--sky-press)}

/* Must match the link-hiding breakpoint above, or there is a band of widths
   with neither the links nor the button. */
@media(max-width:1040px){
  .menu-btn{display:flex}
  .menu-panel{display:block}
  .nav .prev-btn{display:none}
}
@media(prefers-reduced-motion:reduce){
  .menu-panel{transition:none}
  .menu-btn span{transition:none}
}

/* ============================================================= BACK TO SCHOOL
   Three labelled columns, deliberately quiet: this sits under the Service
   award and must not compete with it. The flyer is optional, and when it is
   absent the columns simply take the full width. */
.b2s{background:var(--white)}
.b2s-lead{font-family:var(--font-serif);font-weight:300;font-size:22px;line-height:1.6;
  color:var(--gray-600);max-width:900px;margin-top:14px}
.b2s-body{margin-top:36px}
.b2s-body.has-flyer{display:grid;grid-template-columns:1.35fr 1fr;gap:44px;align-items:start}
.b2s-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.b2s-body.has-flyer .b2s-grid{grid-template-columns:1fr;gap:26px}
.b2s-col{border-top:1px solid var(--gray-200);padding-top:18px}
.b2s-col h5{font-family:var(--font-ui);font-size:11px;letter-spacing:2px;text-transform:uppercase;
  font-weight:600;color:var(--coastal-600);margin-bottom:12px;
  display:flex;align-items:center;gap:7px}
/* 1em, so each mark is exactly its heading's size, and currentColor so it is
   exactly its colour. Stroke only: at 11px a filled shape reads as a blob.
   Slightly lighter than 2 because these sit next to 600 weight type and a
   heavier line would out-shout the words. */
.b2s-col h5 .b2s-mk{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.b2s-col p{font-family:var(--font-ui);font-size:15px;line-height:1.65;color:var(--gray-500)}
.b2s-partner{font-family:var(--font-display);font-weight:500;font-size:26px;color:var(--coastal-900);margin-bottom:8px}
/* The partner's own words, set apart from the page's voice. */
.b2s-partner+p{font-style:italic}
.b2s-ways{list-style:none}
.b2s-ways li{display:grid;grid-template-columns:30px 1fr;gap:8px;align-items:baseline;padding:7px 0}
.b2s-ways .n{font-family:var(--font-ui);font-size:12px;font-weight:600;color:var(--coastal-600)}
.b2s-ways li span:last-child{font-family:var(--font-ui);font-size:15px;line-height:1.6;color:var(--gray-600)}
.b2s-flyer img{width:100%;height:auto;border:1px solid var(--gray-200)}
/* The thank-you photographs, set like a news page: a lead frame at the left
   two rows deep, four smaller frames two by two beside it. Every frame is
   cropped to its cell, and the data says where each crop should sit. On a
   phone the lead goes full width at 4:3 and the four follow two up at 3:4. */
.b2s-photos{display:grid;grid-template-columns:3fr 1fr 1fr;grid-template-rows:250px 250px;gap:12px;margin-top:34px}
.b2s-photos figure{margin:0;overflow:hidden;background:var(--sand-200)}
.b2s-photos figure.lead{grid-column:1;grid-row:1/3}
.b2s-photos img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.b2s-photos figure:hover img{transform:scale(1.03)}
/* The flyer button. Same face as the Foundations Register button, since both
   are "go do this" and there is no reason for the page to have two. */
/* A column, not a row. Side by side, centring the flex line would centre the
   button and its note as a pair and leave the button itself off to the left.
   Stacked, the button is actually centred and the note qualifies it from
   underneath, which is the shape the Feeding America sign-up uses. */
.b2s-actions{margin-top:34px;display:flex;flex-direction:column;align-items:center;gap:10px}
.b2s-cta{display:inline-block;font-family:var(--font-ui);font-size:14px;font-weight:600;
  letter-spacing:.5px;text-transform:uppercase;color:#fff;background:var(--coastal-600);
  padding:11px 22px;transition:all .2s var(--ease)}
.b2s-cta:hover{background:var(--sky-press);transform:translateY(-1px)}
.b2s-cta-note{font-family:var(--font-ui);font-size:13px;color:var(--gray-400);text-align:center}
@media(max-width:820px){
  .b2s-body.has-flyer{grid-template-columns:1fr;gap:32px}
  .b2s-photos{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .b2s-photos figure{aspect-ratio:3/4}
  .b2s-photos figure.lead{grid-column:1/-1;grid-row:auto;aspect-ratio:4/3}
  .b2s-grid,.b2s-body.has-flyer .b2s-grid{grid-template-columns:1fr;gap:24px}
}
@media(max-width:620px){
  /* Stacked, the note under the button reads as a caption rather than as a
     second thing sitting beside it. */
  .b2s-cta{width:100%;text-align:center}
}

/* ================================================================= TRAINING
   The firm's own sessions. White, because it lands between the headshot CTA
   on coastal-50 and the home office on sand-100, and two warm grounds either
   side of it need something to separate them. Rows are the Foundations event
   shape, which is global, so there is nothing to restyle here. */
.training{background:var(--white)}
/* Resource cards, the Compass card's composition in the page's own ink:
   picture left, navy panel right, square corners. The card is one link. */
.vc-cards{display:grid;gap:22px;margin-top:34px}
.vc-card{display:grid;grid-template-columns:2fr 3fr;background:var(--band);color:#fff;text-decoration:none;
  overflow:hidden;min-height:250px;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.vc-card:hover,.vc-card:focus-visible{transform:translateY(-2px);box-shadow:0 18px 40px rgba(37,47,74,.22)}
.vc-card:focus-visible{outline:2px solid var(--coastal-400);outline-offset:3px}
.vc-img{position:relative;background:#0b1a3a;min-height:200px}
.vc-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.vc-card:hover .vc-img img{transform:scale(1.03)}
.vc-panel{padding:34px 38px;display:flex;flex-direction:column;justify-content:center;gap:12px}
.vc-eyebrow{font-family:var(--font-ui);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--coastal-300)}
.vc-panel h4{font-family:var(--font-display);font-weight:500;font-size:28px;line-height:1.15;color:#fff}
.vc-panel p{font-family:var(--font-ui);font-size:15px;line-height:1.6;color:var(--coastal-100);max-width:56ch}
.vc-cta{display:inline-flex;align-items:center;gap:10px;width:fit-content;margin-top:8px;font-family:var(--font-ui);font-size:14px;
  font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--band);background:#fff;padding:12px 22px;transition:background .2s}
/* On a picture card the button runs the width of the panel; at its own width
   it sat small under three lines of copy. Row-shaped cards keep theirs at the
   right, at content width. */
.vc-card:not(.compact) .vc-cta{width:100%;justify-content:center}
.vc-card:hover .vc-cta{background:var(--coastal-100)}
.vc-cta svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* Stacked, the picture is a banner over the panel, 16:7 rather than 16:10: at
   16:10 a phone showed a picture taller than the card's own words, and a
   tablet one the height of its screen. */
@media(max-width:700px){.vc-card{grid-template-columns:1fr}.vc-img{aspect-ratio:16/7;min-height:0}.vc-panel{padding:26px 22px}.vc-panel h4{font-size:24px}}
.vc-card.no-img{grid-template-columns:1fr}
/* The compact card, for a small piece of artwork such as a Compass thumbnail:
   the picture column is a fixed 280px so the artwork is never scaled up far,
   and it fills the row, so a panel a few pixels taller than the picture's own
   height crops a sliver from the sides rather than leaving a strip beneath. */
.vc-card.compact{grid-template-columns:280px 1fr;min-height:0}
.vc-card.compact .vc-img{min-height:187px}
.vc-card.compact.no-img{grid-template-columns:1fr}
/* Without a picture the compact card reads as a row: label, title and line
   at the left, the button at the right and centred, the way the session rows
   under it place theirs. Stacked on phones, the button sits at the left at
   its own width, like every other button in the section. */
.vc-card.compact.no-img .vc-panel{display:grid;grid-template-columns:1fr auto;grid-template-areas:"e c" "h c" "p c" "s c";column-gap:28px;row-gap:6px;align-items:center}
.vc-card.compact.no-img .vc-eyebrow{grid-area:e;align-self:end}
.vc-card.compact.no-img h4{grid-area:h}
.vc-card.compact.no-img p{grid-area:p;align-self:start}
.vc-card.compact.no-img .vc-cta{grid-area:c;margin-top:0}
@media(max-width:700px){.vc-card.compact.no-img .vc-panel{grid-template-columns:1fr;grid-template-areas:"e" "h" "p" "s" "c";row-gap:12px}
  .vc-card.compact.no-img .vc-cta{margin-top:8px}
  /* Stacked, every card button and the band's button run full width, the same
     rule the session rows follow on phones. */
  .vc-cta{width:100%;justify-content:center}}
/* The light form, for a card that sits beside a navy one and should not read
   as its twin: the page's pale blue ground, a coastal hairline, the standard
   blue button. Same palette, a different object. */
/* A shade more presence than a plain bordered panel: a firmer border and a little lift at rest. A rule down the left was tried and came out. */
.vc-card.light{background:var(--coastal-50);color:var(--coastal-900);border:1px solid var(--coastal-300);box-shadow:0 8px 24px rgba(37,47,74,.06)}
.vc-card.light .vc-eyebrow{color:var(--coastal-800)}
.vc-card.light .vc-panel h4{color:var(--coastal-900)}
.vc-card.light .vc-panel p{color:var(--gray-600)}
.vc-card.light .vc-cta{background:var(--band-2);color:#fff}
.vc-card.light:hover .vc-cta{background:var(--band)}
.vc-card.light:hover,.vc-card.light:focus-visible{box-shadow:0 18px 40px rgba(37,47,74,.12)}
.vc-card.compact .vc-panel{padding:22px 30px;gap:8px}
.vc-card.compact .vc-panel h4{font-size:24px}
.vc-card.compact .vc-panel p{font-size:14px}
.vc-card.compact .vc-cta{margin-top:4px;padding:10px 18px;font-size:13px}
/* Stacked, a compact card takes the regular card's rhythm: the same padding,
   gaps, type and button, so the two shapes read as one set in a column. Its
   picture keeps a proportion of its own, 3:2, which holds the Compass art
   whole, and the row min-height goes with the row. */
@media(max-width:700px){.vc-card.compact{grid-template-columns:1fr}
  .vc-card.compact .vc-img{aspect-ratio:3/2;min-height:0}
  .vc-card.compact .vc-panel{padding:26px 22px;gap:12px}
  .vc-card.compact .vc-panel p{font-size:15px}
  .vc-card.compact .vc-cta{margin-top:8px;padding:12px 22px;font-size:14px}}
.vc-mark{width:44px;height:44px;object-fit:contain;margin-bottom:4px}
/* A card with an event under it. The kickoff call belongs to the playbook,
   same campaign and same MassMutual, so it sits inside the same navy block as
   a band under the panel rather than as a session row of its own outside it.
   The band is a sibling of the card, not part of the anchor, so the card's
   lift is off here: half a block rising would look broken. */
.vc-group{background:var(--band);color:#fff}
.vc-group .vc-card:hover,.vc-group .vc-card:focus-visible{transform:none;box-shadow:none}
.vc-foot{display:grid;grid-template-columns:64px 1fr auto;gap:26px;align-items:center;padding:22px 34px 26px;border-top:1px solid rgba(255,255,255,.14)}
.vc-foot.no-date{grid-template-columns:1fr auto}
.vc-date{text-align:center}
.vc-date .mo{display:block;font-family:var(--font-ui);font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--coastal-300)}
.vc-date .dy{display:block;font-family:var(--font-display);font-weight:500;font-size:36px;line-height:1;color:#fff;margin-top:2px}
.vc-foot h5{font-family:var(--font-display);font-weight:500;font-size:22px;line-height:1.2;color:#fff}
.vc-foot .vc-mark{white-space:nowrap}.vc-foot .vc-mark svg{width:13px;height:13px;vertical-align:-2px;margin-right:4px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.vc-foot p{font-family:var(--font-ui);font-size:14px;line-height:1.5;color:var(--coastal-100);margin-top:6px}
.vc-foot .vc-cta{margin-top:0}
@media(max-width:700px){.vc-foot{grid-template-columns:56px 1fr;gap:18px 20px;padding:20px 22px 24px}
  .vc-foot.no-date{grid-template-columns:1fr}
  /* The button takes the whole width of the band rather than the title's
     column: under the date it had 260px, and "Register for the call" wrapped
     inside its own button. */
  .vc-foot .vc-cta{grid-column:1/-1;margin-top:2px}
  .vc-date .dy{font-size:30px}}
.trn-note{font-family:var(--font-ui);font-size:14px;color:var(--coastal-600);margin-top:6px}
/* Sessions lifted from the calendar, under a small heading in the column-heading style. */
.trn-picks{margin-top:34px}
.trn-place{white-space:nowrap}
/* The reminder's places wrap on a phone; only the pin and the first word stay together. */
.rem-pin{white-space:nowrap}
.trn-place svg,.rem-place svg{width:13px;height:13px;vertical-align:-2px;margin-right:4px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.trn-picks-h{font-family:var(--font-ui);font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--coastal-600);padding-bottom:6px;border-bottom:1px solid var(--gray-200)}
/* The numbers on a resource card: display numerals over small labels, in the body's place. */
.vc-stats{grid-area:s;display:flex;gap:26px;flex-wrap:wrap;margin-top:2px}
.vc-stats span{font-family:var(--font-ui);font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--coastal-200)}
.vc-stats b{display:block;font-family:var(--font-display);font-weight:500;font-size:24px;line-height:1;color:#fff;margin-bottom:4px}
.vc-card.light .vc-stats span{color:var(--gray-500)}
.vc-card.light .vc-stats b{color:var(--coastal-900)}
.vc-card.light.compact .vc-panel{padding:20px 30px}
/* A link inside a note took the paragraph's grey and no underline, so it was
   clickable and invisible. Ink plus a coastal hairline, which is as loud as a
   link gets on this page. */
.trn-note a{color:var(--coastal-800);border-bottom:1px solid var(--coastal-300);transition:color .2s,border-color .2s}
.trn-note a:hover,.trn-note a:focus-visible{color:var(--coastal-900);border-color:currentColor}
/* A recorded session carries its still in the button column, 16:9 at the
   width the button already gives that column, with the play mark filled
   rather than stroked so it survives any frame behind it. */
.trn-thumb{position:relative;display:block;width:220px;aspect-ratio:16/9;overflow:hidden;background:var(--band)}
.trn-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.trn-thumb:hover img{transform:scale(1.03)}
.trn-thumb svg{position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%);
  fill:#fff;opacity:.92;filter:drop-shadow(0 2px 8px rgba(24,32,50,.5))}
/* A logo in the still's place: shown whole on white with a hairline, the play
   mark small in the corner rather than over the wordmark. */
.trn-thumb.logo{background:#fff;border:1px solid var(--gray-200)}
.trn-thumb.logo img{object-fit:contain;padding:16px 26px;box-sizing:border-box}
.trn-thumb.logo svg{left:auto;top:auto;right:8px;bottom:8px;width:30px;height:30px;transform:none;fill:var(--band-2);filter:none}
@media(max-width:700px){.trn-thumb{width:100%;max-width:340px}}
.trn-lead{font-family:var(--font-serif);font-weight:300;font-size:20px;line-height:1.65;
  color:var(--gray-600);max-width:70ch;margin-top:20px}
/* The running order. Indented to the date column's width so it reads as
   belonging to the row above rather than as a second list. */
.trn-agenda{margin:22px 0 8px 116px;border-left:1px solid var(--gray-200);padding-left:26px}
.trn-ag{display:grid;grid-template-columns:34px 1fr auto;gap:14px;align-items:baseline;padding:11px 0}
.trn-ag .n{font-family:var(--font-ui);font-size:12px;font-weight:600;color:var(--coastal-600)}
.trn-ag h5{font-family:var(--font-display);font-weight:500;font-size:18px;color:var(--coastal-900)}
.trn-ag p{font-family:var(--font-ui);font-size:14px;line-height:1.6;color:var(--gray-500);margin-top:3px}
.trn-ag .w{font-family:var(--font-ui);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--gray-400);white-space:nowrap}
.trn-pts{list-style:none;margin-top:9px;columns:2;column-gap:32px}
.trn-pts li{font-family:var(--font-ui);font-size:14px;line-height:1.55;color:var(--gray-500);
  padding-left:14px;position:relative;margin-bottom:5px;break-inside:avoid}
.trn-pts li:before{content:"";position:absolute;left:0;top:9px;width:5px;height:1px;
  background:var(--coastal-400)}
@media(max-width:820px){
  /* The date column collapses on phones, so the agenda's indent goes with it,
     and two columns of bullets at this width is four words a line. */
  .trn-agenda{margin-left:0;padding-left:18px}
  .trn-pts{columns:1}
  .trn-ag{grid-template-columns:28px 1fr;gap:10px}
  .trn-ag .w{grid-column:2;margin-top:2px}
}

/* ======================================================= CLOSEST TO QUALIFYING
   A second tier under the standings. Names only, no ranks and no faces, so it
   reads as context rather than as another leaderboard. */
.trip .pace-next{margin-top:34px;padding-top:26px;border-top:1px solid rgba(255,255,255,.12)}
.trip .pnh{font-family:var(--font-display);font-weight:500;font-size:21px;color:#fff;margin-bottom:4px}
.trip .pace-next-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;margin-top:12px}
.trip .pace-next-grid .sub{font-family:var(--font-ui);font-size:10px;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--coastal-400);margin:10px 0 4px}
.trip .pn-row{font-family:var(--font-ui);font-size:14.5px;color:var(--coastal-100);
  padding:5px 0;border-bottom:1px solid rgba(255,255,255,.05)}
@media(max-width:820px){.trip .pace-next-grid{grid-template-columns:1fr}}

/* ============================================================ INSTAGRAM FOLLOW
   The handle in the section meta is the link, and a Follow Us button repeats
   it under the grid for anyone who scrolled past the header. */
.insta-handle{color:inherit;border-bottom:1px solid var(--gray-200);transition:color .3s,border-color .3s}
.insta-handle:hover{color:var(--coastal-600);border-color:var(--coastal-600)}
/* Centred on the grid above it. The anchor is inline-flex so it is only as
   wide as its label; text-align does the work without stretching the button. */
.insta-follow{margin-top:26px;text-align:center}
.insta-follow a{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-ui);font-size:14px;
  font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:#fff;background:var(--band);
  padding:13px 20px;transition:background .25s var(--ease)}
.insta-follow a:hover{background:var(--sky-press)}
.insta-follow .ig-at{font-weight:400;letter-spacing:1px;color:var(--coastal-300);text-transform:none}
.insta-follow .ig-mark{width:14px;height:14px;border:1.5px solid currentColor;border-radius:4px;position:relative;flex:none}
.insta-follow .ig-mark::before{content:'';position:absolute;inset:3px;border:1.5px solid currentColor;border-radius:50%}

/* ============================================================ TYPE SCALE, 15%
   Reading sizes went up roughly 15% across body copy, list rows, leaderboard
   names and figures, captions, card text and UI. Display type, stat numerals,
   avatar monograms and the wordmarks were left where they were. Micro labels
   moved about 10%, enough to track with the body without breaking the tight
   uppercase rhythm they depend on.

   The four dense sections had already taken a +20% pass, so they took a much
   lighter touch here, 5 to 9%, rather than compounding to nearly +40%. */

/* Dense rows carry more type now and need a little more room to breathe. */
.ans-col li{line-height:1.45;padding:6px 0}
.mv-board li{line-height:1.45;padding:6.5px 0}
.subcard li{line-height:1.4}
.trip .pn-row{line-height:1.45}
.qual-row .nm{line-height:1.4}
.award-card .cat{line-height:1.35}
.event .info p{line-height:1.55}

/* MOBILE AND TABLET FLOOR
   Body copy and list rows land at 16px, and nothing that is actual text falls
   below 14px. Rank numerals, uppercase micro labels and source notes are the
   deliberate exceptions: they are furniture, not reading. */
@media(max-width:820px){
  .letter .sign,
  .event .info p,
  .ho-item p,.ho-item h4,
  .b2s-col p,.b2s-ways li span:last-child,
  .trip .elig .rule,.trip .pace-row .nm,.trip .pn-row,
  .qual-row .nm,
  .footer p,.footer .col a,
  .drawer-msg{font-size:16px}
}

/* The one place the 15% overshoots. The partner letter is the longest
   unbroken run of prose in the issue, and at 21px on a phone the measure
   falls to about 30 characters, which is too short to read comfortably.
   Capped here only; the letter keeps the full 21px from 561px up. */
@media(max-width:560px){
  .letter .body{font-size:19px}
}

/* One link out from the key-dates column. The dates themselves stay unlinked,
   matching how the list has always read. */
.ho-dates .ho-cal{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-family:var(--font-ui);font-size:14px;
  color:var(--coastal-800);border-bottom:1px solid var(--coastal-300);padding-bottom:2px;
  transition:color .25s var(--ease),border-color .25s var(--ease)}
.ho-dates .ho-cal svg{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .25s var(--ease)}
.ho-dates .ho-cal:hover{color:var(--coastal-900);border-color:var(--coastal-700)}
.ho-dates .ho-cal:hover svg{transform:translate(1px,-1px)}

/* ================================================== FACES ON THE NAME LISTS
   Reversing the original faceless decision for the movers boards, the answers
   columns and the trip next-ten. Recognition reads better with a face against
   the name, and the monogram fallback keeps a row from ever looking empty. */
.mv-board li{grid-template-columns:18px 26px 1fr}
.mv-board li .av{width:26px;height:26px;border-radius:50%;overflow:hidden;
  border:1px solid var(--gray-200);flex:none}
.mv-board li .av img{width:100%;height:100%;object-fit:cover}
.mv-board li .av .mono{font-size:9.5px}

.ans-col li{grid-template-columns:18px 24px 1fr}
.ans-col li .av{width:24px;height:24px;border-radius:50%;overflow:hidden;
  border:1px solid var(--gray-200);flex:none}
.ans-col li .av img{width:100%;height:100%;object-fit:cover}
.ans-col li .av .mono{font-size:9px}

.trip .pn-row{display:grid;grid-template-columns:24px 1fr;gap:9px;align-items:center}
.trip .pn-row .av{width:24px;height:24px;border-radius:50%;overflow:hidden;
  border:1px solid var(--gray-200);flex:none}
.trip .pn-row .av img{width:100%;height:100%;object-fit:cover}
.trip .pn-row .av .mono{font-size:9px}

/* =========================================== CLOSEST TO QUALIFYING, ON LIGHT
   BUG FIX. The trip section carries a dark navy base and .ground-light maps
   every one of its tokens back for the sand ground. The next-ten block was
   written against the dark base, so on the live light ground its heading was
   white on cream and its names were coastal-100 on cream, both effectively
   invisible. These are the .ground-light counterparts that were missing. */
.trip.ground-light .pnh{color:var(--coastal-900)}
.trip.ground-light .pace-next{border-top-color:var(--gray-200)}
.trip.ground-light .pace-next-grid .sub{color:var(--coastal-600)}
.trip.ground-light .pn-row{color:var(--gray-700);border-bottom-color:var(--gray-200)}
.trip.ground-light .pace-next .note{color:var(--gray-500)}

/* ==================================================== STICKY BOARD TABS
   Once you are inside the year-to-date board on a phone the tabs have
   scrolled away, so switching boards means scrolling back up. They pin under
   the fixed nav for as long as the section is in view. Sticky rather than
   fixed, so nothing jumps when it pins, and the row scrolls sideways when the
   three labels will not fit. */
@media(max-width:820px){
  /* top meets the nav in its scrolled, solid state, which is what it is in
     by the time this section is on screen. Measured: 58px at 390, 62px at
     768, and the offsets below match exactly: a few pixels of air let a row
     show through between the nav and the pinned bar. */
  /* These wrap rather than scroll sideways. The three labels need 537px at a
     375px width, so no padding or type size fits them on one row, and the
     sideways scroll hid the third tab behind a hard edge with nothing to say
     it was there: it read as clipped rather than scrollable. Two tidy rows
     show all three. Tightened so the pinned bar stays shallow. */
  /* The bar bleeds to the screen edges by the wrap's own padding, 40px here
     and 20px under 560. It had -20px at both, so between the two it stopped
     20px short of each edge and its shadow drew a step. The shadow sits on
     the bar only while it is pinned (main.js sets .pinned); at rest it read
     as a smudge under the buttons. The intro closes up on the tabs it
     introduces. */
  .recognition .recog-intro{margin-bottom:28px}
  /* The navy lives on a pseudo-element, not on the sticky bar itself: Safari
     on iOS 26 tints its chrome from a sticky element's background-color once
     the bar is pinned, and the address bar went navy for the whole section
     while the screen's foot was still on a white one. Pseudo-elements are
     not read; the bar still covers what scrolls under it. */
  .recognition .tabs{position:sticky;top:calc(62px + env(safe-area-inset-top));z-index:30;
    background:transparent;
    margin:0 -40px;padding:10px 40px 8px;
    flex-wrap:wrap;gap:8px;
    transition:box-shadow .25s var(--ease)}
  .recognition .tabs::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--band)}
  .recognition .tabs.pinned{box-shadow:0 8px 16px -10px rgba(0,0,0,.45)}
  .recognition .tab{flex:none;white-space:nowrap;font-size:13px;padding:10px 14px}
}
@media(max-width:560px){
  /* A little more room under the buttons on a phone, so the pinned strip's shadow falls on space rather than on the first row. */
  .recognition .tabs{top:calc(58px + env(safe-area-inset-top));margin:0 -20px;padding:10px 20px 14px}
}

/* ======================================================= INSTAGRAM TILES
   The posts are portrait profile graphics, so a square tile cropped the
   artwork. 4:5 shows them whole. The caption overlay is gone everywhere: each
   post already carries its headline in the image, and the overlay landed on
   top of it at every width. The caption lives on as alt text. */
.insta-tile{aspect-ratio:4/5}
@media(max-width:700px){.insta-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.insta-grid{grid-template-columns:1fr;gap:18px}}

/* A wide tile for a landscape anchor: two columns by two rows, so a 4:3 frame
   is not forced into a portrait slot. .tall already spans two rows. */
.recap-grid .wide{grid-column:span 2;grid-row:span 2}

/* ================================================================ HERO SCRIM
   The kicker sits at about 36% down on desktop and 53% on mobile, which is
   where the old scrim was at its thinnest (20% at the 40% stop), so it landed
   on the pale concrete and disappeared. The light window moves up into the top
   fifth, where there is no type, and the scrim deepens through the whole copy
   band. A left-weighted pool adds contrast behind the text column on desktop
   without flattening the right side of the photograph. */
.hero .bg::after{
  background:
    linear-gradient(100deg, rgba(18,25,44,.58) 0%, rgba(18,25,44,.30) 44%, rgba(18,25,44,0) 70%),
    linear-gradient(180deg, rgba(37,47,74,.42) 0%, rgba(37,47,74,.22) 22%,
                    rgba(37,47,74,.64) 56%, rgba(37,47,74,.92) 100%);
}
/* On a phone the copy runs nearly full width, so a side pool buys nothing.
   A steeper vertical ramp does the work instead. */
@media(max-width:700px){
  .hero .bg::after{
    background:
      linear-gradient(180deg, rgba(37,47,74,.40) 0%, rgba(37,47,74,.24) 20%,
                      rgba(37,47,74,.70) 50%, rgba(37,47,74,.94) 100%);
  }
}

/* ==================================================== CLOSEST TO QUALIFYING
   Brought up to the pace list's treatment so the two blocks read as one
   family: same 32px avatar, same row rhythm, same name size. It keeps no rank
   column, which is what still marks it as the secondary list. */
.trip .pn-row{grid-template-columns:32px 1fr;gap:10px;padding:7px 0;font-size:15px}
.trip .pn-row .av{width:32px;height:32px}
.trip .pn-row .av .mono{font-size:11px}
.trip .pnh{font-size:24px}
@media(max-width:820px){
  .trip .pn-row{font-size:16px}
}

/* ========================================== HOME OFFICE, CALENDAR ONLY
   With no bulletin the calendar is the whole section, so it stops being a
   narrow sidebar. Centred at a readable measure rather than stretched across
   the full column, where a 52px date against a far-right title would pull
   apart, and sized up a step since it is now the thing you came to read. */
.ho-grid.dates-only{grid-template-columns:1fr;max-width:680px;margin-left:auto;margin-right:auto}
.ho-grid.dates-only .ho-dates{padding:30px 34px}
.ho-grid.dates-only .dh{font-size:24px;margin-bottom:18px}
.ho-grid.dates-only .dt{font-size:15px;padding:6px 0;grid-template-columns:66px 1fr}
.ho-grid.dates-only .mo{margin:18px 0 8px}
/* The 52px date column was sized for 14px in a sidebar. At the promoted size
   "Sept 10" wraps in it, so the column grows with the type. */
.ho-grid.dates-only .dt .d{white-space:nowrap}
@media(max-width:820px){
  .ho-grid.dates-only .dt{font-size:16px;grid-template-columns:72px 1fr}
  .ho-grid.dates-only .ho-dates{padding:24px 22px}
}

/* The footer's Previous Issues is a button now, not an anchor with no href,
   so the keyboard reaches it. It takes the links' own rule above; this only
   strips the browser's button chrome. */
.footer .col button{background:none;border:0;margin:0;width:auto;text-align:left;-webkit-appearance:none;appearance:none}
@media(max-width:780px){.footer .col button{margin:0 auto;text-align:center}}

/* Team logos in the list avatars. The generic img.logo rule above loses to
   the per-list avatar rules, which are one class more specific and set cover,
   so the same fit is restated here at their specificity, last in the sheet. */
.trip .pace-row .av img.logo,.trip .pn-row .av img.logo,.qual-row .av img.logo,.ll .av img.logo,.subcard.faces .av img.logo{object-fit:contain;object-position:center;background:#fff;padding:7%;transform:scale(var(--logo-zoom,1));transform-origin:50% 50%}
/* In a 32px circle a wordmark needs nearly the whole circle, so the list avatars pad less than the award circle does. */

/* DARK. On a screen set to dark the page takes the colours Tech Setup, Tech
   Check and the Directory use (Elijah): the design system's deep navy
   (#1b2336) for the ground, the brand navy (#26304a) for cards, panels and
   the navy bands, light ink (coastal-100) for headings, the soft navy
   (#9aa8be) for body text, the ramp's pale blues for kickers and links, sky
   for the italic word and the buttons, and a 24% pale line for rules. The
   colour tokens take their dark values at the root, so every rule above
   follows without a second copy; what was a white section takes the ground
   here, and the avatars' pale circles take the bands' navy. What stays light
   stays light: photographs, logos on their white circles, the white buttons
   on navy (their ink is --band, which stays navy). Paper never sees it. */


@media screen and (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --deep-navy:#1b2336;--soft-navy:#9aa8be;
    --band:#26304a;--band-2:#3b4f6e;
    --white:#26304a;
    --coastal-900:#e8f0f5;--coastal-800:#c9dce8;--coastal-700:#6b94ba;
    --gray-700:#a7c4d8;--gray-600:#9aa8be;--gray-500:#9aa8be;--gray-400:#89adc8;
    --gray-200:rgba(167,196,216,.24);--gray-100:#1b2336;--gray-50:#1b2336;
    --sand-100:#1b2336;--sand-200:#26304a;--sand-300:rgba(167,196,216,.24);
    --coastal-50:#1b2336;
  }
  html:not([data-theme="light"]){background:var(--deep-navy)}
  :where(html:not([data-theme="light"])) ::selection{background:#89adc8;color:#26304a}
  /* The partners sign in navy ink on a clear ground, so in the dark the ink
     turns pale, the way the rest of the page's type does. */
  :where(html:not([data-theme="light"])) .letter .body .sig,:where(html:not([data-theme="light"])) .letter .signatories img{filter:brightness(0) invert(94%)}
  :where(html:not([data-theme="light"])) #app,:where(html:not([data-theme="light"])) section.hub-latest,:where(html:not([data-theme="light"])) section.hub-all,:where(html:not([data-theme="light"])) .corner,:where(html:not([data-theme="light"])) .awards,:where(html:not([data-theme="light"])) .recap,:where(html:not([data-theme="light"])) .reminder,:where(html:not([data-theme="light"])) .insta,:where(html:not([data-theme="light"])) .b2s,:where(html:not([data-theme="light"])) .training,
  :where(html:not([data-theme="light"])) .headshot-cta.ground-white{background:var(--deep-navy)}
  :where(html:not([data-theme="light"])) .issue-card,:where(html:not([data-theme="light"])) .hub-feature,:where(html:not([data-theme="light"])) .ev-card{background:var(--white)}
  /* The closing block (the note invitation and the footer) is the page's own
     ground in the dark, set off by a hairline, rather than a lighter navy band
     that reads as a seam; the overscroll past it is the same colour. */
  :where(html:not([data-theme="light"])) .feedback,:where(html:not([data-theme="light"])) .footer{background:var(--deep-navy)}
  :where(html:not([data-theme="light"])) .feedback,:where(html:not([data-theme="light"])) .footer{border-top:1px solid var(--gray-200)}
  :where(html:not([data-theme="light"])) .feedback + .footer{border-top:0}
  :where(html:not([data-theme="light"])) .nav.solid{background:rgba(27,35,54,.96);box-shadow:0 1px 0 var(--gray-200)}
  :where(html:not([data-theme="light"])) .nav.menu-open{background:rgba(27,35,54,.93)}
  :where(html:not([data-theme="light"])) .event:hover{background:rgba(167,196,216,.06)}
  :where(html:not([data-theme="light"])) .mag-thumb{background:radial-gradient(120% 90% at 50% 35%,#26304a 0%,#1b2336 100%)}
  :where(html:not([data-theme="light"])) .mono,:where(html:not([data-theme="light"])) .person .ph,:where(html:not([data-theme="light"])) .award-card .aph,:where(html:not([data-theme="light"])) .svc-card .ph,
  :where(html:not([data-theme="light"])) .trip.ground-light .pace-row .av,:where(html:not([data-theme="light"])) .trip.ground-light .mono,
  :where(html:not([data-theme="light"])) .quals.ground-light .qual-row .av,:where(html:not([data-theme="light"])) .quals.ground-light .mono,
  :where(html:not([data-theme="light"])) .service.ground-navy .svc-card.first .ph,:where(html:not([data-theme="light"])) .service.ground-navy .svc-card.first .mono{background:var(--band-2);color:var(--coastal-300)}
}