/* =====================================================================
   Pain et Vin — shared design system
   Every page links this file; page-specific rules stay in the page.

   The look is deliberately plain: paper-white ground, one ink, one
   accent, square corners, hairline rules, no shadows or gradients. The
   logo's line art is the only ornament the site gets — everything else
   is type and space. Anything decorative added here should be argued
   for, not defaulted to.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------ */
:root{
  color-scheme: light;

  /* ground + ink.  --ink is lifted straight out of the logo artwork, so
     type and mark are the same black rather than two nearly-blacks. */
  --paper: #FFFFFF;    /* the only ground. GlouGlou has no second colour. */
  --ink:   #161112;
  --tint:  rgba(22,17,18,.045);   /* hover only, never a section background */

  /* one accent, used sparingly: links, the selected date, live counts */
  --wine:       #8C2A38;

  /* foreground ramp — everything derives from --ink so the page stays
     monochrome even when a rule forgets to be careful */
  --fg:        var(--ink);
  --fg-2:      rgba(22,17,18,.68);
  --fg-3:      rgba(22,17,18,.45);
  --hair:      rgba(22,17,18,.20);
  --hair-soft: rgba(22,17,18,.09);
  --surface-2: var(--tint);
  --label:     var(--fg-3);

  /* feedback */
  --ok:  #3F6B45;
  --warn:#8A5A22;
  --bad: #9A3434;

  /* type — one family, following the reference's plainness.  System
     faces load nothing at all, which is also why the pages carry no
     font <link> tags. */
  --f-body: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* The only webfont on the site: the two landing links. Zilla Slab is the
     closest match to the logo's lettering, which is outlined in the original
     artwork and so cannot be re-set directly. */
  --f-link: 'Zilla Slab', Rockwell, 'Roboto Slab', Georgia, serif;
  /* Spanish is set in the same face, italic. Below the drawing the site runs
     in both languages, and the change of face — not a flag, a toggle or a
     bracket — is what tells them apart. Reusing the hero's family means the
     second language arrives in the shop's own lettering rather than in a font
     bolted on for the job, and costs no extra download beyond the italic.
     No size compensation: Zilla's x-height already matches the system sans. */
  --f-es:   'Zilla Slab', Rockwell, 'Roboto Slab', Georgia, serif;
  /* No third family: numerals get tabular-nums instead. */

  /* a short, fixed scale — no fluid drama below the display sizes */
  --t-xs:   0.75rem;    /* 12 */
  --t-sm:   0.8125rem;  /* 13 */
  --t-base: 1rem;       /* 16 */
  --t-md:   1.125rem;   /* 18 */
  --t-lg:   1.25rem;    /* 20 */
  --t-h3:   1.25rem;    /* 20 */
  --t-h2:   1.5625rem;  /* 25 */
  --t-h1:   clamp(1.5625rem, 1.3rem + 1.2vw, 1.875rem);  /* 25 -> 30 */

  /* shape — square throughout. There is no radius scale on purpose;
     the only round things left are the dots in .chip--dot. */

  /* rhythm */
  --gutter:    clamp(20px, 5vw, 40px);
  --section-y: clamp(64px, 7vw, 104px);
  --maxw:      1100px;

  --ease: cubic-bezier(.22,.68,.28,1);
}

/* ---------------------------------------------------------------------
   2. Reset + base
   ------------------------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }
/* No scroll-padding: every anchor here is a section with 64-104px of its own
   padding, so an offset only ever pushed the target down the window. It also
   had to be cancelled for #visit with a negative scroll-margin, which Safari
   does not honour — which is why the arrow from the hero landed a strip of
   the drawing short of the section it points at. */
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:var(--f-body);
  font-size:var(--t-base);
  line-height:1.55;
  color:var(--fg);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

h1,h2,h3,h4{ font-weight:600; line-height:1.25; letter-spacing:-0.01em; }
h1{ font-size:var(--t-h1); }
h2{ font-size:var(--t-h2); }
h3{ font-size:var(--t-h3); line-height:1.25; }
h4{ font-size:var(--t-base); }
em{ font-style:italic; }
strong,b{ font-weight:600; }
a{ color:inherit; }

/* The address, wherever it is printed, opening our Google listing. It sits
   inside running text in three of the four places it appears, so it takes the
   colour and size of the line it is in and marks itself with a hairline
   instead — the same underline the contact rows use, for the same reason: a
   link that reads as part of the sentence until you look for it. */
.map-link{
  color:inherit; text-decoration:none;
  border-bottom:1px solid var(--hair); padding-bottom:1px;
  transition:border-color .2s ease;
}
.map-link:hover{ border-bottom-color:currentColor; }
img,svg{ display:block; max-width:100%; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:none; cursor:pointer; }
::selection{ background:var(--ink); color:var(--paper); }

:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Numerals that have to line up in a column — dates, seat counts, times. */
.mono,
.week-day__head .dd,
.seat-slot__time, .seat-slot__left,
.summary-line .val, .detail-box .val{
  font-variant-numeric:tabular-nums;
  letter-spacing:0;
}

/* Scroll reveal — only armed once JS confirms it can un-arm it again.
   Fade only; the reference sites barely move at all. */
.js [data-reveal]{
  opacity:0;
  transition:opacity .5s var(--ease);
  transition-delay:var(--reveal-delay, 0ms);
}
.js [data-reveal].is-in{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  .js [data-reveal]{ opacity:1; transition:none; }
}

/* ---------------------------------------------------------------------
   3. Sections + headings
   ------------------------------------------------------------------ */
.section{ position:relative; padding-block:var(--section-y); }

/* Sections are separated by space alone — no rules, no colour changes. */

/* The ambient bloom the dark design used. Deliberately inert. */
.glow{ display:none; }

.eyebrow{
  font-size:var(--t-xs);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--label);
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{
  content:''; width:18px; height:1px; background:currentColor; flex:none;
}

/* One column per language, so a section head is the pair of columns rather
   than a title beside a lede — each language's eyebrow, title and lede stack
   together under one another. Sizing and spacing come from .bilingual. */
