/* ==========================================================================
   Cafè Retrò Ristorante Tivoli — theme, "Intervallo"

   The composition is the pause. Pages are scores: isolated moments — one
   photograph, one sentence, one number — placed asymmetrically on a twelve
   column grid and separated by designed silences. Type is sentence case at
   every size; serif numerals are the only ornament; there are no uppercase
   tracked labels, no hairline separators, no glass and no cards anywhere on
   the public site. Photography uses exactly three devices: one unveiled
   full-bleed cover per page, half-bleeds that reach a single viewport edge,
   and small keyline-mounted prints. The site is still: hovers are instant,
   nothing drifts in on scroll, step changes in the reservation room snap
   like a light switched; the one soft transition is the index overlay's fade.
   Every selector is prefixed .rc- so nothing collides with other projects.
   ========================================================================== */

/* --- tokens ------------------------------------------------------------- */

:root {
  --rc-bg:            #FAF8F4;
  --rc-bg-alt:        #F3F0EA;
  --rc-surface:       #FDFBF7;
  --rc-text:          #1C1917;
  --rc-text-soft:     #6E665D;
  --rc-text-faint:    #746B61;   /* AA on every paper surface it touches */
  --rc-rule:          #E3DED5;
  --rc-border:        var(--rc-rule);   /* legacy alias — admin.html inline styles read it */
  --rc-accent:        #8C4032;   /* muted brick, used sparingly */
  --rc-accent-strong: #6F3227;
  --rc-on-accent:     #FBF7F0;
  --rc-shadow:        rgba(36, 28, 23, .10);

  /* The reservation room speaks the same paper as the rest of the site;
     its hush comes from the staging (a full-viewport moment, one question
     at a time), not from a darker surface. The aliases keep the room's own
     vocabulary so the component reads as one piece. */
  --rc-room-bg:     var(--rc-bg);
  --rc-room-ink:    var(--rc-text);
  --rc-room-soft:   var(--rc-text-soft);
  --rc-room-faint:  var(--rc-text-faint);
  --rc-room-line:   var(--rc-rule);
  --rc-room-fill:   var(--rc-bg-alt);
  --rc-room-accent: var(--rc-accent);
  --rc-paper:       var(--rc-surface);   /* the ticket sits a shade brighter */
  --rc-paper-ink:   var(--rc-text);
  --rc-paper-soft:  var(--rc-text-soft);
  --rc-paper-accent:var(--rc-accent);

  --rc-radius: 2px;              /* the few boxed things are barely rounded */

  --rc-nav-h:  84px;             /* kept as an inset unit (tab, anchors) */
  --rc-tab-h:  60px;             /* the header strip's height when shown */
  --rc-shell:  1180px;           /* admin pages still use the old column */
  --rc-measure: 30rem;

  /* Two spacing registers, one scale. WITHIN a component: the modular set
     below (8/16/24/40/64/96px), tight and controlled. BETWEEN moments: the
     rhythm tokens, deliberately of another magnitude. Nothing ad hoc. */
  --sp-1: .5rem;    /*  8 — inside controls, caption-to-photo */
  --sp-2: 1rem;     /* 16 — between related lines */
  --sp-3: 1.5rem;   /* 24 — inside components */
  --sp-4: 2.5rem;   /* 40 — component clusters */
  --sp-5: 4rem;     /* 64 — large intra-moment gap */
  --sp-6: 6rem;     /* 96 — the largest within-moment interval */
  --sp-3x: 1.75rem; /* 28 — off-scale optical step: ticket internals */
  --sp-7: 8rem;     /* 128 — viewport-headroom cap, 2×--sp-5 */
  --rc-mount: 12px; /* the print-mount inset, one value everywhere */

  /* Rhythm: the intervals are the composition. Endpoints sit on the same
     scale (×--sp-5/--sp-6 multiples), stretched by viewport height. */
  --rt-beat:    clamp(4rem, 8vh, 6rem);      /* inside a moment cluster */
  --rt-rest:    clamp(8rem, 20vh, 12rem);    /* between moments */
  --rt-silence: clamp(12rem, 30vh, 18rem);   /* once or twice per page */

  --rc-display: "Cormorant Garamond", "Iowan Old Style", Palatino, Georgia, serif;
  --rc-body:    "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                Helvetica, Arial, sans-serif;

  /* Motion: the site is still. Pointer feedback is effectively instant, step
     changes in the room snap, and the one soft transition left — the index
     overlay's fade — runs on its own short curve. (The booking script's
     STEP_MS=380 timer is only a settle deadline; nothing visual reads it.) */
  --rc-snap:      120ms;   /* hover / focus colour changes, linear */
  --rc-ease:      cubic-bezier(.55, .06, .45, .94);
  --rc-dur:       240ms;   /* the index overlay fade */
  --rc-dur-hover: 120ms;   /* legacy alias — admin transitions read it */
}

/* One look, deliberately: the site is warm paper on every device, whatever
   the OS theme — like the reference houses, it commits to a single face.
   The only dark surface is the reservation room, pinned by design. */
:root { color-scheme: light; }

@media (max-width: 640px) { :root { --rc-nav-h: 66px; } }

/* --- base --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--rc-bg);
  color: var(--rc-text);
  font-family: var(--rc-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg, iframe { max-width: 100%; display: block; }
figure { margin: 0; }

/* Mid-size display cuts take the sturdier 500; only the two page-scale
   voices (.rc-ov__word, .rc-pageword) stay at 400 — an optical-size ramp. */
h1, h2, h3 {
  font-family: var(--rc-display);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: 0;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
h3 { font-size: 1.02rem; font-family: var(--rc-body); font-weight: 600; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--rc-accent); text-underline-offset: 4px; }
a:hover { color: var(--rc-accent-strong); }

:focus-visible { outline: 2px solid var(--rc-accent); outline-offset: 4px; }

.rc-skip {
  position: fixed; left: -9999px; top: 0; z-index: 450;   /* above the intro */
  background: var(--rc-accent); color: var(--rc-on-accent); padding: .7rem 1.1rem;
}
.rc-skip:focus { left: 0; }

/* --- the intro ------------------------------------------------------------ */
/* Once per session the wordmark holds the first screen alone, then the page
   comes up beneath it as the overlay fades. This is the site's one slow,
   deliberate transition (700ms) — everything else stays instant. The head
   script owns the classes and their timers; without it this is display:none
   and the page is simply a page. */

.rc-intro { display: none; }
html.rc-intro-hold { overflow: hidden; }
/* The box persists through the leave fade on its own class, so the scroll
   lock (on hold only) releases the instant the fade begins. */
html.rc-intro-hold .rc-intro,
html.rc-intro-leave .rc-intro {
  display: grid; place-items: center;
  position: fixed; inset: 0; z-index: 400;
  background: var(--rc-bg);
  opacity: 1;
  transition: opacity 700ms var(--rc-ease);
}
html.rc-intro-leave .rc-intro { opacity: 0; pointer-events: none; }
.rc-intro__mark {
  display: block; width: min(68vw, 26rem); aspect-ratio: 900 / 435;
  background-color: var(--rc-text);
  -webkit-mask: url(/assets/img/photos/rc-wordmark-light.png) center/contain no-repeat;
          mask: url(/assets/img/photos/rc-wordmark-light.png) center/contain no-repeat;
}

/* --- the score ----------------------------------------------------------- */
/* Twelve columns across the full viewport. On a phone every moment stacks
   into one column; the grid spans below apply from 701px up. */

