/* Sixty. Your first hour on a reformer, minute by minute. Hand built, no framework. */

@font-face{font-family:"Sentient";src:url("fonts/sentient-var.woff2") format("woff2");font-weight:200 700;font-style:normal;font-display:swap}
@font-face{font-family:"Sentient";src:url("fonts/sentient-italic-var.woff2") format("woff2");font-weight:200 700;font-style:italic;font-display:swap}
@font-face{font-family:"Supreme";src:url("fonts/supreme-var.woff2") format("woff2");font-weight:100 800;font-display:swap}

:root{
  --espresso:#1E1915;--espresso-2:#2A231E;--espresso-3:#3A312A;
  --cream:#F1E9DC;--cream-2:#B9AA98;--cream-3:#8E8272;
  --verdigris:#86B0A4;--verdigris-deep:#5E8C80;--candle:#E8C9A0;--candle-ink:#2A211A;
  --display:"Sentient",Georgia,serif;--text:"Supreme",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --gutter:clamp(1.25rem,4vw,3rem);--wrap:1160px;--ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--text);font-size:1.0625rem;line-height:1.65;color:var(--cream);background:var(--espresso);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
p,dd,li{text-wrap:pretty}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
strong{font-weight:600}
:focus-visible{outline:3px solid var(--candle);outline-offset:3px}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;top:-100px;left:1rem;z-index:100;background:var(--cream);color:var(--espresso);padding:.75rem 1rem;text-decoration:none}
.skip:focus{top:1rem}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}

