/* THE LOOK, ONE PLACE (2026-10-15, the fold; his law: clean html, elegant code at every step): what every page with the menu shares.
   THE LOOK IS THE ART'S (his 2026-10-12): hard pixel edges, the sleeve's gingham green, the asterisk; no rounded cards, no amber.
   A page keeps only what is its own, in its own style block after this sheet, so its rules win where they differ. The mint app and the door have looks of their own. */
:root{--bg:#222222;--fg:#e8e8e8;--mut:#9a9a9a;--line:#363636;--acc:#7ed957}
*{box-sizing:border-box}[hidden]{display:none!important}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.55 ui-monospace,Menlo,Consolas,monospace}
a{color:var(--acc)}:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
main{max-width:980px;margin:0 auto;padding:0 16px 80px}
section{padding:48px 0;border-bottom:1px solid var(--line)}section:last-of-type{border:0}
/* THE ANCHORS KEEP THEIR PROMISE (his 2026-10-17: 'links does not take you to the links… it takes you to gallery'): a target clears the sticky menu instead of hiding under it, and the gallery anchor is the section, so its heading is what lands at the top (it was the grid below the heading). Gallery and links fit one screen, so the menu's links item lands on the gallery too (his 2026-10-17: 'since you can see the links when it loads in that place, links should land on the same place') */
h2[id]{scroll-margin-top:calc(var(--navh,65px) + 12px)} /* the anchors are the headings, so the heading is the first line under the menu; --navh is the menu's measured height (it wraps to two rows on a tablet) */
/* the gallery and the links together always fill a screen (less the 72 px landing margin, main's 80 px bottom padding and the 109 px footer), so the gallery anchor can put its heading at the top on any screen — on a desktop the two sections alone are shorter than the viewport and the page ran out of room (his 2026-10-17, twice) */
.tail{min-height:calc(100vh - 261px)}
.hot{color:var(--fg);font-weight:700} /* the deadlines on the mint cards, bold white (his 2026-10-17) */
h1{font-size:clamp(34px,8vw,72px);letter-spacing:.12em;margin:0 0 10px;line-height:1}h2{font-size:13px;letter-spacing:.14em;color:var(--mut);text-transform:uppercase;margin:0 0 18px}
.lead{font-size:clamp(16px,2.4vw,20px);max-width:720px;margin:0 0 26px}.mut{color:var(--mut)}
/* the hero: words beside four moving brainfarts (the home page, loops) */
.hero{display:grid;grid-template-columns:1fr;gap:28px;align-items:center;padding-top:40px}@media(min-width:760px){.hero{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}.hero>div:first-child{container-type:inline-size}.hero h1{font-size:min(clamp(34px,8vw,72px),13.6cqw)}} /* the wordmark sizes to its column (13.6cqw: BRAINFARTS at 72 px is 520 px wide and the column 482 at 1280), never the column to the wordmark */ /* minmax(0,…): the columns split the width the same on every page; the home page's wordmark used to push its column wider and shrink its 4-up to 400 px against the loops page's 438 (his 2026-10-20 'site consistency') */
.clips{display:grid;grid-template-columns:1fr 1fr;gap:10px}.clips video{width:100%;aspect-ratio:1;image-rendering:pixelated;background:#000;display:block}
/* the button, the figures row, the cards with the asterisk */
.btn{display:inline-block;background:var(--acc);color:#111;text-decoration:none;font-weight:700;padding:12px 22px;letter-spacing:.08em;text-transform:uppercase;border:2px solid var(--acc);margin:0 8px 8px 0}.btn:hover{background:var(--bg);color:var(--acc)}.btn.ghost{background:var(--bg);color:var(--fg);border-color:#555}.btn.ghost:hover{border-color:var(--fg)}
.row{display:flex;flex-wrap:wrap;gap:18px 36px}.row div b{display:block;font-size:26px;color:var(--acc)}.row div span{color:var(--mut);font-size:12px}
.cols{display:grid;grid-template-columns:1fr;gap:22px}@media(min-width:700px){.cols{grid-template-columns:1fr 1fr}}
.card{position:relative;padding:0 0 0 20px}.card:before{content:"*";position:absolute;left:0;top:-3px;color:var(--acc);font-size:22px;font-weight:700}.card h3{margin:0 0 8px;font-size:15px;letter-spacing:.06em}.card p{margin:0;color:var(--mut)}
footer{color:var(--mut);font-size:13px;padding:24px 16px;text-align:center;border-top:1px solid var(--line)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}