/* ============================================================
   THE CANADA MAGAZINE — screen.css
   ONE stylesheet for the whole theme, extracted from the locked
   design mockups rather than rewritten, so the design cannot drift
   during conversion. See docs/THEME-ARCHITECTURE.md, decision 5.

   Source of each section:
     design/canada-magazine-chef-spotlight-template.html  (base:
       tokens, chrome, article, furniture, newsletter, footer, lightbox)
     design/canada-magazine-recipe-template.html          (recipe
       furniture + the print stylesheet)
     design/canada-magazine-tag-archive-template.html     (archive head,
       lead, grid, pagination, place filter, empty state)

   If a rule here disagrees with a locked mockup, the MOCKUP is right
   and this file has drifted. Re-extract rather than hand-patching.
   ============================================================ */


:root{
  --white:#FFFFFF;
  --off:#FAFAF8;
  --ink:#0C1828;
  --ink-soft:#4B5B6C;
  --faint:#8B96A2;
  --navy-950:#060F1C;
  --navy-900:#0C1A2E;
  --gold:#A98C55;
  --gold-bright:#C4A265;
  --red:#D32F2F;
  --red-deep:#B9141B;
  --serif:"Playfair Display", Georgia, "Times New Roman", serif;
  --sans:"DM Sans", "Helvetica Neue", Arial, sans-serif;
  --script:"Yellowtail", cursive;
  --maxw:1240px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{overflow-x:hidden}
body{
  font-family:var(--sans);
  background:var(--white);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 44px}

.smallcaps{font:600 10.5px/1.5 var(--sans);letter-spacing:.26em;text-transform:uppercase}
.smallcaps.gold{color:var(--gold)}
.hairline{width:44px;height:1px;background:var(--gold);border:0}

/* TWO CLASSES, NOT ONE. `html.js` means "JavaScript ran" and gates the mobile
   nav toggle. `html.reveal` means "the scroll-reveal animation is on" and gates
   only the animation, because ?reveal=0 turns the animation off for screenshots
   while JS is still very much running. Collapsing these into one class hides
   every .rv element on a ?reveal=0 capture with no observer to reveal them, or
   else strands the mobile nav closed with no toggle. */
html.reveal .rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
html.reveal .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
}

/* ============ topline + header (identical sitewide) ============ */
.topline{text-align:center;padding:10px 16px;border-bottom:1px solid rgba(12,24,40,.1)}
.topline .smallcaps{color:var(--ink-soft)}
.topline .leaf-dot{height:11px;width:auto;display:inline-block;vertical-align:-1px;margin:0 12px}
header.site{
  position:sticky;top:0;z-index:90;background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(12,24,40,.12);
}
.site-inner{
  max-width:var(--maxw);margin:0 auto;padding:0 44px;
  display:flex;align-items:center;justify-content:space-between;height:74px;
}
.site-logo img{height:30px;width:auto}
nav.primary{display:flex;gap:36px}
nav.primary a{
  font:600 11.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink);
  padding:8px 0;position:relative;
}
nav.primary a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--gold);transition:width .25s ease}
nav.primary a:hover::after{width:100%}
.btn-sub{background:var(--ink);color:#fff;font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;padding:13px 22px;transition:background .2s}
.btn-sub:hover{background:#000}
.site-actions{display:flex;align-items:center;gap:12px}

/* Screen-reader-only label. The hamburger is three bars to the eye and the
   word "Menu" to a screen reader; an icon-only control with no accessible
   name is unusable without sight. */
.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;
}

/* The hamburger. Hidden on desktop, and hidden without JS at every width —
   see the responsive block and site-header.hbs for why that ordering matters. */
.nav-toggle{
  display:none;align-items:center;justify-content:center;
  width:44px;height:44px;margin-right:-10px;   /* 44px tap target, optically aligned */
  background:none;border:0;padding:0;cursor:pointer;color:var(--ink);
}
.nav-toggle .bars{display:block;position:relative;width:22px;height:14px}
.nav-toggle .bars span{
  position:absolute;left:0;width:100%;height:1.5px;background:currentColor;
  transition:transform .26s ease,opacity .18s ease,top .26s ease;
}
.nav-toggle .bars span:nth-child(1){top:0}
.nav-toggle .bars span:nth-child(2){top:6.25px}
.nav-toggle .bars span:nth-child(3){top:12.5px}
/* Open state: the outer bars meet in the middle and cross, the middle fades. */
.nav-toggle[aria-expanded="true"] .bars span:nth-child(1){top:6.25px;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .bars span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .bars span:nth-child(3){top:6.25px;transform:rotate(-45deg)}
.nav-toggle:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* ============ ARTICLE OPENING — the centered print-feature head ============ */
.art-head{max-width:860px;margin:0 auto;padding:84px 44px 0;text-align:center}
.art-kicker{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:26px}
.art-kicker .leaf{height:12px;width:auto}
.art-head h1{
  font:800 clamp(36px,4.6vw,62px)/1.06 var(--serif);letter-spacing:-.014em;
  text-wrap:balance;margin-bottom:24px;
}
.art-head .dek{
  font:500 clamp(17px,1.7vw,20px)/1.6 var(--serif);font-style:italic;color:var(--ink-soft);
  max-width:44ch;margin:0 auto 34px;text-wrap:balance;
}
.art-meta{
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  padding:20px 0;border-top:1px solid rgba(12,24,40,.12);border-bottom:1px solid rgba(12,24,40,.12);
  font:600 10.5px/1.5 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);
}
.art-meta a{border-bottom:1px solid rgba(169,140,85,.6);padding-bottom:2px;transition:color .2s}
.art-meta a:hover{color:var(--red)}
.art-meta .dot{color:var(--gold)}

/* ============ FIGURES — the caption + credit trust system ============ */
figure.feature{max-width:1060px;margin:56px auto 0;padding:0 44px}
figure.feature img{width:100%;height:auto}
figure.feature.portrait{max-width:640px}
.figrow{
  display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  padding-top:14px;
}
figcaption .cap{font:500 13.5px/1.55 var(--serif);font-style:italic;color:var(--ink-soft)}
figcaption .credit{
  font:600 8.5px/1.8 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--faint);
  white-space:nowrap;
}
.credit.todo{color:var(--gold);border-bottom:1px dashed rgba(169,140,85,.7)}

