/* =====================================================================
   Chalet Noël — Printers Alley's seasonal après-ski pop-up in the Cellar
   Bar (/christmas/). Loads after the main /styles.css: nav, footer,
   fonts and base tokens come from there; this file only adds the
   sub-brand layer (PA_BRD_ChatelNoel_V1.pdf — palette p.06).

   The URL stays /christmas/ year to year so rankings carry over — swap
   this file + the images/ folder for next season's theme.
   ===================================================================== */

/* ---------- Sub-brand typefaces (originals in /Font Source; Latin-subset WOFF2 here) ---------- */
@font-face {
  font-family: 'TAY Wingman';
  src: url('fonts/tay-wingman.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'TC Hamilton Arc Script';
  src: url('fonts/tc-hamilton-arc-script.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

.cn {
  --cn-font-sign:   'TAY Wingman', 'Manrope', system-ui, sans-serif;     /* vintage sign caps — headings, labels, buttons */
  --cn-font-script: 'TC Hamilton Arc Script', 'Brush Script MT', cursive; /* the "Après ski lounge" hand — accents only */
  --cn-navy:    #18147B;
  --cn-navy-dk: #0D0A45;   /* footer — deeper than --cn-navy so the last ridge still reads */
  --cn-sky:     #78A8D3;
  --cn-sky-lt:  #B7D1E9;   /* tint of --cn-sky for the lighter alt sections */
  --cn-snow:    #F7EDDC;   /* brand-book cream */
  --cn-snow-dk: #EADFCD;   /* logo "Snow" fill */
  --cn-red:     #CA4E4F;   /* accents + large type only — 4:1 on cream */
  --cn-ink-soft: rgba(24, 20, 123, .78);
}
.cn main { color: var(--cn-navy); }

/* ---------- Nav — the shared PA nav (styles.css), recoloured for the lodge ---------- */
/* Transparent over the hero (which slides up underneath via the negative
   margin), then navy once .is-scrolled is set by the script in index.html. */
.cn .topnav-container {
  margin-bottom: calc(-1 * var(--nav-h));
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .3s ease, border-color .3s ease;
}
.cn .topnav-container.is-scrolled {
  background: var(--cn-navy);
  border-bottom-color: rgba(247, 237, 220, .14);
}
.cn .icon { transition: color .3s ease; }
/* Sub-brand script logo: red over the sky-blue hero, cream on the navy bar */
.cn-nav-logo { position: relative; display: block; }
.cn-nav-logo img { height: clamp(2.3rem, 3.4vw, 2.8rem); width: auto; transition: opacity .3s ease; }
.cn-nav-logo__snow { position: absolute; inset: 0; opacity: 0; }
.cn .topnav-container.is-scrolled .cn-nav-logo__red { opacity: 0; }
.cn .topnav-container.is-scrolled .cn-nav-logo__snow { opacity: 1; }
.cn .topnav .nav-link,
.cn .nav-dropdown__toggle,
.cn .icon { color: var(--cn-snow); }
.cn .topnav .nav-link:not(.nav-link-reserve):hover,
.cn .nav-dropdown__toggle:hover { color: var(--cn-sky); }
.cn .topnav .nav-link-reserve {
  background: var(--cn-snow);
  color: var(--cn-navy);
  transition: background-color .2s ease, color .2s ease;
}
.cn .topnav .nav-link-reserve:hover { background: var(--cn-red); color: var(--cn-snow); }
.cn .nav-dropdown__menu { background: var(--cn-navy); box-shadow: 0 12px 32px rgba(24, 20, 123, .35); }
.cn .nav-dropdown__menu .nav-link:hover,
.cn .nav-dropdown__menu .nav-link:focus-visible { background: rgba(120, 168, 211, .18); }
@media (max-width: 760px) {
  .cn .topnav { background: var(--cn-navy); }
  .cn .topnav .nav-link { color: var(--cn-snow); }
  .cn .topnav .nav-link-reserve { color: var(--cn-navy); }
}

/* Transparent state: cream on sky blue is too faint, so go navy */
.cn .topnav-container:not(.is-scrolled) .icon[aria-expanded="false"] { color: var(--cn-navy); }
@media (min-width: 761px) {
  .cn .topnav-container:not(.is-scrolled) .topnav > .nav-link:not(.nav-link-reserve),
  .cn .topnav-container:not(.is-scrolled) .nav-dropdown__toggle { color: var(--cn-navy); }
  .cn .topnav-container:not(.is-scrolled) .topnav > .nav-link:not(.nav-link-reserve):hover,
  .cn .topnav-container:not(.is-scrolled) .nav-dropdown__toggle:hover { color: var(--cn-red); }
  .cn .topnav-container:not(.is-scrolled) .nav-link-reserve { background: var(--cn-navy); color: var(--cn-snow); }
  .cn .topnav-container:not(.is-scrolled) .nav-link-reserve:hover { background: var(--cn-red); }
}

/* ---------- Type ---------- */
.cn-eyebrow {
  display: inline-flex; align-items: center; gap: .6em;
  font-weight: 800; font-size: var(--step--1);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--cn-navy);
  margin-bottom: .9rem;
}
.cn-eyebrow::before { content: ""; width: 1.6em; height: 2px; background: var(--cn-red); }
.cn-title {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--step-3);
  line-height: 1.02;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-wrap: balance;
  margin-bottom: 1.1rem;
}
.cn-lede { font-size: var(--step-1); line-height: 1.5; max-width: 34em; color: var(--cn-ink-soft); }
.cn-copy { max-width: var(--measure); color: var(--cn-ink-soft); }
.cn-copy + .cn-copy { margin-top: 1rem; }
.cn-copy a { color: var(--cn-navy); font-weight: 800; text-underline-offset: .15em; }

/* ---------- Buttons ---------- */
.cn-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.75rem; }
.cn-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .8em 1.6em;
  border-radius: var(--pill);
  font-weight: 800; font-size: var(--step--1);
  letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none;
  transition: transform .2s ease, background-color .2s ease, color .2s ease;
}
.cn-btn--primary { background: var(--cn-navy); color: var(--cn-snow); }
.cn-btn--primary:hover { background: var(--cn-red); }
.cn-btn--ghost { border: 2px solid var(--cn-navy); color: var(--cn-navy); }
.cn-btn--ghost:hover { background: var(--cn-navy); color: var(--cn-snow); }
.cn-btn--snow { background: var(--cn-snow); color: var(--cn-navy); }
.cn-btn--snow:hover { background: var(--cn-sky); }
.cn-btn--ghost-snow { border: 2px solid rgba(247, 237, 220, .5); color: var(--cn-snow); }
.cn-btn--ghost-snow:hover { border-color: var(--cn-snow); }
@media (hover: hover) { .cn-btn:hover { transform: translateY(-2px); } }

