/* =========================================================================
   STUDIO HARRIS 33 — DIRECTION 02 "COMMERCE FIRST"
   The mat is the hero, not the studio. Product-detail architecture:
   announcement bar -> PDP above the fold -> product rails -> the studio as
   supporting content. Mobile-first, authored at 390px.
   ========================================================================= */

:root{
  --bone:#F4F1EA;
  --bone-2:#EAE5DA;
  --ink:#1A1A1A;
  --brown:#4A3728;
  --indigo:#1E2A4A;
  --terra:#B5563C;
  --gold:#B08D4F;
  --rule:rgba(26,26,26,.14);
  --rule-lt:rgba(244,241,234,.22);
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  --pad:20px;
  --bar:34px;   /* announcement bar */
  --hdr: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:15.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding-bottom:0;
}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}

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

/* ---------- type ---------- */
.d1{font-family:var(--serif);font-weight:400;font-size:clamp(34px,9vw,62px);line-height:1.02;letter-spacing:-.02em;margin:0}
.d2{font-family:var(--serif);font-weight:400;font-size:clamp(26px,6.4vw,42px);line-height:1.08;letter-spacing:-.015em;margin:0}
.d3{font-family:var(--serif);font-weight:400;font-size:clamp(19px,4.6vw,25px);line-height:1.2;margin:0}
.eyebrow{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--brown);margin:0 0 12px;font-weight:500}
.eyebrow.lt{color:rgba(244,241,234,.62)}
.body{font-size:15.5px;line-height:1.68;color:#3b3830;max-width:58ch}
.small{font-size:12.5px;color:#6f6a60;line-height:1.6}
.note{font-size:11.5px;color:#8a8378;line-height:1.7;margin-top:14px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:54px;padding:0 26px;border:1px solid var(--ink);background:var(--ink);color:var(--bone);
  font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;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.terra:hover{background:#98452F;border-color:#98452F}
.btn.wide{width:100%}
.btn.sm{min-height:44px;padding:0 18px;font-size:11px}
.btn.is-done{background:var(--brown);border-color:var(--brown);pointer-events:none}
.link{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;border-bottom:1px solid currentColor;padding-bottom:3px}
.link.terra{color:var(--terra)}

/* ---------- persistent drop banner ---------- */
.announce{
  position:sticky;top:0;z-index:70;height:var(--bar);background:var(--indigo);color:var(--bone);
  display:flex;align-items:center;overflow:hidden;
}
.announce .track{
  display:flex;gap:44px;white-space:nowrap;padding-left:var(--pad);
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
}
.announce b{font-weight:500;color:#d9c79a}
.announce a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* ---------- header ---------- */
.hdr{position:sticky;top:var(--bar);z-index:65;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:16px;font-weight:400;letter-spacing:-.01em;text-decoration:none;line-height:1.05}
.mark b{font-weight:600;display:block}
.mark span{font-family:var(--sans);font-size:8px;letter-spacing:.26em;color:var(--brown)}
.nav{display:none;gap:26px}
.nav a{text-decoration:none;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;padding:6px 0;border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current]{border-bottom-color:var(--ink)}
.hdr .right{display:flex;align-items:center;gap:8px}
.bag{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 14px;border:1px solid var(--ink);text-decoration:none;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.burger{width:40px;height:40px;border:1px solid var(--rule);background:transparent;display:grid;place-content:center;gap:5px;padding:0}
.burger i{display:block;width:16px;height:1px;background:var(--ink)}
@media(min-width:900px){
  .nav{display:flex}
  .burger{display:none}
}

.drawer{position:fixed;inset:0;z-index:90;background:var(--bone);transform:translateX(100%);transition:transform .4s cubic-bezier(.2,.8,.2,1);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:16px var(--pad);flex:1;overflow:auto}
.drawer nav a{display:flex;justify-content:space-between;align-items:center;font-size:19px;text-decoration:none;border-bottom:1px solid var(--rule);padding:16px 0}
.drawer nav a::after{content:"→";color:#9a9287}
.xbtn{width:40px;height:40px;border:1px solid var(--rule);background:transparent;font-size:15px}

/* ---------- placeholder photography ---------- */
.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:10px;max-width:70%;text-align:right;font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(244,241,234,.5)}
.ph.lt::after{color:rgba(26,26,26,.3)}
.ph-indigo{background:linear-gradient(155deg,#33456f 0%,#1E2A4A 60%,#131c33 100%)}
.ph-brown{background:linear-gradient(155deg,#654b36 0%,#4A3728 62%,#332618 100%)}
.ph-olive{background:linear-gradient(155deg,#818e5c 0%,#66714a 62%,#4b5437 100%)}
.ph-rose{background:linear-gradient(155deg,#d5a0ab 0%,#C08497 60%,#9a6475 100%)}
.ph-bone{background:linear-gradient(155deg,#fcfaf6 0%,#EAE5DA 62%,#dbd3c3 100%)}
.ph-dark{background:linear-gradient(160deg,#241d17 0%,#1A1A1A 50%,#100f0e 100%)}
.ph-terra{background:linear-gradient(155deg,#c96f53 0%,#B5563C 60%,#8c4030 100%)}
.ph-brick{background:linear-gradient(180deg,rgba(26,26,26,.34),rgba(26,26,26,.04)),repeating-linear-gradient(0deg,#6b4b39 0 16px,#5d4231 16px 18px),#6b4b39}

/* =========================================================================
   PDP HERO — the whole point of this direction.
   At 390px the visitor sees: product shot, name, price, tagline, four
   colorways and Add to Bag WITHOUT scrolling past the shot.
   ========================================================================= */
.pdp{padding-top:0}
.pdp .shot{height:44svh;min-height:250px;max-height:420px}
.pdp .info{padding:22px var(--pad) 26px}
.pdp .name{font-family:var(--serif);font-size:clamp(28px,7.6vw,40px);line-height:1.04;letter-spacing:-.02em;margin:0 0 6px}
.pdp .tagline{font-size:15px;color:var(--brown);margin:0 0 14px}
.pdp .price{font-size:22px;font-weight:500;margin:0 0 18px;letter-spacing:-.01em}
.pdp .price s{color:#9a9287;font-weight:400;font-size:16px;margin-left:8px}
.pdp .buyrow{display:grid;gap:10px;margin-top:18px}
.pdp .trust{display:flex;gap:18px;flex-wrap:wrap;margin-top:16px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#6f6a60}
@media(min-width:900px){
  .pdp .in{display:grid;grid-template-columns:1.15fr 1fr;gap:0;align-items:stretch;max-width:1240px;margin:0 auto}
  .pdp .shot{height:auto;max-height:none;min-height:620px}
  .pdp .info{padding:64px 44px 64px 48px;align-self:center;max-width:560px}
  .pdp .buyrow{grid-template-columns:1fr 1fr}
  .pdp .buyrow .btn.wide{width:100%}
}

/* colorway swatches */
.swline{display:flex;justify-content:space-between;align-items:baseline;margin:6px 0 10px}
.swline .lbl{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#6f6a60}
.swline .cur{font-size:13px;font-weight:500}
.swatches{display:flex;gap:10px}
.sw{width:52px;height:52px;border:1px solid var(--rule);background:none;padding:0;position:relative}
.sw i{position:absolute;inset:4px}
.sw[aria-pressed="true"]{border-color:var(--ink)}
.sw[aria-pressed="true"]::after{content:"";position:absolute;inset:-5px;border:1px solid var(--ink)}

/* specs */
.specs{list-style:none;margin:22px 0 0;padding:20px 0 0;border-top:1px solid var(--rule);font-size:13.5px;color:#5d584f}
.specs li{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid var(--rule)}

/* sticky mobile buy bar */
.stickybuy{
  position:fixed;left:0;right:0;bottom:0;z-index:75;background:var(--bone);
  border-top:1px solid var(--rule);padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));
  display:flex;gap:12px;align-items:center;transform:translateY(110%);transition:transform .3s ease;
}
.stickybuy[data-shown="1"]{transform:none}
.stickybuy .t{flex:1;min-width:0}
.stickybuy .t b{display:block;font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stickybuy .t span{font-size:11.5px;color:#6f6a60}
@media(min-width:900px){.stickybuy{display:none}}

/* ---------- section ---------- */
.sec{padding:52px 0}
.sec.tight{padding:34px 0}
.sec.dark{background:var(--ink);color:var(--bone)}
.sec.dark .body{color:rgba(244,241,234,.72)}
.sec.dark .small,.sec.dark .note{color:rgba(244,241,234,.5)}
.sec.navy{background:var(--indigo);color:var(--bone)}
.sec.navy .body{color:rgba(244,241,234,.75)}
.sechead{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:22px;flex-wrap:wrap}

/* ---------- horizontal product rail (the Nike-store move) ---------- */
.rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:8px;margin:0 calc(var(--pad) * -1);padding-left:var(--pad);padding-right:var(--pad)}
.rail::-webkit-scrollbar{height:2px}
.rail::-webkit-scrollbar-thumb{background:var(--rule)}
.card{flex:0 0 74%;max-width:320px;scroll-snap-align:start;text-decoration:none;display:block}
.card .img{height:230px;margin-bottom:12px}
.card h4{font-size:15px;font-weight:500;margin:0 0 3px}
.card .m{font-size:12.5px;color:#6f6a60;margin:0 0 10px}
.card .pr{font-size:15px;font-weight:500;margin:0 0 12px}
@media(min-width:760px){
  .rail{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;overflow:visible;margin:0;padding:0}
  .card{max-width:none}
  .card .img{height:300px}
}
@media(min-width:1080px){.rail.four{grid-template-columns:repeat(4,1fr)}}

/* ---------- benefit trio ---------- */
.trio{display:grid;gap:0;border-top:1px solid var(--rule)}
.trio div{padding:20px 0;border-bottom:1px solid var(--rule)}
.trio .k{font-family:var(--serif);font-size:19px;margin:0 0 5px}
.trio p{margin:0;font-size:14px;color:#5d584f}
@media(min-width:760px){
  .trio{grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
  .trio div{background:var(--bone);padding:26px 22px;border:0}
}

/* ---------- class strip (studio as supporting content) ---------- */
.strip{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--pad) * -1);padding:0 var(--pad) 8px}
.slot{
  flex:0 0 200px;scroll-snap-align:start;border:1px solid var(--rule-lt);padding:16px;
  display:flex;flex-direction:column;gap:8px;
}
.slot .d{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(244,241,234,.6)}
.slot .t{font-family:var(--serif);font-size:24px;line-height:1}
.slot .n{font-size:13.5px;color:rgba(244,241,234,.85)}
.slot .s{font-size:11px;color:rgba(244,241,234,.55);margin-bottom:4px}
.slot .btn{min-height:46px;font-size:11px}
@media(min-width:900px){
  .strip{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;overflow:visible;margin:0;padding:0}
  .slot{flex:auto}
}

/* ---------- booking rows (this direction keeps them compact + commercial) ---------- */
.memberbar{display:flex;justify-content:space-between;align-items:center;gap:14px;border:1px solid var(--ink);padding:14px 16px;flex-wrap:wrap}
.memberbar .who{font-weight:500;font-size:15px}
.memberbar .credits{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--brown)}
.memberbar .credits b{color:var(--ink)}
.daygrp{margin-top:28px}
.daygrp h3{font-family:var(--serif);font-weight:400;font-size:22px;margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--rule)}
.cls{border:1px solid var(--rule);padding:16px;margin-bottom:10px;display:grid;gap:12px}
.cls .row1{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.cls .time{font-family:var(--serif);font-size:23px;line-height:1}
.cls .price{font-size:13.5px;font-weight:500}
.cls .name{font-size:15px;margin:0}
.cls .tags{display:flex;flex-wrap:wrap;gap:7px}
.tag{font-size:10px;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--rule);padding:5px 8px;color:#5f5a51}
.tag.mat{border-color:rgba(30,42,74,.4);color:var(--indigo)}
.tag.ref{border-color:rgba(181,86,60,.45);color:var(--terra)}
.tag.low{border-color:rgba(181,86,60,.45);color:var(--terra)}
.tag.full{background:var(--rule);color:#6f6a60}
.cls .guest{display:flex;align-items:center;gap:10px;font-size:13.5px;cursor:pointer;color:#4a463f}
.cls .guest input{width:22px;height:22px;accent-color:var(--indigo);flex:none}
.cls .guest.off{opacity:.45;cursor:not-allowed}
.booked{border:1px solid var(--brown);background:var(--brown);color:var(--bone);min-height:52px;display:flex;align-items:center;justify-content:center;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}
@media(min-width:760px){
  .cls{grid-template-columns:1fr 230px;align-items:center}
  .cls .act{grid-column:2;grid-row:1/span 3}
}

/* intake */
.intake{border:1px solid var(--indigo);background:rgba(30,42,74,.05);padding:20px 18px}
.intake h4{font-family:var(--serif);font-weight:400;font-size:21px;margin:0 0 5px}
.intake .once{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--indigo);margin:0 0 16px}
.q{border-top:1px solid var(--rule);padding:14px 0}
.q p{margin:0 0 10px;font-size:15.5px}
.opts{display:flex;gap:10px}
.opt{flex:1;min-height:50px;border:1px solid var(--ink);background:transparent;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.opt[aria-pressed="true"]{background:var(--ink);color:var(--bone)}
.intake .done{display:none;font-size:13.5px;color:var(--indigo)}
.intake[data-complete="1"] .q,.intake[data-complete="1"] .once{display:none}
.intake[data-complete="1"] .done{display:block}

/* ---------- art, commerce-styled ---------- */
.works{display:grid;gap:30px}
.work .img{height:300px;margin-bottom:14px}
.work h4{font-family:var(--serif);font-weight:400;font-size:22px;margin:0 0 8px}
.work dl{margin:0 0 12px;font-size:12.5px;color:#6f6a60;display:grid;grid-template-columns:auto 1fr;gap:1px 12px}
.work dt{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:#8f887c;padding-top:3px}
.work dd{margin:0}
.work .pr{font-size:17px;font-weight:500;margin:0 0 12px}
.work .acts{display:grid;gap:9px}
.collect{display:none;border-top:1px solid var(--rule);margin-top:14px;padding-top:14px}
.work[data-open="1"] .collect{display:block}
@media(min-width:760px){.works{grid-template-columns:1fr 1fr;gap:40px 30px}.work .acts{grid-template-columns:1fr 1fr}}
@media(min-width:1080px){.works{grid-template-columns:repeat(3,1fr)}}

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

/* ---------- footer ---------- */
.ftr{background:var(--ink);color:var(--bone);padding:48px 0 96px}
.ftr .cols{display:grid;gap:26px}
.ftr h5{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:rgba(244,241,234,.5);margin:0 0 12px;font-weight:500}
.ftr a{display:block;text-decoration:none;font-size:14.5px;padding:4px 0;color:rgba(244,241,234,.85)}
.ftr .mark{color:var(--bone)}
.ftr .legal{margin-top:32px;padding-top:20px;border-top:1px solid var(--rule-lt);font-size:11px;color:rgba(244,241,234,.42);line-height:1.8}
@media(min-width:760px){.ftr .cols{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}}

/* ---------- page head ---------- */
.phead{padding:40px 0 32px;border-bottom:1px solid var(--rule)}

/* ---------- back to directions ---------- */
.backdir{position:fixed;left:10px;bottom:10px;z-index:200;background:var(--ink);color:var(--bone);text-decoration:none;font-size:10px;letter-spacing:.16em;text-transform:uppercase;padding:9px 12px;border:1px solid rgba(244,241,234,.25)}
.backdir:hover{background:var(--indigo)}
/* the chip lives in the bottom-left corner, so the sticky buy bar keeps
   that corner clear on mobile */
.stickybuy{padding-left:118px}
@media(min-width:900px){.stickybuy{padding-left:var(--pad)}}

/* ---------- reveal ---------- */
[data-fade]{opacity:0;transform:translateY(14px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
[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}}