/* Schurr Sound, shared stylesheet.
   See design-system.md. Every font size must come from the type scale below.
   No new sizes: if one seems necessary, revise the scale deliberately. */

:root{
  /* colour, the whole palette */
  --green:#1e3a2f; --green-deep:#152a21; --gold:#b8a15c; --gold-soft:#d6c493;
  --cream:#f0ead8; --paper:#fbf9f4; --ink:#26261f; --grey:#8a887e; --line:#e4ddc9;

  /* type scale */
  --fs-micro:11.5px;                    /* sub-nav links, tags */
  --fs-label:12.5px;                    /* eyebrows, meta, fine print, captions */
  --fs-nav:13.5px;                      /* nav links */
  --fs-small:14.5px;                    /* fact grid body, credit sub-lines */
  --fs-body:16px;                       /* all body text, everywhere */
  --fs-lead:18px;                       /* hero leads, standfirst */
  --fs-h3:clamp(19px,2vw,22px);         /* card titles, minor headings */
  --fs-h2:clamp(24px,2.8vw,30px);       /* section headings, article subheads */
  --fs-h1:clamp(30px,4.2vw,44px);       /* page titles */
  --fs-hero:clamp(38px,5.6vw,58px);     /* homepage hero only */
  --fs-ui:14px;                         /* buttons, wordmark, UI chrome */
  --fs-display-sm:clamp(20px,2.2vw,22px);  /* pull quotes, year columns, hero subs */
  --fs-display-lg:clamp(22px,2.6vw,26px);  /* full-width quote bands */

  /* line heights */
  --lh-body:1.75; --lh-lead:1.6; --lh-head:1.2;

  /* spacing scale */
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:40px; --sp-5:64px; --sp-6:80px;

  /* production status, data encoding shared by the map and its homepage preview */
  --status-shooting:#8a763a; --status-prep:#1d6a5a; --status-hearing:#a0642c;

  /* wayfinding blue. The map is the only blue thing on the site, in the nav
     and on the Stages layer, so "map" is learnable as a colour. */
  --blue:#3f7fa5; --blue-deep:#2f6284; --blue-tint:#eaf2f7;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{font-family:'Inter',Helvetica,Arial,sans-serif;color:var(--ink);background:var(--paper);line-height:var(--lh-lead);font-size:var(--fs-body)}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
img{max-width:100%;height:auto}

.wrap{max-width:1060px;margin:0 auto;padding:0 24px}
.rd{max-width:680px;margin:0 auto;padding:0 24px}
.eyebrow{font-size:var(--fs-label);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:600}

/* strip */
.strip{background:var(--green-deep);color:var(--gold-soft);text-align:center;padding:10px 16px;font-size:var(--fs-nav);letter-spacing:.06em}
.strip a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(184,161,92,.4)}
.strip a:hover{border-bottom-color:var(--gold)}
.strip strong{color:#fff;font-weight:600}

/* nav
   One definition for every page. --nav-h is written by assets/site.js from the
   real measured height and consumed by scroll-margin-top, so in-page anchors
   can never land underneath the bar. Below 620px the bar stops being sticky:
   at phone widths it is 170px+ tall and would eat a quarter of the screen. */
nav{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;margin-bottom:18px}
.nav-in{display:flex;align-items:center;justify-content:space-between;min-height:58px}
.wordmark{font-weight:600;letter-spacing:.32em;font-size:var(--fs-ui);text-decoration:none;color:var(--green)}
.wordmark span{color:var(--gold)}
.nav-links{display:flex;gap:26px;list-style:none}
.nav-links a{text-decoration:none;font-size:var(--fs-nav);color:var(--ink);letter-spacing:.04em}
.nav-links a[href="/notes/"]{color:var(--green);font-weight:600}
.nav-links a:hover{color:var(--green);border-bottom:2px solid var(--gold)}
.nav-links a[aria-current="page"]{color:var(--green);border-bottom:2px solid var(--gold)}
.nav-sub{border-top:1px solid var(--line);background:#fdfcf7}
.nav-sub-in{display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:76px;padding:20px 0;flex-wrap:wrap}
.nav-dl{display:flex;gap:4px;align-items:center}
.nav-sub a{text-decoration:none;font-size:var(--fs-micro);letter-spacing:.09em;text-transform:uppercase;padding:7px 12px;border-radius:4px;transition:background .15s,color .15s,border-color .15s}
.nav-sub a.dl{color:var(--grey);display:inline-flex;align-items:center;gap:7px}
.nav-sub a.dl .arw{color:var(--gold);font-size:var(--fs-label);line-height:1}
.nav-sub a.dl:hover{background:rgba(184,161,92,.16);color:var(--green)}
.nav-sub a.wt{color:var(--green);font-weight:600;background:rgba(184,161,92,.18);border:1px solid rgba(184,161,92,.5);display:inline-flex;align-items:center;gap:7px}
.nav-sub a.wt .arw{color:var(--gold);font-size:var(--fs-label);line-height:1}
.nav-sub a.wt:hover{background:var(--green);color:var(--cream);border-color:var(--green)}
.nav-sub a.wt:hover .arw{color:var(--gold-soft)}
/* the map button is blue so it never reads as another Wild Track link */
.nav-sub a.wt[href="/wild-track/map"]{color:var(--blue-deep);background:var(--blue-tint);border-color:rgba(63,127,165,.55)}
.nav-sub a.wt[href="/wild-track/map"] .arw{color:var(--blue)}
.nav-sub a.wt[href="/wild-track/map"]:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.nav-sub a.wt[href="/wild-track/map"]:hover .arw{color:#fff}
@media(max-width:900px){
  .strip{font-size:var(--fs-label);padding:8px 14px;line-height:1.5}
  nav .wrap{padding:0 20px}
  .nav-in{flex-wrap:wrap;padding:10px 0;row-gap:6px}
  .wordmark{font-size:var(--fs-label);letter-spacing:.24em;white-space:nowrap;margin-right:14px}
  .nav-links{gap:16px;flex-wrap:wrap;row-gap:6px}
  .nav-links a{font-size:var(--fs-label);white-space:nowrap}
  .nav-sub-in{min-height:0;padding:12px 0;gap:10px}
}
@media(max-width:620px){
  nav{position:static}
  .nav-in{justify-content:center;text-align:center}
  /* Six items on one row at phone widths, matching the map page. The six
     labels measure 285px, so the gap is what decides it: at 14px the row
     needs 355px and a 390px phone only offers 350, which put Contact on a
     line of its own. */
  .nav-links{justify-content:center;width:100%;gap:9px}
  .nav-links a{font-size:var(--fs-micro);letter-spacing:.02em}
  .nav-sub-in{flex-direction:column;align-items:stretch;justify-content:center;padding:10px 0 12px;row-gap:8px}
  .nav-sub a.wt{justify-content:center;flex:1 1 auto}
  .nav-dl{justify-content:center;flex-wrap:wrap}
}
/* 360px phones are 10px short of the six labels at a 9px gap */
@media(max-width:380px){.nav-links{gap:6px}}

/* page hero */
header.phero{background:linear-gradient(160deg,var(--green) 0%,var(--green-deep) 85%);color:var(--cream);padding:76px 0 64px}
header.phero.center{text-align:center}
header.phero h1{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:30px;font-size:var(--fs-h1);line-height:var(--lh-head);color:#fff;max-width:min(100%,30ch);text-wrap:balance}
header.phero.center h1{max-width:none;margin:0 auto}
header.phero .sub{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:20px;font-size:var(--fs-display-sm);color:var(--gold-soft);margin:16px 0 18px}
header.phero p.lead{font-size:var(--fs-body);color:#d9d4c2;max-width:60ch}
header.phero h1 + p.lead{margin-top:16px}
header.phero.center p.lead{margin:0 auto}
header.phero p.lead + p.lead{margin-top:14px}
@media(max-width:640px){header.phero{padding:48px 0 46px}}

/* buttons */
.btns{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}
header.phero.center .btns{justify-content:center}
.btn{display:inline-block;padding:13px 26px;border-radius:2px;font-size:var(--fs-ui);font-weight:600;letter-spacing:.05em;text-decoration:none}
.btn-gold{background:var(--gold);color:var(--green-deep)}
.btn-gold:hover{background:var(--gold-soft)}
.btn-line{border:1px solid var(--gold);color:var(--cream)}
.btn-line:hover{background:rgba(184,161,92,.14)}
.btn-green{background:var(--green);color:var(--cream)}
.btn-green:hover{background:var(--green-deep)}

/* sections */
section{padding:76px 0}
[id]{scroll-margin-top:calc(var(--nav-h,140px) + var(--sp-2))}
section.tight{padding:52px 0}
.sec-head{text-align:center;max-width:640px;margin:0 auto 44px}
h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:24px;font-size:var(--fs-h2);color:var(--green);margin-top:10px;line-height:var(--lh-head)}
h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:19px;font-size:var(--fs-h3);color:var(--green);margin:var(--sp-4) 0 12px;line-height:var(--lh-head)}
.sec-head p{color:var(--grey);margin-top:12px;font-size:var(--fs-body)}
.alt{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* prose */
.prose p{margin:0 0 var(--sp-2);font-size:var(--fs-body);line-height:var(--lh-body)}
.prose p.standfirst{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:20px;font-size:var(--fs-display-sm);color:var(--green);line-height:var(--lh-lead);margin-bottom:28px}
.prose ul,.prose ol{margin:0 0 20px 22px}
.prose li{margin-bottom:9px;font-size:var(--fs-body);line-height:var(--lh-body)}
.prose strong{font-weight:600}
.prose a{color:var(--green);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
.prose a:hover{color:var(--gold)}
.prose blockquote .attrib{display:block;margin-top:14px;font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;color:var(--grey);font-style:normal}
.prose blockquote.pull{font-size:24px;font-size:var(--fs-h2);line-height:1.28;font-style:normal;color:var(--ink);padding-left:26px;margin:38px 0}
.prose blockquote{border-left:3px solid var(--gold);padding:4px 0 4px 22px;margin:26px 0;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:20px;font-size:var(--fs-display-sm);color:var(--green);line-height:var(--lh-lead)}
.prose h2{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:600;
  font-size:24px;font-size:var(--fs-h2);
  color:var(--green);
  line-height:var(--lh-head);
  margin:var(--sp-4) 0 14px;
}
.prose>h2:first-child{margin-top:12px}
.art-title{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:30px;font-size:var(--fs-h1);line-height:var(--lh-head);color:var(--green);margin:6px 0 0}
.prose figure{margin:32px 0}
.prose figcaption{font-size:var(--fs-label);letter-spacing:.06em;color:var(--grey);margin-top:9px;font-style:italic}
.prose .colophon{font-size:var(--fs-small);color:var(--grey)}
.prose hr{border:none;border-top:1px solid var(--line);margin:38px 0}
.callout{background:#fff;border:1px solid var(--line);border-left:3px solid var(--gold);padding:22px 24px;margin:28px 0;border-radius:2px}
.callout p{font-size:var(--fs-body);line-height:var(--lh-body);margin-bottom:10px}
.callout p:last-child{margin-bottom:0}
.callout h4{font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
/* .callout.rule: the short standing statement inside a Field Note. Same box
   as a callout, green rather than gold so a rule reads differently from an
   aside, and set in the display face at the pull-quote size. */
.callout.rule{border-left-color:var(--green);background:#f4f8f6}
.callout.rule h4{color:var(--green)}
.callout.rule p{font-family:'Cormorant Garamond',Georgia,serif;font-size:20px;font-size:var(--fs-display-sm);line-height:1.34;color:var(--green)}
/* .bio, sibling of .callout. Marks the third person biography block, which
   stays third person because that is the form AI systems and press quote. */
.bio{background:#fff;border:1px solid var(--line);border-left:3px solid var(--gold);padding:var(--sp-3) var(--sp-3) var(--sp-2);margin:0 0 var(--sp-3);border-radius:2px}
.bio::before{content:"Biography";display:block;font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:var(--sp-2)}
.bio p:last-child{margin-bottom:0}
/* the point where the page changes from third person to first */
hr.voice-shift{border:none;border-top:2px solid var(--gold);width:60px;margin:var(--sp-5) auto}

/* meta line */
.meta{font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft)}
.meta-ink{font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-bottom:6px}

/* fact grid */
.facts-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.facts-grid.three{grid-template-columns:repeat(3,1fr)}
.facts-grid.two{grid-template-columns:repeat(2,1fr)}
.facts-grid.one{grid-template-columns:1fr}
.fact{background:var(--paper);padding:28px 24px}
.alt .fact{background:#fff}
.fact h4{font-size:var(--fs-label);letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.fact p{font-size:var(--fs-small);color:var(--ink)}
/* a fact box used as a document download: title line above the description */
.fact h3{font-size:19px;font-size:var(--fs-h3);margin:0 0 var(--sp-1)}
.fact h3 a{color:var(--green);text-decoration:none;border-bottom:2px solid var(--gold)}
.fact h3 a:hover{color:var(--gold)}
@media(max-width:720px){.facts-grid,.facts-grid.three{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.facts-grid,.facts-grid.three,.facts-grid.two{grid-template-columns:1fr}}

/* credit rows */
.credit{display:grid;grid-template-columns:86px 1fr;gap:20px;padding:28px 0;border-bottom:1px solid var(--line);align-items:baseline}
.credit:last-child{border-bottom:none}
.credit .yr{font-family:'Cormorant Garamond',Georgia,serif;font-size:20px;font-size:var(--fs-display-sm);color:var(--gold)}
.credit h3{font-size:var(--fs-lead);font-weight:600;color:var(--ink);display:inline;font-family:'Inter',Helvetica,sans-serif;margin:0}
.credit .studio{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;color:var(--grey);margin-left:10px;font-size:var(--fs-body)}
.tag{display:inline-block;font-size:var(--fs-micro);font-weight:600;letter-spacing:.12em;text-transform:uppercase;background:var(--cream);color:var(--green);padding:3px 10px;border-radius:2px;margin-left:12px;vertical-align:2px}
.tag-emmy{background:#f3e6bb;color:#5c4708}
.tag-shooting{background:var(--status-shooting);color:#fff}
.tag-prep{background:var(--status-prep);color:#fff}
.tag-hearing{background:var(--status-hearing);color:#fff}
/* a tag leading a card is a block label, not an inline suffix */
.card .tag{margin-left:0;align-self:flex-start;margin-bottom:var(--sp-1)}
.credit .who{font-size:var(--fs-small);color:var(--ink);margin-top:8px}
.credit .where{font-size:var(--fs-small);color:var(--grey);font-style:italic;margin-top:2px}
.credit .note{font-size:var(--fs-body);color:var(--ink);margin-top:12px;line-height:var(--lh-body);max-width:70ch}
@media(max-width:720px){.credit{grid-template-columns:1fr}}

/* article cards */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
@media(min-width:1000px){body.home .alt .cards{grid-template-columns:repeat(4,1fr);gap:18px}}
body.home .alt .card p{font-size:var(--fs-small)}
@media(max-width:620px){.cards{grid-template-columns:1fr}}
.card{position:relative;background:#fff;border:1px solid var(--line);border-radius:2px;padding:28px 26px;display:flex;flex-direction:column;transition:background .15s ease,border-color .15s ease}
/* the whole card is the click target, via the card's own go link */
.card .go[href]::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;inset:0}
.card:has(.go[href]){cursor:pointer}
.card .go[href]:focus-visible::after{outline:2px solid var(--gold);outline-offset:-4px}
body.notes .card:not(.soon){border:1px solid var(--gold);box-shadow:0 1px 8px rgba(30,58,47,.06)}
body.notes .card:not(.soon):hover{background:var(--cream)}
.card h3{margin:8px 0 10px;font-size:19px;font-size:var(--fs-h3)}
.card p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink);margin-bottom:16px}
.card .go{margin-top:auto;font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;color:var(--green);text-decoration:none;font-weight:600}
.card .go:hover{color:var(--gold)}
.card.soon{background:#fdfcf7;border-style:dashed}
.card.soon h3{color:var(--grey)}

/* quote band */
.quote{background:var(--green-deep);color:var(--cream);text-align:center;padding:64px 24px}
.quote blockquote{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:22px;font-size:var(--fs-display-lg);line-height:var(--lh-lead);max-width:760px;margin:0 auto}
.quote cite{display:block;margin-top:20px;font-style:normal;font-size:var(--fs-label);letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
/* the band can hold more than one testimonial; wrap each in .q */
.quote .q + .q{margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px solid rgba(240,234,216,.18)}

/* cta band */
.cta{background:var(--green);color:var(--cream);padding:64px 0;text-align:center}
.cta h2{color:#fff}
.cta p{color:#c9c3ae;margin:14px auto 26px;max-width:56ch;font-size:var(--fs-body);line-height:var(--lh-body)}

/* footer */
footer{background:var(--green);color:var(--cream);padding:66px 0 38px}
.foot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;align-items:start}
@media(max-width:900px){.foot-grid{grid-template-columns:repeat(2,1fr);gap:32px}}
@media(max-width:620px){.foot-grid{grid-template-columns:1fr;gap:28px}}
.foot-grid h4{font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
footer a{color:var(--cream);text-decoration:none}
footer a:hover{color:var(--gold-soft)}
footer .fine{margin-top:44px;padding-top:22px;border-top:1px solid rgba(240,234,216,.18);font-size:var(--fs-label);color:#b8b3a1;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* breadcrumb */
.crumb{font-size:var(--fs-label);color:var(--grey);padding-top:18px}
.crumb a{color:var(--green);text-decoration:none}
.crumb a:hover{color:var(--gold)}

/* ============================================================
   Page-scoped rules. Everything above is shared.
   ============================================================ */

/* body.wild-track: newsletter archive, confirmation, issue pages */
body.wild-track .issues{padding:var(--sp-5) 0 var(--sp-6)}
body.wild-track .issue{display:flex;gap:22px;align-items:baseline;padding:26px 0;border-bottom:1px solid var(--line)}
body.wild-track .issue:first-child{padding-top:0}
body.wild-track .issue .no{font-family:'Cormorant Garamond',Georgia,serif;font-size:22px;font-size:var(--fs-display-lg);color:var(--gold);flex:0 0 auto;min-width:60px}
body.wild-track .issue .issue-body{flex:1}
body.wild-track .issue h3{font-size:19px;font-size:var(--fs-h3);font-weight:600;color:var(--ink);margin:0;font-family:'Inter',Helvetica,sans-serif}
body.wild-track .issue .date{font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase;color:var(--grey);margin-top:4px}
body.wild-track .issue .blurb{font-size:var(--fs-small);color:var(--grey);margin-top:var(--sp-1);max-width:56ch}
body.wild-track .issue .go{flex:0 0 auto}
body.wild-track .issue .go a{font-size:var(--fs-nav);font-weight:600;letter-spacing:.05em;color:var(--green);text-decoration:none;border-bottom:2px solid var(--gold);white-space:nowrap}
body.wild-track .issue .go a:hover{color:var(--gold)}
@media(max-width:560px){body.wild-track .issue{flex-wrap:wrap}body.wild-track .issue .go{margin-top:6px}}
body.wild-track .step1{background:var(--cream);border-bottom:1px solid var(--line);padding:0}
body.wild-track .step1 .wrap{display:flex;align-items:center;justify-content:center;gap:14px;padding:18px var(--sp-3);flex-wrap:wrap}
body.wild-track .step1 svg{flex:0 0 auto}
body.wild-track .step1 p{font-size:var(--fs-ui);color:var(--ink)}
body.wild-track .step1 strong{color:var(--green)}
body.wild-track header.phero .mark{font-size:38px;font-size:var(--fs-hero);color:var(--gold-soft);margin-bottom:18px;line-height:1}

body.wild-track .letter{padding:var(--sp-5) 0}
/* body.wild-track: issue pages (index.html, ep1.html) */
/* article carries .rd, whose padding shorthand has always won here. The old
   inline rule set 96px top padding and never applied. Keep parity. */
body.wild-track article p{font-size:var(--fs-body);line-height:var(--lh-body);margin:0 0 var(--sp-2);color:var(--ink)}
body.wild-track article a{color:var(--green)}
body.wild-track .g{color:var(--green);font-weight:600}
body.wild-track .muted{color:var(--grey)}
body.wild-track .sh{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:22px;font-size:var(--fs-display-lg);color:var(--green);border-bottom:2px solid var(--gold);padding-bottom:var(--sp-1);margin:34px 0 var(--sp-2)}
body.wild-track .sh .n{color:var(--gold);margin-right:var(--sp-1)}
body.wild-track .motto{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:22px;font-size:var(--fs-display-lg);color:var(--green);text-align:center;margin:30px 0;line-height:1.4}
body.wild-track .wt-note{background:var(--cream);border-left:3px solid var(--gold);border-radius:4px;padding:14px 18px;margin:0 0 var(--sp-2);font-style:italic}
body.wild-track .wt-fig{margin:6px 0 18px}
body.wild-track .wt-fig img{width:100%;border-radius:8px}
body.wild-track .wt-fig figcaption{font-size:var(--fs-label);color:var(--grey);margin-top:var(--sp-1);letter-spacing:0;font-style:normal}
body.wild-track .avail{background:var(--cream);border-radius:6px;padding:22px var(--sp-3);font-size:var(--fs-body);line-height:var(--lh-body);margin-top:var(--sp-1)}
body.wild-track .avail .k{font-size:var(--fs-label);letter-spacing:.18em;text-transform:uppercase;color:var(--green);font-weight:600;display:block;margin-bottom:var(--sp-1)}
body.wild-track .sign{margin-top:26px}
body.wild-track .sign .role{font-size:var(--fs-nav);color:var(--grey)}
body.wild-track .maplegend{display:flex;gap:20px;font-size:var(--fs-label);color:var(--grey);margin:var(--sp-1) 0 14px}
body.wild-track .dot{display:inline-block;width:11px;height:11px;border-radius:50%;vertical-align:-1px}
/* Map section breaks out of the reading column so the two-column map + list
   layout has room. left/transform rather than margin-left, because the
   element carries a margin shorthand that would override margin-left. */
body.wild-track #whats-shooting{width:min(1320px,calc(100vw - 32px));position:relative;left:50%;transform:translateX(-50%)}
@media(max-width:760px){body.wild-track #whats-shooting{width:auto;left:0;transform:none}}
body.wild-track .mapcard{background:#e9f0e9;border:1px solid var(--gold);border-radius:8px;padding:18px 20px 14px;margin:26px 0 var(--sp-1)}
body.wild-track .mapcard .k{font-family:'Inter',Helvetica,sans-serif;font-size:var(--fs-label);letter-spacing:.18em;color:var(--green);text-transform:uppercase;font-weight:600;margin-bottom:6px}
body.wild-track .mapcard .sub-note{font-size:var(--fs-small);margin-bottom:4px}
body.wild-track .mapcard p:last-of-type{margin-top:var(--sp-2);margin-bottom:0}
body.wild-track .mapframe{border:1px solid var(--gold);border-radius:8px;overflow:hidden;margin:4px 0 10px}
body.wild-track .mapframe iframe{width:100%;height:560px;border:0;display:block;background:#efece3;transition:height .2s ease}
body.wild-track .mapjump{display:flex;align-items:center;gap:18px;text-decoration:none;background:linear-gradient(135deg,var(--green) 0%,var(--green-deep) 100%);border-radius:8px;padding:18px 22px;margin:0 0 26px;transition:transform .15s ease}
body.wild-track .mapjump:hover{transform:translateY(-2px)}
body.wild-track .mapjump .mj-ico{flex:0 0 auto}
body.wild-track .mapjump .mj-txt{flex:1 1 auto;min-width:0}
body.wild-track .mapjump .mj-k{font-size:var(--fs-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:600;display:block}
body.wild-track .mapjump .mj-h{font-family:'Cormorant Garamond',Georgia,serif;font-size:22px;font-size:var(--fs-display-lg);color:#fff;line-height:1.25;display:block;margin:3px 0 4px}
body.wild-track .mapjump .mj-s{font-size:var(--fs-nav);color:#c9c3ae;display:block;line-height:1.5}
body.wild-track .mapjump .mj-arw{flex:0 0 auto;color:var(--gold);font-size:20px;font-size:var(--fs-display-sm)}
@media(max-width:560px){body.wild-track .mapjump{flex-wrap:wrap;gap:12px}body.wild-track .mapjump .mj-ico{display:none}}

/* ------------------------------------------------------------
   body.map: the standalone interactive production map
   (/whats-shooting, also iframed into the Wild Track issues).
   Fully scoped: this page reuses class names that mean something
   different in the shared layer (.meta, .tag, .dot, .wrap, .sub,
   .mapcard, .note, .n), so every rule is prefixed. It also carries
   its own canvas palette, kept under --map-* so it cannot shadow
   the canonical tokens.
   ------------------------------------------------------------ */
body.map{
  --map-bg:#efece3; --map-paper:#fffdf8; --map-ink:#2c2c28; --map-line:#d8d4c8;
}
body.map{margin:0;background:var(--map-bg);color:var(--map-ink);font-family:'Inter',Helvetica,Arial,sans-serif}
body.map .wrap{max-width:1560px;margin:0 auto;padding:28px 22px 60px}
body.map h1{font-family:"Cormorant Garamond",Georgia,serif;font-size:30px;font-size:var(--fs-h1);font-weight:600;
     letter-spacing:.5px;color:var(--green);margin:0 0 4px}
body.map .sub{font-size:var(--fs-label);letter-spacing:1.6px;text-transform:uppercase;color:var(--grey);margin-bottom:22px}
body.map .sticky-top{position:sticky;top:0;z-index:10;background:var(--map-bg);padding-top:2px;margin:0 -18px;padding-left:18px;padding-right:18px}
body.map .filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px;padding-top:10px}
body.map .filters button{font:inherit;font-size:var(--fs-label);letter-spacing:1px;text-transform:uppercase;
    padding:7px 14px;border:1px solid var(--map-line);background:var(--map-paper);color:var(--map-ink);
    border-radius:20px;cursor:pointer;transition:.15s}
body.map .filters button:hover{border-color:var(--gold)}
body.map .filters button[aria-pressed="true"]{background:var(--green);color:#f0ead8;border-color:var(--green)}
body.map .mapcard{background:#eaf0f4;border:1px solid var(--map-line);border-radius:10px;padding:8px;margin-bottom:18px}
  /* two-column: map left, list right, matched heights */
body.map .cols{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:22px;align-items:start}
body.map .col-list{max-height:var(--maph,620px);min-height:280px;overflow-y:auto;padding-right:6px;
    scrollbar-width:thin;scrollbar-color:var(--map-line) transparent}
body.map .col-list::-webkit-scrollbar{width:7px}
body.map .col-list::-webkit-scrollbar-thumb{background:var(--map-line);border-radius:4px}
body.map .col-list::-webkit-scrollbar-track{background:transparent}
body.map .listhead{font-size:var(--fs-micro);letter-spacing:1.6px;text-transform:uppercase;color:var(--grey);
    padding:0 0 8px 2px;position:sticky;top:0;background:var(--map-bg);z-index:2}
body.map .col-list li{padding:13px 15px;margin-bottom:9px}
body.map .col-list .t{font-size:var(--fs-lead)}
body.map .col-list .meta{font-size:var(--fs-label);margin-top:4px}
body.map .col-list .note{font-size:var(--fs-label);margin-top:4px}
@media(max-width:1100px){body.map .cols{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px}}
@media(max-width:700px){
  body.map .cols{grid-template-columns:1fr}
  body.map .col-list{max-height:none;overflow:visible;padding-right:0}
  body.map .listhead{position:static}
}
body.map svg{width:100%;height:auto;display:block;border-radius:6px}
body.map .land{fill:#dde5d8;stroke:#b3c2ae;stroke-width:.8;stroke-linejoin:round}
body.map .clabel{font-size:9.5px;letter-spacing:1.1px;text-transform:uppercase;fill:#7f8f7c;
    pointer-events:none;text-anchor:middle}
body.map .pin{cursor:pointer}
body.map .pin circle{stroke:#fffdf8;stroke-width:2.6;transition:transform .15s ease,stroke-width .15s ease;transform-box:fill-box;transform-origin:center}
body.map .pin:hover circle, body.map .pin.on circle{stroke:var(--green);stroke-width:4.5;transform:scale(1.35)}
body.map .pinnum{font-size:11px;font-weight:700;fill:#fff;pointer-events:none;text-anchor:middle}
body.map .base{fill:none;stroke:var(--green);stroke-width:1.6;stroke-dasharray:3 3}
body.map .baselab{font-size:10px;font-weight:600;letter-spacing:1px;fill:var(--green);text-anchor:middle}
body.map .legend{display:flex;gap:18px;flex-wrap:wrap;font-size:var(--fs-micro);color:var(--grey);
    padding:8px 4px 2px;border-top:1px solid var(--map-line);margin-top:6px}
body.map .dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:-1px}
body.map ol{list-style:none;margin:0;padding:0}
body.map li{background:var(--map-paper);border:1px solid var(--map-line);border-left:3px solid var(--map-line);
     border-radius:8px;padding:18px 20px;margin-bottom:14px;transition:.15s}
body.map li.on{box-shadow:0 1px 10px rgba(30,58,47,.13);background:#fff;border-color:var(--gold)}
body.map li[data-status="shooting"]{border-left-color:var(--status-shooting)}
body.map li[data-status="prep"]{border-left-color:var(--status-prep)}
body.map li[data-status="hearing"]{border-left-color:var(--status-hearing)}
body.map .t{font-family:"Cormorant Garamond",Georgia,serif;font-size:20px;font-size:var(--fs-display-sm);color:var(--green);font-weight:600}
body.map .n{display:inline-block;min-width:20px;font-size:var(--fs-micro);font-weight:700;color:var(--grey)}
body.map .meta{font-size:var(--fs-nav);margin-top:6px;letter-spacing:normal;text-transform:none;color:var(--map-ink)}
body.map .note{font-size:var(--fs-nav);color:var(--grey);margin-top:6px;line-height:1.55}
body.map .tag{display:inline-block;font-size:var(--fs-micro);letter-spacing:1.2px;text-transform:uppercase;font-weight:400;background:none;padding:2px 7px;border-radius:3px;margin-left:7px;vertical-align:2px;color:#fff}
body.map a{color:var(--green)}
/* ── The Stages layer ──────────────────────────────────────────────────
   Studios, not productions. Differentiated by SHAPE first and colour second:
   rounded squares against the production circles, filled when the place has
   been visited in person and hollow when the record is desk research. That
   survives greyscale, print and colour blindness, which colour alone does
   not. */
body.map{ --stage:var(--blue); }
body.map .stage{ cursor:pointer; }
body.map .stage rect{
  transition:transform .15s ease, stroke-width .15s ease;
  transform-box:fill-box; transform-origin:center;
}
body.map .stage.is-visited rect{ fill:var(--stage); fill-opacity:.92; stroke:#fffdf8; stroke-width:2.6; }
body.map .stage.is-desk rect{ fill:#fff; fill-opacity:.96; stroke:var(--stage); stroke-width:3.2; }
body.map .stage:hover rect,
body.map .stage:focus rect,
body.map .stage.on rect{ stroke:var(--green); stroke-width:4.5; transform:scale(1.22); }
body.map .stage:focus{ outline:none; }
body.map .stagelab{
  font-size:11px; font-weight:700; pointer-events:none; text-anchor:middle;
  letter-spacing:.02em;
}
body.map .stage.is-visited .stagelab{ fill:#fff; }
body.map .stage.is-desk .stagelab{ fill:var(--stage); }
body.map .pin:focus{ outline:none; }
body.map .pin:focus circle{ stroke:var(--green); stroke-width:4.5; transform:scale(1.35); }

/* Layer toggle.
   Each button states its own on/off condition and nothing else. It must not
   change appearance because the OTHER layer changed, which was the confusing
   part of the first version. On = filled in that layer's own colour with a
   tick. Off = hollow, grey, dashed, empty box. Readable at a glance and in
   greyscale. */
body.map .layers{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:0 0 12px;
}
body.map .layers .lab{
  font-size:var(--fs-label); letter-spacing:1.6px; text-transform:uppercase;
  color:var(--grey); margin-right:4px;
}
body.map .layers button{
  font:inherit; font-size:var(--fs-ui); font-weight:600; letter-spacing:.04em;
  padding:11px 20px 11px 15px; border-radius:26px; cursor:pointer;
  display:inline-flex; align-items:center; gap:10px;
  border:2px solid var(--map-line); background:#fff; color:var(--grey);
  transition:background .15s, border-color .15s, color .15s;
}
body.map .layers button .swatch{
  width:18px; height:18px; flex:0 0 auto; border:2px solid currentColor;
  background:transparent; position:relative;
}
/* shape echoes the marker it controls: circle for productions, square for stages */
body.map .layers button[data-layer="productions"] .swatch{ border-radius:50%; }
body.map .layers button[data-layer="stages"] .swatch{ border-radius:4px; }
body.map .layers button[aria-pressed="true"] .swatch::after{
  content:""; position:absolute; left:4px; top:0px; width:5px; height:10px;
  border:solid #fff; border-width:0 2.5px 2.5px 0; transform:rotate(43deg);
}
/* OFF is stated explicitly at the same specificity as ON, so it can never
   lose the cascade and leave a button looking switched on. */
body.map .layers button[data-layer="productions"][aria-pressed="false"],
body.map .layers button[data-layer="stages"][aria-pressed="false"]{
  background:#fff; color:var(--grey); border-color:var(--map-line); border-style:dashed;
}
body.map .layers button[data-layer="productions"][aria-pressed="false"] .swatch,
body.map .layers button[data-layer="stages"][aria-pressed="false"] .swatch{
  background:transparent; border-color:var(--grey);
}
body.map .layers button[aria-pressed="false"]:hover{ color:var(--map-ink); border-color:var(--grey); }

body.map .layers button[data-layer="productions"][aria-pressed="true"]{
  background:var(--status-shooting); border-color:var(--status-shooting); color:#fff;
}
body.map .layers button[data-layer="productions"][aria-pressed="true"] .swatch{
  background:rgba(255,255,255,.22); border-color:#fff;
}
body.map .layers button[data-layer="stages"][aria-pressed="true"]{
  background:var(--blue); border-color:var(--blue); color:#fff;
}
body.map .layers button[data-layer="stages"][aria-pressed="true"] .swatch{
  background:rgba(255,255,255,.22); border-color:#fff;
}
body.map .layers button .state{
  font-size:var(--fs-micro); letter-spacing:.1em; text-transform:uppercase;
  opacity:.75; font-weight:600;
}

/* stage rows in the list column */
/* "show on the map" control. On a phone this is the only thing that moves the
   view, so opening a disclosure no longer throws you back up to the map. */
body.map li[data-t],body.map li[data-s]{ position:relative; }
body.map .rowhead{ padding-right:34px; }
body.map button.tomap{
  position:absolute; top:11px; right:11px; width:26px; height:26px; padding:0;
  border:1px solid var(--map-line); border-radius:50%; background:#fff;
  color:var(--grey); cursor:pointer; display:inline-flex; align-items:center;
  justify-content:center; transition:.15s;
}
body.map button.tomap svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.6; }
body.map button.tomap:hover{ background:var(--green); border-color:var(--green); color:#fff; }
body.map li.stage-row button.tomap:hover{ background:var(--blue); border-color:var(--blue); }
body.map button.tomap:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

/* the letter or number lights up so you can see which row you landed on */
body.map li.on .n{
  background:var(--green); color:#fff; border-radius:4px;
  padding:1px 5px; margin-left:-5px;
}
body.map li.stage-row.on .n{ background:var(--blue); color:#fff; }

body.map li.stage-row{ border-left-color:var(--stage); }
body.map li.stage-row .n{ color:var(--stage); }
body.map .badges{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
body.map .badge{
  font-size:var(--fs-micro); letter-spacing:.06em; text-transform:uppercase;
  padding:2px 8px; border-radius:3px; border:1px solid var(--map-line); color:var(--grey);
}
body.map .badge-visited{ background:var(--stage); border-color:var(--stage); color:#fff; }
body.map .badge-stale{ background:#fff4e0; border-color:#e0c9a0; color:#8a5a12; }
body.map .badge-desk{ background:transparent; border-style:dashed; color:var(--stage); }
a.badge{ text-decoration:none; }
body.map a.badge-visited:hover{ background:var(--blue-deep); border-color:var(--blue-deep); }
body.map a.badge-stale:hover{ background:#f4e3c6; }
body.map .travel{
  margin-top:8px; padding:9px 11px; background:var(--blue-tint);
  border-left:3px solid var(--stage); border-radius:3px;
  font-size:var(--fs-label); line-height:1.5; color:var(--map-ink);
}
body.map .travel .prov{ display:block; margin-top:3px; color:var(--grey); font-style:italic; }
body.map .srcs{ margin-top:8px; font-size:var(--fs-micro); color:var(--grey); line-height:1.55; }
body.map .stamp{ margin-top:6px; font-size:var(--fs-micro); color:var(--grey); }
body.map details.more{ margin-top:8px; }
body.map details.more summary{
  cursor:pointer; font-size:var(--fs-label); color:var(--stage); font-weight:600;
}
body.map details.more ul{ margin:6px 0 0 18px; padding:0; }
body.map details.more li{
  background:none; border:0; border-radius:0; padding:2px 0; margin:0;
  box-shadow:none; font-size:var(--fs-label); color:var(--map-ink);
}
body.map .legend .sq{
  display:inline-block; width:10px; height:10px; border-radius:2px;
  margin-right:5px; vertical-align:-1px; box-sizing:border-box;
}
body.map .legend .sq-visited{ background:var(--stage); }
body.map .legend .sq-desk{ background:var(--map-paper); border:2px solid var(--stage); }
body.map .stage-link{ display:inline-block; margin-top:8px; margin-right:14px; font-size:var(--fs-label); font-weight:600; color:var(--blue-deep); text-decoration:none; border-bottom:1px solid var(--blue); }
body.map .stage-link:hover{ color:var(--blue); border-bottom-color:var(--blue-deep); }
body.map .dot-shooting{background:var(--status-shooting)}
body.map .dot-prep{background:var(--status-prep)}
body.map .dot-hearing{background:var(--status-hearing)}
body.map .map-by{font-size:var(--fs-micro);color:var(--grey);margin-top:var(--sp-1)}
body.map .map-by a{color:var(--grey)}
body.map .page-intro{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--map-ink);max-width:740px;margin:0 0 20px}
body.map .foot{margin-top:26px;padding-top:14px;border-top:1px solid var(--map-line);
    font-size:var(--fs-label);color:var(--grey);line-height:1.6}
body.map .empty{padding:var(--sp-3);text-align:center;color:var(--grey);font-size:var(--fs-small)}
  /* standalone site nav (hidden when embedded in the newsletter iframe) */
body.map nav{background:var(--map-paper);border-bottom:1px solid var(--map-line);margin-bottom:18px;position:static}
body.map .nav-in{max-width:1280px;margin:0 auto;padding:0 18px;display:flex;align-items:center;justify-content:space-between;height:58px}
body.map .wordmark{font-weight:600;letter-spacing:.32em;font-size:var(--fs-ui);text-decoration:none;color:var(--green)}
body.map .wordmark span{color:var(--gold)}
body.map .nav-links{display:flex;gap:26px;list-style:none;margin:0;padding:0}
body.map .nav-links li{background:none;border:0;border-radius:0;padding:0;margin:0;box-shadow:none}
body.map .nav-links a{text-decoration:none;font-size:var(--fs-nav);color:var(--map-ink);letter-spacing:.04em}
body.map .nav-links a:hover{color:var(--green);border-bottom:2px solid var(--gold)}
body.map .nav-links a[href="/notes/"]{color:var(--green);font-weight:600}
body.map .nav-links a.active{color:var(--green);border-bottom:2px solid var(--gold)}
@media(max-width:620px){
  body.map .nav-in{height:auto;flex-wrap:wrap;justify-content:center;padding:10px 18px;row-gap:8px}
  body.map .nav-links{gap:16px;flex-wrap:wrap;justify-content:center}
  body.map .nav-links a{font-size:var(--fs-label)}
}


/* .embedded is set on <html> by map.html when it detects it is in an iframe,
   so these must be compound on the root, not descendants of body. */
html.embedded body.map h1,html.embedded body.map .sub,html.embedded body.map .page-intro,html.embedded body.map nav{display:none}
html.embedded body.map .wrap{padding-top:10px}

/* body.press: the press page */
body.press section{padding:var(--sp-5) 0 var(--sp-6)}
body.press .block{margin-bottom:52px}
body.press .sect-h{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:24px;font-size:var(--fs-h2);color:var(--green);margin:0 0 4px}
body.press .sect-p{font-size:var(--fs-small);color:var(--grey);margin-bottom:18px}
/* source kickers and attributions, shared by every press component */
body.press .src{font-size:var(--fs-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:600}
body.press .inq{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:var(--fs-body);color:var(--green);border-left:3px solid var(--gold);padding-left:11px}
body.press .inq .attr{display:block;font-family:'Inter',Helvetica,sans-serif;font-style:normal;font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--grey);margin-top:6px}
/* quote band */
body.press .qband{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:44px 0 var(--sp-4)}
body.press .qhero{max-width:760px;margin:0 auto;text-align:center}
body.press .qhero .mark{font-family:'Cormorant Garamond',Georgia,serif;font-size:38px;font-size:var(--fs-hero);line-height:.6;color:var(--gold);display:block;margin-bottom:10px}
body.press .qhero q{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:24px;font-size:var(--fs-h2);line-height:1.34;color:var(--green);quotes:none}
body.press .qhero .attr{display:block;font-size:var(--fs-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--grey);margin-top:18px}
body.press .qrow{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:900px;margin:34px auto 0;padding-top:30px;border-top:1px solid var(--line)}
body.press .qrow .q2{text-align:center;padding:0 10px}
body.press .qrow q{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:var(--fs-lead);line-height:1.4;color:var(--green);quotes:none}
body.press .qrow .attr{display:block;font-size:var(--fs-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--grey);margin-top:11px}
/* media cards */
body.press .duo{display:grid;grid-template-columns:1fr 1fr;gap:22px}
body.press .mcard{background:#fff;border:1px solid var(--line);padding:0 22px 20px;display:flex;flex-direction:column}
body.press .mcard>.facade:first-child{margin:0 -22px var(--sp-2);width:calc(100% + 44px)}
body.press .mcard.pod{padding-top:22px}
body.press .mcard .inq{margin:2px 0 4px}
body.press .mcard h3{margin:6px 0 var(--sp-1)}
body.press .mcard p{font-size:var(--fs-nav);color:var(--grey);margin-bottom:12px}
body.press .mcard .more{margin-top:auto;padding-top:12px}
body.press .mcard .more a,body.press .ritem .go a{font-size:var(--fs-label);font-weight:600;letter-spacing:.05em;color:var(--green);text-decoration:none;border-bottom:2px solid var(--gold)}
/* click-to-load video facade */
body.press .facade{position:relative;width:100%;padding:0;border:0;background:#000;cursor:pointer;display:block;overflow:hidden;aspect-ratio:16/9}
body.press .facade img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block}
body.press .facade .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;background:rgba(30,58,47,.82);border:2px solid rgba(240,234,216,.9);transition:background .15s ease}
body.press .facade .play:after{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent #f0ead8}
body.press .facade:hover .play{background:var(--gold)}
body.press .vid{position:relative;width:100%;aspect-ratio:16/9;background:#000}
body.press .vid iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
body.press .pod h3{margin:6px 0}
body.press .pod p{font-size:var(--fs-nav);color:var(--grey);margin-bottom:12px}
body.press .pod iframe{width:100%;border:0;display:block}
/* read list */
body.press .rowlist{border-top:1px solid var(--line)}
body.press .ritem{display:flex;gap:20px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line)}
body.press .ritem .meta{flex:0 0 190px;font-size:inherit;letter-spacing:normal;text-transform:none;color:inherit}
body.press .ritem .meta .src{display:block}
body.press .ritem .meta .date{font-size:var(--fs-micro);color:var(--grey)}
body.press .ritem .body{flex:1}
body.press .ritem h3{margin:0}
body.press .ritem p{font-size:var(--fs-nav);color:var(--grey);margin-top:5px}
body.press .ritem .inq{margin-top:9px}
body.press .ritem .go{margin-top:9px}
@media(max-width:720px){
  body.press .qrow{grid-template-columns:1fr;gap:26px}
  body.press .duo{grid-template-columns:1fr}
  body.press .ritem{flex-direction:column;gap:6px}
  body.press .ritem .meta{flex:none}
  body.press .qband{padding:32px 0 30px}
  body.press .mcard{padding:0 18px 18px}
  body.press .mcard>.facade:first-child{margin:0 -18px 14px;width:calc(100% + 36px)}
  body.press .mcard.pod{padding-top:18px}
}

/* newsletter block, shared by the home page and the Wild Track issues */
.letter{background:var(--green);color:var(--cream)}
.letter h2{color:#fff;margin-top:10px}
.letter-blurb{color:#c9c3ae;margin:14px 0 26px;font-size:var(--fs-body)}
.letter .form-wrap{max-width:460px}
.letter-archive{margin-top:var(--sp-2);font-size:var(--fs-nav)}
.letter-archive a{color:var(--gold-soft);text-decoration:none;border-bottom:1px solid rgba(214,196,147,.4)}
.letter-archive a:hover{color:#fff;border-bottom-color:#fff}
/* MailerLite embed overrides */
.ml-form-embedContainer,.ml-form-embedWrapper,.ml-form-embedBody,.ml-form-embedContent{background:transparent!important;border:none!important;box-shadow:none!important;padding:0!important;margin:0!important}
.ml-form-embedContainer h4,.ml-form-embedContainer p{color:var(--cream)!important;font-family:'Inter',Helvetica,sans-serif!important}
.ml-form-embedContainer input[type=email],.ml-form-embedContainer input[type=text]{background:#fff!important;border:1px solid var(--gold)!important;border-radius:2px!important;padding:13px var(--sp-2)!important;font-family:'Inter',Helvetica,sans-serif!important;font-size:var(--fs-body)!important;color:var(--ink)!important}
.ml-form-embedContainer button{background:var(--gold)!important;color:var(--green-deep)!important;border:none!important;border-radius:2px!important;padding:13px 26px!important;font-family:'Inter',Helvetica,sans-serif!important;font-size:var(--fs-ui)!important;font-weight:600!important;letter-spacing:.05em!important;cursor:pointer}
.ml-form-embedContainer button:hover{background:var(--gold-soft)!important}
.ml-form-successBody p,.ml-form-successBody h4{color:var(--cream)!important}

/* body.home: the one-pager */
body.home header.hero{background:linear-gradient(160deg,var(--green) 0%,var(--green-deep) 85%);color:var(--cream);padding:96px 0 84px;position:relative;overflow:hidden}
body.home header.hero h1{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:38px;font-size:var(--fs-hero);line-height:1.08;color:#fff}
body.home .hero-in{max-width:640px}
body.home .hero .sub{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:20px;font-size:var(--fs-display-sm);color:var(--gold-soft);margin:18px 0 22px}
body.home .hero p.lead{font-size:var(--fs-body);color:#d9d4c2;max-width:56ch}
body.home .hero p.lead + p.lead{margin-top:14px}
body.home .hero .credit-line{margin-top:18px;font-size:var(--fs-body);color:var(--gold-soft)}
body.home .hero .credit-line em{color:#fff;font-style:italic}
body.home .wildtrack{display:block;margin:34px 0 0;opacity:.9}
/* small marker on the headline that jumps to the paragraph explaining it */
a.explain{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:1.5px solid var(--gold);border-radius:50%;color:var(--gold);font-family:'Inter',Helvetica,sans-serif;font-size:var(--fs-ui);font-weight:600;text-decoration:none;vertical-align:middle;transform:translateY(-.18em);transition:background .15s,color .15s}
a.explain:hover{background:var(--gold);color:var(--green-deep)}
body.home .proof{display:none}
body.home .reel{position:relative;padding-top:56.25%;background:var(--green-deep);border:1px solid var(--line)}
body.home .reel iframe{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;width:100%;height:100%;border:0}
body.home .credits{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
body.home .facts{background:var(--paper)}
body.home .letter-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
body.home .letter-photo{margin:0}
body.home .letter-photo img{width:100%;display:block;border:1px solid var(--gold);border-radius:2px;cursor:zoom-in}
body.home .letter-photo img:hover{opacity:.92}
body.home .letter-photo figcaption{font-size:var(--fs-label);letter-spacing:.08em;color:#a9a390;margin-top:10px;font-style:italic}
body.home .lightbox{position:fixed;top:0;right:0;bottom:0;left:0;inset:0;background:rgba(21,42,33,.94);display:none;align-items:center;justify-content:center;z-index:100;padding:4vh 4vw;cursor:zoom-out}
body.home .lightbox.open{display:flex}
body.home .lightbox img{max-width:100%;max-height:100%;border:1px solid var(--gold);border-radius:2px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
body.home .lightbox-close{position:absolute;top:18px;right:26px;background:none;border:none;color:var(--cream);font-size:30px;font-size:var(--fs-h1);line-height:1;cursor:pointer;font-family:'Cormorant Garamond',Georgia,serif}
body.home .lightbox-close:hover{color:var(--gold)}
@media(max-width:760px){body.home .letter-grid{grid-template-columns:1fr;gap:32px}}
@media(max-width:720px){body.home header.hero{padding:var(--sp-5) 0 60px}}
@media(max-width:640px){
  body.home .hero p.lead,body.home .hero .credit-line{display:none}
  body.home header.hero{padding:46px 0 50px}
  body.home .hero .sub{margin:14px 0 4px}
  body.home .proof{display:block;margin:20px 0 0;border-left:2px solid var(--gold);padding-left:var(--sp-2)}
  body.home .proof p{font-size:var(--fs-small);line-height:1.55;color:#d9d4c2;margin:7px 0}
  body.home .proof p strong{color:#fff;font-weight:600}
  body.home .proof p em{color:var(--gold-soft);font-style:italic}
  body.home .proof .meta{font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-soft)}
  body.home .wildtrack{width:100%;max-width:300px;margin-top:28px}
}

/* Safari before 14.1 has neither `inset` nor flex `gap`. Both shipped in the
   same release, so this query is an exact gate for those versions. Grid gap is
   not affected: it has worked since Safari 12, so .cards, .foot-grid, .credit,
   .facts-grid and the map columns need nothing here. */
@supports not (inset: 0) {
  .nav-links>li:not(:last-child){margin-right:26px}
  .nav-dl>a:not(:last-child){margin-right:4px}
  .nav-sub-in>*:not(:last-child){margin-right:14px}
  .btns>*:not(:last-child){margin-right:14px}
  footer .fine>*:not(:last-child){margin-right:10px}
  body.wild-track .issue>*:not(:last-child){margin-right:22px}
  body.wild-track .step1 .wrap>*:not(:last-child){margin-right:14px}
  body.wild-track .maplegend>*:not(:last-child){margin-right:20px}
  body.wild-track .mapjump>*:not(:last-child){margin-right:18px}
  body.map .filters>*:not(:last-child){margin-right:8px}
  body.map .legend>*:not(:last-child){margin-right:18px}
  body.map .nav-links>li:not(:last-child){margin-right:26px}
  body.press .ritem>*:not(:last-child){margin-right:20px}
  @media(max-width:900px){.nav-links>li:not(:last-child){margin-right:16px}}
  @media(max-width:620px){.nav-links>li:not(:last-child){margin-right:14px}}
}