/* ==========================================================================
   Frøhus Forest Resort & Casino — style.css
   Design system "Seed & Soil": earth and paper
   ========================================================================== */

/* 1. Fonts (self-hosted, fonts/) ------------------------------------------ */

@font-face {
  font-family: 'Gloock';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/gloock-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Gloock';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/gloock-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/rubik-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/rubik-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/rubik-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* 2. Tokens --------------------------------------------------------------- */

:root {
  /* Palette (brief §2.1) */
  --c-paper:     #F7F3EA;  /* main background */
  --c-wheat:     #EADFC8;  /* alternating sections */
  --c-wheat-2:   #DCCBA9;  /* cards, lines on light */
  --c-soil:      #2A211B;  /* dark sections, body text on light */
  --c-soil-2:    #3A2E26;  /* cards on dark */
  --c-soil-dim:  rgba(42,33,27,.68);
  --c-clay:      #B4603F;  /* brand clay: decoration, focus ring on light */
  --c-clay-lt:   #D98B63;  /* accent on dark */
  --c-sprout:    #6E8B3D;  /* sprout: marks, icons */
  --c-lichen:    #A8B6A0;  /* lichen: graphics, winter marks */
  --c-line:      rgba(42,33,27,.14);
  --c-line-dark: rgba(247,243,234,.16);

  /* Accessible derivatives — brand clay is 4.05:1 on paper and 3.39:1 on wheat,
     below 4.5:1, so text, links and button fills use the darker ink. */
  --c-clay-ink:       #944A2E;  /* 5.78 on paper · 4.85 on wheat · paper on it 5.78 */
  --c-clay-ink-hover: #8B462B;  /* clay-ink darkened 6% · paper on it 6.30 */
  --c-sprout-ink:     #5E7734;  /* icons on wheat: 3.82 (sprout itself is 2.93) */
  --c-paper-dim:      rgba(247,243,234,.72); /* secondary text on soil: 8.01 */

  /* Typography (§2.2) */
  --ff-display: 'Gloock', Georgia, 'Times New Roman', serif;
  --ff-body: 'Rubik', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --fs-h1: clamp(2.8rem, 6.4vw, 5.8rem);
  --fs-h2: clamp(2rem, 4vw, 3.4rem);
  --fs-h3: clamp(1.3rem, 2.1vw, 1.7rem);
  --fs-body: clamp(1rem, 1.05vw, 1.1rem);
  --fs-lead: clamp(1.1rem, 1.35vw, 1.3rem);
  --fs-small: .88rem;
  --fs-caption: .82rem;
  --fs-eyebrow: .72rem;

  /* Layout (§2.4) */
  --container: 1260px;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --measure: 62ch;
  --section-y: clamp(4.5rem, 9vw, 9rem);
  --gap: clamp(1rem, 2.4vw, 2rem);
  --header-h: 76px;

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --t-fast: 180ms;
  --t-card: 260ms;

  /* Brand shapes as masks (data: allowed by img-src) */
  --svg-cotyledon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 11C6 11 2 8 2 3c5 0 8 3 8 8zm0 0c4 0 8-3 8-8-5 0-8 3-8 8z'/%3E%3Cpath d='M9 10h2v10H9z'/%3E%3C/svg%3E");
  --svg-sprout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'%3E%3Cpath d='M12 13C7.5 13 3 9.5 3 4c5.5 0 9 3.5 9 9zm0 0c4.5 0 9-3.5 9-9-5.5 0-9 3.5-9 9z'/%3E%3Cpath d='M11.25 12h1.5v16h-1.5z'/%3E%3C/svg%3E");
  --noise-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16 0 0 0 0 .13 0 0 0 0 .1 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --noise-soil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.42' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .97 0 0 0 0 .95 0 0 0 0 .92 0 0 0 1.6 -.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Surface variables — default: paper */
  --bg: var(--c-paper);
  --text: var(--c-soil);
  --text-dim: var(--c-soil-dim);          /* 5.24 on paper */
  --accent: var(--c-clay-ink);            /* text, links, eyebrow */
  --accent-2: var(--c-sprout);            /* icons, marks: 3.50 on paper */
  --line: var(--c-line);
  --line-strong: var(--c-wheat-2);
  --surface: var(--c-paper);              /* cards / drawers */
  --focus: var(--c-clay);                 /* 4.05 on paper, ≥3:1 */
  --noise: var(--noise-paper);
  --noise-opacity: .035;
  --shadow-drawer: -6px 6px 0 -2px rgba(42,33,27,.10);
}

/* Surfaces (§2.1): paper → wheat → soil */
.section--paper {
  --bg: var(--c-paper);
}
.section--wheat {
  --bg: var(--c-wheat);
  --text-dim: #675E52;                    /* soil-dim flattened on wheat: 4.81 */
  --accent: var(--c-clay-ink);            /* 4.85 */
  --accent-2: var(--c-sprout-ink);        /* 3.82 */
  --surface: var(--c-paper);
  --focus: var(--c-clay);                 /* 3.39 */
}
.section--soil {
  --bg: var(--c-soil);
  --text: var(--c-paper);                 /* 14.24 */
  --text-dim: var(--c-paper-dim);         /* 8.01 */
  --accent: var(--c-clay-lt);             /* 5.87 */
  --accent-2: var(--c-lichen);            /* 7.41 */
  --line: var(--c-line-dark);
  --line-strong: rgba(247,243,234,.28);
  --surface: var(--c-soil-2);
  --focus: var(--c-clay-lt);              /* 5.87 on soil, 4.89 on soil-2 */
  --noise: var(--noise-soil);
  --noise-opacity: .05;
  --shadow-drawer: -6px 6px 0 -2px rgba(0,0,0,.35);
}

/* 3. Base ----------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--c-paper);
  color: var(--text);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'kern';
}

h1, h2, h3, h4,
.h1, .h2, .h3 {
  margin: 0 0 .5em;
  font-family: var(--ff-display);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.06;
  color: var(--text);
  text-wrap: balance;
}
h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); line-height: 1.15; }

p, ul, ol, dl, figure, blockquote, table {
  margin: 0 0 1.1em;
}
p { text-wrap: pretty; }

strong, b { font-weight: 500; }

img, svg, picture, video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  transition: color var(--t-fast) var(--ease), text-decoration-color var(--t-fast) var(--ease);
}
a:hover { text-decoration-thickness: 2px; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}
button { cursor: pointer; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 1px;
}

::selection {
  background: var(--c-wheat-2);
  color: var(--c-soil);
}

[hidden] { display: none !important; }

.skip-link {
  position: absolute;
  top: .75rem;
  left: .75rem;
  z-index: 1000;
  padding: .6rem 1rem;
  background: var(--c-soil);
  color: var(--c-paper);
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--t-fast) var(--ease);
}
.skip-link:focus-visible { transform: none; outline-color: var(--c-clay-lt); }

.visually-hidden {
  position: absolute !important;
  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;
}

/* 4. Layout (§2.4) -------------------------------------------------------- */

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  isolation: isolate;
  padding-block: var(--section-y);
  background: var(--bg);
  color: var(--text);
}

