@charset "UTF-8";
/* ==========================================================================
   Motel Hôrky — design system
   Author: S.O.S. pre počítače
   Palette rationale: the building carries a luminous green sign on a dark
   facade; interiors are warm wood on white. The site mirrors that — deep
   pine grounds, warm paper content, one ember accent for food.
   ========================================================================== */

/* ---------- 1. Fonts ---------------------------------------------------- */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 900;font-display:swap;
  src:url('../fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 900;font-display:swap;
  src:url('../fonts/fraunces-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/instrument-sans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/instrument-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ---------- 2. Tokens --------------------------------------------------- */
html{background:var(--paper);overscroll-behavior-y:none;color-scheme:light}
:root{
  /* greens — pulled from the illuminated sign, deepened for ground */
  --g-900:#0C1F14; --g-800:#123024; --g-700:#1A452F; --g-600:#22603D;
  --g-500:#2E8B57; --g-400:#43A96C; --g-300:#6FCB93; --g-200:#A8E3C0; --g-100:#DCF3E5;
  --glow:#5FD98D;

  --ink:#111512; --ink-70:rgba(17,21,18,.70); --ink-55:rgba(17,21,18,.55); --ink-35:rgba(17,21,18,.35);
  --paper:#FBF8F2; --paper-2:#F4EFE5; --paper-3:#EBE4D6;
  --ember:#C2683C; --ember-d:#A5522C;
  --stone:#7C776B;

  --line:rgba(17,21,18,.13);
  --line-soft:rgba(17,21,18,.07);
  --line-dark:rgba(255,255,255,.16);

  --sans:'Instrument Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --serif:'Fraunces',ui-serif,Georgia,'Times New Roman',serif;

  /* fluid type scale */
  --t-hero:clamp(2.7rem,7.4vw,6.25rem);
  --t-d1:clamp(2.1rem,5vw,4rem);
  --t-d2:clamp(1.65rem,3.3vw,2.6rem);
  --t-d3:clamp(1.3rem,2.1vw,1.75rem);
  --t-lead:clamp(1.05rem,1.45vw,1.3rem);
  --t-body:1.0625rem;
  --t-sm:.9375rem;
  --t-xs:.8125rem;
  --t-micro:.6875rem;

  --pad:clamp(1.15rem,4.2vw,3.25rem);
  --gap:clamp(1.25rem,2.6vw,2.25rem);
  --sect:clamp(4.25rem,9.5vw,8.5rem);
  --max:1440px;
  --radius:3px;          /* near-square: printed-menu feel, not app-bubble */
  --radius-lg:6px;

  --shadow-s:0 1px 2px rgba(12,31,20,.05),0 4px 14px rgba(12,31,20,.055);
  --shadow-m:0 2px 4px rgba(12,31,20,.05),0 14px 40px rgba(12,31,20,.10);
  --shadow-l:0 4px 8px rgba(12,31,20,.06),0 30px 70px rgba(12,31,20,.16);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---------- 3. Reset / base -------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5.5rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:var(--t-body);line-height:1.62;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,svg,video{display:block;max-width:100%;height:auto}
picture{display:contents}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:inherit;text-wrap:balance}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
figure,dl,dd{margin:0}
:focus-visible{outline:2px solid var(--g-500);outline-offset:3px;border-radius:2px}
::selection{background:var(--g-200);color:var(--g-900)}
.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}
.skip{position:absolute;left:0;top:-100%;z-index:200;background:var(--g-900);color:#fff;padding:.85rem 1.35rem;font-size:var(--t-sm)}
.skip:focus{top:0}

/* ---------- 4. Typography ---------------------------------------------- */
.display{font-family:var(--serif);font-weight:500;line-height:.98;letter-spacing:-.022em;
  font-variation-settings:'SOFT' 0,'WONK' 1,'opsz' 144}
.h-hero{font-size:var(--t-hero)}
.h1{font-family:var(--serif);font-weight:500;font-size:var(--t-d1);line-height:1.02;letter-spacing:-.02em;
  font-variation-settings:'SOFT' 0,'WONK' 1,'opsz' 100}
.h2{font-family:var(--serif);font-weight:500;font-size:var(--t-d2);line-height:1.1;letter-spacing:-.016em;
  font-variation-settings:'SOFT' 0,'WONK' 1,'opsz' 60}
.h3{font-family:var(--serif);font-weight:600;font-size:var(--t-d3);line-height:1.2;letter-spacing:-.01em;
  font-variation-settings:'SOFT' 0,'WONK' 0,'opsz' 30}
.lead{font-size:var(--t-lead);line-height:1.55;color:var(--ink-70);max-width:56ch}
.eyebrow{font-size:var(--t-micro);letter-spacing:.17em;text-transform:uppercase;font-weight:600;color:var(--g-600)}
.eyebrow--light{color:var(--g-300)}
.muted{color:var(--ink-55)}
.num{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:'tnum' 1}

/* ---------- 5. Layout --------------------------------------------------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.wrap--narrow{max-width:920px}
.section{padding-block:var(--sect)}
.section--tight{padding-block:clamp(3rem,6vw,5rem)}
.grid{display:grid;gap:var(--gap)}
.dark{background:var(--g-900);color:var(--paper)}
.dark .lead,.dark .muted{color:rgba(251,248,242,.68)}
.dark .h2,.dark .h3{color:var(--paper)}
.tint{background:var(--paper-2)}
.rule{height:1px;background:var(--line);border:0;margin:0}
.dark .rule{background:var(--line-dark)}

/* section header: label left, title + text right — editorial, not centred */
/* One left edge for the whole section. The label used to sit in an 11rem margin
   column, which indented the heading while everything under it stayed flush to the
   wrap — two competing left edges that read as a mistake rather than a device. */
.shead{display:grid;gap:.85rem clamp(1.5rem,3vw,3.25rem);align-items:start;
  margin-bottom:clamp(2rem,4.5vw,3.5rem)}
.shead__label{grid-column:1/-1}
@media (max-width:899px){
  .shead--wide>:last-child{margin-top:.4rem;padding-top:1.15rem;border-top:1px solid var(--line);
    font-size:var(--t-xs)}
  .rateline{margin-top:clamp(1.75rem,5vw,2.25rem)}
}
@media (min-width:900px){
  .shead--wide{grid-template-columns:minmax(0,2.1fr) minmax(0,1fr)}
  .shead--wide>:last-child{align-self:end}
}
.shead__label .eyebrow{display:block;line-height:1.4}

/* ---------- 6. Buttons -------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:.95em 1.7em;border:1px solid transparent;border-radius:var(--radius);
  font-size:var(--t-sm);font-weight:600;letter-spacing:.01em;cursor:pointer;
  transition:background .28s var(--ease),color .28s var(--ease),border-color .28s var(--ease),transform .28s var(--ease);
  will-change:transform;text-align:center;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--g-600);color:#fff}
.btn--primary:hover{background:var(--g-700)}
.btn--ember{background:var(--ember);color:#fff}
.btn--ember:hover{background:var(--ember-d)}
.btn--ghost{border-color:var(--line);color:var(--ink);background:transparent}
.btn--ghost:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.btn--onDark{border-color:rgba(255,255,255,.38);color:#fff;background:rgba(255,255,255,.10);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.btn--onDark:hover{background:#fff;color:var(--g-900);border-color:#fff}
.btn--sm{padding:.78em 1.5em;font-size:var(--t-xs);line-height:1.25}
.btn--block{width:100%}

.alink{display:inline-flex;align-items:center;gap:.5em;font-size:var(--t-sm);font-weight:600;
  border-bottom:1px solid var(--line);padding-bottom:.25em;transition:border-color .3s var(--ease),gap .3s var(--ease)}
.alink:hover{border-color:currentColor}
.alink svg{flex:none}

/* Trailing arrow: static. Every animated version of this read as the icon coming
   loose from its label, so it does not move. */
.arr{flex:none}

/* ---------- 7. Header --------------------------------------------------- */
.hdr{position:fixed;inset:0 0 auto;z-index:100;isolation:isolate;
  transform:translate3d(0,0,0);
  transition:background .4s var(--ease),border-color .4s var(--ease),backdrop-filter .4s var(--ease);
  border-bottom:1px solid transparent}
/* Everything in the bar sits above the blurred backdrop layer explicitly; Safari
   otherwise let the booking button slide behind it while the page rubber-banded. */
.hdr__in>*{position:relative;z-index:1}
body.is-home .hdr::before{content:'';position:absolute;inset:0 0 -3.25rem;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(7,18,12,.78),rgba(7,18,12,.46) 42%,rgba(7,18,12,.16) 72%,transparent);
  transition:opacity .4s var(--ease)}
body.is-home .hdr.is-solid::before{opacity:0}
/* THE WORDPRESS ADMIN BAR.
   Only logged-in people ever see it, which is why it went unnoticed: every check in this
   project was made logged out. It is a fixed strip at the very top, so a fixed header
   sits underneath it and loses its first 32 or 46 pixels.
   WordPress changes the bar's behaviour by width, and the offsets have to follow:
     over 782px  the bar is 32px and fixed
     601-782px   the bar is 46px and fixed
     up to 600px the bar is 46px and ABSOLUTE, so it scrolls away with the page
   In that last case a permanent offset would leave a 46px gap the moment you scroll. The
   header instead starts below the bar and returns to the top edge once .is-solid says the
   page has scrolled past it, which is the same state the frosted background already uses. */
body.admin-bar .hdr{top:32px}
body.admin-bar .drawer{top:32px}
@media (max-width:782px){
  body.admin-bar .hdr{top:46px}
  body.admin-bar .drawer{top:46px}
}
@media (max-width:600px){
  /* Below 600px WordPress makes its bar `position:absolute` so it scrolls away with the
     page. That is what forced a fixed header to chase it, and chasing a scroll from
     JavaScript is always a frame behind — the header visibly lagged.
     Pinning the bar instead removes the moving part. It then behaves exactly as it does
     on every wider screen, the static 46px offset above is simply correct, and there is
     nothing left to track. Costs an admin 46px of screen; costs a visitor nothing, since
     none of this exists when logged out. */
  body.admin-bar #wpadminbar{position:fixed}
}

.hdr__in{display:flex;align-items:center;gap:clamp(1rem,1.8vw,1.75rem);min-height:5rem}
.hdr__brand{display:flex;align-items:center;gap:.72rem;margin-right:auto;color:#fff;transition:color .4s var(--ease)}
/* Supplied artwork (02-soft-ridge/mark-pine.svg and mark-light.svg), used as files
   rather than re-drawn, so the transform and geometry cannot drift. Two colour
   variants because the file carries its own fill. */
.hdr__mark{height:1.72rem;width:auto;flex:none;display:block}
.hdr__mark--light{display:none}
body.is-home:not(.is-locked) .hdr:not(.is-solid) .hdr__mark--pine{display:none}
body.is-home:not(.is-locked) .hdr:not(.is-solid) .hdr__mark--light{display:block}
.ftr__mark{height:1.85rem;width:auto;display:block}
/* Credit line moves to the next line whole, rather than splitting a company name. */
.ftr__nb{white-space:nowrap}
.hdr__word{display:flex;flex-direction:column;line-height:1}
/* line-height:1 clipped the line box at the baseline, so the y of "Hôrky" hung into
   the descriptor underneath. */
.hdr__word b{font-family:var(--serif);font-weight:600;font-size:1.22rem;letter-spacing:-.01em;
  line-height:1.2;font-variation-settings:'SOFT' 0,'WONK' 1,'opsz' 40}
.hdr__word span{font-size:.5625rem;letter-spacing:.24em;text-transform:uppercase;opacity:.72;margin-top:.1rem;
  white-space:nowrap}
/* WHAT FITS IN THIS BAR, MEASURED RATHER THAN GUESSED.
   The seven labels need 446px of text at 15px. Beside them the bar carries a 217px
   brand, a 106px language track and a 145px button — 468px of chrome before the
   phone number's 147px is counted. At 1000px, where the nav used to appear, there
   were 365px available for it. It did not fit with SIX items either: the label
   simply wrapped to two lines and the brand wrapped under itself, which reads as a
   rendering fault rather than as an overflow, so nobody saw it.
   Three things now give the row its room, in order of what they cost:
     · the gaps, which were 2.5vw and 1.6vw — pure air on a wide screen;
     · the phone number, which moves to 1400px. It is the one element in the bar that
       is duplicated three times over (drawer, footer, every contact-shaped page);
     · Galéria, which steps out between 1140 and 1220 rather than the whole bar going.
   Verified by measurement at 1140, 1220, 1280, 1400, 1440 and 1920. */
.nav{display:none;gap:clamp(.65rem,1.3vw,1.35rem)}
@media (min-width:1140px){.nav{display:flex}}
.nav a{font-size:var(--t-sm);font-weight:500;color:#fff;opacity:.9;position:relative;padding-block:.4rem;transition:opacity .25s;
  /* A label may never break. A two-line "Denné menu" looks like a bug rather than
     like a bar that is out of room, which is exactly why the old overflow went
     unnoticed; unwrapped, the same condition pushes visibly instead. */
  white-space:nowrap}
/* Priority, not all-or-nothing: between 1140 and 1220 seven do not fit but six do, so
   the least transactional link steps out to the drawer and the footer — where it
   already lives, alongside Cenník — instead of taking the other six with it. The
   marker is dropped server-side on the page you are actually on, so the bar never
   hides the item carrying aria-current. */
@media (max-width:1219px){.nav a[data-opt]{display:none}}
.nav a::after{content:'';position:absolute;left:0;right:100%;bottom:.1rem;height:1px;background:currentColor;transition:right .34s var(--ease)}
.nav a:hover{opacity:1}
.nav a:hover::after,.nav a[aria-current]::after{right:0}
.hdr__act{display:flex;align-items:center;gap:1rem}
/* Nav and actions were one undifferentiated row. A hairline splits "where to go"
   from "what to do". */
@media (min-width:1140px){
  .hdr__act::before{content:'';width:1px;align-self:stretch;margin-block:1.3rem;
    background:var(--line-dark);transition:background .4s var(--ease)}
}

/* Colour, not opacity. Transitioning opacity promoted this to its own composited
   layer and back, and the 14px icon visibly jumped a pixel on every hover. */
.hdr__tel{display:none;font-size:var(--t-xs);font-weight:600;white-space:nowrap;
  letter-spacing:.01em;color:rgba(255,255,255,.78);transition:color .22s var(--ease)}
.hdr__tel:hover{color:#fff}
.hdr__tel svg{flex:none;color:var(--glow)}
@media (min-width:1400px){.hdr__tel{display:inline-flex;align-items:center;gap:.45rem}}

/* Pages with no hero start solid — there is no image to sit over. */
body:not(.is-home) .hdr{background:rgba(251,248,242,.82);border-bottom-color:var(--line);
  backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hdr.is-solid,body:not(.is-home) .hdr{background:var(--paper)}
}
body:not(.is-home) .hdr__brand,
body:not(.is-home) .nav a{color:var(--ink)}
body:not(.is-home) .hdr__tel{color:var(--ink-55)}
body:not(.is-home) .hdr__tel:hover,
.hdr.is-solid .hdr__tel:hover{color:var(--ink)}

body:not(.is-home) .burger{border-color:var(--line)}
body:not(.is-home) .burger i{background:var(--ink)}

/* scrolled / solid state */
/* The drop shadow exists so white type stays readable over a photograph. With the drawer
   open the bar is solid cream and the type is dark, so the shadow is just grime. */
body.is-home:not(.is-locked) .hdr:not(.is-solid) .hdr__brand,
body.is-home:not(.is-locked) .hdr:not(.is-solid) .nav a,
body.is-home:not(.is-locked) .hdr:not(.is-solid) .hdr__tel{text-shadow:0 1px 3px rgba(0,0,0,.45),0 2px 16px rgba(0,0,0,.35)}
.hdr.is-solid{background:rgba(251,248,242,.82);border-bottom-color:var(--line);
  backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px)}
.hdr.is-solid .hdr__brand,.hdr.is-solid .nav a{color:var(--ink)}
.hdr.is-solid .hdr__tel{color:var(--ink-55)}
/* WHILE THE DRAWER IS OPEN, THE HEADER STOPS BEING GLASS.
   The drawer is a full-screen dark green panel and the header floats above it, so a
   frosted bar takes its colour from that green and turns grey — with the logo and the
   booking button sitting on a muddy background. Opaque paper while open, and the same
   dark-on-light treatment the solid header uses, so the bar reads as one piece with the
   panel below rather than as something half-transparent over it.
   body.is-locked is already set by the drawer toggle, so there is no new state. */
body.is-locked .hdr{background:var(--paper);border-bottom-color:var(--line);
  backdrop-filter:none;-webkit-backdrop-filter:none}
body.is-locked .hdr__brand,body.is-locked .nav a{color:var(--ink)}
body.is-locked .hdr__tel{color:var(--ink-55)}
body.is-locked .burger{border-color:var(--line)}
body.is-locked .burger i{background:var(--ink)}
body.is-locked .hdr__mark--pine{display:block}
body.is-locked .hdr__mark--light{display:none}
/* The home page's dark scrim would otherwise still be painted behind it. */
body.is-locked .hdr::before{opacity:0}

/* The header CTA is the one solid element — it should not read as a sibling of the
   language switcher.

   Height comes from --ctl, the same token the burger uses, because these two sit side by
   side and were drifting apart: the button was 36.4px against the burger's 41.6px, which
   on a phone is two controls in a row that visibly do not line up. Padding alone could
   not hold them together — one is sized by its text and the other is a square — so the
   square wins and the button matches it. */
.btn--book{
  position:relative;overflow:hidden;isolation:isolate;
  /* A shallow gradient rather than a flat fill: the bar behind it is cream and slightly
     translucent, and a single flat green reads as a sticker laid on top. One step of the
     palette and no more — g-700 to g-800. Running it down to g-900 gave the button a
     near-black hem and turned a quiet lift into a glossy 2010 pill. */
  background:linear-gradient(178deg,var(--g-700) 0%,var(--g-800) 100%);
  border-color:transparent;color:#fff;
  padding:.95em 1.7em;font-size:var(--t-micro);font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;
  box-shadow:
    0 1px 2px rgba(12,31,20,.20),
    0 8px 18px -10px rgba(12,31,20,.55),
    inset 0 1px 0 rgba(255,255,255,.11);   /* the lit top edge that makes it feel milled */
  transition:background .28s var(--ease),box-shadow .35s var(--ease),transform .28s var(--ease);
}
.btn--book .arr{margin-left:.1em;transition:transform .35s var(--ease)}
.btn--book:hover{
  background:linear-gradient(178deg,var(--g-600) 0%,var(--g-700) 100%);
  transform:translateY(-1px);
  box-shadow:
    0 2px 4px rgba(12,31,20,.22),
    0 14px 26px -12px rgba(12,31,20,.62),
    inset 0 1px 0 rgba(255,255,255,.16);
}
.btn--book:hover .arr{transform:translateX(2px)}
.btn--book:active{transform:translateY(0);
  box-shadow:0 1px 2px rgba(12,31,20,.25),inset 0 1px 3px rgba(0,0,0,.22)}

/* A light that crosses the face on hover. Kept to a single quick pass and no more than
   14% white: the point is that the surface catches the light, not that the button
   flashes. It sits above the label deliberately — white over white type changes nothing,
   while over the green it reads as a sheen, so no stacking games are needed. */
/* Only below the burger's own breakpoint, because that is where it appears beside it.
   On a wide bar the CTA stands alone and keeps the size it always had. */
@media (max-width:1139px){
  .btn--book{--ctl:2.9rem;min-height:var(--ctl);padding-block:.6em}
}

@media (prefers-reduced-motion:no-preference){
  .btn--book::after{
    content:'';position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(104deg,transparent 38%,rgba(255,255,255,.14) 50%,transparent 62%);
    transform:translateX(-130%);
  }
  .btn--book:hover::after{transform:translateX(130%);transition:transform .85s var(--ease-out)}
}


/* Language: a segmented track. As three bare words it was easy to miss entirely
   and read as body copy rather than a control. */
.langs{display:none;align-items:stretch;gap:1px;padding:2px;
  border:1px solid var(--line-dark);border-radius:var(--radius);
  transition:border-color .4s var(--ease)}
@media (min-width:1140px){.langs{display:inline-flex}}
.langs a{display:inline-flex;align-items:center;padding:.3rem .5rem;
  font-size:.6875rem;font-weight:700;letter-spacing:.09em;color:#fff;opacity:.55;
  border-radius:1px;transition:opacity .22s var(--ease),background-color .22s var(--ease)}
.langs a:hover{opacity:.92}
.langs a[aria-current]{opacity:1;background:rgba(255,255,255,.16)}
.hdr.is-solid .langs,body:not(.is-home) .langs{border-color:var(--line)}
.hdr.is-solid .langs a,body:not(.is-home) .langs a{color:var(--ink)}
.hdr.is-solid .langs a[aria-current],body:not(.is-home) .langs a[aria-current]{background:rgba(17,21,18,.07)}
.hdr.is-solid .hdr__act::before,body:not(.is-home) .hdr__act::before{background:var(--line)}


/* burger */
.burger{--ctl:2.9rem;
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:var(--ctl);height:var(--ctl);
  padding:0 .7rem;border:1px solid rgba(255,255,255,.28);border-radius:var(--radius);background:transparent;cursor:pointer}
@media (min-width:1140px){.burger{display:none}}
.hdr.is-solid .burger{border-color:var(--line)}
.burger i{display:block;height:1.5px;background:#fff;transition:transform .35s var(--ease),opacity .25s}
.hdr.is-solid .burger i{background:var(--ink)}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* mobile drawer */
/* Sized against the viewport height, not just its width, so the whole menu fits on
   a short phone without scrolling. The links shrink before the list does. */
.drawer{position:fixed;inset:0;z-index:99;background:var(--g-900);color:#fff;
  padding:clamp(5.5rem,11svh,6.5rem) var(--pad) clamp(1.1rem,2.5svh,2rem);
  display:flex;flex-direction:column;gap:0;transform:translateY(-100%);visibility:hidden;
  transition:transform .5s var(--ease-out),visibility .5s;overflow-y:auto}
.drawer.is-open{transform:translateY(0);visibility:visible}
/* Leaving the page: no exit animation to sit through. */
.drawer.is-instant{transition:none}
.drawer a{font-family:var(--serif);font-weight:500;
  font-size:clamp(1.2rem,min(6.4vw,3.5svh),2.4rem);
  padding-block:clamp(.25rem,.9svh,.5rem);
  border-bottom:1px solid var(--line-dark);font-variation-settings:'SOFT' 0,'WONK' 1,'opsz' 60}
.drawer__foot{margin-top:auto;padding-top:clamp(1rem,3svh,2rem);display:grid;
  gap:clamp(.4rem,1.2svh,.9rem);font-size:var(--t-sm);color:rgba(255,255,255,.72)}
body.is-locked{overflow:hidden}

@media (max-width:640px){
  .hdr__in{min-height:4.5rem}
  .hdr__mark{height:1.45rem}
  .hdr__word b{font-size:1.06rem}
  .hdr__word span{font-size:.5rem;letter-spacing:.2em;white-space:nowrap}
  .langs{display:none}                /* languages live in the drawer on mobile */
  .hdr__act{gap:.6rem}
  /* The arrow earns its place on a wide bar and not here: it added about 20px to a
     control already taking two fifths of a 360px screen, and it points at nothing the
     tap does not already say. */
  .hdr__act .btn--book{--ctl:2.6rem;padding-inline:1.05em;letter-spacing:.085em}
  .hdr__act .btn--book .arr{display:none}
  .burger{--ctl:2.6rem}
}
/* The number is the reason a lot of people open this menu at all, so it is set like
   a call, not like a third line of small print. */
.drawer__tel{display:inline-flex;align-items:center;gap:.6rem;align-self:flex-start;
  font-family:var(--serif);font-size:clamp(1.1rem,min(5.2vw,2.6svh),1.65rem);font-weight:600;color:#fff;
  letter-spacing:-.01em;font-variation-settings:'opsz' 40;
  border-bottom:1px solid var(--line-dark);padding-bottom:.2rem;margin-bottom:.15rem}
.drawer__tel svg{color:var(--glow);flex:none}
.drawer__meta{font-size:var(--t-sm);color:rgba(255,255,255,.58);line-height:1.6}

/* Same segmented control as the desktop bar, not three full-width blocks. */
/* justify-self, not align-self: the drawer footer is a grid, where align-self is the
   block axis and the inline axis defaults to stretch — so the track spanned the whole
   drawer. width:fit-content keeps it honest in whatever container it lands in next. */
.drawer__langs{display:inline-flex;width:fit-content;justify-self:start;align-self:start;
  gap:1px;margin:0 0 clamp(.8rem,2.4svh,1.6rem);padding:2px;
  border:1px solid var(--line-dark);border-radius:var(--radius)}
.drawer__langs a{font-family:var(--sans);font-size:.75rem;font-weight:700;letter-spacing:.09em;
  border:0;border-radius:1px;padding:.5rem .95rem;color:#fff;opacity:.55;
  transition:opacity .22s var(--ease),background-color .22s var(--ease)}
.drawer__langs a:hover{opacity:.92}
.drawer__langs a[aria-current]{opacity:1;background:rgba(255,255,255,.16)}

/* Belt and braces for genuinely short viewports — a small phone in landscape, or a
   browser with a lot of chrome. The svh clamps above hit their floors around 500px
   of height; below that this trades type size for the list still fitting. */
@media (max-height:560px){
  .drawer{padding-top:4.75rem;padding-bottom:.9rem}
  .drawer a{font-size:1rem;padding-block:.18rem}
  .drawer__langs{margin-bottom:.55rem}
  .drawer__langs a{padding:.4rem .8rem}
  .drawer__foot{padding-top:.7rem;gap:.25rem}
  .drawer__tel{font-size:1.05rem;margin-bottom:0}
  .drawer__meta{font-size:var(--t-xs);line-height:1.45}
}

/* ---------- 8. Hero ----------------------------------------------------- */
.lede{display:flex;flex-direction:column;min-height:100svh}
/* Centred, not bottom-anchored. The hero stretches to fill the viewport above the
   trust bar, and flex-end dumped all of that slack into one gap under the header. */
.hero{position:relative;flex:1 1 auto;min-height:clamp(460px,58svh,920px);display:flex;align-items:center;
  background:var(--g-900);overflow:hidden;isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:60% 55%}
.hero__scrim{position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(96deg,rgba(7,18,12,.95) 0%,rgba(7,18,12,.88) 20%,rgba(7,18,12,.58) 40%,rgba(7,18,12,.22) 58%,rgba(7,18,12,.10) 100%),
    linear-gradient(to top,rgba(7,18,12,.58) 0%,rgba(7,18,12,.06) 38%,transparent 62%);}
.hero__in{position:relative;z-index:2;width:100%;max-width:var(--max);margin-inline:auto;padding:clamp(6rem,7vw,6.35rem) var(--pad) clamp(1.15rem,1.6vw,1.3rem);
  display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:center}
@media (min-width:1000px){.hero__in{grid-template-columns:minmax(0,1.18fr) minmax(380px,.82fr)}}
.hero__copy{color:#fff;max-width:min(100%,46rem)}
.hero__status{display:inline-flex;align-items:center;gap:.55rem;font-size:var(--t-micro);letter-spacing:.16em;
  text-transform:uppercase;font-weight:600;color:#fff;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.20);padding:.5rem .85rem;border-radius:100px;backdrop-filter:blur(6px)}
/* THE HIDDEN ATTRIBUTE ONLY HIDES THINGS THAT DO NOT SET display THEMSELVES.
   `hidden` is display:none from the UA stylesheet, so the author rule above beat it and
   the pill painted on first frame — an empty capsule with a green pulsing dot — until the
   footer script filled in the text. Reported as "the dot is always green on load and then
   changes". Four other toggled elements in this file already carry this guard
   (.today__moreLabel, .menu__stale, .panel, .gal__item); this one was missed. */
.hero__status[hidden]{display:none}
/* Neutral until proven open. The dot used to default to the green "open" colour and JS
   only ever added the closed variant, so the one state that could leak out before the
   clock had been read was the one making a claim. Now green is opt-in too: unless the
   script has run, the dot asserts nothing. */
.dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.5);flex:none;
  box-shadow:none;animation:none}
.dot--on{background:var(--glow);box-shadow:0 0 0 0 rgba(95,217,141,.65);animation:pulse 2.6s infinite}
.dot--off{background:var(--ember);animation:none;box-shadow:none}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(95,217,141,0)}100%{box-shadow:0 0 0 0 rgba(95,217,141,0)}}
@media (prefers-reduced-motion:reduce){.dot--on{animation:none}}
.hero h1{margin:1.35rem 0 0;color:#fff;text-shadow:0 2px 40px rgba(0,0,0,.32)}
.hero h1 em{font-style:normal;color:var(--glow);display:block}
.hero__sub{margin-top:1.35rem;font-size:var(--t-lead);line-height:1.5;color:rgba(255,255,255,.82);max-width:46ch}
.hero__cta{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.7rem}

/* today card — the differentiator, sits in the hero.
   Set like the full menu page (Fraunces names, Fraunces prices) rather than in the
   body sans; the mismatch was what made it read as a generic app card. */
/* No background on the card itself, deliberately.
   The white hairline along the top edge came from the card's cream background and the
   dark bar occupying the IDENTICAL rectangle on a fractional pixel — measured at left
   25.4453125, half a device pixel at DPR 2 — so both edges were anti-aliased at the same
   boundary and the cream underneath blended through.
   Two earlier attempts failed for instructive reasons: rounding the bar's own corners
   only moved the seam, since the boxes still shared an edge; and bleeding the bar outward
   with a box-shadow ring was clipped away by this element's own overflow:hidden, at
   exactly the boundary that needed covering.
   The cure is to leave nothing underneath to bleed. The bar paints the top, .today__body
   paints the rest, and the card holds only the shape. */
.today{border-radius:var(--radius-lg);box-shadow:var(--shadow-l);overflow:hidden}
.today__body{background:var(--paper)}
/* The cream hairline along the dark bar's edge.
   The card lands on a fractional pixel — measured at left 25.4453125, which is half a
   device pixel at DPR 2 — and the cream card background and the dark bar occupy the
   IDENTICAL rectangle. Both edges are therefore anti-aliased at that boundary, the cream
   underneath showing through the dark on top, which reads as a white line on a phone.
   Rounding the bar's own corners (the first attempt) does not help: it moves the seam
   rather than closing it, because the two boxes still share an edge.
   The ring bleeds the bar's colour 1px outward so there is no shared edge left to blend
   at; the card's overflow:hidden clips it straight back to the rounded corner, and it
   costs no layout because a box-shadow takes no space. */
/* Centred, not baseline-aligned. A shared baseline is usually right for text set side by
   side, but not when the two differ this much: "Dnes na obed" is 17px Fraunces, the date
   is 11px uppercase sans, and the two fonts carry different descents. On one baseline the
   date's optical centre sat 2.25px below the title's — measured — which is exactly the
   amount the eye reads as "not quite in line". Centring puts both on the bar's own centre
   and stays right if either size changes. */
.today__top{background:var(--g-800);color:#fff;padding:.72rem 1.3rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.today__top b{font-family:var(--serif);font-size:1.06rem;font-weight:600;letter-spacing:-.01em}
.today__date{font-size:var(--t-micro);letter-spacing:.13em;text-transform:uppercase;
  color:rgba(251,248,242,.72);white-space:nowrap}
/* The day panels replaced .today__body when the card started carrying every weekday.
   They inherited none of its padding, so rows ran flush to the card edge and
   overflow:hidden clipped the prices. */
.today__day{padding:.3rem 1.3rem .45rem}
.today__row{display:flex;gap:.9rem;align-items:baseline;justify-content:space-between;
  padding-block:.5rem;border-bottom:1px solid var(--line-soft)}
/* The rule under the last dish is the one .today__more draws, so the row drops its own. */
.today__day>.today__row:last-child{border-bottom:0}
.today__k{font-size:var(--t-micro);letter-spacing:.13em;text-transform:uppercase;color:var(--g-600);
  font-weight:700;flex:none;width:4.4rem;padding-top:.3rem}
.today__d{flex:1;font-family:var(--serif);font-size:1.0125rem;font-weight:500;line-height:1.34;
  letter-spacing:-.005em;font-variation-settings:'opsz' 20;color:var(--ink)}
.today__p{flex:none;font-family:var(--serif);font-weight:600;font-size:1.0125rem;white-space:nowrap;
  font-variant-numeric:tabular-nums;font-variation-settings:'opsz' 20}
/* The soup's cell holds words, not a number, so it drops the tabular serif the prices
   use — and it may wrap, because "included with a main" does not fit on one line. */
.today__row--soup .today__p{font-family:var(--sans);font-size:var(--t-xs);font-weight:500;
  color:var(--ink-55);white-space:normal;text-align:right;max-width:7.5rem;line-height:1.3}
.today__foot{padding:0 1.3rem 1.15rem;display:flex;gap:.55rem;flex-wrap:wrap}
/* Third button in the foot. Below 400px the three of them wrap, and the hero is sized
   to exactly one viewport, so the extra row would push the card down and re-crop the
   photograph behind it. The icon keeps the meaning; the title attribute keeps the name. */
@media (max-width:399px){ .today__sub>span{display:none} }
/* Statutory numbers rather than names: four names per dish cost a wrapped line
   each, and the key sits right under the card. */
.alg-in{font-family:var(--sans);font-size:.6875rem;font-weight:600;letter-spacing:.06em;
  color:var(--ink-35);white-space:nowrap;vertical-align:.35em;cursor:help}
.alg-in::before{content:" ";white-space:pre}

/* the all-week dishes: present, but visibly secondary to today */
.today__more{margin:.5rem 1.3rem 0;padding-top:.65rem;border-top:1px solid var(--line)}
.today__moreLabel{display:block;font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--ink-35);margin-bottom:.15rem}
.today__moreLabel[hidden]{display:none}
.today__row--sm{padding-block:.24rem;border-bottom:0;gap:.85rem}
.today__row--sm .today__k{font-size:var(--t-micro);color:var(--ink-35);padding-top:.16rem;letter-spacing:.1em}
.today__row--sm .today__d{font-size:var(--t-sm);font-weight:400;line-height:1.35;color:var(--ink-70)}
.today__row--sm .today__p{font-size:var(--t-sm);color:var(--ink-70);font-weight:600}
.today--closed{padding:1.6rem 1.35rem;font-size:var(--t-sm);color:var(--ink-70)}

/* trust bar — the rating they earned but never showed */
.proof{background:var(--g-800);color:var(--paper);
  border-top:1px solid rgba(255,255,255,.10);border-bottom:1px solid rgba(255,255,255,.10)}
.proof__in{display:flex;flex-wrap:wrap;align-items:center;gap:1rem clamp(1.25rem,3vw,2.75rem);
  padding-block:clamp(.9rem,2vw,1.15rem)}
.proof__rating{display:inline-flex;align-items:center;gap:.55rem;flex:none}
/* Two identical rows stacked; the lit one is clipped to the score, so the last star
   fills partially instead of the whole row claiming a perfect five. */
.proof__stars{position:relative;display:inline-flex;line-height:0}
/* Margin rather than gap, so the five cells are exactly equal: 15px + 2 x .5px = 16px
   each, and a 90% clip lands precisely on the midpoint of the fifth star. A flex `gap`
   sits only BETWEEN items, which makes the last cell narrower and a half star slightly
   wrong. */
.proof__stars__row{display:inline-flex}
.proof__stars__row svg{margin-inline:.5px}
.proof__stars__row--off{color:rgba(251,248,242,.28)}
.proof__stars__row--on{position:absolute;inset-block-start:0;inset-inline-start:0;color:var(--glow);
  clip-path:inset(0 var(--empty,0%) 0 0)}
.proof__rating b{font-family:var(--serif);font-size:1.15rem;font-weight:600;font-variation-settings:'opsz' 30}
.proof__count{font-size:var(--t-xs);color:rgba(251,248,242,.62)}
.proof__rating:hover .proof__count{color:var(--paper)}
/* Separated by a middle dot rather than by whitespace alone — the same device the
   footer and the allergen names use. The column gap is zero and the dot carries its own
   margins instead, so it sits CENTRED between two facts; with flex `gap` doing the
   spacing the dot would hug the item before it and read as punctuation belonging to it.
   The row gap stays, for when the list wraps on a phone. */
.proof__facts{display:flex;flex-wrap:wrap;gap:.5rem 0;
  font-size:var(--t-xs);color:rgba(251,248,242,.72);margin-left:auto}
.proof__facts li{display:inline-flex;align-items:baseline;gap:.35rem}
.proof__facts li:not(:last-child)::after{content:"·";
  margin-inline:clamp(.5rem,1.2vw,1rem);color:rgba(251,248,242,.34)}
/* Set by app.js on whichever item happens to end a line — see the note there. */
.proof__facts li.is-eol::after{content:none}
.proof__facts b{color:var(--paper);font-weight:700}
@media (max-width:640px){.proof__facts{margin-left:0}}

@media (min-width:900px){.amen--3{grid-template-columns:repeat(3,1fr);column-gap:2.5rem}}

/* Room slider on the booking page. Crossfade rather than slide: the frame is fixed and
   the photographs are all the same crop, so sliding would only add motion for its own
   sake. Stacked absolutely with the first in flow, which is what gives the box its
   height without hard-coding one. */
.rslide{position:relative;isolation:isolate}
.rslide__s{margin:0}
.rslide__s+.rslide__s{position:absolute;inset:0}
.rslide__s{opacity:0;transition:opacity .9s var(--ease)}
.rslide__s.is-on{opacity:1}
.rslide__s img{width:100%;height:100%;object-fit:cover;display:block}
.rslide__cap{position:absolute;left:0;right:0;bottom:0;margin:0;padding:2.4rem .95rem .8rem;
  font-size:var(--t-xs);font-weight:600;color:#fff;letter-spacing:.01em;
  background:linear-gradient(to top,rgba(7,18,12,.72),transparent)}
.rslide__dots{position:absolute;right:.8rem;bottom:.8rem;z-index:2;display:flex;gap:.4rem}
.rslide__dot{width:.5rem;height:.5rem;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.45);transition:background .3s var(--ease),transform .3s var(--ease)}
.rslide__dot.is-on{background:#fff;transform:scale(1.25)}
@media (prefers-reduced-motion:reduce){
  .rslide__s{transition:none}
}

/* ---------- 9. Denné menu ---------------------------------------------- */
/* "Nové menu pripravujeme": shown from the Saturday after the listed week, so the
   page never presents a spent week as this week's lunch. JavaScript unhides it. */
.menu__stale{display:flex;flex-direction:column;gap:.3rem;margin-bottom:1.5rem;padding:1rem 1.15rem;
  border:1px solid rgba(194,104,60,.30);border-radius:var(--radius-lg);
  background:rgba(194,104,60,.06)}
.menu__stale[hidden]{display:none}
.menu__stale b{font-weight:600;color:var(--ember)}
.menu__stale span{color:var(--ink-70);font-size:var(--t-sm);line-height:1.55}
/* The weekend is normal, not a problem: same shape, without the ember alarm. */
.menu__stale--calm{border-color:var(--line);background:var(--paper-2)}
.menu__stale--calm b{color:var(--g-600)}
.menu__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.5rem}

.panel[hidden]{display:none}
.panel{animation:fade .45s var(--ease-out)}
@keyframes fade{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.panel{animation:none}}

/* Menu card: a printed-menu measure, not the full page width. */
.menu-card{max-width:56rem;margin-inline:auto}

.courses{margin:0}
.course{display:grid;gap:.3rem 1.5rem;padding-block:1.5rem;border-bottom:1px solid var(--line-soft)}
@media (min-width:720px){.course{grid-template-columns:6.5rem minmax(0,1fr);align-items:baseline}}
.course:last-child{border-bottom:0}

.course__k{margin:0;font-size:var(--t-micro);letter-spacing:.15em;text-transform:uppercase;
  font-weight:700;color:var(--g-600);line-height:1.9}
.course--soup .course__k{color:var(--ember)}

.course__row{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .65rem;min-width:0}
.course__n{font-family:var(--serif);font-size:clamp(1.08rem,1.5vw,1.28rem);font-weight:500;
  line-height:1.34;letter-spacing:-.012em;font-variation-settings:'SOFT' 0,'WONK' 0,'opsz' 40}

/* A real leader: evenly spaced dots sitting on the baseline, so they line up from
   row to row. A dotted border cannot do this — its spacing is browser-decided and it
   hangs below the text. */
.course__lead{flex:1 1 auto;min-width:1.5rem;align-self:baseline;height:.62em;
  background-image:radial-gradient(circle,currentColor .95px,transparent 1.05px);
  background-size:6px 6px;background-position:left bottom;background-repeat:repeat-x;
  color:var(--ink);opacity:.26}

/* On a narrow screen the name wraps and the leader is left stranded on a line of
   its own, so it stops being a leader and becomes a stray dotted rule. */
@media (max-width:520px){.course__lead{display:none}}
.course__p{flex:none;font-family:var(--serif);font-weight:600;
  font-size:clamp(1.02rem,1.35vw,1.18rem);white-space:nowrap;font-variation-settings:'opsz' 30}
/* The soup is included, so its "price" should recede rather than compete. */
.course--soup .course__p{font-family:var(--sans);font-size:var(--t-xs);font-weight:500;
  color:var(--ink-55);letter-spacing:.02em}

/* Allergens as marginalia, not chips. */
.alg{flex-basis:100%;margin-top:.3rem;font-size:var(--t-xs);color:var(--ink-55);
  letter-spacing:.01em;line-height:1.4}

/* All-week dishes are a separate course group, and should look like one. */
.weekly{margin-top:2.5rem;padding-top:2rem;border-top:1px solid var(--line)}
.weekly__h{font-size:var(--t-micro);letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--ink-35);text-align:center;margin-bottom:.35rem}
.courses--weekly .course{border-bottom:1px solid var(--line-soft)}
/* Saturday and Sunday have no daily menu to list, so the all-week dishes ARE the
   panel. A short note leads, and the rule that normally separates the two sits
   closer because there is only one thing above it. */