/* ===================================================================
   Sections + mountain transitions
   Each section paints its own background and ends in a ridge filled with
   the NEXT section's colour (--next), so the hand-off reads as a mountain
   line rather than a hard edge. The back ridge is the same colour at
   lower opacity and drifts slightly on scroll (--p, set in index.html).
   =================================================================== */
.cn-sec {
  --ridge-h: clamp(64px, 10vw, 170px);
  position: relative;
  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 6.5rem) var(--gutter) calc(var(--ridge-h) + clamp(2rem, 5vw, 4rem));
  overflow: hidden;
}
.cn-sec--snow   { --bg: var(--cn-snow); }
.cn-sec--sky    { --bg: var(--cn-sky); }
.cn-sec--sky-lt { --bg: var(--cn-sky-lt); }
.cn-sec--navy   { --bg: var(--cn-navy); color: var(--cn-snow); }
.cn-sec { scroll-margin-top: var(--nav-h); }   /* in-page links (#menu) clear the sticky nav */
.cn-sec__inner { position: relative; z-index: 1; max-width: 72rem; margin: 0 auto; }

.cn-ridge {
  position: absolute; left: 0; right: 0; bottom: -1px;
  width: 100%; height: var(--ridge-h);
  pointer-events: none;
  color: var(--next);
}
.cn-ridge__back {
  opacity: .45;
  transform: translateY(calc(var(--p, 0) * 28px));
  will-change: transform;
}
/* The last section hands off to the black site footer */
.cn-sec--to-footer { --next: var(--cn-navy-dk); }
.cn .site-footer { background: var(--cn-navy-dk); }

