:root{
  /* Dark, warm. Near-black rather than #000: a true black crushes the shadow
     detail in the piano photograph and makes the clay accent look neon. Every
     surface below is a token, so the whole page is one palette swap. */
  --paper:#100E0C;          /* page ground */
  --paper-2:#191614;        /* raised bands */
  --paper-3:#221E1B;        /* inset wells */
  --panel:#171412;          /* cards */
  --ink:#F4F1EA;            /* headings, and the fill of any inverted surface */
  --ink-2:#BDB5A8;          /* body copy */
  --ink-3:#8A8175;          /* labels, meta */
  --on-ink:#14120F;         /* text on ink — dark, because ink is now light */
  --ink-hover:#E4DFD3;      /* ink surfaces on hover */
  --ink-faint:rgba(244,241,234,.30);  /* disabled / past */
  --on-ink-2:rgba(20,18,15,.72);      /* secondary text on an ink surface */
  --on-ink-3:rgba(20,18,15,.62);
  --scrim:rgba(16,14,12,.88);          /* sticky topbar over scrolling content */

  /* The one accent, lifted off its paper value: #8C4A32 on this ground reads
     as mud and fails contrast on body text. Errors reuse it. */
  --clay:#D08765;
  --clay-soft:rgba(208,135,101,.12);
  --clay-line-soft:rgba(208,135,101,.20);
  --clay-line:rgba(208,135,101,.26);
  --clay-line-2:rgba(208,135,101,.32);
  --clay-line-3:rgba(208,135,101,.45);

  /* Success — verified member, confirmed booking. */
  --green:#8FBF9A;
  --green-soft:rgba(143,191,154,.12);
  --green-line:rgba(143,191,154,.24);
  --green-line-2:rgba(143,191,154,.28);

  --rule:rgba(244,241,234,.14);
  --rule-soft:rgba(244,241,234,.07);

  /* Shadows do almost nothing on a dark ground, so they are deeper and used
     only to lift the modal off the page. */
  --backdrop:rgba(5,4,3,.68);
  --shadow-modal:rgba(0,0,0,.6);
  --shadow-btn:rgba(0,0,0,.55);

  /* The footer was an inverted ink block on paper. Inverted on a dark page it
     would be a full-width cream slab, so it gets its own quieter surface. */
  --footer-bg:#0B0A08;
  --footer-fg:var(--ink-2);
  --footer-muted:rgba(244,241,234,.52);

  /* One family, end to end. Headlines are the same face set light and large —
     no display serif, nothing to clash with. */
  --body:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --display:var(--body);
  color-scheme: dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-weight:400;font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;cursor:pointer}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ---------- shell ---------- */
.wrap{max-width:1140px;margin:0 auto;padding:0 28px}
.flow{max-width:620px;margin:0 auto;padding:0 24px}
@media(max-width:520px){.wrap,.flow{padding:0 20px}}

.topbar{
  position:sticky;top:0;z-index:40;background:var(--scrim);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--rule-soft);
}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 28px;max-width:1140px;margin:0 auto}
@media(max-width:520px){.topbar-in{padding:13px 20px}}
.mark{font-size:15px;letter-spacing:.16em;font-weight:500;text-transform:uppercase;white-space:nowrap;line-height:1}
.mark em{font-style:italic;font-weight:300;text-transform:none;letter-spacing:.04em;color:var(--ink-3)}
@media(max-width:430px){.mark{font-size:13px;letter-spacing:.12em}}
.nav{display:flex;align-items:center;gap:26px}
.nav a{font-size:13px;color:var(--ink-2);text-decoration:none;text-underline-offset:4px}
.nav a:hover{color:var(--ink);text-decoration:underline}
@media(max-width:620px){.nav a:not(.btn-sm){display:none}}