.panel__note{margin:.15rem 0 0;color:var(--ink-70);font-size:var(--t-sm);line-height:1.6}
.panel--weekend .weekly{margin-top:1.7rem;padding-top:1.6rem}
.courses--weekly .course:last-child{border-bottom:0}
.courses--weekly .course__k{color:var(--ink-35)}

/* Day nav: editorial, not app chrome. Boxes made this look like a settings screen. */
.days{display:flex;gap:clamp(.9rem,2.4vw,1.9rem);overflow-x:auto;scrollbar-width:none;
  padding-bottom:.2rem;margin-inline:calc(var(--pad)*-1);padding-inline:var(--pad);
  -webkit-overflow-scrolling:touch}
@media (max-width:759px){
  /* Fade the right edge to show the strip scrolls — but only when it actually does.
     Unconditionally, the mask ate the last tab on screens where all five days fit. */
  .days.is-scrollable{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 2.5rem),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 2.5rem),transparent)}
  /* The gallery filter is five short words. Wrapping them beats hiding one off the
     edge and hoping the visitor swipes. */
  #galFilter{flex-wrap:wrap;overflow:visible;gap:.35rem 1.15rem;
    margin-inline:0;padding-inline:0;-webkit-mask-image:none;mask-image:none}
}
.days::-webkit-scrollbar{display:none}
@media (min-width:760px){.days{margin-inline:0;padding-inline:0;flex-wrap:wrap}}
.day{flex:none;padding:.3rem 0 .55rem;border:0;background:none;cursor:pointer;text-align:left;
  color:var(--ink-35);border-bottom:2px solid transparent;
  transition:color .25s var(--ease),border-color .25s var(--ease)}