.section-head{
  display:grid;
  align-items:start; gap:clamp(20px,4vw,56px);
  margin-bottom:clamp(34px,4.5vw,58px);
}
.section-head h2{ margin-top:14px; max-width:18ch; }
.section-head .lede{ color:var(--fg-2); font-size:var(--t-md); max-width:46ch; margin-top:18px; }
@media (max-width:760px){
  .section-head h2{ max-width:20ch; }
}

/* The cue again, for the foot of an ordinary section. The hero's is placed
   against the bottom of a screen-tall box; this one simply ends its section,
   so it sits in the flow and centres itself. Same strokes, same bob. */
.section-down{
  display:grid; place-items:center;
  width:clamp(64px,6vw,84px); aspect-ratio:1;
  /* Close to the rows above it rather than stranded below them: it was far
     enough down that on a laptop it sat under the fold at exactly the moment
     it was needed — the section looked finished, with the way on out of
     sight. It is also never faded in, unlike everything around it: a reveal
     that waits to be scrolled into view is the wrong idea for the thing whose
     whole job is to say "keep scrolling". */
  margin:clamp(14px,2.4vw,28px) auto 0;
  color:var(--ink);
  transition:color .18s var(--ease);
}
.section-down svg{ width:clamp(34px,3.2vw,44px); height:auto; overflow:visible; }
.section-down:hover{ color:var(--wine); }

.divider{ height:1px; background:var(--hair); margin-block:22px; }
.lede{ font-size:var(--t-md); color:var(--fg-2); }

/* ---- bilingual ------------------------------------------------------
   Every prose block below the drawing is written twice: English first in
   the system sans, Spanish second in --f-es. lang="es" carries the
   language (so screen readers switch voice and hyphenation follows the
   right rules) and is also what applies the face — the two always travel
   together, so there is no way to set Spanish and forget to mark it.
   .es is the spacing half of the job, kept separate from the language. */
[lang="es"]{
  font-family:var(--f-es);
  font-style:italic;
  line-height:1.5;
}
/* Zilla's italic caps are narrower than the sans, so the eyebrow's tracking
   needs easing off or the words drift apart. */
[lang="es"].eyebrow{ letter-spacing:.11em; }

/* A Spanish block that follows its English twin. The face change does the
   telling-apart; this only stops the two running into each other. */
.es{ margin-top:20px; }
/* Where there's no eyebrow to open the Spanish, a hairline does it instead. */
.es--rule{ margin-top:24px; padding-top:22px; border-top:1px solid var(--hair-soft); }
/* Spanish riding along inside an English line (a link, a button). */
.es-inline{ font-family:var(--f-es); font-style:italic; }
/* Spanish on its own line, keeping the label styling of the line above it —
   for headings too long to take a "· " and a second language inline. */
/* --- bilingual pairs, side by side -------------------------------------
   English and Spanish as two columns rather than one above the other. The
   hairline that separated them when stacked becomes the rule between the
   columns, so the pair still reads as one thing split in two.

   Below the breakpoint they stack again — two columns of prose in a phone
   width is about eighteen characters a line — and there the ORDER matters,
   because whichever is on top is the one that gets read. A Spanish-speaking
   browser gets Spanish first. See the note on data-lang-first in index.html
   for why the browser's language rather than the visitor's country. */
.bilingual{ display:grid; grid-template-columns:1fr 1fr; align-items:start; gap:0; }
.bilingual__en{ padding-right:clamp(18px,2.6vw,40px); }
.bilingual__es{
  padding-left:clamp(18px,2.6vw,40px);
  border-left:1px solid var(--hair-soft);
}
/* The column rule already separates them, so the stacked spacing goes. */
.bilingual .es,
.bilingual .es--rule{ margin-top:0; padding-top:0; border-top:none; }

@media (max-width:700px){
  .bilingual{ grid-template-columns:1fr; }
  .bilingual__en{ padding-right:0; }
  .bilingual__es{
    padding-left:0; border-left:none;
    margin-top:24px; padding-top:22px; border-top:1px solid var(--hair-soft);
  }
  /* Spanish on top, and the rule moves with it to sit between the two. */
  :root[data-lang-first="es"] .bilingual__es{
    order:-1; margin-top:0; padding-top:0; border-top:none;
  }
  :root[data-lang-first="es"] .bilingual__en{
    margin-top:24px; padding-top:22px; border-top:1px solid var(--hair-soft);
  }
}

.es-line{ display:block; font-family:var(--f-es); font-style:italic; letter-spacing:.11em; }
/* Spanish sitting under its English label rather than beside it — for the
   summary rows, where the label shares a line with a right-aligned value
   and has no room to grow sideways. */
.es-sub{
  display:block; font-family:var(--f-es); font-style:italic;
  font-size:.94em; color:var(--fg-3); letter-spacing:0; text-transform:none;
}
/* Bilingual button: English on top, Spanish under it a size down. .btn is an
   inline-flex row, so stacking needs the axis turned rather than display:block
   — a block flex item still sits beside its sibling. */
.btn:has(.es-inline){
  flex-direction:column; align-items:center; gap:1px;
  white-space:normal; line-height:1.3;
}
/* The Spanish line matches the English in size. It stays italic, which is
   how Spanish is voiced everywhere on this site — the distinction is the
   typeface, not a smaller one. */
.btn .es-inline{ font-size:1em; opacity:.82; }

/* .btn is inline-flex, so it centres from the parent rather than by margin. */
.btn-row{ margin-top:30px; text-align:center; }

/* ---------------------------------------------------------------------
   4. Buttons — GlouGlou has none. So neither do we, bar the one that
      takes money: everything else is a word with a rule under it.
   ------------------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; gap:7px;
  padding:0; border:none; background:none;
  font-size:var(--t-base); font-weight:400; color:var(--ink);
  text-decoration:underline; text-underline-offset:4px;
  text-decoration-color:var(--hair);
  white-space:nowrap;
  transition:text-decoration-color .18s var(--ease), color .18s var(--ease);
}
.btn:hover{ text-decoration-color:currentColor; }
.btn:disabled{ cursor:not-allowed; color:var(--fg-3); text-decoration-color:transparent; }

/* The single exception: the action that takes money. It is the only filled
   shape on the page, which is exactly why it reads as the thing to press. */
