@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;src:url('/Fonts/Fraunces-latin-var-v2.woff2') format('woff2');}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400 700;font-display:swap;src:url('/Fonts/Fraunces-Italic-latin-var-v2.woff2') format('woff2');}
/* ============================================================
   LA TODAY — SHARED DESIGN SYSTEM
   Two families: FUTURA NOW = structure · FRAUNCES = voice.
   Every reference page links this file. One source of truth.
   Hero/H1 = variant B (700 · SOFT 20 · −0.012em · lh 1.06).
   ============================================================ */

/* ============================================================================
   LA TODAY — FUTURA NOW WEIGHT SCALE (locked 2026-07-09)
   ----------------------------------------------------------------------------
   TWO FACES ONLY. Bold 700 · ExtraBold 800. ExtraBlack is DELETED — it is never
   used, it was hijacking the 800 slot, and dropping it removes a font file.

   THE RULE — weight comes DOWN as size goes UP.
   Large type is already loud. Mass at 64px reads as shouting; at 18px it reads
   as confidence. Prestige at any size comes from contrast and air, not weight.

     ≥ 26px   →  700 Bold        display, section heads, article H2, stat numerals
     18–25px  →  800 ExtraBold   card headlines, sub-heads, form heads
     ≤ 13px   →  700 Bold        kickers, eyebrows, meta, buttons, letterspaced caps

   Hero H1 is Fraunces 700, never Futura, never Black. (Mark flagged heavy hero
   type in two separate sessions. Treat as settled.)

   ⛔ Never add a weight. Never reintroduce 950. If a headline needs more presence,
      change its SIZE or its COLOR, not its mass.
   ============================================================================ */

@font-face{font-family:'Futura Now';font-weight:700;font-style:normal;font-display:swap;src:url('/Fonts/futura-now-headline/FuturaNowHeadlineBold-latin.woff2') format('woff2'),url('/Fonts/futura-now-headline/FuturaNowHeadlineBold.ttf') format('truetype');}
@font-face{font-family:'Futura Now';font-weight:800;font-style:normal;font-display:swap;src:url('/Fonts/futura-now-headline/FuturaNowHeadlineExtraBold-latin.woff2') format('woff2'),url('/Fonts/futura-now-headline/FuturaNowHeadlineExtraBold.ttf') format('truetype');}
:root{
  --paper:#FFFFFF; --paper-2:#F4F5F7; --ink:#0f0e0c; --ink-2:#2b2925;
  --mute-1:#6d6a62;
  /* --mute-2 was #a8a49a = 2.49:1 on white → WCAG FAIL. Split by surface. */
  --mute-2:#6F6C64;        /* tertiary text ON LIGHT — 5.35:1, passes */
  --mute-2-dark:#a8a49a;   /* tertiary text ON INK only — 7.76:1, passes */
  --hair:#E7E9ED;          /* decorative hairline rules only (1.22:1) */
  --hair-strong:#898e95;   /* borders of INTERACTIVE controls — 3.30:1 white / 3.02:1 card, passes */
  --signal:#c32a32; --signal-ink:#8e1a20; --signal-wash:#fbe9ea;
  --f-display:'Futura Now','Futura','Century Gothic','Helvetica Neue',sans-serif;
  --f-text:'Fraunces','Iowan Old Style','Georgia',serif;
  --max:1320px; --measure:700px; --gutter:clamp(20px,4vw,56px); --rule:1px solid var(--hair);
  /* Scrollbar width, for anything that breaks out of the measure to full bleed.
     100vw counts the scrollbar; the viewport's usable width does not, so a plain
     100vw rail sat 8px wider than the page and gave every spotlight a horizontal
     scrollbar.

     This has to be a real length, NOT calc(100vw - 100%). A custom property is
     substituted as a TOKEN LIST, so that 100% would resolve against whatever box
     used the variable -- inside the 700px measure it made the "full bleed" rail
     exactly 700px wide. Measured once and set by the gallery script instead; 0 is
     the correct fallback because that is the old behaviour, and body{overflow-x:clip}
     below catches the difference for anyone whose JS never runs. */
  --sbw:0px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--f-text);font-weight:400;font-size:18px;line-height:1.72;
  font-variation-settings:"opsz" 14,"SOFT" 0,"WONK" 0;color:var(--ink-2);background:var(--paper);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
a:hover{color:var(--signal);}
button,input,textarea,select{font-family:inherit;font-size:inherit;}
button{cursor:pointer;}

/* ---------- FOCUS (WCAG 2.2 AA — was entirely missing) ---------- */
:focus{outline:none;}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px;border-radius:4px;}
.newsletter :focus-visible,.xband :focus-visible,.hidden-gems :focus-visible,.raildark :focus-visible{outline-color:#fff;}

/* ---------- SKIP LINK ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:#fff;
  font-family:var(--f-display);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  padding:14px 22px;border-radius:0 0 8px 0;}
.skip:focus{left:0;color:#fff;}

/* Visually hidden, but read by screen readers and counted in the heading outline. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}

/* ---------- Futura roles ---------- */
.eyebrow{font-family:var(--f-display);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--signal);}
.kicker{display:inline-block;font-family:var(--f-display);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--signal);padding-bottom:2px;border-bottom:2px solid var(--signal);margin-bottom:18px;}
.meta{font-family:var(--f-display);font-weight:700;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute-1);}

