/* Cambrian keynote. White page, homepage register: ink on white, hard thin
   rules, Archivo Black display, mono labels. One idea per slide. */
:root{
  --ink:#0d0d0c; --gray:#5b5953; --paper:#f4f3ef; --white:#ffffff;
  --rule:2px solid var(--ink);
  --sans:"Inter",ui-sans-serif,system-ui,sans-serif;
  --display:"Archivo Black","Inter",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--white);color:var(--ink);font-family:var(--sans);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--ink)}
a:hover{text-decoration-thickness:2px}
.wrap{max-width:56rem;margin:0 auto;padding:2.5rem 1.25rem 4rem}

header{border-bottom:var(--rule);padding-bottom:1.1rem;margin-bottom:1.6rem}
header .mark{font-family:var(--display);font-weight:400;font-size:1rem;letter-spacing:.02em;text-transform:uppercase;margin:0 0 .3rem}
header .sub{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gray);margin:0}

/* stage */
.stage{position:relative;aspect-ratio:16/9;background:var(--white);border:var(--rule);overflow:hidden}
.bar{position:absolute;top:0;left:0;height:4px;width:0;background:var(--ink);z-index:6;transition:width .1s linear}

.slide{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:6% 9%;opacity:0;transform:scale(.985);
  transition:opacity .8s ease,transform 1.2s ease;pointer-events:none;background:var(--white)}
.slide.on{opacity:1;transform:scale(1)}
.slide.dark{background:var(--ink);color:var(--white)}
.slide.dark .foot{color:rgba(255,255,255,.65)}

.line{font-family:var(--display);font-weight:400;margin:0;
  font-size:clamp(22px,4.2vw,46px);line-height:1.22;letter-spacing:-.005em;max-width:18ch}
.line em{font-style:normal;background:var(--ink);color:var(--white);padding:0 .18em}
.slide.dark .line em{background:var(--white);color:var(--ink)}
.line.xl{font-size:clamp(26px,5vw,56px)}
.name{font-family:var(--display);font-weight:400;margin:0;font-size:clamp(44px,9vw,104px);letter-spacing:-.01em;line-height:1}
.name.sm{font-size:clamp(20px,3vw,32px);color:var(--gray);margin-bottom:.5rem}
.stat{font-family:var(--display);font-weight:400;margin:0;font-size:clamp(72px,14vw,170px);line-height:1}
#horizon{font-size:clamp(34px,7vw,84px);letter-spacing:-.01em}
.foot{margin:1.1rem 0 0;color:var(--gray);font-size:clamp(12.5px,1.5vw,16px);max-width:46ch;line-height:1.5}

/* proof-writing scenes (3, 7, 9): live typing on dark slides */
.slide[data-i="3"],.slide[data-i="7"],.slide[data-i="9"]{justify-content:center;gap:1.4rem;padding:5% 7%}

/* illustration slides */
.slide.pic img{max-width:min(78%,34rem);max-height:62%;object-fit:contain}
.slide.pic .foot{margin-top:1.2rem}

/* the genius dictionary entry */
.dict{max-width:34rem;text-align:left;border-left:3px solid var(--ink);padding-left:1.1rem}
.dictword{font-family:var(--display);font-size:clamp(20px,3vw,30px);margin:0 0 .5rem}
.dictpos{font-family:var(--mono);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gray);margin-left:.5rem}
.dictbody{font-size:clamp(12px,1.5vw,15px);color:var(--gray);margin:.3rem 0;line-height:1.55}
.towerlist{border-left:3px solid var(--white);padding:.15rem 0 .15rem .9rem;margin-top:.2rem}
.towerrow{font-family:var(--mono);font-size:clamp(10.5px,1.5vw,15px);line-height:1.9;color:var(--white);margin:0;opacity:0;transform:translateY(6px);transition:opacity .6s,transform .6s}
.towerrow.on{opacity:1;transform:none}
.towerrow span{opacity:.7;margin-left:.4rem}
.slide[data-i="10"] .foot{max-width:52ch}
.thm{width:100%;max-width:40rem;text-align:left}
.thmlabel{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55);margin:0 0 .45rem}
.thmcode{margin:0;border-left:3px solid var(--white);padding:.15rem 0 .15rem .9rem;min-height:3.6em}
.thmcode code{font-family:var(--mono);font-size:clamp(10.5px,1.5vw,15px);line-height:1.5;color:var(--white);white-space:pre-wrap;word-break:break-word}
.thmcode code::after{content:"\258B";color:var(--white);animation:blink 1s steps(1) infinite}
.thm.done .thmcode code::after{content:""}
.thmstamp{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--white);margin:.45rem 0 0;opacity:0;transition:opacity .5s}
.thm.done .thmstamp{opacity:1}
@keyframes blink{50%{opacity:0}}

/* play overlay */
.playoverlay{position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.8rem;background:var(--white);transition:opacity .5s}
.playoverlay.hide{opacity:0;pointer-events:none}
.playbtn{font:600 .8rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--white);
  background:var(--ink);border:var(--rule);padding:1rem 1.7rem;cursor:pointer}
.playbtn:hover{opacity:.9}
.playnote{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gray);margin:0}

/* controls */
.controls{display:flex;align-items:center;gap:.7rem;margin-top:1rem}
.controls button{font:500 .68rem var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);background:var(--white);border:1.5px solid var(--ink);padding:.55rem .9rem;cursor:pointer}
.controls button:hover{background:var(--paper)}
.clock{font-family:var(--mono);font-size:.7rem;color:var(--gray);margin-left:auto}

/* prose sections, homepage register */
h2{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  color:var(--gray);border-top:var(--rule);padding-top:1.5rem;margin:2.4rem 0 .8rem}
.body{font-size:.92rem;margin:0}
footer{margin-top:2.4rem;padding-top:1.2rem;border-top:var(--rule);font-size:.9rem;color:var(--gray)}
footer a{color:var(--ink)}

@media (max-width:600px){
  .stage{aspect-ratio:4/5}
  .wrap{padding-top:1.6rem}
}