/* =========================================================================
   STUDIO HARRIS 33 — DIRECTION 05 "RADICAL MINIMAL"
   Extreme reduction. Single column. One decision per screen. Enormous
   display type. Near-zero chrome — no nav is visible until you scroll past
   the first viewport. Long scroll of full-viewport sections, each with
   exactly one call to action.
   Mobile-first, authored at 390px. svh units so mobile browser chrome
   doesn't clip a screen.
   ========================================================================= */

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

*{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:300;font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  scroll-snap-type:y proximity;
}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}

/* =========================================================================
   THE SCREEN — the only layout primitive in this direction.
   ========================================================================= */
.screen{
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:96px var(--pad) 84px;scroll-snap-align:start;position:relative;
}
.screen.dark{background:var(--ink);color:var(--bone)}
.screen.brown{background:var(--brown);color:var(--bone)}
.screen.terra{background:var(--terra);color:#fff}
.screen.indigo{background:var(--indigo);color:var(--bone)}
.screen > .in{width:100%;max-width:860px;margin:0 auto}
.screen.auto{min-height:0;padding-top:64px;padding-bottom:64px}

/* tiny screen counter, bottom-right — the only persistent chrome */
.screen .idx{
  position:absolute;right:var(--pad);bottom:26px;
  font-size:10px;letter-spacing:.28em;color:currentColor;opacity:.35;
}

/* ---------- type: enormous, and almost nothing else ---------- */
.huge{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(50px,17vw,150px);line-height:.9;letter-spacing:-.025em;margin:0;
}
.big{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(38px,12vw,92px);line-height:.96;letter-spacing:-.02em;margin:0;
}
.mid{font-family:var(--serif);font-weight:300;font-size:clamp(30px,8vw,54px);line-height:1.04;margin:0}
.huge em,.big em,.mid em{font-style:italic}
.eyebrow{
  font-size:10px;letter-spacing:.36em;text-transform:uppercase;
  opacity:.55;margin:0 0 26px;font-weight:400;
}
.line{font-size:18px;line-height:1.55;opacity:.72;max-width:30ch;margin:26px 0 0;font-weight:300}
.line.wide{max-width:46ch}
.fine{font-size:12.5px;opacity:.5;margin:22px 0 0;max-width:44ch;line-height:1.7}

/* ---------- exactly one CTA per screen ---------- */
.cta{margin-top:40px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:62px;padding:0 34px;border:1px solid currentColor;background:transparent;color:inherit;
  font-family:var(--sans);font-size:12px;letter-spacing:.24em;text-transform:uppercase;font-weight:400;
  text-decoration:none;border-radius:0;transition:background .3s,color .3s;
}
.btn:hover{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.screen.dark .btn:hover,.screen.brown .btn:hover,.screen.terra .btn:hover,.screen.indigo .btn:hover{
  background:var(--bone);color:var(--ink);border-color:var(--bone);
}
.btn.solid{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.btn.solid:hover{background:transparent;color:var(--ink)}
.btn.wide{width:100%;max-width:520px}
.btn.is-done{opacity:.7;pointer-events:none}

/* ---------- reveal nav: nothing until you scroll ---------- */
.revealnav{
  position:fixed;top:0;left:0;right:0;z-index:80;
  background:rgba(244,241,234,.94);backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--hair);
  transform:translateY(-100%);transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
.revealnav[data-shown="1"]{transform:none}
.revealnav .in{height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);max-width:1180px;margin:0 auto}
.revealnav .mk{font-family:var(--serif);font-size:17px;text-decoration:none;letter-spacing:.01em}
.revealnav .mn{background:transparent;border:0;padding:10px 0;font-size:11px;letter-spacing:.24em;text-transform:uppercase}

.drawer{position:fixed;inset:0;z-index:95;background:var(--bone);transform:translateY(-100%);transition:transform .5s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;justify-content:center}
.drawer[data-open="1"]{transform:none}
.drawer nav{padding:0 var(--pad)}
.drawer nav a{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(34px,11vw,64px);line-height:1.24;text-decoration:none}
.drawer nav a em{font-style:italic;opacity:.55}
.drawer .xbtn{position:absolute;top:14px;right:var(--pad);width:44px;height:44px;border:1px solid var(--hair);background:transparent;font-size:17px}

/* ---------- placeholder photography ---------- */
.ph{position:relative;overflow:hidden;background:#EAE5DA}
/* bottom-RIGHT, stacked above the screen counter, so it clears both the
   counter and the fixed "← directions" chip in the bottom-left */
.ph::after{content:attr(data-ph);position:absolute;right:24px;bottom:52px;max-width:66%;text-align:right;font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:rgba(244,241,234,.45)}
.ph.lt::after{color:rgba(26,26,26,.28)}
.ph-dark{background:radial-gradient(110% 80% at 70% 10%,rgba(176,141,79,.18),rgba(176,141,79,0) 58%),linear-gradient(165deg,#241d17,#1A1A1A 48%,#100f0e)}
.ph-brick{background:linear-gradient(180deg,rgba(26,26,26,.34),rgba(26,26,26,.03)),repeating-linear-gradient(0deg,#6b4b39 0 18px,#5d4231 18px 20px),#6b4b39}
.ph-indigo{background:linear-gradient(158deg,#33456f,#1E2A4A 60%,#131c33)}
.ph-brown{background:linear-gradient(158deg,#654b36,#4A3728 62%,#332618)}
.ph-olive{background:linear-gradient(158deg,#818e5c,#66714a 62%,#4b5437)}
.ph-rose{background:linear-gradient(158deg,#d5a0ab,#C08497 60%,#9a6475)}
.ph-bone{background:linear-gradient(158deg,#fcfaf6,#EAE5DA 62%,#dbd3c3)}
.ph-terra{background:linear-gradient(158deg,#cd7358,#B5563C 58%,#8a3f2e)}
.ph-gold{background:linear-gradient(158deg,#d3b374,#B08D4F 58%,#8a6d36)}

/* a screen whose whole background is the photograph */
.screen.plate{padding:0;justify-content:flex-end}
.screen.plate .bg{position:absolute;inset:0}
.screen.plate .in{position:relative;z-index:2;padding:0 var(--pad) 84px;color:var(--bone)}

/* ---------- the single booking control ---------- */
.one{border-top:1px solid var(--hair);padding-top:30px;margin-top:36px}
.screen.dark .one,.screen.indigo .one,.screen.brown .one{border-color:var(--hair-lt)}
.one .meta{display:flex;gap:20px;flex-wrap:wrap;font-size:13px;opacity:.6;margin:0 0 22px}
.guest{display:flex;align-items:center;gap:14px;font-size:16px;margin:0 0 24px;cursor:pointer;opacity:.85}
.guest input{width:26px;height:26px;accent-color:var(--terra);flex:none}
.guest.off{opacity:.4;cursor:not-allowed}
.booked{
  min-height:62px;display:flex;align-items:center;justify-content:center;gap:12px;
  border:1px solid var(--brown);background:var(--brown);color:var(--bone);
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  max-width:520px;padding:0 20px;text-align:center;
}
.screen.indigo .booked,.screen.dark .booked{border-color:var(--bone);background:var(--bone);color:var(--ink)}

/* ---------- intake (one screen, two taps, once ever) ---------- */
.q{margin-bottom:30px}
.q p{font-family:var(--serif);font-size:clamp(24px,6.4vw,38px);line-height:1.14;margin:0 0 18px;font-weight:300}
.opts{display:flex;gap:12px;max-width:520px}
.opt{flex:1;min-height:62px;border:1px solid currentColor;background:transparent;font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.opt[aria-pressed="true"]{background:var(--ink);color:var(--bone);border-color:var(--ink)}
[data-intake] .done{display:none}
[data-intake][data-complete="1"] .q{display:none}
[data-intake][data-complete="1"] .done{display:block}

/* ---------- art: view and collect without leaving the screen ---------- */
.collect{display:none;margin-top:28px}
[data-work][data-open="1"] .collect{display:block}
.collect .price{font-family:var(--serif);font-weight:300;font-size:clamp(30px,8vw,52px);line-height:1;margin:0 0 8px}
.workmeta{font-size:14px;opacity:.65;margin:18px 0 0;line-height:1.7}

/* ---------- swatches ---------- */
.swatches{display:flex;gap:14px;margin:30px 0 10px}
.sw{width:56px;height:56px;border:1px solid var(--hair);background:none;padding:0;position:relative}
.sw i{position:absolute;inset:5px}
.sw[aria-pressed="true"]{border-color:currentColor}
.sw[aria-pressed="true"]::after{content:"";position:absolute;inset:-6px;border:1px solid currentColor}
.swname{font-size:11px;letter-spacing:.24em;text-transform:uppercase;opacity:.55;display:block;margin-bottom:6px}

/* ---------- specs, kept to a single hairline list ---------- */
.specs{list-style:none;margin:32px 0 0;padding:0;font-size:15px;max-width:520px}
.specs li{display:flex;justify-content:space-between;gap:18px;padding:12px 0;border-bottom:1px solid var(--hair);opacity:.75}
.screen.dark .specs li,.screen.indigo .specs li,.screen.brown .specs li,.screen.terra .specs li{border-color:var(--hair-lt)}

/* ---------- newsletter ---------- */
.f{margin-top:34px;display:grid;gap:14px;max-width:520px}
.f input[type=email]{
  min-height:62px;border:0;border-bottom:1px solid currentColor;background:transparent;color:inherit;
  padding:0 2px;font:inherit;font-size:19px;border-radius:0;width:100%;
}
.f input::placeholder{color:currentColor;opacity:.4}
.f input:focus{outline:0;border-bottom-width:2px}

/* ---------- final screen / footer ---------- */
.endnav{display:grid;gap:2px;margin-top:40px;max-width:520px}
.endnav a{
  display:flex;justify-content:space-between;align-items:center;
  text-decoration:none;font-size:17px;padding:16px 0;border-bottom:1px solid var(--hair-lt);
}
.endnav a::after{content:"→";opacity:.5}
.colophon{font-size:11.5px;opacity:.42;line-height:1.8;margin-top:44px;max-width:60ch}

/* ---------- back to directions ---------- */
.backdir{
  position:fixed;left:12px;bottom:12px;z-index:200;background:var(--ink);color:var(--bone);
  text-decoration:none;font-size:10px;letter-spacing:.2em;text-transform:uppercase;padding:10px 14px;
}
.backdir:hover{background:var(--terra)}

/* ---------- reveal ---------- */
[data-fade]{opacity:0;transform:translateY(20px);transition:opacity 1s ease,transform 1s 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}
  html{scroll-behavior:auto}
  body{scroll-snap-type:none}
}