.rc-score {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(.75rem, 2vw, 2rem);
  padding-inline: 4vw;
}
.rc-score > * { grid-column: 1 / -1; min-width: 0; }

.rc-m { margin-block-start: var(--rt-rest); }
.rc-m--silence { margin-block-start: var(--rt-silence); }

/* --- voices -------------------------------------------------------------- */
/* A five-step continuous scale, all sentence case. Hierarchy comes from
   size and position on the grid — never from case or tracking. */

.rc-pageword {
  font-family: var(--rc-display); font-weight: 400;
  line-height: .95; letter-spacing: -.015em;
  margin: 0; text-wrap: balance;
  font-size: clamp(3.6rem, 10vw, 8rem);
}

.rc-statement-xl {
  font-family: var(--rc-display); font-weight: 500;
  font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1.05;
  margin: 0;
}

.rc-line {
  font-family: var(--rc-display);
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  line-height: 1.3; margin: 0;
}

.rc-wordlabel {
  font-family: var(--rc-body); font-size: .95rem; font-weight: 500;
  color: var(--rc-text-soft); margin: 0 0 var(--sp-2);
}

/* Photographs carry no captions — they stand on their own; the alt text
   still says honestly what is in the frame. */

.rc-fineprint { font-size: .85rem; line-height: 1.6; color: var(--rc-text-faint); }

.rc-golink {
  font-family: var(--rc-body); font-size: .95rem; font-weight: 500;
  color: var(--rc-accent); text-decoration: none;
  transition: color var(--rc-snap) linear;
}
.rc-golink::after { content: " →"; }
.rc-golink:hover { text-decoration: underline; text-underline-offset: 4px; }

/* --- photographs: three devices ------------------------------------------ */

/* The alt paper sits behind every photograph, so a frame whose image is
   still arriving reads as a composed plate, never as a hole in the page. */
.rc-ph img { width: 100%; height: 100%; object-fit: cover; background: var(--rc-bg-alt); }

/* 1 · the cover: one per page at most, edge to edge, unveiled — no scrim,
   no text on the image; its caption sits on the paper below. */
.rc-ph--cover { width: 100%; margin-block-start: var(--rt-rest); }
.rc-ph--cover img { height: clamp(28rem, 82vh, 52rem); }
.rc-ph--cover.rc-ph--tall img { height: clamp(30rem, 88vh, 56rem); }

/* Ken Burns preview — on only when the URL carries "?drift": the home
   cover takes a slow zoom and lean. A treated photograph, not video, and
   the one moving thing on an otherwise still site, which is why it stays
   behind the preview toggle. Off under reduced motion. */
html.rc-drift .rc-open + .rc-ph--cover { overflow: hidden; }
html.rc-drift .rc-open + .rc-ph--cover img {
  animation: rc-drift 36s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes rc-drift {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.07) translate(-1.2%, 1%); }
}
@media (prefers-reduced-motion: reduce) {
  html.rc-drift .rc-open + .rc-ph--cover img { animation: none; }
}

/* Video-hero preview — on only when the URL carries "?video" (the head
   script never sets the class under reduced motion, so those readers get
   the still page). The opening becomes a full hero on the kitchen clip,
   wordmark and story in ivory over a quiet scrim; the terrace cover
   stands down; the oyster clip keeps the Matteo line company below.
   The <video> elements are display:none and src-less on every other
   version of the page. */
.rc-open__video, .rc-pair__video { display: none; }
html.rc-video .rc-open {
  position: relative; overflow: hidden;
  min-height: calc(92svh - var(--rc-nav-h));
}
html.rc-video .rc-open__video {
  /* auto placement: an abspos grid child with a definite grid area is
     contained by that area (inside the 4vw padding); auto lets it reach
     the section's padding edges and truly bleed. */
  grid-column: auto; grid-row: auto;
  display: block; position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  background: var(--rc-text);
}
html.rc-video .rc-open::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: rgba(28, 25, 23, .68);
}
html.rc-video .rc-open__block { position: relative; z-index: 2; }
html.rc-video .rc-open p { color: var(--rc-on-accent); }
html.rc-video .rc-open__mark { background-color: var(--rc-on-accent); }
html.rc-video .rc-open .rc-golink {
  color: var(--rc-on-accent);
  text-decoration: underline; text-underline-offset: 4px;
}
html.rc-video .rc-open + .rc-ph--cover { display: none; }
/* Under "?video" the pair's plate is the oyster clip, square like the
   photograph it stands in for. */
html.rc-video .rc-ph--pairside { display: none; }
html.rc-video .rc-pair__video {
  display: block; width: 100%; aspect-ratio: 1;
  object-fit: cover; background: var(--rc-bg-alt);
}
/* Under a full bleed the caption signs the photograph at its lower-right
   edge instead of stranding as a stray line on the left margin. */

/* 2 · the half-bleed: reaches exactly one viewport edge. The grid places
   it; the negative margin lets it run under the page padding. */
.rc-ph--half { position: relative; }
.rc-ph--half img { height: clamp(22rem, 60vh, 34rem); }
.rc-ph--left  { margin-left: -4vw; }
.rc-ph--right { margin-right: -4vw; }
/* On a phone every photograph commands the full width. */
@media (max-width: 700px) {
  .rc-ph--half { margin-inline: -4vw; }
}

/* 3 · the mounted print: a small square photograph inside a keyline, offset
   from the image like a print in a mount. Deliberately the opposite of an
   unframed bleed. */
.rc-ph--print {
  background: var(--rc-surface);
  border: 1px solid var(--rc-rule);
  padding: var(--rc-mount);
}
.rc-ph--print img { aspect-ratio: 1; height: auto; }

/* --- masthead ------------------------------------------------------------ */
/* Part of the page, not a bar over it: it scrolls away with the first
   viewport. The wordmark is the way home; pages are plain words on the
   right with the languages as a quieter row beneath. */

.rc-nav { position: static; background: var(--rc-bg); }

.rc-masthead { padding-block: var(--sp-3) var(--sp-2); align-items: start; row-gap: var(--sp-1); }

.rc-brand { display: inline-flex; align-items: center; color: var(--rc-text); }
.rc-brand__mark {
  display: block; height: 42px; aspect-ratio: 900 / 435;
  background-color: currentColor;
  -webkit-mask: url(/assets/img/photos/rc-wordmark-light.png) left center/contain no-repeat;
          mask: url(/assets/img/photos/rc-wordmark-light.png) left center/contain no-repeat;
}
@media (max-width: 640px) { .rc-brand__mark { height: 34px; } }

.rc-masthead__nav {
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-1);
}
.rc-masthead__links { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); }
.rc-masthead__link {
  font-size: .95rem; font-weight: 500; text-decoration: none;
  color: var(--rc-text-soft); transition: color var(--rc-snap) linear;
  padding-block: .35rem;
}
.rc-masthead__link:hover { color: var(--rc-text); }
.rc-masthead__link[aria-current="page"] { color: var(--rc-accent); }

.rc-langs {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: baseline;
}
.rc-langs li { display: flex; align-items: baseline; }
.rc-langs li + li::before {
  content: "·"; margin-inline: .55rem; color: var(--rc-text-faint);
}
.rc-langs__opt {
  font-size: .85rem; font-weight: 500; text-decoration: none;
  color: var(--rc-text-faint); transition: color var(--rc-snap) linear;
  padding-block: .3rem;
}
.rc-langs__opt:hover { color: var(--rc-text); }
.rc-langs__opt[aria-current="true"] { color: var(--rc-accent); }

