/* ── Refinement layer (10 Nov 2026) ─────────────────────────────────
   Presentation only: no copy, prices or structure change. Loaded last on every page,
   so removing the one <link> in Site.astro puts the site back exactly as it was.

   What it does, in order:
   1. One spacing scale (8px steps) so every section breathes the same amount.
   2. A calmer type scale: display headings a step smaller and tighter, set with
      optical sizing and balanced lines; body text with an even measure and no orphans.
   3. Quieter details: finer buttons and links, consistent hairlines, lining numerals.
   4. Phones: a wider margin, shorter photos, and the opening photo stops short of the
      fold so the "open today" line and booking button show on arrival.

   "#siteWrapper.v2.v2.v2" outranks the earlier phone passes (".v2.v2") without !important,
   except where the earlier rule already used it (heading sizes). */

:root {
  /* the spacing scale */
  --rf-1: 8px; --rf-2: 16px; --rf-3: 24px; --rf-4: 32px; --rf-5: 48px; --rf-6: 64px; --rf-7: 96px; --rf-8: 128px;
  --rf-sec: clamp(88px, 9vw, 136px);         /* one section padding for the whole site */
  --rf-line: rgba(23, 46, 70, .14);          /* the one hairline */
  --rf-ease: cubic-bezier(.2, .7, .1, 1);
  --v2-gutter: clamp(20px, 4.5vw, 64px);
}

html body #rt-site.rt-shell #siteWrapper.v2.v2.v2 {
  font-size: 17px; line-height: 1.62;
  font-kerning: normal; font-optical-sizing: auto;
  font-variant-numeric: lining-nums proportional-nums;
  text-rendering: optimizeLegibility;

  & ::selection { background: var(--v2-navy); color: var(--v2-plate); }

  /* ── Type ─────────────────────────────────────────────── */
  & h1, & h2, & h3 { text-wrap: balance; font-feature-settings: "kern", "liga"; }
  & h2 {
    font-size: clamp(34px, 3.5vw, 54px) !important; line-height: 1.05 !important;
    letter-spacing: -.024em; margin-bottom: var(--rf-3);
  }
  & h3 { letter-spacing: -.01em; }
  & p, & li { text-wrap: pretty; }
  & p + p { margin-top: var(--rf-2); }
  & .v2-statement { letter-spacing: -.02em; line-height: 1.12; text-wrap: balance; max-width: 21ch; }
  & .v2-statement + .v2-lede { margin-top: var(--rf-3); }
  & :is(.v2-lede, .v2-phero__lede, .v2-split__lede, .hs-head__lede) { font-size: 18.5px; line-height: 1.58; }

  /* Kickers: smaller, so the heading under them leads */
  & .v2-kicker, & .v2-hero__kicker { font-size: 17px; letter-spacing: .005em; margin-bottom: var(--rf-2); }

  /* Prices, times and dates line up */
  & :is(.v2-prices, .v2-bays, .v2-hours, .v2-spec, .v2-tb) { font-variant-numeric: lining-nums tabular-nums; }

  /* ── Rhythm ───────────────────────────────────────────── */
  & .v2-sec { padding-top: var(--rf-sec); padding-bottom: var(--rf-sec); }
  & .v2-sec--tight { padding-top: calc(var(--rf-sec) * .5); }
  & .v2-head { margin-bottom: clamp(40px, 4vw, 56px); column-gap: clamp(32px, 6vw, 96px); }
  & .v2-head p { max-width: 48ch; }
  & .v2-actions { margin-top: var(--rf-4); gap: var(--rf-2) var(--rf-4); }

  /* Home, "A day on the seafront": the note sits as a column, not pushed to the edge */
  & .v2-day__head { align-items: end; }
  & .v2-day__head p { justify-self: stretch; max-width: 46ch; margin-left: auto; }
  & .v2-day__time { margin-top: var(--rf-3); }

  /* ── Buttons and links ────────────────────────────────── */
  & .v2-btn {
    min-height: 54px; padding: 0 32px;
    font-size: 15px; font-weight: 500; letter-spacing: .03em;
    transition: background-color .25s var(--rf-ease), transform .25s var(--rf-ease);
  }
  & .v2-btn:active { transform: translateY(1px); }
  & .v2-link {
    font-size: 15px; letter-spacing: .02em; padding: 8px 0 7px;
    transition: color .2s var(--rf-ease), box-shadow .25s var(--rf-ease);
  }
  & .v2-link:hover { box-shadow: 0 4px 0 -2px currentColor; }
  & .v2-inline { text-decoration-thickness: 1px; text-underline-offset: 4px; }
}