/* Solid ink, stays solid. No gradient, no glow, no arrow glyph. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--ink);color:var(--on-ink);border:1px solid var(--ink);
  padding:17px 34px;border-radius:0;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:500;text-decoration:none;line-height:1;
  transition:background .16s,border-color .16s,transform .12s,box-shadow .16s;
}
.btn:hover{background:var(--ink-hover);border-color:var(--ink-hover);box-shadow:0 6px 18px -10px var(--shadow-btn)}
.btn:active{transform:translateY(1px);box-shadow:none}
.btn[disabled]{background:var(--paper-3);border-color:var(--paper-3);color:var(--ink-3);cursor:not-allowed;box-shadow:none;transform:none}
.btn-sm{padding:11px 20px;font-size:11px;letter-spacing:.12em}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--rule);box-shadow:none}
.btn-ghost:hover{background:var(--ink);color:var(--on-ink);border-color:var(--ink);box-shadow:none}
.btn-wide{width:100%}
/* Touch targets: a thumb needs the full width, not a 34px-tall pill. */
@media(max-width:620px){
  .btn{width:100%;padding:18px 24px}
  .btn-sm{width:auto;padding:12px 18px}
}

/* Small caps label. Sans, not a condensed display face — it should recede. */
.eyebrow{
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-3);font-weight:500;margin:0 0 20px;
}
h1,h2,h3{font-family:var(--display);font-weight:300;margin:0;text-wrap:balance}
h1{font-size:clamp(40px,7vw,68px);line-height:1.04;letter-spacing:-.03em}
h2{font-size:clamp(28px,4.2vw,40px);line-height:1.1;letter-spacing:-.025em}
h3{font-size:19px;font-weight:400;line-height:1.3;letter-spacing:-.01em}
.lede{color:var(--ink-2);max-width:48ch;font-size:17px}
/* One italic word, used *only* in the two page-level headlines. Everywhere else
   the type does the work on its own. */
/* The one accent left in the type: a real Jost italic, one word per view. */
em.it{font-style:italic;font-weight:300;color:var(--ink-2)}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:1fr 1.05fr;gap:64px;align-items:start;padding:88px 0 80px}
@media(max-width:900px){
  .hero{grid-template-columns:1fr;gap:32px;padding:36px 0 48px}
  .hero-photo{order:-1}
}
@media(max-width:520px){.hero{padding:28px 0 40px;gap:26px}}
/* No aspect-ratio and no cover: a forced crop cut the piano's ends off at every
   viewport. The photograph is the product, so it is shown whole at its native
   1132x1390 proportions and its own shape decides the box. The hairline frame
   sits on the image itself, inside the layout box, so it never shifts it. */
