/* ── Ink wash layer (11 Nov 2026, pared back the same evening) ──────
   Presentation only: no copy, prices, links or structure change.
   Loaded after rt-v2-refine.css on every guest page (body class "ink");
   INK_OFF in src/layouts/Site.astro puts a page back exactly as it was.

   What is left after the textured washes were taken out (on a phone they read as smudges):
   1. Paper: a faint grain, and one paper colour for the whole page.
   2. Big photographs melt smoothly into the colour of the band they sit in. Plain gradients, no texture.
   3. The Cellar's chequer edge is the Cellar table's own marble.
   4. Headlines settle in; big photographs come up gently as they scroll into view.
   Every band, film and section keeps its clean straight edge. */

:root {
  --ink-paper: url(/ink/paper.webp);
  --ink-marble: url(/ink/cellar-marble.webp); /* the Cellar table's own marble, two rows */
  --ink-side: clamp(96px, 12vw, 200px);       /* how far a photo melts into the colour beside it */
  --ink-fall: 104px;                           /* and, on a phone, into the band below it */
}

html body.ink #rt-site.rt-shell #siteWrapper.v2.v2.v2 {
  /* 1. Paper grain on the page */
  background-image: var(--ink-paper) !important; /* the base sheet sets its colour with !important */
  background-size: 320px 320px !important;
  /* One paper for the whole page: the near-white strips drop their own slightly different white,
     which drew faint lines where they met the page. */
  & :is(.v2-today, .v2-quickbar, .v2-trio--film, .v2-day, .bz-wall, .rt-post, .jn-related) { background-color: transparent !important; }

  /* the old "rise from behind a line" reveal clipped the headline's shadow into a hard line; the ink settle replaces it */
  & :is(.v2-hero, .v2-phero) h1 .v2-reveal { clip-path: none !important; animation: none !important; }
  & .v2-phero h1 { animation: ink-settle 1.6s var(--rf-ease) .15s both; }
  /* the shade that sits behind the words ends softly instead of on a line */
  & :is(.v2-hero .v2-hero__copy, .v2-phero .v2-phero__copy)::before { -webkit-mask: linear-gradient(to bottom, #000 0 55%, transparent 100%); mask: linear-gradient(to bottom, #000 0 55%, transparent 100%); }

  /* 3. The Cellar's chequer edge is the Cellar table itself: real marble squares, two rows. */
  & .v2-place--cellar::before, & .v2-split--green::after, & .v2-close-band::before {
    height: 30px; background: var(--ink-marble) 0 0 / auto 100% repeat-x;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .25);
  }

  /* 2. Photographs melt into the colour beside them: a smooth fade, nothing ragged. */
  & :is(.v2-place--cellar, .v2-split--green, .v2-split--navy) :is(.v2-place__img, .v2-split__img),
  & .v2-place--grill:not(.v2-place--gift) .v2-place__img {
    -webkit-mask: linear-gradient(to right, #000 calc(100% - var(--ink-side)), rgba(0,0,0,.86) calc(100% - var(--ink-side) * .72), rgba(0,0,0,.55) calc(100% - var(--ink-side) * .45), rgba(0,0,0,.2) calc(100% - var(--ink-side) * .2), transparent);
            mask: linear-gradient(to right, #000 calc(100% - var(--ink-side)), rgba(0,0,0,.86) calc(100% - var(--ink-side) * .72), rgba(0,0,0,.55) calc(100% - var(--ink-side) * .45), rgba(0,0,0,.2) calc(100% - var(--ink-side) * .2), transparent);
  }
  & .v2-place--thompsons .v2-place__img {
    -webkit-mask: linear-gradient(to left, #000 calc(100% - var(--ink-side)), rgba(0,0,0,.86) calc(100% - var(--ink-side) * .72), rgba(0,0,0,.55) calc(100% - var(--ink-side) * .45), rgba(0,0,0,.2) calc(100% - var(--ink-side) * .2), transparent);
            mask: linear-gradient(to left, #000 calc(100% - var(--ink-side)), rgba(0,0,0,.86) calc(100% - var(--ink-side) * .72), rgba(0,0,0,.55) calc(100% - var(--ink-side) * .45), rgba(0,0,0,.2) calc(100% - var(--ink-side) * .2), transparent);
  }

  /* One grade for every photograph, so they sit on the same paper: a touch warmer, a touch softer. */
  & :is(.v2-place__img, .v2-split__img, .v2-kitchen figure, .v2-trio figure, .v2-crossing__img, .v2-journal figure) :is(img, video) {
    filter: saturate(.94) contrast(.98) sepia(.04);
  }

  /* 4. Words: the headline settles like ink taking to paper */
  & :is(.v2-hero, .v2-split) h1 { animation: ink-settle 1.6s var(--rf-ease) .15s both; }
  & :is(.v2-hero__kicker) { animation: ink-settle 1.6s var(--rf-ease) both; }
}

/* Big photographs come up gently as they scroll into view.
   Only where the browser can tie it to scrolling, and never for reduced motion. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html body.ink #rt-site.rt-shell #siteWrapper.v2.v2.v2 :is(.v2-place__img, .v2-kitchen figure, .v2-crossing__img, .v2-trio figure) :is(img, video) {
      animation: ink-bloom linear both; animation-timeline: view(); animation-range: entry 0% cover 22%;
    }
  }
}
@keyframes ink-bloom {
  from { opacity: .5; transform: scale(1.03); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes ink-settle {
  from { opacity: 0; filter: blur(8px); letter-spacing: .01em; }
  60% { opacity: 1; }
  to { opacity: 1; filter: blur(0); }
}

/* Phones: the photographs sit above the words, so they melt downward into the band instead. */
@media (max-width: 900px) {
  html body.ink #rt-site.rt-shell #siteWrapper.v2.v2.v2 {
    & :is(.v2-place--cellar, .v2-place--thompsons, .v2-split--green, .v2-split--navy) :is(.v2-place__img, .v2-split__img),
    & .v2-place--grill:not(.v2-place--gift) .v2-place__img {
      -webkit-mask: linear-gradient(to bottom, #000 calc(100% - var(--ink-fall)), rgba(0,0,0,.86) calc(100% - var(--ink-fall) * .72), rgba(0,0,0,.55) calc(100% - var(--ink-fall) * .45), rgba(0,0,0,.2) calc(100% - var(--ink-fall) * .2), transparent);
              mask: linear-gradient(to bottom, #000 calc(100% - var(--ink-fall)), rgba(0,0,0,.86) calc(100% - var(--ink-fall) * .72), rgba(0,0,0,.55) calc(100% - var(--ink-fall) * .45), rgba(0,0,0,.2) calc(100% - var(--ink-fall) * .2), transparent);
    }
    & .v2-place--cellar::before, & .v2-split--green::after, & .v2-close-band::before { height: 24px; }
    /* a long name keeps to two lines: "Chef Robert / Thompson MBE." */
    & .v2-phero h1 { max-width: none !important; }
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.ink #rt-site.rt-shell #siteWrapper.v2.v2.v2 :is(h1, .v2-hero__kicker) { animation: none; }
}

/* ── Polish pass (11 Nov 2026, evening) ─────────────────────────────
   Small things a careful eye catches, fixed site-wide. */
html body.ink #rt-site.rt-shell #siteWrapper.v2.v2.v2 {
  /* Numbers in running text: Schibsted Grotesk's tabular setting also widens the comma and full stop,
     which printed "16 , six down", "8 . 30am" and "£50 per head , non-refundable". Proportional figures
     in sentences; the big display numerals keep their own setting. */
  & :is(.v2-prices, .v2-bays, .v2-hours, .v2-spec, .v2-tb, .tv-strip, .v2-mn-opts, .va-table) { font-variant-numeric: lining-nums proportional-nums; }

  /* The short line under a heading on green and navy bands was set in navy, so on green it all but vanished
     (About: "Two Michelin stars, two British Restaurant Awards..."). */
  & :is(.v2-sec--green, .v2-sec--navy) .v2-head p { color: #d6e1dc; }

  /* Long names in page heroes break where a reader would: "Chef Robert / Thompson MBE." */
  & .v2-phero h1 { max-width: none !important; text-wrap: balance; }

  /* Every "More" and every menu section tab is a comfortable thumb's width tall. */
  & .v2-more > summary { min-height: 44px; display: inline-flex; align-items: center; }
  /* ...but not on wide screens, where the fold is open and its line was never meant to show ("Less ×"). */
  & .v2-more.is-desk > summary { display: none; }
  & .v2-mn-nav a { min-height: 40px; display: inline-flex; align-items: center; }
}
@media (max-width: 600px) {
  html body.ink #rt-site.rt-shell #siteWrapper.v2.v2.v2 {
    /* the award names under the laurels were 9.5px: readable now, still quiet */
    & .v2-proof li { font-size: 11px; letter-spacing: .12em; }
    /* the Christmas calendar's "Lunch and dinner" under each date */
    & .oc-cal .oc-day__s { font-size: 11px; line-height: 1.2; }
  }
}