*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{--bg:#050506;--fg:#e9e7e2;--mute:#8d8b86;--line:#24231f;--acc:#d9c9a3;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
html{background:var(--bg);color:var(--fg);font-family:var(--serif);font-size:17px;line-height:1.6;-webkit-text-size-adjust:100%}
a{color:inherit}
.k{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
nav{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:calc(18px + env(safe-area-inset-top)) 22px 18px}
nav .mark{font-family:var(--serif);letter-spacing:.42em;font-size:15px;text-decoration:none}
nav .links a{margin-left:20px;text-decoration:none}
nav .links a:hover{color:var(--fg)}

/* hero: phone = full-bleed living piece, text over a soft floor */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end}
.art{position:absolute;inset:0;overflow:hidden;background:#040405}
.art canvas{display:block}
.hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:70%;background:linear-gradient(to top,var(--bg) 30%,rgba(5,5,6,.9) 55%,rgba(5,5,6,0));pointer-events:none;z-index:1}
.hero:before{content:"";position:absolute;left:0;right:0;top:0;height:150px;background:linear-gradient(to bottom,rgba(5,5,6,.85),rgba(5,5,6,0));pointer-events:none;z-index:1}
.copy{text-shadow:0 1px 12px rgba(0,0,0,.6)}.copy .btn{text-shadow:none}
.copy{position:relative;z-index:2;padding:0 22px calc(30px + env(safe-area-inset-bottom))}
h1{font-weight:400;font-size:clamp(44px,13vw,96px);line-height:.95;letter-spacing:.06em}
h1 small{display:block;font-size:.26em;letter-spacing:.32em;margin-top:14px;color:var(--mute)}
.by{margin:18px 0 6px;font-size:18px}
.lede{color:#c9c6bf;max-width:30em}
.btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.btn{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;padding:15px 20px;border:1px solid var(--fg);min-width:44px}
.btn.solid{background:var(--fg);color:var(--bg)}
.btn:hover{border-color:var(--acc)}.btn.solid:hover{background:var(--acc)}
.cap{position:absolute;z-index:3;top:calc(64px + env(safe-area-inset-top));right:22px;text-align:right}
.cap button,.ctl{font:inherit;background:rgba(5,5,6,.55);color:var(--fg);border:1px solid #3a3933;padding:9px 12px;cursor:pointer;margin-left:6px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.cap .id{display:block;margin-bottom:8px;color:#d8d6d0;text-shadow:0 0 6px #000,0 0 12px #000}
#dna{position:absolute;z-index:2;inset:0;padding:110px 22px 40%;font-family:var(--mono);font-size:11px;line-height:1.5;white-space:pre-wrap;word-break:break-all;color:#f4f2ec;text-shadow:0 0 3px #000,0 0 10px #000;opacity:0;transition:opacity .35s;pointer-events:none;overflow:hidden}
#dna .c{color:var(--acc)}
body.code #dna{opacity:1}

section{padding:72px 22px;border-top:1px solid var(--line)}
.wrap{max-width:1080px;margin:0 auto}
h2{font-weight:400;font-size:32px;letter-spacing:.04em;margin:10px 0 22px}
p+p{margin-top:1em}
.cols{display:grid;gap:40px}
dl.facts{display:grid;grid-template-columns:auto 1fr;border-top:1px solid var(--line);margin-top:8px}
dl.facts dt,dl.facts dd{padding:13px 0;border-bottom:1px solid var(--line)}
dl.facts dt{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);padding-right:24px;padding-top:16px}
.note{color:var(--mute);font-size:15px}
footer{padding:40px 22px calc(40px + env(safe-area-inset-bottom));border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}

/* desktop: square living piece beside the words */
@media (min-width:900px){
  html{font-size:18px}
  nav{padding:28px 48px}
  .hero{flex-direction:row;align-items:center;justify-content:space-between;gap:56px;padding:110px 48px 70px;max-width:1400px;margin:0 auto}
  .hero:after,.hero:before{display:none}
  .art canvas{touch-action:none}
  .copy{order:1;flex:1;padding:0;max-width:520px}
  .frame{order:2;position:relative;width:min(58vw,calc(100svh - 180px));aspect-ratio:1;flex:none}
  .art{position:absolute;inset:0}
  .cap{top:auto;bottom:-46px;right:0;left:0;display:flex;justify-content:space-between;align-items:center;text-align:left}
  .cap .id{margin:0}
  #dna{padding:24px;font-size:12px;background:rgba(5,5,6,.35)}
  section{padding:110px 48px}
  .cols{grid-template-columns:1fr 1fr;gap:72px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
}
@media (max-width:899px){.frame{position:absolute;inset:0}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* v4: the living wall, gesture hint, first-visit onboarding */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;margin-top:34px}
.grid a{position:relative;aspect-ratio:1;background:#0a0a0c url(thumbs-wall.jpg) no-repeat;background-size:1500% 1500%;display:block;overflow:hidden}
.grid canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .6s}
.grid a.live canvas{opacity:1}
.grid a i{position:absolute;left:5px;bottom:3px;font:normal 9px var(--mono);letter-spacing:.12em;color:#fff;text-shadow:0 0 4px #000;opacity:.0;transition:opacity .3s;z-index:1}
.grid a:hover i,.grid a:focus i{opacity:.85}
.wallhead{align-items:end}
#st{position:absolute;z-index:3;left:50%;top:calc(70px + env(safe-area-inset-top));transform:translateX(-50%);color:var(--fg);text-shadow:0 0 8px #000;opacity:0;transition:opacity .3s;pointer-events:none}
#st.on{opacity:.9}
#ob{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;background:rgba(5,5,6,.28);cursor:pointer;transition:opacity .6s}
#ob[hidden]{display:none}
#ob.out{opacity:0;pointer-events:none}
#obw{font-family:var(--serif);font-size:clamp(48px,14vw,128px);letter-spacing:.04em;line-height:1;color:var(--fg);text-shadow:0 2px 30px rgba(0,0,0,.7);opacity:0;transition:opacity .5s;text-align:center;padding:0 20px}
#obw.on{opacity:1}
@media (max-width:899px){.art{touch-action:pan-y}}
@media (min-width:900px){.grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}}
@media (max-width:720px){#ob{justify-content:flex-start;padding-top:32vh;background:rgba(5,5,6,.55)}}