/* Lit Studios booking — same type and navigation system as litstudios.ie (warehouse design):
   Jost for UI, Newsreader for statements and lead copy, white page, hairline rules. */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700&family=Newsreader:ital,wght@0,400;0,500;1,400&display=swap');

:root{
  --ink:#1a1a1a; --text:#222; --dark:#3a3a3a; --mute:#8a8a8a; --line:#ededed; --line2:#e2e1de;
  --free:#eef4ec; --free-b:#cfe0c9; --part:#faf3e0; --part-b:#e8d7a6; --full:#f6e7e4; --full-b:#e1bcb5;
  --ok:#2f6b3a; --err:#9a3324;
  --pad:clamp(24px,4vw,66px);
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:'Jost',system-ui,sans-serif;background:#fff;color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%}
/* One column for the whole site: the header, the sub nav, the page copy and the footer
   all sit on 1760, so every left edge on the page is the same one. */
.wrap{max-width:1760px;margin:0 auto;padding:0 var(--pad)}

/* ===== header: identical to the parent site's minbar/minnav ===== */
.minbar{position:sticky;top:0;z-index:50;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.05)}
.minnav{display:flex;justify-content:space-between;align-items:center;max-width:1760px;margin:0 auto;
  padding:clamp(10px,1.3vw,16px) var(--pad)}