/* ============ PROSE ============ */
.prose{max-width:680px;margin:0 auto;padding:64px 22px 0}
.prose p{font:400 17.5px/1.85 var(--sans);color:var(--ink);margin-bottom:28px}
.prose a{color:var(--ink);border-bottom:1px solid rgba(169,140,85,.7);padding-bottom:1px;transition:color .2s}
.prose a:hover{color:var(--red)}
.opener{position:relative}
.opener .ghost{
  position:absolute;top:-58px;left:-34px;font:800 250px/1 var(--serif);
  color:rgba(211,47,47,.075);pointer-events:none;z-index:0;user-select:none;
}
.opener p{position:relative;z-index:1}
.prose .lead-in{font:600 14px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.prose figure{margin:44px 0}
.prose figure.portrait{max-width:540px;margin-left:auto;margin-right:auto}
.prose figure img{width:100%;height:auto}

/* the recipe LINK-OUT — v3 (Tyler, round 3). THE source-of-truth
   treatment for every content→recipe split, sitewide.
   Structure: FRAME (headline) → NAME → OBJECT (dish) → ACTION.
   Same skeleton as the colophon, pitched louder: this is the primary
   action on the page, the colophon is only provenance.
   Round-2 problem being fixed: a 680px dish photo was the largest image
   on the page, so the block read as one more editorial figure, and a
   10.5px gold label was too quiet to say otherwise. The headline now
   carries the frame at title size in ink (never gold), the photo drops
   to roughly half the measure so it reads as the dish being referenced,
   and the action sits directly under the photo so the appetite the
   photo creates has somewhere to go. Never ingredients, never method,
   never a count. Unboxed; whitespace does the separating. */
.recipe-teaser{max-width:680px;margin:92px auto 0;padding:0 22px;text-align:center}
.recipe-teaser h3{
  font:700 clamp(27px,3vw,35px)/1.16 var(--serif);letter-spacing:-.012em;
  color:var(--ink);margin:0 auto;
}
.recipe-teaser .dish-name{
  margin-top:13px;
  font:500 20px/1.45 var(--serif);font-style:italic;color:var(--ink-soft);
}
.recipe-teaser img.dish{
  width:100%;max-width:370px;height:auto;margin:32px auto 0;
  box-shadow:0 24px 44px -26px rgba(12,24,40,.55);
}
.recipe-teaser .chip{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:48px;padding:0 32px;margin-top:30px;
  font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  background:var(--red);border:1px solid var(--red);color:#fff;cursor:pointer;transition:all .2s;
}
.recipe-teaser .chip:hover{background:var(--red-deep);border-color:var(--red-deep);transform:translateY(-1px)}
.recipe-teaser .chip .leaf{height:22px;width:auto;filter:brightness(0) invert(1)}

/* share actions */
.share-wrap{width:max-content;max-width:calc(100vw - 32px);margin-left:50%;transform:translateX(-50%)}
.share-acts{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.share-acts .chip{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;min-width:64px;padding:0 22px;
  font:600 10.5px/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:#fff;
  border:1px solid var(--navy-900);background:var(--navy-900);cursor:pointer;transition:all .2s;
  white-space:nowrap;
}
.share-acts .chip:hover{background:var(--navy-950);border-color:var(--navy-950);transform:scale(1.045)}
.share-acts .chip[hidden]{display:none}
.share-acts .chip.done{background:var(--gold);border-color:var(--gold);color:#fff}
.share-bracket{display:flex;align-items:center;gap:14px;margin-top:16px}
.share-bracket i{flex:1;height:1px;background:rgba(169,140,85,.55);position:relative}
.share-bracket i:first-child::before,
.share-bracket i:last-child::after{
  content:"";position:absolute;top:-6px;width:1px;height:7px;background:rgba(169,140,85,.55);
}
.share-bracket i:first-child::before{left:0}
.share-bracket i:last-child::after{right:0}
.share-bracket span{
  font:600 9.5px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
  white-space:nowrap;
}

/* support the chef — the standing end-block on any chef/person feature */
.support{max-width:680px;margin:72px auto 0;padding:0 22px;text-align:center}
.support .kick{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:18px}
.support .kick .leaf{height:14px;width:auto}
.support h3{font:700 clamp(24px,2.6vw,30px)/1.2 var(--serif);margin-bottom:10px}
.support p{font:400 14.5px/1.7 var(--sans);color:var(--ink-soft);max-width:56ch;margin:0 auto 32px;text-wrap:balance}
.support .follow-title{
  margin-top:38px;padding-top:32px;border-top:1px solid rgba(12,24,40,.1);
  font:700 clamp(19px,2vw,23px)/1.25 var(--serif);color:var(--navy-900);
}
.support .channels{list-style:none;margin-top:16px}
.support .channels li{margin-bottom:10px;font:400 14.5px/1.6 var(--sans)}
.support .channels .net{
  font:600 9.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
  margin-right:10px;
}
.support .channels a{color:var(--ink);border-bottom:1px solid var(--gold);padding-bottom:2px;font-weight:600}
.support .channels a:hover{color:var(--red)}
.support .channels li.todo{font:600 10px/1.6 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.support .channels li.todo span.mk{border:1px dashed rgba(169,140,85,.75);padding:8px 12px;display:inline-block}

/* credits strip */
.credits{
  max-width:680px;margin:56px auto 0;padding:0 22px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:center;
}
/* cols-2: the strip with its Photography cell waived away. Same specificity
   pattern as the mobile override below, and it MUST stay above that block -
   a later rule at equal-or-higher specificity beats one inside a media query,
   which is exactly how the mobile .credits override was silently reverted
   once already. */
.credits.cols-2{grid-template-columns:repeat(2,1fr)}
.credits .c h4{font:600 8.5px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.credits .c .v{font:500 14px/1.5 var(--serif);color:var(--ink)}
.credits .c .v a{border-bottom:1px solid rgba(169,140,85,.5);padding-bottom:1px}
.credits .c .v a:hover{color:var(--red)}
.credits .c .v.todo{font:600 9.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.credits .c .v.todo span{border:1px dashed rgba(169,140,85,.75);padding:8px 11px;display:inline-block}

/* colophon — v2 (Tyler, chef-spotlight round 2): centered, unboxed, and
   the image is ALWAYS the real issue cover file, never a feature photo.
   The cover reads as a physical object (border + soft drop). Identical
   on every page type. */
.colophon{max-width:680px;margin:72px auto 0;padding:0 22px;text-align:center}
.colophon .smallcaps{display:block;margin-bottom:22px}
.colophon img{width:122px;height:auto;margin:0 auto;border:1px solid rgba(12,24,40,.15);box-shadow:0 20px 38px -20px rgba(12,24,40,.5)}
.colophon p{font:500 15px/1.65 var(--serif);font-style:italic;color:var(--ink-soft);margin-top:20px}
.colophon a{display:inline-block;margin-top:14px;font:600 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--gold);padding-bottom:5px}
.colophon a:hover{color:var(--red)}

/* ============ NEWSLETTER — compact end-of-article capture ============ */
.sec{padding:96px 0 100px}
.news{
  background:
    radial-gradient(900px 460px at 50% 130%, rgba(200,35,43,.14), transparent 60%),
    radial-gradient(760px 420px at 12% -30%, rgba(38,64,102,.5), transparent 60%),
    var(--navy-900);
  color:#fff;text-align:center;margin-top:96px;position:relative;overflow:hidden;
}
.news::before{
  content:"";position:absolute;right:-170px;top:-110px;width:520px;height:520px;
  background:url("../images/cm-leaf.png") center/contain no-repeat;
  opacity:.06;transform:rotate(12deg);pointer-events:none;
}
.news .script{font:400 30px/1 var(--script);color:#D9BE8C;display:block;margin-bottom:12px;position:relative}
.news h2{font:700 clamp(26px,3vw,38px)/1.14 var(--serif);max-width:20ch;margin:0 auto 12px;position:relative}
.news p{font:400 14.5px/1.7 var(--sans);color:#B9C6D6;max-width:460px;margin:0 auto 32px;position:relative}
.news-form{display:flex;gap:0;max-width:440px;margin:0 auto;position:relative}
.news-form input{
  flex:1;border:1px solid rgba(255,255,255,.35);border-right:0;background:#fff;
  font:400 14px/1 var(--sans);padding:16px 18px;outline:none;min-width:0;color:var(--ink);
}
.news-form input:focus{border-color:var(--gold-bright)}
.news-fine{margin-top:13px;font:400 11.5px/1.6 var(--sans);color:#7E8EA1;position:relative}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  padding:17px 28px;border:1px solid transparent;cursor:pointer;transition:all .25s ease;
}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-deep);transform:translateY(-1px)}

/* ============ CONTINUE READING — curated recirculation ============ */
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:30px;margin-bottom:50px}
.sec-head .left .smallcaps{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.sec-head h2{font:700 clamp(28px,3vw,38px)/1.08 var(--serif);letter-spacing:-.01em}
.sec-link{
  font:600 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  border-bottom:1px solid var(--gold);padding-bottom:6px;white-space:nowrap;transition:color .2s;
}
.sec-link:hover{color:var(--red)}
.trio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
/* A side with only two non-cover pieces left a dead third column on the
   homepage (found 2026-08-31 after the Berkeley article was pulled: the travel
   row went 3 -> 2 and the gap read as a broken page). Exactly two children ->
   two columns, so a short issue looks deliberate. One and three are untouched.
   NOTE the mobile override further down: this selector outranks a bare
   .trio-grid inside a media query, so the phone rule has to match it. */
.trio-grid:has(> :nth-child(2)):not(:has(> :nth-child(3))){grid-template-columns:repeat(2,1fr)}
.kicker-strong{
  display:inline-flex;align-items:center;gap:10px;
  font:700 11px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--red);
}
.kicker-strong::before{content:"";width:22px;height:2px;background:var(--red)}
.partner-flag{
  font:600 8.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
  border:1px solid rgba(169,140,85,.5);padding:5px 8px;margin-left:10px;vertical-align:1px;
}
.t-card .ph{display:block;aspect-ratio:4/3;overflow:hidden}
.t-card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}

/* ---- CARD CROP FOCUS -------------------------------------------------------
   Every card window is landscape and every image is object-fit:cover, so the
   default (centre) crop takes the middle of a TALL photo and cuts a person's
   head off. `card_focus: top` in an article's frontmatter becomes the internal
   tag #card-focus-top, which reaches the theme as slug hash-card-focus-top and
   lands on the image wrapper as data-focus. These values are the exact strings
   scripts/card-crop.mjs promises in objectPosition(), so the proof sheet the
   editor signs off and the live page cannot disagree.
   Deliberately NOT scoped to .t-card: the 16:10 archive lead crops the same way
   and reads the same attribute. The full-bleed home panes are excluded on
   purpose - they carry their own hand-tuned object-position per side. */
[data-focus="hash-card-focus-top-left"]     img{object-position:0% 0%}
[data-focus="hash-card-focus-top"]          img{object-position:50% 0%}
[data-focus="hash-card-focus-top-right"]    img{object-position:100% 0%}
[data-focus="hash-card-focus-left"]         img{object-position:0% 50%}
[data-focus="hash-card-focus-center"]       img{object-position:50% 50%}
[data-focus="hash-card-focus-right"]        img{object-position:100% 50%}
[data-focus="hash-card-focus-bottom-left"]  img{object-position:0% 100%}
[data-focus="hash-card-focus-bottom"]       img{object-position:50% 100%}
[data-focus="hash-card-focus-bottom-right"] img{object-position:100% 100%}
.t-card:hover .ph img{transform:scale(1.04)}
.t-card .kick{display:block;margin:20px 0 10px}
.t-card h3{font:600 21px/1.28 var(--serif)}
.t-card:hover h3{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px;text-decoration-thickness:1px}
.t-card .dek{display:block;margin-top:9px;font:400 13.5px/1.65 var(--sans);color:var(--ink-soft)}
.t-card .meta{display:block;margin-top:14px;font:600 9.5px/1.7 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}

/* ============ FOOTER (identical sitewide) ============ */
footer.site{padding:72px 0 34px;border-top:1px solid rgba(12,24,40,.12)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:50px;padding-bottom:50px}
.foot-brand img{height:30px;margin-bottom:20px}
.foot-brand p{font:400 13.5px/1.75 var(--sans);color:var(--ink-soft);max-width:330px}
.foot h4{font:600 10.5px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:20px}
.foot ul{list-style:none}
.foot li{margin-bottom:12px}
.foot li a{font:400 14px/1.4 var(--sans);color:var(--ink-soft);transition:color .2s}
.foot li a:hover{color:var(--ink)}
.foot-pub .pub-leaf{height:13px;width:auto;display:inline-block;vertical-align:-2px;margin-left:9px}
.foot-pub{
  border-top:1px solid rgba(12,24,40,.12);padding:26px 0 8px;text-align:center;
  font:500 14px/1.6 var(--serif);font-style:italic;color:var(--ink-soft);
}
.foot-legal{text-align:center;font:500 10px/1.9 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}

/* ============ click-to-enlarge (photos open in a lightbox) ============ */
article figure img{cursor:zoom-in}
.lb{
  position:fixed;inset:0;z-index:200;
  background:
    radial-gradient(1100px 700px at 50% 120%, rgba(200,35,43,.10), transparent 60%),
    rgba(12,26,46,.96);
  display:none;align-items:center;justify-content:center;padding:4vh 4vw 8vh;cursor:zoom-out;
}
.lb::before{
  content:"";position:absolute;right:-14vmin;top:-12vmin;width:72vmin;height:72vmin;
  background:url("../images/cm-leaf.png") center/contain no-repeat;
  opacity:.05;transform:rotate(12deg);pointer-events:none;
}
.lb.open{display:flex}
.lb img{max-height:88vh;max-width:92vw;width:auto;box-shadow:0 40px 120px rgba(0,0,0,.6)}
.lb .lbcap{
  position:absolute;bottom:22px;left:24px;right:24px;text-align:center;
  font:500 13px/1.5 var(--serif);font-style:italic;color:#D9E2EC;
}

/* ============ responsive ============ */
@media (max-width:1080px){
  .trio-grid{grid-template-columns:1fr;gap:44px}
  .trio-grid:has(> :nth-child(2)):not(:has(> :nth-child(3))){grid-template-columns:1fr}

  /* ---- MOBILE / TABLET NAVIGATION ----------------------------------------
     This block used to be, in its entirety, `nav.primary{display:none}`. Every
     phone and tablet got a header with a logo, a Subscribe button and no way
     to reach Travel & Lifestyle, Food & Beverage, Chefs, Advertise or Contact.

     Two states, and the ORDER OF THE TWO IS THE POINT:

     1. NO JS (this first group) — the baseline. The nav stacks inside the
        header and is simply always open. Nothing is hidden behind a control
        that cannot work, so every link stays reachable with JavaScript off,
        per the locked rule.
     2. JS PRESENT (the `html.js` group) — main.js adds `js` to <html>, the
        toggle appears and the same nav becomes a panel under the header bar.

     Written this way round because the failure mode of the reverse is silent:
     hide the nav by default and "enhance" it open, and a JS failure leaves a
     site with no navigation at all, looking perfectly fine in a screenshot. */
  nav.primary{
    order:3;width:100%;flex-direction:column;gap:0;
    margin-top:12px;border-top:1px solid rgba(12,24,40,.10);
  }
  .site-inner{flex-wrap:wrap;height:auto;padding-top:12px;padding-bottom:12px}
  .site-logo{order:1}
  .site-actions{order:2}
  nav.primary a{
    padding:16px 2px;                    /* ~44px tap target */
    font-size:12px;letter-spacing:.16em;
    border-bottom:1px solid rgba(12,24,40,.07);
  }
  nav.primary a:last-child{border-bottom:0}
  /* The desktop hover underline sweeps left-to-right under a short word. Under
     a full-width stacked row it reads as a loading bar, so it is dropped and
     the current-page marker below carries the state instead. */
  nav.primary a::after{display:none}
  nav.primary a[aria-current]{color:var(--red)}

  html.js .site-inner{flex-wrap:nowrap;height:64px;padding-top:0;padding-bottom:0}
  html.js .nav-toggle{display:inline-flex}
  html.js nav.primary{
    position:absolute;left:0;right:0;top:100%;
    display:none;margin:0;padding:2px 22px 14px;
    /* SOLID, deliberately, where the header bar above it is 96% + blur. That
       translucency is a locked rule for the BAR, which is 64px of chrome. This
       panel is 240px of menu sitting over body copy, and at 98% the headline
       behind it still ghosted through between the links and read as a
       rendering fault. A menu is for reading link labels; legibility wins. */
    background:var(--white);
    border-top:1px solid rgba(12,24,40,.10);
    border-bottom:1px solid rgba(12,24,40,.12);
    box-shadow:0 18px 30px -18px rgba(12,24,40,.30);
  }
  html.js nav.primary.open{display:flex}
}
@media (max-width:720px){
  .wrap{padding:0 22px}
  /* Padding only. The HEIGHT is deliberately not set here: this block sits
     after the 1080px one in file order, so an unconditional height:64px here
     beat the no-JS `height:auto` above it at equal specificity, the header
     could not grow around the wrapped nav, and the five links painted straight
     over the top of the page. Same cascade trap already recorded for the
     duplicated .credits rules. html.js gets its 64px from the 1080px block. */
  .site-inner{padding:0 22px}
  .topline{padding:9px 12px}
  .topline .smallcaps{font-size:8.5px;letter-spacing:.18em}
  .sec{padding:70px 0 76px}
  .sec-head{flex-direction:column;align-items:flex-start;gap:16px}
  .art-head{padding:56px 22px 0}
  figure.feature{padding:0 22px;margin-top:40px}
  .figrow{flex-direction:column;gap:6px}
  figcaption .credit{white-space:normal}
  .prose{padding-top:48px}
  .prose p{font-size:16.5px}
  .opener .ghost{font-size:150px;top:-36px;left:-12px}
  .recipe-teaser{margin-top:70px}
  .credits{grid-template-columns:1fr;gap:26px}
  .credits.cols-2{grid-template-columns:1fr}
  .news{margin-top:70px}
  .news-form{max-width:100%}
  .foot-grid{grid-template-columns:1fr 1fr}
}


/* ============================================================
   RECIPE FURNITURE  (source: recipe template)
   ============================================================ */

/* ============================================================
   NEW ON THIS PAGE TYPE — THE RECIPE FURNITURE
   ============================================================ */

/* the at-a-glance rail: the four facts a recipe rich result wants.
   A slot with no verified data does NOT render in the live theme.
   In this mockup an empty slot renders dashed + "to confirm" so the
   gap is visible instead of silent. */
.rail{max-width:900px;margin:44px auto 0;padding:0 22px}
.rail .inner{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(169,140,85,.5);border-bottom:1px solid rgba(169,140,85,.5);
}
.rail .f{padding:24px 14px;text-align:center;position:relative}
.rail .f + .f::before{
  content:"";position:absolute;left:0;top:22%;height:56%;width:1px;background:rgba(169,140,85,.35);
}
.rail .f h4{font:600 8.5px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:11px}
.rail .f .v{font:600 19px/1.25 var(--serif);color:var(--ink)}
.rail .f .v small{display:block;font:400 10.5px/1.5 var(--sans);letter-spacing:.06em;color:var(--faint);margin-top:5px;text-transform:none}
.rail .f.todo .v{
  font:600 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  border:1px dashed rgba(169,140,85,.75);padding:9px 10px;display:inline-block;
}
.rail .railnote{
  margin-top:12px;text-align:center;
  font:400 11.5px/1.6 var(--sans);color:var(--faint);
}

/* actions: jump to the method, print the card */
.rc-acts{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:26px}
.rc-acts .chip{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:0 20px;
  font:600 10.5px/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;
  border:1px solid rgba(12,24,40,.22);background:#fff;color:var(--ink);cursor:pointer;transition:all .2s;
}
.rc-acts .chip:hover{border-color:var(--navy-900);background:var(--navy-900);color:#fff}
.rc-acts .chip .leaf{height:22px;width:auto;filter:brightness(0) invert(1)}
.rc-acts .chip.primary{background:var(--red);border-color:var(--red);color:#fff;padding:0 26px;gap:12px}
.rc-acts .chip.primary:hover{background:var(--red-deep);border-color:var(--red-deep)}

/* THE RECIPE CARD — ingredients beside the method */
.recipe{max-width:1060px;margin:76px auto 0;padding:0 44px;scroll-margin-top:96px}
.recipe .rc-head{text-align:center;margin-bottom:40px}
.recipe .rc-head .kick{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:16px}
.recipe .rc-head .kick .leaf{height:14px;width:auto}
.recipe .rc-head h2{font:700 clamp(26px,3vw,34px)/1.18 var(--serif);letter-spacing:-.01em}
.recipe .rc-head p{margin-top:12px;font:400 14.5px/1.7 var(--sans);color:var(--ink-soft);max-width:52ch;margin-left:auto;margin-right:auto}
.rc-grid{display:grid;grid-template-columns:340px 1fr;gap:56px;align-items:start}
.rc-grid.split{grid-template-columns:1fr 1fr;align-items:center}

.ing{border:1px solid rgba(169,140,85,.55);padding:30px 28px 32px;position:sticky;top:96px}
.ing h3{font:600 9.5px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.ing .count{font:500 12.5px/1.6 var(--serif);font-style:italic;color:var(--faint);margin-bottom:20px;display:block}
.ing h4.grp{font:600 10px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:18px 0 2px}
.ing h4.grp:first-of-type{margin-top:0}
.ing ul{list-style:none}
.ing li{
  font:400 15px/1.6 var(--sans);color:var(--ink);
  padding:11px 0 11px 30px;border-top:1px solid rgba(12,24,40,.09);position:relative;cursor:pointer;
}
.ing li:first-of-type{border-top:0}
.ing li::before{
  content:"";position:absolute;left:0;top:15px;width:13px;height:13px;
  border:1px solid rgba(169,140,85,.8);transition:all .2s;
}
.ing li.got{color:var(--faint);text-decoration:line-through;text-decoration-color:rgba(169,140,85,.6)}
.ing li.got::before{background:var(--gold);border-color:var(--gold)}
.ing .ingnote{
  margin-top:20px;padding-top:16px;border-top:1px solid rgba(169,140,85,.4);
  font:400 11.5px/1.6 var(--sans);color:var(--faint);
}
/* download the recipe card — the take-away action under every recipe */
.rc-download{margin-top:48px;text-align:center}
.rc-download .dlbtn{
  display:inline-flex;align-items:center;gap:13px;padding:19px 36px;
  background:var(--navy-900);color:#fff;border:1px solid var(--navy-900);
  font:600 11.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  cursor:pointer;transition:all .2s;
}
.rc-download .dlbtn:hover{background:var(--navy-950);border-color:var(--navy-950);transform:translateY(-1px)}
.rc-download .dlbtn .leaf{height:20px;width:auto;filter:brightness(0) invert(1)}
.rc-download .fine{margin-top:13px;font:400 12px/1.6 var(--sans);color:var(--faint)}

.steps h3{font:600 9.5px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:26px}
.steps ol{list-style:none;counter-reset:step}
.steps li{
  counter-increment:step;position:relative;padding:0 0 30px 76px;margin-bottom:30px;
  border-bottom:1px solid rgba(12,24,40,.09);
  font:400 16.5px/1.8 var(--sans);color:var(--ink);
}
.steps li:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0}
.steps li::before{
  content:counter(step);position:absolute;left:0;top:-14px;
  font:800 58px/1 var(--serif);color:rgba(211,47,47,.21);
}

/* CHEF PROVENANCE — what makes an ATTACHED recipe attached.
   Also used on a standalone recipe when the cook is a real person or
   business we can point readers at. */
.chefbox{max-width:1060px;margin:76px auto 0;padding:0 44px}
.chefbox .box{display:flex;gap:36px;align-items:center;border:1px solid rgba(169,140,85,.5);padding:34px 38px}
.chefbox img{width:164px;height:205px;object-fit:cover;flex:none}
.chefbox .t .smallcaps{display:block;margin-bottom:12px}
.chefbox .t h3{font:700 25px/1.22 var(--serif);margin-bottom:10px}
.chefbox .t p{font:400 14.5px/1.75 var(--sans);color:var(--ink-soft);max-width:56ch}
.chefbox .t a.more{display:inline-block;margin-top:14px;font:600 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--gold);padding-bottom:5px}
.chefbox .t a.more:hover{color:var(--red)}

/* share, support, credits, colophon: NOT repeated here. They are already
   defined once, near the top of this file (base section) - recipe-template.html
   carried byte-identical copies of all four (every full-page mockup repeats the
   shared furniture), and pulling that duplicate in during extraction put a
   second, unconditional .credits rule AFTER the @media(max-width:720px) mobile
   override, which silently won the cascade and broke mobile stacking on every
   page using .credits (found 2026-08-24 building the Contact page). Do not
   re-add these here - if a change is needed, it goes in the ONE base copy. */


/* ============================================================
   ARCHIVE  (source: tag archive template)
   ============================================================ */

/* ============ THE ARCHIVE HEAD — new on this page type ============
   Centered, on the article-head measure, so an archive opens with the
   same voice as a story rather than as a database listing. */
.arch-head{max-width:860px;margin:0 auto;padding:84px 44px 0;text-align:center}
.arch-head .kick{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:26px}
.arch-head h1{
  font:800 clamp(40px,5.4vw,72px)/1.02 var(--serif);letter-spacing:-.02em;
  text-wrap:balance;
}
.arch-head .desc{
  margin:24px auto 0;max-width:50ch;
  font:500 clamp(16.5px,1.6vw,19px)/1.65 var(--serif);font-style:italic;color:var(--ink-soft);
  text-wrap:balance;
}
/* the count sits under a hairline so the head has a base to rest on */
.arch-head .count{
  margin-top:34px;padding-top:22px;position:relative;
  font:600 10px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--faint);
}
.arch-head .count::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:64px;height:1px;background:rgba(169,140,85,.55);
}

/* ============ THE LEAD ITEM — first post gets the weight ============
   Horizontal split on desktop so it reads as a different object from
   the grid below; stacks on mobile. */
.arch-body{padding:64px 0 0}
.lead{
  display:grid;grid-template-columns:1.32fr 1fr;gap:52px;align-items:center;
  padding-bottom:64px;margin-bottom:64px;border-bottom:1px solid rgba(12,24,40,.12);
}
.lead .ph{display:block;aspect-ratio:16/10;overflow:hidden}
.lead .ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.lead:hover .ph img{transform:scale(1.03)}
.lead .kick{display:block;margin-bottom:14px}
.lead h2{font:700 clamp(28px,2.9vw,40px)/1.12 var(--serif);letter-spacing:-.014em;text-wrap:balance}
.lead:hover h2{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:5px;text-decoration-thickness:1px}
.lead .dek{display:block;margin-top:14px;font:400 15.5px/1.7 var(--sans);color:var(--ink-soft);max-width:52ch}
.lead .meta{display:block;margin-top:18px;font:600 9.5px/1.7 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}


/* the archive grid (cards themselves are the shared .t-card above) */
.arch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 40px}


/* ============ THE EMPTY STATE ============
   A tag can exist with nothing behind it (Tyler, 2026-08-24: Lifestyle
   and Beverage are created ahead of their first story). Nothing links
   here and Ghost keeps empty tags out of the sitemap, so this is a
   rare direct-URL landing. It still has to look deliberate, and its
   only job is to move the reader somewhere real. */
.empty{
  max-width:680px;margin:0 auto;padding:12px 22px 0;text-align:center;
}
/* the leaf reads as an ornament here, so it gets real size. At 30px/.28
   it rendered as a speck, the same failure the recipe template hit in
   its round 2. */
.empty .leaf{height:52px;width:auto;margin:0 auto 26px;opacity:.5}
.empty p{font:500 17px/1.7 var(--serif);font-style:italic;color:var(--ink-soft);text-wrap:balance}
.empty .outs{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:34px}
.empty .outs a{
  display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 24px;
  font:600 10.5px/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;
  border:1px solid rgba(12,24,40,.22);background:#fff;color:var(--ink);transition:all .2s;
}
.empty .outs a:hover{border-color:var(--navy-900);background:var(--navy-900);color:#fff}
.empty .outs a.primary{background:var(--red);border-color:var(--red);color:#fff}
.empty .outs a.primary:hover{background:var(--red-deep);border-color:var(--red-deep)}


/* ============ PAGINATION — renders only past posts_per_page ============
   Server-rendered pages (/travel/page/2/), not a load-more button: it works
   with no JS and every page stays crawlable. */
.pager{
  display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:76px;padding-top:56px;border-top:1px solid rgba(12,24,40,.12);
}
.pager a,.pager span{
  min-width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;
  font:600 12px/1 var(--sans);letter-spacing:.08em;
  border:1px solid rgba(12,24,40,.18);color:var(--ink);transition:all .2s;
}
.pager a:hover{border-color:var(--navy-900);background:var(--navy-900);color:#fff}
.pager .cur{background:var(--ink);border-color:var(--ink);color:#fff}
.pager .step{padding:0 20px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
/* an unavailable step keeps its slot so the row does not jump between
   pages, but must not look clickable */
.pager span.step{color:var(--faint);border-color:rgba(12,24,40,.09)}
.pager .gap{border-color:transparent;color:var(--faint);min-width:24px}

/* ============ PLACE FILTER — only earns its place at scale ============
   A 50-post Travel archive is a wall. These are real place tags from the
   approved taxonomy, so the row builds itself from whatever a section
   actually contains. PROPOSAL, not yet accepted. */
.subfilter{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:40px}
.subfilter a{
  font:600 10px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  padding:12px 18px;border:1px solid rgba(169,140,85,.5);color:var(--ink-soft);transition:all .2s;
}
.subfilter a:hover{border-color:var(--ink);color:var(--ink)}
.subfilter a.on{background:var(--ink);border-color:var(--ink);color:#fff}


/* the archive you are on is marked in the nav */
nav.primary a[aria-current]{color:var(--red)}
nav.primary a[aria-current]::after{width:100%;background:var(--red)}


/* archive responsive additions */
@media (max-width:1080px){
  .arch-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .arch-body{padding-top:48px}
  .lead{grid-template-columns:1fr;gap:24px;padding-bottom:48px;margin-bottom:48px}
  .arch-grid{grid-template-columns:1fr;gap:44px}
  .arch-head{padding:56px 22px 0}
}




/* ============================================================
   PRINT  (source: recipe template)
   ============================================================ */

/* ============ PRINT — a recipe page should print as a recipe card ============ */
@media print{
  /* review-only classes dropped here on extraction: they do not exist in the theme */
  .topline,header.site,.news,.sec,footer.site,
  .rc-acts,.rc-download,.share,.share-wrap,.support,.colophon,.chefbox,.lb{display:none !important}
  .rv{opacity:1 !important;transform:none !important}
  .art-head{padding:0;max-width:none}
  .art-head h1{font-size:30pt}
  .art-head .dek{font-size:12pt;margin-bottom:16px}
  .art-meta{border-color:#bbb;font-size:8pt;padding:10px 0}
  figure.feature{max-width:420px;margin:18px auto 0;padding:0;break-inside:avoid}
  figure.feature.portrait{max-width:420px}
  figure.feature.portrait img{max-width:250px;margin:0 auto}
  .figrow{flex-direction:column;gap:5px;align-items:flex-start}
  figcaption .credit{white-space:normal}
  .rail{margin-top:18px}
  .rail .f{padding:12px 8px}
  .prose{padding-top:20px;max-width:none}
  .prose p{font-size:11pt;line-height:1.6}
  .opener .ghost{display:none}
  .recipe{margin-top:26px;padding:0;max-width:none}
  .recipe .rc-head{margin-bottom:22px;break-after:avoid}
  .rc-grid{grid-template-columns:270px 1fr;gap:32px;break-inside:avoid}
  .ing{position:static;break-inside:avoid}
  .ing .ingnote{display:none}
  .ing li,.steps li{break-inside:avoid;cursor:auto}
  .ing li{font-size:10.5pt;padding:8px 0 8px 26px}
  .steps li{font-size:11pt;line-height:1.6;padding-bottom:20px;margin-bottom:20px}
  .steps li::before{font-size:34px;top:-8px}
  .credits{margin-top:26px;break-inside:avoid}
  a{text-decoration:none}
  @page{margin:14mm}
}

/* ============================================================
   KOENIG EDITOR CARDS
   gscan requires every card class to be styled even where the design
   never uses one, and it only flags the cards it happens to scan — so
   the whole family ships from the start rather than being discovered
   one gscan error at a time as editors reach for new card types.
   Full list and example markup: docs.ghost.org/themes/content
   ============================================================ */
.kg-card{margin:44px auto}
.kg-image-card img,.kg-image{width:100%;height:auto}
.kg-image-card figcaption,.kg-video-card figcaption,.kg-audio-card figcaption{
  padding-top:14px;font:500 13.5px/1.55 var(--serif);font-style:italic;color:var(--ink-soft);text-align:left;
}
.kg-width-wide{max-width:1060px;margin-left:auto;margin-right:auto}
.kg-width-full{width:100vw;margin-left:calc(50% - 50vw);max-width:none}
.kg-width-full img{width:100%}

.kg-gallery-card,.kg-gallery-container{display:flex;flex-direction:column;gap:12px;max-width:1060px;margin:44px auto}
.kg-gallery-row{display:flex;gap:12px}
.kg-gallery-image img{display:block;width:100%;height:100%;object-fit:cover}

.kg-bookmark-card{margin:44px auto}
.kg-bookmark-container{
  display:flex;min-height:148px;color:var(--ink);text-decoration:none;
  border:1px solid rgba(169,140,85,.5);background:var(--white);
}
.kg-bookmark-content{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;padding:22px 26px;order:1}
.kg-bookmark-title{font:600 17px/1.35 var(--serif);color:var(--ink)}
.kg-bookmark-description{
  margin-top:8px;font:400 14px/1.6 var(--sans);color:var(--ink-soft);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.kg-bookmark-metadata{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:14px;font:600 9.5px/1.6 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.kg-bookmark-icon{width:18px;height:18px;margin-right:2px}
.kg-bookmark-author::after{content:"·";margin-left:8px;color:var(--gold)}
.kg-bookmark-publisher{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:240px}
.kg-bookmark-thumbnail{position:relative;flex:0 0 34%;order:2}
.kg-bookmark-thumbnail img{width:100%;height:100%;object-fit:cover}

.kg-embed-card{display:flex;flex-direction:column;align-items:center;margin:44px auto}
.kg-embed-card iframe{max-width:100%}

.kg-button-card{display:flex;justify-content:center;margin:36px auto}
.kg-button-card.kg-align-left{justify-content:flex-start}
.kg-btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 30px;
  font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--ink);color:var(--ink);background:transparent;transition:all .2s;
}
.kg-btn:hover{background:var(--ink);color:#fff}
.kg-btn-accent{background:var(--red);border-color:var(--red);color:#fff}
.kg-btn-accent:hover{background:var(--red-deep);border-color:var(--red-deep);color:#fff}

.kg-callout-card{display:flex;gap:14px;margin:36px auto;padding:22px 24px;background:var(--off);border-left:2px solid var(--gold)}
.kg-callout-card-accent{background:rgba(211,47,47,.06);border-left-color:var(--red)}
.kg-callout-emoji{font-size:20px;line-height:1.4}
.kg-callout-text{font:400 16px/1.75 var(--sans);color:var(--ink)}

.kg-toggle-card{margin:36px auto;padding:20px 24px;border:1px solid rgba(169,140,85,.5)}
.kg-toggle-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;cursor:pointer}
.kg-toggle-heading h4{font:600 17px/1.35 var(--serif)}
.kg-toggle-content{margin-top:14px;font:400 16px/1.75 var(--sans);color:var(--ink-soft)}

.kg-audio-card,.kg-video-card,.kg-product-card,.kg-signup-card{margin:44px auto}
.kg-video-card video{width:100%;height:auto}

.kg-file-card{margin:36px auto}
.kg-file-card-container{
  display:flex;align-items:center;gap:18px;padding:18px 22px;
  border:1px solid rgba(169,140,85,.5);color:var(--ink);text-decoration:none;
}
.kg-file-card-title{font:600 16px/1.35 var(--serif)}
.kg-file-card-metadata{margin-top:4px;font:600 9.5px/1.6 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.kg-file-card-icon{flex:none;width:24px;height:24px}

.kg-header-card{padding:64px 24px;text-align:center;margin:44px auto}
.kg-header-card h2{font:700 clamp(28px,3vw,40px)/1.14 var(--serif)}
.kg-header-card.kg-size-small{padding:40px 24px}
.kg-header-card.kg-size-large{padding:92px 24px}
.kg-header-card.kg-style-dark{background:var(--navy-900);color:#fff}
.kg-header-card.kg-style-light{background:var(--off);color:var(--ink)}
.kg-header-card.kg-style-accent{background:var(--red);color:#fff}
.kg-header-card.kg-style-image{background-size:cover;background-position:center;color:#fff}

@media (max-width:720px){
  .kg-bookmark-container{flex-direction:column}
  .kg-bookmark-thumbnail{flex:1 1 auto;order:0;max-height:180px}
  .kg-gallery-row{flex-direction:column}
}


/* ============================================================
   COMPONENTS MISSED BY THE FIRST CSS EXTRACTION
   Recovered 2026-08-25 from design/canada-magazine-article-template.html.

   THEME-ARCHITECTURE decision 5 says this stylesheet is EXTRACTED from the
   locked mockups rather than rewritten, precisely so the design cannot drift
   during conversion. SEVEN locked components were dropped in the first pass
   and are restored here verbatim from that file. Found by grepping the locked
   template's selectors against this file while building the Advertise page,
   not by a screenshot, because most of them fail silently:

     .sponsor-lockup       the legally required disclosure. post.hbs already
                           emits the markup; only the styling was missing.
     .prose h2 + hairline  8 of the 10 June articles use an H2. Without this
                           they render at browser-default Times bold.
     .prose figure.bleed   the full-bleed breakout rule in the design system.
     .pull                 the editorial pull quote.
     .prose p.endnote      end matter.
     .share / .btn-big     share block heading and the large button size.
     .partner-cta          THE priority action on a sponsored page. All six
                           sponsored June posts render one.
   ============================================================ */
/* THE SPONSOR LOCKUP. post.hbs already renders this markup for any post
   tagged #sponsored, but the styling never made it into the theme, so all six
   sponsored June posts would have shown the disclosure as unstyled default
   text above the headline instead of the bordered lockup the design system
   specifies. The words were present, so this was not a missing disclosure,
   but it did not READ as one, and the design rules call a sponsored piece
   without its proper label a blocking error rather than a warning. Wording
   itself is still gated on the Kurt ad-law review. */
.sponsor-lockup{
  display:inline-block;border:1px solid rgba(169,140,85,.55);
  padding:14px 26px 15px;margin-bottom:30px;
}
.sponsor-lockup .l1{font:700 10px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--red)}
.sponsor-lockup .l2{font:500 15px/1.4 var(--serif);font-style:italic;color:var(--ink-soft);margin-top:8px}
.sponsor-lockup .l2 b{font-weight:600;color:var(--ink);font-style:normal}
/* the dark button variant, used by the partner CTA */
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:#000;transform:translateY(-1px)}

.prose h2{
  font:700 26px/1.25 var(--serif);letter-spacing:-.008em;
  margin:56px 0 22px;
}
.prose h2::before{content:"";display:block;width:44px;height:1px;background:var(--gold);margin-bottom:18px}
.prose figure.bleed{width:100vw;margin-left:calc(50% - 50vw);max-width:none}
.prose figure.bleed img{width:100%;max-height:76vh;object-fit:cover}
.prose figure.bleed .figrow{max-width:1060px;margin:0 auto;padding:14px 44px 0}
.pull{
  position:relative;max-width:560px;margin:64px auto;text-align:center;
  padding:40px 10px 36px;border-top:1px solid rgba(169,140,85,.5);border-bottom:1px solid rgba(169,140,85,.5);
}
.pull .leaf{height:22px;width:auto;margin:0 auto 18px;position:relative;z-index:1}
.pull blockquote{font:500 clamp(22px,2.4vw,28px)/1.45 var(--serif);font-style:italic;letter-spacing:-.005em;text-wrap:balance;position:relative;z-index:1}
.pull::before,.pull::after{
  position:absolute;font:700 170px/1 var(--serif);color:rgba(169,140,85,.16);
  pointer-events:none;z-index:0;
}
.pull::before{content:"\201C";top:-6px;left:2px}
.pull::after{content:"\201D";bottom:-64px;right:2px}
.prose p.endnote{font:500 15px/1.75 var(--serif);font-style:italic;color:var(--ink-soft)}
.prose p.endnote a{border-bottom:1px solid rgba(169,140,85,.7);padding-bottom:1px}
.prose p.endnote a:hover{color:var(--red)}
.share{max-width:680px;margin:64px auto 0;padding:0 22px;text-align:center}
.share .smallcaps{display:block;margin-bottom:8px}
.share h3{font:700 24px/1.2 var(--serif);margin-bottom:22px}
.partner-cta{max-width:680px;margin:56px auto 0;padding:0 22px}
.partner-cta .box{
  text-align:center;border:1px solid rgba(169,140,85,.5);padding:44px 32px 42px;
}
.partner-cta h3{font:700 28px/1.2 var(--serif);margin:14px 0 8px}
.partner-cta p{font:400 14.5px/1.7 var(--sans);color:var(--ink-soft);max-width:42ch;margin:0 auto 28px}
.btn-big{font-size:13px;padding:21px 38px;overflow-wrap:anywhere}

/* BUTTONS INSIDE THE POST BODY. `.prose a` is (0,1,1) and outranks
   `.btn-red` / `.btn-ink` / `.btn-big` at (0,1,0), so any button written into
   the body inherited all three body-link properties: the ink colour, the gold
   underline, and worst, `padding-bottom:1px`, which collapsed a 55px button to
   35px and dropped its label onto the bottom edge. On the navy button the
   label went dark-on-dark and disappeared completely.
   This is NOT specific to the Advertise page. Per THEME-ARCHITECTURE decision
   1 the publisher writes the partner CTA into the post body, so the primary
   action on every sponsored post had the same three defects waiting.
   Colour is restored per dark variant rather than on `.btn`, so a future
   light or outline variant does not inherit white text. */
.prose a.btn{border-bottom:0;padding-bottom:17px}
.prose a.btn.btn-big{padding-bottom:21px}
.prose a.btn-red,.prose a.btn-ink{color:#fff}
.prose a.btn-red:hover,.prose a.btn-ink:hover{color:#fff}
.partner-cta .cta-fine{margin-top:14px;font:400 12px/1.5 var(--sans);color:var(--faint)}

/* Lists. FLAGGED AS NEW, not extracted: no locked mockup body ever used a
   list, so the design system has no list treatment, but three June articles
   do use them (Berkeley, plus both recipe files). Rather than invent an
   editorial treatment with no design round behind it, these inherit the
   locked body-copy type exactly and add only the indent a list needs, with
   the marker in the system's gold. Worth a proper round before a
   list-heavy piece runs. */
.prose ul,.prose ol{margin:0 0 28px 1.15em;padding:0}
.prose li{font:400 17.5px/1.85 var(--sans);color:var(--ink);margin-bottom:9px;padding-left:.35em}
.prose li::marker{color:var(--gold)}

/* ============================================================
   ADVERTISE PAGE (built 2026-08-25)
   Data tables and the media-kit call to action. Everything else on the page
   reuses locked components (.rail, .credits, .btn/.btn-red).
   ============================================================ */
/* Every one of these was built to sit at PAGE level and carries its own 22px
   gutter. As of the publisher furniture upgrade they all ship inside the post
   body, so they render nested inside .prose, which already applies that
   gutter: it doubles and the component ends up narrower than the body copy
   beside it. That is the exact bug the friction log calls "doubled gutters on
   nested components", so the whole set is neutralised here in one place
   rather than one component at a time.
   Neutralised ONLY when nested, so a page-level use of any of them (the
   recipe page's own rail, the Contact page's .credits) is untouched. */
.prose .rail,.prose .credits,.prose .support,.prose .share,
.prose .colophon,.prose .partner-cta,.prose .recipe-teaser{
  padding-left:0;padding-right:0;max-width:100%;
}

/* THE RECIPE CARD IS THE ONE PIECE THAT MUST BE *WIDER* THAN THE BODY MEASURE,
   not merely un-gutter-doubled. Its whole design is the gold-ruled ingredient
   panel BESIDE the method (340px + 1fr inside 1060px). In the locked design the
   section is a SIBLING of .prose; in Ghost everything lives inside {{content}},
   so it inherited the 680px measure, the two columns collapsed to 636px, and
   the method wrapped to two or three words a line. Break it back out to its
   designed width, centred on the viewport rather than on the body column. */
.prose .recipe{
  width:100vw;max-width:none;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  padding:0;
}
.prose .recipe > *{max-width:1060px;margin-left:auto;margin-right:auto;padding:0 44px}
/* The chef box follows the card at the same 1060px measure in the locked
   design, so it breaks out identically rather than snapping back to 680. */
.prose .chefbox{
  width:100vw;max-width:none;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  padding:0;
}
.prose .chefbox > .box{max-width:1060px;margin:0 auto}

/* And the same collision one level deeper. `.prose ul,.prose ol` and `.prose li`
   further down this file are EQUALLY specific to `.ing li` / `.steps li` and
   come later, so they won: the ingredient list picked up a 1.15em indent that
   pushed its checkboxes outside the panel, and the method lost its 76px numeral
   gutter, which dropped the big Playfair numerals on top of the step text.
   Restore each component's own geometry when nested. */
.prose .ing ul,.prose .steps ol{margin:0;padding:0}
.prose .ing li{
  font:400 15px/1.6 var(--sans);color:var(--ink);margin-bottom:0;
  padding:11px 0 11px 30px;
}
.prose .steps li{
  font:400 16.5px/1.8 var(--sans);color:var(--ink);
  padding:0 0 30px 76px;margin-bottom:30px;
}
.prose .steps li:last-child{padding-bottom:0;margin-bottom:0}
.prose .ing li::marker,.prose .steps li::marker{content:none}

/* Responsive rules for the card live AFTER the breakout block above, not with
   the other breakpoints: the breakout selectors are equally specific and would
   otherwise win on source order, which is exactly what kept the method numerals
   in a side gutter on a phone instead of above the step. */
/* ---- RECIPE CARD, RESPONSIVE ----------------------------------------------
   These were in the locked design and never made it into the theme: only the
   @media print half was ported. Without them .rc-grid stayed at "340px 1fr" on
   a phone, so the ingredient panel took more than the whole screen and the
   method was squeezed into what was left. Ported verbatim from
   design/canada-magazine-recipe-template.html.
   The .prose-scoped duplicates are not belt-and-braces: the breakout rules
   further down this file are more specific and would otherwise beat the plain
   selectors here. */
@media (max-width:1080px){
  .rc-grid{grid-template-columns:1fr;gap:44px}
  .ing{position:static}
}
@media (max-width:720px){
  .recipe{padding:0 22px;margin-top:58px}
  .prose .recipe > *{padding:0 22px}
  .ing{padding:26px 22px 28px}
  .steps li,.prose .steps li{padding:0 0 30px;padding-top:58px}
  .steps li::before{font-size:46px;top:0}
  .chefbox{padding:0 22px}
  .prose .chefbox > .box{margin:0 22px}
  .chefbox .box{flex-direction:column;text-align:center;gap:22px;padding:30px 22px}
  .chefbox .t p{max-width:none}
  .rc-grid.split{grid-template-columns:1fr}
}
.adv-table{margin:34px 0 0;overflow-x:auto}
.adv-table table{width:100%;border-collapse:collapse;min-width:328px}
.adv-table th{
  font:600 8.5px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--gold);
  text-align:left;padding:0 0 13px;border-bottom:1px solid rgba(169,140,85,.5);white-space:nowrap;
}
.adv-table th + th,.adv-table td + td{padding-left:18px}
.adv-table th.num,.adv-table td.num{text-align:right}
.adv-table td{
  font:500 15.5px/1.45 var(--serif);color:var(--ink);
  padding:15px 0;border-bottom:1px solid rgba(12,24,40,.1);vertical-align:top;
}
.adv-table td.num{font-weight:600;white-space:nowrap}
.adv-table td small{display:block;font:400 11.5px/1.5 var(--sans);color:var(--faint);margin-top:5px}
.adv-table tbody tr:last-child td{border-bottom:0}
.prose p.adv-note{margin:14px 0 0;font:400 12.5px/1.65 var(--sans);color:var(--faint)}
/* the media-kit ask: this page's primary action. Same skeleton as the partner
   CTA it echoes, opened up rather than boxed, matching the colophon and
   recipe-teaser convention of centred and unboxed end matter. */
.adv-cta{margin:78px 0 0;padding-top:46px;text-align:center;border-top:1px solid rgba(169,140,85,.5)}
.adv-cta h3{font:700 clamp(24px,2.8vw,31px)/1.2 var(--serif);color:var(--ink);margin-bottom:12px}
.adv-cta p{font:400 14.5px/1.7 var(--sans);color:var(--ink-soft);max-width:48ch;margin:0 auto 28px;text-wrap:balance}
.adv-cta .cta-fine{margin:16px auto 0;font:400 12px/1.55 var(--sans);color:var(--faint)}

@media (max-width:720px){
  /* The four-up rail overflowed the viewport by 27px on this page, and the
     cause is worth writing down because it will recur on any reused rail.
     A `1fr` grid track has min-width:auto, so it will NOT shrink below its
     content's min-content width. This page's labels ("Circulation",
     "Advertisers") are single unbreakable words about 92px wide, and a
     quarter of a 390px screen is only 87px, so all four tracks pushed the
     grid wider than the screen and the whole document scrolled sideways.
     The recipe page never hit this because its labels are "Serves", "Prep",
     "Cook" and "Total", which all fit.
     Two-up on mobile, which also reads better than four 87px columns.
     Scoped to .prose so the recipe page's page-level rail is untouched. */
  .prose .rail .inner{grid-template-columns:1fr 1fr}
  .prose .rail .f{min-width:0}
  /* the vertical divider is drawn by .f + .f, so cell 3 would draw one hard
     against the container's left edge once it starts a second row */
  .prose .rail .f:nth-child(3)::before{display:none}
  .prose .rail .f:nth-child(n+3){border-top:1px solid rgba(169,140,85,.35)}
}

/* The SIMPLE funnel variant of the Advertise page (Tyler, 2026-08-25). The
   page is three sentences and two buttons, so the gold rule that separated a
   long page from its call to action would be separating nothing. Buttons sit
   in a centred row and WRAP rather than stretch on a narrow screen, which is
   the same reasoning as the archive template's "a partial last row stays
   open, never stretched".
   NOTE: the .adv-table rules above are unused while this page is simple. They
   are kept deliberately, because docs/advertise-page-content-ARCHIVE.md is the
   starting point whenever Advertise gets its real build. */
/* THE COVERS (Tyler, 2026-08-25, round 2): the copy came out and the two
   sides of the flip cover went in - food left, travel right, laid like two
   magazines set down on a desk. The page IS the product, so the covers do
   the selling and the buttons do the asking.
   The physical-object treatment is the colophon's, scaled up: hairline
   border, a tight contact shadow plus a soft ambient one. Opposing tilts,
   and the right cover sits 14px lower - the asymmetry is what makes the
   pair read hand-placed instead of mirrored clip-art. Always the REAL
   issue cover files (locked rule), served as theme assets. Static on
   purpose: the covers are not links, so they do not respond to hover. */
.adv-covers{
  display:flex;justify-content:center;align-items:flex-start;
  gap:clamp(20px,4.5vw,48px);
  margin:6px 0 0;padding:14px 0 30px;
}
.adv-covers img{
  width:clamp(138px,32vw,250px);height:auto;
  border:1px solid rgba(12,24,40,.16);
  box-shadow:0 2px 6px rgba(12,24,40,.14),0 30px 52px -26px rgba(12,24,40,.45);
}
.adv-covers .food{transform:rotate(-3.5deg)}
.adv-covers .travel{transform:rotate(2.75deg) translateY(14px)}

.adv-cta.simple{margin:44px 0 0;padding-top:0;padding-bottom:84px;border-top:0}
/* Tyler 2026-08-31: the button sat directly on the rule below it. The covers
   get ~74px above the buttons; the same order of air now sits below them. */
.adv-cta .btn-row{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.adv-cta .btn-row .btn{margin:0}
@media (max-width:720px){
  /* full-width stacked buttons read as one clear choice each on a phone,
     rather than two half-width chips fighting for the same line */
  .adv-cta .btn-row{flex-direction:column;align-items:stretch}
  .adv-cta .btn-row .btn{justify-content:center}
}

/* CONTACT, placeholder state (Tyler, 2026-08-25 round 4). The page's entire
   content is one email, so it borrows the credits component but overrides
   two things about it. WHY THE GAP WAS HUGE (Tyler asked): three spacings
   built for fuller pages were stacking - the dek's 34px, the prose area's
   64px top padding (meant for pages with a feature image in between), and
   the credits strip's own 64px (tuned for sitting after an article body) -
   ~160px of nothing on a page with nothing in between. The negative margin
   here counters the prose padding so the total gap lands at the standard
   64px section rhythm. And the email is the page's one piece of content,
   so it carries real size (23px serif) instead of the 14px footnote scale
   the credits strip uses at the end of an article. */
.prose .contact-email{margin:-34px auto 0;grid-template-columns:1fr;max-width:640px}
.prose .contact-email .c h4{font-size:10px;letter-spacing:.3em;margin-bottom:14px}
.prose .contact-email .c .v{font-size:clamp(19px,2.2vw,23px)}
.prose .contact-email .c .v a{border-bottom-width:2px;padding-bottom:3px}

/* ============================================================
   HOMEPAGE  (source: design/canada-magazine-homepage-v4-issue.html)
   Extracted, not rewritten, per THEME-ARCHITECTURE decision 5. Only the
   selectors this stylesheet did not already carry are here; the tokens,
   chrome, .sec / .sec-head / .sec-link, .trio-grid, .t-card, .kicker-strong,
   the newsletter, the footer and the lightbox all already exist above and are
   deliberately NOT repeated. A duplicate that lands later in the file wins the
   cascade over a correct rule inside an earlier media query, which is exactly
   how the mobile .credits override was silently reverted once already.

   FOUR SELECTORS IN THE MOCKUP ARE DELIBERATELY NOT CARRIED: .issue-grid,
   .lead-card and .side-card style a "2 · IN THIS ISSUE" section that the
   locked file no longer has any markup for (the chefs band replaced it), so
   they are dead there and would be dead here. Named explicitly so the
   selector-diff grep in .claude/rules/ghost-theme-conversion.md reports a
   decision rather than a silent drop. .btn-line IS carried, because it is part
   of the locked button set even though this page no longer uses it.
   ============================================================ */

.btn-line{border-color:rgba(12,24,40,.3);color:var(--ink);background:transparent}
.btn-line:hover{border-color:var(--ink)}
.btn-gold-navy{border-color:rgba(196,162,101,.6);color:#D9BE8C;background:transparent}
.btn-gold-navy:hover{border-color:#D9BE8C;background:rgba(196,162,101,.1)}

/* The homepage's section heads run one notch larger than the article page's
   "Continue Reading" head, which is where the shared .sec-head rule above came
   from. Scoped to the home template so converting the homepage cannot resize
   every other page's section heads. */
.home-template .sec-head h2{font:700 clamp(30px,3.2vw,42px)/1.08 var(--serif);letter-spacing:-.01em}
/* The shared newsletter band carries a 96px top margin tuned for sitting at the
   end of an article. Here it follows a full section that already ends on 100px
   of padding, so the margin is removed rather than stacking to ~200px. */
.home-template .news{margin-top:0}

/* ============ 1 · HERO — dual-cover diagonal split ============ */
.hero{
  position:relative;height:calc(100vh - 118px);min-height:600px;max-height:920px;
  overflow:hidden;background:var(--navy-950);color:#fff;
}
.pane{position:absolute;inset:0;cursor:pointer}
.pane img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .8s ease, filter .5s ease;
}
.pane .scrim{position:absolute;inset:0}
.pane-travel{
  clip-path:polygon(0 0, 57% 0, 43% 100%, 0 100%);
  transition:clip-path .65s cubic-bezier(.3,.1,.2,1), filter .5s ease;
  filter:drop-shadow(4px 0 0 rgba(255,255,255,.85));
  z-index:2;
}
.pane-food{
  clip-path:polygon(57% 0, 100% 0, 100% 100%, 43% 100%);
  transition:clip-path .65s cubic-bezier(.3,.1,.2,1), filter .5s ease;
  z-index:1;
}
.pane-travel img{object-position:26% 30%}
.pane-food img{object-position:72% 18%}
/* The scrim's mid and end stops are carried UP from the mockup's 42%/62% to
   50%/74%. The mockup's panes hold a short printed cover line; a real Ghost
   headline plus a real excerpt make the content block roughly 120px taller, so
   the gold kicker was landing above the darkened zone. On the food pane, whose
   photo is bright exactly there, "THE FOOD COVER · JUNE 2026" was effectively
   invisible against it. The bottom stop is untouched, so the band the mockup
   was judged on is unchanged; only the reach of the fade differs. */
.pane-travel .scrim{background:linear-gradient(14deg, rgba(6,15,28,.86) 8%, rgba(6,15,28,.5) 50%, transparent 74%)}
.pane-food .scrim{background:linear-gradient(346deg, rgba(6,15,28,.86) 8%, rgba(6,15,28,.5) 50%, transparent 74%)}
/* hover states (main.js toggles hov-t / hov-f on .hero) */
.hero.hov-t .pane-travel{clip-path:polygon(0 0, 65% 0, 51% 100%, 0 100%)}
.hero.hov-t .pane-food{clip-path:polygon(65% 0, 100% 0, 100% 100%, 51% 100%)}
.hero.hov-t .pane-food img{filter:brightness(.6) saturate(.85)}
.hero.hov-t .pane-travel img{transform:scale(1.03)}
.hero.hov-f .pane-travel{clip-path:polygon(0 0, 49% 0, 35% 100%, 0 100%)}
.hero.hov-f .pane-food{clip-path:polygon(49% 0, 100% 0, 100% 100%, 35% 100%)}
.hero.hov-f .pane-travel img{filter:brightness(.6) saturate(.85)}
.hero.hov-f .pane-food img{transform:scale(1.03)}

.pane .corner{
  position:absolute;top:26px;
  font:600 10px/1.5 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.85);
}
.pane-travel .corner{left:44px}
.pane-food .corner{right:44px;text-align:right}

.pane .content{position:absolute;bottom:52px;max-width:520px}
.pane-travel .content{left:44px}
.pane-food .content{right:44px;text-align:right}
.pane .kick{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.pane-food .kick{justify-content:flex-end}
.pane h1,.pane h2.cover-title{
  font:800 clamp(34px,3.6vw,56px)/1.02 var(--serif);letter-spacing:-.012em;
  margin-bottom:12px;text-wrap:balance;
}
/* THE ONE DEVIATION FROM THE MOCKUP IN THIS BAND, and why. The mockup's panes
   carry the printed COVER LINES ("Experience Six Nations", "Chef Taylor
   Parker"), which are short. A Ghost post has no cover-line field, so the real
   headline and the real excerpt render here instead, and both are far longer:
   the June food cover's excerpt is 43 words against the mockup's 9. The full
   sentence stays in the DOM for crawlers and is clamped visually, so the pane
   keeps the locked proportions instead of the dek pushing the headline off the
   top of a phone screen. */
.pane .dek{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
  font:500 15.5px/1.55 var(--serif);font-style:italic;color:#D9E2EC;
  margin-bottom:20px;max-width:420px;
}
.pane-food .dek{margin-left:auto}
.pane .read{
  display:inline-block;
  font:600 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#fff;
  border-bottom:1px solid var(--gold-bright);padding-bottom:7px;
}
.pane .read:hover{color:var(--gold-bright)}
/* The Partner flag inherits gold-on-transparent from the card version, which
   reads correctly on the hero's dark scrim; only the alignment needs resetting
   because it sits in a flex kicker here rather than after inline text. */
.pane .kick .partner-flag,.interlude .kick .partner-flag{
  margin-left:0;vertical-align:0;
  /* The card version of this flag sits on white. Here it sits on a photograph,
     and gold-on-photo is the weakest contrast pair on the site. A sponsored
     item shown without a readable label is a blocking error, not a cosmetic
     one, so the flag carries its own ground rather than depending on whatever
     happens to be behind it. */
  background:rgba(6,15,28,.5);color:var(--gold-bright);border-color:rgba(196,162,101,.75);
}

.hero-chip{
  position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);z-index:4;
  background:rgba(6,15,28,.9);border:1px solid rgba(196,162,101,.55);
  padding:11px 18px;text-align:center;pointer-events:none;
  transition:opacity .4s ease;
}
.hero.hov-t .hero-chip,.hero.hov-f .hero-chip{opacity:0}
.hero-chip .t1{font:700 11px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#fff}
.hero-chip .t2{font:600 8.5px/1.9 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold-bright)}

/* ============ 3 / 4b · FULL-BLEED INTERLUDE ============ */
.interlude{position:relative;height:64vh;min-height:430px;overflow:hidden;background:var(--navy-950);color:#fff}
.interlude img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 62%;transition:transform .8s ease}
/* Deepened from the mockup's .2@55% / transparent@75% for the same reason as
   the hero's: a real Ghost headline can run to four lines where the mockup's
   editorial cover line ran to two, pushing the kicker clear of the darkened
   zone. The band's own photo is the variable here, so the scrim has to hold up
   over a bright, busy frame as well as a moody one. */
.interlude .scrim{position:absolute;inset:0;background:linear-gradient(8deg, rgba(6,15,28,.8) 10%, rgba(6,15,28,.45) 58%, transparent 84%)}
/* whole banner is one link; hover makes the click obvious (zoom + deepen + button fill) */
.interlude .cover-link{position:absolute;inset:0;z-index:2;cursor:pointer}
.interlude::after{content:"";position:absolute;inset:0;background:rgba(6,15,28,0);transition:background .35s ease;z-index:1;pointer-events:none}
.interlude:hover::after{background:rgba(6,15,28,.16)}
.interlude:hover img{transform:scale(1.025)}
.interlude .content{position:absolute;left:0;right:0;bottom:0;max-width:var(--maxw);margin:0 auto;padding:0 44px 54px;z-index:3;pointer-events:none}
.interlude .kick{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.interlude h2{font:700 clamp(32px,4.2vw,56px)/1.06 var(--serif);letter-spacing:-.01em;max-width:16ch;margin-bottom:20px}
.interlude .row{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap}
.interlude .credit{font:600 9.5px/1.8 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.interlude .read{
  display:inline-block;pointer-events:auto;
  font:600 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#fff;
  border:1px solid rgba(255,255,255,.8);padding:14px 24px;
  transition:all .3s ease;
}
.interlude:hover .read{background:#fff;color:var(--navy-950);border-color:#fff}

/* ============ 4 · WHERE TO NEXT — the trio's own ground ============ */
.trio{background:var(--off);border-top:1px solid rgba(12,24,40,.08);border-bottom:1px solid rgba(12,24,40,.08)}

/* ============ 5b · CASCADE BAND — The Flip Wall (LOCKED 2026-08-31) ============
   Every issue since 2021 on one tilted band; assets/js/cascade.js deals a
   different magazine into every turn (docs/superpowers/specs/
   2026-08-31-cascade-band-review.md). This block is generated-adjacent: it
   must stay IDENTICAL to the delimited block in scripts/cascade-band.mjs,
   which emits the review pages the rounds were approved on. The nth-child
   rules keep every visible row complete per breakpoint — a partial row
   inside the wall-to-wall window shows navy notches, which Tyler's round-2
   verdict outlawed (and scripts/verify-cascade-band.mjs measures). */
.cascade{position:relative;width:100%;overflow:hidden;background:var(--navy-950);height:clamp(340px,30vw,450px)}
.cascade-wrap{position:absolute;inset:-14% -4%;display:flex;align-items:center;perspective:1600px}
.cascade-field{flex:1;display:grid;grid-template-columns:repeat(11,1fr);gap:clamp(8px,1vw,14px);transform:rotate(-6deg)}
.ct{position:relative;aspect-ratio:747/1000}
.ct-in{position:absolute;inset:0;transform-style:preserve-3d;animation:ct-flip 26s linear infinite;animation-delay:var(--fd,0s)}
.ct.solo .ct-in{animation:none}
.ctf{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:2px;border:1px solid rgba(255,255,255,.08);box-shadow:0 14px 30px -12px rgba(0,0,0,.55)}
.ctf.bk{transform:rotateY(180deg)}
@keyframes ct-flip{0%,40%{transform:rotateY(0deg)}47.5%,90%{transform:rotateY(180deg)}97.5%,100%{transform:rotateY(360deg)}}
@media (prefers-reduced-motion:reduce){.ct-in{animation:none!important}}
html.cascade-js .ct.stage .ct-in{animation:none;transition:transform 1.9s cubic-bezier(.42,.08,.18,1)}
@media (max-width:1080px){
  .cascade-field{grid-template-columns:repeat(8,1fr)}
  .cascade{height:clamp(300px,34vw,450px)}
  .ct:nth-child(n+41){display:none}            /* 40 = 5x8 */
}

/* ============ 2 · MEET THE CHEFS ============ */
.portraits{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.portrait{position:relative;display:block}
.portrait .ph{display:block;aspect-ratio:3/3.5;overflow:hidden;position:relative}
.portrait .ph img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .8s ease}
.portrait:hover .ph img{transform:scale(1.02)}
/* RULE: chefs render SYMMETRICALLY — heads on the same line, faces at matched
   scale, chest-and-head framing. The mockup did that with per-portrait --z /
   --ty custom properties typed by hand onto each <img>. Ghost has no field to
   carry them, so the theme uses the shared object-position:top center above,
   which holds for portrait-orientation headshots; the .tight hook is kept so a
   future per-post crop can be reintroduced without re-deriving this rule. */
.portrait .ph img.tight{transform:translateY(var(--ty,0)) scale(var(--z,1));transform-origin:50% 0}
.portrait:hover .ph img.tight{transform:translateY(var(--ty,0)) scale(calc(var(--z,1) + .03))}
.portrait .ph::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(6,15,28,.78));
}
.portrait .id{position:absolute;left:26px;right:26px;bottom:22px;color:#fff;display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.portrait .nm{font:800 clamp(28px,2.6vw,40px)/1 var(--serif);letter-spacing:-.012em}
.portrait .nm .chef{display:block;font:500 14px/1 var(--serif);font-style:italic;color:var(--gold-bright);margin-bottom:7px}
.portrait .rs{font:600 9px/1.7 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#B9C6D4;text-align:right;white-space:nowrap}

/* ============ 6 · COVERS ARCHIVE — year tabs + lightbox ============ */
.museum-head{text-align:center;margin-bottom:36px}
.museum-head .smallcaps{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:14px}
.museum-head h2{font:700 clamp(30px,3.2vw,42px)/1.1 var(--serif)}
.year-tabs{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-bottom:52px}
.year-tab{
  font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
  background:none;border:1px solid transparent;padding:10px 16px;cursor:pointer;transition:all .2s;
}
.year-tab:hover{color:var(--ink)}
.year-tab.on{color:var(--ink);border-color:var(--gold)}
.museum-row{display:grid;grid-template-columns:repeat(6,1fr);gap:34px}
.frame{transition:transform .3s ease;cursor:zoom-in;background:none;border:0;padding:0;text-align:inherit}
.frame:hover{transform:translateY(-8px)}
.frame img{
  border:1px solid rgba(12,24,40,.16);
  box-shadow:0 1px 0 rgba(12,24,40,.05), 0 22px 40px -24px rgba(12,24,40,.35);
  /* The generated band's images carry width/height attributes (good for CLS);
     without an explicit height:auto the attribute height wins against the grid
     column's width and every cover renders as a stretched strip - caught on
     the 2026-08-31 band shots. */
  width:100%;height:auto;display:block;
}
.frame .plaque{
  margin-top:16px;text-align:center;
  font:600 9px/1.8 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--faint);
}
.frame .plaque b{display:block;font:500 12px/1.5 var(--serif);font-style:italic;letter-spacing:0;text-transform:none;color:var(--ink)}
.archive-note{
  display:none;text-align:center;padding:60px 20px;
  font:500 15px/1.7 var(--serif);font-style:italic;color:var(--ink-soft);
}
.archive-note.show{display:block}
/* The covers reuse the sitewide lightbox element rather than adding a second
   one; a printed cover gets the mockup's white mount and the narrower cap,
   which a full-bleed article photo does not want. */
.lb.cover img{border:6px solid #fff;max-width:min(90vw,640px)}

/* ============ 7 · PRINT CALENDAR ============ */
.cal{border-top:1px solid rgba(12,24,40,.08)}
.cal-table{display:grid;grid-template-columns:repeat(6,1fr);border:1px solid rgba(169,140,85,.5);margin-top:52px}
.cal-cell{padding:28px 18px 26px;text-align:center;border-left:1px solid rgba(169,140,85,.3);position:relative}
.cal-cell:first-child{border-left:0}
.cal-cell .mo{font:700 21px/1 var(--serif);margin-bottom:6px}
.cal-cell .season{font:600 9.5px/1.5 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
/* The seasonal accent - Tyler's 2026-08-31 review: the in-market dates and
   stamp came out, a small icon sits where the date did. The SVGs stroke
   currentColor, so this one color line paints all six (and follows the accent
   token if it ever changes - today's gold sweep found ~40 hardcoded tints;
   this one is deliberately not another). */
.cal-cell .ico{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:2px;color:var(--gold)}
.cal-cell .ico svg{width:30px;height:30px}
.cal-notes{margin-top:30px;text-align:center}
.cal-notes .n2{font:400 13.5px/1.6 var(--sans);color:var(--ink-soft)}
.cal-notes .n2 a{color:var(--red);border-bottom:1px solid rgba(211,47,47,.4);padding-bottom:2px}
.cal-notes .n2 a:hover{border-color:var(--red)}
.cal-notes .n3{margin-top:10px;font:400 12px/1.6 var(--sans);color:var(--faint)}
.cal-notes .n3 a{color:var(--ink-soft);border-bottom:1px solid rgba(12,24,40,.25);padding-bottom:2px}
.cal-notes .n3 a:hover{color:var(--ink);border-color:var(--ink)}

/* ============ 9 · PARTNERS — the navy back cover ============ */
.adv{
  background:
    radial-gradient(900px 460px at 50% 130%, rgba(200,35,43,.14), transparent 60%),
    radial-gradient(760px 420px at 12% -30%, rgba(38,64,102,.5), transparent 60%),
    var(--navy-900);
  color:#fff;padding:110px 0;text-align:center;position:relative;overflow:hidden;
}
.adv::before{
  content:"";position:absolute;right:-170px;top:-110px;width:600px;height:600px;
  background:url("../images/cm-leaf.png") center/contain no-repeat;
  opacity:.06;transform:rotate(12deg);pointer-events:none;
}
.adv .script{font:400 32px/1 var(--script);color:#D9BE8C;display:block;margin-bottom:12px;position:relative}
.adv h2{font:700 clamp(32px,3.8vw,50px)/1.1 var(--serif);max-width:760px;margin:0 auto 18px;position:relative}
.adv p{font:400 15.5px/1.7 var(--sans);color:#B9C6D6;max-width:560px;margin:0 auto 40px}
.adv-ctas{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:14px;position:relative}
/* The newsletter band and the partners band are now adjacent, both navy: the
   sitewide chrome rule made the newsletter navy after this mockup was drawn.
   A gold hairline keeps them reading as two bands of a back-cover spread
   rather than one long undifferentiated navy block. */
.home-template .news + .adv{border-top:1px solid rgba(196,162,101,.28)}

/* ============ homepage responsive ============ */
@media (max-width:1080px){
  .portraits{grid-template-columns:1fr;gap:56px}
  .museum-row{grid-template-columns:repeat(3,1fr);row-gap:44px}
  .cal-table{grid-template-columns:repeat(3,1fr)}
  .cal-cell:nth-child(4){border-left:0}
  .cal-cell{border-top:1px solid rgba(169,140,85,.3)}
  .cal-cell:nth-child(-n+3){border-top:0}
}
@media (max-width:900px){
  .hero{height:auto;min-height:0;max-height:none}
  .pane{display:block;position:relative;height:56vh;min-height:420px;clip-path:none !important;filter:none !important}
  .pane-food{border-top:2px solid var(--gold)}
  .pane .content{left:22px !important;right:22px !important;bottom:36px;text-align:left !important;max-width:none}
  .pane-food .kick{justify-content:flex-start}
  .pane-food .dek{margin-left:0}
  .pane .corner{left:22px !important;right:auto !important;text-align:left !important}
  .hero-chip{display:none}
  /* The 14deg / 346deg scrims above are aimed along a DIAGONAL clip that no
     longer exists once the panes stack full width, and they leave both the
     top corner label and the gold kicker sitting on bare photograph. Replaced
     with a vertical scrim that grounds the corner at the top, stays out of the
     way through the middle of the picture, and carries the content block.

     THE STOPS ARE IN PIXELS, NOT PERCENTAGES, deliberately. The content block
     here is a real headline plus a real excerpt, so it is around 260px tall
     whatever the pane height happens to be; a percentage stop tuned at 390px
     drifts off the block on a taller phone and puts the gold kicker back on
     bare photograph. Two layers: 120px of top scrim for the corner label, and
     340px from the bottom for the content. */
  .pane .scrim{background:
    linear-gradient(180deg, rgba(6,15,28,.6) 0, rgba(6,15,28,0) 120px),
    linear-gradient(0deg, rgba(6,15,28,.92) 0, rgba(6,15,28,.8) 265px, rgba(6,15,28,0) 350px);
  }
  /* Two lines rather than three. The stacked pane is around 470px tall and the
     content block is the thing competing with the photograph for it, so the
     dek gives up a line here; the full sentence is still in the DOM. */
  .pane .dek{-webkit-line-clamp:2;margin-bottom:18px}
  /* THE KICKER CARRIES ITS OWN GROUND HERE, rather than the scrim being pushed
     further up the photograph to reach it. How high the kicker sits depends on
     how many lines the headline takes, and that is a property of the post, not
     of the design: the food cover's real title runs to four lines on a phone
     where the travel cover's runs to three, so no single scrim height serves
     both. A chip is deterministic, and it matches the Partner flag beside it,
     which needed the same treatment for the same reason. */
  .pane .kick .smallcaps{background:rgba(6,15,28,.55);padding:5px 9px}
  .pane .kick{gap:8px}
}
@media (max-width:720px){
  .interlude .content{padding:0 22px 44px}
  /* The cascade band's phone geometry (part of the 5b block above): the wall
     re-grids to six columns and the window fits it wall-to-wall. */
  .cascade{height:clamp(420px,118vw,480px)}
  .cascade-wrap{perspective:1100px}
  .cascade-field{transform:rotate(-4deg) scale(1.06);grid-template-columns:repeat(6,1fr);gap:8px}
  .ct:nth-child(n){display:block}
  .ct:nth-child(n+43){display:none}            /* 42 = 7x6 */
  .adv{padding:80px 0}
  .museum-row{grid-template-columns:1fr 1fr}
  .cal-table{grid-template-columns:1fr 1fr;margin-top:44px}
  .cal-cell:nth-child(2n+1){border-left:0}
  .cal-cell:nth-child(3){border-left:1px solid rgba(169,140,85,.3)}
  .portrait .id{left:16px;right:16px;bottom:14px}
  /* A 1fr track will not shrink below its longest unbreakable word. At 390px a
     half-screen cell is ~163px and "Back to School" fits, but the stamp is
     absolutely positioned and 132px wide, so it is the cell padding that has
     to give rather than the grid. Same class of bug as the Advertise rail. */
  .cal-cell{padding:26px 12px 24px}
  /* CORRECTION TO THE LOCKED MOCKUP. Its 1080px block clears the top border on
     cells 1-3, which is right for a three-up grid. At two-up, cell 3 starts the
     SECOND row, and with no top border rows one and two ran together into one
     six-cell block with a stray divider through it. Only cells 1 and 2 open the
     grid at this width. */
  .cal-cell:nth-child(3){border-top:1px solid rgba(169,140,85,.3)}
  /* Same story as the hero: at this width the band is shorter, the headline is
     taller, and the kicker lands on bare photograph. */
  .interlude .scrim{background:linear-gradient(0deg, rgba(6,15,28,.92) 0, rgba(6,15,28,.82) 165px, rgba(6,15,28,0) 300px)}
  .interlude .kick .smallcaps{background:rgba(6,15,28,.55);padding:5px 9px}
  .interlude .kick{gap:8px}
}

/* ============ PAST COVERS (/past-covers/) ============
   The full cover archive as year shelves of PAIRS: every issue's two covers
   side by side (food left, travel right — the order Advertise and the museum
   band established) under one plaque. Locked mockup:
   design/canada-magazine-past-covers-template.html; markup is generated into
   the page content by `node scripts/past-covers.mjs page`, so this section
   styles classes that arrive via {{content}}, not via a template.
   Reuses arch-head, .year-tab, .frame and the sitewide lightbox; everything
   below is additive and scoped .pcv- so the homepage's museum band styles are
   untouched. */
.pcv-tabs{margin:40px 0 0}
.pcv-tabs .year-tab{display:inline-block}
.pcv-tabs .year-tab:hover{border-color:rgba(169,140,85,.5)}
.pcv-body{padding:56px 0 8px}
.pcv-year{padding:26px 0 62px;scroll-margin-top:100px}
.pcv-yearhead{display:flex;align-items:baseline;gap:20px;margin-bottom:42px}
.pcv-yearhead h2{font:700 clamp(30px,3vw,40px)/1 var(--serif);letter-spacing:-.01em}
.pcv-yearhead .n{color:var(--faint)}
.pcv-yearhead .rule{flex:1;height:1px;background:rgba(169,140,85,.4);align-self:center}
.pcv-grid{display:grid;grid-template-columns:1fr 1fr;gap:68px 56px}
.pcv-pair .duo{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.pcv-pair .frame{display:block;width:100%}
.pcv-pair .frame img{width:100%;height:auto}
/* The one-sided issue (May 2022): a lone cover at PAIR-cover size, centred.
   These two rules must come AFTER .pcv-pair .frame at equal specificity, or
   its width:100% wins the cascade and the single renders double-size — which
   is exactly how it shipped to the live site the first time. */
.pcv-single .duo{display:flex;justify-content:center}
.pcv-single .frame{width:calc(50% - 6px)}
.pcv-pair .plaque{
  display:block;margin-top:18px;text-align:center;
  font:600 9.5px/1.9 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--faint);
}
.pcv-pair .plaque b{
  display:block;font:500 14px/1.5 var(--serif);font-style:italic;
  letter-spacing:0;text-transform:none;color:var(--ink);
}
@media (max-width:720px){
  .pcv-tabs{margin-top:32px}
  .pcv-body{padding-top:40px}
  .pcv-year{padding-bottom:46px;scroll-margin-top:84px}
  .pcv-yearhead{gap:14px;margin-bottom:34px}
  .pcv-grid{grid-template-columns:1fr;gap:56px}
  .pcv-pair .duo{gap:10px}
}