/* the compact row exists only when a script can open the index */
.rc-masthead__compact { display: none; }
.rc-masthead__toggle,
.rc-tab__action {
  font-family: var(--rc-body); font-size: .95rem; font-weight: 500;
  color: var(--rc-text); background: none; border: 0; cursor: pointer;
  text-decoration: none; transition: color var(--rc-snap) linear;
}

@media (min-width: 701px) {
  .rc-brand { grid-column: 1 / 5; }
  .rc-masthead__nav { grid-column: 5 / 13; justify-self: end; }
}
@media (max-width: 860px) {
  .rc-js .rc-masthead__nav { display: none; }
  .rc-js .rc-masthead__compact {
    display: flex; align-items: center; gap: var(--sp-3);
    justify-self: end; align-self: center;
  }
  .rc-js .rc-masthead__compact .rc-masthead__link { padding-block: .6rem; }
  .rc-js .rc-masthead__toggle { padding: .6rem 0; min-height: 44px; }
}
@media (max-width: 860px) and (min-width: 701px) {
  .rc-js .rc-brand { grid-column: 1 / 7; }
  .rc-js .rc-masthead__compact { grid-column: 7 / 13; }
}
@media (max-width: 700px) {
  .rc-masthead { display: flex; align-items: center; justify-content: space-between; }
  .rc-masthead__nav { align-items: flex-start; }
  html:not(.rc-js) .rc-masthead { flex-wrap: wrap; }
}

/* --- the scroll-intent tab ----------------------------------------------- */
/* A small solid paper tab, top right, that appears when the reader shows
   intent — scrolling back up, tabbing into it, or nearing the end of the
   page. Two words: the index, and the table. */

.rc-tab { display: none; }
.rc-js .rc-tab {
  display: flex; align-items: center; justify-content: space-between;
  position: fixed; top: 0; left: 0; right: 0; z-index: 120;
  background: var(--rc-surface);
  padding: var(--sp-1) 4vw;
  box-shadow: 0 12px 40px var(--rc-shadow);
  opacity: 0; visibility: hidden;
  transition: opacity 160ms linear, visibility 0s linear 160ms;
}
.rc-tab__brand { display: inline-flex; align-items: center; color: var(--rc-text); }
.rc-tab__brand .rc-brand__mark { height: 30px; }
.rc-tab__actions { display: flex; align-items: center; gap: var(--sp-4); }
.rc-js .rc-tab.is-shown,
.rc-nav--menu-open .rc-tab {
  opacity: 1; visibility: visible;
  transition: opacity 160ms linear, visibility 0s;
}
/* while the index is open the tab is the close control and rides above it */
.rc-nav--menu-open .rc-tab { z-index: 200; }

.rc-tab__action {
  display: inline-flex; align-items: center;
  padding: .6rem 0; min-height: 44px;
}
.rc-tab__action:hover { color: var(--rc-accent); }

/* --- the index ----------------------------------------------------------- */
/* The one overlay: a numbered table of contents, left aligned, on solid
   paper. On a pointer device each row quietly shows a mounted photograph. */

.rc-toc { display: none; }
.rc-js .rc-toc {
  display: flex; flex-direction: column;
  position: fixed; inset: 0; z-index: 150;
  background: var(--rc-bg);
  /* 4.5rem floor: deliberate off-scale minimum so rows clear the tab */
  padding: clamp(4.5rem, 12vh, var(--sp-7)) 4vw var(--sp-4);
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden;
  /* A plain fade, nothing drifts. Visibility must flip with no delay on the
     way in — the first row has to be focusable in the same tick — and hold
     until the fade is done on the way out. */
  transition: opacity var(--rc-dur) var(--rc-ease),
              visibility 0s linear var(--rc-dur);
}
.rc-js .rc-toc[data-open="true"] {
  opacity: 1; visibility: visible;
  transition: opacity var(--rc-dur) var(--rc-ease),
              visibility 0s linear 0s;
}

.rc-toc__list { list-style: none; margin: 0; padding: 0; max-width: 44rem; }
.rc-toc__row {
  display: flex; align-items: baseline; gap: var(--sp-3);
  padding: var(--sp-1) 0; text-decoration: none; color: var(--rc-text);
}
/* Inverted scale: the folio numerals carry the display voice; the page
   names stay in the masthead's quiet word voice. */
.rc-toc__n {
  font-family: var(--rc-display); font-variant-numeric: lining-nums;
  font-size: clamp(1.7rem, 5vw, 2.3rem); line-height: 1.2;
  color: var(--rc-text-faint); flex: none;
  transition: color var(--rc-snap) linear;
}
.rc-toc__name {
  font-family: var(--rc-body);
  font-size: .95rem; font-weight: 500; line-height: 1.4;
  transition: color var(--rc-snap) linear;
}
.rc-toc__row:hover .rc-toc__name,
.rc-toc__row:hover .rc-toc__n { color: var(--rc-accent); }
.rc-toc__row[aria-current="page"] .rc-toc__n,
.rc-toc__row[aria-current="page"] .rc-toc__name { color: var(--rc-accent); }

/* the photograph beside the list: pointer hover only, never on touch */
.rc-toc__peek { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 1000px) {
  .rc-toc__peek {
    display: block; position: fixed; right: 8vw; top: 50%;
    transform: translateY(-50%);
    width: min(24vw, 300px); aspect-ratio: 1;
    background: var(--rc-surface);
    border: 1px solid var(--rc-rule); padding: var(--rc-mount);
    opacity: 0; transition: opacity 160ms linear;
    pointer-events: none;
  }
  .rc-toc__peek img { width: 100%; height: 100%; object-fit: cover; }
  .rc-toc__row:hover .rc-toc__peek { opacity: 1; z-index: 1; }
  .rc-toc__row[aria-current="page"] .rc-toc__peek { opacity: 1; }
}

.rc-toc__foot {
  margin-top: auto; padding-top: clamp(var(--sp-4), 8vh, var(--sp-5));
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3) var(--sp-4);
}
.rc-toc__tel {
  font-family: var(--rc-display); font-variant-numeric: lining-nums;
  font-size: 1.35rem; color: var(--rc-accent); text-decoration: none;
}
.rc-toc__tel:hover { text-decoration: underline; text-underline-offset: 4px; }

/* --- buttons ------------------------------------------------------------- */
/* Rectangles, sentence case, no tracking. Feedback is instant. */

.rc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1);
  font-family: var(--rc-body); font-size: 1rem; font-weight: 500;
  line-height: 1; letter-spacing: 0; text-transform: none;
  padding: 1.05rem 2.4rem; border-radius: var(--rc-radius);
  border: 1px solid transparent; text-decoration: none; cursor: pointer;
  transition: background var(--rc-snap) linear, color var(--rc-snap) linear,
              border-color var(--rc-snap) linear;
}
.rc-btn--primary { background: var(--rc-accent); color: var(--rc-on-accent); border-color: var(--rc-accent); }
.rc-btn--primary:hover { background: var(--rc-accent-strong); border-color: var(--rc-accent-strong); color: var(--rc-on-accent); }
.rc-btn--quiet,
.rc-btn--ghost { background: transparent; color: inherit; border-color: currentColor; }
.rc-btn--quiet:hover,
.rc-btn--ghost:hover { color: var(--rc-accent); }
.rc-btn--small { padding: .55rem 1.05rem; font-size: .9rem; }
.rc-btn[disabled] { opacity: .5; cursor: not-allowed; }

