/* ============================================================
   GREEN HOLLOW SUGARWORKS — Maple demo · page layer
   Type, grid and components live in ../system.css (v4).
   Palette (VISION §3.2 Maple): forest #1B4332 · cream #FBF7EE ·
   fire #C2410C · gold #D97706 · bark #44403C · ink #1C1917
   ============================================================ */

:root {
  --forest: #1B4332;
  --cream: #FBF7EE;
  --fire: #C2410C;
  --gold: #D97706;
  --bark: #44403C;
  --ink: #1C1917;
  --steam: #8C9FA6;              /* steam over the evaporator — the one cool note. NON-TEXT only (2.6:1 on cream): axis, idle segments, sold-out chip */
  --cool: var(--steam);

  --bg: var(--cream);
  --bg-2: #F0E8D8;               /* inset level: panels, plates, bands — 5.1 L* under the paper */
  --bg-3: #E6DDC9;
  --card: #FFFDF8;               /* lifted level: the label, inputs — lighter than the paper, never #FFF */
  --fg: var(--ink);
  --night-ink: var(--ink);
  --muted: #57534E;              /* 7.1:1 on cream · 6.26:1 on bg-2 */
  --accent: var(--fire);
  --accent-text: #B33A0A;        /* fire, one step darker for SMALL TEXT only: 5.57:1 on cream · 4.89:1 on bg-2.
                                    Fills, rules and focus rings stay the brand fire (#C2410C = 4.25:1 on bg-2, fine for non-text). */
  --on-accent: var(--cream);     /* 4.84:1 on fire */
  --ok: var(--forest);           /* 10.4:1 on cream */
  /* dark gradient starts AT the brand forest and only goes darker,
     so gold keeps ≥3.48:1 everywhere (large text / non-text only) */
  --dark-a: #1B4332;
  --dark-b: #16382C;
  --dark-c: #102A22;
  --on-dark: var(--cream);
  --muted-dark: rgba(251, 247, 238, .78);   /* 7.0:1 on forest */
  --accent-on-dark: var(--gold);
  --rule-soft: rgba(28, 25, 23, .22);       /* decorative only */
  --rule: rgba(28, 25, 23, .55);            /* controls only: 3.84:1 on cream · 3.70:1 on bg-2 */
  --rule-dark-soft: rgba(250, 246, 239, .30);
  --rule-dark: rgba(250, 246, 239, .45);    /* 3.43:1 on forest */
  --focus: var(--fire);
  --focus-dark: var(--gold);
  --scroll-pad: 24px;            /* static header on phones */
}
@media (min-width: 64rem) { :root { --scroll-pad: 96px; } }
/* CRAFT v8 3.1 — hairlines are mixed from the accent, so they stay warm on the paper instead of turning grey.
   Only the decorative --rule-soft; --rule keeps its measured ≥ 3:1. Inside @supports: an unsupported color-mix()
   in a custom property would be "valid" and break every border that uses it. */
@supports (color: color-mix(in oklab, red, blue)) {
  :root { --rule-soft: color-mix(in oklab, var(--accent) 26%, rgba(28, 25, 23, .26)); }
}
   /* sticky header where paging runs */

/* ---------- 1 · HERO ---------- */
.hero { padding: 0 0 64px; }
.hero-grid { padding-top: 36px; }
.hero-grid { align-items: center; }
.season-line { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; max-width: none; }
.hero .lead { max-width: 44ch; margin-bottom: 30px; }
.hero-plate .plate-inner { view-transition-name: vt-maple; --ar: 1 / 1; }   /* square on phones: the poster holds three rows */
@media (min-width: 600px) and (max-width: 859px) { .hero-plate .plate-inner { --ar: 5 / 4; } }   /* square only on phones */
@media (min-width: 860px) {
  .hero { padding-bottom: 28px; }   /* the demo note closes the hero now */
  .hero-grid { padding-top: 72px; }
  .hero-plate .plate-inner { --ar: 4 / 5; }
}
/* short laptop viewports: copy starts at the top (not centred against the tall poster), poster goes square */
@media (min-width: 860px) and (max-height: 820px) {
  .hero { padding-bottom: 20px; }
  .demo-strip { margin-top: 24px; }
  .hero-grid { padding-top: 22px; }
  .hero-grid { align-items: start; }
  .hero-h1 { margin-bottom: 18px; }
  .hero .lead { margin-bottom: 22px; }
  .season-line { margin-bottom: 14px; }
  .hero-plate .plate-inner { --ar: 1 / 1; }
}

/* ---------- 2 · THE HARVEST — grade switcher ---------- */
.grade-switcher { position: relative; align-items: start; }
/* native radios — focusable, drive everything through :checked */
.grade-switcher input[type="radio"] {
  position: absolute;
  width: 1px; height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
  margin: 0;
}
.gs-seg p { margin: 0 0 12px; }
.gs-legend { font-size: .9375rem; font-weight: 600; color: var(--muted); }
.seg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;                     /* the ink ground shows through: dividers without three more borders */
  background: var(--seg, var(--bark));   /* bark, not black: black is not in this palette (owner, 20 Sep) */
  border: 2px solid var(--seg, var(--bark));
  border-radius: 0;
  overflow: hidden;
}
.seg-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 64px;
  padding: 10px 6px;
  cursor: pointer;
  text-align: center;
  line-height: 1.25;
  font-weight: 600;
  font-size: .9375rem;
  background: var(--bg);
  background: color-mix(in oklab, var(--cool) 13%, var(--bg));   /* idle segments are cool, the chosen one is ink */
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t-ui) var(--ease), color var(--t-ui) var(--ease);
}
.seg-btn:hover { background: var(--bg-2); }
.seg-btn:active { background: var(--seg, var(--bark)); color: var(--seg-ink, var(--cream)); }

