/* ============================================================
   10 — OBJECT
   The control case: one form, enormous whitespace, restraint.
   ============================================================ */

@font-face{
  font-family:'Fraunces Var';
  src:url('/vendor/fonts/Fraunces-Variable.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Newsreader Var';
  src:url('/vendor/fonts/Newsreader-Variable.woff2') format('woff2');
  font-weight:200 800;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Newsreader Var';
  src:url('/vendor/fonts/Newsreader-Italic-Variable.woff2') format('woff2');
  font-weight:200 800;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:'Inter Var';
  src:url('/vendor/fonts/Inter-Variable.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  --bg:#f2efe7;
  --ink:#1c1a16;
  --ink-soft:#5a5347;
  --ink-faint:#9a9184;
  --accent:#9a5a3a;
  --line: rgba(28,26,22,.16);
}

*{ box-sizing:border-box; }

html{ background:var(--bg); }

body{
  margin:0;
  min-height:210vh;
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter Var', system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

::selection{ background:var(--ink); color:var(--bg); }

/* ---------- chrome ---------- */

.chrome{
  position:fixed;
  top:22px;
  z-index:5;
  font:500 11px/1 'Inter Var', sans-serif;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink-soft);
  text-decoration:none;
  padding:8px 2px;
}
.chrome--index{ left:24px; }
.chrome--index:hover, .chrome--index:focus-visible{ color:var(--ink); }
.chrome--label{ right:24px; color:var(--ink-faint); pointer-events:none; }

/* ---------- 3D scene layer ---------- */

#scene{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  display:block;
  z-index:0;
  pointer-events:none;
  background:transparent;
}

.vignette{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:radial-gradient(ellipse at 50% 46%, rgba(0,0,0,0) 44%, rgba(20,16,10,.05) 78%, rgba(15,12,8,.12) 100%);
}

.stage{
  position:fixed;
  left:50%;
  top:50%;
  width:min(42vmin, 460px);
  height:min(52vmin, 560px);
  transform:translate(-50%, -50%);
  z-index:2;
  pointer-events:auto;
  cursor:grab;
  background:transparent;
}
.stage:active{ cursor:grabbing; }

/* ---------- layout ---------- */

main{
  position:relative;
  z-index:3;
  pointer-events:none;
}

.frame{
  position:relative;
  min-height:100vh;
  width:100%;
}

.frame--b{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
}

/* ---------- hero text plates ---------- */

.plate{
  position:absolute;
  pointer-events:none;
  transition:opacity .25s linear;
}

.plate--title{
  left:clamp(22px, 6.4vw, 92px);
  bottom:clamp(30px, 8vh, 100px);
  max-width:min(52ch, 62vw);
}

.title{
  margin:0 0 .38em;
  font-family:'Fraunces Var', serif;
  font-weight:340;
  font-variation-settings:'opsz' 144, 'SOFT' 22, 'WONK' 0;
  font-size:clamp(46px, 8.8vw, 128px);
  line-height:.94;
  letter-spacing:-.01em;
  color:var(--ink);
}

.caption{
  margin:0;
  max-width:40ch;
  font-family:'Newsreader Var', serif;
  font-style:italic;
  font-weight:420;
  font-size:clamp(14.5px, 1.5vw, 19px);
  line-height:1.55;
  color:var(--ink-soft);
}

.plate--control{
  right:clamp(22px, 6.4vw, 92px);
  bottom:clamp(30px, 8vh, 100px);
  text-align:right;
  pointer-events:auto;
}

.control__label{
  margin:0 0 .9em;
  font:500 11px/1.3 'Inter Var', sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-faint);
  min-width:18ch;
  transition:opacity .3s ease;
}
.control__label.is-changing{ opacity:0; }

.control__ticks{
  display:flex;
  justify-content:flex-end;
  gap:clamp(14px, 2vw, 22px);
}

.tick{
  appearance:none;
  border:0;
  background:none;
  padding:6px 1px 10px;
  margin:0;
  font:500 13px/1 'Inter Var', sans-serif;
  letter-spacing:.03em;
  color:var(--ink-faint);
  cursor:pointer;
  position:relative;
  min-width:24px;
  min-height:44px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.tick::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background:var(--ink);
  transform:scaleX(0);
  transform-origin:right center;
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
.tick:hover{ color:var(--ink-soft); }
.tick:focus-visible{ outline:1px solid var(--ink-soft); outline-offset:4px; }
.tick[aria-pressed="true"]{ color:var(--ink); }
.tick[aria-pressed="true"]::after{ transform:scaleX(1); transform-origin:left center; background:var(--accent); }

/* ---------- hint ---------- */

.hint{
  position:absolute;
  left:50%;
  top:clamp(22px, 8vh, 72px);
  transform:translateX(-50%);
  margin:0;
  font:500 10.5px/1 'Inter Var', sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-faint);
  opacity:0;
  pointer-events:none;
  transition:opacity 1.1s ease;
}
.hint.is-visible{ opacity:.62; }

/* ---------- second framing ---------- */

.second{
  margin:0;
  max-width:min(30ch, 70vw);
  text-align:center;
  padding:0 24px;
  font-family:'Newsreader Var', serif;
  font-style:italic;
  font-weight:400;
  font-size:clamp(19px, 3vw, 30px);
  line-height:1.45;
  color:var(--ink-soft);
  opacity:0;
  transform:translateY(14px);
  transition:opacity .4s linear, transform .4s linear;
}
.second.is-visible{ opacity:1; transform:translateY(0); }

/* ---------- notes ---------- */

.notes{
  position:relative;
  z-index:4;
  background:var(--bg);
  border-top:1px solid var(--line);
  padding:clamp(64px, 12vh, 140px) clamp(22px, 6.4vw, 92px) clamp(70px, 12vh, 130px);
}

.notes__panel{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(28px, 5vw, 64px);
  max-width:1320px;
  margin:0 auto;
}

.notes__col h2{
  margin:0 0 .8em;
  font:600 11px/1 'Inter Var', sans-serif;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink-faint);
}

.notes__col p{
  margin:0;
  font-family:'Newsreader Var', serif;
  font-weight:380;
  font-size:15.5px;
  line-height:1.66;
  color:var(--ink-soft);
  max-width:44ch;
}

/* ---------- responsive ---------- */

@media (max-width: 720px){
  .plate--title{
    left:22px; right:22px; bottom:auto;
    top:clamp(78px, 15vh, 120px);
    max-width:none;
  }
  .plate--control{
    left:22px; right:22px;
    bottom:26px;
    text-align:left;
  }
  .control__ticks{ justify-content:flex-start; }
  .stage{ top:58%; width:78vmin; height:64vmin; }
  .hint{ top:auto; bottom:96px; }
  .notes__panel{ grid-template-columns:1fr; gap:40px; }
}

@media (min-width: 721px) and (max-width: 1000px){
  .plate--title{ max-width:56vw; }
}