/*
 * Caldermoor: layout and components. Every value is a --s-* token from tokens.css.
 * Namespace: .cm-*. Two registers: chalk (top of the page) and lees (.cm-lees, from
 * The cellar to the footer: the page darkens once and never comes back up).
 * Order: fonts · base · chrome · arrival · slope · descent · year · lees register
 * (cellar, wines, visit, write) · footer · tablet · phone · reduced motion.
 */

/* ---- Fonts (SIL OFL; subset WOFF2; Gloock has no italic or bold) --------------------- */
@font-face {
    font-family: "Gloock";
    src: url("fonts/gloock-latin.woff2") format("woff2");
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Albert Sans";
    src: url("fonts/albertsans-latin-var.woff2") format("woff2");
    font-weight: 400 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Albert Sans";
    src: url("fonts/albertsans-italic-latin.woff2") format("woff2");
    font-weight: 400; font-style: italic; font-display: swap;
}

/* ---- Base ------------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body.cm {
    margin: 0;
    background: var(--s-bg); color: var(--s-text);
    font: var(--s-weight-regular) var(--s-size-body)/var(--s-leading-body) var(--s-font-body);
    font-synthesis: var(--s-font-synthesis);
    -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
picture { display: contents; }
figure { margin: 0; }
p, h1, h2, h3, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
abbr[title] { text-decoration: none; }
:focus-visible { outline: var(--s-focus-w) solid var(--s-focus); outline-offset: var(--s-focus-offset); }
/* Every anchor lands clear of the sticky nav (the ribbon scrolls away above it). */
[id] { scroll-margin-top: var(--s-anchor-offset); }

.cm-sr {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.cm-skip {
    position: absolute; left: var(--s-gutter); top: var(--s-space-xs); z-index: var(--s-z-skip);
    padding: var(--s-space-xs) var(--s-space-s);
    background: var(--s-btn-bg); color: var(--s-btn-text);
    transform: translateY(-200%);
}
.cm-skip:focus { transform: none; }

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

/* Figures: Gloock with tabular figures (Albert Sans has none: see PAIR-NOTES). */
.cm-figs { font-family: var(--s-font-display); font-weight: var(--s-weight-regular); font-variant-numeric: var(--s-numeric); }
.cm-unit { font-family: var(--s-font-body); font-size: var(--s-size-unit); margin-left: var(--s-unit-gap); }
.cm-nowrap { white-space: nowrap; }

.cm-micro {
    font: var(--s-weight-semi) var(--s-size-micro)/var(--s-leading-tight) var(--s-font-body);
    letter-spacing: var(--s-track-micro); text-transform: uppercase;
    color: var(--s-text-muted);
}
.cm-kicker {
    font: var(--s-weight-semi) var(--s-size-micro)/var(--s-leading-tight) var(--s-font-body);
    letter-spacing: var(--s-track-micro); text-transform: uppercase;
    color: var(--s-oak-deep);
    margin-bottom: var(--s-space-s);
}
.cm-h2 {
    font: var(--s-weight-regular) var(--s-size-h2)/var(--s-leading-display) var(--s-font-display);
    letter-spacing: var(--s-track-display);
    text-wrap: balance;
}
.cm-h3 { font: var(--s-weight-regular) var(--s-size-h3)/var(--s-leading-tight) var(--s-font-display); }
.cm-lede { font-size: var(--s-size-lede); line-height: var(--s-leading-body); max-width: var(--s-measure-body); text-wrap: pretty; }
.cm-body { max-width: var(--s-measure-body); text-wrap: pretty; }
.cm-body + .cm-body { margin-top: var(--s-space-s); }

/* The arch: the brand shape, used exactly three times: hero photo, cellar photo, primary button.
   border-radius R R 0 0 with R = 100vmax clamps to a semicircle (photos) or a tombstone (buttons). */
.cm-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: var(--s-btn-h); min-width: var(--s-tap);
    padding: var(--s-btn-pad-top) var(--s-btn-pad-x) 0;
    border: 0; border-radius: var(--s-arch-radius) var(--s-arch-radius) 0 0;
    background: var(--s-btn-bg); color: var(--s-btn-text);
    font: var(--s-weight-semi) var(--s-size-small)/var(--s-leading-tight) var(--s-font-body);
    text-decoration: none; cursor: pointer;
    transition: background-color var(--s-dur-fast) var(--s-ease);
}
.cm-btn:hover { background: var(--s-btn-bg-hover); }
.cm-btn--block { width: 100%; }

.cm-link {
    display: inline-flex; align-items: center; min-height: var(--s-tap);
    color: inherit; text-decoration-line: underline;
    text-decoration-thickness: var(--s-link-underline);
    text-underline-offset: var(--s-link-underline-offset);
    text-decoration-color: var(--s-oak);
    transition: text-decoration-thickness var(--s-dur-fast) var(--s-ease);
}
.cm-link:hover { text-decoration-thickness: var(--s-link-underline-hover); }

.cm-arch { position: relative; overflow: hidden; border-radius: var(--s-arch-radius) var(--s-arch-radius) 0 0; background: var(--s-chalk-deep); }
.cm-arch img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Chrome: sticky nav (the ribbon scrolls away above it) ------------------------------ */
.cm-nav {
    position: sticky; top: 0; z-index: var(--s-z-nav);
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-space-m);
    height: var(--s-nav-h); padding-inline: var(--s-gutter);
    background: var(--s-bg); color: var(--s-text);
    border-bottom: var(--s-hairline) solid var(--s-rule);
    transition: background-color var(--s-dur-base) var(--s-ease), color var(--s-dur-base) var(--s-ease);
}
.cm-logo {
    display: inline-flex; align-items: center; min-height: var(--s-tap);
    font: var(--s-weight-regular) var(--s-size-logo)/var(--s-leading-solid) var(--s-font-display);
    letter-spacing: var(--s-track-logo); text-decoration: none; color: inherit;
}
.cm-logo--static { min-height: 0; }
.cm-nav .cm-logo { transition: opacity var(--s-dur-nav-mark) var(--s-ease); }
.cm-nav.is-mark-hidden .cm-logo:not(:focus-visible) { opacity: var(--s-nav-mark-hidden-opacity); }
.cm-nav__links ul { display: flex; justify-content: center; gap: var(--s-space-l); }
.cm-nav__links a {
    display: inline-flex; align-items: center; min-height: var(--s-tap);
    font-size: var(--s-size-nav); text-decoration: none;
    background: linear-gradient(var(--s-oak), var(--s-oak)) no-repeat 0 100%;
    background-size: 0 var(--s-hairline);
    transition: background-size var(--s-dur-base) var(--s-ease);
}
.cm-nav__links a:hover { background-size: 100% var(--s-hairline); }
.cm-btn--nav { align-self: end; }
.cm-nav__menu {
    display: none; align-items: center; gap: var(--s-space-xs);
    min-height: var(--s-tap); min-width: var(--s-tap); padding: 0 var(--s-space-2xs);
    border: 0; background: none; color: inherit; cursor: pointer;
    font: var(--s-weight-medium) var(--s-size-nav)/var(--s-leading-tight) var(--s-font-body);
}
.cm-nav__menu-lines {
    display: block; width: var(--s-burger-w); height: var(--s-hairline);
    background: currentColor; box-shadow: 0 var(--s-burger-gap) 0 currentColor;
    transform: translateY(calc(-0.5 * var(--s-burger-gap)));
}

