@font-face{font-family:"Inter Tight";src:url(/assets/fonts/InterTight.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(/assets/fonts/GeistMono.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--white:#F7EEE7;--plum:#381A1F;--simmer:#823F44;--olive:#89855F;--dusty:#8FA2C4;--cobalt:#3C58A8;--edge:clamp(20px,4vw,72px);--gap:clamp(16px,2vw,32px)}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--white);color:var(--plum);font:300 clamp(18px,1.45vw,23px)/1.32 "Inter Tight",system-ui,sans-serif;letter-spacing:-.008em;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
h1,h2,h3{font-weight:300;letter-spacing:-.022em;line-height:1.02;text-wrap:balance}
h1{font-size:clamp(52px,10.4vw,196px);letter-spacing:-.03em;line-height:.98}
h2{font-size:clamp(38px,5.2vw,96px)}
h3{font-size:clamp(23px,1.9vw,32px);line-height:1.1;letter-spacing:-.012em}
ol{list-style:none;padding:0}
button,input{font:inherit;color:inherit}
canvas{display:block;max-width:100%}
.label{font:500 clamp(12px,.95vw,15px)/1.3 "Geist Mono",ui-monospace,monospace;letter-spacing:.02em;text-transform:uppercase}
.quiet{opacity:.68}
.fine{font-size:clamp(14px,1vw,16px);line-height:1.35;opacity:.72}
.grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:var(--gap);padding:clamp(72px,10vw,176px) var(--edge)}
.grid>.label{grid-column:1/-1;margin-bottom:clamp(20px,2.4vw,40px)}
.grid>h1,.grid>h2{grid-column:1/5}
.prose{grid-column:3/6;display:grid;gap:.8em;margin-top:clamp(40px,5vw,88px)}

/* The door */
#open{position:relative;height:100vh;height:100svh;background:var(--olive);overflow:hidden}
#film{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0}
.playing #film{opacity:1}
#door{position:absolute;inset:0;display:grid;grid-template-rows:auto 1fr auto;justify-items:start;padding:var(--edge);color:var(--white);transition:opacity .35s}
.playing #door{opacity:0;pointer-events:none}
.logo{width:clamp(120px,14vw,220px);height:auto;display:block}
.clock{align-self:center;justify-self:center;display:grid;justify-items:center;gap:clamp(12px,1.4vw,20px);text-align:center}
.time{font:400 clamp(72px,12vw,200px)/1 "Geist Mono",ui-monospace,monospace;letter-spacing:-.03em}
#clockin{margin:clamp(16px,2.4vw,36px) 0 0;padding:.72em 1.5em;border:1.5px solid currentColor;border-radius:6px;background:none;cursor:pointer;font:500 clamp(16px,1.3vw,20px)/1 "Geist Mono",ui-monospace,monospace;letter-spacing:.02em;text-transform:uppercase;transition:background-color .15s,color .15s,transform .08s}
#clockin:hover,#clockin:focus-visible{background:var(--white);color:var(--plum);outline:none}
#clockin:active{transform:translateY(3px)}
#clockin span{display:inline-block;margin-right:.3em}
#onward{position:absolute;right:var(--edge);bottom:var(--edge);color:var(--plum);text-decoration:none;opacity:0;pointer-events:none;transition:opacity .6s}
.ended #onward{opacity:1;pointer-events:auto}

/* Talk to the lead */
#try{row-gap:clamp(36px,5vw,88px);padding-top:0;align-items:start}
#try>h2{grid-column:1/-1;color:var(--cobalt)}
#try>.label{margin-bottom:calc(-1*clamp(16px,3vw,56px))}
.screen{grid-column:1/3;border:1px solid var(--plum);padding:clamp(14px,1.6vw,24px);display:grid;gap:10px;background:var(--white);container-type:inline-size}
.bar{display:flex;justify-content:space-between;font-weight:600;font-size:clamp(11px,.85vw,14px);letter-spacing:0;text-transform:uppercase}
.bar.small{font-weight:500}
.pills{display:grid;grid-template-columns:repeat(4,1fr) 10px repeat(8,1fr);gap:0;font:500 clamp(9px,.7vw,11px)/1.8 "Geist Mono",ui-monospace,monospace;text-align:center}
.pills i{font-style:normal;border-block:1px solid var(--plum)}
.pills i:first-child,.pills b+i{border-left:1px solid var(--plum);border-radius:8px 0 0 8px}
.pills i:nth-child(4),.pills i:last-child{border-right:1px solid var(--plum);border-radius:0 8px 8px 0}
.pills .on{background:var(--olive);color:var(--white)}
.timer{background:var(--simmer);color:var(--white);border-radius:4px;text-align:center;font:500 clamp(46px,16cqw,92px)/1.14 "Geist Mono",ui-monospace,monospace;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.work{border:1px solid var(--plum);border-radius:8px;padding:clamp(10px,1.1vw,16px);position:relative;overflow:hidden}
.move{min-height:2.3em;display:grid;align-content:start;font-size:clamp(20px,1.7vw,28px);line-height:1.12}
.move s{font-size:.72em;opacity:.5;text-decoration-color:var(--cobalt);text-decoration-thickness:1.5px}
.move s:empty{display:none}
.move.swapped span{color:var(--cobalt)}
#figure{width:100%;height:auto;margin-top:-8%}
.talk{grid-column:3/6;display:grid;gap:clamp(18px,2vw,30px);align-self:stretch;grid-template-rows:1fr auto auto auto}
#log{display:flex;flex-direction:column;justify-content:flex-end;gap:.5em;min-height:clamp(240px,24vw,420px);font-size:clamp(25px,2.7vw,48px);line-height:1.1;letter-spacing:-.018em}
#log li{max-width:22em}
#log .you{align-self:flex-end;text-align:right;font-size:.62em;line-height:1.2;letter-spacing:-.01em;opacity:.78}
#log .lead{color:var(--cobalt)}
#log .old{font-size:.62em;line-height:1.2;opacity:.5}
#log span{opacity:0;animation:word .24s ease-out forwards}
@keyframes word{from{opacity:0;transform:translateY(.1em)}to{opacity:1;transform:none}}
#log span{display:inline-block}
#chips{display:flex;flex-wrap:wrap;gap:8px;min-height:2.6em}
#chips button{padding:.55em .85em;border:1px solid var(--plum);border-radius:6px;background:none;cursor:pointer;font-size:clamp(15px,1.1vw,18px);line-height:1;transition:background-color .15s,color .15s}
#chips button:hover,#chips button:focus-visible{background:var(--plum);color:var(--white);outline:none}
#say{display:flex;border-bottom:1.5px solid var(--plum)}
#say input{flex:1;min-width:0;padding:.55em 0;border:0;background:none;outline:none;font-size:clamp(17px,1.3vw,21px)}
#say input::placeholder{color:var(--plum);opacity:.55}
#say button{border:0;background:none;cursor:pointer;font:500 clamp(12px,.95vw,15px)/1 "Geist Mono",ui-monospace,monospace;letter-spacing:.02em;text-transform:uppercase}

/* What it adds */
#adds{padding-top:0}
.five{grid-column:1/-1;display:grid;grid-template-columns:subgrid;margin-top:clamp(48px,6vw,104px)}
.five li{display:grid;grid-template-rows:auto auto 1fr;gap:.7em;align-content:start;padding-top:12px;border-top:1px solid var(--plum)}
.five .label{margin-bottom:clamp(20px,4vw,72px)}
.five p{font-size:clamp(17px,1.2vw,20px);line-height:1.28}

/* The room */
#people{background:var(--olive);color:var(--white);padding-top:clamp(40px,6vw,104px)}
#chain{width:100%;height:auto}
#people .grid{padding-top:clamp(40px,5vw,80px)}

/* What it has to earn */
#gaps{padding-bottom:0}
#gaps dl{grid-column:1/-1;margin-top:clamp(48px,6vw,104px)}
#gaps dl div{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:var(--gap);padding:clamp(14px,1.5vw,24px) 0;border-top:1px solid var(--plum)}
#gaps dt{grid-column:1/3;font-size:clamp(23px,1.9vw,32px);line-height:1.1;letter-spacing:-.012em}
#gaps dd{grid-column:3/6;margin:0}

#note .letter{margin-top:0;font-size:clamp(21px,1.95vw,32px);line-height:1.22;letter-spacing:-.012em}

footer{display:grid;justify-items:center;text-align:center;gap:10px;padding:clamp(48px,7vw,120px) var(--edge) var(--edge)}
.mark{width:clamp(160px,20vw,300px);height:auto;margin-bottom:clamp(24px,3vw,48px)}
footer .fine{max-width:62ch;margin-top:clamp(56px,7vw,112px);font-size:13px}

@media (max-width:760px){
  .grid{grid-template-columns:minmax(0,1fr)}
  .grid>h1,.grid>h2,.prose,.screen,.talk,.five,#gaps dl{grid-column:1/-1}
  .prose{margin-top:32px}
  .five{display:grid;grid-template-columns:minmax(0,1fr);row-gap:32px}
  .five .label{margin-bottom:0}
  #gaps dl div{grid-template-columns:minmax(0,1fr);row-gap:8px}
  #gaps dt,#gaps dd{grid-column:1}
  #log{min-height:200px}
  .talk{grid-template-rows:auto}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}#log span{animation:none;opacity:1}}