#grade-1:checked ~ .gs-seg label[for="grade-1"],
#grade-2:checked ~ .gs-seg label[for="grade-2"],
#grade-3:checked ~ .gs-seg label[for="grade-3"] { background: var(--seg, var(--bark)); color: var(--seg-ink, var(--cream)); }
#grade-1:focus-visible ~ .gs-seg label[for="grade-1"],
#grade-2:focus-visible ~ .gs-seg label[for="grade-2"],
#grade-3:focus-visible ~ .gs-seg label[for="grade-3"] { outline: 2px solid var(--focus); outline-offset: -5px; }
/* the focused segment is usually the checked (ink) one: fire on ink is 2.46:1, gold is 5.49:1 */
#grade-1:checked:focus-visible ~ .gs-seg label[for="grade-1"],
#grade-2:checked:focus-visible ~ .gs-seg label[for="grade-2"],
#grade-3:checked:focus-visible ~ .gs-seg label[for="grade-3"] { outline-color: var(--gold); }

/* the label is the product: name and colour band rewrite per grade */
/* the entering text fades in (pure CSS, @starting-style); the leaving one goes instantly, so nothing stacks */
.g { display: none; }
#grade-1:checked ~ .gs-plate .g-1,
#grade-2:checked ~ .gs-plate .g-2,
#grade-3:checked ~ .gs-plate .g-3 { display: block; opacity: 1; transition: opacity var(--t-slow) var(--ease); }
@starting-style {
  #grade-1:checked ~ .gs-plate .g-1,
  #grade-2:checked ~ .gs-plate .g-2,
  #grade-3:checked ~ .gs-plate .g-3 { opacity: 0; }
}
.gs-plate { --swatch: var(--gold); }
#grade-2:checked ~ .gs-plate { --swatch: var(--fire); }
#grade-3:checked ~ .gs-plate { --swatch: var(--bark); }
.gs-plate .plate-inner { min-height: 380px; }
.gs-plate .stamp { top: 6px; right: 10px; }
@media (min-width: 860px) { .gs-plate .stamp { top: 26px; right: 30px; } }
/* M1 — the label lands again on every grade change. CSS only: three names, so the animation restarts. */
@media (prefers-reduced-motion: no-preference) {
  #grade-1:checked ~ .gs-plate .label { animation: label-land-1 .26s var(--ease); }
  #grade-2:checked ~ .gs-plate .label { animation: label-land-2 .26s var(--ease); }
  #grade-3:checked ~ .gs-plate .label { animation: label-land-3 .26s var(--ease); }
  @keyframes label-land-1 { from { transform: translateY(5px) scale(.985); } }
  @keyframes label-land-2 { from { transform: translateY(5px) scale(.985); } }
  @keyframes label-land-3 { from { transform: translateY(5px) scale(.985); } }
}