/* ===================================================================
   Hero
   =================================================================== */
.cn-hero {
  --bg: linear-gradient(180deg, var(--cn-sky) 0%, #9DC0E1 70%, var(--cn-sky-lt) 100%);
  --ridge-h: clamp(90px, 15vw, 240px);
  min-height: min(100svh, calc(58rem + var(--nav-h)));
  display: flex; align-items: center;
  padding-top: calc(var(--nav-h) + clamp(2.5rem, 6vw, 4.5rem));
}
.cn-hero .cn-sec__inner {
  width: 100%;
  display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.cn-hero__logo { width: min(100%, 38rem); height: auto; margin: clamp(1.25rem, 3vw, 2rem) 0 clamp(1.25rem, 3vw, 2rem); }
.cn-hero__title {
  font-weight: 800; font-size: var(--step-1);
  letter-spacing: .14em; text-transform: uppercase; line-height: 1.3;
  color: var(--cn-navy);
  margin-bottom: 1rem;
  text-wrap: balance;
}
.cn-hero .cn-lede { color: var(--cn-navy); }
/* Dates pill + Reserve on one row, the two in-page links beneath */
.cn-hero__book { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: 1.5rem; }
.cn-hero__dates {
  display: inline-flex; align-items: center; min-height: 48px;
  padding: 0 1.3em; border-radius: var(--pill);
  background: rgba(247, 237, 220, .55);
  font-weight: 800; font-size: var(--step--1); letter-spacing: .12em; text-transform: uppercase;
}
.cn-hero__explore { margin-top: .8rem; }
.cn-hero__badge { justify-self: center; width: min(100%, 22rem); filter: drop-shadow(0 18px 30px rgba(24, 20, 123, .25)); }
.cn-hero__badge img { width: 100%; height: auto; transform: rotate(4deg); }

/* Falling snow — two layers of dots drifting at different speeds */
.cn-hero::before, .cn-hero::after {
  content: ""; position: absolute; inset: -200px 0 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.85) 1.5px, transparent 2.5px),
    radial-gradient(circle, rgba(255,255,255,.6) 1px, transparent 2px);
  background-size: 140px 140px, 90px 90px;
  background-position: 0 0, 45px 60px;
}
.cn-hero::after {
  background-image: radial-gradient(circle, rgba(255,255,255,.7) 2.5px, transparent 3.5px);
  background-size: 230px 230px;
  background-position: 70px 30px;
  opacity: .7;
}
@media (prefers-reduced-motion: no-preference) {
  .cn-hero::before { animation: cn-snow 26s linear infinite; }
  .cn-hero::after  { animation: cn-snow-lg 38s linear infinite; }
  @keyframes cn-snow    { to { background-position: 140px 280px, 135px 240px; } }
  @keyframes cn-snow-lg { to { background-position: 300px 490px; } }
}

/* ===================================================================
   The lodge (intro + features)
   =================================================================== */