.btn--primary{
  padding:13px 24px; justify-content:center;
  background:var(--ink); color:var(--paper);
  text-decoration:none; font-weight:500; font-size:var(--t-sm);
}
.btn--primary:hover{ background:var(--wine); color:var(--paper); }
.btn--primary:disabled{
  background:transparent; color:var(--fg-3);
  box-shadow:inset 0 0 0 1px var(--hair);
}

.btn--ghost{ color:var(--fg-2); }
.btn--block{ width:100%; }

.link-quiet{
  color:var(--fg-3); font-size:var(--t-sm);
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--hair);
  transition:color .18s, text-decoration-color .18s;
}
.link-quiet:hover{ color:var(--ink); text-decoration-color:currentColor; }

/* ---------------------------------------------------------------------
   5. Chips + tags + cards
   ------------------------------------------------------------------ */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  font-size:var(--t-xs); letter-spacing:.02em; color:var(--fg-3);
}
.chip--dot::before{
  content:''; width:5px; height:5px; border-radius:50%;
  background:currentColor; flex:none;
}

.tag{
  font-size:var(--t-xs); letter-spacing:.12em; text-transform:uppercase;
  color:var(--fg-3); white-space:nowrap;
}

/* ---------------------------------------------------------------------
   6. Brand lockup
      There is no site navigation: the landing is the drawing and two links,
      and the footer carries the rest. This is only the wordmark, still used
      by the footer and the standalone reservation pages.
   ------------------------------------------------------------------ */
.brand{
  display:inline-flex; align-items:center; gap:10px;
  font-size:var(--t-md); font-weight:600;
  letter-spacing:-.01em; text-decoration:none; color:var(--ink);
}

/* ---------------------------------------------------------------------
   7. Hero — the drawing IS the landing. The mark and the two ways in sit
      on top of it, each on a white patch knocked out of the line work.
   ------------------------------------------------------------------ */
/* The drawing takes a column and the words take the other. Everything used
   to sit ON the line work — mark, both ways in — and lost contrast to it
   whatever was put behind; the fix is not a better patch but no overlap. */
.hero{
  position:relative; background:var(--paper);
  display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
  /* Exactly one screen, not at least one. As a min-height the words' own
     height decided it, so on a laptop the hero stood ~70-170px taller than
     the window: the drawing ran past the fold into the section below, and
     the cue at its foot was never on screen to begin with. Everything in the
     column below is sized to fit inside this. */
  height:100svh;
  min-height:520px;
}

/* Cropped to its right edge, which carries the pour — bottle in hand over
   the table — rather than the backs of heads in the middle. */
.hero__art{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:100% center;
  /* A hairline where the drawing stops, on both the cut edges. Scrolled to
     halfway, its foot is the pencil's own ragged ends and reads as a piece of
     a picture; a rule under it reads as the bottom of one. */
  border-right:1px solid var(--hair-soft);
  border-bottom:1px solid var(--hair-soft);
  color:var(--ink);
}

.hero__intro{
  display:flex; flex-direction:column; justify-content:center;
  /* Set to the proportions Ohad marked up: a larger mark, and the column
     inset further from the rule so the words are not pressed against the
     drawing. Still cut to a laptop window with browser chrome on it —
     640-800px — rather than the 900px a design tool shows. */
  gap:clamp(14px,2vw,28px);
  padding:clamp(28px,4vw,64px);
  /* The cue shares this column, so the centred stack is pushed up off it —
     otherwise the address line and the arrow occupy the same inch. */
  padding-bottom:clamp(104px,9vw,132px);
}

.hero__logo{ display:block; width:clamp(160px,13.5vw,205px); height:auto; }

/* Both languages at one size. The stylesheet already assumes it — Zilla's
   x-height matches the system sans — so they sit level with no compensation,
   and the change of face is what tells them apart. */
.hero__lede{
  margin:0; font-size:clamp(1.0625rem,1.8vw,1.625rem); line-height:1.36;
  color:var(--fg); text-wrap:pretty;
}
.hero__lede--es{ font-family:var(--f-es); font-style:italic; color:var(--fg-2); }

.hero__cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:clamp(2px,.6vw,8px); }

/* Solid and outlined rather than the old bare links: on the drawing they
   read as captions, and nothing about them said they could be pressed. */
.hero__btn{
  /* The base sheet only sets colour on `a`, so an anchor still arrives with
     the browser's underline — which on a filled button reads as a mistake. */
  text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--f-link);
  font-size:clamp(1rem,1.1vw,1.125rem);
  padding:16px 30px;
  transition:background-color .18s var(--ease), color .18s var(--ease),
             box-shadow .18s var(--ease);
}
.hero__btn--en{ background:var(--ink); color:var(--paper); }
.hero__btn--en:hover{ background:var(--wine); color:var(--paper); }
.hero__btn--es{
  font-style:italic; color:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--ink);
}
.hero__btn--es:hover{ background:var(--ink); color:var(--paper); }

.hero__where{ font-size:var(--t-sm); color:var(--fg-3); }

.hero__down{
  --down-size: clamp(76px,7.5vw,104px);
  /* Its own height plus a little air, so `top` can be measured from either
     edge below without the box hanging off it. */
  --down-gap: calc(var(--down-size) + clamp(6px,1.5vw,22px));

  /* Centred on the WORDS' column: 1fr of 2.08fr, so its middle sits at just
     under 76%. The hero is a screen tall, so its foot is the fold. */
  position:absolute; left:75.96%; transform:translateX(-50%);
  bottom:clamp(14px,2vw,28px);

  display:grid; place-items:center;
  width:var(--down-size); aspect-ratio:1;
  color:var(--ink);
  transition:color .18s var(--ease);
}
.hero__down svg{
  position:relative; z-index:1; overflow:visible;
  width:clamp(44px,4.4vw,60px); height:auto;
}
.hero__down:hover{ color:var(--wine); }

/* Both strokes ride the same bob, offset — the trail reads as the pen going
   round a second time rather than as a separate arrow. */