/* ---------- NAV (master) ---------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.86);border-bottom:var(--rule);backdrop-filter:saturate(140%) blur(8px);}
.nav-inner{max-width:var(--max);margin:0 auto;padding:12px var(--gutter);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:32px;}
.brand{display:inline-block;line-height:0;}
.brand img{width:42px;height:42px;border-radius:4px;}
.wx{display:inline-flex;align-items:center;gap:8px;margin-left:14px;padding-left:14px;border-left:1px solid var(--hair);font-family:var(--f-display);font-weight:700;font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--mute-1);}
.wx .sun{color:var(--signal);display:grid;place-items:center;}
.wx b{color:var(--ink);font-weight:800;}
.nav-links{display:flex;justify-content:center;gap:26px;list-style:none;}
.nav-links a{font-family:var(--f-display);font-weight:700;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);}
.nav-links a.on,.nav-links a:hover{color:var(--signal);}
.nav-actions{display:flex;align-items:center;gap:14px;}
.icon-btn{width:44px;height:44px;border-radius:999px;border:1px solid var(--hair-strong);background:transparent;display:grid;place-items:center;color:var(--ink);}
.icon-btn:hover{background:var(--paper-2);}
/* padding-top positions the CAP BAND. .204em centres it MATHEMATICALLY (measured: 0.09px
   off), but uppercase in a pill reads low at that value -- the rounded ends and the flat
   cap tops pull the eye down. Mark called it twice, so this is set 1px ABOVE true centre
   on purpose. .204em = mathematically centred, .05em = optically centred. Do not
   'correct' this back without looking at it.
   Original note follows: padding-top optically centres the CAP BAND. Flex centres the line box, but the
   line box carries descender space that uppercase text never uses, so the caps
   land 0.102em high. Measured, not eyeballed. See also USE_TYPO_METRICS on the
   Futura subsets -- without it Windows used usWin* (1.632em box) and the same
   text sat LOW there while sitting HIGH everywhere else. */
.pill{font-family:var(--f-display);font-weight:700;font-size:13px;letter-spacing:.1em;background:var(--signal);color:#fff;min-height:44px;display:inline-flex;align-items:center;justify-content:center;line-height:1;text-indent:.1em;padding:.05em 24px 0;border-radius:999px;border:none;text-transform:uppercase;transition:background .2s;}
.pill:hover{background:var(--signal-ink);}
/* MOBILE NAV. Fail-safe, same inversion as the homepage reveal script: with JS off
   .nav-links simply wraps onto a second row and every section stays reachable. Only
   with <html class="js"> does it collapse into a toggled drawer. The old rule here
   hid .nav-links below 1000px with no replacement. */
.nav-toggle{display:none;}
@media(max-width:1000px){
  .wx{display:none;}
  .nav-inner{grid-template-columns:auto 1fr auto;row-gap:4px;column-gap:16px;}
  .nav-links{grid-column:1/-1;flex-wrap:wrap;justify-content:center;gap:12px 22px;padding:6px 0 2px;}
  .nav-links a{font-size:12.5px;min-height:44px;display:inline-flex;align-items:center;}
  html.js .nav-toggle{display:grid;}
  html.js .nav-links{position:fixed;left:0;right:0;top:var(--nav-h,67px);grid-column:auto;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:6px var(--gutter) 22px;background:var(--paper);border-bottom:var(--rule);box-shadow:0 18px 40px rgba(0,0,0,.10);max-height:calc(100dvh - var(--nav-h,67px));overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .18s ease,transform .18s ease,visibility .18s;}
  html.js .nav-links li{border-bottom:1px solid var(--hair);}
  html.js .nav-links li:last-child{border-bottom:0;}
  html.js .nav-links a{display:flex;align-items:center;min-height:56px;font-size:15px;letter-spacing:.09em;}
  html.js .nav[data-open="true"] .nav-links{opacity:1;visibility:visible;transform:none;}
}
@media(max-width:520px){.nav-actions .pill{padding:0 16px;font-size:12px;}}
.nav-toggle .bar{transition:transform .18s ease;transform-origin:center;}
.nav[data-open="true"] .nav-toggle .bar-1{transform:translateY(3.5px) rotate(45deg);}
.nav[data-open="true"] .nav-toggle .bar-2{transform:translateY(-3.5px) rotate(-45deg);}
@media(prefers-reduced-motion:reduce){html.js .nav-links,.nav-toggle .bar{transition:none;}}

/* ---------- shared bits ---------- */
.crumbs{font-family:var(--f-display);font-weight:700;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute-1);display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px;}
.crumbs .sep{color:var(--mute-2);}