.cn-lodge { display: grid; grid-template-columns: 1fr minmax(12rem, 20rem); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.cn-lodge__stamp { width: 100%; height: auto; transform: rotate(-3deg); box-shadow: 0 16px 34px rgba(24, 20, 123, .18); }
.cn-features {
  list-style: none; margin: clamp(2.5rem, 6vw, 4rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
}
.cn-feature {
  padding: 1.5rem 1.4rem 1.6rem;
  border: 2px solid var(--cn-navy);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .35);
}
/* Little ski-patch emblems: navy disc, cream ring + line art, red accent */
.cn-feature__icon { width: 4rem; height: 4rem; margin-bottom: 1rem; transform: rotate(-6deg); }
.cn-feature:nth-child(2) .cn-feature__icon { transform: rotate(5deg); }
.cn-feature h3 { font-weight: 800; font-size: var(--step-1); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 .45rem; }
.cn-feature p { color: var(--cn-ink-soft); font-size: var(--step-0); }

/* ===================================================================
   The space — goggle gallery
   Photos scroll in a track masked to a ski-goggle lens; the white
   brush-edged rim is an SVG of the same path, stroked over the top.
   Swap each .cn-goggles__pending for an <img> when photos land.
   =================================================================== */
.cn-head { max-width: 46rem; margin-bottom: clamp(2rem, 5vw, 3rem); }
.cn-goggles { max-width: 64rem; margin: 0 auto; padding: 0 clamp(.5rem, 2vw, 1.5rem); }
.cn-goggles__lens { position: relative; aspect-ratio: 1000 / 430; }
.cn-goggles__track {
  list-style: none; margin: 0; padding: 0;
  position: absolute; inset: 0;
  display: flex; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 430' preserveAspectRatio='none'%3E%3Cpath d='M0 215C0 95 60 32 200 18C330 6 420 0 500 0C580 0 670 6 800 18C940 32 1000 95 1000 215C1000 335 955 412 840 426C755 436 685 424 638 392C598 365 572 312 500 312C428 312 402 365 362 392C315 424 245 436 160 426C45 412 0 335 0 215Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 430' preserveAspectRatio='none'%3E%3Cpath d='M0 215C0 95 60 32 200 18C330 6 420 0 500 0C580 0 670 6 800 18C940 32 1000 95 1000 215C1000 335 955 412 840 426C755 436 685 424 638 392C598 365 572 312 500 312C428 312 402 365 362 392C315 424 245 436 160 426C45 412 0 335 0 215Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.cn-goggles__track::-webkit-scrollbar { display: none; }
.cn-goggles__track:focus-visible { outline: none; }
.cn-goggles__lens:has(.cn-goggles__track:focus-visible) .cn-goggles__frame path { stroke: var(--cn-red); }
.cn-goggles__slide { position: relative; flex: 0 0 100%; scroll-snap-align: center; }
.cn-goggles__slide > img { width: 100%; height: 100%; object-fit: cover; }
/* lens glare */
.cn-goggles__slide::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.16) 0 16%, transparent 16% 27%, rgba(255,255,255,.08) 27% 31%, transparent 31%);
}
.cn-goggles__pending {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem;
  padding-bottom: 12%;   /* keep clear of the nose bridge */
  background:
    radial-gradient(circle, rgba(255,255,255,.7) 1.5px, transparent 2.5px) 0 0 / 70px 70px,
    radial-gradient(circle, rgba(255,255,255,.45) 1px, transparent 2px) 30px 40px / 46px 46px,
    linear-gradient(180deg, var(--tone, var(--cn-navy)) 0%, var(--cn-sky) 130%);
  color: var(--cn-snow);
  font-weight: 800; font-size: var(--step--1); letter-spacing: .16em; text-transform: uppercase;
}
.cn-goggles__pending img { width: clamp(4rem, 12vw, 7.5rem); height: auto; }
.cn-goggles__frame {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none;
  filter: drop-shadow(0 10px 18px rgba(24, 20, 123, .22));
}
.cn-goggles__frame path {
  fill: none; stroke: #fff; stroke-width: 34; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: stroke .2s ease;
}
/* Phones: a taller lens so photos aren't letterbox-thin */
@media (max-width: 760px) {
  .cn-goggles { padding: 0 .4rem; }
  .cn-goggles__lens { aspect-ratio: 1000 / 640; }
  .cn-goggles__frame path { stroke-width: 20; }
}
.cn-goggles__controls {
  display: flex; align-items: center; justify-content: center; gap: clamp(.75rem, 3vw, 1.5rem);
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}
.cn-goggles__btn {
  width: 52px; height: 52px; flex: none; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--cn-navy); color: var(--cn-snow); border: 0;
  transition: background-color .2s ease, transform .2s ease;
}
.cn-goggles__btn svg { width: 22px; height: 22px; }
.cn-goggles__btn:hover { background: var(--cn-red); }
.cn-goggles__btn:active { transform: scale(.94); }
.cn-goggles__caption {
  min-width: 13rem; text-align: center;
  font-weight: 800; font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase;
}
.cn-goggles__count { display: block; margin-top: .2rem; color: var(--cn-ink-soft); font-variant-numeric: tabular-nums; letter-spacing: .2em; }