@keyframes hero-down{
  0%,100%{ transform:translateY(0); opacity:.9; }
  50%    { transform:translateY(5px); opacity:1; }
}
.down-lead{ animation:hero-down 2.4s var(--ease) infinite; }
.down-trail{ opacity:.42; animation:hero-down 2.4s var(--ease) infinite .18s; }
@media (prefers-reduced-motion: reduce){
  /* At rest the trail keeps its lighter weight, so the pair still reads as
     one stroke doubled rather than two of equal ink. */
  .down-lead, .down-trail{ animation:none; }
}

/* Two height steps, because height is the dimension that runs out first and
   width-based clamps cannot see it.

   The first gives the mark its room back. On a window around 800px tall the
   marked-up proportions leave the address line almost touching the cue, and
   between the two the cue is what should yield: it is a hint, the mark is the
   shop. So only the arrow shrinks here. */
@media (min-width:861px) and (max-height:840px){
  .hero__down{ --down-size:clamp(64px,6vw,80px); bottom:14px; }
  .hero__down svg{ width:clamp(32px,3vw,40px); }
}

/* The second is for a genuinely short window — a 13" with browser chrome, a
   half-height window — where at 1280 wide the clamps still ask for more
   height than 640px has, and everything has to come down together. */
@media (min-width:861px) and (max-height:760px){
  .hero__intro{ gap:clamp(10px,1.3vw,18px); padding:20px clamp(28px,4vw,64px) 92px; }
  .hero__logo{ width:clamp(132px,11vw,160px); }
  .hero__lede{ font-size:clamp(1rem,1.45vw,1.3125rem); }
  .hero__down{ --down-size:clamp(66px,6.4vw,86px); }
  .hero__down svg{ width:clamp(34px,3.2vw,44px); }
}

/* Stacked on a phone: the drawing on top, cropped to a band, then the words
   under it. Deep enough to read as the room, short enough that the first
   line of type is on screen with it. */
@media (max-width:860px){
  .hero{ grid-template-columns:1fr; height:auto; min-height:0; }
  .hero__art{
    height:clamp(210px,36svh,320px);
    border-right:none; border-bottom:1px solid var(--hair-soft);
  }
  /* Centred, and only here. On the desktop hero the words share a column
     with the drawing beside them, so their left edge is doing work — it is
     the line the rule between the two columns answers to. Stacked on a phone
     that edge answers to nothing: the column is the whole screen, the mark
     sits alone above the words, and left-aligning it just pins the stack to
     one side of an empty band. The buttons stay full width, so the block
     still has two straight edges to sit between. */
  .hero__intro{ padding:clamp(26px,6vw,36px) var(--gutter) 0; text-align:center; }
  .hero__logo{ width:clamp(151px,38.4vw,202px); margin-inline:auto; }
  .hero__cta{ flex-direction:column; align-items:stretch; }
  .hero__btn{ text-align:center; padding:15px 20px; }
  /* Nothing to cue: the words start immediately under the band, so the
     arrow would sit on top of them rather than point past anything. */
  .hero__down{ display:none; }
}

/* ---------------------------------------------------------------------
   8. Visit — the description, the address and how to reach us
   ------------------------------------------------------------------ */
/* The two languages side by side. Everywhere else on the page Spanish sits
   under its English twin, because the blocks are long enough that columns
   would leave one of them short. Here it is a single sentence, so both fit a
   column of their own and neither reads as the afterthought. */
.intro{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  /* Between the columns only. The vertical rhythm inside a column is set by
     the margins on the eyebrow, the paragraph and the footnote — a row gap on
     top of those would double every one of them once the two columns share
     their rows. */
  column-gap:clamp(26px,5vw,64px); row-gap:0;
}
/* The two languages share their rows, so the lists start on the same line
   however many lines the paragraph above each one takes. Spanish runs longer
   than English here — four lines to three — and without this the whole
   Spanish list, prices included, sat a line lower than its English twin.
   Each column is four rows deep: eyebrow, paragraph, list, footnote. */
@supports (grid-template-rows: subgrid){
  @media (min-width:761px){
    .intro{ grid-template-rows:auto auto auto auto; }
    .hours{ display:grid; grid-row:span 4; grid-template-rows:subgrid; }
  }
}
/* The three seatings as rows. Hairlines between them and tabular figures in
   both outer columns, so the times line up under each other and the prices
   do too — which is the whole reason for making it a table rather than a
   sentence. Same row rhythm as the facts list in Tastings. */
.hours__list{ list-style:none; }
.hours__list li{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  gap:2px 18px; align-items:baseline;
  padding:12px 0; border-top:1px solid var(--hair-soft);
  font-size:var(--t-md);
}
.hours__list li:first-child{ border-top:none; padding-top:0; }
/* Three levels, and they follow what a reader is actually choosing between:
   the seating's name is the decision, the time and the price are the terms of
   it, and the rating line is the detail under the name. The name used to be
   the palest of the three, which read as an aside — the one thing on the row
   it cannot be. */
.hours__time{ font-variant-numeric:tabular-nums; color:var(--fg-2); }
.hours__what{ color:var(--fg); }
.hours__note{ display:block; font-size:var(--t-sm); color:var(--fg-3); }
.hours__price{
  font-variant-numeric:tabular-nums; color:var(--fg); white-space:nowrap;
  justify-self:end;
}
/* Tight to the last row, because it is a footnote to that list and not a
   line of its own — stacked on a phone it used to sit almost exactly halfway
   between its own list and the next language's, which is the one place it
   could be read as belonging to either. */
.hours__eyebrow{ margin-bottom:14px; }
/* What a tasting is, above what it costs — the list answers "when and how
   much", and this answers the question a guest asks first. */
.hours__intro{
  margin-bottom:18px; max-width:44ch;
  font-size:var(--t-base); color:var(--fg-2); text-wrap:pretty;
}
.hours__foot{ margin-top:9px; font-size:var(--t-sm); color:var(--fg-3); }

@media (max-width:520px){
  /* Too narrow for three columns: the price drops under the name rather
     than squeezing the name to two words a line. */
  .hours__list li{ grid-template-columns:auto minmax(0,1fr); }
  .hours__price{ grid-column:2; justify-self:start; }
}
@media (max-width:760px){
  /* One under the other, so the gap between the two languages has to be
     bigger than anything inside either of them — otherwise the second list
     reads as three more seatings rather than the same three again. */
  .intro{ grid-template-columns:1fr; gap:clamp(34px,7vw,44px); }
}