.btn{display:inline-block;font-family:var(--f-display);font-weight:700;font-size:13px;letter-spacing:.05em;text-transform:uppercase;padding:14px 26px;border-radius:999px;border:1px solid var(--ink);color:var(--ink);background:transparent;transition:all .2s;}
.btn:hover{background:var(--ink);color:#fff;}
.btn.primary{background:var(--signal);border-color:var(--signal);color:#fff;}
.btn.primary:hover{background:var(--signal-ink);border-color:var(--signal-ink);color:#fff;}
.btn.light{border-color:#fff;color:#fff;}
.btn.light:hover{background:#fff;color:var(--ink);}

/* ---------- PAGE HEADER (hubs + editorial pages) ---------- */
.pagehead{max-width:var(--max);margin:0 auto;padding:44px var(--gutter) 0;}
.pagehead .inner{max-width:820px;}
.pagehead .eyebrow{display:block;margin-bottom:18px;letter-spacing:.16em;}
.pagehead h1{font-family:var(--f-text);font-weight:700;font-size:clamp(38px,5.2vw,74px);line-height:1.06;letter-spacing:-.012em;
  font-variation-settings:"opsz" 96,"SOFT" 20,"WONK" 0;color:var(--ink);margin-bottom:24px;text-wrap:balance;}
.pagehead h1 em{font-style:italic;font-weight:400;color:var(--signal);font-variation-settings:"opsz" 96,"SOFT" 80;}
.pagehead .dek{font-family:var(--f-text);font-style:italic;font-size:22px;line-height:1.5;font-variation-settings:"opsz" 36,"SOFT" 70;color:var(--ink-2);margin-bottom:26px;max-width:680px;}
.pagehead .headmeta{font-family:var(--f-display);font-weight:700;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute-1);display:flex;gap:14px;flex-wrap:wrap;padding-bottom:30px;}
.pagehead .headmeta .dot{color:var(--mute-2);}

/* answer-first block */
.answer{max-width:760px;background:var(--paper-2);border-left:3px solid var(--signal);border-radius:10px;padding:24px 28px;margin:0 0 40px;}
.answer .lbl{font-family:var(--f-display);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--signal);margin-bottom:10px;}
.answer p{font-size:17.5px;line-height:1.6;}
.answer strong{color:var(--ink);font-weight:700;}
.answer a{color:var(--signal);text-decoration:underline;}

/* ---------- JUMP NAV ---------- */
.jump{position:sticky;top:59px;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-top:var(--rule);border-bottom:var(--rule);}
.jump-inner{max-width:var(--max);margin:0 auto;padding:11px var(--gutter);display:flex;gap:8px;align-items:center;overflow-x:auto;scrollbar-width:none;}
.jump-inner::-webkit-scrollbar{display:none;}
.jump-lbl{font-family:var(--f-display);font-weight:700;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute-2);white-space:nowrap;margin-right:4px;}
.jump a{font-family:var(--f-display);font-weight:700;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink);background:var(--paper-2);border:1px solid var(--hair-strong);border-radius:999px;min-height:44px;display:inline-flex;align-items:center;padding:0 15px;white-space:nowrap;transition:all .18s;}
.jump a:hover,.jump a.active{background:var(--signal);border-color:var(--signal);color:#fff;}

/* ---------- CARDS ---------- */
.card .img{background:var(--paper-2);overflow:hidden;border-radius:6px;margin-bottom:14px;}
.card .img img{width:100%;height:100%;object-fit:cover;transition:transform .6s;}
.card:hover .img img{transform:scale(1.04);}
.card .k{font-family:var(--f-display);font-weight:700;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--signal);}
.card h3{font-family:var(--f-display);font-weight:800;color:var(--ink);line-height:1.1;letter-spacing:-.012em;margin-top:8px;text-wrap:balance;}
.card .dek{font-family:var(--f-text);font-style:italic;color:var(--mute-1);font-size:16px;line-height:1.55;margin-top:8px;font-variation-settings:"opsz" 18,"SOFT" 60;}

.featured{max-width:var(--max);margin:0 auto;padding:56px var(--gutter) 0;}
.feat-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:32px;}
.feat-side{display:flex;flex-direction:column;gap:28px;}
.feat-main .img{aspect-ratio:16/10;}
.feat-main h3{font-size:38px;line-height:1.04;}
.feat-main .dek{font-size:18px;}
.feat-side .card .img{aspect-ratio:16/10;}
.feat-side .card h3{font-size:21px;}
@media(max-width:900px){.feat-grid{grid-template-columns:1fr;}}

