@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:100%;font-display:swap;src:url('/assets/fonts/archivo-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:100%;font-display:swap;src:url('/assets/fonts/archivo-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/plexmono-500.woff2') format('woff2')}

:root{
  --paper:#EBEFE8;--card:#F6F8F4;--deep:#1E382A;--deep-hover:#16291F;--accent:#9B5A2A;
  --ink:#14201A;--ink-soft:#3D4C42;--grey-label:#4E5E54;--rule:#C6D2C0;--rule-soft:#DAE2D6;
  --err:#8A2A1B;--field:#7A8B7E;
  --font:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --gutter:clamp(22px,5vw,64px);--radius:4px;--t:180ms ease;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit;text-underline-offset:.25em;text-decoration-thickness:1px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
h1,h2{text-wrap:balance;margin:0}
p{text-wrap:pretty}

.wrap{max-width:1240px;margin:0 auto;padding-inline:var(--gutter)}
.masthead{background:var(--paper);border-bottom:1px solid var(--rule)}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:84px}
.logo{display:inline-flex;align-items:center;min-height:44px;color:var(--deep);font-size:26px;font-weight:650;letter-spacing:-.035em;text-decoration:none}
.logo span{color:var(--accent)}
.back{display:inline-flex;align-items:center;min-height:44px;font-size:16px;font-weight:600;color:var(--deep)}

.page{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);gap:clamp(36px,6vw,88px);padding-block:clamp(40px,6vw,88px)}
.label{margin:0 0 26px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-label)}
h1{font-size:clamp(34px,4.6vw,54px);font-weight:550;line-height:1.1;letter-spacing:-.035em;color:var(--deep)}
.intro p{color:var(--ink-soft);max-width:44ch;margin:22px 0 0}
.facts{list-style:none;margin:30px 0 0;padding:0;border-top:1px solid var(--rule)}
.facts li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--rule);font-size:16px;color:var(--ink-soft)}
.facts b{font-weight:600;color:var(--ink)}

.panel{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);padding:clamp(20px,3vw,36px);min-height:420px}
.panel[hidden],[hidden]{display:none!important}
.pick{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(20px,3vw,36px)}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.cal-head h2{font-size:20px;font-weight:600;letter-spacing:-.02em;color:var(--deep)}
.nav{display:flex;gap:6px}
.icon-btn{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--rule);border-radius:var(--radius);color:var(--deep);font:inherit;font-size:18px;cursor:pointer;transition:background var(--t),border-color var(--t)}
.icon-btn:disabled{opacity:.35;cursor:default}
.grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;max-width:440px}
.dow{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--grey-label);text-align:center;padding:6px 0}
.day{height:44px;display:flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:var(--radius);background:transparent;color:#677369;font:inherit;font-size:16px}
button.day{opacity:1;cursor:pointer;background:var(--paper);border-color:var(--rule);color:var(--deep);font-weight:600;transition:background var(--t),color var(--t)}
button.day[aria-pressed="true"]{background:var(--deep);border-color:var(--deep);color:var(--paper)}
.day.today{box-shadow:inset 0 -2px 0 var(--accent)}

.times h3{margin:0 0 4px;font-size:16px;font-weight:600;color:var(--deep)}
.tzline{margin:0 0 14px;font-size:16px;color:var(--ink-soft)}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px;padding:2px}
.slot{min-height:44px;background:transparent;border:1px solid var(--deep);border-radius:var(--radius);color:var(--deep);font:inherit;font-size:16px;font-weight:600;cursor:pointer;transition:background var(--t),color var(--t)}
.hint{color:var(--grey-label);font-size:16px;margin:0}