.visit-address{
  text-align:center; font-size:var(--t-lg);
  margin-top:clamp(34px,5vw,54px);
}

/* Centred under the address, each row reading label-then-icon. The icon is a
   quiet marker of which app the link opens, not a button — the whole row is
   the target. */
.contact-rows{
  list-style:none; display:flex; flex-direction:column; align-items:center;
  gap:13px; margin-top:clamp(22px,3vw,30px);
}
/* A tenth larger than the body scale. Everything inside is sized in em off
   this one value — the icon and the space before it included — so the row
   scales as a piece rather than drifting out of proportion. */
.contact-rows a{
  display:inline-flex; align-items:center; gap:.75em;
  font-size:calc(var(--t-sm) * 1.1); color:var(--fg-2); text-decoration:none;
  border-bottom:1px solid var(--hair); padding-bottom:2px;
  transition:color .18s, border-color .18s;
}
.contact-rows a:hover{ color:var(--ink); border-color:currentColor; }
.contact-rows svg{ width:1.25em; height:1.25em; flex:none; opacity:.65; }
.contact-rows a:hover svg{ opacity:1; }

/* ---------------------------------------------------------------------
   9. The shelf
   ------------------------------------------------------------------ */
.wines{ display:grid; gap:14px; font-size:var(--t-md); color:var(--fg-2); }
.wines .bilingual__en,
.wines .bilingual__es{ max-width:62ch; }

/* ---------------------------------------------------------------------
   10. Tastings
   ------------------------------------------------------------------ */
/* One column per language across the whole page, so the aside sits under the
   main column rather than beside it — side by side, its own English/Spanish
   pair put English in a third column and Spanish in a fourth. */
.tasting{
  display:grid; grid-template-columns:1fr;
  gap:clamp(28px,5vw,56px);
}
.tasting__main{ padding:0; }
.tasting__side{ padding:0; font-size:var(--t-sm); color:var(--fg-2); }
.tasting__side strong{ color:var(--fg); }
.tasting__main h3{ margin-bottom:12px; }
.tasting__main p{ color:var(--fg-2); }

.tasting__facts{ list-style:none; margin-top:26px; }
.tasting__facts li{
  /* The tag is taken out of the flow rather than given a column of its own:
     sharing the row would shrink the two language columns and push their
     rule off the one the prose above draws. Every hairline on the page lines
     up on the same axis this way. */
  position:relative;
  padding:11px 0; border-top:1px solid var(--hair-soft);
  font-size:var(--t-sm);
}
.tasting__facts li > .tag{ position:absolute; right:0; top:11px; }
.tasting__facts li:first-child{ border-top:none; }
/* Unlike the summary rows this list sits in the main column, so its Spanish
   goes beside the English rather than under it. */
.tasting__facts .fact{
  display:grid; grid-template-columns:1fr 1fr; align-items:baseline;
}
/* Room for the tag sitting over the right-hand end of the Spanish column. */
.tasting__facts .es-sub{ padding-right:96px; }
.tasting__facts .fact__en{ padding-right:clamp(12px,1.6vw,24px); }
.tasting__facts .es-sub{
  padding-left:clamp(12px,1.6vw,24px);
  border-left:1px solid var(--hair-soft);
}
@media (max-width:700px){
  .tasting__facts .fact{ display:flex; flex-direction:column; }
  .tasting__facts .fact__en{ padding-right:96px; }
  .tasting__facts .es-sub{ padding-left:0; padding-right:96px; border-left:none; }
  :root[data-lang-first="es"] .tasting__facts .es-sub{ order:-1; }
}



/* ---------------------------------------------------------------------
   11. Booking
   ------------------------------------------------------------------ */
.booking__panel{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  column-gap:clamp(28px,5vw,64px); row-gap:clamp(34px,5vw,56px);
}
.panel{ padding:0; }
.panel--picker{ grid-column:1 / -1; }
.panel--summary{ background:var(--paper); }
@media (max-width:900px){
  /* minmax(0,1fr), not 1fr: a bare 1fr track is floored at its content's
     min width, so the scrolling date rail below would widen the column —
     and with it the page — instead of scrolling inside it. */
  .booking__panel{ grid-template-columns:minmax(0,1fr); }
}

.step{
  display:flex; align-items:center; gap:10px;
  font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg-3); margin-bottom:14px;
}
/* the logo's "et" diamond, reused as the step marker */
.step__n{
  position:relative; width:24px; height:24px; flex:none;
  display:grid; place-items:center;
  font-size:11px; letter-spacing:0; color:var(--ink);
}
.step__n::before{
  content:''; position:absolute; inset:1px;
  border:1px solid var(--ink); transform:rotate(45deg);
}

/* language toggle */
.segmented{
  display:grid; grid-template-columns:1fr 1fr;
  border:1px solid var(--ink); margin-bottom:20px;
}
.lang-btn{
  padding:11px 10px; font-size:var(--t-sm); color:var(--fg-2);
  transition:background-color .18s, color .18s;
}
.lang-btn + .lang-btn{ border-left:1px solid var(--ink); }
.lang-btn:hover{ background:var(--surface-2); }
.lang-btn.active{ background:var(--ink); color:var(--paper); font-weight:500; }

/* week of seatings */
.week-nav{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:12px 0 10px; }
/* The month jumps sit against the week arrows rather than spreading across
   the row, so the label stays centred between two pairs. */
.week-nav__group{ display:inline-flex; gap:4px; }

.week{
  display:grid; grid-template-columns:repeat(7,1fr);
  gap:1px; background:var(--hair-soft);
  border-block:1px solid var(--hair-soft);
}
.week-day{ background:var(--paper); display:flex; flex-direction:column; }
.week-day__head{
  display:flex; align-items:baseline; justify-content:center; gap:6px;
  padding:9px 6px; border-bottom:1px solid var(--hair-soft);
}
.week-day__head .wd{
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-3);
}
.week-day__head .dd{ font-size:var(--t-sm); font-weight:600; font-variant-numeric:tabular-nums; }
.week-day__note{
  flex:1; display:grid; place-items:center; padding:18px 6px;
  font-size:var(--t-xs); color:var(--fg-3);
}
.week-day.is-closed,
.week-day.is-past{ background:var(--surface-2); }
.week-day.is-closed .week-day__head .dd{ color:var(--fg-3); }