/* On the lees register the nav goes dark with the page. */
.cm-nav.is-lees { background: var(--s-lees-bg); color: var(--s-lees-text); border-bottom-color: var(--s-lees-rule); }
.cm-nav.is-lees .cm-btn { background: var(--s-btn-lees-bg); color: var(--s-btn-lees-text); }
.cm-nav.is-lees .cm-btn:hover { background: var(--s-btn-lees-bg-hover); }
.cm-nav.is-lees :focus-visible { outline-color: var(--s-lees-focus); }

/* Phone menu: a full-screen chalk sheet listing every section. */
.cm-sheet {
    width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0;
    border: 0; background: var(--s-bg); color: var(--s-text);
}
.cm-sheet::backdrop { background: var(--s-lees); }
.cm-sheet[open] { animation: cm-sheet-in var(--s-dur-sheet) var(--s-ease-wine); }
@keyframes cm-sheet-in { from { transform: translateY(var(--s-space-l)); opacity: 0; } }
.cm-sheet__inner {
    display: flex; flex-direction: column; gap: var(--s-space-l);
    min-height: 100%; padding: var(--s-space-s) var(--s-gutter) var(--s-space-l);
}
.cm-sheet__top { display: flex; align-items: center; justify-content: space-between; border-bottom: var(--s-hairline) solid var(--s-rule); padding-bottom: var(--s-space-s); }
.cm-sheet__close {
    min-height: var(--s-tap); min-width: var(--s-tap); padding: 0 var(--s-space-2xs);
    border: 0; background: none; color: inherit; cursor: pointer;
    font: var(--s-weight-medium) var(--s-size-nav)/var(--s-leading-tight) var(--s-font-body);
    text-decoration: underline; text-decoration-color: var(--s-oak); text-underline-offset: var(--s-link-underline-offset);
}
.cm-sheet nav { flex: 1; }
.cm-sheet__list { counter-reset: cm-sheet; }
.cm-sheet__list li { counter-increment: cm-sheet; border-bottom: var(--s-hairline) solid var(--s-rule-soft); }
.cm-sheet__list a {
    display: flex; align-items: baseline; gap: var(--s-space-s);
    min-height: var(--s-row-h); padding-block: var(--s-space-xs);
    font: var(--s-weight-regular) var(--s-size-h3)/var(--s-leading-tight) var(--s-font-display);
    text-decoration: none;
}
.cm-sheet__list a::before {
    content: counter(cm-sheet, upper-roman);
    min-width: var(--s-tap);
    font: var(--s-weight-semi) var(--s-size-micro)/var(--s-leading-tight) var(--s-font-body);
    letter-spacing: var(--s-track-micro); color: var(--s-oak-deep);
}

/* ---- 1 · Arrival: the estate label ----------------------------------------------------- */
.cm-arrival {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    column-gap: var(--s-arrival-col-gap);
    max-width: calc(var(--s-max) + 2 * var(--s-gutter)); margin-inline: auto;
    padding: var(--s-arrival-pad-top) var(--s-gutter) var(--s-arrival-pad-bottom);
}
.cm-wordmark {
    grid-column: 1 / -1; grid-row: 1; z-index: var(--s-z-wordmark);
    font: var(--s-weight-regular) var(--s-size-wordmark)/var(--s-leading-solid) var(--s-font-display);
    letter-spacing: var(--s-track-wordmark);
    text-align: center; white-space: nowrap; color: var(--s-ink);
    text-box: trim-both cap alphabetic;
}
.cm-wordmark__letters span { display: inline-block; }
.cm-arch--hero {
    grid-column: 2; grid-row: 1 / -1; z-index: var(--s-z-arch);
    align-self: start;
    /* 1cap is Gloock's cap height at the wordmark size: the arch covers only the lower
       --s-wordmark-overlap of the letters, so the whole word reads. */
    font: var(--s-weight-regular) var(--s-size-wordmark)/var(--s-leading-solid) var(--s-font-display);
    margin-top: calc((1 - var(--s-wordmark-overlap)) * 1cap);
    height: min(var(--s-arch-h), calc(var(--s-arrival-h) - var(--s-arrival-pad-top) - var(--s-arrival-pad-bottom) - (1 - var(--s-wordmark-overlap)) * 1cap));
    aspect-ratio: var(--s-photo-ratio-card);
    box-shadow: 0 0 0 var(--s-hairline) var(--s-oak);
}
.cm-arch--hero img { object-position: var(--s-hero-pos); }
.cm-arrival__tag {
    grid-row: 2; grid-column: 1; align-self: start;
    display: flex; align-items: center; gap: var(--s-space-xs);
    margin-top: var(--s-space-l); color: var(--s-oak-deep);
}
.cm-arrival__tag::before { content: ""; width: var(--s-tag-rule-w); height: var(--s-hairline); background: var(--s-oak); }
.cm-arrival__tag--right { grid-column: 3; justify-self: end; flex-direction: row-reverse; }
/* Left margin, top to bottom: the line, the intro, the actions, then the release on the arch's baseline. */
.cm-arrival__lead {
    grid-row: 3; grid-column: 1;
    display: flex; flex-direction: column; align-items: flex-start;
    margin-top: var(--s-space-l);
}
.cm-arrival__line {
    font: var(--s-weight-regular) var(--s-size-arrival-line-lg)/var(--s-leading-tight) var(--s-font-display);
    max-width: var(--s-arrival-line-measure);
    color: var(--s-ink); text-wrap: balance;
}
.cm-arrival__intro {
    margin-top: var(--s-space-m); max-width: var(--s-arrival-intro-measure);
    color: var(--s-ink-soft); text-wrap: pretty;
}
.cm-arrival__actions { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s-space-xs) var(--s-space-m); margin-top: var(--s-space-l); }
.cm-arrival__short { display: none; }
/* The current release sits on the arch's baseline, mirroring the figures column's last rule. */
.cm-arrival__release {
    margin-top: auto; padding-top: var(--s-space-m); align-self: stretch;
    display: flex; align-items: center; gap: var(--s-space-xs);
    color: var(--s-oak-deep);
}
.cm-arrival__release::before { content: ""; width: var(--s-tag-rule-w); height: var(--s-hairline); background: var(--s-oak); flex: none; }

.cm-facts { display: grid; }
.cm-fact { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--s-space-2xs); }
.cm-fact dt { font: var(--s-weight-semi) var(--s-size-micro)/var(--s-leading-tight) var(--s-font-body); letter-spacing: var(--s-track-micro); text-transform: uppercase; color: var(--s-text-muted); }
.cm-fact dd { line-height: var(--s-leading-solid); white-space: nowrap; }
/* Right margin: the estate's figures as a cellar-book column: figure left, label right, an oak
   hairline between rows; the rows share the arch's height and the last rule is its baseline. */