.eyebrow{font-family:var(--display);font-style:italic;font-weight:300;font-size:1.1rem;color:var(--verdigris);margin-bottom:.9rem}
.h2{font-family:var(--display);font-weight:300;font-size:clamp(2.2rem,4.6vw,3.9rem);line-height:1.05;letter-spacing:-.015em;text-wrap:balance}
.h2-quiet{font-size:clamp(1.8rem,3.2vw,2.7rem)}
.em{font-style:italic;color:var(--candle)}
.lede{margin-top:1.1rem;color:var(--cream-2);max-width:56ch}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.8rem 1.5rem;border-radius:999px;border:1px solid transparent;font-weight:500;font-size:1rem;text-decoration:none;transition:transform .35s var(--ease),background-color .3s ease,color .3s ease,border-color .3s ease;will-change:transform}
.btn-small{min-height:44px;padding:.55rem 1.1rem;font-size:.92rem}
.btn-candle{background:var(--candle);color:var(--candle-ink)}
.btn-candle:hover{background:#F2D8B4}
.btn-ghost{background:transparent;color:var(--cream);border-color:rgba(241,233,220,.35)}
.btn-ghost:hover{border-color:var(--cream)}
.btn:active{transform:translateY(1px)}
.btn-candle:focus-visible{outline-color:var(--cream)}
.link-under{display:inline-flex;align-items:center;min-height:48px;font-weight:500;text-decoration:none;color:var(--cream);border-bottom:1px solid rgba(241,233,220,.4);padding:.4rem 0;line-height:1.2}
.link-under:hover{border-color:var(--candle)}

/* top */
.top{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;gap:1.5rem;padding:.8rem var(--gutter);color:var(--cream);transition:background .4s ease}
.top.is-scrolled{background:linear-gradient(180deg,rgba(30,25,21,.95) 60%,rgba(30,25,21,0))}
section{scroll-margin-top:5rem}
.mark{font-family:var(--display);font-weight:400;font-size:1.35rem;letter-spacing:.02em;text-decoration:none;margin-right:auto;display:inline-flex;align-items:center;min-height:44px}
.top-nav{display:flex;gap:1.6rem}
.top-nav a{text-decoration:none;font-size:.92rem;font-weight:500;padding:.7rem 0;border-bottom:1px solid transparent;opacity:.9}
.top-nav a:hover{border-color:var(--cream)}
@media (max-width:820px){.top-nav{display:none}}

/* ---------- hero: the room, shimmering under the pointer ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding:6rem 0 3.5rem;overflow:clip}
.hero-photo{position:absolute;inset:0;z-index:0;background:var(--espresso)}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%;display:block;filter:saturate(.85) brightness(.75)}
.hero-photo canvas{position:absolute;inset:0;width:100%;height:100%;display:block;filter:saturate(.85) brightness(.75)}
html.has-shimmer .hero-photo img{opacity:0}
.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,25,21,.4) 0%,rgba(30,25,21,.08) 30%,rgba(30,25,21,.45) 62%,var(--espresso) 100%);pointer-events:none}
.hero-inner{position:relative;z-index:1;width:100%}
.wordmark{font-family:var(--display);font-weight:300;font-size:clamp(5rem,20vw,19rem);line-height:.82;letter-spacing:.06em;color:var(--cream);margin:0 0 .5rem -.04em;display:flex;pointer-events:none;text-shadow:0 20px 60px rgba(0,0,0,.35)}
.wordmark span{display:inline-block;font-variation-settings:"wght" var(--wg,300);transition:font-variation-settings .35s ease;animation:letter 1.2s var(--ease) both;animation-delay:calc(var(--i)*80ms)}
.wordmark span:nth-child(1){--i:0}.wordmark span:nth-child(2){--i:1}.wordmark span:nth-child(3){--i:2}.wordmark span:nth-child(4){--i:3}.wordmark span:nth-child(5){--i:4}
@keyframes letter{from{opacity:0;transform:translateY(.25em);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr);gap:1.5rem 4rem;align-items:end}
.hero-title{font-family:var(--display);font-weight:300;font-size:clamp(1.9rem,3.6vw,3.2rem);line-height:1.05;letter-spacing:-.01em;max-width:18ch}
.hero-title .w{display:inline-block;animation:rise 1s var(--ease) both;animation-delay:calc(.5s + var(--i,0)*80ms)}
.hero-title .w:nth-child(1){--i:0}.hero-title .w:nth-child(2){--i:1}.hero-title .w:nth-child(3){--i:2}
@keyframes rise{from{opacity:0;transform:translateY(.4em);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
.hero-lead{margin-top:.9rem;max-width:46ch;color:var(--cream-2)}
.offer{margin-top:.8rem;font-size:1.05rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:1rem 1.75rem;align-items:center;margin-top:1.2rem}
.next{display:flex;flex-direction:column;gap:.3rem;border-top:1px solid rgba(241,233,220,.35);padding-top:.9rem;font-size:1.05rem;line-height:1.45}
.next-label{font-family:var(--display);font-style:italic;font-weight:300;font-size:1rem;color:var(--verdigris)}
.hint{display:none;position:absolute;right:var(--gutter);top:50%;z-index:1;font-family:var(--display);font-style:italic;font-weight:300;font-size:.95rem;color:rgba(241,233,220,.6);writing-mode:vertical-rl;letter-spacing:.06em;animation:hintfade 1s 2s both}
@keyframes hintfade{from{opacity:0}to{opacity:1}}
html.has-shimmer .hint{display:block}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;gap:1rem}}
@media (max-width:760px){.hero{padding:5.5rem 0 5.5rem}.hero-lead{display:none}.hero-actions .btn{width:100%}.hint{display:none}.wordmark{font-size:clamp(4rem,22vw,6rem)}}
@media (max-height:820px) and (min-width:761px){.hero-lead{display:none}}

/* ---------- the room: torchlight ---------- */
.room{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:clip;background:#0F0C0A;padding:5rem 0 4rem}
.torch{position:absolute;inset:0;z-index:0;--tx:50%;--ty:45%;--tr:220px}
.torch img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block;filter:saturate(.9) brightness(.9);
  -webkit-mask-image:radial-gradient(circle var(--tr) at var(--tx) var(--ty),#000 0%,rgba(0,0,0,.9) 45%,rgba(0,0,0,.34) 100%);mask-image:radial-gradient(circle var(--tr) at var(--tx) var(--ty),#000 0%,rgba(0,0,0,.9) 45%,rgba(0,0,0,.34) 100%)}
.torch.is-lit img{-webkit-mask-image:none;mask-image:none;transition:filter .8s ease}
.torch-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,12,10,.1) 0%,rgba(15,12,10,.1) 55%,rgba(15,12,10,.9) 100%);pointer-events:none}
.room-text{position:relative;z-index:1;max-width:40rem}
.room-top{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}
.room-top .eyebrow{margin-bottom:0}
.facts{display:flex;flex-wrap:wrap;gap:1rem 2.5rem;margin:1.75rem 0 1.5rem}
.facts b{font-family:var(--display);font-weight:300;font-size:2.4rem;line-height:1;margin-right:.4rem;color:var(--candle)}
.facts span{color:var(--cream-2)}
@media (max-width:760px){.room{min-height:88svh}}

