/* wip holding page: the site's own type and tokens (css/site.css) so the placeholder looks like the real thing */
@font-face{font-family:'Archivo';font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(../fonts/Archivo-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo';font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(../fonts/Archivo-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-weight:400;font-display:swap;src:url(../fonts/IBMPlexMono-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
:root{--page:#f6f8f7;--text:#000;--line:#e5e5e5;--muted:#5c5c5c;--link:#2b59ff;--orange:#ff4d12;--sans:"Archivo","Helvetica Neue",sans-serif;--mono:"IBM Plex Mono",monospace;color-scheme:light}
@media (prefers-color-scheme:dark){:root{--page:#121116;--text:#eceeed;--line:#2c2b31;--muted:#a4a6a9;--link:#8aa4ff;color-scheme:dark}}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--page)}
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--page);color:var(--text);font:300 16px/1.5 var(--sans)}
a{color:var(--link)}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.nav{display:flex;align-items:center;min-height:66px;padding-inline:clamp(16px,3vw,33px);border-bottom:1px solid var(--line)}
.wordmark{display:flex;align-items:center;gap:12px;font-size:24px}
.wordmark .name{font-weight:100;font-stretch:125%;letter-spacing:-.01em}
.mark{width:30px;height:30px}
main{flex:1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:clamp(24px,5vw,66px);padding:clamp(32px,6vw,66px) clamp(16px,3vw,33px)}
.tag{display:flex;align-items:center;gap:10px;font:400 13px/1 var(--mono);color:var(--muted)}
.tag::before{content:"";width:10px;height:10px;background:var(--orange)}
h1{margin-top:22px;font-weight:100;font-stretch:125%;font-size:clamp(36px,5.6vw,88px);line-height:1.02;letter-spacing:-.02em;max-width:14ch}
.lede{margin-top:28px;max-width:34em;font-size:clamp(17px,2vw,22px)}
.meter{display:flex;align-items:center;gap:12px;margin-top:33px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.cells{display:grid;grid-template-columns:repeat(10,10px);gap:3px}
.cells i{height:13px;border:1px solid var(--text)}
.cells i.on{background:var(--text)}
.contact{margin-top:22px}
.contact a{display:inline-flex;align-items:center;min-height:44px}
.scene{margin:0}
.scene svg{display:block;width:100%;height:auto;color:var(--text);overflow:hidden}
.scene .tape-t{font:400 13px var(--mono);fill:#0f0e12;white-space:pre}
.scene figcaption{margin-top:12px;font:400 13px/1.4 var(--mono);color:var(--muted)}
footer{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:20px clamp(16px,3vw,33px);border-top:1px solid var(--line);font:400 13px/1.4 var(--mono);color:var(--muted)}
@media (max-width:899px){main{grid-template-columns:minmax(0,1fr);align-items:start}}
/* desktop runs at the same 67% density as the real site */
@media (min-width:1200px){html{zoom:.67}body{min-height:calc(100dvh / .67)}.contact a{min-height:66px}:focus-visible{outline-width:3px}}
@media (prefers-reduced-motion:no-preference){
  .cells i.on{animation:on .35s ease both}
  .cells i:nth-child(1){animation-delay:.1s}.cells i:nth-child(2){animation-delay:.2s}.cells i:nth-child(3){animation-delay:.3s}.cells i:nth-child(4){animation-delay:.4s}
  .cells i:nth-child(5){animation-delay:.5s}.cells i:nth-child(6){animation-delay:.6s}.cells i:nth-child(7){animation-delay:.7s}.cells i:nth-child(8){animation-delay:.8s}
  @keyframes on{from{background:transparent}}
}