/* Windows High Contrast: backgrounds and shadows are not painted, borders are */
@media (forced-colors: active) {
  .seg-btn + .seg-btn { border-left: 2px solid CanvasText; }
  #grade-1:checked ~ .gs-seg label[for="grade-1"],
  #grade-2:checked ~ .gs-seg label[for="grade-2"],
  #grade-3:checked ~ .gs-seg label[for="grade-3"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}

.gd { display: none; }
#grade-1:checked ~ .gs-details #gd-1,
#grade-2:checked ~ .gs-details #gd-2,
#grade-3:checked ~ .gs-details #gd-3 { display: block; opacity: 1; transition: opacity var(--t-slow) var(--ease); }
@starting-style {
  #grade-1:checked ~ .gs-details #gd-1,
  #grade-2:checked ~ .gs-details #gd-2,
  #grade-3:checked ~ .gs-details #gd-3 { opacity: 0; }
}
.gs-details { min-height: 300px; }
.gd-name {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--display);
  font-variation-settings: 'SOFT' 14, 'WONK' 1;
  font-weight: 600;
  font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem);
  line-height: 1.1;
  margin: 0 0 14px;
}
.gd-notes { margin: 0 0 16px; max-width: 36ch; }
.gd-spec { margin: 0; color: var(--muted); font-size: .9375rem; }
.gd-price { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; margin: 18px 0 22px; }

@media (min-width: 860px) {
  .grade-switcher { grid-template-rows: auto 1fr; row-gap: 32px; }
  .gs-seg { grid-column: 1 / span 5; grid-row: 1; }
  .gs-details { grid-column: 1 / span 5; grid-row: 2; }
  .gs-plate { grid-column: 6 / -1; grid-row: 1 / span 2; }
  .gs-plate .plate-inner { min-height: 470px; }
  .gs-plate .label { width: min(100%, 340px); padding: 30px 24px 24px; gap: 14px; }
  .gs-plate .label-swatch { height: 38px; margin-inline: -24px; }
}

/* D3 (DRAMA v7) — the section takes the colour of the syrup in the jug. Tokens are re-scoped per grade, so the type,
   the switcher, the chips and the button follow by themselves; every pair is measured (.qa/contrast.js).
   The label stays a cream card with ink type: it is the object, the section is the light it stands in.
   Without :has() the section simply stays paper. */