/* ---------- the ring ---------- */
.ring{padding:clamp(4rem,9vw,7rem) 0;background:var(--espresso)}
.ring-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:2rem 4rem;align-items:center}
.ring-text{grid-column:1}.dial-wrap{grid-column:2;grid-row:1/3}.pick{grid-column:1}
.day-nav{display:inline-flex;align-items:center;gap:.75rem;margin-top:1.5rem}
.daybtn{width:44px;height:44px;border-radius:50%;border:1px solid rgba(241,233,220,.35);background:transparent;color:var(--cream);font-size:1.1rem}
.daybtn:hover{border-color:var(--cream)}
.day-name{font-family:var(--display);font-size:1.3rem;min-width:8ch;text-align:center}
.pick{margin-top:0;padding-top:1.5rem;border-top:1px solid rgba(241,233,220,.25)}
.pick-time{font-family:var(--display);font-weight:300;font-size:clamp(3rem,6vw,5rem);line-height:1;color:var(--candle);letter-spacing:-.02em}
.pick-name{font-family:var(--display);font-size:1.5rem;margin-top:.4rem}
.pick-meta{color:var(--cream-2);margin:.2rem 0 1rem}
.dial-wrap{position:relative}
.dial{width:100%;max-width:640px;height:auto;display:block;margin:0 auto;touch-action:pan-y;cursor:grab}
#dial-turn{transform-origin:200px 200px}
.dial-notch{fill:var(--candle)}
.dial:active{cursor:grabbing}
.dial-ring{fill:none;stroke:rgba(241,233,220,.16);stroke-width:1.5}
#dial-ticks line{stroke:rgba(241,233,220,.28);stroke-width:1}
#dial-ticks line.h6{stroke:rgba(241,233,220,.6);stroke-width:1.5}
#dial-ticks text{fill:var(--cream-3);font-family:var(--text);font-size:11px;letter-spacing:.04em}
.mark{cursor:pointer}
.mark circle{fill:var(--cream-2);stroke:var(--espresso);stroke-width:2;transition:r .25s ease,fill .25s ease}
.mark circle.hit{fill:transparent;stroke:none}
.mark:hover circle.hit,.mark.is-pick circle.hit,.mark.f circle.hit,.mark.past circle.hit{fill:transparent}
.mark.f circle:not(.hit){fill:var(--candle)}
.mark.past circle:not(.hit){fill:rgba(241,233,220,.25)}
.mark:hover circle:not(.hit),.mark.is-pick circle:not(.hit){r:9;fill:var(--verdigris)}
.mark.f.is-pick circle:not(.hit),.mark.f:hover circle:not(.hit){fill:var(--candle)}
.mark text{fill:var(--cream);font-family:var(--display);font-size:13px;opacity:0;transition:opacity .25s ease}
.mark:hover text,.mark.is-pick text{opacity:1}
.dial-hand{stroke:var(--verdigris);stroke-width:1.5;stroke-linecap:round;transform-origin:200px 200px;transition:transform .6s var(--ease)}
.dial-centre{fill:var(--verdigris)}
.dial-now{fill:var(--cream-3);font-family:var(--display);font-style:italic;font-size:12px}
@media (max-width:900px){.ring-grid{grid-template-columns:1fr}.ring-text,.dial-wrap,.pick{grid-column:1;grid-row:auto}.dial{max-width:420px}}