.seat-slot{
  display:grid; gap:2px; text-align:center;
  padding:9px 6px; border-top:1px solid var(--hair-soft);
  background:transparent; color:var(--fg);
  transition:background-color .15s, color .15s;
}
.seat-slot:first-of-type{ border-top:none; }
.seat-slot__time{ font-size:var(--t-sm); font-weight:600; font-variant-numeric:tabular-nums; }
.seat-slot__name{
  font-size:10px; color:var(--fg-3); line-height:1.25;
  /* Two lines, not one. A seating column is narrow and one of the names
     carries its rating — "Los Top de Argentina — 97-100 Pts" truncated to
     one line loses the half a guest is choosing on. Names short enough to
     fit still take a single line, so nothing else moves. */
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden;
}
.seat-slot__left{
  display:inline-flex; align-items:center; justify-content:center; gap:4px;
  font-size:var(--t-xs); color:var(--fg-2); font-variant-numeric:tabular-nums;
}
.seat-icon{ width:13px; height:13px; flex:none; color:currentColor; opacity:.7; }
.seat-slot:hover:not(:disabled){ background:var(--tint); }
.seat-slot.selected{ background:var(--ink); color:var(--paper); }
.seat-slot.selected .seat-slot__name,
.seat-slot.selected .seat-slot__left{ color:rgba(255,255,255,.78); }
.seat-slot:disabled{ color:var(--fg-3); cursor:not-allowed; }
.seat-slot:disabled .seat-slot__name{ color:var(--fg-3); }

/* Below tablet the seven columns stop fitting, so each day becomes a row
   with its three seatings side by side. */
@media (max-width:860px){
  .week{ grid-template-columns:1fr; }
  .week-day{ display:grid; grid-template-columns:78px repeat(3,1fr); align-items:stretch; }
  .week-day__head{
    justify-content:flex-start; border-bottom:none;
    border-right:1px solid var(--hair-soft); padding-left:12px;
  }
  .week-day__note{ grid-column:2 / -1; justify-items:start; padding-left:12px; }
  .seat-slot{ border-top:none; border-left:1px solid var(--hair-soft); }
}
@media (max-width:520px){
  .week-day{ grid-template-columns:1fr 1fr 1fr; }
  .week-day__head{
    grid-column:1 / -1; border-right:none;
    border-bottom:1px solid var(--hair-soft); padding-left:10px;
  }
  .seat-slot:first-of-type{ border-left:none; }
}

/* Below 640px the week is not a table at all — see renderPhoneWeek(). Seven
   days by three seatings is twenty-one cells on a phone, and the only thing
   that changes between them is the seat count, which is the smallest type in
   the cell. So: a strip of dates carrying what is free under each, then one
   day at a time with room for the tasting's name, what it is and what it
   costs. The three-column grid above is switched off rather than adapted. */
@media (max-width:640px){
  .week{ display:block; min-width:0; background:none; border-block:none; }

  /* The rail runs from today to the last bookable date, so there is no week
     to step through — the arrows that did it would be pushing a boundary the
     rail no longer has. « and » stay, moving a month at a time, because nine
     months is a long way to swipe. */
  #prevWeek, #nextWeek{ display:none; }

  /* Where the rail crosses into a new month, so a date three swipes along is
     still placed in the year. */
  .rail-month{
    flex:none; align-self:center; padding:0 2px;
    font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-3);
  }

  /* A rail the thumb pushes, not seven boxes squeezed to fit. At a phone's
     width the last chip is cut by the edge on purpose — a half-visible date
     is what says the row moves. Snapping keeps it landing on whole days. */
  .week-strip{
    display:flex; gap:6px; overflow-x:auto; padding-bottom:10px;
    scroll-snap-type:x proximity; overscroll-behavior-x:contain;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .week-strip::-webkit-scrollbar{ display:none; }
  .day-chip{
    flex:none; width:60px; scroll-snap-align:start; padding:10px 4px;
    display:grid; gap:2px; text-align:center;
    border:1px solid var(--hair-soft); background:var(--paper); color:var(--fg);
    transition:background-color .15s var(--ease), color .15s var(--ease);
  }
  .day-chip .wd{ font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-3); }
  .day-chip .dd{ font-size:var(--t-md); font-weight:600; font-variant-numeric:tabular-nums; }
  /* Shut, past or full: still legible, still tappable where there is
     something to say, but plainly not where the room is. */
  .day-chip.is-shut{ background:var(--surface-2); }
  .day-chip.is-shut .dd{ color:var(--fg-3); }
  /* A date whose availability hasn't been asked for yet: the day is real, the
     count is not known. It fills in as the rail is pushed towards it. */
  .day-chip.is-pending{ background:none; }
  .day-chip.is-pending .dd{ color:var(--fg-3); }
  .day-chip:disabled{ cursor:not-allowed; }
  .day-chip[aria-pressed="true"]{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
  .day-chip[aria-pressed="true"] .wd,
  .day-chip[aria-pressed="true"] .dd{ color:rgba(255,255,255,.78); }
  .day-chip[aria-pressed="true"] .dd{ color:var(--paper); }

  .week-dayline{
    margin:14px 0 2px; font-size:var(--t-xs); letter-spacing:.1em;
    text-transform:uppercase; color:var(--fg-3);
  }

  .day-slot{
    width:100%; text-align:left; color:var(--fg);
    display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 12px;
    padding:13px 0; border-bottom:1px solid var(--hair-soft);
    transition:background-color .15s var(--ease), color .15s var(--ease);
  }
  .day-slot__head{ font-size:var(--t-base); font-weight:600; }
  .day-slot__time{ font-variant-numeric:tabular-nums; }
  .day-slot__left{
    grid-row:1; grid-column:2; justify-self:end;
    display:inline-flex; align-items:center; gap:4px;
    font-size:var(--t-sm); color:var(--fg-2); font-variant-numeric:tabular-nums;
    white-space:nowrap;
  }
  .day-slot__blurb{ grid-column:1; font-size:var(--t-sm); color:var(--fg-3); }
  .day-slot__price{
    grid-row:2; grid-column:2; justify-self:end;
    font-size:var(--t-sm); color:var(--fg-2); font-variant-numeric:tabular-nums;
  }
  .day-slot.selected{
    background:var(--ink); color:var(--paper);
    padding-inline:10px; border-bottom-color:transparent;
  }
  .day-slot.selected .day-slot__blurb,
  .day-slot.selected .day-slot__left,
  .day-slot.selected .day-slot__price{ color:rgba(255,255,255,.78); }
  .day-slot:disabled{ color:var(--fg-3); cursor:not-allowed; }
  .day-slot:disabled .day-slot__blurb,
  .day-slot:disabled .day-slot__left,
  .day-slot:disabled .day-slot__price{ color:var(--fg-3); }

  .day-empty{ padding:22px 0; font-size:var(--t-sm); color:var(--fg-3); }
}