.details h2{font-size:24px;font-weight:550;letter-spacing:-.025em;color:var(--deep);margin-bottom:6px}
.chosen{margin:0 0 22px;color:var(--ink-soft);font-size:15px}
.link-btn{display:inline-flex;align-items:center;min-height:44px;background:none;border:0;padding:0;font:inherit;font-size:16px;font-weight:600;color:var(--deep);text-decoration:underline;text-underline-offset:.25em;cursor:pointer}
form{display:grid;gap:16px}
.field label{display:block;font-size:16px;font-weight:600;margin-bottom:6px;color:var(--ink)}
.field .opt{font-weight:400;color:var(--grey-label)}
input[type=text],input[type=email],input[type=tel],textarea{width:100%;font:inherit;font-size:16px;padding:12px 14px;background:#fff;border:1px solid var(--field);border-radius:var(--radius);color:var(--ink)}
textarea{min-height:104px;resize:vertical}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--err)}
.err{margin:6px 0 0;font-size:16px;color:var(--err)}
.form-err{padding:12px 14px;border:1px solid var(--err);border-radius:var(--radius);color:var(--err);font-size:16px;background:#fff}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:13px 22px;background:var(--deep);color:var(--paper);border:1px solid var(--deep);border-radius:var(--radius);font:inherit;font-size:16px;font-weight:600;cursor:pointer;text-decoration:none;transition:background var(--t)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.6;cursor:default}
.btn.ghost{background:transparent;color:var(--deep)}
.small{font-size:16px;color:var(--grey-label);margin:0}
.hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}

.done h2{font-size:28px;font-weight:550;letter-spacing:-.03em;color:var(--deep);margin-bottom:10px}
.done p{color:var(--ink-soft);margin:0 0 14px;max-width:46ch}
.when{font-size:20px;font-weight:600;color:var(--ink)!important}
.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.state{padding:40px 0;text-align:center;color:var(--grey-label)}

footer{border-top:1px solid var(--rule);padding-block:26px;font-size:14px;color:var(--grey-label);line-height:1.7}
footer .wrap{display:flex;gap:8px 24px;justify-content:space-between;flex-wrap:wrap}