.rc-textlink {
  display: inline-block; background: none; border: 0; padding: .35rem 0;
  font-family: var(--rc-body); font-size: .95rem; font-weight: 500;
  color: var(--rc-accent); cursor: pointer; text-decoration: none;
  transition: color var(--rc-snap) linear;
}
.rc-textlink:hover { text-decoration: underline; text-underline-offset: 4px; }

/* --- home ---------------------------------------------------------------- */

/* The opening: the script logo small at the page's centre, two paragraphs
   of the story beneath it in a reading measure. */
.rc-open {
  min-height: calc(78svh - var(--rc-nav-h));
  align-content: center;
  padding-block: var(--sp-5);
}
.rc-open__block {
  justify-self: center; text-align: center;
  max-width: var(--rc-measure);
}
.rc-open__name { margin: 0 0 var(--sp-4); }
.rc-open__mark {
  display: block; margin-inline: auto;
  width: min(56vw, 12.5rem); aspect-ratio: 900 / 435;
  background-color: var(--rc-text);
  -webkit-mask: url(/assets/img/photos/rc-wordmark-light.png) center/contain no-repeat;
          mask: url(/assets/img/photos/rc-wordmark-light.png) center/contain no-repeat;
}
.rc-open p { color: var(--rc-text-soft); }
.rc-open__go { margin-top: var(--sp-3); }
/* The home cover starts at a beat, so the canopy crests into the first
   viewport; every other cover keeps the full rest. */
.rc-open + .rc-ph--cover { margin-block-start: var(--rt-beat); }

.rc-line__go { margin: var(--sp-3) 0 0; }

/* the pair: the bar to the left edge, a plate from its kitchen floating
   beside it — hung a little below the bar's midline, off its edges, the
   right margin left open. An easy pairing, not a grid exercise. */
.rc-pair .rc-ph--pairmain img { height: clamp(24rem, 72vh, 44rem); }
.rc-pair .rc-ph--pairside img { aspect-ratio: 1; height: auto; }

/* the band: the dining room fills the section edge to edge and the line
   about the people floats on it — photograph and words one moment, like
   the hero. The image is an abspos grid child: auto placement so its
   containing block is the padding box, not the 4vw-inset grid area. */
.rc-band {
  position: relative; overflow: hidden;
  align-content: center;
  min-height: clamp(26rem, 74svh, 46rem);
  padding-block: var(--sp-6);
}
.rc-band__bg {
  grid-column: auto; grid-row: auto;
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  background: var(--rc-bg-alt);
}
.rc-band::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: rgba(28, 25, 23, .6);
}
.rc-band__line {
  position: relative; z-index: 2;
  color: rgba(251, 247, 240, .95);
}


/* The cadence is anchored to its photograph — a block set against the
   image on the grid, never text centered in an empty field. */
.rc-cadence { align-items: center; row-gap: var(--sp-4); }
.rc-cadence .rc-ph--cadence img { height: clamp(24rem, 70vh, 40rem); }
.rc-cadence__line {
  font-family: var(--rc-display);
  font-size: clamp(2.1rem, 4vw, 3rem); line-height: 1.15; margin: 0 0 var(--sp-3);
}
.rc-cadence__act { margin: 0 0 var(--sp-4); }
.rc-cadence__tel { margin: 0; }
.rc-cadence__tel a {
  font-family: var(--rc-display); font-variant-numeric: lining-nums;
  font-size: clamp(1.5rem, 3vw, 2rem); color: var(--rc-accent);
  text-decoration: none;
}
.rc-cadence__tel a:hover { text-decoration: underline; text-underline-offset: 5px; }

@media (min-width: 701px) {
  .rc-mo-line .rc-line { grid-column: 2 / 8; }
  .rc-mo-line .rc-line__go { grid-column: 2 / 8; }
  .rc-mo-line--right .rc-line { grid-column: 6 / 12; }
  .rc-pair .rc-ph--pairmain { grid-column: 1 / 9; grid-row: 1; }
  .rc-pair .rc-ph--pairside, .rc-pair .rc-pair__video {
    grid-column: 9 / 12; grid-row: 1;
    align-self: center; margin-top: var(--sp-6);
  }
  .rc-band__line { grid-column: 6 / 12; }
  .rc-cadence .rc-ph--cadence { grid-column: 1 / 8; grid-row: 1; }
  .rc-cadence__block { grid-column: 9 / 12; grid-row: 1; align-self: center; }
}

/* --- interior page heads -------------------------------------------------- */

.rc-ph-head { padding-block: var(--rt-beat) 0; }
.rc-ph-head__lede { margin-top: var(--sp-3); }
.rc-ph-head__go { margin-top: var(--sp-3); }

.rc-address-xl {
  font-family: var(--rc-display);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem); line-height: 1.3;
  margin: var(--sp-4) 0 0;
}
.rc-tel-xl { margin: var(--sp-1) 0 0; }
.rc-tel-xl a {
  font-family: var(--rc-display); font-variant-numeric: lining-nums;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem); color: var(--rc-accent);
  text-decoration: none;
}
.rc-tel-xl a:hover { text-decoration: underline; text-underline-offset: 5px; }

@media (min-width: 701px) {
  .rc-ph-head .rc-wordlabel { grid-column: 2 / 7; }
  .rc-ph-head .rc-statement-xl { grid-column: 2 / 11; }
  .rc-ph-head .rc-pageword { grid-column: 1 / 10; margin-inline-start: -1vw; }
  .rc-ph-head .rc-address-xl { grid-column: 2 / 11; }
  .rc-ph-head .rc-tel-xl { grid-column: 2 / 11; }
  .rc-ph-head__go { grid-column: 2 / 7; }
  .rc-ph-head__lede { grid-column: 2 / 8; }
}

/* --- about --------------------------------------------------------------- */

/* the headline lies over the photograph's corner: type as an object */
.rc-overword { position: relative; }
/* The word carries its own paper: the block hugs the text so the crossing
   letters stay ink-on-paper wherever they land on the photograph, in both
   colour schemes and at every width. */
.rc-overword__word {
  font-size: clamp(2.6rem, 7vw, 5rem); margin: 0;
  position: relative; z-index: 2;
  width: fit-content;
  background: var(--rc-bg);
  padding-inline: 0 .15em;
}
.rc-overword__line { margin-top: var(--sp-3); }

.rc-beside__head { font-size: clamp(1.6rem, 2.6vw, 2rem); margin-bottom: var(--sp-2); }
.rc-beside__text .rc-line { font-size: clamp(1.35rem, 2.2vw, 1.7rem); }

@media (min-width: 701px) {
  .rc-overword__word { grid-column: 2 / 9; grid-row: 1; margin-bottom: -.4em; }
  .rc-overword .rc-ph--terrace { grid-column: 3 / 13; grid-row: 2; }
  .rc-overword .rc-ph--terrace img { height: clamp(20rem, 58vh, 32rem); }
  .rc-overword__line { grid-column: 2 / 6; grid-row: 3; }
  .rc-beside__text { grid-column: 2 / 6; align-self: start; }
  .rc-beside .rc-ph--lounge { grid-column: 6 / 13; grid-row: 1; }
  .rc-beside .rc-ph--lounge img { height: clamp(22rem, 64vh, 36rem); }
  .rc-quotesec .rc-quote-xl { grid-column: 2 / 11; }
}
@media (max-width: 700px) {
  .rc-overword__word { margin-bottom: -.4em; }
  .rc-beside__text { margin-bottom: var(--sp-4); }
  /* the pair stacks: the bar full width first, the plate beneath it */
  .rc-pair .rc-ph--pairside, .rc-pair .rc-pair__video { margin-top: var(--sp-4); }
  .rc-band { min-height: clamp(22rem, 64svh, 34rem); padding-block: var(--sp-5); }
}

