/* ==========================================================================
   TANEČNÍ STUDIO TAKT
   The reference look you sent, built out properly: warm tungsten evening,
   full-bleed photography, a serif with a real italic doing the emphasis, and
   a floating availability bar as the first thing you can touch. The palette
   is sampled from the hall's own track lighting rather than a stock amber.
   ========================================================================== */
:root {
  --night:  #171009;
  --night2: #1f1710;
  --cream:  #f4ede1;
  --cream2: #eae0cf;
  --tung:   #d9a248;   /* the track lights in the photograph */
    --tung-d: #b5822f;
  /* on the cream bands #b5822f sat near 2:1; this clears 4.2:1 */
  --tung-ink: #8a6a3a;
  --dim:    #a08e78;
  --body:   #4a4034;

  --ff-d: "Newsreader", Georgia, serif;
  --ff-b: "Instrument Sans", system-ui, sans-serif;

  --r:  14px;
  --gut: clamp(20px, 5vw, 60px);
  --ease: cubic-bezier(.22,.61,.36,1);
}
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--body);
  font-family: var(--ff-b);
  font-size: clamp(15px, .4vw + 14px, 17px);
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--tung); outline-offset: 3px; }

.wrap { width: min(100% - var(--gut)*2, 1200px); margin-inline: auto; }
.d { font-family: var(--ff-d); font-weight: 400; font-optical-sizing: auto; line-height: 1.1; letter-spacing: -.012em; text-wrap: balance; }
.d em { font-style: italic; }
/* the accent word, upright — italics are kept for the hero alone */
.d .hl { color: var(--tung-ink); }
.night .d .hl, .close .d .hl { color: var(--tung); }
.h1 { font-size: clamp(2.2rem, 5vw, 4.1rem); line-height: 1.04; }
.h2 { font-size: clamp(1.95rem, 3.6vw, 3.1rem); }
.h3 { font-size: 1.36rem; line-height: 1.18; }
.tag { font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--tung-ink); }
.tag--l { color: var(--tung); }
.lede { font-size: clamp(1.02rem, .5vw + .9rem, 1.2rem); color: var(--body); max-width: 56ch; }
.p { color: var(--body); max-width: 58ch; }
.p + .p { margin-top: .95em; }

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 24px;
  border: 1px solid var(--night);
  border-radius: 999px;
  background: var(--night);
  color: var(--cream);
  font-size: .84rem; font-weight: 500; letter-spacing: .04em;
  cursor: pointer;
  transition: background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
}
.btn:hover { background: var(--tung-d); border-color: var(--tung-d); }
.btn--o { background: none; color: var(--night); }
.btn--o:hover { background: var(--night); color: var(--cream); }
.btn--l { background: var(--cream); border-color: var(--cream); color: var(--night); }
.btn--l:hover { background: var(--tung); border-color: var(--tung); color: var(--night); }
.btn--gl { background: rgba(244,237,225,.1); border-color: rgba(244,237,225,.4); color: var(--cream); backdrop-filter: blur(6px); }
.btn--gl:hover { background: var(--cream); color: var(--night); border-color: var(--cream); }


/* header floats over the photograph */
.top { position: absolute; inset: 33px 0 auto; z-index: 10; }
.top__in { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
/* the wordmark and the CTA are their own row on a phone; above 940 the wrapper
   dissolves and all three sit on one line again */
.top__row { display: contents; }
@media (min-width: 940px) { .top__in { flex-wrap: nowrap; min-height: 76px; } }
.mk { display: grid; gap: 1px; }
.mk b { font-family: var(--ff-d); font-size: 1.85rem; font-weight: 500; line-height: 1; color: var(--cream); }
.mk span { font-size: .58rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--dim); }
.top nav { display: flex; gap: 20px; }
.top nav a { white-space: nowrap; }
.top__acts { display: contents; }
.burger, .menu__x, .scrim, .menu__ft { display: none; }
/* with .top__row and .top__acts dissolved the flex children arrive as mark,
   button, nav — so the desktop row has to be ordered explicitly */
@media (min-width: 940px) { .top nav { order: 2; margin-left: auto; gap: clamp(16px, 2vw, 30px); }
                            .top .mk { order: 1; }
                            .top .btn { order: 3; } }
.top nav a { font-size: .88rem; color: rgba(244,237,225,.82); transition: color .2s var(--ease); }
.top nav a:hover { color: var(--tung); }
.top .btn { margin-left: auto; }
@media (min-width: 940px) { .top .btn { margin-left: 0; } }

/* HERO */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: end;
  background: var(--night);
  padding: 168px 0 clamp(44px, 6vw, 84px);
}
/* the photograph is the hero; it gets the whole viewport on every screen,
   with the content anchored to the bottom so the room shows above it */
.hero { min-height: 100svh; }
.hero__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__bg img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 46%;
  opacity: 0;
  transition: opacity 1.6s var(--ease);
}
.hero__bg img[data-on="true"] { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero__bg img { transition: none; } }
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  /* two scrims: one lifting the text off the floor, one shading the left
     column the headline sits in. Both kept as light as the cream type allows */
  background:
    linear-gradient(to top, var(--night) 2%, rgba(23,16,9,.42) 38%, rgba(23,16,9,.08) 100%),
    linear-gradient(100deg, rgba(23,16,9,.58) 4%, rgba(23,16,9,.2) 44%, transparent 74%);
}
.hero__in { padding-bottom: clamp(30px, 5vw, 66px); color: var(--cream); }
.hero .tag { display: block; margin-bottom: 18px; }
.hero .h1 { color: var(--cream); max-width: 20ch; }
.hero .h1 em { color: var(--tung); }
.hero__lede { margin-top: 22px; color: rgba(244,237,225,.84); max-width: 50ch; }