#harvest { background: var(--bg); color: var(--fg); transition: background-color .45s var(--ease), color .45s var(--ease); }
#harvest:has(#grade-1:checked) { --bg: #F7E9C8; --bg-2: #EEDCB0; --accent-text: #A33308; }
#harvest:has(#grade-2:checked) {
  --bg: #D99A3E; --bg-2: #CC8B2E; --muted: #3A332C; --accent: var(--ink); --accent-text: var(--ink); --ok: #143527;
  --rule: rgba(28, 25, 23, .62); --rule-soft: rgba(28, 25, 23, .3); --cool: rgba(28, 25, 23, .5);
}
#harvest:has(#grade-3:checked) {
  --bg: #4A2611; --bg-2: #3B1D0B; --fg: var(--cream); --muted: rgba(251, 247, 238, .8); --accent: var(--gold); --on-accent: var(--ink);
  --seg: var(--cream); --seg-ink: #4A2611;
  --accent-text: #E9A23B; --ok: #CFE3D4; --rule: rgba(251, 247, 238, .5); --rule-soft: rgba(251, 247, 238, .28); --focus: var(--gold);
}
.gs-plate .label { --fg: var(--ink); --muted: #57534E; --rule-soft: rgba(28, 25, 23, .22); color: var(--fg); }
/* on the dark ground the chosen segment is cream, so its focus ring must be ink (gold on cream is 2.4:1) */
@supports selector(:has(a)) { #grade-3:checked:focus-visible ~ .gs-seg label[for="grade-3"] { outline-color: var(--ink); } }

/* harvest is two snap pages now: switcher, then "Beyond syrup" + order strip */
.harvest { padding-bottom: 40px; }
.shelf-page { padding-top: 40px; }
@media (min-width: 860px) { .harvest { padding-bottom: 72px; } .shelf-page { padding-top: 72px; } }
.shelf { align-items: start; }
.shelf-order { display: grid; gap: 16px; justify-items: start; margin-top: 28px; }
@media (min-width: 860px) {
  /* the order block fills the otherwise empty left column, under the title (CLARITY v5 2.7) */
  .shelf { grid-template-rows: auto 1fr; }
  .shelf .spec-list { grid-column: 5 / -1; grid-row: 1 / span 2; }
  .shelf-order { grid-column: 1 / span 4; grid-row: 2; margin-top: 12px; }
}
.shelf-title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-bottom: 6px; }

/* 40 : 1 as a count you can see: forty rings of sap in an 8 × 5 block, one of them the gallon of syrup.
   On hover the rings fade and the one stays. (The single row of forty drops read as an ornament — owner, 20 Sep.) */
.drops { position: relative; width: 136px; height: 80px; margin: 0 0 14px; }
.drops::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 0 3.5px, var(--on-dark) 4px 5px, transparent 5.5px) 0 0 / 17px 16px;
  opacity: .6;
  transition: opacity var(--t-slow) var(--ease);
}
.drops span { position: absolute; right: 3px; bottom: 2.5px; width: 11px; height: 11px; border-radius: 50%; background: var(--accent-on-dark); }
.hero-plate:hover .drops::before { opacity: .2; }
/* small plates (phones, the 680 tier): the same block on a 13 × 12 cell */
@media (max-width: 859px), (min-width: 64rem) and (max-height: 680px) {
  .drops { width: 104px; height: 60px; margin-bottom: 10px; }
  .drops::before { background: radial-gradient(circle at center, transparent 0 2.5px, var(--on-dark) 3px 4px, transparent 4.5px) 0 0 / 13px 12px; }
  .drops span { right: 2px; bottom: 1.5px; width: 9px; height: 9px; }
}

/* ---------- 3 · THREE GENERATIONS (dark) ---------- */
.story .quote-pull { margin-top: 36px; }
.story-copy .note { margin-top: 24px; }

/* ---------- 4 · VISIT ---------- */
.visit-grid { align-items: start; }
.visit .panel .price { margin: 4px 0 20px; }
.reserve-alt { margin: 16px 0 10px; color: var(--fg); }
.reserve-alt a { display: inline-block; color: var(--accent-text); font-weight: 600; padding: 13px 2px; margin: -13px -2px; }