.cm-facts--arrival {
    grid-row: 3; grid-column: 3;
    grid-auto-rows: minmax(0, 1fr);
    margin-top: var(--s-space-l);
    border-bottom: var(--s-hairline) solid var(--s-rule);
}
.cm-facts--arrival .cm-fact {
    display: grid; grid-template-columns: var(--s-arrival-fact-cols); align-items: baseline;
    column-gap: var(--s-space-m);
    padding-block: var(--s-arrival-fact-row-pad);
    border-top: var(--s-hairline) solid var(--s-rule);
}
.cm-facts--arrival dd { grid-column: 1; grid-row: 1; font-size: var(--s-size-figure); color: var(--s-ink); }
.cm-facts--arrival dt { grid-column: 2; grid-row: 1; text-align: right; }

/* ---- 2 · The slope ---------------------------------------------------------------------- */
.cm-slope__photo { position: relative; height: var(--s-slope-h); overflow: hidden; background: var(--s-chalk-deep); }
.cm-slope__photo img {
    position: absolute; left: 0; top: calc(-1 * var(--s-parallax-slope));
    width: 100%; height: calc(100% + 2 * var(--s-parallax-slope));
    object-fit: cover; object-position: var(--s-slope-pos);
}
.cm-slope__body {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-space-xl);
    padding-block: var(--s-space-xl) var(--s-section);   /* the title belongs to the photo above it */
}
.cm-slope__body .cm-lede { align-self: end; }
/* The slope's four figures as one sentence, set like a survey caption under the panorama. */
.cm-slope__survey {
    max-width: var(--s-measure-survey);
    padding-block: var(--s-space-m);
    border-bottom: var(--s-hairline) solid var(--s-rule);
    font-size: var(--s-size-lede); line-height: var(--s-leading-caption);
    color: var(--s-ink); text-wrap: pretty;
}

/* ---- 3 · The Descent -------------------------------------------------------------------- */
.cm-descent { padding-bottom: var(--s-section); }
.cm-descent__head {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-space-xl);
    padding-bottom: var(--s-space-xl); align-items: end;
}
.cm-descent__static-note { margin-top: var(--s-space-s); color: var(--s-oak-deep); }

/* The static core sample (no JS, reduced motion): four layers in one column, joined by the gauge. */
.cm-gauge, .cm-readout { display: none; }
.cm-descent__layers { display: grid; justify-content: center; }
.cm-layer {
    position: relative;
    display: grid; grid-template-columns: var(--s-gauge-col) minmax(0, var(--s-descent-static-w)) minmax(0, var(--s-measure-caption));
    column-gap: var(--s-space-l);
}
.cm-layer + .cm-layer::after { /* a stratum line across the core at each boundary */
    content: ""; position: absolute; top: 0; right: 0; left: calc(var(--s-gauge-col) - var(--s-space-xs));
    height: var(--s-hairline); background: var(--s-rule);
}
.cm-layer::before { /* the gauge line, continuous down the core */
    content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--s-gauge-col) - var(--s-space-xs));
    width: var(--s-gauge-w); background: var(--s-oak);
}
.cm-layer__read {
    position: relative;
    display: grid; align-content: start; justify-items: end; gap: var(--s-space-2xs);
    padding: var(--s-space-s) var(--s-space-l) 0 0; text-align: right;
}
.cm-layer__read::after { /* the tick */
    content: ""; position: absolute; top: calc(var(--s-space-s) + var(--s-space-xs)); right: calc(var(--s-space-xs) - var(--s-gauge-tick));
    width: var(--s-gauge-tick); height: var(--s-gauge-w); background: var(--s-oak);
}
.cm-layer__depth { font-size: var(--s-size-figure-sm); line-height: var(--s-leading-solid); color: var(--s-ink); }
.cm-layer__temp { font-size: var(--s-size-figure-sm); line-height: var(--s-leading-solid); color: var(--s-oak-deep); }
.cm-layer__photo { aspect-ratio: var(--s-descent-static-ratio); overflow: hidden; background: var(--s-chalk-deep); }
.cm-layer__photo img { width: 100%; height: 100%; object-fit: cover; }
.cm-layer__caption {
    align-self: start; padding-block: var(--s-space-s) var(--s-space-m);
    font: var(--s-weight-regular) var(--s-size-caption)/var(--s-leading-caption) var(--s-font-display);
    color: var(--s-ink); text-wrap: pretty;
}

/* Live (site.js adds .is-live when motion is allowed): one pinned card, gauge left, readout right. */
.cm-descent.is-live .cm-descent__static-note { display: none; }
.cm-descent.is-live .cm-descent__pin { height: calc(100vh - var(--s-nav-h)); height: calc(100svh - var(--s-nav-h)); display: flex; align-items: center; }
.cm-descent.is-live .cm-descent__frame {
    display: grid;
    grid-template-columns: var(--s-gauge-col) auto minmax(0, var(--s-readout-w));
    grid-template-rows: auto minmax(0, 1fr);
    justify-content: center;
    column-gap: var(--s-space-xl);
    height: min(var(--s-descent-card-h), var(--s-descent-card-max));
}
.cm-descent.is-live .cm-descent__layers,
.cm-descent.is-live .cm-layer { display: contents; }
.cm-descent.is-live .cm-layer::before,
.cm-descent.is-live .cm-layer::after,
.cm-descent.is-live .cm-layer__read { display: none; }
.cm-descent.is-live .cm-layer__photo {
    grid-column: 2; grid-row: 1 / -1;
    height: 100%; aspect-ratio: var(--s-photo-ratio-card);
}
.cm-descent.is-live .cm-layer + .cm-layer .cm-layer__photo { clip-path: var(--s-clip-from); }
.cm-descent.is-live .cm-layer__caption {
    grid-column: 3; grid-row: 2; align-self: start;
    max-width: var(--s-measure-caption); padding: 0; margin-top: var(--s-space-l);
    opacity: 0; transition: opacity var(--s-caption-fade) var(--s-ease);
}
.cm-descent.is-live .cm-layer.is-active .cm-layer__caption { opacity: 1; }