.day:hover{color:var(--ink-70)}
.day b{display:block;font-size:var(--t-sm);font-weight:600;letter-spacing:-.005em}
.day small{display:block;font-size:var(--t-micro);font-weight:500;opacity:.75;margin-top:.15rem;
  letter-spacing:.06em;font-variant-numeric:tabular-nums}
.day[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.day--today[aria-selected="true"]{border-bottom-color:var(--g-500)}
.day--today b::after{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--g-500);margin-left:.42em;vertical-align:.18em}

/* Seven full day names and their dates need about 590px. Below that the strip either
   scrolls or drops Sunday off the edge, and a week you have to swipe through is a week
   you cannot see. So on a phone the days go to their two-letter form and the seven
   share the width evenly — the whole week at a glance, nothing to scroll. */
.day__ab{display:none}
/* The week label sits beside the strip on a wide screen, which was the whole reason
   seven days did not fit a phone: the strip only ever got half the row. Give it the
   full width and the full names fit down to about 470px on their own. */
@media (max-width:759px){
  .menu__head{flex-direction:column;align-items:stretch;gap:.8rem}
  .days{width:100%;justify-content:space-between;gap:.35rem;
    margin-inline:0;padding-inline:0}
}
/* Only below this does a name have to give way, and then only to three letters. */
@media (max-width:539px){
  .days{gap:.2rem}
  .day{flex:1 1 0;min-width:0;text-align:center;padding-inline:1px}
  .day__full{display:none}
  .day__ab{display:inline}
  .day small{letter-spacing:.02em;white-space:nowrap}
  .day--today b::after{margin-left:.28em;width:4px;height:4px}
}

