/* Layout concept: the room at night. Dark ground, paper things lit like cards on a desk,
   and one glowing CRT. Light theme is the same room in daylight. */
:root{
  --bg:#e8dcc2; --bg2:#dccfb2; --fg:#2b2018; --muted:#6b5a45; --rule:#2b2018;
  --paper:#f6eedb; --paper-ink:#2b2018; --paper-muted:#6b5a45; --paper-edge:#cbbd9e;
  --red:#b23f31; --yel:#e2b23f; --link:#8a2f24;
  --glass:#061009; --ph:#8dffa0; --ph-dim:#3f8f52; --uncle:#a8322a; --you:#2c3d78;
  --shadow:0 18px 40px rgba(43,32,24,.22);
  --display:"Anton",Impact,"Arial Narrow",sans-serif;
  --body:"Libre Baskerville",Georgia,"Times New Roman",serif;
  --mono:"VT323",ui-monospace,"Courier New",monospace;
  --hand:"Caveat","Segoe Print",cursive;
  --show-night:none; --show-day:block;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#14100c; --bg2:#1d1712; --fg:#efe6cf; --muted:#a8977a; --rule:#efe6cf;
  --red:#d0583f; --yel:#e9c04e; --link:#e9c04e;
  --shadow:0 22px 50px rgba(0,0,0,.55); --show-night:block; --show-day:none; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#14100c; --bg2:#1d1712; --fg:#efe6cf; --muted:#a8977a; --rule:#efe6cf;
  --red:#d0583f; --yel:#e9c04e; --link:#e9c04e;
  --shadow:0 22px 50px rgba(0,0,0,.55); --show-night:block; --show-day:none; color-scheme:dark}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:17px/1.65 var(--body);-webkit-font-smoothing:antialiased}
a{color:var(--link);text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--yel);outline-offset:3px}
img{max-width:100%;height:auto;display:block}
.night{display:var(--show-night)} .day{display:var(--show-day)}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1;letter-spacing:.5px;text-wrap:balance;margin:0}
.label{font:20px/1 var(--mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}

/* header */
.top{border-bottom:3px solid var(--rule)}
.top .wrap{display:flex;align-items:center;gap:24px;padding-block:14px;flex-wrap:wrap}
.brand{font:34px/1 var(--display);color:var(--fg);text-decoration:none;letter-spacing:1px}
.brand span{color:var(--red)}
.nav{display:flex;gap:20px;flex-wrap:wrap;margin-left:auto}
.nav a{font:22px/1 var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--fg);text-decoration:none}
.nav a:hover{color:var(--red)}
.tagline{font:18px/1.15 var(--mono);color:var(--muted);letter-spacing:1px}
.kicker{font:22px/1 var(--mono);letter-spacing:2px;color:var(--red);margin:0 0 14px}
.band{height:10px;background:linear-gradient(90deg,var(--red) 0 50%,var(--yel) 50% 100%)}