/* ---------- 5 · THE RHYTHM OF THE SEASON ---------- */
.tl-axis { display: block; height: 1px; background: var(--cool, var(--rule)); transform-origin: left center; }
.tl-items { list-style: none; margin: 0; padding: 0; display: grid; }
.tl-item { padding: 22px 0; border-bottom: 1px solid var(--rule-soft); }
.tl-item p { margin: 0 0 6px; }
.tl-item .tl-text { margin: 0; color: var(--muted); max-width: 40ch; }
/* "you are here": micro.js marks the season the visitor's calendar is in — the same clock as the hero's "Right now" line */
.tl-item.is-now .h3 { color: var(--accent-text); }
.tl-item.is-now::before { transform: scale(1.9); }   /* the tick on the axis, where there is one (desktop) */
.tl-item.is-now .mono::after { content: "  ·  now"; content: "  ·  now" / ", now"; color: var(--fg); }
@media (min-width: 860px) {
  .tl-items { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tl-item { position: relative; padding: 30px 28px 0 0; border-bottom: 0; }
  .tl-item + .tl-item { padding-left: 28px; border-left: 1px solid var(--rule-soft); }
  .tl-item::before {           /* square tick on the axis */
    content: "";
    position: absolute;
    top: -5px; left: 0;
    width: 9px; height: 9px;
    background: var(--accent);
  }
  .tl-item + .tl-item::before { left: -5px; }
}

/* ---------- 6 · FIND US ---------- */
.find-stand .btn { margin: 6px 0 12px; }
.find-h { margin-bottom: 16px; }

/* ---------- short laptop screens: every section is one page (see ../components.css) ---------- */
@media (min-width: 64rem) and (max-height: 900px) {
  .gs-plate .plate-inner { min-height: 400px; }
  .gs-details { min-height: 0; }
}
@media (min-width: 64rem) and (max-height: 780px) {
  .grade-switcher { row-gap: 20px; }
  .gs-plate .plate-inner { min-height: 320px; }
  .gs-plate .label { width: min(100%, 300px); padding: 22px 20px 18px; gap: 10px; }
  .gs-plate .label-swatch { height: 28px; margin-inline: -20px; }
  .seg-btn { min-height: 56px; }
  .gd-name { margin-bottom: 8px; }
  .gd-notes { margin-bottom: 10px; }
  .gd-price { margin: 10px 0 14px; }
  .story .quote-pull { margin-top: 20px; font-size: 2.5rem; }
  .signature { margin-top: 10px; }
  .signature svg { width: 140px; }
  .find-stand .btn { margin: 2px 0 8px; }
}
@media (min-width: 64rem) and (max-height: 680px) {
  .hero-grid { padding-top: 16px; }
  .hero { padding-bottom: 40px; }
  .season-line { margin-bottom: 8px; }
  .hero .lead { margin-bottom: 16px; }
  .hero-plate .plate-inner { --ar: 4 / 3; }
  .hero-plate .poster-big { font-size: min(38cqw, 15rem); }   /* three rows in a 4/3 plate (.qa/poster-fit.js) */
  .gs-plate .plate-inner { min-height: 232px; padding-block: 14px; }
  .gs-plate .label { width: min(100%, 270px); padding: 16px 16px 14px; gap: 8px; }
  .gs-plate .label-name { font-size: 1.75rem; }
  .gs-plate .label-swatch { height: 22px; margin-inline: -16px; }
  .gd-name { font-size: 1.5rem; }
  .gd-notes { font-size: 1rem; }
  .story .quote-pull { margin-top: 12px; font-size: 2rem; }
  .story-copy p { margin-bottom: 12px; }
  .story-copy .note { margin-top: 2px; }
  .signature { grid-auto-flow: column; align-items: center; gap: 14px; margin-top: 0; }
  .signature svg { width: 78px; }
  .signature .mono { display: none; }
  .story .sec-title { font-size: 1.875rem; }
  .story-copy p { margin-bottom: 8px; }
  .story .stat-band { margin-top: 12px; }
  .story .stat { padding-block: 8px; }
  .seg-btn { min-height: 50px; }
  .grade-switcher { row-gap: 12px; }
  .gs-seg p { margin-bottom: 6px; }
  .gd-name { margin-bottom: 4px; }
  .gd-price { margin: 8px 0 12px; }
  .find-stand p { margin-bottom: .6em; }
  .find-h { margin-bottom: 8px; }
}