.cal-nav-btn{
  width:30px; height:30px; flex:none;
  border:1px solid var(--hair); color:var(--fg);
  display:grid; place-items:center; font-size:var(--t-base);
  transition:border-color .18s, color .18s;
}
.cal-nav-btn:hover:not(:disabled){ border-color:var(--ink); }
.cal-nav-btn:disabled{ opacity:.3; cursor:not-allowed; }
.cal-label{ font-size:var(--t-base); font-weight:600; }

.cal-loading{
  padding:34px 10px; text-align:center;
  font-size:var(--t-sm); color:var(--fg-3); background:var(--paper);
}
.cal-legend{
  display:grid; gap:4px; margin-top:12px;
  font-size:var(--t-xs); color:var(--fg-3);
}
.cal-legend .seat-icon{ display:inline-block; vertical-align:-2px; }

/* details form */
.details{ display:none; margin-top:28px; padding-top:26px; border-top:1px solid var(--hair); }
.details.show{ display:block; }

.recap{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  flex-wrap:wrap; padding-bottom:16px; margin-bottom:20px;
  border-bottom:1px solid var(--hair-soft);
  font-size:var(--t-sm); color:var(--fg-2);
}
.recap .val{ color:var(--fg); font-weight:500; }

.field{ margin-bottom:18px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:560px){ .field-row{ grid-template-columns:1fr; } }
.field label,
.field-label{
  display:block; margin-bottom:7px;
  font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--fg-3);
}
.field input,
.field select,
.field textarea{
  width:100%; padding:9px 2px;
  border:none; border-bottom:1px solid var(--hair);
  background:var(--paper); color:var(--fg);
  font-size:var(--t-base);
  transition:border-color .18s;
}
/* Two lines to start with, growing only if the guest keeps typing — the box
   should read as one more line of the form, not as an essay it is asking for. */
.field textarea{ resize:vertical; min-height:52px; line-height:1.5; }
.field input::placeholder,
.field textarea::placeholder{ color:var(--fg-3); }
.field input:focus,
.field select:focus,
.field textarea:focus{ outline:none; border-bottom-color:var(--ink); }
.field-hint{ margin-top:7px; font-size:var(--t-xs); color:var(--fg-3); line-height:1.5; }

.combo{ display:grid; grid-template-columns:minmax(0,auto) minmax(0,1fr); gap:8px; }
.combo select{ max-width:190px; }

.phone-preview{ color:var(--fg); }
.phone-preview.is-bad{ color:var(--bad); }

.qty{ display:inline-flex; align-items:center; box-shadow:inset 0 0 0 1px var(--hair); }
.qty-btn{
  width:38px; height:38px; display:grid; place-items:center;
  color:var(--fg); font-size:var(--t-md);
  transition:background-color .18s;
}
.qty-btn:hover{ background:var(--tint); }
.qty-val{ min-width:44px; text-align:center; font-size:var(--t-base); font-variant-numeric:tabular-nums; }

/* summary */
.summary-title{
  font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg-3); margin-bottom:16px;
}
.summary-line{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:11px 0; border-top:1px solid var(--hair-soft);
  font-size:var(--t-sm); color:var(--fg-2);
}
.summary-line:first-of-type{ border-top:none; }
.summary-line .val{ color:var(--fg); font-weight:500; text-align:right; }
.summary-line--total{
  border-top:1px solid var(--ink); margin-top:6px; padding-top:14px;
  font-size:var(--t-base); color:var(--fg);
}
.summary-line--total .val{ font-weight:600; }

.fine-print{ margin-top:14px; font-size:var(--t-xs); color:var(--fg-3); line-height:1.6; }
.trust{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }

.error-msg{
  display:none; margin-top:12px; padding:10px 12px;
  border:1px solid var(--bad); color:var(--bad);
  font-size:var(--t-sm);
}
.error-msg.show{ display:block; }

/* The inline card form. Mercado Pago renders the Brick's own markup inside
   .pay__brick and styles it from its own stylesheet, so there is deliberately
   nothing here reaching into it — only the frame around it is ours. */
.pay{ display:none; }
.pay.show{ display:block; }
.pay__brick{ margin-top:18px; min-height:220px; }

/* The second way to pay, under the card form. The rule and the "or" say the
   two are alternatives rather than steps. */
.pay__alt{ margin-top:22px; }
.pay__alt-rule{
  display:flex; align-items:center; justify-content:center; gap:6px;
  font-size:var(--t-xs); color:var(--fg-3);
  text-transform:uppercase; letter-spacing:.14em;
}
.pay__alt-rule::before,
.pay__alt-rule::after{ content:''; flex:1; height:1px; background:var(--hair-soft); }
/* The one question asked before any payment form is drawn. Two options, each
   carrying its own price, because the prices differ and that is the whole
   reason the guest is being asked. */
/* The blue-dollar rate under the peso total. In the wine red rather than the
   error red: it is worth catching the eye, and it is not a fault. */
.pay__rate{
  margin-top:8px; font-size:var(--t-sm); color:var(--wine);
  font-variant-numeric:tabular-nums;
}