.legend{margin-top:2.25rem;padding-top:1.5rem;border-top:1px solid var(--line);
  display:grid;gap:.5rem 1.5rem;font-size:var(--t-xs);color:var(--ink-55)}
@media (min-width:700px){.legend{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}}

.menu__note{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:center;
  font-size:var(--t-xs);color:var(--ink-55)}
/* Each note is its own row of icon + text. As plain inline content the items
   shrank and the label wrapped underneath the icon. */
.menu__note>*{display:inline-flex;align-items:center;gap:.5rem;flex:0 0 auto;max-width:100%}
.menu__note svg{flex:none}
.menu__note a{white-space:nowrap}



/* PDF fallback when parsing is not confident */
.pdffall{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.pdffall img{width:100%}
.pdffall__bar{padding:.9rem 1.15rem;display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;justify-content:space-between;
  border-top:1px solid var(--line);font-size:var(--t-sm)}

/* ---------- 10. Cards --------------------------------------------------- */
.cards{display:grid;gap:var(--gap)}
.cards--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.cards--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.cards--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,225px),1fr))}

.card{background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--radius-lg);overflow:hidden;
  display:flex;flex-direction:column}
.card__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--paper-3)}
.card__media img{width:100%;height:100%;object-fit:cover}
.card__badge{position:absolute;z-index:2;left:.85rem;top:.85rem;background:rgba(12,31,20,.82);color:#fff;
  font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;font-weight:600;padding:.35rem .7rem;border-radius:100px;
  backdrop-filter:blur(5px)}