/* hero */
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center;padding-block:56px 40px}
.hero h1{font-size:clamp(52px,7.4vw,104px);text-transform:uppercase}
.hero h1 em{font-style:normal;color:var(--red)}
.hero p.lede{font-size:19px;max-width:34em;margin:22px 0 0}
.hero .facts{font:23px/1.35 var(--mono);color:var(--muted);margin:18px 0 0;letter-spacing:.5px}
.ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.btn{font:24px/1 var(--display);letter-spacing:1px;text-transform:uppercase;text-decoration:none;padding:14px 22px;border:3px solid var(--rule);color:var(--fg);background:transparent}
.btn.primary{background:var(--red);border-color:var(--red);color:#f6eedb}
.btn:hover{transform:translateY(-2px)}
.status{font:20px/1.3 var(--mono);color:var(--muted);margin-top:18px;letter-spacing:.5px}

/* the CRT */
.crt{background:linear-gradient(180deg,#d4c6a6,#c3b491);border-radius:22px;padding:22px 22px 44px;box-shadow:var(--shadow);position:relative;min-width:0}
/* woodgrain, the signature detail (decision #13), used sparingly: the machine's veneer strip and the footer */
.crt:before{content:"";position:absolute;left:0;right:0;bottom:0;height:40px;border-radius:0 0 22px 22px;background:url(img/wood.webp) 0 55%/560px auto;box-shadow:inset 0 3px 0 rgba(255,255,255,.14),inset 0 -6px 10px rgba(0,0,0,.35)}
.crt:after{content:"UNC 64";position:absolute;left:50%;bottom:11px;transform:translateX(-50%);font:18px var(--display);letter-spacing:5px;color:#f1e3c3;text-shadow:0 1px 0 rgba(0,0,0,.5)}
.crt .led{position:absolute;z-index:1;right:28px;bottom:17px;width:12px;height:5px;background:#ff4a2e;box-shadow:0 0 8px #ff4a2e;border-radius:2px}
.screen{--border:#0b0f0c;background:var(--border);border-radius:14px;padding:16px;transition:background .25s}
#unc{display:block;width:100%;height:auto;aspect-ratio:768/592;border-radius:16px/20px;background:#000;cursor:text}
#unc.typing{outline:3px solid var(--yel);outline-offset:3px}
.screen{position:relative}
.unc-demo{position:absolute;top:clamp(12px,4.5%,28px);right:clamp(12px,5%,30px);font:clamp(9px,2.1vw,16px)/1 var(--mono);letter-spacing:.5px;color:#0b1f10;background:rgba(141,255,160,.8);padding:.25em .45em;border-radius:2px;pointer-events:none;box-shadow:0 0 8px rgba(141,255,160,.35)}
@media (min-width:901px){.unc-demo{font-size:clamp(11px,1.2vw,16px)}}
.unc-keys{position:absolute;left:0;bottom:0;width:1px;height:1px;opacity:0;border:0;padding:0;font-size:16px;pointer-events:none}
footer a{color:inherit}
.crt-note code{font:inherit;color:var(--fg)}
.crt-note{font:19px/1.3 var(--mono);color:var(--muted);margin-top:12px;letter-spacing:.3px}

/* sections */
section{padding-block:64px}
section .head{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:26px;border-bottom:3px solid var(--rule);padding-bottom:10px}
section h2{font-size:clamp(38px,5vw,60px);text-transform:uppercase}
.shot{margin:0}.shot img{width:100%;aspect-ratio:16/9;object-fit:cover;border:4px solid var(--rule)}
.shot figcaption{font:20px/1.3 var(--mono);color:var(--muted);margin-top:6px;letter-spacing:.5px}

/* paper things */
.paper{background:var(--paper);color:var(--paper-ink);box-shadow:var(--shadow);padding:28px 30px;position:relative}
.paper .label{color:var(--paper-muted)}
.paper a{color:#8a2f24}
.hand-red{font:600 30px/1.1 var(--hand);color:var(--uncle)}
.hand-blue{font:600 28px/1.1 var(--hand);color:var(--you)}

/* machine */
.machine{display:grid;grid-template-columns:1.25fr 1fr;gap:36px}
.machine>*,.story>*,.about>*,.hero .wrap>*{min-width:0}
.spec{width:100%;border-collapse:collapse;font-size:15.5px}
.spec th,.spec td{text-align:left;padding:10px 10px;border-bottom:2px solid var(--paper-edge);vertical-align:top}
.spec thead th{font:24px/1 var(--display);letter-spacing:1px;border-bottom:3px solid var(--paper-ink)}
.spec td:first-child{font:21px/1.2 var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--paper-muted);white-space:nowrap}
.spec-scroll{overflow-x:auto}
.memmap{font:22px/1.45 var(--mono);letter-spacing:.5px}
.memmap div{display:flex;justify-content:space-between;gap:16px;padding:2px 8px;border-bottom:1px solid var(--paper-edge)}
.memmap div:nth-child(odd){background:#ebe1c8}
.memmap .reserved{outline:3px solid var(--uncle);outline-offset:2px;border-radius:40px;background:transparent}
.memmap-note{margin-top:14px;transform:rotate(-2deg)}

/* story */
.story{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}
.story p{margin:0 0 16px;max-width:33em}
.story .big{font-size:20px}

/* gallery */
.tod{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.tod button{font:22px/1 var(--mono);letter-spacing:1px;text-transform:uppercase;padding:8px 14px;border:3px solid var(--rule);background:transparent;color:var(--fg);cursor:pointer}
.tod button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}

/* devlog list */
.memos{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.memo-card{display:flex;flex-direction:column;gap:10px;text-decoration:none}
.memo-card:hover{transform:translateY(-3px)}
.memo-card h3{font-size:34px;color:var(--paper-ink)}
.memo-card p{margin:0;color:var(--paper-ink)}
.memo-card .more{font:21px var(--mono);letter-spacing:1px;color:#8a2f24}

/* about + footer */
.about{display:grid;grid-template-columns:1fr 1fr;gap:36px}
.about p{margin:0 0 14px;max-width:34em}
footer{border-top:3px solid var(--rule);padding-block:26px 44px;font:20px/1.4 var(--mono);color:#efe2c4;letter-spacing:.5px;background:url(img/wood.webp) 0 0/760px auto;box-shadow:inset 0 10px 16px rgba(0,0,0,.35);text-shadow:0 1px 0 rgba(0,0,0,.45)}

footer .wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}

/* article (devlog post) */
.article{max-width:820px;margin:48px auto 70px}
.article .paper{padding:44px clamp(20px,5vw,60px) 50px}
.memo-head{border-bottom:3px solid var(--paper-ink);padding-bottom:18px;margin-bottom:26px}
.memo-head .label{display:block;margin-bottom:12px}
.memo-head h1{font-size:clamp(42px,6vw,66px);color:var(--paper-ink);text-transform:uppercase}
.memo-head dl{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;margin:16px 0 0;font:21px/1.3 var(--mono);color:var(--paper-muted)}
.memo-head dt{text-transform:uppercase;letter-spacing:1px}.memo-head dd{margin:0}
.prose p,.prose li{font-size:17.5px;max-width:36em}
.prose h2{font-size:34px;margin:34px 0 12px;text-transform:uppercase}
.prose ul{padding-left:22px}.prose li{margin-bottom:8px}
.prose figure{margin:26px 0}.prose figure img{border:4px solid var(--paper-ink)}
.prose figcaption{font:20px/1.3 var(--mono);color:var(--paper-muted);margin-top:6px}
.prose .sign{font:600 36px var(--hand);color:var(--you);margin-top:20px}
.back{font:22px var(--mono);letter-spacing:1px;text-transform:uppercase}

@media (max-width:900px){
  .hero .wrap,.machine,.story,.about{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .memos{grid-template-columns:1fr}
}
@media (max-width:560px){
  .gallery{grid-template-columns:1fr}
    .nav{margin-left:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.btn:hover,.memo-card:hover{transform:none}}

/* the beta waitlist (Buttondown) */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.signup-title{font:22px/1.3 var(--mono);letter-spacing:.5px;color:var(--fg);margin:26px 0 10px}
.signup{display:flex;gap:10px;flex-wrap:wrap;max-width:560px}
.signup-email{flex:1 1 240px;min-width:0;font:24px/1 var(--mono);letter-spacing:.5px;padding:12px 14px;border:3px solid var(--rule);background:var(--paper);color:var(--paper-ink);border-radius:0}
.signup-email::placeholder{color:var(--paper-muted)}
.signup .btn{cursor:pointer}
.hero .ctas{margin-top:18px}
.beta p{margin:0 0 18px;max-width:40em}
.beta .signup-email{border-color:var(--paper-ink)}
.nav a.nav-beta{color:var(--red)}

/* the manual, free download */
.manual{display:grid;grid-template-columns:minmax(200px,340px) 1fr;gap:44px;align-items:start}
.manual>*{min-width:0}
.manual-cover{display:block;transform:rotate(-2deg);box-shadow:var(--shadow);transition:transform .2s}
.manual-cover:hover{transform:rotate(-1deg) translateY(-3px)}
.manual-cover img{width:100%}
.manual p{margin:0 0 14px;max-width:36em}
.manual .big{font-size:20px}
.manual .ctas{margin-top:20px}
.manual-note{transform:rotate(-3deg);margin-top:22px!important}
.facts a{color:inherit}
@media (max-width:700px){.manual{grid-template-columns:1fr;gap:28px}.manual-cover{max-width:260px}}