/* ---------- SUB-CATEGORY SECTIONS ---------- */
.subcat{max-width:var(--max);margin:0 auto;padding:76px var(--gutter) 0;scroll-margin-top:118px;}
.sc-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding-bottom:22px;border-bottom:2px solid var(--ink);margin-bottom:34px;}
.sc-head h2{font-family:var(--f-display);font-weight:700;font-size:clamp(28px,3.4vw,44px);line-height:.96;letter-spacing:-.025em;color:var(--ink);}
.sc-dek{font-family:var(--f-text);font-style:italic;color:var(--mute-1);font-size:16.5px;margin-top:10px;font-variation-settings:"opsz" 18,"SOFT" 60;max-width:560px;}
.sc-count{font-family:var(--f-display);font-weight:700;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute-2);margin-left:12px;}
.sc-head .more{font-family:var(--f-display);font-weight:700;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink);white-space:nowrap;padding-bottom:3px;border-bottom:1px solid var(--ink);}
.sc-head .more:hover{color:var(--signal);border-color:var(--signal);}
.sc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;}
.sc-grid .card .img{aspect-ratio:4/3;}
.sc-grid .card h3{font-size:19px;}
@media(max-width:1000px){.sc-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.sc-grid{grid-template-columns:1fr;}}

.grow .sc-grid{grid-template-columns:repeat(2,1fr);}
.grow-note{grid-column:1/-1;background:var(--paper-2);border:1px dashed var(--hair);border-radius:10px;padding:26px 28px;}
.grow-note .lbl{font-family:var(--f-display);font-weight:700;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--mute-1);margin-bottom:8px;}
.grow-note p{font-size:16.5px;color:var(--mute-1);font-style:italic;}
@media(max-width:700px){.grow .sc-grid{grid-template-columns:1fr;}}

/* ---------- AFFILIATE CTA (Stay) ---------- */
.aff{background:var(--signal-wash);border-radius:12px;padding:26px 28px;margin-top:26px;display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;}
.aff .lbl{font-family:var(--f-display);font-weight:700;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--signal-ink);margin-bottom:6px;}
.aff h3,.aff h4{font-family:var(--f-display);font-weight:800;font-size:22px;color:var(--ink);letter-spacing:-.012em;}
.aff p{font-style:italic;color:var(--mute-1);font-size:15.5px;margin-top:5px;font-variation-settings:"opsz" 16;}
/* Affiliate footnote. Deliberately NOT .disclosure -- that is a grey editorial panel at
   14.5px and it shouted mid-article. This sits under the button at 12px in tertiary ink:
   present and legible for anyone checking, invisible to anyone who is not. The FTC asks
   for clear and conspicuous, not loud, and it is adjacent to the link it describes. */
.aff-note{font-family:var(--f-display);font-weight:700;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mute-2);margin:10px 0 0;line-height:1.5;}
/* Leading the article instead of following a single button. A piece with two paid links in
   two different sections cannot use the adjacent-note pattern without repeating itself and
   still missing anyone who lands mid-page, so the note goes to the top and covers both.
   It needs air under it and a hairline, or it reads as a stray line above the lede. */
.aff-note:first-child{margin:0 0 26px;padding-bottom:14px;border-bottom:var(--rule);}
.disclosure{font-family:var(--f-text);font-style:italic;font-size:14.5px;color:var(--mute-1);background:var(--paper-2);border-radius:8px;padding:12px 16px;margin:22px 0;font-variation-settings:"opsz" 14;}

/* ---------- DARK CROSS-LINK BAND ---------- */
.xband{background:var(--ink);color:var(--paper);margin-top:96px;padding:74px var(--gutter);}
.xband-inner{max-width:var(--max);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;}
.xband .lbl{font-family:var(--f-display);font-weight:700;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute-2);margin-bottom:14px;}
.xband h2{font-family:var(--f-display);font-weight:700;font-size:clamp(28px,3.6vw,46px);line-height:1;letter-spacing:-.025em;color:var(--paper);}
.xband h2 em{font-family:var(--f-text);font-style:italic;font-weight:400;color:var(--signal-wash);font-variation-settings:"opsz" 72,"SOFT" 80;}
.xband p{color:var(--mute-2-dark);font-style:italic;margin-top:14px;max-width:460px;font-size:17px;font-variation-settings:"opsz" 18,"SOFT" 60;}
.xbtn{font-family:var(--f-display);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;background:var(--signal);color:#fff;padding:16px 30px;border-radius:999px;white-space:nowrap;}
.xbtn:hover{background:#fff;color:var(--ink);}

/* ---------- EDITORIAL PAGE (About / Contact / Advertise / Newsletter) ---------- */
.prose{max-width:var(--measure);margin:0 auto;padding:8px var(--gutter) 0;}
.prose p{margin-bottom:24px;font-size:19px;line-height:1.75;}
.prose h2{font-family:var(--f-display);font-weight:700;font-size:clamp(26px,3vw,36px);line-height:1.06;letter-spacing:-.022em;color:var(--ink);margin:46px 0 20px;scroll-margin-top:92px;}
.prose h3{font-family:var(--f-display);font-weight:800;font-size:22px;color:var(--ink);margin:30px 0 12px;letter-spacing:-.012em;}
.prose ul{margin:0 0 24px 22px;}
.prose li{margin-bottom:10px;}
.prose blockquote{font-style:italic;font-size:23px;line-height:1.5;color:var(--ink);border-left:2px solid var(--signal);padding-left:22px;margin:34px 0;font-variation-settings:"opsz" 36,"SOFT" 70;}
.prose a{color:var(--signal);text-decoration:underline;}

/* stat strip */
.stats{max-width:var(--max);margin:56px auto 0;padding:0 var(--gutter);display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--hair);border:1px solid var(--hair);border-radius:12px;overflow:hidden;}
.stat{background:var(--paper);padding:30px 24px;}
.stat .n{font-family:var(--f-display);font-weight:700;font-size:clamp(30px,3.4vw,44px);color:var(--ink);letter-spacing:-.03em;line-height:1;}
.stat .n em{font-family:var(--f-text);font-style:italic;font-weight:400;color:var(--signal);}
.stat .l{font-family:var(--f-display);font-weight:700;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--mute-1);margin-top:10px;}
@media(max-width:820px){.stats{grid-template-columns:1fr 1fr;}}