/* ── Desktop: let the big moments breathe ─────────────────────────── */
@media (min-width: 901px) {
  html body #rt-site.rt-shell #siteWrapper.v2.v2.v2 {
    & .v2-hero h1 { letter-spacing: -.04em; }
    /* The opening words line up with the column every section below uses */
    & .v2-hero__copy { left: max(var(--v2-gutter), calc((100vw - var(--v2-max)) / 2 + var(--v2-gutter))); right: var(--v2-gutter); max-width: none; margin: 0; }
    & .v2-intro { padding-top: clamp(104px, 10vw, 152px); padding-bottom: clamp(72px, 7vw, 112px); }
    & .v2-split__text { padding-top: var(--rf-7); padding-bottom: var(--rf-7); }
    & .v2-split h2 { margin-bottom: var(--rf-3); }
  }
}

/* ── Phones ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  html body #rt-site.rt-shell #siteWrapper.v2.v2.v2 {
    --rf-sec: 72px;
    font-size: 16.5px; line-height: 1.6;

    & h1, & :is(.v2-mn-head, .oc-open, .hs-top, .v2-phero, .v2-split, .v2-hero) h1 {
      font-size: clamp(42px, 12vw, 50px) !important; line-height: .98 !important; letter-spacing: -.03em;
    }
    & h2 { font-size: 30px !important; line-height: 1.08 !important; letter-spacing: -.018em; margin-bottom: var(--rf-2); }
    & .v2-statement { font-size: 25px !important; line-height: 1.16 !important; }
    & :is(.v2-lede, .v2-phero__lede, .v2-split__lede, .hs-head__lede) { font-size: 17px !important; line-height: 1.55; }
    & .v2-kicker, & .v2-hero__kicker { font-size: 16px !important; margin-bottom: 10px; }

    & .v2-sec { padding-top: var(--rf-sec); padding-bottom: var(--rf-sec); }
    & .v2-head { margin-bottom: var(--rf-4); gap: var(--rf-1); }
    & .v2-actions { margin-top: 28px; }
    & .v2-btn { min-height: 52px; padding: 0 26px; }

    /* Opening photos stop short of the fold, so the next line (open today, booking) shows */
    & .v2-hero { height: 86svh; min-height: 520px; }
    & .v2-phero { height: auto; min-height: 78svh; }

    /* Tall photos square on phones (a fifth shorter): the next lever from the 9 Nov pass */
    & .v2-split .v2-split__img, & .v2-split--navy .v2-split__img { aspect-ratio: 1 / 1; }
    & .v2-split .v2-split__text { padding-top: var(--rf-5) !important; padding-bottom: var(--rf-6) !important; }
    & :is(.v2-place--thompsons, .v2-place--cellar) .v2-place__img { aspect-ratio: 1 / 1; }
  }
}

@media (prefers-reduced-motion: reduce) {
  html body #rt-site.rt-shell #siteWrapper.v2.v2.v2 :is(.v2-btn, .v2-link) { transition: none; }
}

/* Thompson's dates: three place cards still fit across a phone with the wider margin */
@media (max-width: 900px) {
  html body #rt-site.rt-shell #siteWrapper.v2.v2.v2 .v2-dates .v2-month {
    & ul { gap: 6px; }
    & a { padding-left: 8px; padding-right: 8px; min-width: 0; }
  }
}

/* Two plain sections in a row: one gap between them, not two stacked */
@media (min-width: 901px) {
  html body #rt-site.rt-shell #siteWrapper.v2.v2.v2 > .v2-sec:not(.v2-sec--navy, .v2-sec--green) + .v2-sec:not(.v2-sec--navy, .v2-sec--green, .v2-sec--tight) {
    padding-top: calc(var(--rf-sec) * .55);
  }
}
/* Phones: the booking button and its partner link stay on one line */
@media (max-width: 900px) {
  html body #rt-site.rt-shell #siteWrapper.v2.v2.v2 {
    & .v2-actions { column-gap: 22px; }
    & .v2-btn { padding: 0 22px; }
  }
}