.minnav .mbrand img{height:clamp(60px,5.4vw,84px);width:auto;display:block}
.minnav .mlinks{display:flex;gap:clamp(18px,2.4vw,42px);flex-wrap:wrap;align-items:center}
.minnav .mlinks a{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#666;text-decoration:none;transition:color .25s}
.minnav .mlinks a[aria-current],.minnav .mlinks a:hover{color:#111}
/* hamburger (<=860px), same as the parent */
.navtoggle{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;margin:0}
.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;margin-left:auto;cursor:pointer;-webkit-tap-highlight-color:transparent;flex:0 0 auto}
.hamburger span{display:block;width:26px;height:2px;background:#111;margin-left:auto;transition:transform .3s ease,opacity .2s ease}
@media(max-width:860px){
  .minnav{position:relative;flex-wrap:nowrap}
  .hamburger{display:flex}
  .minnav .mlinks{position:absolute;top:100%;left:0;right:0;z-index:60;flex-direction:column;align-items:stretch;gap:0;background:#fff;
    padding:0 var(--pad);max-height:0;overflow:hidden;transition:max-height .38s cubic-bezier(.2,.7,.2,1);box-shadow:0 10px 24px rgba(0,0,0,.07)}
  .navtoggle:checked ~ .mlinks{max-height:78vh;border-top:1px solid #eee;padding-top:6px;padding-bottom:14px}
  .minnav .mlinks a{padding:16px 2px;border-bottom:1px solid #f1f1f1;font-size:13px;letter-spacing:.18em}
  .minnav .mlinks a:last-child{border-bottom:0}
  .navtoggle:checked ~ .hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .navtoggle:checked ~ .hamburger span:nth-child(2){opacity:0}
  .navtoggle:checked ~ .hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
/* booking sub navigation, sits under the main bar */
.subnav{border-bottom:1px solid var(--line)}
.subnav .wrap{display:flex;gap:clamp(18px,2.4vw,36px);flex-wrap:wrap}
.subnav a{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#8a8a8a;text-decoration:none;padding:14px 0;
  border-bottom:1px solid transparent;margin-bottom:-1px}
.subnav a[aria-current],.subnav a:hover{color:#111;border-bottom-color:#111}
/* signed in marker: on every admin page, not only Requests, so it is never a guess
   whether this browser still holds the session */
.subnav .whoami{margin-left:auto;display:inline-flex;align-items:center;gap:7px;padding:14px 0;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ok);white-space:nowrap}
.subnav .whoami i{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:0 0 auto}
.subnav a.signout{color:var(--mute)}
.subnav a.signout:hover{color:#111}
@media(max-width:720px){.subnav .whoami{margin-left:0}}

/* ===== type, as the parent ===== */
.eyebrow{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);margin:0 0 10px}
h1.display{font-family:'Jost',sans-serif;font-size:clamp(13px,1.3vw,15px);letter-spacing:.24em;text-transform:uppercase;font-weight:600;
  color:#111;line-height:1.5;margin:0 0 clamp(12px,1.6vw,20px)}
.lead{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;line-height:1.9;color:#5a5a5a;max-width:64ch;margin:0;text-wrap:balance}
h2.h2{font-size:12px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:#111;margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid #111}
section{padding:clamp(36px,5vw,64px) 0}
.hr{height:1px;background:var(--line);border:0;margin:0}
.muted{color:var(--mute);font-size:13px}

/* ===== home cards (parent wh2-card feel) ===== */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,52px);margin-top:clamp(26px,3vw,40px)}
.card{border:1px solid var(--line);padding:clamp(22px,3vw,34px);text-decoration:none;display:block;transition:border-color .3s}
.card:hover{border-color:#111}
.card .k{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:#111;font-weight:600}
.card p{font-family:'Newsreader',Georgia,serif;color:var(--dark);margin:.6em 0 0;font-size:clamp(15px,1.1vw,17px);line-height:1.5}
.card .go{margin-top:18px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
@media(max-width:720px){.cards{grid-template-columns:1fr}}

/* ===== space tabs + rates strip ===== */
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin:clamp(18px,2vw,26px) 0}
.tab{border:1px solid var(--line2);padding:9px 16px;text-decoration:none;text-transform:uppercase;letter-spacing:.16em;font-size:11px;color:#555;border-radius:999px;transition:all .25s}
.tab[aria-current]{background:#111;color:#fff;border-color:#111}
.rates{list-style:none;margin:clamp(16px,2vw,24px) 0 clamp(22px,3vw,36px);padding:0;display:flex;flex-wrap:wrap;gap:10px 28px;font-size:14px;color:var(--dark)}
.rates li{display:flex;gap:12px;align-items:baseline}
.rates b{font-weight:600;color:#111;font-variant-numeric:tabular-nums}

/* ===== calendar ===== */
.calhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.calhead .m{font-size:12px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:#111}
.calnav a{border:1px solid var(--line2);padding:7px 14px;text-decoration:none;margin-left:8px;font-size:13px}
.calnav a:hover{border-color:#111}
.cal{width:100%;border-collapse:collapse;table-layout:fixed}
.cal th{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);font-weight:500;padding:6px 0;text-align:center}
.cal td{border:1px solid var(--line);height:66px;vertical-align:top;padding:0}
.cal td.out{background:transparent;border-color:transparent}
.cell{display:block;height:100%;padding:7px 8px;text-decoration:none;position:relative}
.cell .n{font-size:13px;color:var(--dark)}
.cell .dot{position:absolute;left:8px;bottom:7px;font-size:9px;letter-spacing:.14em;text-transform:uppercase}
td.free .cell{background:var(--free)} td.free .dot{color:var(--ok)}
td.part .cell{background:var(--part)} td.part .dot{color:#8a6d1f}
td.full .cell{background:var(--full)} td.full .dot{color:var(--err)}
td.past .cell{background:#f7f7f6;cursor:default}
td.past .cell .n{color:#c4c3bf}
.cell.sel{outline:2px solid #111;outline-offset:-2px}
.legend{display:flex;gap:18px;margin-top:12px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dark);flex-wrap:wrap}
.legend i{display:inline-block;width:12px;height:12px;margin-right:6px;vertical-align:-1px;border:1px solid}
.legend .lf{background:var(--free);border-color:var(--free-b)}
.legend .lp{background:var(--part);border-color:var(--part-b)}
.legend .lx{background:var(--full);border-color:var(--full-b)}

/* ===== panels + forms ===== */
.grid2{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,56px);align-items:start}
@media(max-width:820px){.grid2{grid-template-columns:1fr}}
.panel{border:1px solid var(--line);padding:clamp(18px,2.4vw,28px)}
.panel h3{font-size:12px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:#111;margin:0 0 14px}
label{display:block;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:#5a5a5a;margin:14px 0 6px}
input,select,textarea{width:100%;font-family:inherit;font-size:15px;color:var(--ink);background:#fff;border:1px solid var(--line2);padding:11px 12px;border-radius:0}
input:focus,select:focus,textarea:focus{outline:none;border-color:#111}
textarea{min-height:84px;resize:vertical}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.btn{display:inline-flex;align-items:center;gap:10px;background:transparent;color:#111;border:1px solid #111;padding:11px 22px;
  font-family:inherit;font-size:11px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;text-decoration:none;margin-top:18px;transition:background .3s,color .3s}
.btn:hover{background:#111;color:#fff}
.btn.ghost{background:transparent;color:#111}
.btn.sm{padding:8px 14px;font-size:10px;margin:0}
.btn.danger{border-color:var(--err);color:var(--err)}
.btn.danger:hover{background:var(--err);color:#fff}
.slotlist{margin:2px 0 6px;padding:0;list-style:none}
.slotlist li{border-bottom:1px solid var(--line);padding:8px 0;font-size:14px;display:flex;justify-content:space-between;gap:12px}

/* flashes */
.flash{padding:11px 16px;border:1px solid;margin:16px 0 0;font-size:14px}
.flash.error{border-color:var(--full-b);background:var(--full);color:var(--err)}
.flash.ok{border-color:var(--free-b);background:var(--free);color:var(--ok)}

/* ===== equipment ===== */
.eqcat{margin-top:clamp(26px,3vw,40px)}
.eqcat h3{font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:#111;border-bottom:1px solid #111;padding-bottom:10px;margin:0 0 4px}
.eqrow{display:grid;grid-template-columns:1fr auto auto;gap:16px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}
.eqrow .nm{font-weight:500;font-size:14px}
.eqrow .bl{color:var(--dark);font-size:13px}
.eqrow .rate{color:var(--mute);font-size:11px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.eqrow .avail{font-size:10px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;min-width:96px;text-align:right}
.eqrow .avail.ok{color:var(--ok)} .eqrow .avail.no{color:var(--err)}
.eqrow .qty{width:74px}
.eqrow.dim{opacity:.45}
@media(max-width:600px){.eqrow{grid-template-columns:1fr auto}.eqrow .rate{grid-column:1/-1;margin-top:-8px}}

/* ===== admin ===== */
.adtable{width:100%;border-collapse:collapse;margin-top:8px}
.adtable th,.adtable td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:top}
.adtable th{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);font-weight:500;vertical-align:bottom}
/* the qualifier is not part of the heading, so it drops the caps and the tracking */
.adtable th .sub{display:block;margin-top:3px;text-transform:none;letter-spacing:.02em;font-size:10.5px;color:#a9a8a4}
/* rows read as rows: everything on one baseline, no cell taller than its neighbours */
.adtable tbody td{vertical-align:middle}
.sname{white-space:nowrap;font-size:14px}
.sname .muted{white-space:normal;font-size:11px}
/* the Monday switch and its rate belong side by side; stacked, the input sat 23px below
   the three rate boxes beside it and the row looked broken */
.mon{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.money{display:inline-flex;align-items:center;gap:5px}
.money > i{font-style:normal;color:var(--mute);font-size:12px}
.money input.num{max-width:84px}
@media(max-width:860px){.sname{white-space:normal}}
.pill{display:inline-block;padding:2px 9px;border:1px solid var(--line2);font-size:10px;letter-spacing:.1em;text-transform:uppercase;border-radius:999px}
.pill.pending{background:var(--part);border-color:var(--part-b);color:#8a6d1f}
.pill.confirmed{background:var(--free);border-color:var(--free-b);color:var(--ok)}
.actions form{display:inline}
.payform{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.payform select,.payform input{width:auto;padding:6px 8px;font-size:13px}
.payform input{max-width:110px}
.notewarn{border:1px solid var(--part-b);background:var(--part);padding:12px 16px;font-size:13px;color:#7a5f14;margin:18px 0 0}
.tablewrap{overflow-x:auto}

/* ===== footer: parent wh2-foot ===== */
.wh2-foot{max-width:1760px;margin:0 auto;padding:clamp(30px,4vw,56px) var(--pad);border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 30px;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:#777}
.wh2-foot a{color:#777;text-decoration:none}.wh2-foot a:hover{color:#111}
.wh2-foot .lit-sep{margin:0 8px}
@media(max-width:860px){
  .wh2-foot{flex-direction:column;align-items:flex-start;gap:16px;padding:26px 24px 38px;letter-spacing:.12em;line-height:1.9}
  .wh2-foot > span:last-child{font-size:0;display:flex;flex-direction:column;gap:6px}
  .wh2-foot > span:last-child a{font-size:10.5px;letter-spacing:.12em}
  .wh2-foot > span:first-child{display:contents}
  .wh2-foot .lit-sep{display:none}
  .wh2-foot .lit-name{order:-1}
  .wh2-foot .lit-addr{order:1;opacity:.85}
}
.local-note{font-size:11px;letter-spacing:.04em;text-transform:none;color:#a3a3a3;width:100%}

/* ===== settings + kit pages ===== */
.setblock{border-top:1px solid var(--line);padding:clamp(22px,3vw,36px) 0}
.setblock h2.h2{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.setform{max-width:720px}
/* The rates table is data, not a form column: 720px squeezed six headings into three
   wrapped lines each. It gets room, while the prose inside the form keeps its measure. */
#spaces .setform{max-width:1060px}
#spaces .setform > .hint,#spaces .setform > label{max-width:66ch}
.btns{margin-top:6px}
.inline{display:inline-block;margin-top:12px}
.adv{margin-top:14px;font-size:13px;color:var(--dark)}
.adv summary{cursor:pointer;color:var(--mute);font-size:12px;letter-spacing:.04em}
.choice{margin-top:10px}
.radio{display:block;font-size:15px;letter-spacing:0;text-transform:none;color:var(--ink);margin:16px 0 6px;cursor:pointer}
.radio input{width:auto;margin-right:8px}
.choicebody{margin:0 0 10px 26px;padding:14px 18px 18px;border:1px solid var(--line);background:#fafaf9}
.steps{font-size:14px;color:var(--dark);padding-left:18px;margin:0 0 6px;line-height:1.6}
.steps li{margin-bottom:6px}
.feed{display:inline-block;font-size:12px;background:#fff;border:1px solid var(--line2);padding:6px 8px;margin-top:6px;word-break:break-all}
.check{display:inline-flex;align-items:center;gap:8px;font-size:13px;letter-spacing:0;text-transform:none;margin:0}
.check input{width:auto}
input.num{max-width:110px;font-variant-numeric:tabular-nums}
.checklist{border:1px solid var(--line);padding:16px 20px;margin:22px 0 6px;max-width:620px}
.clhead{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-bottom:10px}
.clitem{display:flex;gap:10px;align-items:baseline;padding:8px 0;border-top:1px solid var(--line);text-decoration:none;font-size:14px;color:var(--ink)}
.clitem .tick{color:var(--mute);width:16px}
.clitem.done{color:var(--mute)}.clitem.done .tick{color:var(--ok)}
.clitem:hover{color:#000}
.kitlist{margin-top:6px}
.kitrow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.kitrow.dim{opacity:.5}
.kitmain{display:grid;grid-template-columns:2fr 1.2fr 90px 90px 2fr;gap:8px;flex:1;min-width:280px}
.kitmain input{padding:8px 10px;font-size:14px}
.kitbtns{display:flex;gap:6px;flex-wrap:wrap}
@media(max-width:760px){.kitmain{grid-template-columns:1fr 1fr}.kitmain input[name=name],.kitmain input[name=blurb]{grid-column:1/-1}}

/* ===== space header: identical to the parent's studio page info block ===== */
.wh2-top{text-align:center;max-width:560px;margin:clamp(6px,1vw,16px) auto clamp(30px,4vw,54px)}
.wh2-name{font-size:clamp(13px,1.3vw,15px);letter-spacing:.24em;text-transform:uppercase;font-weight:600;
  color:#111;margin:0 0 clamp(22px,2.6vw,38px);font-family:'Jost',sans-serif}
.wh2-specs{display:flex;flex-direction:column;gap:clamp(14px,1.9vw,26px)}
.wh2-row{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;line-height:1.7;color:#5a5a5a;text-wrap:balance}
.wh2-row b{font-weight:600;color:#1a1a1a}
.wh2-row a{color:inherit;text-decoration:none}.wh2-row a:hover{color:#000}
@media(max-width:860px){.wh2-top{text-align:left;margin-left:0}}

/* form polish */
/* Labels wrap rather than overflow: nowrap sent a long one straight out past its input,
   with no visible clue anything was wrong. */
.row>div>label{white-space:normal}
/* A note inside a label must not out-shout the label: without this it inherits the
   uppercase and sits at 13px against the label's 10.5px. */
label .muted{font-size:inherit;text-transform:none;letter-spacing:.06em}
.hint.saved{margin-top:6px;color:var(--ok)}
.hint{font-size:12px;color:var(--mute);margin:8px 0 0;line-height:1.5}
.card p{font-family:'Jost',sans-serif;font-size:13px;letter-spacing:.02em;line-height:1.6}

/* ===== booking page: parent studio layout (main left, sticky info right) ===== */
.bookpage{padding-top:clamp(44px,6vw,88px)}
.wh2{display:flex;align-items:flex-start}
.wh2-main{flex:0 1 920px;max-width:920px;min-width:0}
.wh2-main{min-width:0}
.wh2-info{flex:1 1 0;display:flex;justify-content:center;align-self:flex-start;position:sticky;top:150px;text-align:center;padding:6px 20px 0;min-width:300px}
.wh2-info > *{width:100%;max-width:380px}
.wh2-info > .sidecta{width:auto}
.wh2-info{flex-direction:column;align-items:center}
.wh2-info .wh2-top{margin:0 auto}
.sidecta{margin-top:clamp(20px,2.4vw,30px)}
.reqpanel{margin-top:clamp(26px,3.4vw,44px)}
.row3{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:12px}
@media(max-width:860px){
  .wh2{flex-direction:column;gap:26px;margin-right:0}
  .wh2-main{flex:none;max-width:none;width:100%}
  .wh2-info{min-width:0;width:100%;align-items:flex-start;padding:0}
  .wh2-info{position:static;order:-1;text-align:left}
  .wh2-info .wh2-top{margin:0;text-align:left}
  .wh2-info .tabs{justify-content:flex-start!important}
  .sidecta{display:none}
}
@media(max-width:600px){.row3{grid-template-columns:1fr}}

/* Mondays by the hour */
td.hourly.free .cell{background:#eef2f7} td.hourly.free .dot{color:#3d5a80}
.legend .lh{background:#eef2f7;border-color:#c9d4e3}

/* kit inside the studio booking */
.kitadd{border:1px solid var(--line);padding:0 16px;margin-top:18px}
.kitadd summary{cursor:pointer;list-style:none;padding:14px 0;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#111;font-weight:600;display:flex;justify-content:space-between;align-items:center}
.kitadd summary::-webkit-details-marker{display:none}
.kitadd summary::after{content:'+';font-weight:400;font-size:16px}
.kitadd[open] summary::after{content:'−'}
.kitadd .eqcat{margin-top:14px}
.kitadd .eqcat h3{font-size:10px;border-bottom-color:var(--line)}
.kitadd .eqrow{padding:9px 0}
.kitadd .kitfoot{padding:12px 0 16px;font-size:12px;color:var(--mute)}
.kitadd .kitfoot b{color:#111}

/* mobile fixes: inputs never wider than their box (iOS date fields), qty boxes on the right edge */
input,select,textarea{max-width:100%;min-width:0}
input[type=date],input[type=time]{-webkit-appearance:none;appearance:none;display:block;width:100%}
.row>div,.row3>div{min-width:0}
.eqrow{grid-template-columns:1fr auto auto;grid-template-areas:"name rate qty"}
.eqrow>div:first-child{grid-area:name;min-width:0}
.eqrow .rate{grid-area:rate}
.eqrow>div:last-child{grid-area:qty;justify-self:end}
@media(max-width:600px){
  .eqrow{grid-template-columns:1fr auto;grid-template-areas:"name qty" "rate rate";row-gap:6px}
  .eqrow .rate{margin-top:0}
  .eqrow .avail{min-width:0}
}

/* kit photos */
.eqname{display:flex;gap:14px;align-items:center;min-width:0}
.eqname .thumb{width:56px;height:56px;object-fit:cover;border:1px solid var(--line);background:#fff;flex:0 0 auto}
.kitadd .eqname .thumb{width:44px;height:44px}
.kitrow .thumb{width:40px;height:40px;object-fit:cover;border:1px solid var(--line)}

/* kit category filter: chips, swipeable on small screens */
.kitfilter{display:flex;gap:8px;margin:clamp(18px,2.4vw,28px) 0 4px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px}
.kitfilter::-webkit-scrollbar{display:none}
.kitfilter .chip{flex:0 0 auto;border:1px solid var(--line2);background:#fff;color:#555;border-radius:999px;padding:8px 14px;
  font-family:inherit;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:all .2s}
.kitfilter .chip[aria-pressed=true]{background:#111;color:#fff;border-color:#111}
.kitadd .kitfilter{margin-top:10px}

/* - / + quantity stepper */
.stepper{display:inline-flex;align-items:stretch;border:1px solid var(--line2);background:#fff}
.stepper .step{width:36px;border:0;background:transparent;font:400 18px/1 'Jost',sans-serif;color:#111;cursor:pointer;padding:0}
.stepper .step:disabled{color:#c9c9c9;cursor:default}
.stepper .step:not(:disabled):hover{background:#f3f3f1}
.stepper input.qty{width:44px;border:0;border-left:1px solid var(--line2);border-right:1px solid var(--line2);text-align:center;padding:9px 0;-moz-appearance:textfield}
.stepper input.qty::-webkit-outer-spin-button,.stepper input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepper.has{border-color:#111}
.stepper.has input.qty{font-weight:600}

/* honeypot: off screen, never announced */
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* admin: next seven days */
.weekstrip{border:1px solid var(--line);margin-top:22px}
.wshead{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#111;font-weight:600;padding:12px 16px;border-bottom:1px solid var(--line)}
.wsdays{display:grid;grid-template-columns:repeat(7,1fr)}
.wsday{border-right:1px solid var(--line);padding:12px;min-height:96px}
.wsday:last-child{border-right:0}
.wsday.is-today{background:#fafaf8}
.wsdate{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:8px}
.wsday.is-today .wsdate{color:#111;font-weight:600}
.wsitem{font-size:12px;line-height:1.45;padding:7px 0;border-top:1px solid var(--line)}
.wsitem:first-of-type{border-top:0}
.wsitem.kit b{color:#3d5a80}
.wsitem.hold b{color:#8a6d1f}
.wskit{font-size:11px;color:var(--mute);margin-top:3px}
.wsfree{font-size:11px;color:#c9c9c9;letter-spacing:.1em;text-transform:uppercase}
@media(max-width:900px){
  .wsdays{grid-template-columns:1fr}
  .wsday{border-right:0;border-bottom:1px solid var(--line);min-height:0;display:grid;grid-template-columns:92px 1fr;gap:10px;align-items:start}
  .wsday:last-child{border-bottom:0}
  .wsdate{margin:0}
}

/* calendar range picking */
.cal .cell{cursor:pointer}
td.inrange .cell{background:#e6efe4}
td.hourly.inrange .cell{background:#e2eaf3}
.cal .cell.sel{outline:2px solid #111;outline-offset:-2px;position:relative;z-index:1}

/* keep the footer at the bottom on short pages */
html{height:100%}
body{display:flex;flex-direction:column;min-height:100vh}
/* width:100% is load bearing: body is a column flexbox and .wrap has margin:0 auto, and auto
   margins in a flex container's cross axis suppress the stretch. Without it main shrink wraps
   to its content, so the page copy sits inboard of the sub nav instead of lining up with it. */
main.wrap{flex:1 0 auto;width:100%}
.wh2-foot{flex-shrink:0;width:100%}  /* same reason as main.wrap above */

/* admin: read only mirror of the studio calendar. Taller cells than the booking
   calendar because each day lists what is on it rather than just a status colour. */
.calmirror td{height:112px;vertical-align:top}
.calmirror td.is-today{outline:2px solid #111;outline-offset:-2px}
.calmirror td.past{background:#f9f9f8}
.calmirror td.past .mcell .n{color:#b9b8b4}
.calmirror td.past .mitem{opacity:.55}
.mcell{padding:6px 7px;display:flex;flex-direction:column;gap:3px;height:100%;overflow:hidden}
.mcell .n{font-size:12px;color:var(--dark)}
.mcell .tdy{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ok)}
.mitem{font-size:10.5px;line-height:1.35;padding:3px 5px;border-left:3px solid var(--line2);background:#fafaf9;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mitem b{font-weight:600}
.mitem .mtime{display:block;color:var(--mute);font-size:9.5px}
.mitem.booking{border-left-color:#2f6b3a;background:var(--free)}
.mitem.hold{border-left-color:#8a6d1f;background:var(--part)}
.mitem.kit{border-left-color:#3a5a8a;background:#eef1f7}
.mitem.calendar{border-left-color:#6a6a6a;background:#f2f2f1}
.legend i.mk{width:12px;height:12px;border:1px solid var(--line2)}
.legend i.mk.booking{background:var(--free);border-color:var(--free-b)}
.legend i.mk.hold{background:var(--part);border-color:var(--part-b)}
.legend i.mk.kit{background:#eef1f7;border-color:#c3cfe2}
.legend i.mk.calendar{background:#f2f2f1;border-color:#d8d8d6}
@media(max-width:860px){.calmirror td{height:auto;min-height:84px}.mitem{white-space:normal}}

/* kit list upload: drop zone and the review of what it would do */
.dropzone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:clamp(26px,4vw,44px);border:1px dashed var(--line2);background:#fbfbfa;
  text-align:center;cursor:pointer;transition:border-color .2s,background .2s;
  margin:clamp(14px,2vw,20px) 0 0;letter-spacing:0;text-transform:none;color:inherit}
.dropzone:hover,.dropzone.over{border-color:#111;background:#f6f6f4}
.dropzone.has-file{border-style:solid;border-color:var(--ok);background:var(--free)}
.dropzone input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.dzmain{font-size:14px;font-weight:600;color:#111;word-break:break-all}
.dzsub{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.sumrow{display:flex;gap:10px;flex-wrap:wrap;margin:clamp(16px,2vw,22px) 0}
.kitreview th.tick,.kitreview td.tick{width:64px;text-align:center}
.kitreview td{vertical-align:top}
.kitreview .sname{white-space:normal;min-width:180px}
.kitreview .sname .muted{display:block;font-size:11px;margin-top:2px}
.kitreview tr.nochange{color:var(--mute)}
.kitreview tr.nochange .sname{color:var(--mute)}
.tag{display:inline-block;padding:2px 8px;border-radius:999px;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;margin-right:8px}
.tag.new{background:var(--free);color:var(--ok);border:1px solid var(--free-b)}
.tag.upd{background:var(--part);color:#8a6d1f;border:1px solid var(--part-b)}
.diff{list-style:none;margin:8px 0 0;padding:0;font-size:13px;line-height:1.6}
.diff s{color:var(--mute);text-decoration-thickness:1px}
.diff b{font-weight:600}

/* kit hire agreement page */
.waiver{max-width:none}
.wvbox{border:1px solid var(--line);padding:clamp(22px,3.4vw,44px);margin-top:clamp(22px,3vw,34px)}
.wvintro{font-family:'Newsreader',Georgia,serif;font-size:clamp(15px,1.15vw,17px);line-height:1.6;color:#222;margin:0 0 clamp(20px,2.6vw,32px)}
.wvlist{counter-reset:wv;list-style:none;margin:0;padding:0}
.wvlist>li{counter-increment:wv;padding:clamp(16px,2vw,22px) 0;border-top:1px solid var(--line)}
.wvlist>li:first-child{border-top:0;padding-top:0}
.wvlist h3{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#111;font-weight:600;margin:0 0 10px}
.wvlist h3::before{content:counter(wv) ". ";color:var(--mute)}
.wvlist p{font-family:'Newsreader',Georgia,serif;font-size:clamp(14px,1.05vw,16px);line-height:1.6;color:#333;margin:0 0 10px}
.wvlist p:last-child{margin-bottom:0}
.wvsign{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,60px);margin-top:clamp(30px,4vw,48px)}
.wvline{border-bottom:1px solid #111;height:46px}
.wvcap{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-top:8px}
.wvfoot{margin-top:clamp(24px,3vw,36px);text-align:center}
@media(max-width:640px){.wvsign{grid-template-columns:1fr}}

/* Wide screens: the agreement fills the content column, so the clause label moves into a
   left rail and the prose keeps a readable measure instead of running to ~120 characters. */
@media screen and (min-width:1080px){
  .waiver{--wvrail:200px;--wvgap:clamp(28px,3vw,52px)}
  .wvintro{margin-left:calc(var(--wvrail) + var(--wvgap));max-width:74ch}
  .wvlist>li{display:grid;grid-template-columns:var(--wvrail) minmax(0,1fr);column-gap:var(--wvgap)}
  .wvlist>li>h3{grid-column:1;margin:0}
  .wvlist>li>p{grid-column:2;max-width:74ch}
  .wvhint{margin-left:calc(var(--wvrail) + var(--wvgap))}
}
@media print{
  .minbar,.subnav,.wh2-foot,.noprint{display:none!important}
  body{font-size:11pt}
  .wvbox{border:0;padding:0}
  .wvlist>li{break-inside:avoid}
  .waiver{max-width:none}
}

/* signable lines: same look, now you can sign on them */
.wvline{position:relative}
.wvcanvas{display:block;width:100%;height:100%;cursor:crosshair;touch-action:none}
.wvline.signed{border-bottom-color:#111}
.wvclear{display:inline-block;margin-top:6px;border:0;background:none;padding:0;cursor:pointer;
  font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.wvclear:hover{color:#111}
.wvhint{font-size:11px;color:var(--mute);margin:10px 0 0;line-height:1.5}
@media print{.wvcanvas{cursor:default}}

/* agreement tick box */
.agree{display:flex;gap:10px;align-items:flex-start;margin:18px 0 0;font-size:13px;letter-spacing:0;
  text-transform:none;color:#333;line-height:1.5;cursor:pointer}
.agree input{width:18px;height:18px;flex:0 0 auto;margin-top:1px;accent-color:#111}
.agree a{text-decoration:underline;text-underline-offset:3px}
.agreed{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ok)}
/* the privacy line sits with the form, not with the terms tick: a booking is not consent
   based and this must not look like something being agreed to */
.privnote{margin:14px 0 0;max-width:60ch}