.cm-descent.is-live .cm-gauge {
    grid-column: 1; grid-row: 1 / -1;
    display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--s-space-l);
}
.cm-gauge__label { max-width: var(--s-gauge-col); text-align: right; }
.cm-gauge__ticks {
    position: relative; display: flex; flex-direction: column; justify-content: space-between;
    border-right: var(--s-gauge-w) solid var(--s-oak);
}
.cm-gauge__tick {
    display: flex; align-items: center; justify-content: flex-end; gap: var(--s-space-xs);
    height: 0; color: var(--s-text-muted); transition: color var(--s-dur-base) var(--s-ease);
}
.cm-gauge__tick::after { content: ""; width: var(--s-gauge-tick); height: var(--s-gauge-w); background: var(--s-oak); transition: width var(--s-dur-base) var(--s-ease); }
.cm-gauge__tick span { font-size: var(--s-size-figure-sm); line-height: var(--s-leading-solid); }
.cm-gauge__tick.is-active { color: var(--s-ink); }
.cm-gauge__tick.is-active::after { width: var(--s-gauge-tick-major); }
.cm-gauge__marker {
    position: absolute; top: 0; bottom: 0;
    right: calc(-0.5 * var(--s-gauge-dot) - 0.5 * var(--s-gauge-w)); width: var(--s-gauge-dot);
    pointer-events: none;
}
.cm-gauge__marker::before {
    content: ""; position: absolute; left: 0; top: calc(var(--s-gauge-progress) * 100%);
    width: var(--s-gauge-dot); height: var(--s-gauge-dot); margin-top: calc(-0.5 * var(--s-gauge-dot));
    border-radius: 50%; background: var(--s-claret);
}
.cm-gauge__now { display: none; }

.cm-descent.is-live .cm-readout {
    grid-column: 3; grid-row: 1; align-self: start;
    display: grid; gap: var(--s-space-xs);
}
.cm-readout__temp { font-size: var(--s-size-figure-xl); line-height: var(--s-leading-solid); color: var(--s-ink); }
.cm-readout__depth { display: flex; align-items: baseline; gap: var(--s-space-xs); font-size: var(--s-size-figure-sm); color: var(--s-text-muted); }
.cm-readout__layer { color: var(--s-oak-deep); }

/* ---- 4 · The year in the vines ------------------------------------------------------- */
.cm-year { padding-block: var(--s-section); background: var(--s-bg); }
/* Descent and year share the chalk: one section gap between them, not two. */
.cm-descent + .cm-year { padding-top: 0; }
.cm-year__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-space-xl); align-items: end; padding-bottom: var(--s-space-xl); }
.cm-ruler-bar { background: var(--s-bg); }
.cm-ruler-wrap { position: relative; }
.cm-ruler {
    position: relative;
    display: grid; grid-template-columns: repeat(var(--s-ruler-cols), minmax(0, 1fr)); column-gap: var(--s-space-m);
    border-top: var(--s-hairline) solid var(--s-rule); border-bottom: var(--s-hairline) solid var(--s-rule-soft);
}
.cm-ruler__month {
    position: relative; padding-block: var(--s-space-xs);
    font: var(--s-weight-semi) var(--s-size-micro)/var(--s-leading-tight) var(--s-font-body);
    letter-spacing: var(--s-track-micro); color: var(--s-text-muted);
}
.cm-ruler__month::before { /* a cellar-book tick at each month */
    content: ""; position: absolute; left: 0; top: calc(-1 * var(--s-hairline)); width: var(--s-hairline); height: var(--s-space-2xs); background: var(--s-oak);
}
.cm-ruler__month.has-moment { color: var(--s-ink); }
.cm-ruler__month.has-moment abbr::after {
    content: ""; display: inline-block; vertical-align: middle;
    width: var(--s-ruler-dot); height: var(--s-ruler-dot); margin-left: var(--s-space-2xs);
    border-radius: 50%; background: var(--s-oak);
}
.cm-ruler__marker {
    position: absolute; left: 0; bottom: calc(-1 * var(--s-hairline));
    width: calc((100% - (var(--s-ruler-cols) - 1) * var(--s-space-m)) / var(--s-ruler-cols));
    height: var(--s-ruler-marker-h); background: var(--s-olive);
    transform: translateX(calc((var(--s-ruler-active) - 1) * (100% + var(--s-space-m))));
    transition: transform var(--s-dur-marker) var(--s-ease-wine);
}
.cm-year__count { display: none; }

.cm-moments {
    display: flex; align-items: flex-start; gap: var(--s-space-m);
    padding-top: var(--s-space-m);
}
.cm-moments:focus-visible { outline-offset: var(--s-space-xs); }
.cm-moment {
    flex: var(--s-moment-grow) 1 0; min-width: 0;
    display: flex; flex-direction: column;
}
/* The harvest is the page's hour: twice the width of the other moments, at 4:5. */
.cm-moment.is-feature { flex-grow: var(--s-moment-grow-feature); }
.cm-moment.is-feature .cm-moment__photo { aspect-ratio: var(--s-photo-ratio-lees); }
.cm-moment__photo { aspect-ratio: var(--s-photo-ratio-card); overflow: hidden; background: var(--s-chalk-deep); }
.cm-moment__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--s-dur-slow) var(--s-ease-wine); }
.cm-moment:hover .cm-moment__photo img { transform: scale(var(--s-hero-scale-from)); }
.cm-moment__month {
    order: -1; margin-bottom: var(--s-space-xs); padding-top: var(--s-space-2xs);
    border-top: var(--s-ruler-marker-h) solid transparent; color: var(--s-oak-deep);
}
.cm-moment.is-active .cm-moment__month { border-top-color: var(--s-olive); }
/* Desktop ruler: each card carries its own stretch of the year on top, so the ruler cell is
   exactly as wide as the card. Rules bridge the gaps; the olive bar marks the active card. */
.cm-moment__span {
    order: -2; position: relative; display: flex; margin-bottom: var(--s-space-s);
    border-top: var(--s-hairline) solid var(--s-rule); border-bottom: var(--s-hairline) solid var(--s-rule-soft);
}
.cm-moment:not(:last-child) .cm-moment__span { margin-right: calc(-1 * var(--s-space-m)); padding-right: var(--s-space-m); }
.cm-moment__span::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: calc(-1 * var(--s-hairline));
    height: var(--s-ruler-marker-h); background: var(--s-olive);
    transform: scaleX(0); transform-origin: left center;
    transition: transform var(--s-dur-marker) var(--s-ease-wine);
}
.cm-moment:not(:last-child) .cm-moment__span::after { right: var(--s-space-m); }
.cm-moment.is-active .cm-moment__span::after { transform: scaleX(1); }
.cm-moment__mo {
    flex: 1 1 0; position: relative; padding-block: var(--s-space-xs);
    font: var(--s-weight-semi) var(--s-size-micro)/var(--s-leading-tight) var(--s-font-body);
    letter-spacing: var(--s-track-micro); color: var(--s-text-muted);
}
.cm-moment__mo::before { content: ""; position: absolute; left: 0; top: calc(-1 * var(--s-hairline)); width: var(--s-hairline); height: var(--s-space-2xs); background: var(--s-oak); }
.cm-moment__mo.is-own { color: var(--s-ink); }
.cm-moment__mo.is-own::after {
    content: ""; display: inline-block; vertical-align: middle;
    width: var(--s-ruler-dot); height: var(--s-ruler-dot); margin-left: var(--s-space-2xs);
    border-radius: 50%; background: var(--s-oak);
}
.cm-moment.is-active .cm-moment__mo.is-own { color: var(--s-olive); }
@media (min-width: 768px) {
    .cm-ruler-bar { display: none; }
    .cm-moment__month, .cm-moment.is-active .cm-moment__month { border-top: 0; padding-top: 0; }
}
.cm-moment__title { order: 1; }
.cm-moment__note { order: 2; }
.cm-moment.is-active .cm-moment__month { color: var(--s-olive); }
.cm-moment__title { margin-top: var(--s-space-s); font: var(--s-weight-regular) var(--s-size-figure-sm)/var(--s-leading-tight) var(--s-font-display); }
.cm-moment__note { margin-top: var(--s-space-2xs); font-size: var(--s-size-small); color: var(--s-text-muted); text-wrap: pretty; }

