@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Mono:wght@400;500;600&display=swap');
@font-face { font-family: 'Buenard'; src: url('fonts/Buenard.ttf') format('truetype'); font-weight: 400; font-display: swap; }
/* ==========================================================================
   The Good Cold — design system, v1 (2026-10-26)
   Swiss in method, Michigan in temperature.
   One grid. One type pair. One scale. Colour carries meaning.
   ========================================================================== */
:root {
  /* colour: four working colours and a paper */
  --ink: #0e243a;        /* text, night, structure */
  --paper: #f8f6f0;      /* the page */
  --stock: #efe9dc;      /* a second paper: quiet modules */
  --signal: #c8202f;     /* labels, dates, the one thing to notice */
  --sun: #f2c84b;        /* "do this": actions, highlights */
  --sky: #d8e8f2;        /* weather, gear, outdoors */
  --frost: #4fa9d6;      /* links on dark, focus */
  --rule: #d9d0bf;       /* hairlines */
  --mute: #5a6b7c;       /* secondary text */
  --night: #091827;      /* after-dark bands */

  /* type: a condensed grotesk for display, a neutral grotesk for reading */
  --display: 'Barlow Condensed', 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
  --text: 'Public Sans', 'Helvetica Neue', Arial, sans-serif;
  --hand: 'Shantell Sans', 'Public Sans', cursive; /* recipes and margin notes only */
  --serif: 'Buenard', 'Libertinus Serif', Georgia, serif; /* stories and essays: the catalogue voice */
  --mono: 'Red Hat Mono', ui-monospace, monospace; /* museum labels: kickers, dates, prices, phone numbers */

  /* scale: major third (1.25), anchored at 16px */
  --t-xs: 12px; --t-s: 14px; --t-m: 16px; --t-l: 20px; --t-xl: 25px;
  --t-2: 31px; --t-3: 39px; --t-4: 49px; --t-5: 61px; --t-6: 76px; --t-7: 95px; --t-8: 119px;

  /* space: an 8px baseline */
  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 32px; --s6: 48px; --s7: 64px; --s8: 96px; --s9: 128px;

  /* grid */
  --cols: 4; --gap: 24px; --margin: clamp(16px, 4vw, 48px); --measure: 64ch;
  --radius: 12px;
}
@media (max-width: 760px) { :root { --cols: 2; --gap: 14px; } }

/* --- text roles --------------------------------------------------------- */
.t-kicker { font: 500 var(--t-xs)/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--signal); }
.t-display { font: 700 clamp(var(--t-5), 8vw, var(--t-8))/.86 var(--display); letter-spacing: -.01em; text-wrap: balance; }
.t-h1 { font: 700 clamp(var(--t-4), 5.5vw, var(--t-6))/.92 var(--display); text-wrap: balance; }
.t-h2 { font: 700 clamp(var(--t-3), 3.6vw, var(--t-4))/.95 var(--display); text-wrap: balance; }
.t-h3 { font: 700 var(--t-xl)/1 var(--display); text-wrap: balance; }
.t-lede { font: 400 var(--t-l)/1.55 var(--text); max-width: var(--measure); text-wrap: pretty; }
.t-body { font: 400 var(--t-m)/1.6 var(--text); max-width: var(--measure); text-wrap: pretty; }
.t-small { font: 400 var(--t-s)/1.5 var(--text); color: var(--mute); }
.t-numeral { font: 700 var(--t-6)/.8 var(--display); color: var(--sun); -webkit-text-stroke: 1.5px var(--ink); }
.t-hand { font: 500 var(--t-l)/1.5 var(--hand); }

/* --- structure ----------------------------------------------------------- */
.g-grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--gap); }
.g-rule { border: 0; border-top: 1px solid var(--rule); margin: var(--s6) 0; }
.g-rule-bold { border-top: 3px solid var(--ink); }