.hero-photo img{display:block;width:100%;height:auto;border:1px solid var(--rule)}
.hero .lede{margin:22px 0 0}
/* Three facts on one rule — a spec line, not a card row. */
.facts{display:flex;gap:44px;flex-wrap:wrap;margin:38px 0 34px;padding:24px 0 0;border-top:1px solid var(--rule)}
@media(max-width:620px){
  .facts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:28px 0 26px;padding-top:20px}
  .fact-v{font-size:23px}
  .fact-v small{display:block;margin-top:3px}
}
.fact-k{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.fact-v{font-family:var(--display);font-weight:300;letter-spacing:-.02em;font-size:28px;line-height:1;font-variant-numeric:tabular-nums}
.fact-v small{font-family:var(--body);font-size:12px;color:var(--ink-3);letter-spacing:.06em}
.hero-cta{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.hero-cta .quiet{font-size:13.5px;color:var(--ink-3)}
@media(max-width:620px){
  .hero-cta{gap:14px}
  .hero-cta .quiet{max-width:none;width:100%;text-align:center}
}

/* ---------- sections ---------- */
section{padding:80px 0}
@media(max-width:720px){section{padding:56px 0}}
.band{background:var(--paper-2)}

/* Steps are rule-separated rows, not three numbered boxes. */
.steps{margin-top:44px;border-top:1px solid var(--rule)}
.step{
  display:grid;grid-template-columns:auto 1fr 1.4fr;gap:16px 40px;align-items:baseline;
  padding:26px 0;border-bottom:1px solid var(--rule-soft);
}
@media(max-width:760px){.step{grid-template-columns:auto 1fr;gap:6px 20px}.step p{grid-column:2}}
.step .n{font-size:11px;font-weight:500;letter-spacing:.16em;color:var(--ink-3);width:2.2em}
.step h3{margin:0}
.step p{margin:0;font-size:15px;color:var(--ink-2)}

/* Two rates, one vertical rule between them. No boxes, no gradient, no glow. */
.rates{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:44px;padding-top:36px;border-top:1px solid var(--rule)}
@media(max-width:760px){.rates{grid-template-columns:1fr;gap:0}}
.rate{display:flex;flex-direction:column}
@media(min-width:761px){.rate.member{border-left:1px solid var(--rule);padding-left:56px}}
@media(max-width:760px){.rate.member{border-top:1px solid var(--rule);padding-top:36px;margin-top:36px}}
.rate .who{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:18px}
.rate .price{font-family:var(--display);font-weight:300;letter-spacing:-.035em;font-size:48px;line-height:1;margin-bottom:10px;font-variant-numeric:tabular-nums}
.rate .per{font-size:11px;color:var(--ink-3);letter-spacing:.16em;text-transform:uppercase;margin-bottom:26px}
.rate ul{list-style:none;margin:0 0 28px;padding:0;font-size:15px;color:var(--ink-2);display:grid;gap:0}
/* Hairline-separated lines. No bullet glyphs. */
.rate li{padding:11px 0;border-top:1px solid var(--rule-soft)}
.rate li:last-child{border-bottom:1px solid var(--rule-soft)}
.rate ul.mkts{margin-bottom:20px}
.rate ul.mkts li{display:flex;justify-content:space-between;gap:16px}
.rate ul.mkts b{font-weight:400;color:var(--ink);font-variant-numeric:tabular-nums}
.rate .spacer{flex:1}

.faq{display:grid;margin-top:44px;border-top:1px solid var(--rule)}
.q{border-bottom:1px solid var(--rule-soft);padding:26px 0;display:grid;grid-template-columns:1fr 1.5fr;gap:12px 48px;align-items:start}
@media(max-width:760px){.q{grid-template-columns:1fr;gap:8px}}
.q h3{margin:0}
.q p{margin:0;font-size:15px;color:var(--ink-2)}
.q a{color:var(--ink);text-underline-offset:3px}

/* ---------- booking flow ---------- */
.view{display:none}
.view.on{display:block}
.flowhead{padding:48px 0 30px;text-align:center}
@media(max-width:520px){.flowhead{padding:32px 0 24px}.back{margin-bottom:22px}}
.back{background:none;border:0;padding:0;color:var(--ink-3);font-size:13px;margin-bottom:30px;text-underline-offset:4px}
.back:hover{color:var(--ink);text-decoration:underline}
.progress{
  list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;max-width:420px;margin:32px auto 2px;
}
.pip{display:block;text-align:left}
.pip .bar{display:block;height:1px;background:var(--rule);transition:background .25s,height .25s}
.pip .pip-t{
  display:block;margin-top:10px;font-size:10.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);transition:color .25s;
}
.pip.is-done .bar{background:var(--ink);height:2px}
.pip.is-done .pip-t{color:var(--ink)}
@media(max-width:430px){.pip .pip-t{font-size:9px;letter-spacing:.08em}}
.card{background:var(--panel);border:1px solid var(--rule-soft);padding:28px 26px;margin-bottom:20px}
@media(max-width:520px){.card{padding:24px 20px}}
.card > .label{
  font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:22px;padding-bottom:14px;border-bottom:1px solid var(--rule-soft);
}

/* calendar */
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.cal-month{font-family:var(--display);font-weight:300;font-size:21px;letter-spacing:-.02em}
.cal-nav{
  background:none;border:1px solid var(--rule);width:34px;height:34px;border-radius:0;
  color:var(--ink);line-height:1;font-size:16px;display:flex;align-items:center;justify-content:center;
  transition:background .15s,color .15s,border-color .15s;
}
.cal-nav:hover:not([disabled]){background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.cal-nav[disabled]{color:var(--ink-3);border-color:var(--rule-soft);opacity:.5;cursor:not-allowed}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
@media(max-width:430px){.cal{gap:3px}.day{font-size:13.5px}.dow{font-size:9px;letter-spacing:.06em}}
.cal[data-loading="1"]{opacity:.45;pointer-events:none}
.dow{text-align:center;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding-bottom:10px}
.day{
  aspect-ratio:1;position:relative;border:1px solid var(--rule-soft);background:var(--paper);
  border-radius:0;font-size:15px;font-variant-numeric:tabular-nums;color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  transition:background .14s,border-color .14s,color .14s;
}
.day:hover:not([disabled]):not(.sel){border-color:var(--ink);background:var(--paper-3)}
.day[disabled]{cursor:not-allowed}
/* booked and past both read as unavailable; only booked is struck through */
.day.off{background:var(--clay-soft);border-color:var(--clay-line);color:var(--ink-3);text-decoration:line-through;text-decoration-color:var(--clay);text-decoration-thickness:1px}
.day.past{background:var(--paper-2);border-color:var(--rule-soft);color:var(--ink-faint)}
.day.empty{background:transparent;border-color:transparent;cursor:default}
.day.today::after{content:"";position:absolute;bottom:5px;left:50%;transform:translateX(-50%);width:3px;height:3px;border-radius:50%;background:var(--ink)}
.day.sel{background:var(--ink);color:var(--on-ink);border-color:var(--ink);font-weight:500}
.day.sel.today::after{background:var(--on-ink)}
.cal-key{display:flex;gap:20px;flex-wrap:wrap;margin-top:18px;font-size:11.5px;color:var(--ink-3)}
.key-dot{display:inline-block;width:10px;height:10px;background:var(--paper);border:1px solid var(--rule);margin-right:7px;vertical-align:-1px}
.key-dot.b{background:var(--clay-soft);border-color:var(--clay-line)}
.key-dot.h{background:var(--green-soft);border-color:var(--green-line-2)}
/* An admin block on the admin calendar. Green rather than clay so a date the
   admin can release does not look like a customer booking they cannot. */
.day.hold{background:var(--green-soft);border-color:var(--green-line-2);color:var(--ink-2)}
.day.hold:hover{border-color:var(--green);background:var(--green-line)}
/* the chosen date, said back in words, right under the grid */
.cal-picked{display:none;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:20px;padding-top:18px;border-top:1px solid var(--rule-soft)}
.cal-picked.on{display:flex}
.cal-picked .cp-k{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.cal-picked .cp-v{font-family:var(--display);font-weight:300;font-size:20px;letter-spacing:-.02em}

/* options — selection is a solid ink block, not a coloured glow */
.opt{
  position:relative;width:100%;text-align:left;background:transparent;
  border:1px solid var(--rule);border-radius:0;padding:22px;margin-bottom:12px;display:block;
  transition:background .15s,border-color .15s,color .15s;
}
.opt:hover{border-color:var(--ink)}
.opt.sel{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.opt.sel .opt-sub,.opt.sel .opt-price small,.opt.sel .opt-flag{color:var(--on-ink-2)}
.opt-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
@media(max-width:430px){.opt-top{display:block}.opt-price{display:block;margin-top:6px}}
.opt-name{font-family:var(--display);font-weight:300;font-size:22px;letter-spacing:-.02em}
.opt-price{font-family:var(--display);font-weight:300;letter-spacing:-.02em;font-size:22px;font-variant-numeric:tabular-nums;white-space:nowrap}
.opt-price small{font-family:var(--body);font-size:11px;color:var(--ink-3)}
.opt-sub{font-size:14px;color:var(--ink-2);margin-top:8px;max-width:46ch}
.opt-flag{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
@media(max-width:520px){.opt{padding:18px}.opt-name,.opt-price{font-size:20px}}

/* delivery markets — a nested choice under the Delivered option, so it reads as
   part of that answer rather than as a fifth thing to decide. Hidden outright
   when pickup is selected; there is one pickup location. */
.markets{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:-4px 0 12px;padding:0 0 0 0px}
@media(max-width:520px){.markets{grid-template-columns:1fr;padding-left:0}}
.mkt{
  text-align:left;background:transparent;color:inherit;
  border:1px solid var(--rule);border-radius:0;padding:12px 14px;
  transition:background .15s,border-color .15s,color .15s;
}
.mkt:hover{border-color:var(--ink)}
.mkt.sel{border-color:var(--ink);background:var(--rule-soft)}
.mkt-n{display:block;font-size:13px;letter-spacing:.02em}
.mkt-p{display:block;margin-top:4px;font-family:var(--display);font-weight:300;font-size:17px;font-variant-numeric:tabular-nums}
.mkt.sel .mkt-p{color:var(--ink)}

/* fields */
.field{margin-bottom:18px}
.field label{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.field input,.field textarea,.field select{
  width:100%;padding:13px 14px;border:1px solid var(--rule);background:var(--paper);border-radius:0;
  font:inherit;font-size:16px;color:var(--ink);transition:border-color .15s,background .15s;
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--ink);background:var(--panel)}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3);opacity:.7}
.field .hint{font-size:12.5px;color:var(--ink-3);margin-top:7px}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pickup-where{background:var(--paper-3);padding:17px 19px;margin:4px 0 20px}
.pw-k{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.pw-v{font-weight:400;font-size:16px;line-height:1.4}
.pw-n{font-size:12.5px;color:var(--ink-2);margin-top:8px;line-height:1.5}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:520px){.two{grid-template-columns:1fr}}

/* the single agreement — a checkbox, not an app toggle */
.tog{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
.switch{
  position:relative;width:24px;height:24px;flex:none;margin-top:2px;
  background:transparent;border:1px solid var(--ink);border-radius:0;padding:0;
  transition:background .16s;
}
.switch::after{
  content:"";position:absolute;top:5px;left:8px;width:5px;height:10px;
  border:solid var(--on-ink);border-width:0 1.5px 1.5px 0;transform:rotate(45deg) scale(0);
  transition:transform .16s;
}
.switch.on{background:var(--ink)}
.switch.on::after{transform:rotate(45deg) scale(1)}
.tog p{margin:0;font-size:14.5px;color:var(--ink-2);line-height:1.55}
.tog b{color:var(--ink);font-weight:400;font-size:16px;display:block;margin-bottom:6px}
.tog ul{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:7px;font-size:14px}
.tog li{padding-left:16px;position:relative}
.tog li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;background:var(--ink-3)}

/* errors — one banner for the submit, a rule for the field at fault */
.alert{
  display:none;gap:14px;align-items:flex-start;
  background:var(--clay-soft);border:1px solid var(--clay-line-2);border-left:2px solid var(--clay);
  border-radius:0;padding:15px 17px;margin-bottom:20px;font-size:13.5px;color:var(--ink-2);line-height:1.55;
}
.alert.on{display:grid;grid-template-columns:auto 1fr}
.alert .a-i{color:var(--clay);font-size:14px;line-height:1.5}
.alert b{display:block;color:var(--clay);font-weight:500;margin-bottom:4px}
.alert.ok{background:var(--green-soft);border-color:var(--green-line-2);border-left-color:var(--green)}
.alert.ok .a-i,.alert.ok b{color:var(--green)}
.alert ul{margin:7px 0 0;padding-left:18px;display:grid;gap:4px}
.field.err input,.field.err textarea{border-color:var(--clay);background:var(--clay-soft)}
.field.err label{color:var(--clay)}
.field-err{display:none;font-size:12px;color:var(--clay);margin-top:7px}
.field.err .field-err{display:block}
.card.err{border-color:var(--clay-line-3)}

/* summary */
.sum{background:var(--paper-2);padding:24px}
.sum-row{display:flex;justify-content:space-between;gap:16px;font-size:15px;padding:8px 0;color:var(--ink-2)}
.sum-row b{font-weight:400;color:var(--ink);font-variant-numeric:tabular-nums}
.sum-total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--rule);margin-top:14px;padding-top:16px}
.sum-total span{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.sum-total b{font-family:var(--display);font-size:32px;font-weight:300;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.hold{font-size:12.5px;color:var(--ink-3);border-top:1px solid var(--rule-soft);line-height:1.55}

/* confirmation */
.confirm{text-align:center;padding:72px 0 24px}
@media(max-width:520px){.confirm{padding:44px 0 20px}}
/* The reservation panel on the confirmed view. The rest of that view is centred
   prose; this is a document, so it is left-aligned on its own paper ground. */
.done-sum{background:var(--paper-2);padding:26px 24px;margin-top:34px;text-align:left}
@media(max-width:520px){.done-sum{padding:20px 18px}}
.done-sum-t{margin:0 0 4px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.done-sum .detail-grid{margin-bottom:4px}
.done-sum .sum-total{margin-top:18px}
.done-sum .hold{margin-top:16px}
.confirm-actions{margin-top:36px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.seal{
  width:56px;height:56px;border:1px solid var(--ink);border-radius:50%;
  display:flex;align-items:center;justify-content:center;margin:0 auto 30px;
  font-size:19px;font-weight:500;letter-spacing:.1em;
}
.next{margin-top:40px;text-align:left;border-top:1px solid var(--rule)}
.next-item{display:block;padding:18px 0;border-bottom:1px solid var(--rule-soft);font-size:14.5px;color:var(--ink-2)}
.next-item b{font-weight:500;color:var(--ink);font-size:15px;display:block;margin-bottom:4px}
/* The pickup item is the one multi-paragraph entry in this list — it carries the
   confirmed return instructions, so it gets real paragraph spacing and a checklist. */
.next-item p{margin:0 0 8px}
.next-item p:last-child{margin-bottom:0}
.next-item .next-lead{margin-top:12px;color:var(--ink);font-weight:500}
.next-list{margin:0 0 10px;padding:0;list-style:none}
.next-list li{position:relative;padding:5px 0 5px 18px}
.next-list li::before{content:'';position:absolute;left:0;top:14px;width:8px;height:1px;background:var(--clay-line-3)}

/* the admin calendar is a reference grid, not the booking control — keep it compact */
#adminCal,#adminCal ~ .cal-key,.admin-card .cal-head:has(#adminCalMonth){max-width:420px}
#adminCal .day{font-size:13px}
#adminCal .dow{font-size:9px;padding-bottom:7px}

/* ---------- admin ---------- */
.admin-shell{max-width:1120px;margin:0 auto;padding:56px 28px 80px}
.admin-login{max-width:440px;margin:42px auto 0;background:var(--panel);border:1px solid var(--rule-soft);padding:30px}
.admin-login h2{margin-bottom:26px}
.admin-form .btn{margin-top:4px}
.admin-panel[hidden],.admin-login[hidden],.modal[hidden]{display:none}
.admin-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:34px}
.admin-head .eyebrow{margin-bottom:12px}
.admin-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:22px}
.admin-kpi{background:var(--panel);border:1px solid var(--rule-soft);padding:22px 24px;min-height:124px}
.admin-kpi span{display:block;font-size:10.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);line-height:1.35}
.admin-kpi b{display:block;margin-top:22px;font-family:var(--display);font-weight:300;font-size:36px;line-height:1;font-variant-numeric:tabular-nums}
.admin-card{background:var(--panel);border:1px solid var(--rule-soft);padding:26px}
.admin-block-card{margin-bottom:22px}
.admin-card-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--rule-soft)}
.admin-card-head h3{font-size:26px;font-weight:300}
.admin-table-wrap{overflow:auto}
.admin-table{width:100%;border-collapse:collapse;min-width:760px}
.admin-table th,.admin-table td{text-align:left;padding:15px 12px;border-bottom:1px solid var(--rule-soft);vertical-align:middle}
.admin-table th{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);font-weight:500;white-space:nowrap}
.admin-table td{font-size:14.5px;color:var(--ink-2)}
.admin-table tr[role="button"]{cursor:pointer}
.admin-table tr[role="button"]:hover td,.admin-table tr[role="button"]:focus td{background:var(--paper)}
.admin-table td b{display:block;color:var(--ink);font-weight:500;line-height:1.25}
.admin-table td small{display:block;color:var(--ink-3);font-size:12.5px;margin-top:3px;line-height:1.3}
.admin-table .num{text-align:right;font-variant-numeric:tabular-nums}
.mono{font-variant-numeric:tabular-nums;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;color:var(--ink)}
.status{display:inline-flex;align-items:center;justify-content:center;min-width:92px;padding:7px 11px;background:var(--paper-3);border:1px solid var(--rule-soft);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.status.confirmed{background:var(--green-soft);border-color:var(--green-line);color:var(--green)}
.status.pending{background:var(--paper-2);color:var(--ink-2)}
.status.cancelled,.status.expired,.status.refunded{background:var(--clay-soft);border-color:var(--clay-line-soft);color:var(--clay)}
.admin-empty{display:none;padding:28px 0 6px;text-align:center;color:var(--ink-3);font-size:14px}
.admin-empty.on{display:block}
.admin-loading{text-align:center;color:var(--ink-3)!important;padding:32px!important}
.modal{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:24px}
.modal-backdrop{position:absolute;inset:0;border:0;background:var(--backdrop);cursor:pointer}
.modal-card{position:relative;width:min(720px,100%);max-height:min(780px,88vh);overflow:auto;background:var(--panel);border:1px solid var(--rule);padding:28px;box-shadow:0 26px 80px var(--shadow-modal)}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid var(--rule-soft)}
.modal-head .eyebrow{margin-bottom:8px}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
.detail-grid div{padding:14px 0;border-bottom:1px solid var(--rule-soft)}
.detail-grid span{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}
.detail-grid b{display:block;font-size:14.5px;font-weight:400;color:var(--ink);line-height:1.4;overflow-wrap:anywhere}
.modal-open{overflow:hidden}

