/* ═══════════════════════════════════════════════════════════════════════════
   DESKTOP LAYER — added 2026-08-06
   ═══════════════════════════════════════════════════════════════════════════

   Everything below sits inside @media (min-width: 960px). A phone-width
   browser never reads it, which is why the mobile design cannot drift:
   styles.css is the mobile design and is not edited by this file at all.

   Loaded AFTER styles.css so these rules win at desktop width by source order,
   with no !important and no specificity games.

   Two rules sit outside the media query, both new classes on new elements that
   do not exist in the mobile design, so neither changes anything already on
   screen: `.topnav { display: none }` and `.year-panel { display: contents }`.

   Layout model: there is no wrapper markup. Instead, every full-bleed section
   gets a symmetric inline padding of
       max(56px, (100vw − 1200px) / 2)
   which parks content inside a centred 1200px band while backgrounds still run
   edge to edge. That matters — the .sec--deep corner-flood and the footer fill
   are absolutely positioned to the section box and must keep spanning the
   viewport.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The desktop navigation does not exist on mobile. */
.topnav {
  display: none;
}

/* The year finder's input wrapper exists only to give the desktop grid one
   right-hand item to place. display:contents generates NO box, so its three
   children remain direct children of #find-year for layout purposes and the
   phone renders exactly as it did before the div was added. */
.year-panel {
  display: contents;
}