/* ---------- FORMS ----------
   Alignment rules that keep a form sleek:
   1. ONE column width for header + form. Never mix --max and --measure.
   2. Grid gap does ALL vertical rhythm. No sibling margins on grid children.
   3. Inputs and selects share an identical fixed height, or pairs won't line up.
   4. Hints reserve their height, so a field with a hint doesn't shove its
      neighbour down.
   5. Sections are hairlines + labels, not boxes — so every element on the
      page shares one left edge.                                            */
.form{max-width:820px;margin:0 auto;padding:0 var(--gutter);}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;}
.fgrid .full{grid-column:1/-1;}
@media(max-width:680px){.fgrid{grid-template-columns:1fr;}}

.field{display:flex;flex-direction:column;min-width:0;}
.field label{font-family:var(--f-display);font-weight:700;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-bottom:10px;}
.field label .req{color:var(--signal);margin-left:2px;}
.field label .opt{color:var(--mute-2);font-weight:700;}

.field input,.field select,.field textarea{
  width:100%;height:56px;border:1px solid var(--hair-strong);background:var(--paper-2);
  border-radius:10px;padding:0 16px;font-family:var(--f-text);font-size:17px;
  color:var(--ink);outline:none;font-variation-settings:"opsz" 14;
  transition:border-color .18s,background .18s,box-shadow .18s;
}
.field textarea{height:auto;min-height:164px;padding:16px;line-height:1.6;resize:vertical;}
.field select{
  appearance:none;-webkit-appearance:none;padding-right:46px;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%236d6a62' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 18px center;
}
.field input::placeholder,.field textarea::placeholder{color:var(--mute-2);font-style:italic;}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--signal);background:var(--paper);box-shadow:0 0 0 3px var(--signal-wash);
}
/* hint reserves its line so neighbouring fields stay level */
.field .hint{font-family:var(--f-text);font-style:italic;font-size:14.5px;line-height:1.35;
  color:var(--mute-1);margin-top:9px;min-height:20px;font-variation-settings:"opsz" 14;}
/* only stack margins OUTSIDE a grid */
.stack .field+.field{margin-top:24px;}

/* section = hairline + label. No box, so everything shares one left edge. */
.fsec{border-top:1px solid var(--hair);padding-top:34px;margin-top:44px;}
.fsec:first-of-type{border-top:none;padding-top:0;margin-top:8px;}
.fsec-head{display:flex;align-items:baseline;gap:14px;margin-bottom:26px;}
.fsec-head .n{font-family:var(--f-display);font-weight:800;font-size:26px;line-height:1;color:var(--signal);letter-spacing:-.03em;}
.fsec-head h3{font-family:var(--f-display);font-weight:800;font-size:21px;color:var(--ink);letter-spacing:-.012em;}
.fsec-head .note{font-family:var(--f-text);font-style:italic;font-size:15px;color:var(--mute-2);margin-left:auto;font-variation-settings:"opsz" 14;}
@media(max-width:600px){.fsec-head .note{display:none;}}

.formactions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:44px;padding-top:34px;border-top:1px solid var(--hair);}
.formactions .fine{font-family:var(--f-text);font-style:italic;color:var(--mute-1);font-size:15px;font-variation-settings:"opsz" 14;}
.honeypot{position:absolute;left:-9999px;}