/* Snowfall behind the goggles (same dots as the hero) */
.cn-snowy::before {
  content: ""; position: absolute; inset: -200px 0 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.9) 1.5px, transparent 2.5px),
    radial-gradient(circle, rgba(255,255,255,.65) 1px, transparent 2px);
  background-size: 140px 140px, 90px 90px;
  background-position: 0 0, 45px 60px;
}
@media (prefers-reduced-motion: no-preference) {
  .cn-snowy::before { animation: cn-snow 26s linear infinite; }
}

/* ===================================================================
   Menu
   =================================================================== */
/* Two lodge-menu boards (Drink / Eat) with the sign's double rule (p.09)
   and dotted leaders between name and price. */
.cn-menu { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.25rem, 3vw, 2rem); align-items: start; }
.cn-menu__switch { display: none; }
.cn-menu__board {
  position: relative;
  padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.25rem, 3.5vw, 2.5rem);
  background: rgba(255, 255, 255, .45);
  border: 2px solid var(--cn-navy);
  outline: 2px solid var(--cn-navy); outline-offset: 6px;
  border-radius: 4px;
  margin: 8px;
}
.cn-menu__board-title {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
  color: var(--cn-red);
  font-weight: 800; font-size: var(--step-2); letter-spacing: .3em; text-transform: uppercase;
}
.cn-menu__board-title::before, .cn-menu__board-title::after { content: ""; flex: 1; height: 2px; background: currentColor; }
.cn-menu__board-title span { padding-left: .3em; }   /* balances the trailing letter-spacing */
.cn-menu__group + .cn-menu__group { margin-top: clamp(1.75rem, 4vw, 2.5rem); }
.cn-menu__group-title { font-weight: 800; font-size: var(--step-1); letter-spacing: .12em; text-transform: uppercase; }
.cn-menu__note { margin: .25rem 0 1rem; font-size: var(--step--1); font-style: italic; color: var(--cn-ink-soft); }
.cn-menu__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.cn-menu__line { display: flex; align-items: baseline; gap: .5rem; }
.cn-menu__line::after { content: ""; order: 1; flex: 1; border-bottom: 2px dotted rgba(24, 20, 123, .35); transform: translateY(-.3em); }
.cn-menu__name { order: 0; margin: 0; font-size: var(--step-0); font-weight: 800; }
.cn-menu__price { order: 2; font-weight: 800; font-variant-numeric: tabular-nums; }
.cn-menu__desc { margin-top: .2rem; font-size: var(--step--1); color: var(--cn-ink-soft); max-width: 34em; }
.cn-menu__diet, .cn-menu__foot abbr {
  display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; margin-left: .35em;
  border: 1.5px solid var(--cn-red); border-radius: 50%;
  color: var(--cn-red); font-size: .65rem; font-weight: 800; text-decoration: none; vertical-align: .15em;
}
.cn-menu__sig {
  display: inline-block; margin-left: .4em; padding: .1em .6em; border-radius: var(--pill);
  background: var(--cn-red); color: #fff;
  font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-style: normal;
}
.cn-menu__script { width: min(60%, 14rem); height: auto; margin: clamp(2rem, 5vw, 3rem) auto 0; opacity: .9; }
.cn-menu__foot { margin-top: 1.75rem; text-align: center; font-size: var(--step--1); color: var(--cn-ink-soft); }
.cn-menu__foot abbr { margin: 0 .25em 0 0; }

/* ===================================================================
   Holiday parties
   =================================================================== */