/* ---- The lees register (cellar → footer) ----------------------------------------------- */
.cm-lees { background: var(--s-lees-bg); color: var(--s-lees-text); }
.cm-lees :focus-visible, .cm-foot :focus-visible { outline-color: var(--s-lees-focus); }
.cm-lees .cm-kicker, .cm-lees .cm-micro { color: var(--s-oak-light); }
.cm-lees .cm-fact dt { color: var(--s-lees-muted); }
.cm-lees .cm-btn { background: var(--s-btn-lees-bg); color: var(--s-btn-lees-text); }
.cm-lees .cm-btn:hover { background: var(--s-btn-lees-bg-hover); }

/* 5 · The cellar */
.cm-cellar { padding-block: var(--s-section); }
/* The lees begin right under the nav at #the-cellar: no strip of chalk above them. */
.cm-cellar[id] { scroll-margin-top: var(--s-nav-h); }
.cm-cellar__grid { display: grid; grid-template-columns: var(--s-cellar-arch-w) minmax(0, 1fr); gap: var(--s-space-2xl); align-items: start; }
/* The vault runs the full height of the copy beside it (never shorter than 3:4), so no dark
   ground opens under the photo; the corridor's vanishing point survives the taller crop. */
.cm-arch--cellar { align-self: stretch; width: 100%; aspect-ratio: var(--s-photo-ratio-card); background: var(--s-lees-deep); box-shadow: 0 0 0 var(--s-hairline) var(--s-oak); }
.cm-arch--cellar img { position: absolute; inset: 0; object-position: var(--s-cellar-pos); }
.cm-cellar__text .cm-head { margin-bottom: var(--s-space-l); }
.cm-cellar__figlabel { margin-top: var(--s-space-xl); padding-bottom: var(--s-space-s); border-bottom: var(--s-hairline) solid var(--s-lees-rule); }
.cm-facts--lees { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-space-m); padding-top: var(--s-space-m); }
.cm-facts--lees dd { font-size: var(--s-size-figure-xl); color: var(--s-lees-text); }
.cm-facts--lees dt { max-width: var(--s-measure-caption); }
.cm-riddling {
    max-width: var(--s-measure-body);
    margin-top: var(--s-space-xl); padding-top: var(--s-space-l); border-top: var(--s-hairline) solid var(--s-lees-rule-soft);
}
.cm-riddling .cm-h3 { margin-bottom: var(--s-space-xs); }
/* r5 crafted moment: the riddling rack. One bottle, six mornings-worth of weeks, tilting from the lath
   (near flat) to sur pointe (neck straight down); the lees dot gathers in the neck as it turns.
   The angle per step is computed from the rack tokens; JS only arms the start pose for the turn-in. */
.cm-rack { margin-top: var(--s-space-l); }
.cm-rack__row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-space-xs); align-items: end; }
.cm-rack__step { display: grid; justify-items: center; gap: var(--s-space-xs); }
.cm-rack__hole {
    display: grid; place-items: center; width: 100%; aspect-ratio: 1;
    border-radius: 50%; background: var(--s-lees-deep); box-shadow: inset 0 0 0 var(--s-hairline) var(--s-lees-rule);
}
.cm-rack__bottle {
    width: var(--s-rack-bottle); color: var(--s-oak-light); overflow: visible;
    transform: rotate(calc(var(--s-rack-from) + (var(--s-rack-to) - var(--s-rack-from)) * var(--i) / var(--n)));
    /* read as ONE bottle: the earlier weeks are its fading trail, the last hole holds it at full strength */
    opacity: calc(var(--s-rack-ghost) + (1 - var(--s-rack-ghost)) * var(--i) / var(--n));
    transition: transform var(--s-dur-rack) var(--s-ease-wine) calc(var(--i) * var(--s-rack-stagger)),
                opacity var(--s-dur-rack) var(--s-ease-wine) calc(var(--i) * var(--s-rack-stagger));
}
.cm-rack__lees { fill: var(--s-lees-text); opacity: calc(var(--s-rack-lees-from) + (1 - var(--s-rack-lees-from)) * var(--i) / var(--n)); }
.cm-rack.is-armed:not(.is-in) .cm-rack__bottle { transform: rotate(var(--s-rack-from)); transition: none; }
.cm-rack.is-armed:not(.is-in) .cm-rack__step + .cm-rack__step .cm-rack__bottle { opacity: 0; }
.cm-rack__week { color: var(--s-lees-muted); text-align: center; }
@media (min-width: 768px) { .cm-rack__week { white-space: nowrap; } }
.cm-rack__step:last-child .cm-rack__week { color: var(--s-oak-light); }
.cm-rack__step:last-child .cm-rack__hole { box-shadow: inset 0 0 0 var(--s-rack-ring) var(--s-oak-light); }
.cm-rack__cap { margin-top: var(--s-space-s); font-style: italic; color: var(--s-lees-muted); font-size: var(--s-size-small); }

/* 6 · The wines: the cellar book */
.cm-wines { padding-block: var(--s-section); border-top: var(--s-hairline) solid var(--s-lees-rule-soft); }
/* The heading and intro share the top row; the book and the glass share the second, so the
   sticky glass starts beside the first wine and the two columns end close together. */