@media(max-width:760px){
  .admin-shell{padding:36px 20px 58px}
  .admin-login{padding:24px 20px;margin-top:22px}
  .admin-head{display:block}
  .admin-head .btn{margin-top:18px}
  .admin-kpis{grid-template-columns:1fr 1fr;gap:12px}
  .admin-kpi{padding:18px;min-height:108px}
  .admin-kpi b{font-size:30px;margin-top:18px}
  .admin-card{padding:20px}
  .detail-grid{grid-template-columns:1fr}
}
@media(max-width:460px){
  .admin-kpis{grid-template-columns:1fr}
  .modal{padding:12px}
  .modal-card{padding:22px 18px}
}

footer{background:var(--footer-bg);color:var(--footer-fg);padding:56px 0;margin-top:0;border-top:1px solid var(--rule-soft)}
@media(max-width:520px){footer{padding:40px 0}}
footer .mark{color:var(--ink)}
.foot{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;font-size:13.5px;color:var(--footer-muted);line-height:1.9}
.foot a{color:var(--footer-muted);text-underline-offset:3px}
.foot a:hover{color:var(--ink)}

/* ---------------------------------------------------------------- cancellation
   The self-serve cancellation view. Three panels share one card stack and only
   one is ever shown, so they default to hidden and site/js/cancel.js adds .on —
   the same pattern .view and .alert already use, rather than a fourth way of
   spelling "hidden". */