.card__body{padding:1.35rem 1.35rem 1.5rem;display:flex;flex-direction:column;gap:.7rem;flex:1}
.card__meta{display:flex;flex-wrap:wrap;gap:.35rem .9rem;font-size:var(--t-xs);color:var(--ink-55)}
.card__meta span{display:inline-flex;align-items:center;gap:.35rem}
.card__price{margin-top:auto;padding-top:.9rem;border-top:1px solid var(--line-soft);
  display:flex;align-items:baseline;justify-content:space-between;gap:.75rem}
.card__price b{font-family:var(--serif);font-size:1.5rem;font-weight:600;font-variation-settings:'opsz' 40}
.card__price small{font-size:var(--t-xs);color:var(--ink-55)}

.collage{display:grid;gap:.7rem;grid-template-columns:1fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));aspect-ratio:1/1.02}
.collage>*{min-height:0;min-width:0}
.collage .figure{aspect-ratio:auto;height:100%;border-radius:var(--radius-lg)}
.collage .figure img{width:100%;height:100%;object-fit:cover}
.collage__a{grid-row:1/3}
@media (max-width:939px){.collage{aspect-ratio:3/2}}

/* ---------- 11. Feature / split bands ---------------------------------- */
.split{display:grid;gap:clamp(1.75rem,4vw,4rem);align-items:center}
@media (min-width:940px){
  .split{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split--wideL{grid-template-columns:1.15fr .85fr}
  .split--wideR{grid-template-columns:.85fr 1.15fr}
  .split--flip>*:first-child{order:2}
}
.figure{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--paper-3)}
.figure img{width:100%;height:100%;object-fit:cover}
.figure--tall{aspect-ratio:4/5}
.figure--wide{aspect-ratio:3/2}
.figure__cap{position:absolute;left:0;right:0;bottom:0;padding:2.5rem 1.35rem 1.15rem;color:#fff;font-size:var(--t-xs);
  background:linear-gradient(to top,rgba(8,20,13,.78),transparent)}

.stats{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
@media (min-width:620px){.stats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}
/* Content-sized, not three equal thirds. The values are wildly different lengths —
   "8:00 – 18:00" against "90" — and equal columns starved the widest one while the other
   two sat on spare room. With nowrap above (right, so a price range never breaks) and
   overflow:hidden on the strip, the hours simply got sliced off mid-glyph on any screen
   between the single-column breakpoint and about 610px. `auto` tracks take the width they
   need first, then share what is left, so nothing is ever cut. */
.stats--3{grid-template-columns:repeat(3,auto)}
.stats--3 .stat b{font-size:clamp(1.05rem,2.1vw,1.55rem)}
.stats--3 .stat{padding:1.1rem 1rem}
@media (max-width:560px){.stats--3{grid-template-columns:1fr}}
.stat{background:var(--paper);padding:1.35rem 1.25rem}
.stat b{display:block;font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.15rem);font-weight:600;line-height:1;
  font-variation-settings:'opsz' 60}