/* Paper grain / soil crumb (§2.3): on a pseudo-element, content above */
.section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--noise);
  background-size: 400px 400px;
  opacity: var(--noise-opacity);
  pointer-events: none;
}

.text-col { max-width: var(--measure); }

.section__head { max-width: var(--measure); margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.section__head--center { margin-inline: auto; text-align: center; }

.grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid--12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

.stack > * + * { margin-top: var(--stack, 1rem); }

/* 5. Components (§2.2–§2.3) ---------------------------------------------- */

/* Eyebrow — Rubik 600, tracked caps, 10px cotyledon before text */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  margin: 0 0 1.1rem;
  font-family: var(--ff-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .2em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before {
  content: '';
  flex: none;
  width: 10px;
  height: 10px;
  background: var(--accent-2);
  -webkit-mask: var(--svg-cotyledon) center / contain no-repeat;
  mask: var(--svg-cotyledon) center / contain no-repeat;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  max-width: var(--measure);
}

.muted { color: var(--text-dim); }
.small { font-size: var(--fs-small); }
.num,
.tabular { font-variant-numeric: tabular-nums; }

/* Paper label — herbarium tag with a small hole on the left */
.label,
.chip {
  --hole: 6px;
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: .3em .75em .3em calc(.75em + var(--hole) + .45em);
  background: var(--c-paper);
  border: 1px solid var(--c-wheat-2);
  color: var(--c-soil-dim);
  font-family: var(--ff-body);
  font-size: var(--fs-caption);
  font-weight: 400;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.label::before,
.chip::before {
  content: '';
  position: absolute;
  left: .7em;
  top: 50%;
  width: var(--hole);
  height: var(--hole);
  margin-top: calc(var(--hole) / -2);
  border-radius: 50%;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--c-wheat-2);
}
.chip {
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--c-soil);
}
.chip--18 { font-weight: 600; letter-spacing: .02em; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; padding: 0; list-style: none; }

/* Figure mount — 1px wheat-2 frame 8px off the image, radius 0 */
.frame {
  margin: 0;
  padding: 8px;
  border: 1px solid var(--c-wheat-2);
  background: var(--surface);
}
.section--soil .frame { border-color: var(--line-strong); }
.frame img,
.frame picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
.frame__img { position: relative; overflow: hidden; background: var(--c-wheat); }
.frame__img--16x9 { aspect-ratio: 16 / 9; }
.frame__img--21x9 { aspect-ratio: 21 / 9; }
.frame__img--3x2  { aspect-ratio: 3 / 2; }
.frame__img--4x3  { aspect-ratio: 4 / 3; }
.frame__img--4x5  { aspect-ratio: 4 / 5; }
.frame__img--1x1  { aspect-ratio: 1 / 1; }

.caption,
figcaption {
  margin-top: .75rem;
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--c-soil-dim);
}
figcaption.label { margin-top: .75rem; }

.disclaimer {
  font-size: var(--fs-caption);
  color: var(--text-dim);
  margin: 1rem 0 0;
}

/* Drawer card — shallow wooden drawer: 1px border, clay handle on top */
.drawer-card {
  position: relative;
  padding: 2.25rem clamp(1.1rem, 2.2vw, 1.75rem) clamp(1.1rem, 2.2vw, 1.75rem);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--text);
  transition: transform var(--t-card) var(--ease), box-shadow var(--t-card) var(--ease);
}
.drawer-card::before {
  content: '';
  position: absolute;
  top: .9rem;
  left: 50%;
  width: 48px;
  height: 4px;
  margin-left: -24px;
  border-radius: 2px;
  background: var(--c-clay);
}
.section--soil .drawer-card::before { background: var(--c-clay-lt); }
.drawer-card--interactive:hover,
.drawer-card--interactive:focus-within {
  transform: translateX(4px);
  box-shadow: var(--shadow-drawer);
}

/* Sprout divider — thin line with a two-leaf seedling in the middle */
.sprout-divider {
  position: relative;
  height: 28px;
  margin: 0 auto;
  max-width: var(--container);
}
.sprout-divider::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--line);
}
.sprout-divider::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 24px;
  height: 28px;
  margin-left: -12px;
  background: var(--accent-2);
  -webkit-mask: var(--svg-sprout) center bottom / contain no-repeat;
  mask: var(--svg-sprout) center bottom / contain no-repeat;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 48px;
  padding: .8em 1.5em;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: var(--ff-body);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.btn:hover { transform: translateY(1px); text-decoration: none; }

.btn--primary {
  background: var(--c-clay-ink);          /* paper on it: 5.78 */
  color: var(--c-paper);
}
.btn--primary:hover { background: var(--c-clay-ink-hover); color: var(--c-paper); }

.btn--secondary {
  background: transparent;
  border-color: var(--c-soil);
  color: var(--c-soil);
}
.btn--secondary:hover { background: var(--c-wheat); color: var(--c-soil); }
.section--soil .btn--secondary,
.btn--secondary.btn--on-dark {
  border-color: var(--c-paper);
  color: var(--c-paper);
}
.section--soil .btn--secondary:hover,
.btn--secondary.btn--on-dark:hover { background: var(--c-soil-2); }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Badge (18+) */
.badge {
  display: inline-grid;
  place-items: center;
  min-width: 2.4em;
  height: 2.4em;
  padding: 0 .4em;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: .72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}

/* 6. Header & nav sheet (§3.1) -------------------------------------------
   CSS ↔ JS contract (§3.4):
   .site-header.is-scrolled        header after 80px
   .nav-sheet.is-open              top sheet open; aria-expanded on .nav-toggle
   html.is-scroll-locked           scroll lock while the sheet / lightbox is open
   .site-nav__link.is-active       scroll-spy
   .hero__slide.is-active          hero; aria-current on dots, aria-pressed on pause
   .dial --dial                    garden dial; aria-checked on [role="radio"]
   .drawer.is-open                 room drawers; aria-expanded on .drawer__toggle
   [role="tab"][aria-selected]     garden seasons; hidden on panels
   .strip__prev/.strip__next[disabled]  strips
   aria-expanded                   FAQ and footer accordion
   html.js                         set by main.js; no-JS fallbacks key off its absence
   ------------------------------------------------------------------------- */

.btn--sm { min-height: 40px; padding: .55em 1.1em; font-size: .88rem; }

html.is-scroll-locked { overflow: hidden; }

