/* DuuThings / original artwork edition. No external dependencies. */
:root { --paper:#f5f1e7; --ink:#111211; --yellow:#e1b509; --blue:#367e9b; --red:#e84a33; --mono:"Courier New","Liberation Mono",monospace; }
* { box-sizing:border-box; }
html { background:var(--paper); color:var(--ink); }
body { margin:0; }
body::after { content:""; position:fixed; inset:0; pointer-events:none; z-index:3; background:url('../assets/noise.svg') repeat; opacity:.045; }
.page { max-width:1800px; margin:auto; padding:3.1vw 3.5vw 2.6vw 5vw; min-height:100vh; min-height:100svh; display:flex; flex-direction:column; }
main { position:relative; flex:1; padding-bottom:5.8vw; }
.introduction { position:relative; z-index:1; width:65%; }
h1 { position:relative; display:inline-block; margin:0 0 3.2vw; font-family:"Arial Black","Helvetica Neue",Helvetica,Arial,"Liberation Sans",sans-serif; font-size:clamp(7rem,16.4vw,18.45rem); font-weight:950; line-height:.79; letter-spacing:-.078em; -webkit-text-stroke:.012em currentColor; }
h1 span { display:block; padding-right:.09em; }
h1 span + span { margin-top:.055em; }
h1::after { content:""; position:absolute; inset:0; background:url('../assets/ink-flecks.svg'); opacity:.28; pointer-events:none; }
.copy { padding-left:1.4vw; }
.copy > p { margin:0 0 1.9rem; font:clamp(1rem,1.63vw,1.83rem)/1.24 var(--mono); letter-spacing:.01em; }
.assembly { padding-top:1.1vw; }
.assembly-mark { display:block; width:4.3vw; min-width:42px; height:.75vw; min-height:7px; background:var(--yellow); margin:0 0 2.6vw; }
.assembly p { margin:0; font:clamp(1.2rem,2.4vw,2.7rem)/1.35 var(--mono); letter-spacing:-.025em; }
.composition { position:absolute; inset:0 0 0 auto; width:36%; pointer-events:none; }
.shape { position:absolute; background-image:url('../assets/ink-flecks.svg'); }
.yellow { width:57%; height:58%; right:0; top:0; background-color:var(--yellow); }
.blue { width:64%; aspect-ratio:1; border-radius:50%; left:0; top:39%; background-color:var(--blue); }
.red { width:86%; height:8%; min-height:34px; right:-3%; bottom:17%; transform:rotate(-37deg); background-color:var(--red); }
footer { border-top:1px solid #353c3c; padding-top:1.8rem; display:flex; align-items:center; justify-content:space-between; gap:20px; font:clamp(.75rem,1.05vw,1rem)/1.6 var(--mono); letter-spacing:.065em; }
.location { display:flex; flex-wrap:wrap; align-items:center; gap:0 1.35em; }
.location b { font-weight:normal; }
.status { display:flex; align-items:center; gap:15px; padding:9px 14px 9px 3vw; border-left:1px solid #353c3c; text-transform:uppercase; white-space:nowrap; }
.status-dot { background:var(--yellow); width:20px; height:20px; border-radius:50%; flex-shrink:0; }
::selection { background:var(--yellow); color:var(--ink); }
@media(min-width:1800px) { .page { padding:55px 63px 47px 90px; } main { padding-bottom:100px; } }
@media(max-width:1050px) { footer { align-items:flex-start; flex-direction:column; gap:14px; } .status { border-left:0; padding:0; } }
@media(max-width:700px) {
.page { padding:32px 6vw 24px; } main { padding-bottom:30px; } .introduction { width:100%; }
h1 { font-size:23vw; margin-bottom:34px; } .copy { padding-left:1vw; }
.copy > p { max-width:36em; font-size:1rem; line-height:1.5; margin-bottom:22px; } .wide-break { display:none; }
.assembly { padding-top:5px; } .assembly-mark { margin-bottom:23px; } .assembly p { font-size:clamp(1.1rem,4.9vw,1.6rem); }
.composition { position:relative; width:100%; height:260px; margin:32px 0 0; }
.yellow { height:175px; width:100px; right:4px; } .blue { width:142px; top:65px; left:auto; right:68px; }
.red { width:195px; height:29px; min-height:0; right:-3px; bottom:29px; }
footer { padding-top:21px; font-size:.75rem; letter-spacing:.035em; } .location { gap:5px 10px; }
.status { gap:10px; white-space:normal; } .status-dot { width:13px; height:13px; }
}
@media print { body::after { display:none; } .page { min-height:0; } }