/* The home page runs tighter than the inner pages: photographs and their
   words sit as connected moments, so the long silences give way to rests. */
body[data-page="home"] .rc-cadence { margin-block-start: var(--rt-rest); }

/* --- menu ---------------------------------------------------------------- */

/* The course selector: quiet sentence-case words with small folio numerals,
   the chosen one in accent — stuck to the top of the viewport for the whole
   carte so the next course is always in reach. When the header strip is on
   screen the selector slides down and the two stack. */
.rc-carte-toc {
  position: sticky; top: 0; z-index: 110;
  background: var(--rc-bg);
  margin-top: clamp(var(--sp-4), 5vh, var(--sp-5));
  padding-block: var(--sp-1);
  transition: top 160ms linear;
}
html.rc-tabbed .rc-carte-toc { top: var(--rc-tab-h); }
.rc-carte-toc.is-stuck { box-shadow: 0 12px 40px var(--rc-shadow); }
.rc-carte-toc ol {
  list-style: none; margin: 0; padding: 0;
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap;
  gap: 0 clamp(var(--sp-3), 2.5vw, var(--sp-4));
}
.rc-carte-toc a {
  display: inline-flex; align-items: baseline; gap: var(--sp-1);
  padding: .45rem 0; min-height: 44px; text-decoration: none;
  white-space: nowrap;
  font-size: 1.05rem; font-weight: 500; color: var(--rc-text-soft);
  transition: color var(--rc-snap) linear;
}
.rc-carte-toc a .rc-toc__n {
  font-size: 1rem; line-height: inherit; color: var(--rc-text-faint);
}
.rc-carte-toc a:hover { color: var(--rc-text); }
.rc-carte-toc a[aria-current] { color: var(--rc-accent); font-weight: 600; }
.rc-carte-toc a[aria-current] .rc-toc__n { color: var(--rc-accent); }

/* The switch: .rc-score's display would beat the UA's [hidden] rule. */
.rc-menu-group[hidden] { display: none; }
/* The section takes programmatic focus when the strip switches it in; the
   focus ring belongs on the strip's link, not around the whole course. */
.rc-menu-group:focus-visible { outline: none; }
/* With one course on the page it sits close under its selector; the full
   no-script carte keeps the long rests between courses. */
.rc-js .rc-menu-group { margin-block-start: var(--sp-5); }

.rc-menu-group { margin-block-start: var(--sp-6); scroll-margin-top: calc(var(--rc-tab-h) + var(--sp-5)); }
.rc-menu-group__word {
  font-size: clamp(2rem, 3.6vw, 3rem); margin: 0 0 var(--sp-4);
}

/* One photograph opens the course: a half-bleed running to the left edge,
   the single mood-setter for everything listed beneath it. */
.rc-menu-hero { margin-block: var(--sp-4) var(--sp-5); }
.rc-menu-hero img { height: clamp(18rem, 46vh, 27rem); }

/* The course reads as a card: dish and price share one line, the price on
   a steady right edge; beneath, one quieter line carries the topping list
   or the Italian name from the printed card, allergen codes at its end. */
.rc-menu-list {
  list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3);
  max-width: 42rem;   /* a reading measure, not a layout statement */
}
.rc-menu-item { line-height: 1.45; }
.rc-menu-item__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3);
}
.rc-menu-item__name { font-size: 1.06rem; font-weight: 600; }
.rc-menu-item__price {
  font-family: var(--rc-display); font-variant-numeric: lining-nums;
  font-size: 1.1rem; white-space: nowrap;
}
.rc-menu-item__sub {
  display: block; margin-top: .1rem;
  font-size: .92rem; color: var(--rc-text-soft);
}
.rc-menu-item__note {
  display: block; margin-top: .15rem;
  font-size: .88rem; color: var(--rc-text-faint);
}
.rc-menu-item__all {
  margin-left: var(--sp-1); font-size: .75rem; letter-spacing: .04em;
  color: var(--rc-text-faint); font-variant-numeric: lining-nums;
}

.rc-menu-notes { margin-block-start: var(--sp-6); }
.rc-menu-notes h3 { margin: 0 0 var(--sp-1); font-size: .95rem; font-weight: 500; color: var(--rc-text-soft); }
.rc-menu-notes p { font-size: .88rem; line-height: 1.7; color: var(--rc-text-faint); }

@media (min-width: 701px) {
  .rc-menu-group__word { grid-column: 1 / 7; margin-inline-start: -1.5vw; }
  .rc-menu-hero { grid-column: 1 / 11; }
  .rc-menu-list { grid-column: 2 / 10; }
  .rc-menu-notes__col:first-child { grid-column: 2 / 5; }
  .rc-menu-notes__col:last-child  { grid-column: 6 / 9; }
}
/* between the breakpoints the ledger takes an extra column of measure */
@media (min-width: 701px) and (max-width: 1000px) {
  .rc-menu-list { grid-column: 2 / 11; }
}
/* wide screens: the list runs two dishes abreast beneath the one photo */
@media (min-width: 1001px) {
  .rc-menu-list {
    grid-column: 2 / 12; max-width: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3) var(--sp-6);
  }
}
/* between the breakpoints the hours take an extra column of measure */
@media (min-width: 701px) and (max-width: 1000px) {
  .rc-hours-moment .rc-wordlabel,
  .rc-hours-moment .rc-hours { grid-column: 9 / 13; }
}
@media (max-width: 700px) {
  .rc-carte-toc .rc-toc__n { display: none; }   /* words only in the strip */
  .rc-menu-hero { margin-block: var(--sp-3) var(--sp-4); }
  .rc-menu-hero img { height: clamp(14rem, 38vh, 20rem); }
  .rc-menu-notes__col + .rc-menu-notes__col { margin-top: var(--sp-4); }
}

/* --- contact ------------------------------------------------------------- */

.rc-note p { max-width: 26rem; color: var(--rc-text-soft); margin: 0; }

.rc-hours { border-collapse: collapse; font-size: 1rem; width: 100%; }
.rc-hours th {
  text-align: left; font-weight: 400; color: var(--rc-text-soft);
  padding: .45rem 0;
}
.rc-hours td {
  text-align: right; padding: .45rem 0;
  font-family: var(--rc-display); font-variant-numeric: lining-nums;
  font-size: 1.2rem;
}
.rc-hours__today th, .rc-hours__today td { color: var(--rc-accent); }

.rc-map { aspect-ratio: 4 / 3; overflow: hidden; background: var(--rc-bg-alt); }
.rc-map iframe { width: 100%; height: 100%; border: 0; filter: sepia(.15) saturate(.75); }