.cm-wines__grid { display: grid; grid-template-columns: minmax(0, 1fr) var(--s-glass-w); column-gap: var(--s-space-2xl); row-gap: var(--s-space-xl); align-items: start; }
.cm-wines__main { display: contents; }
.cm-wines .cm-head { grid-column: 1; grid-row: 1; }
.cm-wines__intro { grid-column: 2; grid-row: 1; align-self: end; }
.cm-wines .cm-book { grid-column: 1; grid-row: 2; margin-top: 0; }
.cm-wines__aside { grid-column: 2; grid-row: 2; }
.cm-wines__intro { color: var(--s-lees-muted); }
.cm-book { margin-top: var(--s-space-xl); }
.cm-book__cols, .cm-wine__row {
    display: grid; grid-template-columns: var(--s-wine-cols); column-gap: var(--s-space-m); align-items: baseline;
}
.cm-book__cols { padding-bottom: var(--s-space-xs); border-bottom: var(--s-hairline) solid var(--s-lees-rule); }
.cm-book__cols span:nth-child(n+3) { text-align: right; }
.cm-wine { border-bottom: var(--s-hairline) solid var(--s-lees-rule-soft); }
.cm-wine__row { min-height: var(--s-row-h); padding-block: var(--s-space-s); }
.cm-wine__name { font: var(--s-weight-regular) var(--s-size-figure-sm)/var(--s-leading-tight) var(--s-font-display); }
.cm-wine__vintage { color: var(--s-oak-light); white-space: nowrap; }
.cm-wine__badge { display: block; margin-top: var(--s-space-3xs); color: var(--s-oak-light); }
.cm-wine__grapes { font-size: var(--s-size-small); color: var(--s-lees-muted); }
.cm-wine__fig { text-align: right; font-size: var(--s-size-figure-sm); white-space: nowrap; }
.cm-wine__fig .cm-unit { color: var(--s-lees-muted); }
.cm-wine__toggle {
    justify-self: end; display: inline-flex; align-items: center; gap: var(--s-space-xs);
    min-height: var(--s-tap); min-width: var(--s-tap); padding: 0 var(--s-space-2xs);
    border: 0; background: none; color: var(--s-lees-text); cursor: pointer;
    font: var(--s-weight-medium) var(--s-size-small)/var(--s-leading-tight) var(--s-font-body);
    text-decoration: underline; text-decoration-color: var(--s-oak); text-underline-offset: var(--s-link-underline-offset);
    visibility: hidden;
}
.cm-js .cm-wine__toggle { visibility: visible; }
.cm-wine__chev {
    width: var(--s-space-2xs); height: var(--s-space-2xs);
    border-right: var(--s-focus-w) solid var(--s-oak); border-bottom: var(--s-focus-w) solid var(--s-oak);
    transform: translateY(calc(-1 * var(--s-space-3xs))) rotate(45deg);
    transition: transform var(--s-dur-base) var(--s-ease);
}
.cm-wine__toggle[aria-expanded="true"] .cm-wine__chev { transform: translateY(var(--s-space-3xs)) rotate(-135deg); }
.cm-wine__note { overflow: hidden; }
.cm-wine__note-inner { padding: 0 0 var(--s-space-m); max-width: var(--s-measure-body); color: var(--s-lees-text); }
.cm-wine__note-inner p + p { margin-top: var(--s-space-xs); }
.cm-wine__pairing { font-style: italic; color: var(--s-lees-muted); }
.cm-wine.is-selected .cm-wine__row { box-shadow: inset var(--s-ruler-marker-h) 0 0 var(--s-oak); padding-left: var(--s-space-s); }
.cm-wine.is-selected .cm-wine__note-inner { padding-left: var(--s-space-s); }
.cm-wine__glass-slot { display: none; }
.cm-wines__aside { position: sticky; top: calc(var(--s-nav-h) + var(--s-space-l)); }
.cm-glass { display: grid; gap: var(--s-space-s); }
.cm-glass img { aspect-ratio: var(--s-photo-ratio-glass); width: 100%; height: auto; object-fit: cover; }
.cm-glass__cap { display: grid; gap: var(--s-space-3xs); }
.cm-glass__name { font: var(--s-weight-regular) var(--s-size-h3)/var(--s-leading-tight) var(--s-font-display); }
.cm-glass__facts { padding-top: var(--s-space-2xs); border-top: var(--s-hairline) solid var(--s-lees-rule); font-size: var(--s-size-small); color: var(--s-lees-text); }
.cm-glass__pairing { font-size: var(--s-size-small); font-style: italic; color: var(--s-lees-muted); }

/* 7 · Visit the cellar door */
.cm-visit { padding-block: var(--s-section); border-top: var(--s-hairline) solid var(--s-lees-rule-soft); }
.cm-visit__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-space-2xl); align-items: start; }
.cm-visit__intro .cm-head { margin-bottom: var(--s-space-m); }
.cm-visit__practical { margin-top: var(--s-space-l); display: grid; gap: var(--s-space-2xs); }
.cm-visit__practical li { position: relative; padding-left: var(--s-space-m); font-size: var(--s-size-small); color: var(--s-lees-muted); }
.cm-visit__practical li::before { content: ""; position: absolute; left: 0; top: var(--s-space-xs); width: var(--s-space-xs); height: var(--s-hairline); background: var(--s-oak); }
.cm-steps { position: relative; display: grid; gap: var(--s-space-xl); }
.cm-steps::before { /* the path: up the slope, down into the cellar */
    content: ""; position: absolute; top: var(--s-step-n-col); bottom: var(--s-space-l); left: calc(var(--s-step-n-col) / 2);
    width: var(--s-hairline); background: var(--s-oak);
}
.cm-step {
    display: grid; grid-template-columns: var(--s-step-n-col) minmax(0, 1fr) auto; column-gap: var(--s-space-l);
    grid-template-areas: "n title time" "n body body";
    align-items: baseline;
}
.cm-step__n {
    grid-area: n; align-self: start; position: relative;
    display: grid; place-items: center; width: var(--s-step-n-col); height: var(--s-step-n-col);
    font-size: var(--s-size-figure); line-height: var(--s-leading-solid);
    color: var(--s-oak-light); background: var(--s-lees-bg); border: var(--s-hairline) solid var(--s-oak);
    border-radius: 50%;
}
.cm-step__title { grid-area: title; align-self: center; }
.cm-step__time { grid-area: time; align-self: center; font-size: var(--s-size-figure-sm); color: var(--s-oak-light); }
.cm-step__body { grid-area: body; margin-top: var(--s-space-xs); color: var(--s-lees-muted); }