/* ---------- RATE CARD TABLE (Advertise) ---------- */
.rates{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);}
.ratecards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.rc{border:1px solid var(--hair);border-radius:14px;padding:32px 28px;display:flex;flex-direction:column;transition:box-shadow .25s,transform .25s;}
.rc:hover{box-shadow:0 14px 34px rgba(15,14,12,.08);transform:translateY(-3px);}
.rc.feature{border-color:var(--signal);position:relative;}
.rc.feature::before{content:'Most popular';position:absolute;top:-11px;left:28px;background:var(--signal);color:#fff;font-family:var(--f-display);font-weight:700;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;padding:5px 12px;border-radius:999px;}
.rc .name{font-family:var(--f-display);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--signal);margin-bottom:14px;}
.rc .price{font-family:var(--f-display);font-weight:700;font-size:44px;color:var(--ink);letter-spacing:-.03em;line-height:1;}
.rc .price small{font-family:var(--f-text);font-style:italic;font-weight:400;font-size:16px;color:var(--mute-1);letter-spacing:0;}
.rc .desc{font-style:italic;color:var(--mute-1);font-size:16px;margin:14px 0 22px;font-variation-settings:"opsz" 16;}
.rc ul{list-style:none;margin-bottom:28px;}
.rc li{display:flex;gap:10px;align-items:flex-start;font-size:16.5px;padding:8px 0;border-bottom:1px dashed var(--hair);}
.rc li::before{content:'—';color:var(--signal);font-family:var(--f-display);font-weight:700;flex:none;}
.rc .btn{margin-top:auto;text-align:center;}
@media(max-width:940px){.ratecards{grid-template-columns:1fr;}}

/* ---------- NEWSLETTER BAND (master) ---------- */
.newsletter{background:var(--signal);color:var(--paper);padding:100px var(--gutter) 108px;text-align:center;}
.nl-inner{max-width:920px;margin:0 auto;}
.nl-eyebrow{font-family:var(--f-display);font-weight:700;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--signal-wash);margin-bottom:22px;}
.newsletter h2{font-family:var(--f-display);font-weight:700;font-size:clamp(40px,6.4vw,84px);line-height:.98;letter-spacing:-.028em;color:var(--paper);margin-bottom:36px;text-wrap:balance;}
.newsletter h2 em{font-family:var(--f-text);font-style:italic;font-weight:400;font-variation-settings:"opsz" 96,"SOFT" 90;}
.nl-form{display:flex;gap:10px;max-width:520px;margin:0 auto;padding:8px;background:var(--paper);border-radius:999px;}
.nl-form input{flex:1;min-width:0;border:none;background:transparent;padding:14px 22px;font-family:var(--f-text);font-size:16px;color:var(--ink);outline:none;font-variation-settings:"opsz" 14;}
.nl-form button{background:var(--ink);color:#fff;border:none;border-radius:999px;padding:12px 28px;font-family:var(--f-display);font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;text-indent:.08em;display:inline-flex;align-items:center;justify-content:center;line-height:1;}
.nl-form button:hover{background:var(--signal-ink);}
.nl-privacy{margin-top:16px;font-size:14px;color:var(--signal-wash);opacity:.92;}
@media(max-width:560px){.nl-form{flex-direction:column;border-radius:18px;}.nl-form button{width:100%;}}

/* ---------- FOOTER (master) ---------- */
.footer{background:var(--paper-2);padding:72px var(--gutter) 32px;}
.footer-inner{max-width:var(--max);margin:0 auto;}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;padding-bottom:52px;border-bottom:var(--rule);}
.footer-brand img{width:72px;height:72px;border-radius:6px;}
.footer-brand p{font-family:var(--f-text);font-style:italic;color:var(--mute-1);margin-top:16px;max-width:280px;font-size:16px;font-variation-settings:"opsz" 18,"SOFT" 60;}
.footer-col h2,.footer-col h3,.footer-col h4{font-family:var(--f-display);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:16px;}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px;}
.footer-col a{font-family:var(--f-text);font-size:16px;color:var(--ink-2);font-variation-settings:"opsz" 14;}
.footer-bottom{padding-top:26px;display:flex;justify-content:space-between;gap:12px;font-family:var(--f-display);font-weight:700;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute-1);}
.footer-bottom .legal{display:flex;gap:20px;}
@media(max-width:860px){.footer-top{grid-template-columns:repeat(3,1fr);gap:20px 18px;}.footer-brand{grid-column:1/-1;}.footer-col a{font-size:14.5px;}.footer-bottom{flex-direction:column;}}