/* --- surfaces: boxed only when it means something ------------------------ */
.u-bare { background: none; }
.u-card { background: #fff; border-radius: var(--radius); box-shadow: inset 0 0 0 1px #e5dfd3; }
.u-stock { background: var(--stock); border-radius: var(--radius); }
.u-ink { background: var(--ink); color: var(--paper); border-radius: var(--radius); }
.u-ink .t-kicker { color: var(--sun); }
.u-sun { background: var(--sun); color: var(--ink); border-radius: var(--radius); }
.u-sky { background: var(--sky); color: var(--ink); border-radius: var(--radius); }
.u-signal { background: var(--signal); color: #fff; border-radius: var(--radius); }
.u-signal .t-kicker { color: #ffd9d9; }

/* --- controls ------------------------------------------------------------ */
.c-btn { display: inline-flex; align-items: center; gap: var(--s2); padding: 12px 18px; border-radius: var(--radius); background: var(--sun); color: var(--ink); font: 700 var(--t-s)/1 var(--text); text-decoration: none; border: 0; cursor: pointer; }
.c-btn:hover { background: var(--ink); color: var(--sun); }
.c-ghost { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
.c-ghost:hover { background: var(--ink); color: var(--paper); }
.c-link { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 4px; }
.c-link:hover { text-decoration-color: var(--signal); }
.c-date { display: inline-grid; place-items: center; width: 56px; padding: 6px 0 8px; border-radius: var(--radius); background: var(--signal); color: #fff; font: 700 11px/1 var(--text); letter-spacing: .1em; text-transform: uppercase; }
.c-date b { font: 700 26px/1 var(--display); letter-spacing: 0; }
:focus-visible { outline: 3px solid var(--frost); outline-offset: 3px; }

/* ==========================================================================
   Footer, v2: a Swiss colophon on the night colour
   ========================================================================== */
.tgc-foot { background: var(--night); color: var(--paper); padding: var(--s8) var(--margin) var(--s7); }
.tgc-foot a { color: var(--paper); text-decoration: none; }
.tgc-foot a:hover { color: var(--sun); }
.tgc-foot-in { max-width: 1360px; margin: 0 auto; }
.tgc-foot-top { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); align-items: end; padding-bottom: var(--s6); border-bottom: 1px solid rgba(248, 246, 240, .18); }
.tgc-foot-mark { grid-column: span 3; font: 700 clamp(56px, 9vw, 150px)/.82 var(--display); letter-spacing: -.01em; }
.tgc-foot-mark span { color: var(--sun); }
.tgc-foot-deer { justify-self: end; width: min(180px, 100%); }
.tgc-foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); padding: var(--s6) 0; }
.tgc-foot-cols h3 { margin: 0 0 var(--s3); font: 700 var(--t-xs)/1.2 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--sun); }
.tgc-foot-cols a { display: block; padding: 5px 0; font: 400 var(--t-m)/1.35 var(--text); }
.tgc-foot-cols p { margin: 0 0 var(--s3); font: 400 var(--t-s)/1.6 var(--text); color: #b9c7d4; max-width: 34ch; }
.tgc-foot-count { display: flex; gap: var(--s5); flex-wrap: wrap; padding: var(--s5) 0; border-top: 1px solid rgba(248, 246, 240, .18); border-bottom: 1px solid rgba(248, 246, 240, .18); }
.tgc-foot-count div { font: 400 var(--t-s)/1.3 var(--text); color: #b9c7d4; }
.tgc-foot-count b { display: block; font: 700 var(--t-3)/1 var(--display); color: var(--paper); }
.tgc-foot-fine { display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; padding-top: var(--s4); font: 400 var(--t-xs)/1.6 var(--text); color: #8ea3b6; }
.tgc-foot-fine a { color: #b9c7d4; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .tgc-foot { padding-top: var(--s7); }
  .tgc-foot-top { grid-template-columns: 1fr auto; }
  .tgc-foot-mark { grid-column: 1; }
  .tgc-foot-deer { width: 88px; }
  .tgc-foot-cols { grid-template-columns: 1fr 1fr; row-gap: var(--s5); }
}

/* footer fixes */
.tgc-foot-cols nav, .tgc-foot-cols > div { display: block !important; }
.tgc-foot-cols nav a, .tgc-foot-cols > div a { display: block !important; width: auto !important; text-transform: none !important; }
.tgc-foot .footer-pitch-links { display: none !important; }
body:has(.tgc-foot) { padding-bottom: 0 !important; }
.tgc-foot { padding-bottom: calc(var(--s7) + 70px); }
/* home cover, phones: the badge leads, top left, above the copy (Kevin, 2026-10-26) */
@media (max-width: 760px) {
  html body .cover-badge.cover-badge { left: max(20px, env(safe-area-inset-left, 0px)) !important; right: auto !important; top: calc(56px + env(safe-area-inset-top, 0px)) !important; width: 148px !important; height: 148px !important; max-width: none !important; }
  html body .mag-cover-copy { padding-top: 204px !important; }
}
/* illustrations retired site-wide (Kevin, 2026-10-26): photographs only */
img[src*="emblems-v2/activities/"][src$="-art.png"], img[src*="-transparent"], img[src*="cutouts/"], img[src*="/cutout-"], img[src*="01-electric-winter"], img[src*="17-frozen-shore"], img[src*="good-cold-supplied-hero"], .life-cutout { display: none !important; }
/* ==========================================================================
   Colour carries meaning. Stories: sun yellow. Places & things to do: navy and its
   shades. The store: signal red. Everything else (weather, calendar, help): ice blue.
   Colour is a signal, not paint: the band under the masthead, kickers, rules, link
   underlines, the active section; the paper stays paper.
   ========================================================================== */
:root { --k-story: #f2c84b; --k-story-ink: #7a5a00; --k-place: #0e243a; --k-place-2: #1f4466; --k-place-3: #3d6a92; --k-store: #c8202f; --k-info: #4fa9d6; --k-info-ink: #1f6f99;
  --kc: var(--k-info); --kc-ink: var(--k-info-ink); }
html[data-kind="story"] { --kc: var(--k-story); --kc-ink: var(--k-story-ink); }
html[data-kind="place"] { --kc: var(--k-place); --kc-ink: var(--k-place-2); }
html[data-kind="store"] { --kc: var(--k-store); --kc-ink: var(--k-store); }
/* the signal band: a 6px rule at the very top of every page */
@media (min-width: 761px) { html[data-kind] header.site-header { box-shadow: inset 0 4px 0 var(--kc) !important; } }
/* kickers and eyebrows take the section ink */
html[data-kind] .eyebrow:not(.tp-cover *):not(.mag-cover *), html[data-kind] .t-kicker, html[data-kind] .sp-label, html[data-kind] .sv2-k, html[data-kind] .tr-index a span { color: var(--kc-ink) !important; }
/* the menu speaks the same language */
.nv-phone button small { color: var(--k-place-3); }
.nv-phone button[data-i="3"] small { color: var(--k-story-ink); }
.nv-phone button[data-i="4"] small { color: var(--k-info-ink); }
.nv-phone button[data-i="5"] small { color: var(--k-store); }
/* footer columns: Go/Plan = places, Read = stories, Store = red */
.tgc-foot-cols > nav:nth-child(1) h3, .tgc-foot-cols > nav:nth-child(2) h3 { color: #8fb8dd !important; }
.tgc-foot-cols > nav:nth-child(3) h3 { color: var(--k-story) !important; }
.tgc-foot-cols > div h3 { color: #ff6b74 !important; }
/* search groups */
.sv2-grp:has(a[href^="story-"]) .sv2-k { color: var(--k-story-ink) !important; }
/* stories: the drop cap and link underlines turn yellow-ink; store accents stay red */
html[data-kind="story"] .reading-page > p:first-of-type::first-letter { color: var(--k-story-ink) !important; }
html[data-kind="story"] .story-places { border-top-color: var(--k-story) !important; }
html[data-kind="place"] .tp-jumps a[aria-current="true"], html[data-kind="place"] .tp-jumps a.on { box-shadow: inset 0 -3px 0 var(--k-place); }
/* menu underline: hover is a hint, the section you're in is its own colour (legacy .mega-current ignored) */
header.site-header .mega-group > summary.mega-current::after { background: transparent !important; }
header.site-header .mega-group > summary:hover::after { background: #d9d0bf !important; }
header.site-header .mega-group:is([data-section="explore"],[data-section="days"],[data-section="night"]) { --sec: var(--k-place-3); }
header.site-header .mega-group[data-section="stories"] { --sec: var(--k-story); }
header.site-header .mega-group[data-section="store"] { --sec: var(--k-store); }
header.site-header .mega-group[data-section="snow"] { --sec: var(--k-info); }
header.site-header .mega-group[open] > summary::after { background: var(--sec) !important; }
html[data-kind="place"] header.site-header .mega-group[data-section="explore"] > summary::after,
html[data-kind="story"] header.site-header .mega-group[data-section="stories"] > summary::after,
html[data-kind="store"] header.site-header .mega-group[data-section="store"] > summary::after,
html[data-kind="info"][data-page-snow] header.site-header .mega-group[data-section="snow"] > summary::after { background: var(--sec) !important; }
/* every box and every photo gets the house corner (12px) */
main :is(img:not([src$=".svg"]), figure, picture, video, .bx:not(.bx-bare):not(.bx-air), article, aside, section[class*="card"], [class*="-card"], [class*="card-"], .tp-place, .tp-band, .story-break, .editorial-goods, .destination-panels > a, .gs2-card, .gs2-card figure, .tr-photo img) { border-radius: 12px; }
main figure img, main .bx-photo img, .tp-photo .bx-photo, main .tp-band img { border-radius: 12px !important; }
.tp-photo .bx-photo { background: none !important; }
dialog img:not([src$=".svg"]) { border-radius: 12px; }