@media (min-width: 960px) {
  :root {
    /* §35/§36 — the display type at this breakpoint is roughly double the
       mobile size, so tracking tightens and leading closes up. Declaring it
       on the token means every heading inherits the size-appropriate value
       instead of each rule carrying its own literal. */
    --track-display: -0.028em;
    --track-title: -0.02em;
    --lead-display: 1.02;
    --lead-title: 1.08;

    --dt-max: 1200px;
    --dt-gutter: max(56px, calc((100vw - var(--dt-max)) / 2));
  }

  /* ── The centred band ─────────────────────────────────────────────────
     Listed explicitly rather than via `section`, because several of these
     set padding with a shorthand that would otherwise win on specificity. */
  section,
  .topbar,
  .store-band,
  .footer,
  .shop-head,
  .shop-grid,
  .shop-tabs,
  .shop-count,
  .pd-info {
    padding-left: var(--dt-gutter);
    padding-right: var(--dt-gutter);
  }

  /* ══ Top bar ══════════════════════════════════════════════════════════ */
  .topbar {
    padding-top: 26px;
    padding-bottom: 22px;
  }

  .brand {
    font-size: 15px;
    letter-spacing: 0.22em;
  }

  /* Real navigation instead of a hamburger — a desktop visitor should not
     have to open a drawer to discover the site has pages. */
  /* Sits beside the brand, on the left. Parked on the right it ran straight
     across the bottle's dark neck and the muted link colour vanished. */
  .topnav {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-left: 52px;
    margin-right: auto;
  }

  /* The controls sit top-right, i.e. over the bottle. A whisper of cream keeps
     them legible without turning the airy hero into a solid navigation bar.

     ⚠ The stops are not decorative. The nav text occupies 37–67% of the bar's
     height and the cart 28–76%, so the original 0.94→0 linear fade left the
     LINK TEXT sitting on only 0.59→0.31 cream. Against the oversized desktop
     bottle (2026-08-10, POSES_DESKTOP) that backdrop is near-black glass, and
     --muted #6f6a62 measured 2.4:1 there — "OUR PROMISE" and "CONTACT" simply
     disappeared at window widths below ~1285px, where the nav's right edge
     crosses the bottle's neck.

     Holding 0.97 through the whole controls band puts --muted at 4.70:1 (AA),
     and the fade is spent in the last 20% so it still reads as a soft-edged
     band rather than a hard bar. Over cream — every window wide enough that
     the bottle misses the nav — cream at 0.97 on cream is invisible, so this
     costs nothing where it isn't needed. Do not flatten these back to a
     straight fade without re-checking the contrast. */
  .topbar::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
      to bottom,
      rgba(250, 247, 242, 0.97) 0%,
      rgba(250, 247, 242, 0.97) 80%,
      rgba(250, 247, 242, 0) 100%
    );
    pointer-events: none;
  }

  /* …but not once the bar has its own frosted background, or the two stack. */
  .topbar--scrolled::before,
  .topbar--solid::before {
    display: none;
  }

  .topnav a {
    font-family: var(--font-btn);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    text-decoration: none;
    position: relative;
    padding: 4px 0;
    transition: color 0.22s ease;
  }

  .topnav a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--wine);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .topnav a:hover {
    color: var(--ink);
  }

  .topnav a:hover::after {
    transform: scaleX(1);
  }

  /* The drawer is a small-screen affordance; the bar carries the links now. */
  .menu-btn {
    display: none;
  }

  /* ══ Section 1 — hero ═════════════════════════════════════════════════
     Copy anchors to the left column; the bottle owns the right. The canvas
     is full-viewport behind the text, so the split is made by constraining
     the copy and by the desktop pose in config.js — not by moving the canvas. */
  .hero {
    justify-content: center;
    padding-top: 0;
  }

  /* ⚠ The hero photograph's desktop framing is NOT here — it is in motion.css,
     under its own @media (min-width: 960px).
     motion.css loads after this file, so at equal specificity it wins even
     from inside a media query: `.hero-bg { background-position }` set here was
     silently overridden and the desktop crop never applied. Anything that has
     to override a motion.css declaration belongs in motion.css. */

  .hero-copy {
    max-width: 34rem;
    margin-top: -4svh; /* optical centre sits a little above true centre */
  }

  .eyebrow {
    font-size: 12px;
    letter-spacing: 0.2em;
  }

  .hero h1 {
    font-size: clamp(58px, 5.4vw, 88px);
    line-height: var(--lead-display);
    letter-spacing: var(--track-display);
    max-width: 9em;
  }

  .hero .sub {
    margin-top: 26px;
    font-size: 17px;
    line-height: 1.7;
    max-width: 33ch;
  }

  .cta {
    margin-top: 38px;
    font-size: 12.5px;
    padding: 17px 34px;
  }

  .scroll-cue-wrap {
    flex: 0 0 auto;
    position: absolute;
    left: var(--dt-gutter);
    bottom: 44px;
    justify-content: flex-start;
    padding-right: 0;
  }

  /* ══ Section 2 — benefits ═════════════════════════════════════════════ */
  .benefits-copy {
    width: min(46%, 30rem);
    transform: translateY(-16svh);
  }

  .benefits h2 {
    font-size: clamp(38px, 3.5vw, 54px);
    margin-bottom: 34px;
    max-width: 7em;
  }

  .benefit-row {
    padding: 19px 0;
    gap: 18px;
  }

  .benefit-icon {
    width: 26px;
    height: 26px;
  }

  .benefit-label {
    font-size: 15px;
  }

  /* ══ Shared section rhythm ════════════════════════════════════════════ */
  .sec {
    padding-top: 132px;
    padding-bottom: 132px;
  }

  /* Same derivation as the mobile rule: 2.14svh stage − 0.32svh = 1.82svh,
     which is exactly where the sticky canvas floor sits. Was -24svh, leaving
     a 0.08svh band of cream between the bottle's base and this section —
     the "not even close" gap on desktop. */
  .sec--lift {
    margin-top: -32svh;
    padding-top: 76px;
  }

  .sec-title {
    font-size: clamp(38px, 3.4vw, 54px);
    line-height: var(--lead-title);
    letter-spacing: var(--track-title);
  }

  .sec-sub {
    font-size: 16.5px;
    line-height: 1.7;
    max-width: 46ch;
  }

  .sec-foot {
    margin-top: 52px;
  }

  /* ══ Section 3 — the year finder ══════════════════════════════════════
     Rebuilt 11 Aug. It used to be `text-align: center` on everything, which on
     a 1440px screen left a narrow column stranded in the middle of a 1200px
     band with the width unused — the founder's "it looks bad, only in the
     middle". It was also the only section NOT following the desktop language:
     #how, #promise and #faq are all narrow-title-left / content-right.

     Now the same: the invitation holds the left column, the controls hold the
     right, and the answer runs full width underneath.

         ┌──────────────────────┬──────────────────────────────┐
         │ Find a bottle        │  −  [ 1986 ]  +   [ Find ]   │
         │ from your year       │  OR BY AGE                   │
         │ A birth year, an …   │  [ 40 ] yrs old              │
         ├──────────────────────┴──────────────────────────────┤
         │ result line                                          │
         │ [card] [card] [card] …                               │
         ├──────────────────────────────────────────────────────┤
         │ [1975] [1981] [40th birthday · 1986]                 │
         └──────────────────────────────────────────────────────┘

     ⚠ The row assignment deliberately matches DOM order — title, standfirst,
     controls, results, chips. Visual order and tab order must not diverge; the
     chips are last in the markup, so they stay last on screen rather than
     being pulled up into the left column where they would look tidier. */
  #find-year {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    column-gap: 104px;
    align-items: start;
  }

  #find-year > .sec-title { grid-column: 1; grid-row: 1; }
  #find-year > .sec-sub { grid-column: 1; grid-row: 2; }

  /* Spans both header rows so it sits beside the title rather than below it. */
  #find-year > .year-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    grid-column: 2;
    grid-row: 1 / 3;
  }

  #find-year > .year-out { grid-column: 1 / -1; grid-row: 3; margin-top: 64px; }
  #find-year > .chip-rail { grid-column: 1 / -1; grid-row: 4; }

  /* Mobile stands the result line and the card scroller side by side, which
     works at 375px because the cards are a scroller. Given the full 1200px
     band the answer reads better stacked: one line, then the bottles across
     the whole width — six abreast instead of three squeezed beside text. */
  #find-year .year-out {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  /* styles.css sets `order: -1` on the bottles so that in the mobile ROW the
     photo sits left of the result text. Turned into a COLUMN that same rule
     stacks the bottles ABOVE the sentence explaining them, so the section
     answered before it was asked — and it put visual order out of step with
     DOM order, which the result's aria-live region depends on. */
  #find-year .year-bottles {
    order: 0;
  }

  /* ⚠ Both rails carry `margin-inline: -24px` on mobile so they can bleed to
     the screen edges, with matching padding to keep the first item aligned.
     While this section was centred that was symmetric and invisible; left
     aligned it drags them 24px outside the band, so the chips no longer line
     up with the title above them. Reset the margin as well as the padding. */
  #find-year .chip-rail,
  #find-year .year-bottles {
    margin-left: 0;
    margin-right: 0;
  }

  /* The year is this brand's hero glyph, and this is the one input the whole
     positioning rests on — at 20px it read as a leftover phone control. */
  #find-year .year-form {
    width: 100%;
    max-width: 440px;
    margin-top: 0;
    padding: 8px;
    gap: 8px;
  }

  #find-year .year-form input {
    font-size: 38px;
    height: 64px;
  }

  #find-year .year-step {
    width: 46px;
    height: 46px;
    font-size: 22px;
  }

  #find-year .year-form .pill {
    padding: 15px 24px;
    font-size: 12px;
  }

  #find-year .year-or {
    margin-top: 26px;
  }

  #find-year .age-form {
    margin-top: 10px;
  }

  #find-year .chip-rail {
    display: flex;
    flex-wrap: wrap;
    overflow: visible;
    padding-left: 0;
    padding-right: 0;
    margin-top: 44px;
  }

  #find-year .year-result {
    max-width: 60ch;
    font-size: 15px;
  }

  /* Wrap instead of scroll: there is room here, and a hidden horizontal
     scroller on a desktop pointer just conceals bottles. A matched year can
     return up to seven. */
  #find-year .year-bottles {
    flex-wrap: wrap;
    overflow: visible;
    padding-left: 0;
    padding-right: 0;
    gap: 18px;
  }

  #find-year .year-bottles .bottle-card {
    width: 170px;
  }

  /* ══ Section 4 — the cellar ═══════════════════════════════════════════
     The horizontal swipe rail becomes a real grid. Three bottles, three
     columns; a fourth would wrap rather than hide off the right edge. */
  .rail {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    margin: 52px 0 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  .bottle-card {
    flex: initial;
    max-width: none;
    scroll-snap-align: none;
    border-radius: 26px;
  }

  .bottle-card__img {
    aspect-ratio: 4 / 5;
  }

  /* Same reasoning as .shop-card__body — keep the price row on one line
     across all three cards even when a château name wraps. */
  .bottle-card {
    display: flex;
    flex-direction: column;
  }

  .bottle-card__body {
    padding: 22px 22px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .bottle-card__row {
    margin-top: auto;
    padding-top: 16px;
  }

  .bottle-card__year {
    font-size: 30px;
  }

  .bottle-card__name {
    font-size: 17px;
  }

  .bottle-card__region {
    font-size: 13px;
  }

  .bottle-card__price {
    font-size: 17px;
  }

  /* The card is a link target on desktop, so give it a hover state. */
  .bottle-card {
    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s ease;
  }

  .bottle-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 44px rgba(59, 10, 20, 0.14);
  }

  /* The rail is a grid here, so there is nothing to swipe. The phone keeps
     the instruction; the desktop sentence just ends after "as it stands". */
  .only-swipe {
    display: none;
  }

  /* ══ Section 5 — how it works ═════════════════════════════════════════ */
  .steps {
    flex-direction: row;
    max-width: none;
    gap: 48px;
    margin-top: 56px;
  }

  .step {
    flex: 1 1 0;
    flex-direction: column;
    gap: 20px;
  }

  .step__num {
    flex: 0 0 52px;
    height: 52px;
    font-size: 23px;
  }

  .step h3 {
    margin-top: 0;
    font-size: 17px;
  }

  .step p {
    font-size: 15px;
    max-width: none;
  }

  /* ══ Section 6 — promise / stats ══════════════════════════════════════ */
  .stats {
    margin-top: 56px;
    max-width: 44rem;
    gap: 32px;
  }

  .stat__num {
    font-size: 54px;
  }

  .stat__label {
    font-size: 11.5px;
    max-width: 16ch;
  }

  .promise-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 44px;
    margin-top: 56px;
    border-top: 0;
  }

  .promise-list li {
    font-size: 14.5px;
    padding: 0;
    border-bottom: 0;
    align-items: flex-start;
    gap: 12px;
  }

  .promise-list li::before {
    margin-top: 8px;
  }

  /* ══ Store band ═══════════════════════════════════════════════════════ */
  .store-band {
    padding-top: 104px;
    padding-bottom: 104px;
  }

  .store-band__inner {
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
  }

  .store-band__title {
    font-size: clamp(34px, 3vw, 46px);
  }

  .store-band__text {
    font-size: 16px;
  }

  /* ══ Section 8 — FAQ ══════════════════════════════════════════════════
     Two columns: four questions in one column on a wide screen is a lot of
     vertical travel for very little content. */
  .faq {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 64px;
    margin-top: 44px;
    border-top: 0;
  }

  .faq details {
    border-top: 1px solid var(--hairline);
  }

  .faq summary {
    padding: 22px 0;
    font-size: 16px;
  }

  .faq details p {
    font-size: 14.5px;
    padding-right: 40px;
  }

  /* ══ Footer ═══════════════════════════════════════════════════════════ */
  .footer {
    padding-top: 120px;
    padding-bottom: 56px;
  }

  .footer__cta {
    max-width: 38rem;
  }

  .footer__actions {
    margin-top: 34px;
  }

  .footer__bottom {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 12px 40px;
    margin-top: 72px;
  }

  /* Scoped to the homepage footer's grid. Unscoped it also hit the slim
     shop/product footer, where it knocked the health warning out of centre. */
  .footer__bottom .footer__legal {
    grid-column: 1 / -1;
    max-width: 62ch;
  }

  /* ══ Shop / catalogue ═════════════════════════════════════════════════ */
  .shop-head {
    text-align: center;
    padding-top: 72px;
  }

  .shop-title {
    font-size: clamp(46px, 4.2vw, 68px);
    line-height: var(--lead-display);
    letter-spacing: var(--track-display);
  }

  .shop-sub {
    font-size: 16.5px;
    max-width: 46ch;
    margin-left: auto;
    margin-right: auto;
  }

  .shop-tabs {
    justify-content: center;
    margin-top: 34px;
    overflow: visible;
  }

  .shop-tab {
    font-size: 13px;
  }

  .shop-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    padding-top: 40px;
  }

  .shop-card {
    border-radius: 26px;
  }

  .shop-card__media {
    aspect-ratio: 4 / 5;
  }

  /* Grid rows are equal height, but the content inside was not — a name that
     wrapped to two lines pushed that card's price row out of line with its
     neighbours. Pin the price row to the bottom of every card instead. */
  .shop-card__body {
    padding: 22px 22px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .shop-card__row {
    margin-top: auto;
    padding-top: 16px;
  }

  .shop-card__name {
    font-size: 19px;
    line-height: 1.25;
  }

  .shop-card__producer {
    font-size: 11.5px;
  }

  .shop-card__meta {
    font-size: 13px;
  }

  .shop-card__price {
    font-size: 18px;
  }

  .shop-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 44px rgba(59, 10, 20, 0.14);
  }

  .shop-count {
    text-align: center;
    margin-top: 44px;
    font-size: 13px;
  }

  /* ══ Product detail ═══════════════════════════════════════════════════
     Mobile stacks: dark panel, then info, then a fixed buy bar. Desktop puts
     the bottle beside its facts and drops the fixed bar — there is room for
     the price in the flow, and a bar pinned across a 1440px screen for one
     button looks like a phone app. */
  .pd-panel {
    border-radius: 0 0 40px 40px;
    padding-left: var(--dt-gutter);
    padding-right: var(--dt-gutter);
    padding-bottom: 64px;
  }

  .pd-bar__title {
    font-size: 14px;
  }

  /* Capped and centred. Left to fill the 1200px band the bottle grew to over
     1000px tall and the three spec lines drifted off on their own out to the
     right — a product shot, not a poster. */
  .pd-hero {
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 64px;
    align-items: center;
    justify-content: center;
    max-width: 900px;
    margin: 36px auto 0;
  }

  .pd-hero__img {
    border-radius: 28px;
    max-height: 520px;
    margin-left: auto;
    margin-right: auto;
  }

  .pd-hero__glow {
    width: 340px;
    height: 340px;
  }

  .pd-specs__k {
    font-size: 11.5px;
  }

  .pd-specs__v {
    font-size: 16px;
  }

  /* Matched to the hero's 900px so the facts sit under the bottle rather than
     hugging the far left of a 1200px band with an empty half beside them. */
  .pd-info {
    padding-top: 52px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
  }

  .pd-name {
    font-size: clamp(34px, 3vw, 46px);
    line-height: 1.08;
  }

  .pd-region {
    font-size: 15px;
  }

  .pd-price {
    font-size: 28px;
  }

  .pd-desc {
    font-size: 15.5px;
    line-height: 1.75;
    max-width: 62ch;
  }

  .pd-assure {
    max-width: 62ch;
  }

  .pd-assure li {
    font-size: 14.5px;
  }

  /* The market note is appended after the assurances list, where it arrived
     with no spacing of its own and collided with the last bullet. */
  .pd-market {
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--hairline);
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--muted);
    max-width: 62ch;
  }

  /* The fixed bar becomes part of the page. It is a direct child of <body>,
     so it needs the gutter explicitly or it starts hard against the window. */
  .pd-buybar {
    position: static;
    margin: 48px 0 0;
    padding: 22px var(--dt-gutter) 0;
    background: transparent;
    box-shadow: none;
    border-top: 1px solid var(--hairline);
  }

  /* With no asking price the Add button is removed, which leaves a bar whose
     only content repeats the price already shown above. Drop it entirely. */
  .pd-buybar:not(:has(.pd-add)) {
    display: none;
  }

  .pd-buybar__price strong {
    font-size: 26px;
  }

  .pd-add {
    flex: 0 0 auto;
    min-width: 200px;
  }

  .page--pd {
    padding-bottom: 120px;
  }

  /* ══ Cart drawer ══════════════════════════════════════════════════════ */
  .cart-drawer {
    width: 440px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   REFINEMENT PASS — 2026-08-06
   ═══════════════════════════════════════════════════════════════════════════
   Two problems with the first desktop pass, both fair:

   1. SCUFFED DETAIL. The small furniture is still drawn at phone sizes — a 9px
      classification badge, a 9.5px producer label, a 13px wordmark. Blown up on
      a 1440px screen those read as cheap rather than small. The badge was the
      worst offender: a shiny gold gradient with a drop shadow, which is exactly
      the sort of thing that looks fine at 150px wide and tawdry at 380px.

   2. STILL SHAPED LIKE A PHONE. Every section was a centred stack — eyebrow,
      title, content — just wider. Desktop has a second axis, so the sections
      that carry the most reading now use it: a narrow title column on the left
      holding the content column on the right.

   The section restructuring is done with CSS Grid placement on the existing
   markup — no wrapper divs, so mobile stays byte-identical.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 960px) {
  /* ══ Small furniture, redrawn ═════════════════════════════════════════ */

  .brand {
    font-size: 17px;
    letter-spacing: 0.26em;
  }

  .lang__btn {
    font-size: 12px;
    padding: 8px 14px;
  }

  .cart-btn {
    width: 44px;
    height: 44px;
  }

  .cart-btn svg {
    width: 24px;
    height: 24px;
  }

  /* The classification is the single most authoritative fact on a card —
     "4ème Cru Classé" is a legal ranking from 1855. It deserves the quiet
     confidence of a wine label, not a gold gradient with a shadow. */
  /* Bigger here, so it can carry more weight than the phone version without
     looking gaudy. It keeps the wine gradient and gains a soft shadow that
     lifts it off the white photograph — the depth the flat version lost,
     without going back to the metallic gold that read as cheap at this size. */
  .badge {
    top: 16px;
    right: 16px;
    color: #faf7f2;
    border: 0;
    box-shadow: 0 2px 10px rgba(59, 10, 20, 0.28);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    padding: 8px 14px;
  }

  .bottle-card__age {
    font-size: 11.5px;
    letter-spacing: 0.07em;
    padding: 6px 12px;
  }

  .shop-card__producer,
  .bottle-card__producer {
    font-size: 11px;
    letter-spacing: 0.16em;
  }

  /* ══ Hero — more presence ═════════════════════════════════════════════ */
  .hero-copy {
    max-width: 38rem;
  }

  .hero h1 {
    font-size: clamp(66px, 6.2vw, 100px);
    letter-spacing: var(--track-display);
  }

  .hero .sub {
    font-size: 18px;
    max-width: 30ch;
  }

  /* ══ Section titles — bigger, tighter ═════════════════════════════════ */
  .sec-title {
    font-size: clamp(46px, 4.2vw, 68px);
    letter-spacing: var(--track-display);
    line-height: var(--lead-display);
  }

  .sec {
    padding-top: 152px;
    padding-bottom: 152px;
  }

  /* ══ Section 3 — year finder, given more room ═════════════════════════ */
  #find-year .sec-sub {
    font-size: 17.5px;
    max-width: 40ch;
  }

  #find-year .chip-rail {
    margin-top: 44px;
    gap: 12px;
  }

  #find-year .chip {
    font-size: 14px;
    padding: 12px 22px;
  }

  /* ══ Section 4 — the cellar, editorial header ═════════════════════════
     Title on the left, the standfirst dropped to its baseline on the right —
     the arrangement a printed catalogue would use, instead of three stacked
     centred paragraphs. */
  #cellar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 88px;
    align-items: start;
  }

  #cellar > .eyebrow { grid-column: 1; grid-row: 1; }
  #cellar > .sec-title { grid-column: 1; grid-row: 2; }

  #cellar > .sec-sub {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    margin: 0 0 6px;
    max-width: 40ch;
  }

  /* ⚠ Every child of #cellar must be placed EXPLICITLY. This is an explicit
     grid, so an unplaced item auto-flows into the first free cell — row 1
     column 2, up beside the eyebrow — and silently rearranges the header. */
  #cellar > .rail { grid-column: 1 / -1; grid-row: 3; }
  #cellar > .sec-foot { grid-column: 1 / -1; grid-row: 4; }

  .bottle-card__year {
    font-size: 34px;
  }

  .bottle-card__name {
    font-size: 18px;
  }

  .bottle-card__region {
    font-size: 13.5px;
  }

  .bottle-card__price {
    font-size: 19px;
  }

  /* ══ Section 5 — how it works, as a numbered editorial list ═══════════
     Three short columns of small type read as filler. One column of properly
     sized steps, divided by hairlines and led by large numerals, reads as a
     process worth following. */
  /* The trailing 1fr row exists to absorb the height of the spanning content
     column. Without it that height is shared out across the title rows and the
     heading drifts into the middle of the section instead of sitting under its
     own eyebrow. Same trick in #promise and #faq below. */
  #how {
    display: grid;
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 104px;
    align-items: start;
  }

  #how > .eyebrow { grid-column: 1; grid-row: 1; }
  #how > .sec-title { grid-column: 1; grid-row: 2; margin-top: 22px; }

  #how > .steps {
    grid-column: 2;
    grid-row: 1 / 4;
    flex-direction: column;
    gap: 0;
    margin-top: 0;
    max-width: none;
  }

  #how .step {
    flex-direction: row;
    align-items: baseline;
    gap: 34px;
    padding: 34px 0;
    border-top: 1px solid var(--hairline);
  }

  #how .step:first-child {
    border-top: 0;
    padding-top: 4px;
  }

  /* The circle becomes a plain numeral — at this size the disc was just a
     bubble around a digit. */
  /* Fixed width, not auto: "1" is narrower than "2" and "3", which pushed each
     step's text to a different left edge. */
  #how .step__num {
    flex: 0 0 52px;
    width: 52px;
    height: auto;
    display: block;
    text-align: left;
    background: none;
    box-shadow: none;
    border-radius: 0;
    font-size: 46px;
    line-height: 1;
    color: var(--gold-ink);
    opacity: 0.55;
    font-variant-numeric: tabular-nums;
  }

  #how .step h3 {
    margin: 0 0 10px;
    font-size: 21px;
  }

  #how .step p {
    font-size: 16px;
    line-height: 1.65;
    max-width: 52ch;
  }

  /* ══ Section 6 — promise, with the numbers given real scale ═══════════ */
  #promise {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr auto;
    column-gap: 104px;
    align-items: start;
  }

  #promise > .eyebrow { grid-column: 1; grid-row: 1; }
  #promise > .sec-title { grid-column: 1; grid-row: 2; margin-top: 22px; }
  #promise > .sec-sub { grid-column: 1; grid-row: 3; }

  /* Stacked, not in a row: three big numerals down the right side carry far
     more weight than three small ones side by side. */
  #promise > .stats {
    grid-column: 2;
    grid-row: 1 / 5;
    display: flex;
    flex-direction: column;
    gap: 42px;
    margin-top: 4px;
    max-width: none;
  }

  #promise .stat__num {
    font-size: 74px;
    letter-spacing: -0.02em;
  }

  #promise .stat__label {
    font-size: 12px;
    letter-spacing: 0.14em;
    max-width: 26ch;
    margin-top: 10px;
  }

  #promise > .promise-list {
    grid-column: 1 / -1;
    grid-row: 5;
    margin-top: 96px;
    padding-top: 40px;
    border-top: 1px solid rgba(250, 247, 242, 0.14);
  }

  #promise .promise-list li {
    font-size: 15px;
  }

  /* ══ Section 8 — FAQ, title column beside the questions ═══════════════ */
  #faq {
    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 104px;
    align-items: start;
  }

  #faq > .eyebrow { grid-column: 1; grid-row: 1; }
  #faq > .sec-title { grid-column: 1; grid-row: 2; margin-top: 22px; }

  /* Back to one column — it now sits in a ~760px well, which is a comfortable
     measure for a question and its answer. */
  #faq > .faq {
    grid-column: 2;
    grid-row: 1 / 4;
    display: block;
    margin-top: 0;
  }

  #faq .faq summary {
    padding: 26px 0;
    font-size: 17.5px;
  }

  #faq .faq details p {
    font-size: 15.5px;
    line-height: 1.7;
    max-width: 62ch;
  }

  /* ══ Store band ═══════════════════════════════════════════════════════ */
  .store-band__title {
    font-size: clamp(38px, 3.4vw, 54px);
  }

  .store-band__text {
    font-size: 17px;
  }

  /* ══ Shop cards ═══════════════════════════════════════════════════════ */
  .shop-title {
    font-size: clamp(54px, 5vw, 82px);
    letter-spacing: var(--track-display);
  }

  .shop-sub {
    font-size: 17.5px;
  }

  .shop-tab {
    font-size: 14px;
  }

  .shop-card__name {
    font-size: 20px;
  }

  .shop-card__meta {
    font-size: 13.5px;
  }

  .shop-card__price {
    font-size: 19px;
  }

  /* ══ Product page ═════════════════════════════════════════════════════ */
  .pd-name {
    font-size: clamp(40px, 3.6vw, 56px);
    letter-spacing: var(--track-title);
  }

  .pd-price {
    font-size: 30px;
  }

  .pd-desc {
    font-size: 16.5px;
  }
}

/* ── Very wide screens ───────────────────────────────────────────────────
   Past ~1600px the 1200px band starts to look marooned, so the band and the
   type step up once rather than scaling continuously. */
@media (min-width: 1600px) {
  :root {
    --dt-max: 1340px;
  }

  .hero h1 {
    font-size: 92px;
  }

  .rail,
  .shop-grid {
    gap: 36px;
  }
}