@media (min-width: 701px) {
  .rc-note--a { grid-column: 2 / 6; }
  .rc-note--b { grid-column: 7 / 11; margin-top: var(--sp-6); }
  .rc-note--c { grid-column: 2 / 6; margin-top: var(--sp-4); }
  .rc-notes { grid-auto-flow: row dense; }
  .rc-hours-moment .rc-ph--exterior { grid-column: 1 / 9; grid-row: 1 / 3; }
  .rc-hours-moment .rc-wordlabel { grid-column: 10 / 13; grid-row: 1; align-self: end; }
  .rc-hours-moment .rc-hours { grid-column: 10 / 13; grid-row: 2; align-self: start; }
  .rc-map-moment .rc-map { grid-column: 5 / 13; margin-right: -4vw; }
}
@media (max-width: 700px) {
  .rc-note + .rc-note { margin-top: var(--sp-4); }
}

/* --- the reservation room ------------------------------------------------ */
/* A full-viewport moment on the site's own paper; one oversized question
   at a time. The hush is compositional, not tonal. */

.rc-room {
  background: var(--rc-room-bg);
  color: var(--rc-room-ink);
  min-height: 100svh;
  margin-top: var(--rt-beat);
  padding-block: clamp(var(--sp-5), 14vh, var(--sp-7)) var(--rt-beat);
}
.rc-room a { color: var(--rc-room-accent); }
.rc-room a:hover { color: var(--rc-room-accent); }
.rc-room :focus-visible { outline-color: var(--rc-room-accent); }
.rc-room .rc-fineprint { color: var(--rc-room-soft); }
.rc-room .rc-textlink { color: var(--rc-room-accent); }

.rc-room__fine { margin-top: var(--rt-beat); font-size: .85rem; color: var(--rc-room-soft); }

.rc-widget { display: block; }
@media (min-width: 701px) {
  .rc-room__grid .rc-widget {
    grid-column: 2 / 12;
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    column-gap: clamp(var(--sp-4), 6vw, var(--sp-6));
  }
  .rc-room__flow { grid-column: 1; grid-row: 1; }
  .rc-widget .rc-steps { grid-column: 2; grid-row: 1; }
}

/* the question */
.rc-q {
  font-family: var(--rc-display); font-weight: 400;
  font-size: clamp(2.3rem, 5.5vw, 4.2rem); line-height: 1.05;
  margin: 0 0 1.1em; color: var(--rc-room-ink);
}
.rc-q--second { margin-top: 1.6em; }

/* progress: a quiet stack of serif numerals in the margin */
.rc-steps {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--sp-3);
  /* 3rem floor: deliberately under the room floor for short screens */
  position: sticky; top: clamp(3rem, 14vh, var(--sp-7)); align-self: start;
}
.rc-steps__n {
  font-family: var(--rc-display); font-variant-numeric: lining-nums;
  font-size: 1.3rem; line-height: 1; color: var(--rc-room-faint);
  transition: color var(--rc-snap) linear;
}
.rc-steps__label {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.rc-steps li { display: flex; align-items: baseline; gap: .7rem; }
.rc-steps .is-active .rc-steps__n { color: var(--rc-room-accent); }
.rc-steps .is-active .rc-steps__label {
  position: static; width: auto; height: auto; margin: 0; clip: auto;
  overflow: visible; white-space: normal;
  font-size: .85rem; color: var(--rc-room-ink);
}
.rc-steps .is-done .rc-steps__n { color: var(--rc-room-soft); }
@media (max-width: 700px) {
  .rc-steps {
    position: static; flex-direction: row; gap: var(--sp-3);
    margin-bottom: var(--sp-4);
  }
}

/* dates: bare type, a dot marks the chosen day */
.rc-daystrip {
  display: flex; gap: clamp(var(--sp-2), 2.5vw, var(--sp-4));
  overflow-x: auto; padding-bottom: var(--sp-1); scrollbar-width: thin;
}
.rc-day {
  flex: none; min-width: 44px; min-height: 44px; padding: .2rem .15rem;
  background: none; border: 0; cursor: pointer; font: inherit;
  color: var(--rc-room-ink); text-align: center; line-height: 1.15;
}
.rc-day__dow { display: block; font-size: .68rem; color: var(--rc-room-soft); }
.rc-day__num {
  display: block; font-family: var(--rc-display);
  font-variant-numeric: lining-nums; font-size: 1.9rem;
  transition: color var(--rc-snap) linear;
}
.rc-day__mon { display: block; font-size: .62rem; color: var(--rc-room-soft); }
.rc-day::after {
  content: ""; display: block; width: 5px; height: 5px; border-radius: 50%;
  margin: .45rem auto 0; background: transparent;
}
.rc-day:hover .rc-day__num { color: var(--rc-room-accent); }
.rc-day.is-selected .rc-day__num { color: var(--rc-room-accent); }
.rc-day.is-selected::after { background: var(--rc-room-accent); }

/* party: bare serif numerals with the same dot */
.rc-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1) clamp(var(--sp-2), 2vw, var(--sp-3)); }
.rc-chip {
  min-width: 44px; min-height: 44px; padding: .25rem .3rem;
  background: none; border: 0; cursor: pointer; font: inherit;
  font-family: var(--rc-display); font-variant-numeric: lining-nums;
  font-size: 1.55rem; color: var(--rc-room-ink);
  transition: color var(--rc-snap) linear;
}
.rc-chip::after {
  content: ""; display: block; width: 5px; height: 5px; border-radius: 50%;
  margin: .3rem auto 0; background: transparent;
}
.rc-chip:hover { color: var(--rc-room-accent); }
.rc-chip.is-selected { color: var(--rc-room-accent); }
.rc-chip.is-selected::after { background: var(--rc-room-accent); }

/* the recap — one serif sentence, not a label/value/change strip */
.rc-recap { display: block; margin-bottom: var(--sp-4); }
.rc-recap > div { display: inline; }
.rc-recap__label {
  font-family: var(--rc-display); font-weight: 400;
  font-size: 1.4rem; color: var(--rc-room-soft);
}
.rc-recap strong {
  font-family: var(--rc-display); font-weight: 400;
  font-variant-numeric: lining-nums; font-size: 1.4rem;
}
.rc-recap .rc-textlink { padding: 0; font-size: 1.05rem; }
.rc-recap .rc-textlink::before {
  content: "\00B7"; color: var(--rc-room-soft); margin-right: .5em;
}

/* times: ragged flowing lines of bare serif figures — no boxes, no grid */
.rc-service { margin-bottom: var(--sp-4); }
.rc-service__title {
  font-family: var(--rc-display); font-style: normal; font-weight: 400;
  font-size: 1.55rem; margin: 0 0 var(--sp-2); color: var(--rc-room-ink);
}
.rc-slots {
  display: flex; flex-wrap: wrap; align-items: baseline;
  column-gap: clamp(var(--sp-3), 3vw, var(--sp-4)); row-gap: var(--sp-2);
}
.rc-slot {
  padding: .3rem .1rem; min-height: 44px;
  background: none; border: 0; cursor: pointer; font: inherit;
  font-family: var(--rc-display); font-variant-numeric: lining-nums;
  font-size: 1.45rem; color: var(--rc-room-ink); text-align: center;
  transition: color var(--rc-snap) linear;
}
.rc-slot:hover:not([disabled]) { color: var(--rc-room-accent); }
.rc-slot__tag {
  display: inline-block; margin-left: .3rem;
  font-family: var(--rc-body); font-size: .62rem; vertical-align: .55em;
  color: var(--rc-room-accent);
}
.rc-slot[disabled] {
  color: var(--rc-room-faint); cursor: not-allowed;
}
.rc-loading { color: var(--rc-room-soft); }
.rc-empty { padding: var(--sp-3) 0; color: var(--rc-text-soft); }
.rc-room .rc-empty { color: var(--rc-room-soft); }