.stat span{display:block;margin-top:.45rem;font-size:var(--t-xs);color:var(--ink-55);letter-spacing:.02em}
.dark .stats{background:var(--line-dark);border-color:var(--line-dark)}
.dark .stat{background:var(--g-900)}
.dark .stat span{color:rgba(251,248,242,.6)}

/* amenity list */
.amen{display:grid;gap:.15rem}
@media (min-width:640px){.amen{grid-template-columns:repeat(2,1fr) ;column-gap:2.5rem}}
.amen li{display:flex;gap:.8rem;align-items:flex-start;padding-block:.72rem;border-bottom:1px solid var(--line-soft);font-size:var(--t-sm)}
.amen svg{flex:none;margin-top:.22rem;color:var(--g-500)}

/* attraction row */
.att{display:flex;gap:1.1rem;align-items:center;padding-block:1.1rem;border-bottom:1px solid var(--line-soft)}
.att:hover .att__d{color:var(--g-700)}
.att__d{font-family:var(--serif);font-size:1.15rem;font-weight:600;color:var(--g-500);flex:none;width:4.6rem;
  transition:color .25s var(--ease);
  font-variation-settings:'opsz' 30}
.att__n{flex:1;min-width:0}
.att__n b{font-weight:600;font-size:var(--t-body)}
.att__n span{display:block;font-size:var(--t-xs);color:var(--ink-55);margin-top:.12rem}

/* occasion row (/oslavy/)
   Two columns rather than the stacked name-and-note of .att: five rows of one line
   each read faster side by side, and it keeps the occasion someone came looking for
   in a column of its own instead of buried in a paragraph. Stacks below 760px, where
   sixteen rems of left column would leave the note about four words wide. */
.occ{border-top:1px solid var(--line)}
.occ li{display:grid;gap:.25rem 1.75rem;padding-block:1.15rem;border-bottom:1px solid var(--line-soft)}
@media (min-width:760px){.occ li{grid-template-columns:minmax(0,16rem) minmax(0,1fr);align-items:baseline}}
.occ b{font-family:var(--serif);font-weight:600;font-size:1.15rem;letter-spacing:-.01em;
  font-variation-settings:'opsz' 30}
.occ span{color:var(--ink-55);font-size:var(--t-sm);line-height:1.62}
/* The hairlines are ink at 7% and 13%, which is nothing at all over pine. */
.dark .occ{border-top-color:var(--line-dark)}
.dark .occ li{border-bottom-color:var(--line-dark)}
.dark .occ b{color:var(--paper)}
.dark .occ span{color:rgba(251,248,242,.62)}

/* ---------- Gallery ----------------------------------------------------- */
/* Phones get a plain, uniform grid. The equal-height rows and the two-row portrait
   spans only make sense once there are three columns to play them against; at two
   columns they left a row's worth of empty space under every row. */
.gal{display:grid;gap:.65rem;grid-template-columns:repeat(2,1fr);grid-auto-flow:dense;margin-top:1.75rem}
@media (min-width:700px){
  .gal{grid-template-columns:repeat(3,1fr);gap:.8rem;grid-auto-rows:minmax(0,1fr)}
}
@media (min-width:1100px){.gal{grid-template-columns:repeat(4,1fr)}}
.gal__item{margin:0;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/3;
  background:linear-gradient(100deg,var(--paper-3) 30%,var(--paper-2) 50%,var(--paper-3) 70%) 0 0/300% 100%;
  animation:shimmer 1.6s linear infinite}
.gal__item:has(img.is-loaded),.gal__item:has(img.is-failed){animation:none;background:var(--paper-3)}
@keyframes shimmer{to{background-position:-300% 0}}
@media (prefers-reduced-motion:reduce){.gal__item{animation:none;background:var(--paper-3)}}
.gal__item--tall{aspect-ratio:4/3}
/* A portrait tile spans two rows. It must not also be allowed to SIZE them.
   grid-auto-rows:minmax(0,1fr) makes every row in the grid the same height, so the
   tallest thing spanning two rows sets the height of every row in the gallery --
   and two of the party photographs are 0.455 (roughly 9:20). At a 242px column they
   asked for 532px, which forced every row to 260px while an ordinary 4/3 tile is
   182px: 78px of dead space under every landscape photo, scaling with column width,
   so it looked worst on a tablet. aspect-ratio:auto let the photograph's own
   proportions do that; 2/3 is two 4/3 rows, which is the most a two-row item can
   honestly ask for. The grid then stretches it back to exactly two rows plus the
   gap and object-fit:cover crops it, which is what it already does to every tile. */
@media (min-width:700px){.gal__item--tall{grid-row:span 2;aspect-ratio:2/3;height:100%}}
/* height:100% because aspect-ratio alone made the box a definite 1.5w and it then
   stopped short of its own two-row span by exactly the row gap. Filling the area
   explicitly closes that without letting the ratio back into track sizing --
   measured: dead space per row stays at 0.5px, the tall tile lands on 376.3px. */
.gal__item[hidden]{display:none}
.gal__btn{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
.gal__btn img{width:100%;height:100%;object-fit:cover;opacity:0;
  transition:transform .7s var(--ease-out),opacity .5s var(--ease)}
.gal__btn img.is-loaded{opacity:1}
.gal__btn:hover img{transform:scale(1.04)}
.gal__btn:focus-visible{outline:3px solid var(--g-500);outline-offset:-3px}

/* lightbox — native <dialog>, so Esc and focus handling come for free */
.lb{border:0;padding:0;max-width:100vw;max-height:100vh;width:100vw;height:100dvh;
  background:rgba(8,20,13,.96);color:var(--paper);overflow:hidden}
.lb::backdrop{background:rgba(8,20,13,.9)}
.lb[open]{display:flex;align-items:center;justify-content:center;gap:1rem}
.lb__fig{margin:0;max-width:min(1400px,92vw);max-height:88dvh;display:flex;flex-direction:column;gap:.85rem}
.lb__fig img{max-width:100%;max-height:78dvh;width:auto;height:auto;object-fit:contain;border-radius:var(--radius-lg)}
.lb__fig figcaption{font-size:var(--t-xs);color:rgba(251,248,242,.7);text-align:center}
.lb__x{position:absolute;top:1rem;right:1rem;width:2.75rem;height:2.75rem;border-radius:50%;
  border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;font-size:1.5rem;
  line-height:1;cursor:pointer;backdrop-filter:blur(6px)}
.lb__nav{flex:none;width:3rem;height:3rem;border-radius:50%;border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08);color:#fff;font-size:1.75rem;line-height:1;cursor:pointer;backdrop-filter:blur(6px)}
.lb__x:hover,.lb__nav:hover{background:#fff;color:var(--g-900)}
@media (max-width:700px){
  .lb__nav{position:absolute;bottom:1.25rem;z-index:2}
  .lb__nav--prev{left:1.25rem} .lb__nav--next{right:1.25rem}
}

/* ---------- 12. Forms --------------------------------------------------- */
/* Weekly menu subscription. Sits under the week, on the tinted ground so it reads
   as an offer rather than another course. */
.subs{max-width:56rem;margin:clamp(2.5rem,5vw,4rem) auto 0;padding:clamp(1.5rem,4vw,2.5rem);
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-lg)}
.subs__h{font-family:var(--serif);font-size:var(--t-d3);line-height:1.15;letter-spacing:-.01em}
.subs__lead{margin-top:.6rem;color:var(--ink-70);font-size:var(--t-sm);line-height:1.6;max-width:44ch}
.subs__form{margin-top:1.35rem}
/* The button sits on the field's baseline, not the label's, so it lines up with the
   input rather than floating a label's height above it. */
.subs__row{display:grid;gap:.75rem;align-items:end}
.subs__row .btn{width:100%}
@media (min-width:620px){
  .subs__row{grid-template-columns:minmax(0,1fr) auto}
  /* Match the input exactly: same font size and padding units, so the only thing
     left to equalise is the line box. Without this the button stands 4px taller. */
  .subs__row .btn{width:auto;line-height:1.35}
}

.form{display:grid;gap:1.15rem}
.field{display:grid;gap:.45rem}
.field>label{font-size:var(--t-xs);font-weight:600;letter-spacing:.03em;color:var(--ink-70)}
.field input,.field select,.field textarea{
  width:100%;padding:.9rem 1rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  font-size:var(--t-sm);line-height:1.35;color:var(--ink);
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}

/* Safari renders selects and date fields with its own chrome, at its own height, and
   ignores most of the above. Normalise all three so the grid lines up. */
.field select{
  padding-right:2.6rem;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23111512' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:.72rem}
.field select::-ms-expand{display:none}

/* Date inputs: Safari left-pads the value and shows its own indicator. */
.field input[type="date"]{min-height:3.05rem;font-variant-numeric:tabular-nums}
.field input[type="date"]::-webkit-date-and-time-value{text-align:left;margin:0;line-height:1.35}
.field input[type="date"]::-webkit-datetime-edit{padding:0}
.field input[type="date"]::-webkit-calendar-picker-indicator{
  opacity:.45;cursor:pointer;transition:opacity .2s var(--ease)}
.field input[type="date"]:hover::-webkit-calendar-picker-indicator{opacity:.85}
.field input[type="date"]::-webkit-inner-spin-button,
.field input[type="date"]::-webkit-clear-button{display:none;-webkit-appearance:none}
/* Every control ends up the same height, whatever the browser wants. */
.field input,.field select{min-height:3.05rem}
.field textarea{min-height:7rem}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--g-500);box-shadow:0 0 0 3px rgba(46,139,87,.14)}
.field textarea{resize:vertical}
.field--2{display:grid;gap:1.15rem}
@media (min-width:560px){.field--2{grid-template-columns:1fr 1fr}}
/* Turnstile renders its own iframe; it only needs room and the right rhythm.
   interaction-only means most visitors never see it at all. */
.cf-turnstile{margin:.25rem 0}
.cf-turnstile:empty{display:none;margin:0}