.site-header {
  --hdr-text: var(--c-paper);
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-h);
  color: var(--hdr-text);
  transition: background-color var(--t-card) var(--ease), color var(--t-card) var(--ease),
              box-shadow var(--t-card) var(--ease);
}
/* Soil gradient over the hero so light text holds on any frame */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0 0 -48px;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(42,33,27,.78), rgba(42,33,27,.42) 55%, rgba(42,33,27,0));
  pointer-events: none;
  transition: opacity var(--t-card) var(--ease);
}
.site-header.is-scrolled,
.site-header--solid {
  --hdr-text: var(--c-soil);
  background: rgba(247,243,234,.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--c-line);
}
.site-header.is-scrolled::before,
.site-header--solid::before { opacity: 0; }
.site-header :focus-visible { outline-color: currentColor; }

/* While the sheet is open the header sits on soil */
.site-header:has(.nav-toggle[aria-expanded="true"]) {
  --hdr-text: var(--c-paper);
  background: var(--c-soil);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 1px 0 var(--c-line-dark);
}
.site-header:has(.nav-toggle[aria-expanded="true"])::before { opacity: 0; }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 100%;
}

/* Logo: sprouting F monogram + FRØHUS */
.logo {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: inherit;
  text-decoration: none;
  flex: none;
}
.logo__mark { width: 30px; height: 31px; overflow: visible; }
.logo__f { fill: currentColor; }
.logo__stem { fill: none; stroke: var(--c-sprout); stroke-width: 2.4; stroke-linecap: round; }
.logo__leaf { fill: var(--c-sprout); }
.site-header:not(.is-scrolled):not(.site-header--solid) .logo__stem,
.site-footer .logo__stem { stroke: var(--c-lichen); }
.site-header:not(.is-scrolled):not(.site-header--solid) .logo__leaf,
.site-footer .logo__leaf { fill: var(--c-lichen); }
.site-header:has(.nav-toggle[aria-expanded="true"]) .logo__stem { stroke: var(--c-lichen); }
.site-header:has(.nav-toggle[aria-expanded="true"]) .logo__leaf { fill: var(--c-lichen); }
.logo__word {
  font-family: var(--ff-display);
  font-size: 1.3rem;
  letter-spacing: .16em;
  line-height: 1;
  padding-top: .1em;
}

/* Desktop nav (≥ 1200px) */
.site-nav { display: none; }
.site-nav__list {
  display: flex;
  gap: clamp(1rem, 1.6vw, 1.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-block: .5rem;
  color: inherit;
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .02em;
  text-decoration: none;
  white-space: nowrap;
}
.site-nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: .2rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-fast) var(--ease);
}
.site-nav__link:hover::after { transform: scaleX(1); }
/* Active item: a cotyledon before the text */
.site-nav__link::before {
  content: '';
  width: 0;
  height: 10px;
  margin-right: 0;
  background: currentColor;
  -webkit-mask: var(--svg-cotyledon) center / contain no-repeat;
  mask: var(--svg-cotyledon) center / contain no-repeat;
  transition: width var(--t-fast) var(--ease), margin var(--t-fast) var(--ease);
}
.site-nav__link.is-active::before,
.site-nav__link[aria-current]::before { width: 10px; margin-right: .4rem; }

.site-header__cta { display: none; margin-left: auto; }

/* Burger */
.nav-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  margin-left: auto;
  margin-right: -10px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  position: absolute;
  left: 11px;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--t-card) var(--ease), opacity var(--t-fast) var(--ease);
}
.nav-toggle__bars { top: 50%; margin-top: -.75px; }
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ''; left: 0; }
.nav-toggle__bars::before { transform: translateY(-7px); }
.nav-toggle__bars::after { transform: translateY(7px); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: rotate(45deg); background: currentColor; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: rotate(-45deg); background: currentColor; }

/* No-JS fallback: "Menu" jumps to the footer's Explore list */
.nav-fallback {
  margin-left: auto;
  color: inherit;
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.js .nav-fallback { display: none; }
.js .nav-toggle { display: block; }

/* Top-down sheet (< 1200px) */
.nav-sheet {
  position: fixed;
  inset: 0 0 auto;
  z-index: 90;
  max-height: 100svh;
  overflow-y: auto;
  padding: calc(var(--header-h) + clamp(1.5rem, 5vh, 3rem)) 0 clamp(2rem, 6vh, 3.5rem);
  background: var(--c-soil);
  color: var(--c-paper);
  display: none;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 420ms var(--ease), visibility 0s linear 420ms;
}
.js .nav-sheet { display: block; }
.nav-sheet.is-open {
  transform: none;
  visibility: visible;
  transition: transform 420ms var(--ease), visibility 0s;
}
.nav-sheet__list {
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--c-line-dark);
}
.nav-sheet__list li { border-bottom: 1px solid var(--c-line-dark); }
.nav-sheet__link {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem 0;
  color: var(--c-paper);
  font-family: var(--ff-display);
  font-size: clamp(1.7rem, 6vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -.01em;
  text-decoration: none;
}
.nav-sheet__link::before {
  content: '';
  width: 12px;
  height: 12px;
  flex: none;
  background: var(--c-lichen);
  -webkit-mask: var(--svg-cotyledon) center / contain no-repeat;
  mask: var(--svg-cotyledon) center / contain no-repeat;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
}
.nav-sheet__link:hover::before,
.nav-sheet__link.is-active::before,
.nav-sheet__link[aria-current]::before { opacity: 1; }
.nav-sheet__link:hover { color: var(--c-clay-lt); }
.nav-sheet__cta { width: 100%; }
@media (min-width: 768px) {
  .nav-sheet__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
  .nav-sheet__cta { width: auto; }
}

.nav-sheet__scrim {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(42,33,27,.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 320ms var(--ease), visibility 0s linear 320ms;
}
.nav-sheet.is-open + .nav-sheet__scrim {
  opacity: 1;
  visibility: visible;
  transition: opacity 320ms var(--ease), visibility 0s;
}

@media (min-width: 1200px) {
  :root { --header-h: 84px; }
  .site-nav { display: block; margin-inline: auto; }
  .site-header__cta { display: inline-flex; margin-left: 0; }
  .nav-fallback,
  .js .nav-toggle,
  .js .nav-sheet,
  .nav-sheet__scrim { display: none; }
}

/* Inner pages sit below the fixed header */
.page:not(.page--home) main { padding-top: var(--header-h); }

/* 7. Footer (§3.2) -------------------------------------------------------- */

.site-footer {
  position: relative;
  isolation: isolate;
  padding-top: clamp(3.5rem, 7vw, 6rem);
  background: var(--bg);
  color: var(--text);
  font-size: .95rem;
}
.site-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--noise);
  background-size: 400px 400px;
  opacity: var(--noise-opacity);
  pointer-events: none;
}
.site-footer a { color: var(--text); text-decoration-color: var(--line-strong); }
.site-footer a:hover { color: var(--accent); text-decoration-color: currentColor; }
.site-footer a.btn { color: var(--c-paper); }

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.site-footer__col--brand { padding-bottom: 2rem; }
.site-footer__col--brand .logo { margin-bottom: 1.25rem; }
.site-footer__pitch {
  max-width: 34ch;
  font-family: var(--ff-display);
  font-size: 1.3rem;
  line-height: 1.3;
}
.site-footer__meta { color: var(--text-dim); font-size: .9rem; max-width: 40ch; margin-bottom: .5rem; }