/* draft banner for un-wired references */
.draftbar{background:var(--ink);color:#F2F0EA;font-family:var(--f-display);font-weight:700;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;text-align:center;padding:11px 16px;border-bottom:2px solid var(--signal);}
.draftbar b{color:#fff;}

/* BUILD = a piece we intend to write. Never presented as published. */
.card .k.build{color:var(--mute-1);}
.card .k.build::before{content:'◇ ';}
.card.build h3{color:var(--mute-1);}
.card.build .img{opacity:.55;}

/* ---------- THE SIGNATURE ----------
   Red underline + ONE Fraunces italic accent word inside a Futura headline.
   Fires once per page, on the hero. Never twice. Straight 2px line, drawn on
   scroll-in; flat under prefers-reduced-motion. */
.sig-underline{color:var(--signal);max-width:420px;margin:-6px 0 30px;}
.sig-underline svg{width:100%;height:14px;display:block;}
.sig-underline path{stroke-dashoffset:0;}
html.js .sig-underline path{stroke-dasharray:400;stroke-dashoffset:400;animation:sigdraw .9s ease .25s forwards;}
@keyframes sigdraw{to{stroke-dashoffset:0;}}
@media(prefers-reduced-motion:reduce){html.js .sig-underline path{stroke-dasharray:none;stroke-dashoffset:0;animation:none;}}


/* ===== G6 · FOOTER BREATHING ROOM (build-system rule, never per-page) =====
   The gap between the last content block and the footer is the difference
   between "designed" and "generated". 96px mobile, 140px desktop. */
.footer{margin-top:96px;}
@media(min-width:900px){.footer{margin-top:140px;}}

/* ===== G10 · optical centering for uppercase letterspaced buttons =====
   Tracking adds trailing space on the right, pushing the label left of centre. */
.btn,.xbtn,.pill{text-indent:0.06em;}


/* ===== ROUND 3 FIXES (2026-07-21) ===== */
.pill:hover{color:#fff;}
.pagehead .inner{max-width:1040px;}
.pagehead h1{font-size:clamp(34px,4.4vw,58px);}
.nl-privacy{margin-top:26px;}

/* ===== MOBILE POLISH (2026-07-24) ===== */
/* Newsletter fine print: drop the "Hidden gems…" clause to its own line on phones
   so "published." never orphans. Applies to home, hubs, and the newsletter page. */
@media(max-width:560px){.nl-privacy .nlx,.fine .nlx{display:block;}}
/* Hub H1s: nudge the mobile size so the longest title ("Where to Stay in Los Angeles")
   breaks at the same width as the shorter hub titles instead of tipping over first. */
@media(max-width:820px){.pagehead h1{font-size:clamp(30px,5.4vw,52px);text-wrap:balance;}}
/* Hub "Start here" answer box: on mobile it was pushing the first article card way
   down the page before a reader ever saw a cover photo. Hide it below the breakpoint
   where the page is already stacked single-column so the featured guides show up
   right after the dek. Desktop/tablet keep it as-is. (2026-07-26, Mark) */
@media(max-width:820px){.answer{display:none;}}
/* Mobile menu: surface the footer/Company links inside the dropdown so they aren't buried
   at the bottom of the page. Hidden on desktop (the top nav stays lean). */
.nav-more{display:none;}
@media(max-width:1000px){.nav-links .nav-more{display:block;}html.js .nav-links .nav-more:first-of-type{border-top:2px solid var(--hair-strong);}}
/* Belt and braces for the full-bleed gallery rail: nothing may scroll the PAGE
   sideways. `clip`, not `hidden` -- hidden would turn body into a scroll container
   and break .nav and .jump, which are position:sticky. clip does not. */
body{overflow-x:clip;}

/* ============================================================================
   GALLERY RAIL (2026-07-27, Mark)
   ----------------------------------------------------------------------------
   The event write-ups stack full-width photos one under another --
   la-comic-con-after-party-2024 has a run of SEVENTEEN in a row -- so the read
   collapses into a scroll marathon and the words in between get lost. This is the
   horizontal rail that fixes it. `<div class="gallery">` was already in the body of
   eight articles and had never been styled anywhere.

   TWO THINGS WENT WRONG BEFORE THIS VERSION, both worth not repeating.

   1. EQUAL-WIDTH COLUMNS. grid-auto-columns:minmax(0,X) lets a track shrink to fit
      instead of overflowing, so a five-photo rail rendered as five thumbnails and the
      arrows hid themselves because nothing overflowed.

   2. THE TEMPLATE WON THE CASCADE. Astro adds an attribute selector to scoped styles,
      so `.body img[data-astro-xxx]` outranked `.gallery > figure img` and every frame
      computed to width:0. The page looked like blank space with a scrollbar. The
      per-image rules therefore live in the TEMPLATES now, next to the rule they have
      to beat -- see the gallery block in post/[slug].astro and spotlight/[slug].astro.
      Anything here that the templates also set will lose. Check both before editing.

   HOW IT SIZES. One height per rail, chosen by that rail's own median aspect ratio,
   which lib/gallery.ts stamps as data-orient at build time from the width/height
   attributes. A red-carpet album of fifteen verticals and a venue album of eight
   horizontals are different objects and a single shared height flatters neither.
   Within a rail every frame shares a height and keeps its own width, which is the
   justified-row layout every serious photo gallery uses: nothing is cropped,
   nothing is stretched, and a portrait sitting next to a landscape looks deliberate.

   NOTHING IS CROPPED. No object-fit, no max-width cap, no forced aspect ratio. Mark's
   note was "they are cutting off the images" and the answer is to stop asking the
   browser to fit a photo into a box it does not fit.

   CSS-first: with JavaScript off this is still a swipeable scroller with snap points.
   The arrows, counter and edge fade are chrome.
   ============================================================================ */
.gal-wrap{
  position:relative;
  /* CENTRED BREAKOUT, not full bleed. Version 3, and the reason is in the note above:
     full bleed anchored the rail's first frame to the text's left edge and let it run to
     the right window edge. With three photos in a 1576px window that put ~1030px of
     pictures starting at x=494 with an empty 494px of paper on the left and the third
     frame clipped by the window, under a scrollbar that had 34px of travel. Correct by
     the spec I wrote and wrong on the screen: it read as the whole gallery shoved right.
     A block centred on the same axis as the text is symmetric at any photo count, so
     three photos centre and fifteen scroll, and neither looks like a mistake.
     50% here is half of .body, whose centre is the page centre, so this needs no --sbw
     and no 100vw: nothing about it can drift when a scrollbar appears. */
  width:min(1200px,92vw);
  margin-left:calc(50% - min(600px,46vw));
  margin-block:30px 34px;
}
.gallery{
  --gal-gap:14px;
  --gal-h:430px;                 /* overridden per orientation below */
  display:flex;
  align-items:flex-start;
  /* `safe center` is the whole trick. When the photos fit, they centre in the rail and
     there is no scrollbar. When they overflow, it degrades to flex-start instead of
     centring, so the first frame is never pushed off the left edge and unreachable,
     which is what plain `center` does to an overflowing flex row. */
  justify-content:safe center;
  gap:var(--gal-gap);
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  padding-inline:0;
  padding-bottom:14px;
  scrollbar-width:thin;
  scrollbar-color:var(--hair-strong) transparent;
}
/* a rail that never got wrapped still has to break out of the measure on its own */
.gallery:not(.gal-wrap > *){width:min(1200px,92vw);margin-left:calc(50% - min(600px,46vw));}
.gallery::-webkit-scrollbar{height:6px;}
.gallery::-webkit-scrollbar-thumb{background:var(--hair-strong);border-radius:999px;}
.gallery::-webkit-scrollbar-track{background:transparent;}
.gallery:focus-visible{outline:2px solid var(--signal);outline-offset:4px;}

/* Per-rail height. Portraits get room to show a face; a wall of landscapes does not
   need to be as tall to read, and letting it be shorter keeps more of them on screen. */
.gallery[data-orient="portrait"]{--gal-h:clamp(360px,58vh,560px);}
.gallery[data-orient="square"]{--gal-h:clamp(320px,48vh,470px);}
.gallery[data-orient="landscape"]{--gal-h:clamp(260px,40vh,400px);}
@media(max-width:760px){
  .gallery{--gal-gap:10px;}
  .gallery[data-orient="portrait"]{--gal-h:clamp(340px,62vh,460px);}
  .gallery[data-orient="square"]{--gal-h:clamp(280px,46vh,360px);}
  .gallery[data-orient="landscape"]{--gal-h:clamp(210px,34vh,290px);}
}

.gallery > figure{
  flex:0 0 auto;
  margin:0;
  scroll-snap-align:start;
  max-width:none;
}
.gallery > figure figcaption{
  font-family:var(--f-display);font-weight:700;font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--mute-2);margin-top:10px;line-height:1.4;
  max-width:min(360px,80vw);
}
/* a rail of one is just a photo */
.gallery:has(> figure:only-child){display:block;width:auto;margin-inline:0;padding-inline:0;}

/* --- edge fade: the only cue that there is more to the right ----------------- */
.gal-wrap::after{
  content:"";position:absolute;inset-block:0 24px;right:0;width:clamp(24px,5vw,64px);
  background:linear-gradient(to left,var(--paper),transparent);
  pointer-events:none;opacity:1;transition:opacity .2s;
}
.gal-wrap[data-end="1"]::after{opacity:0;}

/* --- progressive enhancement: arrows + counter ------------------------------- */
.gal-nav{
  display:flex;align-items:center;gap:10px;
  /* Sits inside .gal-wrap, so it inherits the centred rail width. It used to re-centre
     itself in var(--measure) with a gutter, which under the full-bleed rail put the
     counter and the arrows on a different axis from the photos they control. */
  margin:14px 0 0;
  padding-inline:0;
}
.gal-count{
  font-family:var(--f-display);font-weight:700;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute-2);margin-right:auto;
  font-variant-numeric:tabular-nums;
}
.gal-btn{
  width:40px;height:40px;flex:none;display:grid;place-items:center;
  border:1px solid var(--hair-strong);border-radius:999px;background:var(--paper);
  color:var(--ink);cursor:pointer;
  transition:background .18s,color .18s,border-color .18s,opacity .18s;
}
.gal-btn:hover:not(:disabled){background:var(--ink);border-color:var(--ink);color:#fff;}
.gal-btn:focus-visible{outline:2px solid var(--signal);outline-offset:2px;}
.gal-btn:disabled{opacity:.28;cursor:default;}
.gal-btn svg{width:15px;height:15px;pointer-events:none;}