/* 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}main>h1:first-child{margin-top:40px} /* FORTY UNDER THE MENU (his 2026-10-29, 'make sure printer spacing is good too… and merch'): a page that opens with its heading alone (printer, merch) starts it where the hero pages start theirs; the printer's sat at 0 */
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,calc(7vw - 2.24px),66.36px);letter-spacing:.12em;margin:0 0 10px;line-height:1} /* ONE HEADING SIZE (his 2026-10-29, 'shouldnt we match font sizes unless there is a very good reason not to'): every page's h1 is the same at every width, 7% of the site column (min(948px, 100vw - 32px)), so BRAINFARTS at 66 px stays inside its 482 px hero column at 1280; the hero pages were 65.5 px and the single-column pages 72, and the collection's full-width main needs no container for it */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:start;padding-top:40px}.hero>div:first-child{display:flex;flex-direction:column;justify-content:space-between;min-height:100%}.hero>div:first-child>:empty{display:none} /* EVENLY, TOP TO BOTTOM (his 2026-10-29, 'the buttons in the hero can be spaced more evenly from top to bottom for a cleaner look'): the column's rows share the four's height evenly, the first on its top line, the last on its bottom; an empty row (a status line with nothing to say) takes no slot */ /* THE WORDS SIT ON THE FOUR'S LINES (his 2026-10-29, 'loops and pfp heros seem to align the text with the top and bottom of the 4-up - i like that'): the text starts where the four starts, 40 px under the menu on every page, and its last row (the buttons, the sale's note) rests on the four's bottom edge when the text is shorter; it was centred on about and mint, 78 and 72 px under the menu */@media(min-width:760px){.hero{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}} /* 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}.clips i{display:block;aspect-ratio:1;background:#000;border-radius:6px}
/* 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)}.sizes .btn[aria-checked="true"],.sizes .btn[aria-checked="true"]:hover,.sizes .btn[aria-checked="true"]:focus{background:var(--acc);color:#111;border-color:var(--acc)} /* THE CHOSEN SIZE STAYS LIT (his 2026-10-29: 'size buttons on desktop dont stay lit up and do not light up on mobile when clicked'): the button hover turned the chosen one dark while the mouse sat on it, and a phone's tap leaves hover on until the next touch — a chosen radio is not a hovered button */.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}}
/* NO ZOOM ON A FIELD (his 2026-10-29, 'on pfp page on mobile… the screen zooms slightly and requires repositioning with a finger pinch'): iPhone Safari and Chrome zoom the page in when a field under 16 px takes focus, and never zoom back. Every text field on the site was 13–15 px. On a touch device every field is 16 px; this is the device's law, so it outranks a page's own field rule. */
@media (pointer:coarse){input:not([type=range]):not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px!important}}