/* --- fields: quiet filled blocks ----------------------------------------- */
/* The base field works on paper too (the admin sheet uses it); the room
   recolours it through the pinned materials. */

.rc-field-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); max-width: 34rem; }
@media (min-width: 701px) {
  .rc-field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 40rem; }
  .rc-field--full { grid-column: 1 / -1; }
}

.rc-field label {
  display: block; font-size: .9rem; font-weight: 500;
  color: var(--rc-text-soft); margin-bottom: var(--sp-1);
}
.rc-field input, .rc-field textarea {
  width: 100%; font-family: var(--rc-display); font-size: 1.25rem;
  color: var(--rc-text);
  background: var(--rc-bg-alt);
  border: 1px solid var(--rc-rule); border-radius: var(--rc-radius);
  padding: .85rem 1.05rem;
  transition: border-color var(--rc-snap) linear, box-shadow var(--rc-snap) linear;
}
.rc-field textarea { resize: vertical; min-height: 5rem; font-size: 1.15rem; }
.rc-field input:focus, .rc-field textarea:focus {
  outline: none; border-color: var(--rc-accent);
  box-shadow: inset 0 0 0 1px var(--rc-accent);
}
.rc-field input[aria-invalid="true"], .rc-field textarea[aria-invalid="true"] { border-color: var(--rc-accent); }


.rc-field--date { max-width: 15rem; margin-top: 1.25rem; }
.rc-field--date input { font-size: 1.05rem; }

.rc-field__error { display: none; font-size: .88rem; color: var(--rc-accent); margin: .6rem 0 0; }
.rc-room .rc-field__error { color: var(--rc-room-accent); }
.rc-field__error[data-shown="true"] { display: block; }

.rc-step__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-4); }

/* the alert: an accent sentence, not a box; a warn is calm ivory */
.rc-alert { padding: 0 0 var(--sp-3); font-size: 1rem; color: var(--rc-room-accent); }
.rc-alert--warn { color: var(--rc-room-ink); }
.rc-alert__intro { margin: .9rem 0 0; font-size: .85rem; color: var(--rc-room-soft); }

/* Alternative times offered in an alert speak the same voice as the slot
   lines: bare serif figures, no chips. */
.rc-alert__times {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--sp-2) clamp(var(--sp-3), 3vw, var(--sp-4)); margin-top: .75rem;
}
.rc-alert__times .rc-btn {
  border: 0; background: none; padding: .3rem .1rem; min-height: 44px;
  font-family: var(--rc-display); font-weight: 400; font-variant-numeric: lining-nums;
  font-size: 1.45rem; color: var(--rc-room-ink);
}
.rc-alert__times .rc-btn:hover { color: var(--rc-room-accent); }

/* --- the ticket ----------------------------------------------------------- */
/* The confirmation is an ivory paper block on the espresso — the site's
   paper handed back, printed. Pinned colours in both schemes. */

.rc-confirm:focus, .rc-confirm:focus-visible { outline: none; }

.rc-ticket {
  background: var(--rc-paper); color: var(--rc-paper-ink);
  border: 1px solid color-mix(in srgb, var(--rc-text) 35%, transparent);
  border-radius: var(--rc-radius);
  padding: clamp(var(--sp-3), 4vw, var(--sp-4));
  max-width: 30rem;
}
.rc-ticket h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.4rem); margin-bottom: .4em;
  color: var(--rc-paper-ink);
}
.rc-ticket__sub { font-size: .9rem; color: var(--rc-paper-soft); margin-bottom: var(--sp-3x); }
.rc-confirm__ref {
  display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap;
  margin: 0 0 var(--sp-3x);
}
.rc-ticket__reflabel { font-size: .85rem; color: var(--rc-paper-soft); }
.rc-confirm__ref span:last-child {
  font-family: var(--rc-display); font-variant-numeric: lining-nums;
  font-size: 1.45rem; letter-spacing: .06em; color: var(--rc-paper-ink);
}
.rc-summary { margin: 0 0 var(--sp-3); padding: 0; display: grid; gap: .55rem; }
.rc-summary div { display: flex; align-items: baseline; gap: .8rem; }
.rc-summary dt { font-size: .85rem; color: var(--rc-paper-soft); min-width: 5.5rem; }
.rc-summary dd { margin: 0; font-family: var(--rc-display); font-size: 1.25rem; }
.rc-ticket .rc-fineprint { color: var(--rc-paper-soft); }
.rc-ticket__ph { margin-top: var(--sp-3); }
.rc-ticket__ph img { aspect-ratio: 21 / 9; height: auto; object-fit: cover; width: 100%; }
.rc-ticket .rc-alert { color: var(--rc-paper-accent); padding-bottom: var(--sp-2); }
.rc-ticket .rc-btn--quiet { color: var(--rc-paper-ink); }
.rc-ticket .rc-btn--quiet:hover { color: var(--rc-paper-accent); }
.rc-ticket .rc-textlink { color: var(--rc-paper-accent); }
.rc-ticket .rc-step__actions { margin-top: var(--sp-3x); }

/* --- step changes: the snap ----------------------------------------------- */
/* The four steps are states of one component. The script's mechanics are
   untouched (absolute outgoing step, height-animating stage, a 380ms settle
   timer) — but the site is still, so the durations are collapsed to nothing:
   the room simply IS in the next state, like a light switched. The timer
   then merely settles classes late, which is safe. */

.rc-widget__stage {
  position: relative;
  /* `contain` scopes any recalculation to this box so the page is not
     relaid out while the stage's inline height is set and cleared. */
  contain: layout paint;
  transition: height var(--rc-step-dur, var(--rc-dur)) var(--rc-step-ease);
}
:root { --rc-step-ease: linear; --rc-step-dur: 1ms; }

.rc-step { transition: opacity var(--rc-step-dur) var(--rc-step-ease); }

/* leaving: lifted out of flow so the incoming step defines the new height */
.rc-step.is-leaving {
  position: absolute; top: 0; left: 0; width: 100%;
  opacity: 0; pointer-events: none;
}
.rc-step.is-leaving.to-left,
.rc-step.is-leaving.to-right { transform: none; }

/* entering: transparent, then released to 1 — a dissolve, no slide */
.rc-step.is-entering { opacity: 0; }
.rc-step.is-entering.from-right,
.rc-step.is-entering.from-left { transform: none; }

@media (prefers-reduced-motion: reduce) {
  :root { --rc-step-dur: 1ms; }
}

/* --- footer: the colophon -------------------------------------------------- */
/* On the page's own paper. An asterism closes the text; below it, an
   asymmetric two-column block and one quiet row of pages. */

.rc-footer {
  background: var(--rc-bg); color: var(--rc-text);
  padding-block: var(--rt-rest) var(--sp-4);
}
.rc-room + .rc-footer,
main:has(.rc-room) + .rc-footer { padding-block-start: var(--rt-beat); }