.pay__choice{ margin-top:4px; }
.pay__choice-q{ font-size:var(--t-sm); color:var(--fg-2); margin-bottom:14px; }
.pay__choice-opt{
  display:grid; grid-template-columns:1fr auto; gap:2px 14px; width:100%;
  text-align:left; padding:14px 16px; background:var(--paper);
  box-shadow:inset 0 0 0 1px var(--hair);
  transition:box-shadow .18s var(--ease), background-color .18s var(--ease);
}
.pay__choice-opt + .pay__choice-opt{ margin-top:10px; }
.pay__choice-opt:hover{ background:var(--tint); box-shadow:inset 0 0 0 1px var(--ink); }
.pay__choice-title{ font-size:var(--t-base); font-weight:500; color:var(--fg); }
.pay__choice-amt{
  grid-column:2; grid-row:1 / span 2; align-self:center;
  font-size:var(--t-base); font-variant-numeric:tabular-nums; color:var(--fg);
}
.pay__choice-sub{ grid-column:1; font-size:var(--t-sm); color:var(--fg-3); }
.pay__choice-sub .es-sub{ display:block; }

#paypalCardButton{ margin-top:2px; }
/* The note belongs to the card button above it, and the PayPal button below
   needs clear air so the two are not read as one control. */
#paypalCardNote{ margin-top:8px; margin-bottom:14px; }
.pay__alt-note{
  margin:12px 0 12px; font-size:var(--t-sm); color:var(--fg-2); text-align:center;
}

.confirm{ display:none; text-align:center; padding:26px 0; }
.confirm.show{ display:block; }
.confirm svg{ width:30px; margin:0 auto 16px; color:var(--ink); }
.confirm h3{ margin-bottom:8px; }
.confirm p{ font-size:var(--t-sm); color:var(--fg-2); }

/* ---------------------------------------------------------------------
   12. Footer
   ------------------------------------------------------------------ */
.footer{ background:var(--paper); padding-block:clamp(48px,6vw,76px) 30px; }
/* One column now the contact links live under the drawing, where a guest
   meets them on the way in rather than after scrolling past everything. */
.footer__about{ margin-top:14px; font-size:var(--t-sm); color:var(--fg-2); max-width:42ch; }
.socials{ display:flex; gap:10px; margin-top:16px; }
.socials a{
  width:22px; height:22px; display:grid; place-items:center;
  color:var(--fg-3); transition:color .18s;
}
.socials a:hover{ color:var(--ink); }

.footer__bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px;
  margin-top:clamp(34px,4vw,54px); padding-top:20px;
  border-top:1px solid var(--hair-soft);
  font-size:var(--t-xs); color:var(--fg-3);
}

/* ---------------------------------------------------------------------
   13. Standalone status / manage pages
   ------------------------------------------------------------------ */
.page-center{
  min-height:100vh; display:grid; place-items:center;
  padding:clamp(30px,6vw,64px) var(--gutter);
  background:var(--paper);
}
.stack{ width:100%; max-width:560px; }
.stack--narrow{ max-width:440px; }

.status-card{ background:var(--paper); padding:0; }
.status-card--center{ text-align:center; }

.status-icon{
  width:40px; height:40px; margin:0 auto 16px;
  display:grid; place-items:center;
}
.status-icon svg{ width:24px; height:24px; }
.status-icon--ok{ color:var(--ok); }
.status-icon--warn{ color:var(--warn); }
.status-icon--bad{ color:var(--bad); }

.status-pill{
  display:inline-block;
  font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--fg-3);
}
.status-pill[data-status="confirmed"]{ color:var(--ok); }
.status-pill[data-status="cancelled"],
.status-pill[data-status="expired"]{ color:var(--bad); }
.status-pill[data-status="pending"]{ color:var(--warn); }

.detail-box{ margin:22px 0; border-top:1px solid var(--hair-soft); }
.detail-box .summary-line:first-of-type{ border-top:none; }

.actions{ display:flex; flex-wrap:wrap; gap:10px; }
.msg{ display:none; margin-top:14px; padding:10px 12px; border:1px solid var(--hair); font-size:var(--t-sm); }
.msg.show{ display:block; }
.msg.ok{ border-color:var(--ok); color:var(--ok); }
.msg.err{ border-color:var(--bad); color:var(--bad); }

.form-block{ display:none; margin-top:22px; padding-top:20px; border-top:1px solid var(--hair); }
.form-block.show{ display:block; }

.back-link{
  display:inline-block; margin-top:20px;
  font-size:var(--t-sm); color:var(--fg-3); text-decoration:none;
}
.back-link:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }

.loading-state{
  display:flex; align-items:center; gap:12px;
  font-size:var(--t-sm); color:var(--fg-3);
}
.spinner{
  width:16px; height:16px; flex:none; border-radius:50%;
  border:1.5px solid var(--hair); border-top-color:var(--ink);
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .spinner{ animation-duration:2.4s; } }

/* Height is the dimension that runs out on a laptop, and the section that has
   to fit inside one is Visit: it is where the hero's arrow lands, and its own
   arrow — the way on to the booking form — was falling a few pixels past the
   bottom of a 790px window, so the section read as the end of the page.
   Everything below the price lists tightens until it fits. */
@media (min-width:861px) and (max-height:920px){
  #visit{ padding-block:clamp(48px,6vh,72px); }
  .visit-address{ margin-top:clamp(24px,3.6vh,40px); }
  .contact-rows{ margin-top:clamp(16px,2.4vh,26px); gap:11px; }
  .section-down{ margin-top:clamp(8px,1.4vh,18px); width:clamp(56px,5vw,72px); }
}
/* A second step for the shorter laptop, where the first one still leaves the
   arrow hanging off the bottom: the rows themselves give up a little air. */
@media (min-width:861px) and (max-height:820px){
  #visit{ padding-block:clamp(34px,4.4vh,50px); }
  .hours__intro{ margin-bottom:12px; }
  .hours__list li{ padding:10px 0; }
  .visit-address{ margin-top:clamp(16px,2.4vh,26px); font-size:var(--t-md); }
  .contact-rows{ margin-top:clamp(12px,1.8vh,20px); gap:9px; }
  .section-down{ width:clamp(48px,4.4vw,60px); }
  .section-down svg{ width:clamp(28px,2.6vw,36px); }
}