/* touch-action:manipulation is the whole fix for the tap feeling slow: without it the
   browser holds the tap while it waits to see whether a second one is coming, because a
   double tap would mean zoom. user-select stops a long word-drag turning into a text
   selection instead of a toggle. */
.check{display:flex;gap:.7rem;align-items:flex-start;font-size:var(--t-xs);color:var(--ink-70);line-height:1.5;
  touch-action:manipulation;-webkit-user-select:none;user-select:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.check input{margin-top:.15rem;accent-color:var(--g-500);width:1.1rem;height:1.1rem;flex:none;
  border-radius:3px;cursor:pointer;touch-action:manipulation}
/* The sentence and the link share a line and read as one thought, but they are siblings
   rather than nested: the <label for> wraps only the sentence, so tapping it toggles and
   tapping the link follows it, with nothing for the browser to disambiguate. Putting the
   link on its own row underneath solved the tap delay too and looked orphaned. */
.check__t{display:inline}
.check__t label{cursor:pointer}
.check__t a{color:var(--ink-55);text-decoration:underline;text-underline-offset:2px;
  white-space:nowrap;touch-action:manipulation}
.check__t a:hover{color:var(--ink)}
.form__err{font-size:var(--t-xs);color:#B3261E}
.notice{padding:1rem 1.15rem;border-radius:var(--radius);font-size:var(--t-sm);border:1px solid}
.notice--ok{background:var(--g-100);border-color:var(--g-200);color:var(--g-700)}
.notice--bad{background:#FDECEA;border-color:#F5C6C2;color:#8C1D18}

/* ---------- Prose (legal & long-form pages) ----------------------------- */
.prose{max-width:70ch;margin-top:2.25rem;font-size:1.0625rem;line-height:1.72;color:var(--ink-70)}
.prose>*+*{margin-top:1.1rem}
.prose h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.18;
  letter-spacing:-.014em;color:var(--ink);margin-top:2.75rem;font-variation-settings:'SOFT' 0,'WONK' 1,'opsz' 50}
.prose h3{font-family:var(--serif);font-weight:600;font-size:1.15rem;color:var(--ink);margin-top:1.9rem;
  font-variation-settings:'opsz' 24}
.prose p{margin-top:1.1rem}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--g-600);border-bottom:1px solid var(--line);padding-bottom:.05em}
.prose a:hover{border-color:currentColor}
/* A phone number is one token to read even though it has spaces in it: without
   this the narrow legal tables break it after the country code. */
.prose .nb{white-space:nowrap}
.prose ul,.prose ol{margin-top:1rem;padding-left:1.35rem}
.prose ul{list-style:disc} .prose ol{list-style:decimal}
.prose li{margin-top:.45rem;padding-left:.25rem}
.prose li::marker{color:var(--g-500)}
.prose table{width:100%;border-collapse:collapse;margin-top:1.4rem;font-size:var(--t-sm)}
.prose th,.prose td{text-align:left;padding:.7rem .75rem;border-bottom:1px solid var(--line-soft);vertical-align:top}
.prose th{color:var(--ink);font-weight:600;border-bottom-color:var(--line)}
.prose hr{border:0;height:1px;background:var(--line);margin-block:2.25rem}
.prose__updated{font-size:var(--t-xs);color:var(--ink-55);margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid var(--line)}

.ptable-wrap{margin-top:clamp(1.75rem,3.5vw,2.5rem);overflow-x:auto;
  border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--paper)}
.ptable{width:100%;border-collapse:collapse;font-size:var(--t-sm);min-width:34rem}
.ptable--two{min-width:0}
.ptable th,.ptable td{text-align:left;padding:.95rem 1.15rem;border-bottom:1px solid var(--line-soft);vertical-align:baseline}
.ptable thead th{font-size:var(--t-micro);letter-spacing:.13em;text-transform:uppercase;color:var(--g-600);
  font-weight:700;border-bottom:1px solid var(--line);white-space:nowrap}
.ptable tbody th{font-weight:600;color:var(--ink)}
.ptable tbody th small{display:block;font-weight:400;font-size:var(--t-xs);color:var(--ink-55);margin-top:.18rem}
.ptable .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;
  font-family:var(--serif);font-weight:600;font-size:1.02rem;font-variation-settings:'opsz' 30}
.ptable thead .num{font-family:var(--sans);font-size:var(--t-micro);font-weight:700}
.ptable tbody tr:last-child th,.ptable tbody tr:last-child td{border-bottom:1px solid var(--line)}
.ptable tfoot td{font-size:var(--t-xs);color:var(--ink-55);border-bottom:0;padding-block:.8rem}
.ptable tfoot .num{font-family:var(--sans);font-size:var(--t-xs);font-weight:600;color:var(--ink-55)}
.ptable-note{margin-top:.9rem;font-size:var(--t-xs);color:var(--ink-55)}


/* Statutory allergen key. Dishes name their own allergens, so this is reference
   the law requires on a menu, not something to put in front of the reader. */
.algkey{margin-top:1.1rem;border-top:1px solid var(--line-soft);padding-top:.9rem}
.algkey>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:.5rem;
  font-size:var(--t-micro);letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--g-600)}
.algkey>summary::-webkit-details-marker{display:none}
.algkey>summary::after{content:"";width:.42rem;height:.42rem;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);
  transition:transform .25s var(--ease)}
.algkey[open]>summary::after{transform:rotate(-135deg) translate(-1px,-1px)}
.algkey>summary:focus-visible{outline:2px solid var(--g-500);outline-offset:3px}
/* Columns, not a row-flowed grid. Laid out across, the wide gaps made the eye
   read down each column and the numbering looked scrambled (1,5,9,13). */
/* column-count on its own. `columns: 2 12rem` looks like "two columns, at least
   12rem each", but the used count is min(count, floor(available / width)) — so on a
   phone the width won and it rendered one column. */
.algkey__list{margin:.9rem 0 .25rem;padding:0;list-style:none;
  column-count:2;column-gap:1.25rem;
  font-size:var(--t-xs);color:var(--ink-55)}
@media (min-width:640px){.algkey__list{column-count:3;column-gap:1.75rem}}
@media (min-width:1000px){.algkey__list{column-count:4;column-gap:2rem}}
.algkey__list li{display:flex;gap:.55rem;align-items:baseline;
  break-inside:avoid;-webkit-column-break-inside:avoid;padding-block:.15rem}
.algkey__list li::before{content:attr(value);flex:none;min-width:1.15rem;text-align:right;
  font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.algkey--card{margin:0 1.3rem .95rem;padding-top:.7rem;border-top:1px solid var(--line-soft)}
/* The hero fills the viewport, so anything that grows inside the card grows the
   hero and re-crops the photograph behind it. On narrow screens the card links to
   the key on the menu page instead of expanding one in place. */
.algkey--link{margin:0 1.3rem .95rem;padding-top:.7rem;border-top:1px solid var(--line-soft);
  display:none;font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--g-600)}
@media (max-width:999px){
  .algkey--card{display:none}
  .algkey--link{display:block}
}
.algkey--card[open]{margin-bottom:1.2rem}
.algkey--card>summary{font-size:.625rem;letter-spacing:.14em}
.algkey--card .algkey__list{column-count:2;column-gap:1.1rem;margin:.7rem 0 0;font-size:.6875rem}
.algkey--card .algkey__list li{padding-block:.06rem}

/* flat accommodation rate: one number, two qualifiers */
.rate{margin-top:clamp(1.75rem,3.5vw,2.5rem);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;background:var(--paper)}
.rate__head{background:var(--g-900);color:var(--paper);padding:clamp(1.5rem,3.4vw,2.35rem) clamp(1.25rem,3vw,2.1rem);
  display:flex;align-items:baseline;gap:clamp(.9rem,2.4vw,1.6rem);flex-wrap:wrap}
.rate__head b{font-family:var(--serif);font-weight:600;line-height:.86;letter-spacing:-.02em;
  font-size:clamp(3.1rem,8vw,4.9rem);font-variation-settings:'opsz' 96;font-variant-numeric:tabular-nums}
.rate__head span{font-size:var(--t-sm);color:rgba(251,248,242,.68);line-height:1.5}
.rate__head em{display:block;font-style:normal;color:var(--glow);font-weight:600;margin-top:.2rem}
.rate__rows{padding:.35rem clamp(1.25rem,3vw,2.1rem) .9rem}
.rate__row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding-block:.9rem;border-bottom:1px solid var(--line-soft);font-size:var(--t-sm)}
.rate__row:last-child{border-bottom:0}
.rate__row span{color:var(--ink-55)}
.rate__row b{font-family:var(--serif);font-weight:600;font-size:1.15rem;white-space:nowrap;
  font-variation-settings:'opsz' 30;font-variant-numeric:tabular-nums}
/* the flat rate, stated once above a grid of rooms */
.rateline{margin:clamp(1.5rem,3vw,2.25rem) 0 clamp(1.5rem,3vw,2.25rem);
  display:flex;align-items:baseline;flex-wrap:wrap;gap:.5rem clamp(1rem,2.4vw,1.75rem);
  padding-bottom:clamp(1.1rem,2.4vw,1.5rem);border-bottom:1px solid var(--line)}
.rateline b{font-family:var(--serif);font-weight:600;font-size:clamp(1.9rem,3.6vw,2.6rem);line-height:1;
  letter-spacing:-.02em;font-variation-settings:'opsz' 60;font-variant-numeric:tabular-nums}
.rateline p{flex:1 1 18rem;min-width:0;font-size:var(--t-sm);color:var(--ink-55);line-height:1.55}
.rateline .alink{flex:none}

/* ---------- Contact ------------------------------------------------------ */
/* Four ways to reach a person, in one grid. */
.ccards{display:grid;gap:var(--gap);margin-top:clamp(2rem,4vw,3rem)}
@media (min-width:720px){.ccards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ccard{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--paper);
  padding:clamp(1.15rem,2.4vw,1.6rem);display:flex;flex-direction:column}