.rc-footer__end {
  text-align: center; font-size: 1.5rem; color: var(--rc-accent);
  margin: 0 0 var(--rt-beat);
}
.rc-footer__name {
  font-family: var(--rc-display); font-size: 1.6rem; line-height: 1.2;
  margin: 0 0 var(--sp-3); color: var(--rc-text);
}
.rc-footer__id p { color: var(--rc-text-soft); font-size: .95rem; margin-bottom: var(--sp-1); }
.rc-footer__id p.rc-footer__name { color: var(--rc-text); font-size: 1.6rem; }
.rc-footer__tel a {
  font-family: var(--rc-display); font-variant-numeric: lining-nums;
  font-size: 1.35rem; color: var(--rc-accent); text-decoration: none;
}
.rc-footer__tel a:hover { text-decoration: underline; text-underline-offset: 4px; }

.rc-footer h4 {
  font-family: var(--rc-body); font-size: .95rem; font-weight: 500;
  color: var(--rc-text-soft); margin: 0 0 var(--sp-2);
}
/* Hours as a wrapped run of day–time pairs, not a stacked label/value
   column: each entry is one small unit in a flowing line. */
.rc-hours-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3);
}
.rc-hours-list li {
  display: flex; align-items: baseline; gap: .55rem;
  font-size: .92rem; color: var(--rc-text-soft);
}
.rc-hours-list li span:last-child {
  font-family: var(--rc-display); font-variant-numeric: lining-nums;
  font-size: 1.05rem;
}
.rc-hours-list .rc-hours__today { color: var(--rc-text); }
.rc-hours-list .rc-hours__today span:last-child { color: var(--rc-accent); }

.rc-footer__pages ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: baseline;
}
.rc-footer__pages li { display: flex; align-items: baseline; }
.rc-footer__pages li:not(:last-child)::after {
  content: "·"; margin-inline: .8rem; color: var(--rc-text-faint);
}
.rc-footer__pages a {
  font-size: .92rem; color: var(--rc-text-soft); text-decoration: none;
  transition: color var(--rc-snap) linear; padding-block: .3rem; display: inline-block;
}
.rc-footer__pages a:hover { color: var(--rc-text); }

.rc-footer__base {
  text-align: center; font-size: .8rem;
  color: var(--rc-text-faint); margin-top: var(--sp-5);
}

@media (min-width: 701px) {
  .rc-footer__id { grid-column: 2 / 7; }
  .rc-footer__hours { grid-column: 8 / 12; }
  .rc-footer__pages { grid-column: 2 / 12; margin-top: var(--sp-5); }
  .rc-footer__base { grid-column: 2 / 12; }
}
@media (max-width: 700px) {
  .rc-footer__hours { margin-top: var(--sp-4); }
  .rc-footer__pages { margin-top: var(--sp-4); }
}

/* --- admin dashboard ----------------------------------------------------- */
/* Staff tool, not the public site: legibility beats restraint here. These
   blocks also keep the handful of legacy classes admin.html relies on. */

.rc-shell { width: min(100% - 3rem, var(--rc-shell)); margin-inline: auto; }
.rc-section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.rc-eyebrow {
  display: block; font-size: .85rem; font-weight: 600;
  color: var(--rc-text-faint); margin-bottom: 1rem;
}
.rc-nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 64px; padding-block: .5rem;
}
.rc-nav__links { display: flex; align-items: center; gap: 1.25rem; }
.rc-nav__link { color: var(--rc-text-soft); text-decoration: none; font-size: .95rem; }
.rc-nav__link:hover { color: var(--rc-text); }

.rc-panel { border: 1px solid var(--rc-rule); border-radius: var(--rc-radius); padding: clamp(1.4rem, 3vw, 2rem); background: var(--rc-surface); }
.rc-admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.rc-stat { border: 1px solid var(--rc-rule); border-radius: var(--rc-radius); padding: 1.1rem 1.25rem; background: var(--rc-surface); }
.rc-stat__value { font-family: var(--rc-display); font-size: 2rem; line-height: 1; }
.rc-stat__label { font-size: .8rem; color: var(--rc-text-faint); margin-top: .45rem; }

.rc-table-wrap { overflow-x: auto; border: 1px solid var(--rc-rule); border-radius: var(--rc-radius); background: var(--rc-surface); }
.rc-table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 900px; }
.rc-table th { text-align: left; font-size: .78rem; color: var(--rc-text-faint); padding: .85rem 1rem; border-bottom: 1px solid var(--rc-rule); background: var(--rc-bg-alt); position: sticky; top: 0; }
.rc-table td { padding: .85rem 1rem; border-bottom: 1px solid var(--rc-rule); vertical-align: top; }
.rc-table tr:last-child td { border-bottom: none; }
.rc-table__when { white-space: nowrap; }
.rc-table__muted { color: var(--rc-text-faint); font-size: .85rem; }

.rc-pill { display: inline-block; font-size: .78rem; padding: .2rem .5rem; border: 1px solid var(--rc-rule); border-radius: var(--rc-radius); white-space: nowrap; color: var(--rc-text-soft); }
.rc-pill--confirmed { border-color: var(--rc-text-soft); color: var(--rc-text); }
.rc-pill--cancelled { color: var(--rc-text-faint); }
.rc-pill--busy { border-color: var(--rc-accent); color: var(--rc-accent); }
.rc-pill--new { border-color: var(--rc-accent); color: var(--rc-accent); font-weight: 600; }
.rc-pill--lang { text-transform: uppercase; letter-spacing: .04em; }

.rc-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: 1.5rem; }
.rc-toolbar__spacer { margin-left: auto; }

/* admin fields sit on paper: readable on the light surface */
.rc-panel .rc-field input { font-family: var(--rc-body); font-size: 1rem; }

/* --- utilities ----------------------------------------------------------- */

.rc-mt-1 { margin-top: 1.5rem; }
.rc-mt-2 { margin-top: clamp(2.5rem, 5vw, 4rem); }
.rc-hidden { display: none !important; }
.rc-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Delays too: the overlay's hide-side visibility delay would otherwise
     leave a closed, invisible panel blocking clicks for its full length. */
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
  }
}

@media print {
  .rc-nav, .rc-tab, .rc-toc, .rc-footer, .rc-btn, .rc-carte-toc { display: none !important; }
  body { background: #fff; color: #000; }
  /* the whole carte prints, whatever category was on screen — with one
     deliberate compact rhythm regardless of how the page was viewed */
  .rc-menu-group[hidden] { display: grid !important; }
  [data-rc-print-for][hidden] { display: block !important; }
  .rc-menu-group { margin-block-start: 3rem !important; }
  /* the room already speaks paper; just keep the sheet to one page */
  .rc-room { min-height: auto; margin-top: 0; padding-block: var(--sp-4); }
  :root { --rc-room-bg: #fff; --rc-room-fill: transparent; }
}

/* --- dormant machinery ----------------------------------------------------
   The scroll-reveal and image-fade systems in retrocafe-site.js are part of
   the shared infrastructure and stay wired, but no element on this design
   carries data-rc-reveal or data-rc-img: the pages are deliberately still.
   The rules stay so the machinery remains safe to re-enable.
   -------------------------------------------------------------------------- */

html.rc-reveal-ready [data-rc-reveal] {
  opacity: 0;
  transition: opacity var(--rc-dur) var(--rc-ease);
}
html.rc-reveal-ready [data-rc-reveal].is-revealed { opacity: 1; }

.rc-js img[data-rc-img] { opacity: 0; transition: opacity var(--rc-dur) var(--rc-ease); }
.rc-js img[data-rc-img].is-loaded { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html.rc-reveal-ready [data-rc-reveal] { opacity: 1; }
  .rc-js img[data-rc-img] { opacity: 1; }
}