.site-footer__title {
  margin: 0;
  font-family: var(--ff-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .2em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--accent);
}
.site-footer__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1.1rem 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  text-transform: inherit;
}
/* Plus / minus */
.site-footer__toggle::after {
  content: '';
  width: 12px;
  height: 12px;
  flex: none;
  background:
    linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 12px no-repeat;
  transition: transform var(--t-fast) var(--ease);
}
.site-footer__toggle[aria-expanded="true"]::after {
  background: linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat;
}

.site-footer__col:not(.site-footer__col--brand) { border-top: 1px solid var(--line); }
.site-footer__panel { padding-bottom: 1.25rem; }
.site-footer__panel p { color: var(--text-dim); font-size: .9rem; }
.site-footer__list { margin: 0; padding: 0; list-style: none; }
.site-footer__list li + li { margin-top: .45rem; }
.site-footer__dept {
  display: block;
  color: var(--text-dim);
  font-size: .78rem;
  letter-spacing: .06em;
}
.site-footer__list a[aria-current] { color: var(--accent); }

/* Phone accordion: collapsed only when JS says so; no-JS = all open */
@media (max-width: 767px) {
  .site-footer__col:has(.site-footer__toggle[aria-expanded="false"]) .site-footer__panel { display: none; }
}

@media (min-width: 768px) {
  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem var(--gap);
  }
  .site-footer__col--brand { grid-column: 1 / -1; padding-bottom: 0; }
  .site-footer__col:not(.site-footer__col--brand) { border-top: 0; }
  .site-footer__toggle { padding: 0 0 1rem; cursor: default; pointer-events: none; }
  .site-footer__toggle::after { display: none; }
  .site-footer__panel { padding-bottom: 0; }
}
@media (min-width: 1024px) {
  .site-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.25fr; }
  .site-footer__col--brand { grid-column: auto; }
}

.site-footer__bottom {
  display: grid;
  gap: .6rem;
  position: relative;
  padding-block: 1.75rem 2.25rem;
  color: var(--text-dim);
  font-size: .82rem;
  line-height: 1.6;
}
.site-footer__bottom::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  height: 1px;
  background: var(--line);
}
.site-footer__bottom p { margin: 0; max-width: 90ch; }
.site-footer__bottom a { color: var(--text-dim); }
.site-footer__rg .badge { margin-right: .5rem; color: var(--text); }
.footer__owner { color: var(--text-dim); }

/* 8. Sections S1–S7 (stage 4) --------------------------------------------- */

/* S1. Hero — full-screen crossfade, three pine layers, text bottom-left */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--c-soil);
  color: var(--text);
}
.hero__slides { position: absolute; inset: 0; z-index: -3; }
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.3s var(--ease);
}
.hero__slide.is-active { opacity: 1; }
.hero__slide picture,
.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Soil gradient from the bottom */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(to top, rgba(42,33,27,.95) 0%, rgba(42,33,27,.86) 45%, rgba(42,33,27,.76) 72%, rgba(42,33,27,.66) 100%);
  pointer-events: none;
}
@media (min-width: 1024px) {
  .hero::after {
    background:
      linear-gradient(to top, rgba(42,33,27,.92) 0%, rgba(42,33,27,.62) 40%, rgba(42,33,27,.12) 80%),
      linear-gradient(to right, rgba(42,33,27,.72) 0%, rgba(42,33,27,.35) 45%, rgba(42,33,27,0) 72%);
  }
}

/* Pine silhouettes: shifted by JS via --hero-shift (IntersectionObserver + rAF) */
.hero__layers {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  height: min(46vh, 420px);
  pointer-events: none;
}
.hero__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  fill: var(--c-soil);
  transform: translate3d(0, calc(var(--hero-shift, 0px) * var(--depth, 0)), 0);
  will-change: transform;
}
.hero__layer--back  { --depth: .25; fill-opacity: .32; }
.hero__layer--mid   { --depth: .5;  fill-opacity: .55; }
.hero__layer--front { --depth: .8;  fill-opacity: .88; }

.hero__content {
  padding-top: calc(var(--header-h) + 2rem);
  padding-bottom: clamp(2.25rem, 8vh, 5.5rem);
}
.hero__title {
  max-width: 15ch;
  margin-bottom: .35em;
  color: var(--c-paper);
}
.hero__lead {
  max-width: 50ch;
  margin-bottom: 1.5rem;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--c-paper);
}
.hero__actions { margin-bottom: 1rem; }
.hero__disclaimer { margin: 0; color: var(--c-paper-dim); }
.hero .eyebrow { color: var(--c-paper); }
.hero .eyebrow::before { background: var(--c-lichen); }
.hero__title,
.hero__lead,
.hero .eyebrow { text-shadow: 0 1px 24px rgba(42,33,27,.35); }