.ccard__k{font-size:var(--t-micro);letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--g-600)}
.ccard__n{display:inline-flex;align-items:center;gap:.55rem;margin-top:.6rem;align-self:flex-start;max-width:100%;
  font-family:var(--serif);font-weight:600;font-size:clamp(1.2rem,2.4vw,1.5rem);letter-spacing:-.01em;
  font-variation-settings:'opsz' 40;color:var(--ink);
  border-bottom:1px solid var(--line);padding-bottom:.12rem;transition:border-color .28s var(--ease)}
.ccard__n--mail{font-size:clamp(.95rem,1.8vw,1.15rem);word-break:break-word}
.ccard__n:hover{border-color:var(--g-500)}
.ccard__n svg{color:var(--g-500);flex:none}
.ccard p{margin-top:.7rem;font-size:var(--t-sm);color:var(--ink-55);line-height:1.6}

/* Where and when. The map carries the address instead of sitting alone in a band. */
.cfind{display:grid;gap:clamp(1.5rem,3vw,2.5rem);margin-top:clamp(2.75rem,5.5vw,4rem);align-items:start}
@media (min-width:900px){.cfind{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}}
.cfind__map{position:relative;border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;aspect-ratio:4/3;background:var(--paper-2)}
@media (min-width:900px){.cfind__map{aspect-ratio:auto;height:100%;min-height:24rem}}
/* Taller than the frame, pinned to the top: OSM's footer strip falls past the bottom
   edge and is clipped. 64px covers it even when it wraps to two lines on a phone. */
.cfind__map iframe{position:absolute;inset:0 0 auto 0;width:100%;height:calc(100% + 64px);
  border:0;display:block}
/* Our own credit, since theirs went with the strip. */
.cfind__attr{position:absolute;right:.5rem;bottom:.35rem;margin:0;font-size:.625rem;
  line-height:1.4;color:var(--ink-55);background:rgba(251,248,242,.82);
  padding:.15rem .45rem;border-radius:2px;pointer-events:auto}
.cfind__attr a{color:inherit;text-decoration:none}
.cfind__attr a:hover{text-decoration:underline}
.cfind__side h2{font-size:var(--t-micro);letter-spacing:.13em;text-transform:uppercase;
  font-weight:700;color:var(--ink-35)}
.cfind__addr{margin-top:.85rem;margin-bottom:1.1rem;font-size:var(--t-sm);line-height:1.65}
.cfind__rows{margin-top:.85rem;font-size:var(--t-sm)}
.cfind__rows .row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding-block:.55rem;border-bottom:1px solid var(--line-soft)}
.cfind__rows .row:last-child{border-bottom:0}
.cfind__rows .row span{color:var(--ink-55)}
.cfind__rows .row b{font-weight:600;white-space:nowrap}

/* Write. The company record fills the column the form leaves empty. */
.cform{display:grid;gap:clamp(1.75rem,4vw,3.5rem);margin-top:clamp(2.75rem,5.5vw,4rem);
  padding-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--line);align-items:start}
.cform__say .h2{max-width:16ch}
@media (min-width:900px){
  .cform{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    column-gap:clamp(1.75rem,4vw,3.5rem);row-gap:clamp(2rem,4vw,2.75rem)}
  .cform__say{grid-column:1;grid-row:1}
  .cform__form{grid-column:2;grid-row:1/3}
  .cform>.cco{grid-column:1;grid-row:2}
}
/* Stacked, the company record sat between the heading and the form it introduces. */
@media (max-width:899px){
  .cform__say{order:1}
  .cform__form{order:2}
  .cform>.cco{order:3;margin-top:.75rem;padding-top:1.5rem;border-top:1px solid var(--line)}
}

.cco{margin-top:0}
.cco h2{font-size:var(--t-micro);letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--ink-35)}
.cco__list{margin-top:.85rem}
.cco__row{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem 1.25rem;
  padding-block:.6rem;border-bottom:1px solid var(--line-soft);font-size:var(--t-xs)}
.cco__row:last-child{border-bottom:0}
.cco__row dt{color:var(--ink-55);flex:none}
.cco__row dd{margin:0;font-weight:600;text-align:right;color:var(--ink);min-width:0;overflow-wrap:anywhere}
/* Label and value fight for room once the value is a register entry. */
@media (max-width:520px){
  .cco__row{flex-direction:column;gap:.15rem}
  .cco__row dd{text-align:left}
}

/* closing band */
.ctaband{display:grid;gap:clamp(1.6rem,4vw,3rem);align-items:center}
@media (min-width:900px){.ctaband{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}}
.ctaband__say .h2{max-width:22ch}
.ctaband__act{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.75rem}
@media (min-width:900px){.ctaband__act{justify-content:flex-end}}
.ctaband__tel{display:block;color:inherit;text-decoration:none}
.ctaband__tel b{display:block;font-family:var(--serif);font-weight:600;font-size:clamp(1.25rem,2.1vw,1.6rem);
  letter-spacing:-.01em;font-variation-settings:'opsz' 40;white-space:nowrap;
  border-bottom:1px solid var(--line-dark);padding-bottom:.15rem;transition:border-color .3s var(--ease)}
.ctaband__tel small{display:block;margin-top:.4rem;font-size:var(--t-xs);color:rgba(251,248,242,.55)}
.ctaband__tel:hover b{border-color:var(--glow)}
.dark .rateline{border-color:var(--line-dark)}
.dark .rateline p{color:rgba(251,248,242,.68)}

.bookside{display:grid;gap:1.5rem;position:sticky;top:6.5rem}
@media (max-width:939px){.bookside{position:static}}
.bookside__box{border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.35rem 1.4rem;background:var(--paper)}
.bookside__row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding-block:.72rem;border-bottom:1px solid var(--line-soft);font-size:var(--t-sm)}
.bookside__row:last-of-type{border-bottom:0}
.bookside__row span{color:var(--ink-55)}
.bookside__row b{font-weight:700;white-space:nowrap}
.bookside__link{margin-top:1rem}
.bookside__call{font-size:var(--t-sm);color:var(--ink-55);line-height:1.6}
.bookside__call a{font-weight:700;color:var(--ink);white-space:nowrap}

/* Price ranges must never break across lines. */
.stat b,.card__price b{white-space:nowrap}

/* ---------- 13. Footer -------------------------------------------------- */
.ftr{background:var(--g-900);color:rgba(251,248,242,.72);padding-block:clamp(3.25rem,6vw,5rem) 2rem}
.ftr__grid{display:grid;gap:clamp(2rem,4vw,3rem)}
@media (min-width:820px){.ftr__grid{grid-template-columns:1.4fr 1fr 1fr 1.2fr}}
/* One column on a phone made the footer taller than the page above it. The link
   list and the contact block are both short enough to sit two-up. */
@media (max-width:819px){
  .ftr__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.75rem,5vw,2.5rem)}
  .ftr__grid>:first-child,.ftr__hours{grid-column:1/-1}
}
@media (max-width:420px){
  .ftr__grid{grid-template-columns:minmax(0,1fr)}
  .ftr__pages ul{columns:2;column-gap:1.25rem}
  .ftr__pages li{break-inside:avoid}
}
/* h2, not h4: the document went h2 -> h4 with nothing between, which is a broken
   outline for anything reading the page structurally. */
.ftr__h{font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--g-300);
  font-weight:600;margin-bottom:1rem}
.ftr a:hover{color:#fff}
.ftr li{padding-block:.3rem;font-size:var(--t-sm)}
.ftr__brand{display:flex;align-items:center;gap:.72rem;color:#fff;margin-bottom:1.1rem}
.ftr__bot{margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:1.5rem;border-top:1px solid var(--line-dark);
  display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;justify-content:space-between;font-size:var(--t-xs);color:rgba(251,248,242,.5)}
.social{display:flex;gap:.5rem;margin-top:1.1rem}
.social a{display:inline-flex;align-items:center;justify-content:center;width:2.3rem;height:2.3rem;
  border-radius:50%;border:1px solid var(--line-dark);color:rgba(251,248,242,.72);
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)}
.social a:hover{background:var(--glow);border-color:var(--glow);color:var(--g-900)}

.hours{display:grid;gap:.3rem;font-size:var(--t-sm)}
.hours div{display:flex;justify-content:space-between;gap:1rem;padding-block:.28rem;border-bottom:1px solid var(--line-dark)}
.hours div:last-child{border-bottom:0}
.hours .is-now{color:var(--glow);font-weight:600}

/* ---------- 14. Motion -------------------------------------------------- */
.rise{opacity:0;transform:translateY(18px)}
.rise.is-in{opacity:1;transform:none;transition:opacity .75s var(--ease-out),transform .75s var(--ease-out)}
.rise:nth-child(2){transition-delay:.06s}
.rise:nth-child(3){transition-delay:.12s}
.rise:nth-child(4){transition-delay:.18s}
@media (prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none;transition:none}
}

/* ---------- 15. Print --------------------------------------------------- */
@media print{
  .hdr,.drawer,.btn,.days{display:none!important}
  body{background:#fff;font-size:11pt}
  .section{padding-block:1.2rem}
  .panel[hidden]{display:block!important}
  .course{break-inside:avoid}
}

/* Language offer. Fixed, so it cannot move the page under anyone -- it is added
   after paint and must cost nothing in layout shift.
   The dark green is --g-900. There is no --pine token: writing one shipped a bar
   with no background at all, which meant --paper text on the page's own paper. */
.langbar{position:fixed;left:50%;bottom:1rem;transform:translate(-50%,140%);z-index:60;
  display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;justify-content:center;
  max-width:min(40rem,calc(100vw - 2rem));padding:.7rem .95rem;
  background:var(--g-900);color:var(--paper);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-l);font-size:var(--t-xs);line-height:1.35;
  transition:transform .45s var(--ease-out),opacity .3s var(--ease);opacity:0}
.langbar.is-in{transform:translate(-50%,0);opacity:1}
.langbar__t{opacity:.92}
.langbar__go{color:var(--glow);font-weight:600;text-underline-offset:3px}
.langbar__x{background:none;border:0;color:var(--paper);opacity:.6;cursor:pointer;
  padding:.15rem .3rem;font:inherit}
.langbar__x:hover{opacity:1}
@media (prefers-reduced-motion:reduce){.langbar{transition:none;transform:translate(-50%,0);opacity:1}}