/* 8 · Write to the cellar: the sentence IS the form */
.cm-write { padding-block: var(--s-section) var(--s-space-2xl); border-top: var(--s-hairline) solid var(--s-lees-rule-soft); }
.cm-sentence {
    max-width: var(--s-sentence-measure);
    font: var(--s-weight-regular) var(--s-size-sentence)/var(--s-leading-sentence) var(--s-font-display);
    letter-spacing: var(--s-track-display);
    color: var(--s-lees-text); text-wrap: pretty;
}
.cm-field { display: inline-block; position: relative; max-width: 100%; }
.cm-field input, .cm-field select {
    font: inherit; letter-spacing: inherit; color: var(--s-oak-light);
    width: calc(var(--s-field-ch) * 1ch); min-width: var(--s-field-min-ch); max-width: 100%;
    min-height: var(--s-tap);
    padding: 0 var(--s-space-3xs);
    border: 0; border-bottom: var(--s-field-underline) solid var(--s-oak); border-radius: 0;
    background: transparent; color-scheme: dark;
    -webkit-appearance: none; appearance: none;
}
.cm-field input::placeholder { color: var(--s-lees-muted); opacity: 1; }
.cm-field input:focus-visible, .cm-field select:focus-visible { outline: var(--s-focus-w) solid var(--s-lees-focus); outline-offset: var(--s-focus-offset); border-bottom-color: var(--s-lees-text); }
.cm-field [aria-invalid="true"] { border-bottom-style: dashed; border-bottom-color: var(--s-lees-text); }
.cm-field--guests input { text-align: center; }
.cm-field--guests input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cm-field select { width: auto; padding-right: calc(var(--s-field-chev) * 3); cursor: pointer; field-sizing: content; }
.cm-field select option { color: var(--s-ink); background: var(--s-chalk); font-family: var(--s-font-body); }
.cm-field--select::after {
    content: ""; position: absolute; right: var(--s-field-chev); top: 50%;
    width: var(--s-field-chev); height: var(--s-field-chev);
    border-right: var(--s-focus-w) solid var(--s-oak); border-bottom: var(--s-focus-w) solid var(--s-oak);
    transform: translateY(-75%) rotate(45deg); pointer-events: none;
}
.cm-form__errors { margin-top: var(--s-space-m); display: grid; gap: var(--s-space-3xs); }
.cm-form__error { position: relative; padding-left: var(--s-space-m); font-size: var(--s-size-small); color: var(--s-lees-text); }
.cm-form__error::before { content: ""; position: absolute; left: 0; top: var(--s-space-xs); width: var(--s-space-xs); height: var(--s-focus-w); background: var(--s-oak-light); }
.cm-btn--sentence {
    min-height: calc(var(--s-size-sentence) * var(--s-leading-sentence));
    margin-left: var(--s-space-s); padding-inline: var(--s-btn-pad-x-lg);
    font-size: var(--s-size-btn-lg); letter-spacing: normal;
    vertical-align: bottom;
}
.cm-form__foot { margin-top: var(--s-space-m); }
.cm-form__status { max-width: var(--s-measure-body); font-style: italic; color: var(--s-lees-text); }
.cm-write__facts {
    display: flex; flex-wrap: wrap;
    margin-top: var(--s-space-2xl); padding-top: var(--s-space-m); border-top: var(--s-hairline) solid var(--s-lees-rule-soft);
}
.cm-write__facts li { font-size: var(--s-size-figure-sm); color: var(--s-lees-muted); padding-right: var(--s-space-l); }
.cm-write__facts li + li { padding-left: var(--s-space-l); border-left: var(--s-hairline) solid var(--s-oak); }

/* ---- Footer: the horizon line ----------------------------------------------------------- */
.cm-foot { background: var(--s-lees-deep); color: var(--s-lees-muted); padding-bottom: var(--s-space-xl); font-size: var(--s-size-small); }
.cm-foot__horizon {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--s-space-m);
    padding-block: var(--s-space-m); border-top: var(--s-hairline) solid var(--s-oak);
    color: var(--s-lees-text);
}
.cm-foot__vintage { font-size: var(--s-size-figure-sm); color: var(--s-oak-light); }
.cm-foot__mark { font-size: var(--s-size-logo); }
.cm-foot__contact { justify-self: end; display: flex; align-items: center; gap: var(--s-space-xs); }
.cm-foot__contact .cm-micro { color: var(--s-oak-light); }
.cm-foot__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 5fr); gap: var(--s-space-xl); padding-top: var(--s-space-l); border-top: var(--s-hairline) solid var(--s-lees-rule-soft); }
.cm-foot__line { max-width: var(--s-measure-lede); }
.cm-foot__nav { display: grid; }
.cm-foot__nav a { display: inline-flex; align-items: center; min-height: var(--s-tap); color: var(--s-lees-text); text-decoration: none; }
.cm-foot__nav a:hover { text-decoration: underline; text-decoration-color: var(--s-oak); }
.cm-foot__credits h2 { color: var(--s-oak-light); margin-bottom: var(--s-space-xs); }
.cm-foot__credits ul { margin-top: var(--s-space-xs); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-space-m); }
.cm-foot__credits a { display: inline-flex; align-items: center; min-height: var(--s-tap); color: var(--s-lees-text); text-decoration-color: var(--s-oak); }
.cm-foot__credits li span { display: block; margin-top: calc(-1 * var(--s-space-xs)); padding-bottom: var(--s-space-2xs); font-size: var(--s-size-micro); color: var(--s-lees-muted); }

/* ---- Tablet --------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .cm-nav__links ul { gap: var(--s-space-m); }
    /* Narrow margins: the intro waits for the slope; figures sit over their labels. */
    .cm-arrival__intro { display: none; }
    .cm-arrival__line { font-size: var(--s-size-arrival-line); }
    .cm-facts--arrival .cm-fact { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-space-2xs); }
    .cm-facts--arrival dt { grid-column: 1; grid-row: 2; text-align: left; }
    .cm-facts--arrival dd { font-size: var(--s-size-figure-sm); }
    .cm-wines__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-space-m); }
    .cm-moment__mo.is-own::after { display: none; }   /* narrow cells: the inked letter alone marks the month */
    .cm-wines .cm-head, .cm-wines__intro, .cm-wines .cm-book, .cm-wines__aside { grid-column: 1; grid-row: auto; }
    .cm-wines .cm-book { order: 1; margin-top: var(--s-space-m); }
    .cm-wines__aside { position: static; max-width: var(--s-glass-w); }
    .cm-cellar__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--s-space-xl); }
}
@media (max-width: 1023px) {
    .cm-nav__links { display: none; }
    .cm-nav { grid-template-columns: 1fr auto auto; }
    .cm-js .cm-nav__menu { display: inline-flex; }
}