#cancelRequest,#cancelReview,#cancelDone{display:none}
#cancelRequest.on,#cancelReview.on,#cancelDone.on{display:block}

.cancel-lede{font-size:15px;line-height:1.7;color:var(--ink-2);margin:0 0 24px}
.cancel-h{font-family:var(--display);font-size:26px;font-weight:300;letter-spacing:-.02em;line-height:1.2;margin:0 0 12px;color:var(--ink)}
.cancel-note{font-size:12.5px;line-height:1.6;color:var(--ink-3);text-align:center;margin:14px 0 0}

/* The refund arithmetic, set apart from the reservation summary above it: the
   customer is being asked to agree to a number, and it should not read as one
   more line of the receipt. */
.cancel-quote{background:var(--paper-2);border-top:1px solid var(--rule);padding:20px 24px 24px}
.cancel-quote .sum-total b{font-size:34px}

.cancel-policy{margin:22px 0 26px;padding:0 0 0 18px;display:grid;gap:8px;font-size:13.5px;line-height:1.6;color:var(--ink-3)}

/* The one place a destructive button appears in this product. It stays a plain
   button rather than turning red: the customer arrived here to cancel, and the
   consequences are already spelled out above and below it. Colouring it as a
   warning would be theatre. */
#cancelBtn{margin-top:4px}