/* ---------- three words: one line, breaking the heading recipe ---------- */
.three{padding:clamp(3rem,7vw,5.5rem) 0;background:var(--espresso-2)}
.three-line{font-family:var(--display);font-weight:300;font-size:clamp(2.6rem,7vw,6.2rem);line-height:1;letter-spacing:-.02em;color:var(--cream);display:flex;flex-wrap:wrap;justify-content:space-between;gap:.2em 1em;margin:0 0 1.5rem}
.three-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem 3rem;border-top:1px solid rgba(241,233,220,.25);padding-top:1.5rem}
.word h3{font-family:var(--text);font-weight:500;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;color:var(--verdigris);margin-bottom:.35rem}
.word p{color:var(--cream-2);max-width:34ch}
@media (max-width:760px){.three-line{justify-content:flex-start;gap:.1em .5em}.three-grid{grid-template-columns:1fr;gap:1.25rem}}

/* ---------- prices: numbers that arrive ---------- */
.prices{padding:clamp(4rem,9vw,7rem) 0;background:var(--espresso)}
.nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem 3rem;margin-top:2.5rem;border-top:1px solid rgba(241,233,220,.25);padding-top:2rem}
.nums li{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"num cur" "lab lab";column-gap:.5rem;align-items:baseline}
.nums .num{grid-area:num;font-family:var(--display);font-weight:300;font-size:clamp(3rem,6vw,5.2rem);line-height:.95;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.nums li:first-child .num{color:var(--candle)}
.nums .cur{grid-area:cur;font-size:.8rem;letter-spacing:.1em;color:var(--cream-3);align-self:start;padding-top:.5rem}
.nums .lab{grid-area:lab;color:var(--cream-2);margin-top:.35rem}
@media (max-width:760px){.nums{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.75rem 1.5rem}}

/* ---------- teachers: the photo leans ---------- */
.people{padding:clamp(4rem,9vw,7rem) 0;background:var(--espresso-2)}
.people-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:2.5rem 4rem;align-items:center}
.lean{margin:0;perspective:1200px}
.lean img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;filter:saturate(.9) brightness(.9);transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .12s ease;will-change:transform;box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
.lean figcaption{margin-top:.6rem;font-family:var(--display);font-style:italic;font-size:.95rem;color:var(--cream-3)}
.staff{display:grid;gap:1.4rem;margin-top:1.75rem;padding-top:1.5rem;border-top:1px solid rgba(241,233,220,.25)}
.staff dt{font-family:var(--display);font-size:1.4rem}
.staff dd{margin-top:.3rem;color:var(--cream-2);font-size:.98rem}
@media (max-width:900px){.people-grid{grid-template-columns:1fr}}

/* ---------- find + questions ---------- */
.find{padding:clamp(4rem,9vw,7rem) 0;background:var(--espresso-2)}
.find-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3rem 5rem;align-items:start}
.find-grid>div>p:not(.eyebrow){margin-top:1rem;color:var(--cream-2)}
.mapbox{position:relative;margin-top:1.75rem;min-height:min(46vh,380px);border:1px solid rgba(241,233,220,.25);display:flex;align-items:flex-end;background:var(--espresso-3)}
.mapbox-tile{position:absolute;inset:0;background:linear-gradient(112deg,transparent 46%,rgba(241,233,220,.12) 46%,rgba(241,233,220,.12) calc(46% + 2px),transparent calc(46% + 2px)),linear-gradient(28deg,transparent 60%,rgba(241,233,220,.09) 60%,rgba(241,233,220,.09) calc(60% + 2px),transparent calc(60% + 2px)),radial-gradient(ellipse at 40% 45%,rgba(134,176,164,.25),transparent 50%)}
.mapbox-pin{position:absolute;left:44%;top:40%;width:14px;height:14px;border-radius:50%;background:var(--candle);box-shadow:0 0 0 6px rgba(232,201,160,.2)}
.mapbox-card{position:relative;margin:1rem;padding:1rem 1.1rem;background:var(--espresso);border:1px solid rgba(241,233,220,.2);max-width:20rem}
.mapbox-label{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--cream-3)}
.mapbox-addr{margin:.3rem 0 .9rem;line-height:1.45}
.qa .q+.q{margin-top:1.4rem;padding-top:1.4rem;border-top:1px solid rgba(241,233,220,.12)}
.q h3{font-family:var(--display);font-weight:400;font-size:1.25rem;line-height:1.2}
.q p{margin-top:.4rem;color:var(--cream-2);font-size:.98rem}
@media (max-width:900px){.find-grid{grid-template-columns:1fr}}

