@font-face{font-family:Jost;src:url('fonts/jost-300.ttf') format('truetype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Jost;src:url('fonts/jost-400.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('fonts/cormorant-garamond-300.ttf') format('truetype');font-weight:300;font-style:normal;font-display:swap}

:root{color-scheme:light;--surface:#f5f3ef;--ink:#101214;--secondary:#6e6a63;--side:6vw;--baseline:62dvh;--serif:'Cormorant Garamond',Georgia,serif;--sans:Jost,system-ui,sans-serif}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;background:var(--surface)}
body{color:var(--ink);font-family:var(--sans);font-weight:300;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
button:focus-visible{outline:1px solid var(--ink);outline-offset:6px}
button:focus:not(:focus-visible){outline:none}
::selection{background:#dcd8d0;color:var(--ink)}
.stage{position:relative;isolation:isolate;width:100%;height:100vh;height:100dvh;overflow:hidden;overflow:clip;touch-action:pan-y pinch-zoom}
.light{position:absolute;z-index:-1;left:0;top:0;width:110vmax;height:110vmax;background:radial-gradient(circle,rgba(255,255,255,.86) 0,rgba(255,255,255,.45) 25%,rgba(255,255,255,0) 70.71%);transform:translate3d(calc(65vw - 55vmax),calc(35vh - 55vmax),0);pointer-events:none;will-change:transform}
.masthead{position:absolute;z-index:5;top:calc(6dvh - 16px);left:calc(var(--side) - 12px)}
.wordmark{padding:16px 12px;min-height:48px;background:none;border:0;font-size:13px;font-weight:400;letter-spacing:.42em;line-height:1.4;cursor:pointer;white-space:nowrap}
.copy{position:absolute;z-index:2;left:var(--side);bottom:calc(100dvh - var(--baseline) + 56px);width:42vw;pointer-events:none;transition:opacity 300ms ease;opacity:1}
h1{font-family:var(--serif);font-weight:300;font-size:clamp(44px,7vw,112px);letter-spacing:-.01em;line-height:1;margin:0 0 28px;min-height:2em;display:flex;flex-direction:column;justify-content:flex-end}
h1 span{display:block}
.copy p{font-size:clamp(15px,1.25vw,19px);font-weight:300;line-height:1.5;max-width:34ch;min-height:3em;margin:0;color:var(--secondary);text-wrap:pretty}
.copy-ghost{transition:opacity 300ms ease}
.is-entering{opacity:0}
.drawing{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;transition:opacity 75ms ease}
.thread,.thread-shadow{fill:none;stroke:var(--ink);stroke-width:1.25px;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.thread-shadow{opacity:.22}
.ruler{fill:none;stroke:var(--ink);stroke-width:1;opacity:0;transition:opacity 300ms ease;vector-effect:non-scaling-stroke}
.stage[data-area="3"] .ruler{opacity:.40}
.areas{position:absolute;z-index:4;left:var(--side);top:calc(var(--baseline) - 24px);display:flex;gap:0}
.area{position:relative;display:block;width:132px;height:80px;padding:0;background:none;border:0;cursor:pointer;text-align:left;touch-action:manipulation}
.dot{position:absolute;left:-3.5px;top:20.5px;width:7px;height:7px;border:1px solid var(--ink);border-radius:50%;background:var(--surface);transition:background-color 250ms ease,box-shadow 250ms ease}
.area[aria-pressed="true"] .dot{background:var(--ink);box-shadow:0 0 0 4px var(--surface)}
.area-label{position:absolute;left:0;top:45px;font-size:11px;line-height:1.5;letter-spacing:.18em;font-weight:400;text-transform:uppercase;white-space:nowrap;transition:color 250ms ease;color:var(--secondary)}
.number{margin-right:.55em;letter-spacing:.12em;font-size:9px}
.area:hover .area-label,.area[aria-pressed="true"] .area-label,.area:focus-visible .area-label{color:var(--ink)}
.stem{display:none}
.stage.is-intro .thread{stroke-dasharray:1;stroke-dashoffset:1;animation:draw-line 1400ms cubic-bezier(.2,.7,.1,1) forwards}
.stage.is-intro .thread-shadow{opacity:0}
.stage.is-intro .copy{opacity:0}
.stage.is-intro .areas{opacity:0}
.areas{transition:opacity 300ms ease}
@keyframes draw-line{to{stroke-dashoffset:0}}

@media(max-width:760px){
  :root{--side:24px;--baseline:58dvh}
  .masthead{top:12px;left:12px}
  .wordmark{font-size:12px;letter-spacing:.38em}
  .copy{top:20dvh;bottom:auto;width:calc(100% - 48px)}
  h1{font-size:clamp(44px,8.5vw,64px);margin-bottom:20px;min-height:2em;justify-content:flex-start}
  .copy p{font-size:15px;max-width:32ch;min-height:4.5em;line-height:1.5}
  .areas{left:24px;right:24px;top:calc(var(--baseline) + 40px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
  .area{width:100%;height:80px;text-align:center}
  .dot{left:calc(50% - 3.5px)}
  .stem{display:block;position:absolute;left:50%;top:8px;height:12px;width:1px;background:var(--ink);opacity:.36}
  .area-label{left:0;right:0;top:45px;font-size:10px;letter-spacing:.10em}
  .number{display:none}
  .area[aria-pressed="true"] .dot{box-shadow:0 0 0 5px var(--surface)}
}
@media(min-width:761px) and (max-width:1100px){
  .area{width:clamp(100px,12.9vw,132px)}
  .area-label{letter-spacing:.12em;font-size:10px}
  .number{margin-right:.30em}
}
@media(max-height:600px) and (min-width:761px){
  :root{--baseline:70dvh}
  .copy{bottom:calc(100dvh - var(--baseline) + 32px)}
  h1{font-size:clamp(42px,6vw,76px);margin-bottom:12px}
  .copy p{font-size:15px;min-height:3em}
}
@media(max-height:600px) and (max-width:760px){
  :root{--baseline:63dvh}
  .copy{top:15dvh}
  h1{font-size:clamp(36px,6.5vw,48px);min-height:1em;line-height:.98;margin-bottom:12px}
  .copy p{font-size:13px;min-height:3em;max-width:40ch}
  .areas{top:calc(var(--baseline) + 20px)}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:75ms!important}
  .light{will-change:auto}
  .stage.is-intro .copy,.stage.is-intro .areas{opacity:1}
  .stage.is-intro .thread{stroke-dashoffset:0}
}