@media (max-width:900px){.page{grid-template-columns:minmax(0,1fr)}.pick{grid-template-columns:minmax(0,1fr)}.times{scroll-margin-top:16px}}
@media (max-width:640px){.masthead .wrap{min-height:70px}.panel{padding:18px}.logo{font-size:24px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.mt{margin-top:18px}
.ns{padding:24px}
.narrow{max-width:720px;padding-block:clamp(40px,6vw,88px)}
.confirm{margin-top:18px}

/* ---- time zone, slots, when boxes, manage ---- */
.tzrow{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--rule)}
.tzrow label{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-label)}
select{font:inherit;font-size:16px;font-weight:600;color:var(--deep);background:#fff;border:1px solid var(--field);border-radius:var(--radius);padding:9px 12px;min-height:44px;max-width:100%}
.tznote{font-size:16px;color:var(--grey-label);flex-basis:100%}
.slot{display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.25;padding:6px 4px}
.slot-main{font-size:16px;font-weight:600}
.slot-sub{font-size:13px;font-weight:400;opacity:.85;margin-top:1px}
.when{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:6px 0 20px}
.whenbox{background:#fff;border:1px solid var(--rule);border-radius:var(--radius);padding:14px 16px}
.whenlabel{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-label)}
.whentime{font-size:28px;font-weight:650;letter-spacing:-.03em;color:var(--deep);line-height:1.2;padding-top:4px}
.whenday{font-size:16px;color:var(--ink-soft)}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{padding:0;font-size:16px;font-weight:600;margin-bottom:8px}
.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.choice{position:relative}
.choice input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.choice span{display:flex;align-items:center;justify-content:center;min-height:46px;padding:8px 12px;border:1px solid var(--field);border-radius:var(--radius);background:#fff;font-size:16px;font-weight:600;color:var(--ink-soft);text-align:center;transition:background var(--t),color var(--t),border-color var(--t)}
.choice input:checked + span{background:var(--deep);border-color:var(--deep);color:var(--paper)}
.choice input:focus-visible + span{outline:2px solid var(--accent);outline-offset:3px}
.okbox{padding:12px 14px;border:1px solid var(--deep);border-radius:var(--radius);color:var(--deep);font-size:16px;background:#fff;margin-bottom:18px}
.note{margin:0 0 14px;padding:10px 14px;border-left:3px solid var(--accent);background:#fff;font-size:16px;color:var(--ink-soft)}
dl{margin:0 0 6px}
.kv{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--rule);font-size:16px}
.kv dt{color:var(--grey-label);flex:none}
.kv dd{margin:0;text-align:right;font-weight:600;color:var(--ink);overflow-wrap:anywhere;white-space:pre-wrap}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.narrow-panel{max-width:760px;margin-inline:auto}
@media (max-width:640px){.tznote{flex-basis:auto}.kv{flex-direction:column;gap:2px}.kv dd{text-align:left}.whentime{font-size:24px}}

.counter{text-align:right;margin-top:4px}
.note:focus,.form-err:focus{outline:2px solid var(--accent);outline-offset:3px}
[tabindex="-1"]:focus{outline:none}
.trouble .row{margin-top:14px}
.h1s{font-size:28px;font-weight:550;letter-spacing:-.03em;color:var(--deep);line-height:1.15;margin:0 0 14px}
#notice{margin:0 0 18px}
#e-tz{width:100%}
#r-err,#r-confirm{margin:14px 0}
#r-picker{margin-top:18px}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--err)}

/* ---- waiting for the email confirmation ---- */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.done p.lead{font-size:18px;color:var(--ink)}
.lead strong{overflow-wrap:anywhere}
.countdown{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:0 0 4px!important}
.countdown-label{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-label)}
#wait-left{font-size:34px;font-weight:650;letter-spacing:-.02em;color:var(--deep);font-variant-numeric:tabular-nums;line-height:1.1}
.link-btn.inline{display:inline;min-height:0}
.holdnote{font-weight:600;color:var(--deep)!important}
#resend-note:empty{display:none}
#waiting .small,#ready .small{margin-top:14px;max-width:52ch}
/* Phones: the panel uses nearly the full width so each day stays a 44px target. */
@media (max-width:480px){.panel{margin-inline:calc(8px - var(--gutter));padding:14px 12px}.grid{gap:2px}}

/* Footer at the bottom on tall screens; short panels stay short. */
body{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
body>main{flex:1 0 auto;width:100%;align-content:start}
.narrow-panel{min-height:0}
.panel{scroll-margin-top:12px}

/* Hover colours only where there is a real pointer, so a tapped slot on a phone does not look chosen. */
@media (hover:hover){.icon-btn:hover:not(:disabled){background:var(--rule-soft)}button.day:hover{background:var(--rule-soft)}.slot:hover{background:var(--deep);color:var(--paper)}.btn:hover:not(:disabled){background:var(--deep-hover)}.btn.ghost:hover:not(:disabled){background:var(--deep);color:var(--paper)}}
@media (max-width:480px){.row .btn,.actions .btn{flex:1 1 100%}}
/* Safari draws native selects at its own small height; draw our own so it is a 44px target everywhere. */
select{-webkit-appearance:none;appearance:none;padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231E382A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:12px 8px;line-height:1.3}

/* Booking page order. The DOM is heading, panel, rest of the intro (that is the
   reading and tab order, and the phone layout). Wide screens: heading and the rest
   of the intro stack in the left column, the panel spans both rows on the right. */
.page{grid-template-rows:auto 1fr;row-gap:0}
.intro-head{grid-column:1;grid-row:1}
.page>.panel{grid-column:2;grid-row:1 / span 2;align-self:start}
.intro-more{grid-column:1;grid-row:2;align-self:start}
.intro-more p:first-child{margin-top:16px}
@media (max-width:900px){
  .page{grid-template-rows:none;row-gap:24px}
  .intro-head,.page>.panel,.intro-more{grid-column:1;grid-row:auto}
  .intro-head p{margin-top:12px}
  .intro-more p:first-child{margin-top:0}
  .intro-more .facts{margin-top:20px}
}
@media (max-width:640px){.page{padding-block:28px 40px}.intro-head h1{font-size:32px}}