/* the signature: a floating availability bar, warm-white on the photograph */
.finder {
  position: relative;
  z-index: 2;
    margin: clamp(30px, 4vw, 48px) auto 0;
  width: min(100% - var(--gut)*2, 1200px);
  display: grid;
  gap: 1px;
  padding: 10px;
  border-radius: var(--r);
  background: var(--cream);
  box-shadow: 0 26px 60px -22px rgba(23,16,9,.62);
}
@media (min-width: 880px) { .finder { grid-template-columns: 1fr 1.05fr .9fr .7fr .7fr auto; align-items: center; } }
.fld { display: grid; gap: 3px; padding: 10px 16px; border-right: 1px solid var(--cream2); }
@media (max-width: 879px) { .fld { border-right: 0; border-bottom: 1px solid var(--cream2); } }
.finder .fld:nth-last-of-type(1) { border-right: 0; border-bottom: 0; }
.fld > span { font-size: .62rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--tung-ink); }
.fld select, .fld input {
  appearance: none;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--ff-b);
  font-size: .96rem;
  font-weight: 500;
  color: var(--night);
  cursor: pointer;
}
.fld select:focus, .fld input:focus { outline: none; }
.finder .btn { justify-content: center; margin: 4px; }
/* the phone-only trigger for the finder; see the phone block for the rest */
.finder__sum { display: none; }
.finder__go-a { display: none; }
.finder__sum-c, .finder__go-a { flex: 0 0 auto; }
/* hidden to the eye, still read out and still the button's accessible name */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
      overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.fresult {
  grid-column: 1 / -1;
  margin: 6px 6px 2px;
  padding: 13px 16px;
  border-radius: 9px;
  background: var(--cream2);
  color: var(--night);
  font-size: .92rem;
}
.fresult[hidden] { display: none; }
.fresult b { color: var(--tung-ink); }
.fresult--no { background: #f3e2d8; }
.fresult--no b { color: #a64a2e; }

/* a quiet way to see the whole week without leaving the hero */
.peek {
  position: relative; z-index: 2;
  width: min(100% - var(--gut)*2, 1200px);
  margin: 16px auto 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
}
.peek__btn {
  border: 0; background: none; padding: 0;
  font-family: var(--ff-b); font-size: .76rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--tung); cursor: pointer;
}
.peek__btn:hover { color: var(--cream); }
.peek__btn span { display: inline-block; margin-left: 8px; transition: transform .4s var(--ease); }
.peek__btn[aria-expanded="true"] span { transform: rotate(180deg); }
.peek__ask {
  /* pushed to the far edge only when both fit on one line; wrapped it should
     sit under the other link, not float off to the right */
  margin-left: 0;
  font-size: .76rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(244,237,225,.72);
  border-bottom: 1px solid rgba(244,237,225,.28);
  padding-bottom: 2px;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.peek__ask:hover { color: var(--cream); border-bottom-color: var(--tung); }
@media (min-width: 620px) { .peek__ask { margin-left: auto; } }
.peek__ask span { display: inline-block; margin-left: 6px; transition: transform .3s var(--ease); }
.peek__ask:hover span { transform: translateX(3px); }

.cal {
  position: relative; z-index: 2;
  display: none;
  width: min(100% - var(--gut)*2, 1200px);
  margin: 12px auto 0;
  padding: 8px;
  border-radius: var(--r);
  background: var(--cream);
}
.cal[data-open="true"] { display: block; }
.cal__row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.cal__d {
  display: grid; gap: 5px; justify-items: center;
  padding: 16px 4px; border: 0; background: none; font: inherit; cursor: pointer;
  border-radius: 8px;
  transition: background .35s var(--ease);
}
.cal__d:hover, .cal__d:focus-visible { background: var(--cream2); outline: none; }
.cal__dn { font-size: .58rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #8a7c68; }
.cal__dd { font-family: var(--ff-d); font-size: 1.45rem; line-height: 1; color: var(--night); }
.cal__h { font-size: .68rem; color: var(--tung-ink); white-space: nowrap; }
.cal__h[data-full="true"] { color: #a89a86; }

/* trust row on cream */
.feats { display: grid; gap: 1px; background: var(--cream2); border-radius: var(--r); overflow: hidden; }
@media (min-width: 720px) { .feats { grid-template-columns: repeat(3, 1fr); } }
.feat { padding: 30px 22px; background: var(--cream); text-align: center; }
.feat b { display: block; font-family: var(--ff-d); font-size: 1.2rem; font-weight: 500; color: var(--night); }
.feat span { display: block; margin-top: 5px; font-size: .86rem; color: var(--dim); color: #8a7c68; }

section { padding: clamp(56px, 7vw, 104px) 0; }
section.tight { padding-block: clamp(38px, 4.4vw, 66px); }
[hidden] { display: none !important; }
section.night { background: var(--night); color: rgba(244,237,225,.82); }
section.night .d, section.night .h2, section.night .h3, section.night b { color: var(--cream); }
section.night .p, section.night .lede { color: rgba(244,237,225,.8); }
.band-tight { padding-block: clamp(30px, 4vw, 54px); }

.two { display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; }
@media (min-width: 900px) { .two { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .two--r > figure { order: 2; } }
.shot { border-radius: var(--r); overflow: hidden; }
.shot img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }

/* hall cards: photograph on top, everything readable underneath it. The specs
   used to sit over the image and there was too much of them to stay legible. */
.halls { display: grid; gap: clamp(18px, 2.4vw, 30px); margin-top: clamp(30px, 4vw, 48px); }
@media (min-width: 780px) { .halls { grid-template-columns: 1fr 1fr; } }
.hall {
  display: grid; grid-template-rows: auto 1fr;
  border: 1px solid var(--cream2); border-radius: var(--r); overflow: hidden;
  background: var(--cream);
}
.hall__ph { display: block; overflow: hidden; background: var(--night); }
.hall img { width: 100%; aspect-ratio: 16/10; object-fit: cover; transition: transform 1s var(--ease); }
.hall__ph:hover img { transform: scale(1.04); }
.hall__bd { display: grid; align-content: start; padding: clamp(20px, 2.4vw, 28px); }
.hall__bd .h3 a { color: var(--night); }
.hall__bd .h3 a:hover { color: var(--tung-ink); }
.hall__bd p { margin-top: 9px; font-size: .92rem; color: var(--body); max-width: 44ch; }
.hall__mt { display: flex; flex-wrap: wrap; gap: 5px 18px; margin-top: 14px; font-size: .78rem; color: var(--tung-ink); }

/* the price belongs with the room, not only in a table three sections away */
.hall__pr { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--cream2); }
.hall__pr > div { display: grid; gap: 2px; }
.hall__pr dt { font-size: .62rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #8a7c68; }
.hall__pr dd { font-size: 1rem; font-variant-numeric: tabular-nums; color: var(--night); }
.hall__pr dd.best { color: var(--tung-ink); font-weight: 600; }
.hall__go { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 20px; font-size: .88rem; }
.hall__go a { white-space: nowrap; }
.night .hall__pr { border-top-color: rgba(244,237,225,.14); }
.night .hall__pr dt { color: rgba(244,237,225,.55); }
.night .hall__pr dd { color: var(--cream); }
.night .hall__pr dd.best { color: var(--tung); }
/* no interpuncts: the row wraps, and a separator pseudo-element strands a
   stray dot at the start of every continuation line */

/* the studio's own line, set as a pull quote — not a fabricated review */
.quote { text-align: center; }
.quote blockquote { margin: 0 auto; max-width: 24ch; }
.quote .d { font-size: clamp(1.9rem, 4vw, 3.2rem); }
.quote figcaption { margin-top: 22px; font-size: .8rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--tung-d); }

/* tariff, on cream */
table.t { width: 100%; border-collapse: collapse; margin-top: clamp(26px,3vw,40px); }
table.t th, table.t td { padding: 15px 10px; border-bottom: 1px solid var(--cream2); text-align: right; }
table.t th:first-child, table.t td:first-child { text-align: left; padding-left: 0; }
table.t thead th { font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--tung-ink); vertical-align: bottom; }
table.t thead th small { display: block; font-weight: 400; letter-spacing: .02em; text-transform: none; color: #9a8b76; }
table.t tbody th { font-family: var(--ff-d); font-size: 1.14rem; font-weight: 500; color: var(--night); }
table.t tbody th small { display: block; font-family: var(--ff-b); font-size: .76rem; color: #9a8b76; }
table.t tbody th a { border-bottom: 1px solid rgba(138,106,58,.35); }
table.t tbody th a:hover { color: var(--tung-ink); border-bottom-color: currentColor; }
.night table.t tbody th a { border-bottom-color: rgba(217,162,72,.4); }
.night table.t tbody th a:hover { color: var(--tung); }
table.t td { font-variant-numeric: tabular-nums; font-size: 1rem; color: var(--night); }
table.t .best { color: var(--tung-ink); font-weight: 600; }
/* the tariff windows, restated for the phone layout that hides the table head */
.t-legend { display: none; margin-top: 16px; font-size: .82rem; line-height: 1.7; color: #8a7c68; }
.night .t-legend { color: rgba(244,237,225,.6); }
.t-legend b { font-weight: 600; color: var(--tung-ink); }
.night .t-legend b { color: var(--tung); }


/* steps */
.steps { display: grid; gap: clamp(18px,2.4vw,30px); margin-top: clamp(30px,4vw,48px); }
@media (min-width: 660px)  { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step {
  display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 4px 14px;
  padding: 20px 20px; border-radius: var(--r);
  background: rgba(244,237,225,.06); border: 1px solid rgba(244,237,225,.12);
}
.step b { font-family: var(--ff-d); font-size: 1.5rem; line-height: 1.05; color: var(--tung); }
.step p { margin-top: 6px; font-size: .88rem; color: rgba(244,237,225,.72); }
/* without a number the card is just a heading and a line — centre it */
.steps--mid .step { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 0; padding: 24px 20px; }
.steps--mid .step p { max-width: 30ch; }
/* one column of wide cards reads better on a phone than four short ones */
@media (max-width: 659px) { .steps { gap: 12px; } .step { padding: 16px 18px; } }

/* partners */
/* what the sál is used for, as a ruled index */
/* the list is used on both the dark and the cream bands, so it defaults to
   the light ground and the night sections override it */
.uses { margin-top: clamp(22px, 3vw, 32px); max-width: 34rem; border-top: 1px solid var(--cream2); }
.uses li { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--cream2); font-size: .92rem; color: var(--body); }
.uses li::before { content: "—"; color: var(--tung-ink); }
.night .uses { border-top-color: rgba(244,237,225,.14); }
.night .uses li { border-bottom-color: rgba(244,237,225,.14); color: rgba(244,237,225,.82); }
.night .uses li::before { color: var(--tung); }

/* partner carousel — the logo row is its navigation */
.car { margin-top: clamp(34px, 4vw, 56px); }
.car__view { overflow: hidden; }
.car__track { display: flex; transition: transform .8s var(--ease); }
@media (prefers-reduced-motion: reduce) { .car__track { transition: none; } }
.car__slide { flex: 0 0 100%; min-width: 0; padding-inline: 2px; }
.pslide { display: grid; justify-items: center; text-align: center; gap: 20px; max-width: 620px; margin-inline: auto; }
.pslide__logo { display: grid; place-items: center; min-height: 92px; }
.pslide__logo img { max-height: 72px; width: auto; }
.pslide .h3 { color: var(--cream); }
.pslide p { max-width: 52ch; color: rgba(244,237,225,.8); }
.pslide__mark { display: grid; place-items: center; min-height: 92px; color: rgba(244,237,225,.3); }
.pslide__facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 30px; }
.pslide__facts > div { display: grid; gap: 2px; }
.pslide__facts dt { font-size: .6rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--tung); }
.pslide__facts dd { font-size: .88rem; color: rgba(244,237,225,.86); }

.slots {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: clamp(18px, 4vw, 52px);
  margin-top: clamp(34px, 4vw, 54px);
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid rgba(244,237,225,.14);
}
.slot {
  display: grid; justify-items: center; gap: 9px;
  padding: 8px 6px 4px;
  border: 0; background: none; font: inherit; cursor: pointer;
  opacity: .46;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.slot:hover, .slot:focus-visible { opacity: .72; transform: translateY(-2px); outline: none; }
.slot[aria-current="true"] { opacity: 1; }
.slot__fig { display: grid; place-items: center; height: 38px; }
.slot__fig img { max-height: 32px; width: auto; }
.slot__lbl { font-size: .58rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.slot[aria-current="true"] .slot__lbl { color: var(--cream); }
.slot__rule { width: 24px; height: 1px; background: rgba(244,237,225,.24); transition: background .5s var(--ease), width .5s var(--ease); }
.slot[aria-current="true"] .slot__rule { background: var(--tung); width: 40px; }

.note { margin-top: 22px; padding: 14px 16px; border-radius: 10px; background: rgba(217,162,72,.1); border: 1px solid rgba(217,162,72,.3); font-size: .86rem; }

/* cta */
.cta { position: relative; isolation: isolate; text-align: center; overflow: hidden; background: var(--night); }
.cta img { display: none; }
.cta .h2, .cta .lede { color: var(--cream); }
.cta .lede { margin: 16px auto 0; }
.acts { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }
.acts--l { justify-content: flex-start; }

footer.f { background: var(--night2); color: rgba(244,237,225,.72); padding: clamp(44px,5vw,72px) 0 26px; }
.f__in { display: grid; gap: 30px; }
@media (min-width: 820px) { .f__in { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; } }
.f h3 { margin-bottom: 14px; font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--tung-d); }
.f li + li { margin-top: 8px; }
.f a, .f address { font-size: .9rem; font-style: normal; line-height: 1.85; }
.f a:hover { color: var(--tung); }
.f__base { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 34px; padding-top: 20px; border-top: 1px solid rgba(244,237,225,.12); font-size: .76rem; color: #7d7061; }

  padding: 4px 12px; border: 1px solid transparent; border-radius: 999px;
  font-size: .78rem; letter-spacing: .04em; text-transform: none; color: #b6a795;
  transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}

/* the headline names several uses, one at a time */
.rot {
  display: inline-block;
  position: relative;
  white-space: nowrap;
  text-align: left;
  color: var(--tung);
  transition: width .5s var(--ease);
}
.rot__w { display: inline-block; transition: opacity .38s var(--ease), transform .38s var(--ease); }
.rot__w[data-out="true"] { opacity: 0; transform: translateY(-.2em); }
@media (prefers-reduced-motion: reduce) { .rot, .rot__w { transition: none; } }

/* ==========================================================================
   Subpages — the same evening palette, without a full-bleed hero
   ========================================================================== */
.top--solid { background: var(--night); border-bottom: 1px solid rgba(244,237,225,.12); }
/* on the hero the bar floats over the photograph; on a subpage it is a real
   band, so the header has to take part in the flow or the page heading
   slides underneath it */
.top--solid .top { position: static; inset: auto; padding-block: 14px; }
.top--solid .top nav a[aria-current="page"], .top nav a[aria-current="page"] { color: var(--tung); }

.phead { background: var(--night); padding-block: clamp(34px, 4.5vw, 64px) clamp(46px, 6vw, 92px); }
.phead .tag { display: block; margin-bottom: 16px; }
.phead .h1 { color: var(--cream); max-width: 17ch; font-size: clamp(2.1rem, 4.4vw, 3.6rem); }
.phead .lede { margin-top: 20px; color: rgba(244,237,225,.8); }

section.plain { padding-block: clamp(48px, 6vw, 96px); }

/* --- ruled key/value list (specs, access, terms) ------------------------- */
.route { border-top: 1px solid var(--cream2); }
.route > li { display: grid; gap: 4px; padding: 15px 0; border-bottom: 1px solid var(--cream2); }
@media (min-width: 620px) { .route > li { grid-template-columns: 190px 1fr; gap: 20px; align-items: baseline; } }
.route dt { font-size: .64rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--tung-ink); }
.route dd { font-size: .95rem; color: var(--body); }
.route dd small { display: block; margin-top: 3px; font-size: .84rem; color: #8a7c68; }
.night .route { border-top-color: rgba(244,237,225,.14); }
.night .route > li { border-bottom-color: rgba(244,237,225,.14); }
.night .route dt { color: var(--tung); }
.night .route dd { color: rgba(244,237,225,.84); }
.night .route dd small { color: rgba(244,237,225,.55); }

/* --- gallery ------------------------------------------------------------- */
.gal { display: grid; gap: clamp(12px, 1.6vw, 20px); }
@media (min-width: 760px) { .gal { grid-template-columns: repeat(3, 1fr); } }
.gal figure { position: relative; border-radius: var(--r); overflow: hidden; }
.gal img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; transition: transform 1s var(--ease); }
.gal figure:hover img { transform: scale(1.03); }
.gal figcaption {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: 14px 16px;
  background: linear-gradient(to top, rgba(23,16,9,.9), transparent);
  font-size: .74rem; letter-spacing: .06em; color: rgba(244,237,225,.85);
}

/* --- partner logo band (outside the carousel) ---------------------------- */
.band-logos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--cream2); border-radius: var(--r); overflow: hidden; }
@media (min-width: 700px) { .band-logos { grid-template-columns: repeat(5, 1fr); } }
.band-logos li { display: grid; place-items: center; min-height: 108px; padding: 20px; background: var(--cream); }
.band-logos img { max-height: 38px; width: auto; filter: invert(1); opacity: .72; transition: opacity .3s var(--ease); }
.band-logos a:hover img { opacity: 1; }

/* ==========================================================================
   Booking — the hour ledger and the form
   ========================================================================== */
.picker { display: grid; gap: 1px; background: var(--cream2); border-radius: var(--r); overflow: hidden; }
@media (min-width: 700px) { .picker { grid-template-columns: repeat(3, 1fr); } }
.picker__opt { position: relative; display: block; background: var(--cream); cursor: pointer; }
.picker__opt input { position: absolute; opacity: 0; pointer-events: none; }
.picker__bd { display: grid; gap: 5px; padding: 22px; border: 1px solid transparent; transition: background .25s var(--ease), border-color .25s var(--ease); }
.picker__opt:hover .picker__bd { background: #f0e8da; }
.picker__opt input:checked + .picker__bd { background: #f3e7d3; border-color: var(--tung); }
.picker__opt input:focus-visible + .picker__bd { outline: 2px solid var(--tung); outline-offset: -3px; }
.picker__nm { font-family: var(--ff-d); font-size: 1.35rem; color: var(--night); line-height: 1.1; }
.picker__mt { font-size: .82rem; color: #8a7c68; }
.picker__pr { font-size: .84rem; font-weight: 600; color: var(--tung-ink); }

.ledger { border-radius: var(--r); overflow: hidden; background: var(--cream); border: 1px solid var(--cream2); }
.ledger__hd { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 14px 18px; border-bottom: 1px solid var(--cream2); }
.ledger__hd .tag { margin-right: auto; }
.ledger__nav { display: flex; align-items: center; gap: 8px; }
.ledger__nav button {
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 1px solid var(--cream2); border-radius: 999px; background: none;
  color: var(--night); cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.ledger__nav button:hover:not(:disabled) { border-color: var(--tung); color: var(--tung-ink); }
.ledger__nav button:disabled { opacity: .3; cursor: not-allowed; }
.ledger__wk { min-width: 15ch; text-align: center; font-size: .8rem; font-variant-numeric: tabular-nums; }

.grid { display: grid; --grid-hr: 62px; grid-template-columns: var(--grid-hr) repeat(7, minmax(0, 1fr)); }
@media (min-width: 700px) { .grid { --grid-hr: 78px; } }
.grid__day, .grid__hr, .cell { border-right: 1px solid var(--cream2); border-bottom: 1px solid var(--cream2); }
.grid__day:last-child, .cell[data-last="true"] { border-right: 0; }
.grid__corner { border-right: 1px solid var(--cream2); border-bottom: 1px solid var(--cream2); }
.grid__day { padding: 10px 6px; text-align: center; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: #8a7c68; white-space: nowrap; }
.grid__day b { display: block; font-family: var(--ff-d); font-size: 1.05rem; font-weight: 500; letter-spacing: 0; color: var(--night); }
.grid__day[data-today="true"] { background: #f3e7d3; }
.grid__day[data-today="true"] b { color: var(--tung-ink); }
.grid__hr { display: grid; place-items: center end; padding: 0 9px; font-size: .68rem; font-variant-numeric: tabular-nums; color: #8a7c68; }

.cell { position: relative; min-height: 42px; padding: 0; border-top: 0; border-left: 0; background: none; font: inherit; text-align: left; cursor: default; transition: background .16s linear; }
@media (min-width: 700px) { .cell { min-height: 38px; } }
.cell[data-state="free"] { cursor: pointer; }
.cell[data-state="free"]:hover { background: #f3e7d3; }
.cell[data-state="taken"] {
  background: repeating-linear-gradient(135deg, transparent 0 5px, rgba(138,106,58,.3) 5px 6px), #efe6d7;
  cursor: not-allowed;
}
.cell[data-state="past"] { background: #e4dccd; cursor: not-allowed; }
.cell[data-state="held"] { background: var(--tung); cursor: pointer; }
.cell[data-state="held"]::before { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; font-size: .78rem; color: var(--night); }
.cell__tag { position: absolute; inset: 0; display: none; align-items: center; padding-inline: 7px; font-size: .6rem; letter-spacing: .03em; color: var(--tung-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* two columns per day leaves too little room to name what is in them */
.grid[data-halls="2"] .cell__tag { padding-inline: 4px; font-size: .56rem; }
@media (max-width: 1279px) { .grid[data-halls="2"] .cell__tag { display: none; } }
@media (min-width: 1080px) { .cell__tag { display: flex; } }

.ledger__ft { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; padding: 14px 18px; border-top: 1px solid var(--cream2); }
.legend { display: flex; flex-wrap: wrap; gap: 14px; }
.legend li { display: flex; align-items: center; gap: 7px; font-size: .72rem; color: #8a7c68; }
.swatch { width: 13px; height: 13px; border: 1px solid var(--cream2); flex: 0 0 auto; border-radius: 3px; }
.swatch--free { background: var(--cream); }
.swatch--taken { background: repeating-linear-gradient(135deg, transparent 0 3px, rgba(138,106,58,.4) 3px 4px), #efe6d7; }
.swatch--held { background: var(--tung); border-color: var(--tung); }
.tally { margin-left: auto; display: flex; align-items: baseline; gap: 12px; }
.tally__n { font-family: var(--ff-d); font-size: 1.5rem; line-height: 1; font-variant-numeric: tabular-nums; color: var(--night); }
.tally__n--accent { color: var(--tung-ink); }

/* --- form ---------------------------------------------------------------- */
.form { display: grid; gap: 18px; }
.form__row { display: grid; gap: 18px; }
@media (min-width: 620px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 7px; }
.field > span { font-size: .62rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--tung-ink); }
.field > span em { font-style: normal; color: #a64a2e; }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 14px;
  border: 1px solid var(--cream2); border-radius: 10px;
  background: var(--cream); font-family: var(--ff-b); font-size: .95rem; color: var(--night);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.field textarea { min-height: 96px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #d8c8ae; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--tung); background: #fffdf9; }
.field small { font-size: .8rem; color: #8a7c68; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--tung-ink) 50%), linear-gradient(135deg, var(--tung-ink) 50%, transparent 50%); background-position: calc(100% - 19px) center, calc(100% - 14px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 38px; }

.check { display: flex; gap: 11px; align-items: flex-start; cursor: pointer; }
.check input { appearance: none; flex: 0 0 auto; width: 18px; height: 18px; margin-top: 3px; border: 1px solid var(--cream2); border-radius: 5px; background: var(--cream); cursor: pointer; transition: background .18s var(--ease), border-color .18s var(--ease); }
.check input:checked { background: var(--tung); border-color: var(--tung); }
.check input:checked::after { content: "✓"; display: grid; place-items: center; width: 100%; height: 100%; margin-top: -2px; font-size: .76rem; color: var(--night); }
.check span { font-size: .9rem; color: var(--body); }
.check a { color: var(--tung-ink); border-bottom: 1px solid currentColor; }

.repeat { display: grid; gap: 14px; padding: 18px; border: 1px solid var(--cream2); border-radius: var(--r); background: var(--cream); }
.repeat[data-on="true"] { border-color: var(--tung); background: #f7efe2; }
.repeat__ctl { display: none; }
.repeat[data-on="true"] .repeat__ctl { display: grid; gap: 7px; }

/* --- summary + confirmation --------------------------------------------- */
.summary { border: 1px solid var(--cream2); border-radius: var(--r); background: var(--cream); overflow: hidden; }
@media (min-width: 980px) { .summary { position: sticky; top: 24px; } }
.summary__hd { padding: 16px 20px; border-bottom: 1px solid var(--cream2); }
.summary__bd { padding: 4px 20px; }
.summary__empty { padding: 22px 0; font-size: .9rem; color: #8a7c68; }
.line { display: grid; gap: 3px; padding: 15px 0; border-bottom: 1px dashed var(--cream2); }
.line:last-child { border-bottom: 0; }
.line__top { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; }
.line__d { font-size: .92rem; color: var(--night); }
.line__p { font-size: .9rem; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--night); }
.line__m { font-size: .76rem; color: #8a7c68; }
.line__m b { color: var(--tung-ink); font-weight: 600; }
.summary__ft { padding: 18px 20px; border-top: 1px solid var(--tung); background: #f7efe2; }
.total { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.total + .total { margin-top: 8px; }
.total__k { font-size: .64rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #8a7c68; }
.total__v { font-family: var(--ff-d); font-size: 1.3rem; font-variant-numeric: tabular-nums; color: var(--night); }
.total--sum .total__v { font-size: 1.95rem; color: var(--tung-ink); }

.receipt { border: 1px solid var(--tung); border-radius: var(--r); background: var(--cream); overflow: hidden; }
.receipt__hd { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 20px clamp(20px, 3vw, 34px); border-bottom: 1px solid var(--cream2); background: #f7efe2; }
.receipt__ref { margin-left: auto; font-size: .82rem; font-variant-numeric: tabular-nums; letter-spacing: .08em; color: var(--tung-ink); }
.receipt__bd { padding: clamp(22px, 3vw, 36px); }
.kv { display: grid; margin-top: 24px; }
.kv > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--cream2); font-size: .92rem; }
.kv dt { color: #8a7c68; }
.kv dd { text-align: right; color: var(--night); }
.next { display: grid; gap: 10px; margin-top: 26px; counter-reset: n; }
.next li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; font-size: .92rem; color: var(--body); }
.next li::before { counter-increment: n; content: counter(n, decimal-leading-zero); font-size: .72rem; color: var(--tung-ink); padding-top: .3em; }

.err { font-size: .88rem; color: #a64a2e; }
.err:empty { display: none; }

/* --- map placeholder ----------------------------------------------------- */
.maplike {
  position: relative; display: grid; place-items: center; min-height: 320px;
  border-radius: var(--r);
  background:
    linear-gradient(var(--cream2) 1px, transparent 1px) 0 0 / 100% 44px,
    linear-gradient(90deg, var(--cream2) 1px, transparent 1px) 0 0 / 44px 100%,
    #f2ebdd;
  text-align: center;
}
.maplike__pin { display: grid; gap: 8px; place-items: center; padding: 26px 30px; border-radius: var(--r); background: var(--night); color: var(--cream); }
.maplike__pin .d { color: var(--cream); font-size: 1.5rem; }

/* ==========================================================================
   Subpage helpers
   ========================================================================== */
/* form beside its running total: the summary column stays narrower */
@media (min-width: 980px) { .two--f { grid-template-columns: 1.45fr 1fr; align-items: start; } }
@media (min-width: 900px) { .two--t { grid-template-columns: 1fr 1.15fr; align-items: start; } }

.seq { display: block; margin-bottom: 12px; }
.tlink { color: var(--tung-ink); border-bottom: 1px solid currentColor; }
.night .tlink { color: var(--tung); }


/* contact cards */
.cards { display: grid; gap: clamp(14px, 2vw, 22px); margin-top: clamp(28px, 3.5vw, 44px); }
@media (min-width: 700px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card { padding: 26px 24px; border: 1px solid var(--cream2); border-radius: var(--r); background: var(--cream); }
.card h3 { font-family: var(--ff-d); font-size: 1.28rem; font-weight: 500; color: var(--night); }
.card p, .card address { margin-top: 9px; font-size: .92rem; font-style: normal; color: var(--body); }
.card a { color: var(--tung-ink); border-bottom: 1px solid rgba(138,106,58,.35); }
.card a:hover { border-bottom-color: currentColor; }

/* the partner masthead — one school, given room */
.pcard { display: grid; gap: clamp(24px, 3.4vw, 48px); align-items: center; }
@media (min-width: 860px) { .pcard { grid-template-columns: 300px 1fr; } }
/* the partner mark is a white knockout: on cream it needs inverting inside a
   panel, on a night band it stands on its own with no box and no filter */
.pcard__logo { display: grid; place-items: center; padding: 20px 0; }
.pcard__logo img { max-height: 96px; width: auto; filter: invert(1); opacity: .84; }
.night .pcard__logo { padding: 0; border: 0; background: none; }
.night .pcard__logo img { filter: none; opacity: .95; max-height: 112px; }
.facts { display: flex; flex-wrap: wrap; gap: 14px 34px; margin-top: 24px; }
.facts > div { display: grid; gap: 3px; }
.facts dt { font-size: .6rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--tung-ink); }
.facts dd { font-size: .94rem; color: var(--night); }
.night .facts dt { color: var(--tung); }
.night .facts dd { color: var(--cream); }

/* --- the light-band components, restated for night bands ------------------ */
/* the tariff, the form and the summary all assume cream underneath; when a
   section flips to night they need their own ink or they vanish into it */
.night table.t th, .night table.t td { border-bottom-color: rgba(244,237,225,.14); }
.night table.t thead th { color: var(--tung); }
.night table.t thead th small { color: rgba(244,237,225,.5); }
.night table.t tbody th { color: var(--cream); }
.night table.t tbody th small { color: rgba(244,237,225,.5); }
.night table.t td { color: rgba(244,237,225,.88); }
.night table.t .best { color: var(--tung); }

.night .field > span { color: var(--tung); }
.night .field small { color: rgba(244,237,225,.6); }
.night .check span { color: rgba(244,237,225,.82); }
.night .check a { color: var(--tung); }
.night .check input { border-color: rgba(244,237,225,.34); background: rgba(244,237,225,.08); }
.night .check input:checked { background: var(--tung); border-color: var(--tung); }
.night .err { color: #e8a48a; }
.night .btn:not(.btn--o):not(.btn--l):not(.btn--gl) { background: var(--cream); border-color: var(--cream); color: var(--night); }
.night .btn:not(.btn--o):not(.btn--l):not(.btn--gl):hover { background: var(--tung); border-color: var(--tung); }
.night .btn--o { color: var(--cream); border-color: rgba(244,237,225,.42); }
.night .btn--o:hover { background: var(--cream); color: var(--night); border-color: var(--cream); }

.night .receipt { border-color: rgba(217,162,72,.45); background: var(--night2); }
.night .receipt__hd { background: rgba(217,162,72,.1); border-bottom-color: rgba(244,237,225,.14); }
.night .receipt__bd .d { color: var(--cream); }
.night .kv > div { border-bottom-color: rgba(244,237,225,.14); }
.night .kv dt { color: rgba(244,237,225,.55); }
.night .kv dd { color: var(--cream); }


/* --- skip link ----------------------------------------------------------- */
/* anchored at 0 and moved by transform only, so its own height can't let it
   peek into view before it is focused */
.skip {
  position: fixed; top: 0; left: 0; z-index: 100;
  transform: translateY(-100%);
  padding: 12px 20px; border-bottom-right-radius: 10px;
  background: var(--tung); color: var(--night);
  font-size: .86rem; font-weight: 600;
  transition: transform .18s var(--ease);
}
/* :focus-visible, not :focus — a hash jump to #main used to pop it into
   view for mouse users. Keyboard users still get it. */
.skip:focus-visible { transform: translateY(0); }

/* --- the two people behind the studio ------------------------------------ */
.team { display: grid; gap: clamp(24px, 3vw, 40px); margin-top: clamp(34px, 4vw, 56px); }
@media (min-width: 720px) { .team { grid-template-columns: 1fr 1fr; } }
.person figure { margin: 0; border-radius: var(--r); overflow: hidden; background: var(--cream2); }
.person img { width: 100%; aspect-ratio: 4/5; object-fit: cover; transition: transform 1.1s var(--ease); }
/* At full column width the two portraits were 580×725 and the section ran to
   1.6 screens on a laptop — a lot of room for pictures that only need to put
   a face to a name. Square, and no wider than a bio card. */
@media (min-width: 720px) {
  .person figure { max-width: 300px; }
  .person img { aspect-ratio: 1; object-position: 50% 22%; }
}
.person:hover img { transform: scale(1.03); }
.person__nm { margin-top: 20px; font-family: var(--ff-d); font-size: 1.7rem; font-weight: 500; line-height: 1.1; color: var(--night); }
.person__rl { margin-top: 5px; font-size: .62rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--tung-ink); }
.person p { margin-top: 14px; font-size: .95rem; color: var(--body); }
.person p + p { margin-top: .85em; }
.night .person__nm { color: var(--cream); }
.night .person__rl { color: var(--tung); }
.night .person p { color: rgba(244,237,225,.8); }

/* ==========================================================================
   The finder, folded away — every width where it would stack
   Open and stacked it is a cream slab 350–407px tall, covering the very
   photograph the hero is built around. Collapsed it states what it would
   search for and unfolds on a tap. Above 880px it is a single 77px row and
   none of this applies.
   ========================================================================== */
@media (max-width: 879px) {
  .finder { grid-template-columns: 1fr 1fr; padding: 8px; }
  .finder__sum {
    display: grid; grid-template-columns: 1fr auto; align-items: center;
    grid-column: 1 / -1; gap: 2px 12px;
    padding: 13px 16px; border: 0; border-radius: calc(var(--r) - 8px);
    background: none; font: inherit; text-align: left; cursor: pointer;
  }
  .finder__sum:hover { background: #f0e8da; }
  /* explicit placement: auto-flow put the chevron in the label's cell */
  .finder__sum-l {
    grid-area: 1 / 1;
    font-size: .75rem; font-weight: 600; letter-spacing: .14em;
    text-transform: uppercase; color: var(--tung-ink);
  }
  .finder__sum-v { grid-area: 2 / 1; font-size: .96rem; font-weight: 500; color: var(--night); }
  .finder__sum-c {
    grid-area: 1 / 2 / 3 / 3; justify-self: end; align-self: center;
    color: var(--tung-ink);
    transition: transform .3s var(--ease);
  }
  .finder[data-open="true"] .finder__sum-c { transform: rotate(180deg); }
  .finder[data-open="false"] .fld { display: none; }
  .finder[data-open="true"] .finder__sum { border-bottom: 1px solid var(--cream2); border-radius: 0; margin-bottom: 2px; }

  /* --- collapsed: a single line ------------------------------------------
     The summary and the go button share one row. The button drops its label
     to an arrow and a 46px disc; the label stays in the DOM, clipped, so the
     button keeps its name for a screen reader. */
  .finder[data-open="false"] { grid-template-columns: 1fr auto; align-items: center; }
  /* the chevron belongs to the sentence, so it sits right after it rather
     than being flung to the far edge next to the button */
  .finder[data-open="false"] .finder__sum {
    grid-column: 1; display: flex; align-items: center; gap: 8px;
    padding-block: 11px; min-width: 0;
  }
  .finder[data-open="false"] .finder__sum-l {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .finder[data-open="false"] .finder__sum-v {
    grid-area: auto; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .finder[data-open="false"] .finder__sum-c { grid-area: auto; margin-right: auto; }

  /* a rounded square, matching the card it sits inside — not a disc */
  .finder[data-open="false"] .finder__go {
    grid-column: 2; width: 46px; height: 46px; padding: 0; margin: 0;
    border-radius: 9px; justify-content: center; gap: 0;
  }
  .finder[data-open="false"] .finder__go-t {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .finder[data-open="false"] .finder__go-a { display: block; }

  /* on a 320px screen the chip has ~154px for its text and wants 185, so the
     narrowest phones get tighter gaps and a slightly smaller line */
  @media (max-width: 379px) {
    .finder[data-open="false"] .finder__sum { gap: 6px; padding-inline: 12px; }
    .finder[data-open="false"] .finder__sum-v { font-size: .88rem; }
    .finder[data-open="false"] .finder__go { width: 42px; height: 42px; }
  }

  .finder .fld:nth-of-type(1), .finder .fld:nth-of-type(2),
  .finder .fld:nth-of-type(3) { grid-column: 1 / -1; }
  .fld { border-right: 1px solid var(--cream2); border-bottom: 1px solid var(--cream2); }
  .finder .fld:nth-of-type(1), .finder .fld:nth-of-type(2),
  .finder .fld:nth-of-type(3), .finder .fld:nth-of-type(5) { border-right: 0; }
  .finder .btn { grid-column: 1 / -1; }
  .fresult { grid-column: 1 / -1; }
}

/* ==========================================================================
   PHONE
   Three things are wrong on a small screen by default here: the uppercase
   micro-labels fall under 12px, the tap targets are text-height, and the
   page is long enough that the only way to book scrolls away at the top.
   Everything below fixes one of those three.
   ========================================================================== */
@media (max-width: 719px) {

  /* --- legibility: nothing uppercase drops below 12px ---------------------- */
  .tag, .fld > span, .field > span, .route dt, .facts dt, .person__rl,
  .f h3, .total__k, .pslide__facts dt, .cal__dn, .grid__day, .slot__lbl,
  .receipt__hd .tag, .picker__pr, .hall__pr dt { font-size: .75rem; letter-spacing: .14em; }

  /* the room links are navigation, not words inside a sentence — they get a
     real target rather than the height of their own text */
  .hall__go a, .hall__bd .h3 a, table.t tbody th a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .hall__go { gap: 0 22px; margin-top: 10px; }
  .mk span { font-size: .72rem; letter-spacing: .2em; }
  /* the sticky bar is 13% of the screen; the strapline is the part of it
     that carries no information once you are already on the site */
  .top--solid .mk span { display: none; }
  .grid__hr, .cal__h { font-size: .74rem; }
  .cal__dd { font-size: 1.3rem; }
  .cell__tag, .legend li, .hall__mt, .field small, .route dd small { font-size: .8rem; }
  .line__m, .f__base, .fresult { font-size: .82rem; }

  /* --- tap targets: 44px is the floor for anything you can press ---------- */
  .f li { display: flex; }
  .f li a { display: flex; align-items: center; min-height: 40px; }
  .fld { padding: 12px 16px; }
  .fld select, .fld input { min-height: 34px; }
  .band-logos li { min-height: 96px; }
  .band-logos a { display: grid; place-items: center; width: 100%; min-height: 56px; }
  .check input { width: 24px; height: 24px; margin-top: 1px; }
  .check input:checked::after { font-size: .9rem; }
  .ledger__nav button { width: 44px; height: 44px; }
  .btn { padding: 15px 26px; }
  .peek__btn, .peek__ask { display: inline-flex; align-items: center; min-height: 44px; }
  .slot { padding-block: 6px; }

  /* --- vertical budget: the page is long, so the chrome gets out of the way */
  section { padding-block: clamp(40px, 11vw, 60px); }
  .hero { padding-top: calc(var(--top-h, 106px) + 34px); }
  .h1 { font-size: clamp(2rem, 8.5vw, 2.6rem); }
  .h2 { font-size: clamp(1.75rem, 7vw, 2.2rem); }

  /* the three facts are short — a row of three reads faster than three bands */
  .feats { grid-template-columns: repeat(3, 1fr); }
  .feat { padding: 18px 8px; }
  .feat b { font-size: 1.02rem; }
  .feat span { margin-top: 3px; font-size: .72rem; line-height: 1.35; }

  /* with the slab gone there is room for the photograph to be a photograph */
  .hero { padding-bottom: 30px; }
  /* content sits in the bottom two thirds, so only that needs holding down;
     above it the room is left alone apart from a touch under the header */
  .hero__bg::after { background: linear-gradient(to top, rgba(23,16,9,.9) 0%, rgba(23,16,9,.6) 22%, rgba(23,16,9,.34) 48%, rgba(23,16,9,.06) 74%, rgba(23,16,9,.24) 100%); }
  .hero__in { padding-bottom: clamp(18px, 4vw, 30px); }
  .hero__lede { margin-top: 14px; }

  /* portraits at 4:5 cost a screen and a half for two people */
  .person img { aspect-ratio: 4/3.4; }
  .team { gap: 30px; }

  /* --- the tariff stops being a table and becomes three price cards ------- */
  table.t, table.t tbody, table.t tr, table.t th, table.t td { display: block; }
  table.t thead { display: none; }
  table.t { margin-top: 22px; }
  table.t tbody tr {
    padding: 16px 0; border-bottom: 1px solid var(--cream2);
    display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 14px;
  }
  .night table.t tbody tr { border-bottom-color: rgba(244,237,225,.14); }
  table.t tbody th { grid-column: 1 / -1; padding: 0 0 8px; border: 0; text-align: left; }
  table.t tbody td {
    padding: 5px 0; border: 0; text-align: right;
    display: grid; grid-template-columns: 1fr auto; gap: 14px;
  }
  table.t tbody td::before {
    content: attr(data-l); text-align: left;
    font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    color: var(--tung-ink);
  }
  .night table.t tbody td::before { color: var(--tung); }
  .t-legend { display: block; }
  table.t tbody td:nth-child(2) { grid-column: 1 / -1; }
  table.t tbody td:nth-child(3), table.t tbody td:nth-child(4) { grid-column: 1 / -1; }

  /* --- forms and the receipt --------------------------------------------- */
  .kv > div { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; }
  .kv dd { text-align: right; }
  .receipt__ref { margin-left: 0; }
  .summary { margin-top: 26px; }
}

/* --- mobile booking dock --------------------------------------------------
   On a phone the ledger and the summary panel are a screen and a half apart,
   so picking hours gives you no feedback and no way forward. This rides along
   the bottom once something is held, and stands down when the summary itself
   is on screen. Desktop keeps the sticky summary column and never sees it. */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: none; align-items: center; gap: 14px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--night);
  border-top: 1px solid rgba(217,162,72,.4);
  box-shadow: 0 -14px 34px -18px rgba(23,16,9,.8);
  transform: translateY(110%);
  transition: transform .28s var(--ease);
}
.dock[data-on="true"] { transform: translateY(0); }
.dock__n { display: grid; gap: 1px; margin-right: auto; min-width: 0; }
.dock__h { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tung); }
.dock__v { font-family: var(--ff-d); font-size: 1.3rem; line-height: 1.1; color: var(--cream); font-variant-numeric: tabular-nums; }
.dock .btn { flex: 0 0 auto; padding: 13px 20px; }
@media (max-width: 979px) { .dock { display: flex; } body.has-dock { padding-bottom: 88px; } }
@media (prefers-reduced-motion: reduce) { .dock { transition: none; } }

/* ==========================================================================
   MOBILE MENU
   Below 940px the links live in a drawer behind the burger. The nav element
   is the same one the desktop bar uses — it just becomes a fixed panel — so
   there is one set of links in the document and no duplicate landmark.
   ========================================================================== */
@media (max-width: 939px) {
  .top__acts { display: flex; align-items: center; gap: 10px; }

  /* --- the bar, wherever the burger lives --------------------------------
     One row: wordmark left, Rezervovat and the burger right, level with each
     other. It follows you down the page, so booking is always one tap away. */
  .top__row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; width: 100%; min-height: 46px;
  }
  .mk { min-height: 44px; align-content: center; }
  .mk b { line-height: 1.2; }

  .top--solid { position: sticky; top: 0; z-index: 40; }
  /* the homepage bar floats over the hero and is not in the flow, so it
     cannot be sticky — fixed gives the same result, and the hero already
     reserves the space above the fold */
  .hero > .top {
    position: fixed; inset: 0 0 auto; z-index: 40;
    padding-block: 8px;
    background: var(--night);
    border-bottom: 1px solid rgba(244,237,225,.12);
  }
  .hero > .top .mk span, .top--solid .mk span { display: none; }
  .hero > .top .mk b, .top--solid .mk b { font-size: 1.45rem; }
  .hero > .top .top__in, .top--solid .top__in { gap: 4px 12px; }
  .hero > .top .btn, .top--solid .btn { padding: 11px 18px; font-size: .8rem; }
  .top--solid .top { padding-block: 8px; }
  /* at 320 the wordmark, the CTA and the burger want 288px of 280, so the
     narrowest phones get a tighter CTA rather than a wrapped bar */
  @media (max-width: 359px) {
    .hero > .top .btn, .top--solid .btn { padding: 10px 12px; font-size: .74rem; }
    .top__acts { gap: 7px; }
    .hero > .top .mk b, .top--solid .mk b { font-size: 1.3rem; }
  }

  /* a fixed bar means anchored sections must clear it, and the schedule's day
     names have to ride just underneath or you lose track of the columns */
  [id] { scroll-margin-top: calc(var(--top-h, 64px) + 12px); }
  /* a clipping ancestor kills position:sticky, so the ledger stops clipping
     here; the rounded corners move to the header and footer strips */
  .ledger { overflow: visible; }
  .ledger__hd { border-radius: var(--r) var(--r) 0 0; }
  .ledger__ft { border-radius: 0 0 var(--r) var(--r); }
  .grid__day, .grid__corner {
    position: sticky; top: var(--top-h, 64px); z-index: 3;
    background: var(--cream);
  }
  .grid__hall { position: sticky; top: calc(var(--top-h, 64px) + 38px); z-index: 3; background: var(--cream); }
  .grid__day[data-today="true"], .grid__hall[data-today="true"] { background: #f3e7d3; }


  .burger {
    display: grid; place-items: center;
    width: 44px; height: 44px; flex: 0 0 auto;
    padding: 0; border: 1px solid rgba(244,237,225,.32); border-radius: 11px;
    background: rgba(244,237,225,.08); color: var(--cream);
    cursor: pointer;
    transition: background .2s var(--ease), border-color .2s var(--ease);
  }
  .burger:hover, .burger[aria-expanded="true"] { background: var(--cream); border-color: var(--cream); color: var(--night); }

  .top .menu {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 60;
    width: min(82vw, 330px);
    display: grid; align-content: start; gap: 0;
    padding: max(18px, env(safe-area-inset-top)) 26px calc(26px + env(safe-area-inset-bottom));
    background: var(--night2);
    border-left: 1px solid rgba(244,237,225,.14);
    box-shadow: -26px 0 60px -30px rgba(0,0,0,.9);
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(100%);
    visibility: hidden;
    /* the visibility flip waits for the slide, so the panel is never focusable
       while it is off screen but still animates on the way out */
    transition: transform .32s var(--ease), visibility 0s linear .32s;
  }
  .top .menu[data-open="true"] {
    transform: none; visibility: visible;
    transition: transform .32s var(--ease), visibility 0s;
  }
  @media (prefers-reduced-motion: reduce) { .top .menu { transition: visibility 0s; } }

  .menu__x {
    display: grid; place-items: center;
    width: 40px; height: 40px; margin: 0 -6px 12px auto;
    padding: 0; border: 0; border-radius: 10px;
    background: none; color: var(--dim); cursor: pointer;
    transition: color .2s var(--ease);
  }
  .menu__x:hover { color: var(--cream); }

  .top .menu a {
    display: flex; align-items: center; min-height: 54px;
    font-family: var(--ff-d); font-size: 1.28rem; font-weight: 400;
    color: rgba(244,237,225,.88);
    border-bottom: 1px solid rgba(244,237,225,.1);
    transition: color .2s var(--ease);
  }
  .top .menu a:hover { color: var(--tung); }
  .top .menu a[aria-current="page"] { color: var(--tung); }

  .top .menu__ft {
    display: grid; gap: 6px; margin-top: 26px;
    font-size: .84rem; line-height: 1.6; color: rgba(244,237,225,.6);
  }
  .top .menu__ft a { display: inline; min-height: 0; border: 0; font-family: var(--ff-b); font-size: .84rem; color: var(--tung); }

  .scrim {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(11,8,4,.6);
    opacity: 0; pointer-events: none;
    transition: opacity .32s var(--ease);
  }
  .scrim[data-open="true"] { opacity: 1; pointer-events: auto; }
  @media (prefers-reduced-motion: reduce) { .scrim { transition: none; } }

  /* the page behind the drawer must not scroll under it */
  body.menu-open { overflow: hidden; }
}

/* on a phone the five nav logos wrap into an untidy block, and the one real
   school ends up buried in it — it gets its own line above the others */
@media (max-width: 719px) {
  .slots { gap: 16px 22px; }
  .slots li:nth-child(3) { order: -1; flex-basis: 100%; display: flex; justify-content: center; }
  .slots li:nth-child(3) .slot__fig { height: 46px; }
  .slots li:nth-child(3) .slot__fig img { max-height: 40px; }
}

/* --- the schedule, with a column per hall --------------------------------
   "Oba sály" draws two columns under each date, so the day heading spans them
   and a second strip names which is which. */
.grid__hall {
  padding: 5px 4px 7px; text-align: center;
  font-size: .58rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: #8a7c68; white-space: nowrap;
  border-right: 1px solid var(--cream2); border-bottom: 1px solid var(--cream2);
}
.grid__hall[data-today="true"] { background: #f3e7d3; }
.grid[data-halls="2"] .cell[data-edge="false"] { border-right: 1px dotted #ded2bd; }
.grid[data-halls="2"] .grid__hall:nth-of-type(even) { border-right-color: #ded2bd; }
/* this block sits after the phone rules, so the phone size belongs here */
@media (max-width: 719px) { .grid__hall { font-size: .72rem; letter-spacing: .03em; padding-inline: 2px; } }

/* --- the sign-in panel and the disabled booking form ----------------------
   The form shows what a booking asks for; it does not take one. Disabled
   controls keep their labels readable rather than greying out to nothing. */
.signin { padding: 20px 0 18px; font-size: .92rem; color: var(--body); }
.signin--x { padding-top: 0; font-size: .82rem; color: #8a7c68; }
.summary .acts { margin-top: 0; }

.form fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: 18px; }
.form fieldset:disabled { opacity: 1; }
.field input:disabled, .field select:disabled, .field textarea:disabled {
  background: #f2ebdd; color: #6b6053; cursor: not-allowed; -webkit-text-fill-color: #6b6053;
}
.check input:disabled { background: #f2ebdd; cursor: not-allowed; }
.check input:disabled + span, .form fieldset:disabled .field small { color: #8a7c68; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn:disabled:hover { background: var(--night); border-color: var(--night); }
.night .btn:disabled:hover { background: var(--cream); border-color: var(--cream); }

/* the radio outline was square on a rounded card */
.picker__opt input:focus-visible + .picker__bd { outline: none; box-shadow: inset 0 0 0 2px var(--tung); }
.picker__opt:first-child .picker__bd { border-radius: var(--r) 0 0 var(--r); }
.picker__opt:last-child .picker__bd { border-radius: 0 var(--r) var(--r) 0; }
@media (max-width: 699px) {
  .picker__opt:first-child .picker__bd { border-radius: var(--r) var(--r) 0 0; }
  .picker__opt:last-child .picker__bd { border-radius: 0 0 var(--r) var(--r); }
}

/* a cream section that still reads as its own band */
section.ruled { border-top: 1px solid var(--cream2); border-bottom: 1px solid var(--cream2); }
/* the two rooms, small, where the page talks about taking both */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.4vw, 16px); }
.pair figure { margin: 0; }
.pair img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 10px; }
.pair figcaption { margin-top: 8px; font-size: .76rem; color: #8a7c68; }

/* --- hero video ----------------------------------------------------------
   Black and white, sized to cover rather than fit (YouTube always gives back
   16:9, so it is scaled up and centred), and behind the same scrim as the
   stills. It fades in only once it reports playing; the photographs stay
   underneath, so a blocked autoplay costs nothing. */
.hero__vid {
  /* A plain video element, so there is no player furniture to hide and no
     overscale needed — object-fit does the covering. */
  position: absolute; inset: 0; z-index: -3;
  width: 100%; height: 100%; object-fit: cover;
  border: 0; pointer-events: none;
  filter: grayscale(1) contrast(1.06) brightness(.86);
  opacity: 0; transition: opacity 1.4s var(--ease);
}

.hero__bg[data-playing="true"] .hero__vid { opacity: 1; }
.hero__bg[data-playing="true"] img { opacity: 0; transition: opacity 1.4s var(--ease); }
@media (prefers-reduced-motion: reduce) { .hero__vid { display: none; } }

/* --- Kdo jsme, centred ---------------------------------------------------
   Heading, intro and both columns line up on a single centre axis; the
   portrait is capped at 300px so it needs its own auto margins to sit on it. */
#kdo { text-align: center; }
#kdo .lede { margin-inline: auto; }
#kdo .person figure { margin-inline: auto; }
#kdo .person p { margin-inline: auto; max-width: 46ch; }