/* ---------- close + footer ---------- */
.close{padding:clamp(5rem,11vw,9rem) 0;background:var(--espresso)}
.close-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:2rem 4rem;align-items:end}
.close-title{font-family:var(--display);font-weight:300;font-size:clamp(2.6rem,6.4vw,5.6rem);line-height:1;letter-spacing:-.02em;text-wrap:balance}
.close-do p{color:var(--cream-2);max-width:36ch;margin-bottom:1.25rem}
@media (max-width:900px){.close-grid{grid-template-columns:1fr}}
.foot{padding:0 0 calc(2.5rem + 84px);border-top:1px solid rgba(241,233,220,.14);color:var(--cream-2)}
.foot-grid{padding-top:2rem;display:grid;grid-template-columns:auto 1fr;gap:1.5rem 3rem;align-items:start}
.foot-mark{font-family:var(--display);font-size:1.3rem;color:var(--cream)}
.foot-nav{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;font-size:.9rem;justify-self:end}
.foot-nav a{text-decoration:none;padding:.4rem 0}
.foot-nav a:hover{text-decoration:underline;text-underline-offset:.25em}
.foot-note{grid-column:1/-1;font-size:.85rem;max-width:64ch;line-height:1.55}
.foot-credit{grid-column:1/-1;font-size:.85rem}
.foot-credit a{text-decoration:none;font-weight:500;border-bottom:1px solid rgba(245,239,230,.35);display:inline-block;padding:.6rem 0}
.foot-credit .agm-name{color:#F5EFE6}
.foot-credit .agm-media{color:#46A67C}
.foot-credit a:hover{border-color:#46A67C}
@media (min-width:761px){.foot{padding-bottom:2.5rem}}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr}.foot-nav{justify-self:start}}

/* ---------- dock + dialog ---------- */
.dock{visibility:hidden;position:fixed;left:.75rem;right:.75rem;bottom:.75rem;z-index:30;display:none;align-items:center;justify-content:space-between;gap:1rem;padding:.55rem .55rem .55rem 1rem;background:var(--cream);color:var(--espresso);border-radius:999px;transform:translateY(120%);transition:transform .5s var(--ease)}
.dock.is-on{transform:none;visibility:visible}
.dock-text{font-size:.9rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:760px){.dock{display:flex}}
.handoff{border:0;border-radius:16px;padding:0;max-width:min(92vw,30rem);background:var(--espresso-2);color:var(--cream)}
.handoff::backdrop{background:rgba(0,0,0,.6)}
.handoff-inner{padding:2rem;max-width:min(92vw,30rem);display:flex;flex-direction:column;align-items:flex-start;gap:.9rem}
.handoff h2{font-family:var(--display);font-weight:300;font-size:1.7rem;line-height:1.1}
.handoff p{color:var(--cream-2)}
.handoff-small{font-size:.85rem;color:var(--cream-3)}
.handoff .eyebrow{margin-bottom:0}

/* ---------- reveals ---------- */
.rv{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.hero-title .w,.wordmark span,.hint{animation:none}.torch img{-webkit-mask-image:none;mask-image:none}.lean img{transform:none}}
html.is-still .rv{opacity:1;transform:none;transition:none}
html.is-still .hero-title .w{animation:none;opacity:1;transform:none;filter:none}
html.is-still .wordmark span{animation:none;opacity:1;transform:none;filter:none}
html.is-still .torch img{-webkit-mask-image:none;mask-image:none}
html.is-still .hint{animation:none;opacity:1}