.hero__controls {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(2.25rem, 8vh, 5.5rem);
  display: none;
  align-items: center;
  gap: .75rem;
}
.js .hero__controls { display: flex; }
.hero__dots { display: flex; gap: .25rem; }
.hero__dot {
  position: relative;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: none;
}
.hero__dot::before {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border: 1px solid var(--c-paper);
  border-radius: 50%;
  transition: background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.hero__dot[aria-current="true"]::before { background: var(--c-paper); transform: scale(1.25); }
.hero__pause {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(247,243,234,.5);
  border-radius: 50%;
  background: none;
  color: var(--c-paper);
}

@media (max-width: 767px) {
  .hero__title { font-size: clamp(2.3rem, 10.4vw, 2.8rem); max-width: none; }
  .hero__lead { font-size: 1rem; margin-bottom: 1.1rem; }
  .hero__actions .btn { min-height: 44px; padding: .65em 1.05em; font-size: .9rem; }
  .hero__controls { bottom: auto; top: calc(var(--header-h) + .75rem); }
  .hero .eyebrow { margin-bottom: .75rem; }
}
@media (max-height: 700px) and (max-width: 767px) {
  .hero__content { padding-bottom: 1.5rem; }
  .hero__lead { line-height: 1.45; }
}

/* S2. The idea */
.idea__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.idea__text p:not(.eyebrow) { max-width: var(--measure); }
@media (min-width: 1024px) {
  .idea__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .idea__aside { position: sticky; top: calc(var(--header-h) + 2rem); }
}
.idea__drawer { padding-bottom: clamp(1.1rem, 2.2vw, 1.75rem); }
.idea__drawer .frame { border: 0; padding: 0; background: none; }
.idea__wide { margin-bottom: clamp(3rem, 6vw, 5rem); }

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 1024px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
}
.stat__num {
  font-family: var(--ff-display);
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.stat__label { color: var(--text-dim); font-size: .95rem; line-height: 1.4; }

/* S3. The Seed House */
.seedhouse__wide { margin-bottom: var(--gap); }
.seedhouse__row {
  display: grid;
  gap: var(--gap);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 768px) {
  /* 4:5, 4:5, 4:3 side by side at equal height: 1 : 1 : 1.667 */
  .seedhouse__row { grid-template-columns: 1fr 1fr 1.667fr; align-items: end; }
}
.seedhouse__body { display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 1024px) {
  .seedhouse__body { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2.5rem, 6vw, 5rem); row-gap: 1.5rem; align-content: start; }
  .seedhouse__body .lead { grid-row: span 3; margin: 0; }
}
.points { display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.point { padding-left: 1.75rem; position: relative; }
.point::before {
  content: '';
  position: absolute;
  left: 0;
  top: .35rem;
  width: 14px;
  height: 14px;
  background: var(--accent-2);
  -webkit-mask: var(--svg-cotyledon) center / contain no-repeat;
  mask: var(--svg-cotyledon) center / contain no-repeat;
}
.point__title {
  margin-bottom: .3rem;
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
}
.point p { margin: 0; color: var(--text-dim); }
.seedhouse__name {
  margin: 0;
  font-family: var(--ff-display);
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  color: var(--accent);
}

/* S4. The garden year — dial + seasons */
.garden__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 1024px) { .garden__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

/* No JS: the plain list of months. JS: the dial and its panel. */
.dial, .dial-panel { display: none; }
.js .dial { display: block; }
.js .dial-panel { display: block; }
.js .months { display: none; }

.months {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.months__item { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.months__name { margin-bottom: .25rem; font-size: 1.3rem; }
.months__item p { margin: 0; color: var(--text-dim); font-size: .95rem; }

.dial {
  position: relative;
  width: min(100%, 440px);
  aspect-ratio: 1 / 1;
  margin: 0 auto 2rem;
}
.dial__face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--c-wheat-2);
  background:
    radial-gradient(circle, var(--c-wheat) 0 30%, transparent 30.2%),
    repeating-conic-gradient(from -15deg, transparent 0 29.6deg, var(--c-line) 29.6deg 30deg),
    conic-gradient(from -45deg,
      #E3E6DA 0 90deg,      /* winter: Dec–Feb */
      #E4E6CC 90deg 180deg, /* spring: Mar–May */
      #F1E6CB 180deg 270deg,/* summer: Jun–Aug */
      #EDD9C6 270deg 360deg /* autumn: Sep–Nov */);
}
/* Winter sits at the top, so January is at 0° */
.dial__face::after {
  content: '';
  position: absolute;
  inset: 17%;
  border-radius: 50%;
  border: 1px dashed var(--c-wheat-2);
}
.dial__hand {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 30%;
  margin-left: -1px;
  background: var(--c-clay);
  transform-origin: 50% 100%;
  transform: translateY(-100%) rotate(var(--dial, 0deg));
  transition: transform 700ms var(--ease);
}
.dial__hand::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -12px;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  background: var(--c-sprout-ink);
  -webkit-mask: var(--svg-cotyledon) center / contain no-repeat;
  mask: var(--svg-cotyledon) center / contain no-repeat;
}
.dial__months { position: absolute; inset: 0; }
.dial__month {
  --a: 0deg;
  position: absolute;
  left: calc(50% + 41% * sin(var(--a)));
  top: calc(50% - 41% * cos(var(--a)));
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: none;
  color: var(--c-soil);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .04em;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.dial__month:hover { border-color: var(--c-clay); }
.dial__month[aria-checked="true"] { background: var(--c-clay-ink); color: var(--c-paper); }
.dial__month:nth-child(2)  { --a: 30deg; }
.dial__month:nth-child(3)  { --a: 60deg; }
.dial__month:nth-child(4)  { --a: 90deg; }
.dial__month:nth-child(5)  { --a: 120deg; }
.dial__month:nth-child(6)  { --a: 150deg; }
.dial__month:nth-child(7)  { --a: 180deg; }
.dial__month:nth-child(8)  { --a: 210deg; }
.dial__month:nth-child(9)  { --a: 240deg; }
.dial__month:nth-child(10) { --a: 270deg; }
.dial__month:nth-child(11) { --a: 300deg; }
.dial__month:nth-child(12) { --a: 330deg; }
.dial__centre {
  position: absolute;
  inset: 36%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  pointer-events: none;
}
.dial__centre-label {
  font-family: var(--ff-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--c-soil);
}

.dial-panel {
  min-height: 9.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.dial-panel__title { font-size: var(--fs-h3); margin-bottom: .4rem; }
.dial-panel__text { margin: 0; color: var(--text); }

.seasons__tabs {
  display: none;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1rem;
}
.js .seasons__tabs { display: flex; }
.seasons__tab {
  min-height: 40px;
  padding: .45em 1em;
  border: 1px solid var(--c-soil);
  border-radius: 2px;
  background: transparent;
  color: var(--c-soil);
  font-size: .88rem;
  font-weight: 500;
}
.seasons__tab:hover { background: var(--c-paper); }
.seasons__tab[aria-selected="true"] { background: var(--c-soil); color: var(--c-paper); }
.seasons__panels {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.js .seasons__panels { grid-template-columns: minmax(0, 1fr); }
.js .seasons__panel--greenhouse .frame__img { aspect-ratio: 3 / 2; }
.garden__note {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  font-size: var(--fs-small);
  color: var(--text-dim);
}

/* S5. Rooms — drawers */
.rooms .section__head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.drawers { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.drawer {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  transition: transform var(--t-card) var(--ease), box-shadow var(--t-card) var(--ease);
}
.drawer:hover { transform: translateX(4px); box-shadow: var(--shadow-drawer); }
.drawer.is-open { transform: translateX(8px); box-shadow: var(--shadow-drawer); }
.drawer__head {
  position: relative;
  display: grid;
  gap: .35rem 2rem;
  padding: 2rem clamp(1.1rem, 3vw, 2.25rem) 1.5rem;
}
@media (min-width: 768px) {
  .drawer__head { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .drawer__title, .drawer__summary { grid-column: 1; }
  .drawer__chips { grid-column: 2; grid-row: 1 / span 2; justify-content: flex-end; }
}
.drawer__handle {
  position: absolute;
  top: .9rem;
  left: 50%;
  width: 48px;
  height: 4px;
  margin-left: -24px;
  border-radius: 2px;
  background: var(--c-clay);
}
.drawer__title { margin: 0; font-size: var(--fs-h3); }
.drawer__toggle {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
}
/* Whole facade is the click target */
.drawer__toggle::after {
  content: '';
  position: absolute;
  inset: 0;
}
.drawer__toggle::before {
  content: '';
  order: 2;
  width: 10px;
  height: 10px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  transition: transform var(--t-card) var(--ease);
}
.drawer__toggle[aria-expanded="true"]::before { transform: translateY(2px) rotate(225deg); }
.drawer__toggle:focus-visible { outline: none; }
.drawer__toggle:focus-visible::after { outline: 2px solid var(--focus); outline-offset: -4px; }
.drawer__summary { margin: 0; color: var(--text-dim); }
.drawer__chips { margin: .5rem 0 0; position: relative; z-index: 1; pointer-events: none; }

.drawer__panel {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 380ms var(--ease);
}
.drawer__inner {
  min-height: 0;
  overflow: hidden;
  display: grid;
  gap: var(--gap);
  padding: 0 clamp(1.1rem, 3vw, 2.25rem);
}
.drawer__inner > :last-child { margin-bottom: clamp(1.25rem, 3vw, 2.25rem); }
.js .drawer:not(.is-open) .drawer__panel { grid-template-rows: 0fr; }
.js .drawer:not(.is-open) .drawer__inner { visibility: hidden; transition: visibility 0s linear 380ms; }
@media (min-width: 1024px) {
  .drawer__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
  .drawer__inner > .drawer__media { margin-bottom: clamp(1.25rem, 3vw, 2.25rem); }
}
.drawer__body p { max-width: var(--measure); }
.drawer__features {
  display: grid;
  gap: .35rem 1.5rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  font-size: .95rem;
}
@media (min-width: 768px) { .drawer__features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.drawer__features li { position: relative; padding-left: 1.25rem; }
.drawer__features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
  width: 10px;
  height: 10px;
  background: var(--accent-2);
  -webkit-mask: var(--svg-cotyledon) center / contain no-repeat;
  mask: var(--svg-cotyledon) center / contain no-repeat;
}
.thumbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}
.thumb {
  display: block;
  padding: 4px;
  border: 1px solid var(--c-wheat-2);
  background: var(--c-paper);
}
.thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: opacity var(--t-fast) var(--ease); }
.thumb:hover img { opacity: .85; }

/* S6. Dining */
.split {
  display: grid;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
}
@media (min-width: 1024px) {
  .split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .split--reverse { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .split--reverse .split__media { order: 2; }
  .split__media--portrait { max-width: 440px; justify-self: end; width: 100%; }
}
.split__text p { max-width: var(--measure); }

.dishes {
  display: grid;
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) { .dishes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dish { display: flex; flex-direction: column; align-items: flex-start; }
.dish.drawer-card { transition: transform var(--t-card) var(--ease), box-shadow var(--t-card) var(--ease); }
.dish:hover { transform: translateX(4px); box-shadow: var(--shadow-drawer); }
.dish__media { width: 100%; margin-bottom: 1rem; }
.dish .chip { margin-bottom: .75rem; }
.dish__title { font-size: var(--fs-h3); margin-bottom: .4rem; }
.dish p { margin: 0; color: var(--text-dim); font-size: .95rem; }
.dishes__note { margin: 1rem 0 clamp(2.5rem, 6vw, 5rem); font-size: var(--fs-small); color: var(--text-dim); }

.cellar { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (min-width: 768px) { .cellar { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } }
.cellar__text p:last-child { margin-bottom: 0; }

/* S7. The entertainment and gaming lounge */
.casino__head { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 1.25rem; max-width: none; }
.casino__head .eyebrow { flex-basis: 100%; }
.casino__head h2 { margin-bottom: .5rem; }
.casino__wide { margin-bottom: clamp(2rem, 4vw, 3rem); }
.casino__body { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.casino__body .lead { max-width: 68ch; }

.strip { position: relative; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.strip__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78%, 300px);
  gap: var(--gap);
  margin: 0;
  padding: 0 0 .5rem;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.strip__item { scroll-snap-align: start; }
@media (min-width: 1024px) {
  .strip__track { grid-auto-columns: calc((100% - 3 * var(--gap)) / 4); }
}
.strip__item .frame { margin-bottom: 1rem; }
.strip__title { font-size: var(--fs-h3); margin-bottom: .35rem; }
.strip__item p { margin: 0; color: var(--text-dim); font-size: .95rem; }
.strip__nav { display: none; gap: .5rem; justify-content: flex-end; margin-top: 1rem; }
.js .strip__nav { display: flex; }
.strip__prev,
.strip__next {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: none;
  color: var(--text);
  font-size: 1.4rem;
  line-height: 1;
}
.strip__prev:hover:not([disabled]),
.strip__next:hover:not([disabled]) { background: var(--c-soil-2); }
.strip__prev[disabled],
.strip__next[disabled] { opacity: .35; cursor: default; }
@media (min-width: 1024px) { .js .strip--static .strip__nav { display: none; } }

.casino__rules {
  display: grid;
  gap: var(--gap);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line);
}
@media (min-width: 768px) { .casino__rules { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.casino__rule ul { margin: 0; padding: 0; list-style: none; }
.casino__rule li + li { margin-top: .35rem; }
.casino__rule li,
.casino__rule p { color: var(--text-dim); margin: 0; }
.casino__rule .badge { margin-right: .4rem; color: var(--text); }

/* S8. Water and heat */
.spa__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 1024px) { .spa__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.spa__text p:not(.eyebrow) { max-width: var(--measure); }
.spa__area { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; font-variant-numeric: tabular-nums; }
.steps {
  display: grid;
  gap: .75rem;
  margin: 1.5rem 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.step {
  position: relative;
  padding: .9rem 0 .9rem 2.25rem;
  border-top: 1px solid var(--line);
  color: var(--text-dim);
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.2rem;
  width: 14px;
  height: 14px;
  background: var(--accent-2);
  -webkit-mask: var(--svg-cotyledon) center / contain no-repeat;
  mask: var(--svg-cotyledon) center / contain no-repeat;
}
.step__name {
  display: inline-block;
  min-width: 3.5em;
  margin-right: .5rem;
  font-family: var(--ff-display);
  font-size: 1.3rem;
  color: var(--text);
}
/* Spa: a strip on phones, a 2×2 grid from 768px */
@media (min-width: 768px) {
  .strip--spa .strip__track {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-columns: auto;
    overflow: visible;
  }
  .strip--spa .strip__nav,
  .js .strip--spa .strip__nav { display: none; }
}
.spa__card .frame { margin-bottom: .9rem; }

/* S9. The old forest */
.forest__grid {
  display: grid;
  gap: var(--gap);
}
@media (min-width: 768px) {
  .forest__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .forest__main { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  /* 3:2 wide on the left, 4:5 and 3:2 stacked on the right */
  .forest__grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); grid-template-rows: auto auto; }
  .forest__main { grid-column: 1; grid-row: 1; }
  .forest__text { grid-column: 1; grid-row: 2; padding-top: 1rem; }
  .forest__path { grid-column: 2; grid-row: 1; }
  .forest__winter { grid-column: 2; grid-row: 2; }
  .forest__path, .forest__winter { align-self: start; }
}
@media (min-width: 768px) and (max-width: 1023px) { .forest__text { grid-column: 1 / -1; } }
.forest__text { max-width: 70ch; }
.forest__text p:last-child { margin-bottom: 0; }

/* S10. Gatherings */
.events__wide { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.events__cards {
  display: grid;
  gap: var(--gap);
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) { .events__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.event .frame { margin-bottom: 1rem; }
.event__title { font-size: var(--fs-h3); margin-bottom: .35rem; }
.event p { margin: 0; color: var(--text-dim); font-size: .95rem; }

.capacity { margin-bottom: clamp(2rem, 4vw, 3rem); }
.capacity__title { font-size: var(--fs-h3); }
.table-scroll {
  overflow-x: auto;
  margin-bottom: 1rem;
  border: 1px solid var(--line-strong);
  background: var(--surface);
}
.table {
  width: 100%;
  min-width: 560px;
  margin: 0;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.table th,
.table td {
  padding: .85rem 1.1rem;
  border-bottom: 1px solid var(--line);
  text-align: right;
  white-space: nowrap;
}
.table th:first-child { text-align: left; }
.table thead th {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.table tbody th { font-family: var(--ff-display); font-weight: 400; font-size: 1.1rem; }
.table tbody tr:last-child > * { border-bottom: 0; }
.events__cta { display: grid; gap: 1rem; justify-items: start; max-width: var(--measure); }
.events__cta p { margin: 0; }

/* S11. Trøndelag */
.region__cards {
  display: grid;
  gap: var(--gap);
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) { .region__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .region__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.region__card .frame { margin-bottom: .9rem; }
.region__title { font-size: var(--fs-h3); margin-bottom: .35rem; }
.region__card p { margin: 0; color: var(--text-dim); font-size: .95rem; }
.region__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 1024px) { .region__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }

/* Map: labels are positioned by JS from data-x / data-y (percent) via setProperty.
   Without JS they read as a plain legend under the map. */
.map { margin: 0; }
.map__canvas { overflow: visible; }
.map__labels {
  margin: .75rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .5rem;
}
.map__label {
  font-size: .8rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--c-soil);
}
.js .map__labels { position: absolute; inset: 0; margin: 0; display: block; pointer-events: none; }
.js .map__label {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  max-width: 13em;
  padding: .25em .55em;
  background: rgba(247,243,234,.92);
  border: 1px solid var(--c-wheat-2);
  transform: translate(-50%, calc(-100% - 10px));
  text-align: center;
}
.js .map__label::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -12px;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--c-soil);
  box-shadow: 0 0 0 2px var(--c-paper);
}
.js .map__label--project { background: var(--c-clay-ink); border-color: var(--c-clay-ink); color: var(--c-paper); }
.js .map__label--project::after { background: var(--c-clay-ink); }
.map .label { margin-top: .75rem; }

/* S12. Gallery — herbarium sheets */
.herbarium {
  display: grid;
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 480px) { .herbarium { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .herbarium { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sheet {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(1rem, 2vw, 1.5rem) clamp(1rem, 2vw, 1.5rem) 1.25rem;
  background: #FFFDF8;                    /* herbarium white: soil on it 15.5:1 */
  border: 1px solid var(--c-wheat-2);
  box-shadow: 0 1px 0 rgba(42,33,27,.06);
}
/* Every sheet is 4:5, the plate sits in the upper part like a mounted specimen */
.sheet__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 5;
  margin-bottom: 1rem;
}
.sheet__mount {
  display: block;
  width: 100%;
  padding: 8px;
  border: 1px solid var(--c-wheat-2);
  background: #FFFDF8;
  transition: transform var(--t-card) var(--ease), box-shadow var(--t-card) var(--ease);
}
.sheet__mount.frame__img--1x1 { width: 84%; }
.sheet__mount img { width: 100%; height: 100%; object-fit: cover; }
.sheet__link:hover .sheet__mount { transform: translateX(4px); box-shadow: var(--shadow-drawer); }
.sheet__label { margin: auto 0 0; }
.sheet .label::before { background: #FFFDF8; }

/* S13. FAQ */
.faq__grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
@media (min-width: 1024px) {
  .faq__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; }
  .faq .section__head { position: sticky; top: calc(var(--header-h) + 2rem); }
}
.faq__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__h { margin: 0; font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.25; }
.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 1.25rem 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
}
.faq__q::after {
  content: '';
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: .3em;
  background:
    linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat;
}
.faq__q[aria-expanded="true"]::after {
  background: linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat;
}
.faq__q:hover { color: var(--accent); }
.faq__a {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 320ms var(--ease);
}
.faq__inner { min-height: 0; overflow: hidden; }
.faq__inner p { margin: 0 0 1.4rem; max-width: var(--measure); color: var(--text-dim); }
.faq__item:has(.faq__q[aria-expanded="false"]) .faq__a { grid-template-rows: 0fr; }
.faq__item:has(.faq__q[aria-expanded="false"]) .faq__inner { visibility: hidden; transition: visibility 0s linear 320ms; }

/* S13. CTA band */
.cta {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: clamp(420px, 60vh, 640px);
  align-items: end;
  overflow: hidden;
  background: var(--c-soil);
  color: var(--c-paper);
}
.cta__media { position: absolute; inset: 0; z-index: -2; }
.cta__media img { width: 100%; height: 100%; object-fit: cover; }
.cta::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(42,33,27,.92), rgba(42,33,27,.55) 55%, rgba(42,33,27,.25));
}
.cta__inner { padding-block: clamp(3.5rem, 8vw, 6rem); }
.cta h2 { max-width: 18ch; color: var(--c-paper); margin-bottom: .35em; }
.cta__sub { font-size: var(--fs-lead); margin-bottom: 1.5rem; color: var(--c-paper); }

/* Contact page */
.page-head__lead { margin: 1.25rem 0 0; }
.contact__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 1024px) { .contact__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.contact__form-wrap { padding-top: 2.75rem; }
.contact__title { font-size: var(--fs-h3); }
.contact__list { margin: 0 0 1.5rem; }
.contact__list dt { font-size: .82rem; color: var(--text-dim); }
.contact__list dd { margin: 0 0 .9rem; }

.form { display: grid; gap: 1.25rem; }
.form__field { display: grid; gap: .4rem; }
.form__label { font-size: .9rem; font-weight: 500; }
.form__input {
  width: 100%;
  min-height: 48px;
  padding: .7rem .9rem;
  border: 1px solid rgba(42,33,27,.45);   /* 3.48:1 on the field: visible edge */
  border-radius: 2px;
  background: #FFFDF8;
  color: var(--c-soil);
}
.form__input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--c-soil); }
.form__select {
  appearance: none;
  padding-right: 2.5rem;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) 55%, calc(100% - .9rem) 55%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}
.form__field--check { grid-template-columns: auto 1fr; align-items: start; gap: .75rem; font-size: .92rem; }
.form__check { width: 20px; height: 20px; margin: .2rem 0 0; accent-color: var(--c-clay-ink); }
.form__input[aria-invalid="true"],
.form__check[aria-invalid="true"] { border-color: #A12F1A; outline-color: #A12F1A; }
.form__error { margin: 0; font-size: .85rem; font-weight: 500; color: #A12F1A; } /* 6.46:1 on paper */
.form__field--check .form__error { grid-column: 2; }
.form__status { margin: 0; font-size: .92rem; }
.form__note { margin: 0; }
.form__noscript { margin: 1rem 0 0; padding: 1rem; border: 1px solid var(--c-wheat-2); background: var(--c-wheat); }

/* JS-created elements (stage 6) ------------------------------------------- */

.scroll-sentinel {
  position: absolute;
  top: 80px;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* Hero pause button: two bars, a triangle when paused */
.hero__pause::before {
  content: '';
  width: 10px;
  height: 12px;
  background:
    linear-gradient(currentColor, currentColor) left / 3px 100% no-repeat,
    linear-gradient(currentColor, currentColor) right / 3px 100% no-repeat;
}
.hero__pause[aria-pressed="true"]::before {
  width: 0;
  height: 0;
  margin-left: 3px;
  background: none;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent currentColor;
}
.hero__pause:hover { border-color: var(--c-paper); }

.dial--instant .dial__hand { transition: none; }

/* Reveal: below-the-fold blocks rise in once */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
.drawer.reveal.is-in:hover { transform: translateX(4px); }
.drawer.reveal.is-in.is-open { transform: translateX(8px); }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 56px;
  grid-template-rows: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: .5rem;
  padding: 0 clamp(.5rem, 2vw, 1.5rem) 1rem;
  background: rgba(30,24,19,.96);
  color: var(--c-paper);
  touch-action: pan-y;
}
.lightbox[hidden] { display: none; }
.lightbox__figure {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 0;
  margin: 0;
}
.lightbox__img {
  max-width: 100%;
  max-height: calc(100% - 3rem);
  width: auto;
  height: auto;
  object-fit: contain;
  padding: 8px;
  background: var(--c-paper);
}
.lightbox__caption { margin-top: .75rem; font-size: .9rem; color: var(--c-paper-dim); text-align: center; }
.lightbox__counter {
  grid-column: 2;
  grid-row: 3;
  margin: 0;
  font-size: .85rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--c-paper-dim);
}
.lightbox button {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(247,243,234,.35);
  border-radius: 50%;
  background: none;
  color: var(--c-paper);
  display: grid;
  place-items: center;
}
.lightbox button:hover { border-color: var(--c-paper); }
.lightbox button:focus-visible { outline-color: var(--c-clay-lt); }
.lightbox button[hidden] { display: none; }
.lightbox__close { grid-column: 3; grid-row: 1; justify-self: end; }
.lightbox__prev { grid-column: 1; grid-row: 2; }
.lightbox__next { grid-column: 3; grid-row: 2; justify-self: end; }
.lightbox__close::before,
.lightbox__close::after {
  content: '';
  grid-area: 1 / 1;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  transform: rotate(45deg);
}
.lightbox__close::after { transform: rotate(-45deg); }
.lightbox__prev::before,
.lightbox__next::before {
  content: '';
  width: 10px;
  height: 10px;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateX(2px) rotate(45deg);
}
.lightbox__next::before { transform: translateX(-2px) rotate(-135deg); }
@media (max-width: 767px) {
  .lightbox { grid-template-columns: 1fr 1fr; grid-template-rows: 64px minmax(0, 1fr) auto auto; }
  .lightbox__figure { grid-column: 1 / -1; }
  .lightbox__close { grid-column: 2; }
  .lightbox__prev { grid-column: 1; grid-row: 3; justify-self: end; }
  .lightbox__next { grid-column: 2; grid-row: 3; justify-self: start; }
  .lightbox__counter { grid-column: 1 / -1; grid-row: 4; }
}

/* Back to top */
.back-to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 70;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--c-wheat-2);
  border-radius: 50%;
  background: var(--c-paper);
  color: var(--c-soil);
  box-shadow: 0 6px 18px rgba(42,33,27,.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--t-card) var(--ease), transform var(--t-card) var(--ease), visibility 0s linear var(--t-card);
}
.back-to-top::before {
  content: '';
  width: 14px;
  height: 16px;
  background: var(--c-sprout-ink);
  -webkit-mask: var(--svg-sprout) center / contain no-repeat;
  mask: var(--svg-sprout) center / contain no-repeat;
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--t-card) var(--ease), transform var(--t-card) var(--ease), visibility 0s;
}
.back-to-top:hover { background: var(--c-wheat); }
html.is-scroll-locked .back-to-top { visibility: hidden; }

.form__status:empty { display: none; }
.form__status { padding: .75rem 1rem; border-left: 3px solid var(--c-sprout-ink); background: var(--c-wheat); }

/* 9. Inner pages: page head, breadcrumb, prose ---------------------------- */

.page-head { padding-block: clamp(3rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4rem); }
.page-head__title { margin: 0; max-width: 20ch; }

.breadcrumb { margin-bottom: 1.25rem; font-size: .85rem; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.breadcrumb li + li::before { content: '/'; margin-right: .4rem; color: var(--text-dim); }
.breadcrumb a { color: var(--text-dim); }
.breadcrumb a[aria-current] { color: var(--text); text-decoration: none; }

.prose { max-width: var(--measure); }
.prose h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-top: 2.2em; }
.prose h3 { margin-top: 1.8em; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: .35em; }
.prose h2:first-of-type { margin-top: 1.4em; }
.prose h2[id],
.prose h3 { scroll-margin-top: calc(var(--header-h) + 1rem); }
.prose__updated {
  display: inline-block;
  margin-bottom: 1.75rem;
  padding: .3em .75em;
  border: 1px solid var(--c-wheat-2);
  font-size: var(--fs-caption);
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.prose__owner {
  margin: 0 0 1.1em;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--c-clay);
  background: var(--c-wheat);
  font-style: normal;
  font-weight: 500;
}
.prose__dl { margin: 0 0 1.25em; border-top: 1px solid var(--line); }
.prose__dl dt { padding-top: .9rem; font-weight: 500; }
.prose__dl dd { margin: .2rem 0 0; padding-bottom: .9rem; border-bottom: 1px solid var(--line); color: var(--text-dim); }
.prose code {
  padding: .1em .35em;
  background: var(--c-wheat);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em;
  word-break: break-word;
}
.prose a { overflow-wrap: anywhere; }
.page-head__lead { max-width: var(--measure); }

/* 10. Reduced motion (§2.5) ---------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .btn:hover,
  .drawer-card--interactive:hover,
  .drawer-card--interactive:focus-within { transform: none; }
}

/* 404 */
.notfound { min-height: 70vh; display: flex; align-items: center; }
.notfound__text { max-width: var(--measure); margin: 1rem 0 2rem; color: var(--text-dim); }