.cn-parties { display: grid; grid-template-columns: minmax(12rem, 18rem) 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.cn-parties__roundel { width: 100%; height: auto; transform: rotate(-6deg); }
.cn-parties__points { list-style: none; padding: 0; margin: 1.25rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.cn-parties__points li {
  padding: .4em .95em; border-radius: var(--pill);
  border: 1.5px solid var(--cn-navy);
  font-weight: 700; font-size: var(--step--1); letter-spacing: .06em; text-transform: uppercase;
}

/* ===================================================================
   FAQ (reuses .team-faq from styles.css, recoloured)
   =================================================================== */
.cn .team-faq details {
  border: 2px solid var(--cn-navy); border-radius: var(--radius);
  background: transparent;
  padding: 1.15rem 1.5rem;
}
.cn .team-faq summary { color: var(--cn-navy); font-size: var(--step-0); }
.cn .team-faq p { color: var(--cn-navy); opacity: .85; max-width: var(--measure); }
.cn .team-faq p a { color: var(--cn-navy); font-weight: 800; }
/* Snowflake toggle in place of the +/– — turns a little when open */
.cn .team-faq summary::after,
.cn .team-faq details[open] summary::after {
  content: ""; flex: none; width: 1.5rem; height: 1.5rem;
  background: var(--cn-navy);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 12V2.5M9.6 3.9 12 6.3l2.4-2.4' transform='rotate(0 12 12)'/%3E%3Cpath d='M12 12V2.5M9.6 3.9 12 6.3l2.4-2.4' transform='rotate(60 12 12)'/%3E%3Cpath d='M12 12V2.5M9.6 3.9 12 6.3l2.4-2.4' transform='rotate(120 12 12)'/%3E%3Cpath d='M12 12V2.5M9.6 3.9 12 6.3l2.4-2.4' transform='rotate(180 12 12)'/%3E%3Cpath d='M12 12V2.5M9.6 3.9 12 6.3l2.4-2.4' transform='rotate(240 12 12)'/%3E%3Cpath d='M12 12V2.5M9.6 3.9 12 6.3l2.4-2.4' transform='rotate(300 12 12)'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 12V2.5M9.6 3.9 12 6.3l2.4-2.4' transform='rotate(0 12 12)'/%3E%3Cpath d='M12 12V2.5M9.6 3.9 12 6.3l2.4-2.4' transform='rotate(60 12 12)'/%3E%3Cpath d='M12 12V2.5M9.6 3.9 12 6.3l2.4-2.4' transform='rotate(120 12 12)'/%3E%3Cpath d='M12 12V2.5M9.6 3.9 12 6.3l2.4-2.4' transform='rotate(180 12 12)'/%3E%3Cpath d='M12 12V2.5M9.6 3.9 12 6.3l2.4-2.4' transform='rotate(240 12 12)'/%3E%3Cpath d='M12 12V2.5M9.6 3.9 12 6.3l2.4-2.4' transform='rotate(300 12 12)'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .4s ease, background-color .2s ease;
}
.cn .team-faq details[open] summary::after { transform: rotate(30deg); }

/* ===================================================================
   Find us (navy)
   =================================================================== */
.cn-sec--navy .cn-eyebrow { color: var(--cn-sky); }
.cn-sec--navy .cn-copy { color: rgba(247, 237, 220, .78); }
.cn-findus { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.cn-findus__card { border: 1.5px solid rgba(247, 237, 220, .25); border-radius: var(--radius); padding: 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .9rem; }
.cn-findus__row { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .75rem; border-bottom: 1px solid rgba(247, 237, 220, .14); }
.cn-findus__row:last-child { border-bottom: 0; padding-bottom: 0; }
.cn-findus__row > :last-child { text-align: right; }
.cn-findus__label { color: var(--cn-sky); font-size: var(--step--1); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.cn-findus__row a { color: inherit; }
.cn-nearby { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-direction: column; gap: .55rem; }
.cn-nearby li { display: flex; gap: .7rem; align-items: baseline; color: rgba(247, 237, 220, .85); }
.cn-nearby li::before { content: "▲"; font-size: .7em; color: var(--cn-red); }

/* ---------- Scroll reveal (only once JS confirms motion is OK) ---------- */
.cn-motion .cn-reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s ease; }
.cn-motion .cn-reveal.is-in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .cn-hero .cn-sec__inner, .cn-lodge, .cn-parties, .cn-findus { grid-template-columns: 1fr; }
  .cn-hero { min-height: 0; }
  .cn-hero__badge { width: min(62%, 15rem); order: -1; justify-self: start; }
  /* Stamp sits beside the heading; the copy runs full width below.
     display: contents lets the text column's children join the grid. */
  .cn-lodge { grid-template-columns: 1fr auto; gap: 0 1.1rem; align-items: start; }
  .cn-lodge > div { display: contents; }
  .cn-lodge .cn-eyebrow { grid-column: 1 / -1; grid-row: 1; }
  .cn-lodge .cn-title { grid-column: 1; grid-row: 2; }
  .cn-lodge .cn-copy { grid-column: 1 / -1; }
  .cn-lodge__stamp { grid-column: 2; grid-row: 2; align-self: center; margin-bottom: 1.1rem; width: clamp(5.5rem, 24vw, 9rem); }
  .cn-parties__roundel { max-width: 12rem; }
  .cn-features { grid-template-columns: 1fr; }
  /* Boards swipe side by side; the next one peeks in from the right */
  .cn-menu {
    display: flex; gap: .75rem; align-items: stretch;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    overscroll-behavior-x: contain;
    margin: 0 calc(-1 * var(--gutter));
    padding: 4px var(--gutter) 12px;
    scroll-padding-inline: var(--gutter);
  }
  .cn-menu::-webkit-scrollbar { display: none; }
  .cn-menu__board { flex: 0 0 min(86%, 30rem); scroll-snap-align: start; }
  .cn-menu__switch {
    display: inline-flex; gap: .25rem; margin-bottom: 1.1rem; padding: .25rem;
    border: 2px solid var(--cn-navy); border-radius: var(--pill);
  }
  .cn-menu__switch button {
    min-height: 40px; padding: 0 1.3rem; border: 0; border-radius: var(--pill); cursor: pointer;
    background: transparent; color: var(--cn-navy);
    font-weight: 800; font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase;
    transition: background-color .2s ease, color .2s ease;
  }
  .cn-menu__switch button[aria-pressed="true"] { background: var(--cn-navy); color: var(--cn-snow); }
}
@media (max-width: 760px) {
  .cn-hero__badge { display: none; }
  .cn-actions .cn-btn { flex: 1 1 auto; }
  /* Pills + button rows centre on phones; headings and copy stay left */
  .cn-actions, .cn-hero__book, .cn-parties__points { justify-content: center; }
  .cn-menu__switch { display: flex; width: fit-content; margin-inline: auto; }
  /* Dates pill stacked over a full-width Reserve, matching the button pair below */
  .cn-hero__book { flex-direction: column; align-items: center; }
  .cn-hero__book .cn-btn { align-self: stretch; }
}

/* ===================================================================
   Typography — sub-brand faces. Kept last so it wins over the base
   rules and the media queries above. Both faces are single-weight, so
   weights are reset to 400 and synthetic bold is switched off.
   =================================================================== */
.cn { font-synthesis: none; }
.cn-title, .cn-hero__title, .cn-feature h3, .cn-menu__group-title,
.cn-menu__name, .cn-menu__price, .cn-btn, .cn-hero__dates,
.cn-goggles__caption, .cn-parties__points li, .cn-menu__switch button, .cn-menu__sig {
  font-family: var(--cn-font-sign);
  font-weight: 400;
}
.cn-title       { letter-spacing: 0; line-height: 1.05; }   /* Wingman is wide-set already */
.cn-hero__title { letter-spacing: .03em; }
.cn-feature h3, .cn-menu__group-title { letter-spacing: .02em; }
.cn-menu__name  { letter-spacing: .01em; }
.cn-btn, .cn-hero__dates, .cn-menu__switch button, .cn-parties__points li { letter-spacing: .05em; }
.cn-goggles__caption { letter-spacing: .05em; }

/* Script accents: section labels + the Drink / Eat board titles */
.cn-eyebrow {
  font-family: var(--cn-font-script);
  font-weight: 400; font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.3rem); line-height: 1.2;
  letter-spacing: 0; text-transform: none;
  color: var(--cn-red);
  margin-bottom: .35rem;
}
.cn-sec--navy .cn-eyebrow { color: var(--cn-sky); }
.cn-menu__board-title {
  font-family: var(--cn-font-script);
  font-weight: 400; font-size: clamp(2.2rem, 1.6rem + 2vw, 3rem);
  letter-spacing: 0; text-transform: none;
}
.cn-menu__board-title span { padding-left: 0; }

/* Wingman maps ë to a plain e, so "Noël" set in it would read "NOEL".
   .cn-uml keeps the real ë in the text (for search + screen readers) and
   draws the dots on top — square, like the logo's umlaut. */
.cn-uml { position: relative; }
.cn-uml::after {
  content: ""; position: absolute; left: 50%; top: -.17em;
  width: .12em; height: .12em; background: currentColor;
  transform: translateX(-135%);
  box-shadow: .2em 0 0 currentColor;
}