/* ---- Phone: its own composition ---------------------------------------------------------- */
@media (max-width: 767px) {
    .cm-nav { grid-template-columns: 1fr auto; gap: var(--s-space-xs); }
    .cm-btn--nav { display: none; }

    /* Arrival: wordmark full width, arch tucked into its lower edge, then line, button, one fact line. */
    /* The arrival fills the first screen to its foot: the arch takes whatever height is left, so no
       pale band of the next photograph shows under the fact line (final review). */
    .cm-arrival {
        grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(var(--s-arch-h-mobile), 1fr) auto;
        min-height: calc(100svh - var(--s-ribbon-h) - var(--s-nav-h));
    }
    .cm-wordmark { grid-column: 1; }
    .cm-arch--hero {
        grid-column: 1; grid-row: 2; width: 100%; aspect-ratio: auto;
        height: auto; min-height: var(--s-arch-h-mobile); align-self: stretch;
        margin-top: calc(-1 * var(--s-wordmark-overlap) * 1cap);
    }
    .cm-arch--hero picture, .cm-arch--hero img { position: absolute; inset: 0; }   /* the photo fills the arch; it never sets its height */
    .cm-arch--hero img { object-position: var(--s-hero-pos-p); }
    .cm-arrival__tag, .cm-facts--arrival, .cm-arrival__actions .cm-link, .cm-arrival__intro, .cm-arrival__release { display: none; }
    .cm-arrival__lead { grid-row: 3; grid-column: 1; align-items: stretch; margin-top: var(--s-space-m); }
    .cm-arrival__line { font-size: var(--s-size-arrival-line); }
    .cm-arrival__actions { margin-top: 0; padding-top: var(--s-space-s); }
    .cm-arrival__actions .cm-btn { width: 100%; }
    .cm-arrival__short { display: block; margin-top: var(--s-space-s); text-align: center; color: var(--s-text-muted); }

    .cm-slope__photo { height: var(--s-slope-h-mobile); }
    .cm-slope__body, .cm-descent__head, .cm-year__head, .cm-visit__grid, .cm-cellar__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-space-m); }

    /* Descent, static: one column, the gauge line down the left. */
    .cm-descent__layers { justify-content: stretch; }
    .cm-layer { grid-template-columns: minmax(0, 1fr); padding-left: var(--s-space-l); }
    .cm-layer::before, .cm-layer + .cm-layer::after { left: var(--s-space-xs); }
    .cm-layer__read { grid-template-columns: auto auto 1fr; align-items: baseline; justify-items: start; gap: var(--s-space-xs); padding: var(--s-space-m) 0 var(--s-space-s); text-align: left; }
    .cm-layer__read::after { left: calc(var(--s-space-xs) - var(--s-space-l)); right: auto; top: calc(var(--s-space-m) + var(--s-space-xs)); }
    .cm-layer__temp { justify-self: end; }
    .cm-layer__caption { padding-block: var(--s-space-s) 0; }

    /* Descent, live on the phone: horizontal gauge across the top, card, caption below. */
    .cm-descent.is-live .cm-descent__frame {
        grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto;
        row-gap: var(--s-space-m); height: auto;
    }
    .cm-descent.is-live .cm-layer__photo { grid-row: 2; }
    .cm-descent.is-live .cm-gauge { grid-column: 1; grid-row: 1; grid-template-rows: auto; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s-space-l); }
    .cm-descent.is-live .cm-gauge__label { display: none; }
    .cm-gauge__ticks { flex-direction: row; border-right: 0; border-bottom: var(--s-gauge-w) solid var(--s-oak); height: var(--s-tap); }
    .cm-gauge__tick { height: auto; width: 0; flex-direction: column; justify-content: flex-end; align-items: center; gap: var(--s-space-3xs); white-space: nowrap; }
    .cm-gauge__tick:first-child { align-items: flex-start; }
    .cm-gauge__tick:nth-last-child(2) { align-items: flex-end; }
    .cm-gauge__tick::after, .cm-gauge__tick.is-active::after { width: var(--s-gauge-w); height: var(--s-gauge-tick); }
    .cm-gauge__tick.is-active::after { height: var(--s-gauge-tick-major); }
    .cm-gauge__tick span { font-size: var(--s-size-small); }
    .cm-gauge__marker { top: auto; left: 0; right: 0; bottom: calc(-0.5 * var(--s-gauge-dot) - 0.5 * var(--s-gauge-w)); width: auto; height: var(--s-gauge-dot); }
    .cm-gauge__marker::before { top: 0; left: calc(var(--s-gauge-progress) * 100%); margin: 0 0 0 calc(-0.5 * var(--s-gauge-dot)); }
    .cm-descent.is-live .cm-gauge__now { display: block; font-size: var(--s-size-figure); line-height: var(--s-leading-solid); color: var(--s-ink); }
    .cm-descent.is-live .cm-layer__photo { grid-column: 1; grid-row: 2; width: 100%; height: var(--s-descent-card-h); aspect-ratio: auto; }
    .cm-descent.is-live .cm-layer__caption { grid-column: 1; grid-row: 3; align-self: start; max-width: none; margin-top: 0; font-size: var(--s-size-lede); }
    .cm-descent.is-live .cm-readout { display: none; }

    /* Year: scroll-snap strip with the month ruler sticky above it and an n / 5 count. */
    .cm-ruler-bar { position: sticky; top: var(--s-nav-h); z-index: var(--s-z-arch); }
    .cm-ruler-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-space-s); }
    .cm-ruler { column-gap: 0; }
    .cm-ruler__month { text-align: center; }
    .cm-ruler__month::before { left: 50%; }
    .cm-ruler__month.has-moment abbr::after { display: none; }
    .cm-ruler__month.has-moment abbr { text-decoration: underline; text-decoration-color: var(--s-oak); text-underline-offset: var(--s-space-3xs); }
    .cm-ruler__marker { width: calc(100% / var(--s-ruler-cols)); transform: translateX(calc((var(--s-ruler-active) - 1) * 100%)); }
    .cm-year__count { display: block; min-width: var(--s-tap); font-size: var(--s-size-small); color: var(--s-text-muted); text-align: right; }
    .cm-moments {
        display: grid; align-items: start;
        grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: var(--s-card-w-mobile);
        column-gap: var(--s-space-s);
        overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
        margin-inline: calc(-1 * var(--s-gutter)); padding: var(--s-space-l) var(--s-gutter) var(--s-space-s);
        scroll-padding-inline: var(--s-gutter);
        scrollbar-width: none;
    }
    .cm-moments::-webkit-scrollbar { display: none; }
    .cm-moment { scroll-snap-align: start; }
    .cm-moment__span { display: none; }
    .cm-moment.is-feature .cm-moment__photo { aspect-ratio: var(--s-photo-ratio-card); }

    /* Cellar */
    .cm-arch--cellar { align-self: start; width: 100%; }
    .cm-facts--lees { gap: var(--s-space-s); }
    .cm-facts--lees dd { font-size: var(--s-size-figure); }

    /* Wines: full-width rows >= 56px; the glass moves above the open note (site.js). */
    .cm-book__cols { display: none; }
    .cm-wine__row {
        grid-template-columns: auto auto minmax(0, 1fr);
        grid-template-areas: "name name price" "grapes grapes grapes" "lees dosage toggle";
        row-gap: var(--s-space-2xs); column-gap: var(--s-space-m);
    }
    .cm-wine__name { grid-area: name; }
    .cm-wine__price { grid-area: price; }
    .cm-wine__grapes { grid-area: grapes; }
    .cm-wine__lees { grid-area: lees; text-align: left; }
    .cm-wine__dosage { grid-area: dosage; text-align: left; }
    .cm-wine__toggle { grid-area: toggle; }
    .cm-wine__glass-slot { display: block; margin-bottom: var(--s-space-m); }
    .cm-wine__glass-slot:empty { display: none; }
    .cm-wine__glass-slot .cm-glass { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
    /* In the row the facts and pairing are already printed: the glass keeps only its label + name. */
    .cm-wine__glass-slot .cm-glass__facts, .cm-wine__glass-slot .cm-glass__pairing { display: none; }
    .cm-wines__aside { max-width: none; }

    .cm-step { grid-template-columns: var(--s-step-n-col) minmax(0, 1fr); grid-template-areas: "n title" "n time" "n body"; column-gap: var(--s-space-m); }

    .cm-write__facts { display: grid; gap: var(--s-space-xs); }
    .cm-write__facts li, .cm-write__facts li + li { padding: 0; border: 0; }
    .cm-btn--sentence { display: flex; width: 100%; margin: var(--s-write-btn-gap) 0 0; }

    .cm-foot__horizon { grid-template-columns: minmax(0, 1fr) auto; }
    .cm-foot__contact { grid-column: 1 / -1; justify-self: start; }
    .cm-foot__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-space-l); }
}

/* ---- Reduced motion: the composed final states, nothing floating ----------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
    .cm-moment:hover .cm-moment__photo img { transform: none; }
}