/* =========================================================================
   STUDIO HARRIS 33 — DIRECTION 03 "BOOKING LED"
   The schedule IS the homepage. This direction is tuned for the top of the
   client's audience range: the largest type and the biggest tap targets of
   the five, high contrast, nothing decorative between you and the button.

   TAP TARGET FLOOR: 56px. Primary booking button: 64px.
   BODY TEXT FLOOR:  17px (18px on the schedule itself).
   ========================================================================= */

:root{
  --bone:#F4F1EA;
  --bone-2:#EAE5DA;
  --ink:#1A1A1A;
  --brown:#4A3728;
  --indigo:#1E2A4A;
  --terra:#B5563C;
  --gold:#B08D4F;
  --rule:rgba(26,26,26,.18);
  --rule-lt:rgba(244,241,234,.24);
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  --pad:18px;
  --hdr:60px;
  --tabs:58px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bone);color:var(--ink);
  font-family:var(--sans);font-weight:400;font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}

.wrap{max-width:900px;margin:0 auto;padding:0 var(--pad)}
.wrap.wide{max-width:1180px}

/* ---------- type ---------- */
.d1{font-family:var(--serif);font-weight:400;font-size:clamp(40px,11vw,68px);line-height:1;margin:0}
.d2{font-family:var(--serif);font-weight:400;font-size:clamp(29px,7.4vw,44px);line-height:1.06;margin:0}
.d3{font-family:var(--serif);font-weight:400;font-size:clamp(22px,5.2vw,29px);line-height:1.14;margin:0}
.eyebrow{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--brown);margin:0 0 12px;font-weight:500}
.eyebrow.lt{color:rgba(244,241,234,.68)}
.body{font-size:17px;line-height:1.65;color:#35322c;max-width:56ch}
.small{font-size:14px;color:#5f5a51}
.note{font-size:13.5px;color:#6f6a60;line-height:1.65;margin-top:16px}

/* ---------- buttons: big, square, unambiguous ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:60px;padding:0 28px;border:2px solid var(--ink);background:var(--ink);color:var(--bone);
  font-size:16px;font-weight:500;letter-spacing:.02em;text-decoration:none;border-radius:0;
  transition:background .2s,color .2s,border-color .2s;
}
.btn:hover{background:var(--indigo);border-color:var(--indigo)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--bone)}
.btn.on-dark{background:var(--bone);border-color:var(--bone);color:var(--ink)}
.btn.on-dark:hover{background:transparent;color:var(--bone)}
.btn.terra{background:var(--terra);border-color:var(--terra);color:#fff}
.btn.wide{width:100%}
.btn.big{min-height:66px;font-size:18px}
.btn.sm{min-height:52px;font-size:15px;padding:0 20px}
.btn[disabled],.btn.is-off{background:transparent;color:#8a8378;border-color:var(--rule);pointer-events:none}
.link{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-size:15px;font-weight:500;border-bottom:2px solid currentColor;padding-bottom:3px}
.link.terra{color:var(--terra)}

/* ---------- header: minimal, out of the way ---------- */
.hdr{position:sticky;top:0;z-index:70;background:var(--bone);border-bottom:1px solid var(--rule)}
.hdr .in{height:var(--hdr);display:flex;align-items:center;justify-content:space-between;gap:12px}
.mark{font-family:var(--serif);font-size:20px;text-decoration:none;line-height:1}
.mark span{display:block;font-family:var(--sans);font-size:9px;letter-spacing:.22em;color:var(--brown);margin-top:2px;font-weight:500}
.who{display:flex;align-items:center;gap:10px;border:1px solid var(--rule);padding:8px 12px;min-height:44px}
.who .nm{font-size:14px;font-weight:500;line-height:1.1}
.who .cr{font-size:12px;color:var(--brown);line-height:1.1}
.who .cr b{color:var(--ink);font-size:14px}
.burger{width:46px;height:44px;border:1px solid var(--rule);background:transparent;display:grid;place-content:center;gap:5px;padding:0}
.burger i{display:block;width:18px;height:2px;background:var(--ink)}
.hdr .right{display:flex;align-items:center;gap:8px}

.drawer{position:fixed;inset:0;z-index:95;background:var(--bone);transform:translateY(-100%);transition:transform .38s ease;display:flex;flex-direction:column}
.drawer[data-open="1"]{transform:none}
.drawer .dhead{height:var(--hdr);display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);border-bottom:1px solid var(--rule)}
.drawer nav{padding:8px var(--pad);flex:1}
.drawer nav a{display:flex;align-items:center;min-height:64px;font-size:22px;text-decoration:none;border-bottom:1px solid var(--rule)}
.xbtn{width:46px;height:44px;border:1px solid var(--rule);background:transparent;font-size:18px}

/* ---------- STICKY DAY TABS — the primary navigation of this direction ---------- */
.daytabs{position:sticky;top:var(--hdr);z-index:65;background:var(--bone);border-bottom:1px solid var(--rule)}
.daytabs .in{display:flex;gap:0;height:var(--tabs)}
.daytabs a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  text-decoration:none;border-bottom:3px solid transparent;font-weight:500;
}
.daytabs a b{font-size:16px;font-weight:600}
.daytabs a span{font-size:11.5px;color:#6f6a60;letter-spacing:.04em}
.daytabs a[aria-current]{border-bottom-color:var(--ink)}

/* ---------- intake banner (top of the schedule, once only) ---------- */
.intake{border:2px solid var(--indigo);background:rgba(30,42,74,.06);padding:20px 18px;margin:18px 0}
.intake h4{font-family:var(--serif);font-weight:400;font-size:26px;margin:0 0 4px}
.intake .once{font-size:13px;color:var(--indigo);margin:0 0 16px;font-weight:500}
.q{border-top:1px solid var(--rule);padding:16px 0}
.q p{margin:0 0 12px;font-size:18px}
.opts{display:flex;gap:10px}
.opt{flex:1;min-height:60px;border:2px solid var(--ink);background:transparent;font-size:16px;font-weight:500}
.opt[aria-pressed="true"]{background:var(--ink);color:var(--bone)}
.intake .done{display:none;font-size:16px;color:var(--indigo)}
.intake[data-complete="1"] .q,.intake[data-complete="1"] .once{display:none}
.intake[data-complete="1"] .done{display:block}
/* on wider screens the two questions sit side by side, so the schedule —
   which is the whole point of this direction — stays close to the fold
   even on a first-ever visit */
@media(min-width:820px){
  .intake{display:grid;grid-template-columns:1fr 1fr;gap:0 34px;align-items:start}
  .intake h4,.intake .once,.intake .done{grid-column:1 / -1}
}

/* ---------- THE SCHEDULE ---------- */
.day{padding-top:26px}
.day > h2{font-family:var(--serif);font-weight:400;font-size:34px;margin:0 0 2px;scroll-margin-top:calc(var(--hdr) + var(--tabs) + 10px)}
.day > .dm{font-size:14px;color:#6f6a60;margin:0 0 16px}

.cls{border:1px solid var(--rule);border-left:5px solid var(--indigo);background:#fffdfa;padding:18px 16px;margin-bottom:14px}
.cls.reformer{border-left-color:var(--terra)}
.cls .top{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.cls .time{font-family:var(--serif);font-size:40px;line-height:.95;letter-spacing:-.01em}
.cls .cost{font-size:16px;font-weight:500;white-space:nowrap}
.cls .name{font-size:20px;margin:6px 0 0;font-weight:500}
.cls .tags{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 14px}
.tag{font-size:13px;border:1px solid var(--rule);padding:7px 11px;color:#4f4a42;font-weight:500}
.tag.mat{border-color:rgba(30,42,74,.45);color:var(--indigo)}
.tag.ref{border-color:rgba(181,86,60,.5);color:var(--terra)}
.tag.low{background:rgba(181,86,60,.1);border-color:rgba(181,86,60,.5);color:#8f4230}
.tag.full{background:var(--rule);color:#5f5a51;border-color:transparent}
.cls .guest{display:flex;align-items:center;gap:14px;font-size:16px;padding:14px;border:1px dashed var(--rule);margin-bottom:14px;cursor:pointer}
.cls .guest input{width:28px;height:28px;accent-color:var(--terra);flex:none}
.cls .guest.off{opacity:.5;cursor:not-allowed}
.booked{
  border:2px solid var(--indigo);background:var(--indigo);color:var(--bone);
  min-height:66px;display:flex;align-items:center;justify-content:center;gap:10px;
  font-size:17px;font-weight:500;text-align:center;padding:0 14px;
}
.cls.is-booked{border-left-color:var(--indigo);background:rgba(30,42,74,.04)}
@media(min-width:720px){
  .cls{display:grid;grid-template-columns:1fr 280px;gap:26px;align-items:center;padding:22px 20px}
  .cls .act{grid-column:2;grid-row:1/span 4}
  .cls .time{font-size:46px}
}

/* one-click explainer ribbon */
.ribbon{background:var(--indigo);color:var(--bone);padding:14px var(--pad);font-size:15px;text-align:center}
.ribbon b{font-weight:600}

/* ---------- quiet rails at the bottom ---------- */
.sec{padding:44px 0}
.sec.dark{background:var(--ink);color:var(--bone)}
.sec.dark .body{color:rgba(244,241,234,.75)}
.sec.dark .note,.sec.dark .small{color:rgba(244,241,234,.55)}
.sec.quiet{background:var(--bone-2)}
.sechead{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:20px}

.qrail{display:grid;gap:14px}
.qrow{
  display:flex;align-items:center;gap:16px;text-decoration:none;
  border-top:1px solid var(--rule);padding:16px 0;min-height:76px;
}
.qrow .th{width:62px;height:62px;flex:none}
.qrow .t{flex:1;min-width:0}
.qrow .t b{display:block;font-size:17px;font-weight:500}
.qrow .t span{font-size:14px;color:#6f6a60}
.qrow .pr{font-size:17px;font-weight:500;white-space:nowrap}
.qrow::after{content:"→";font-size:19px;color:#9a9287}
@media(min-width:760px){.qrail{grid-template-columns:1fr 1fr;gap:0 40px}}

/* ---------- placeholders ---------- */
.ph{position:relative;overflow:hidden;background:var(--bone-2)}
/* bottom-RIGHT so it clears the fixed "← directions" chip bottom-left */
.ph::after{content:attr(data-ph);position:absolute;right:12px;bottom:9px;max-width:70%;text-align:right;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,241,234,.55)}
.ph.lt::after{color:rgba(26,26,26,.32)}
.ph-indigo{background:linear-gradient(155deg,#33456f,#1E2A4A 60%,#131c33)}
.ph-brown{background:linear-gradient(155deg,#654b36,#4A3728 62%,#332618)}
.ph-olive{background:linear-gradient(155deg,#818e5c,#66714a 62%,#4b5437)}
.ph-rose{background:linear-gradient(155deg,#d5a0ab,#C08497 60%,#9a6475)}
.ph-bone{background:linear-gradient(155deg,#fcfaf6,#EAE5DA 62%,#dbd3c3)}
.ph-dark{background:linear-gradient(160deg,#241d17,#1A1A1A 50%,#100f0e)}
.ph-terra{background:linear-gradient(155deg,#c96f53,#B5563C 60%,#8c4030)}
.ph-brick{background:linear-gradient(180deg,rgba(26,26,26,.34),rgba(26,26,26,.04)),repeating-linear-gradient(0deg,#6b4b39 0 15px,#5d4231 15px 17px),#6b4b39}

/* ---------- product / art blocks on interior pages ---------- */
.prod{display:grid;gap:24px}
.prod .img{height:320px}
.prod .price{font-size:26px;font-weight:600;margin:0 0 6px}
.prod .tagline{font-size:18px;color:var(--brown);margin:0 0 20px}
.swline{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 10px}
.swline .lbl{font-size:14px;color:#6f6a60}
.swline .cur{font-size:16px;font-weight:500}
.swatches{display:flex;gap:12px;margin-bottom:22px}
.sw{width:60px;height:60px;border:2px solid var(--rule);background:none;padding:0;position:relative}
.sw i{position:absolute;inset:5px}
.sw[aria-pressed="true"]{border-color:var(--ink)}
.specs{list-style:none;margin:22px 0 0;padding:18px 0 0;border-top:1px solid var(--rule);font-size:16px;color:#4f4a42}
.specs li{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--rule)}
@media(min-width:860px){.prod{grid-template-columns:1fr 1fr;gap:44px;align-items:start}.prod .img{height:520px}}

.works{display:grid;gap:30px}
.work .img{height:290px;margin-bottom:14px}
.work h4{font-family:var(--serif);font-weight:400;font-size:27px;margin:0 0 8px}
.work dl{margin:0 0 12px;font-size:15px;color:#5f5a51;display:grid;grid-template-columns:auto 1fr;gap:2px 14px}
.work dt{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#8a8378;padding-top:4px;font-weight:500}
.work dd{margin:0}
.work .pr{font-size:20px;font-weight:600;margin:0 0 14px}
.work .acts{display:grid;gap:10px}
.collect{display:none;border-top:1px solid var(--rule);margin-top:16px;padding-top:16px}
.work[data-open="1"] .collect{display:block}
@media(min-width:760px){.works{grid-template-columns:1fr 1fr;gap:40px 32px}}

/* ---------- newsletter ---------- */
.drop{max-width:560px}
.drop form{margin-top:22px;display:grid;gap:12px}
.drop input[type=email]{min-height:62px;border:2px solid var(--ink);background:transparent;padding:0 16px;font:inherit;font-size:17px;border-radius:0;width:100%}
.drop .fine{font-size:14px;color:#6f6a60;margin:14px 0 0}
@media(min-width:600px){.drop form{grid-template-columns:1fr auto}}
.sec.dark .drop input[type=email]{border-color:rgba(244,241,234,.5);color:var(--bone)}
.sec.dark .drop .fine{color:rgba(244,241,234,.6)}

/* ---------- footer ---------- */
.ftr{background:var(--ink);color:var(--bone);padding:44px 0 92px}
.ftr .cols{display:grid;gap:24px}
.ftr h5{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(244,241,234,.55);margin:0 0 10px;font-weight:500}
.ftr a{display:block;text-decoration:none;font-size:16px;padding:7px 0;color:rgba(244,241,234,.88)}
.ftr .mark{color:var(--bone)}
.ftr .legal{margin-top:30px;padding-top:18px;border-top:1px solid var(--rule-lt);font-size:12.5px;color:rgba(244,241,234,.45);line-height:1.75}
@media(min-width:760px){.ftr .cols{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px}}

.phead{padding:34px 0 26px;border-bottom:1px solid var(--rule)}

.backdir{position:fixed;left:10px;bottom:10px;z-index:200;background:var(--ink);color:var(--bone);text-decoration:none;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;padding:10px 13px;border:1px solid rgba(244,241,234,.3)}
.backdir:hover{background:var(--indigo)}

[data-fade]{opacity:0;transform:translateY(12px);transition:opacity .7s ease,transform .7s ease}
[data-fade][data-in="1"]{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){[data-fade],[data-fade][data-in="1"]{opacity:1;transform:none;transition:none}}