@font-face{font-family:"Abril Fatface";src:url(fonts/abril-fatface-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Anton";src:url(fonts/anton-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Yellowtail";src:url(fonts/yellowtail-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Libre Franklin";src:url(fonts/libre-franklin-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Libre Franklin";src:url(fonts/libre-franklin-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Libre Franklin";src:url(fonts/libre-franklin-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Libre Franklin";src:url(fonts/libre-franklin-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}

/* Chrome & Cherry, the brand sheet of 2026-10-25 (kit 1) */
:root{
  --asphalt:#121212; --asphalt-2:#1a1a1b; --cream:#F2E8D5; --chrome:#C9CCD1; --steel:#9AA0A6;
  --cherry:#C8102E; --pink:#E8467C; --paper:#F2E8D5; --paper-ink:#121212; --paper-muted:#4a4642;
  --display:"Abril Fatface",Georgia,serif; --mast:"Anton",Impact,"Arial Narrow",sans-serif; --script:"Yellowtail",cursive; --body:"Libre Franklin",system-ui,sans-serif;
  --wrap:1240px; --gutter:clamp(16px,4vw,40px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--asphalt);color:var(--cream);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.07;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
body>*{position:relative;z-index:1}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--cream);color:var(--asphalt);padding:8px 12px;font-weight:700;z-index:10}
.skip:focus{left:8px}

.draft{background:#0b0b0b;border-bottom:1px solid rgb(201 204 209/.18);color:var(--steel);font-size:13px;letter-spacing:.06em}
.draft .wrap{display:flex;gap:8px 16px;flex-wrap:wrap;justify-content:space-between;padding-top:8px;padding-bottom:8px}
.draft b{color:var(--cream);font-weight:700}

.label{font:700 12px/1.3 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--steel)}
.label.pink{color:var(--pink)}
.script{font-family:var(--script);color:var(--pink);font-weight:400}

/* checkered strip, the flag on their covers and flyers */
.checker{height:14px;background:repeating-conic-gradient(var(--cream) 0 25%,var(--asphalt) 0 50%) 0 0/14px 14px;opacity:.9}
.checker.thin{height:8px;background-size:8px 8px;opacity:.55}

/* header */
.top{border-bottom:1px solid rgb(201 204 209/.2);background:rgb(18 18 18/.92);position:sticky;top:0;z-index:5;backdrop-filter:blur(6px)}
.top .wrap{display:flex;align-items:center;gap:20px;min-height:76px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:0 0 auto}
.brand img{width:92px}
.brand span{font:400 20px/1 var(--display);letter-spacing:.01em}
.nav{display:flex;gap:4px;flex:1 1 auto;justify-content:flex-end;flex-wrap:wrap}
.nav a{font:600 14px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:12px 12px;border-radius:2px;color:var(--chrome)}
.nav a:hover,.nav a[aria-current=page]{color:var(--cream);background:rgb(201 204 209/.08)}
.btn{display:inline-flex;align-items:center;gap:10px;font:700 15px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border-radius:2px;padding:15px 20px;border:1px solid transparent;cursor:pointer}
.btn.cherry{background:var(--cherry);color:var(--cream)}
.btn.cherry:hover{background:#a50d26}
.btn.ghost{border-color:rgb(201 204 209/.55);color:var(--cream);background:transparent}
.btn.ghost:hover{border-color:var(--chrome);background:rgb(201 204 209/.08)}
.btn.ink{background:var(--paper-ink);color:var(--cream)}
.btn.ink:hover{background:#000}
.top .btn{padding:12px 16px;font-size:13px}
/* His three-zone header (2026-11-03): the logo on the left edge (the G of GREASE below it), the five links centred on
   the page, the buy button on the right edge (the front cover below it). Phones keep the two-row header. */
@media (min-width:861px){
  .top .wrap{display:grid;grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr);gap:20px}
  .top .brand{justify-self:start}
  .top .nav{justify-content:center;flex-wrap:nowrap}
  .top .btn{justify-self:end}
}
@media (max-width:860px){
  .top .wrap{flex-wrap:wrap;gap:6px 12px;padding-top:10px;padding-bottom:6px}
  .brand img{width:72px}.brand span{font-size:17px}
  .top .btn{margin-left:auto}
  .nav{order:3;flex-basis:100%;justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;margin:0 calc(var(--gutter)*-1);padding:0 var(--gutter)}
  .nav a{white-space:nowrap;padding:10px 10px;font-size:13px}
}

/* hero: the masthead as their covers set it. GREASE runs across the top; its G is the first letter of
   GLAMOUR, which stacks down the left under it; AND sits above NEW ON THE RACK in the same label style (his word, 2026-11-03); MAGAZINE under the R.
   The lettering is Anton, a condensed face close to their print masthead (the print lockup wins over the kit). */
.hero{padding:clamp(28px,5vw,64px) 0 clamp(36px,6vw,72px);overflow-x:clip}
/* His canopy (2026-11-03): GREASE spans the text block, so the final E, the right edge of the text and the right edge
   of LOOK INSIDE land on one line, and one gutter runs to the cover stack. --c2 is the text column (the padding beside
   the spine plus a 468 px block, the width the two buttons need side by side, or less on a narrow screen); --ls spreads REASE across it. REASE is 2.25 em wide in
   Anton; G-R and the four gaps inside REASE share the extra space. */
.hero .wrap{--m:clamp(64px,7.2vw,112px);--lp:clamp(22px,2.4vw,36px);--cw:468px;
  --c2:min(calc(100vw - 2 * var(--gutter) - .48em),calc(var(--lp) + var(--cw)));--ls:calc((var(--c2) - 2.25em) / 5);
  font-size:var(--m);display:grid;grid-template-columns:.48em var(--c2) minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:0;align-items:start}
/* Anton capitals stand 0.86 of the type size, so each letter is trimmed to its capital height (text-box) and the
   gap between letters is set larger than the drop shadow, so no letter or shadow touches the next. */
.m-g,.m-rease,.m-col{font-family:var(--mast);font-weight:400;text-transform:uppercase;color:#f3f3f1;line-height:1;user-select:none;
  text-shadow:.03em .035em 0 #7c8288,.045em .055em 0 rgb(0 0 0/.45)}
.m-g,.m-rease,.m-col span{text-box:trim-both cap alphabetic}
.m-g{grid-column:1;grid-row:1;justify-self:center}
.m-rease{grid-column:2;grid-row:1;justify-self:start;white-space:nowrap}
.m-g,.m-rease{text-shadow:none}
.glw{display:inline-block;position:relative;text-box:trim-both cap alphabetic}
.gl{display:inline-block;color:transparent;background-repeat:no-repeat;background-size:100% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-stroke:.012em rgb(228 231 236/.5);text-box:trim-both cap alphabetic;filter:drop-shadow(.03em .035em 0 #6c727a) drop-shadow(.015em .02em 0 rgb(0 0 0/.5))}
.m-rease .glw{margin-left:var(--ls)}
/* GLAMOUR in polished chrome: a mirror gradient per letter (sky, bright edge, dark horizon, bright floor) and star
   glints on four letters. */
.m-col span:not(.m-mag){position:relative;color:transparent;text-shadow:none}
.gl[class*="gx-"]{position:relative;color:transparent;background:none;-webkit-text-stroke:0;filter:none}
.gl[class*="gx-"]::before{content:"";position:absolute;left:50%;top:calc(var(--ct) * -100%);height:calc(var(--chh) * 100%);aspect-ratio:var(--ar);
  transform:translateX(-50%);background:var(--img) center/100% 100% no-repeat;pointer-events:none}
.m-col [class*="ch-"]::before{content:"";position:absolute;left:50%;top:calc(var(--ct) * -100%);height:calc(var(--chh) * 100%);aspect-ratio:var(--ar);
  transform:translateX(-50%);background:var(--img) center/100% 100% no-repeat;pointer-events:none}
.m-col .ch-L{--img:url(img/chrome-L.png);--ar:155/287;--chh:1.2424;--ct:0.1212}
.m-col .ch-A{--img:url(img/chrome-A.png);--ar:182/287;--chh:1.2424;--ct:0.1212}
.m-col .ch-M{--img:url(img/chrome-M.png);--ar:238/287;--chh:1.2424;--ct:0.1212}
.m-col .ch-O{--img:url(img/chrome-O.png);--ar:175/291;--chh:1.2597;--ct:0.1299}
.m-col .ch-U{--img:url(img/chrome-U.png);--ar:173/289;--chh:1.2511;--ct:0.1255}
.m-col .ch-R{--img:url(img/chrome-R.png);--ar:174/287;--chh:1.2424;--ct:0.1212}
.gl.gx-G{--img:url(img/grease-G.png);--ar:175/393;--chh:1.7013;--ct:0.1299}
.gl.gx-R{--img:url(img/grease-R.png);--ar:174/386;--chh:1.6710;--ct:0.1212}
.gl.gx-E{--img:url(img/grease-E.png);--ar:156/386;--chh:1.6710;--ct:0.1212}
.gl.gx-A{--img:url(img/grease-A.png);--ar:182/386;--chh:1.6710;--ct:0.1212}
.gl.gx-S{--img:url(img/grease-S.png);--ar:174/393;--chh:1.7013;--ct:0.1299}
.gl.gx-E2{--img:url(img/grease-E2.png);--ar:156/386;--chh:1.6710;--ct:0.1212}

.m-col .sp::after{content:"";position:absolute;width:.4em;height:.4em;left:var(--sx);top:var(--sy);transform:translate(-50%,-50%);
  background:url(img/sparkle.svg) center/contain no-repeat;pointer-events:none}
.m-col .sp-l{--sx:88%;--sy:6%}.m-col .sp-m{--sx:4%;--sy:46%}.m-col .sp-o{--sx:94%;--sy:22%}.m-col .sp-r{--sx:6%;--sy:86%}
/* His word (2026-11-03): the spine and the copy share row 2 and stretch to the same height. AND's top meets the L's top
   (both trimmed to capital height, both .13em below GREASE), and the button row's bottom meets MAGAZINE's bottom: the
   button row takes the spare height (margin-top:auto) and MAGAZINE drops to the base when the copy is the taller. */
.m-col{grid-column:1;grid-row:2;align-self:stretch;display:flex;flex-direction:column;align-items:center;gap:.13em;padding-top:.13em}
.m-col span{display:block}
.m-col .m-mag{font:700 .1em/1 var(--body);letter-spacing:.18em;color:var(--chrome);text-shadow:none;margin-top:auto;white-space:nowrap;align-self:flex-start;text-box:trim-both cap alphabetic}
/* His word (2026-11-03): fill the height between AND and the buttons. Four blocks (AND; the label with the title; the
   description with the specs; the buttons) spread evenly, never closer than the gap below. */
.lead{grid-column:2;grid-row:2;align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;row-gap:clamp(18px,2.2vw,28px);font-size:17px;min-width:0;padding-left:var(--lp);padding-top:calc(var(--m) * .13)}
.lead .label{margin:clamp(14px,2vw,26px) 0 10px}
/* His word (2026-11-03): AND in place of the script &, directly above NEW ON THE RACK on the same left edge; then his
   picture of it: large, in the masthead face, cherry red (about half the height of GREASE). */
.lead .m-and{font:400 calc(var(--m) * .5)/1 var(--mast);text-transform:uppercase;letter-spacing:.01em;color:var(--cherry);
  text-box:trim-both cap alphabetic;margin:0;user-select:none}
.lead .lb p{margin:0}
.lead .b1 .label{margin:0 0 10px}
.lead .b1 h2 .t1{display:block}
/* His word (2026-11-03): "line up the AND with the top of L, New on the rack top of A, Vol. 1 bottom of A and so on".
   From 1000 px wide the copy sits on the spine's lines: each band starts on a letter's top (Anton capitals are
   0.859375 of the type size; letters are .13 of it apart), and every line is trimmed to its capital top and baseline.
   L: AND on its bottom (his second word, 2026-11-03: "lets try the AND at bottom of L"). A: NEW ON THE RACK on its top, Vol. 1 Issue 6 on its bottom. M: October on its top. O: the
   description on its top. U: the specs on its top. R: the buttons on its bottom. Narrower, the copy flows. */
@media (min-width:1000px){
  .hero .wrap{--cap:calc(var(--m) * .859375);--gap:calc(var(--m) * .13);--step:calc(var(--cap) + var(--gap))}
  .lead{position:relative;display:block}
  .lead .lb{position:absolute;left:var(--lp);right:0;top:calc(var(--gap) + var(--i) * var(--step))}
  .lead .b0{--i:0;height:var(--cap);display:flex;flex-direction:column;justify-content:flex-end}
  .lead .b1{--i:1;height:var(--cap);display:flex;flex-direction:column;justify-content:space-between}
  .lead .b3{--i:3}
  .lead .b4{--i:4}
  .lead .b5{--i:5;height:var(--cap);align-content:end}
  .lead .b1 .label{margin:0}
  .lead .label,.lead .b1 h2 .t1,.lead .lb p{text-box:trim-both cap alphabetic}
  .lead .b1 h2 .script{position:absolute;left:0;top:calc(var(--cap) + var(--gap));margin:0;text-box:trim-both cap alphabetic}
}
.lead h2{font:400 clamp(34px,3.6vw,52px)/1.02 var(--display);margin:0}
.lead h2 .script{display:block;font-size:.82em;margin-top:.12em}
.lead p{margin:14px 0 0;color:var(--cream)}
.lead .specs{color:var(--steel);font-size:15px}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hero .cta{display:grid;grid-template-columns:1fr auto;margin-top:0}
.hero .cta .btn{justify-content:center}
.stack{grid-column:4;grid-row:1 / span 2;font-size:17px;position:relative;width:min(330px,28vw);margin:.1em 0 0 clamp(20px,3vw,44px)}
.stack img{border:1px solid rgb(201 204 209/.55);box-shadow:0 30px 60px rgb(0 0 0/.6)}
.stack .back{position:absolute;inset:0;transform-origin:50% 100%}
.stack .back.b1{transform:rotate(-7deg) translate(-26px,8px);opacity:.75}
.stack .back.b2{transform:rotate(6deg) translate(24px,6px);opacity:.85}
.stack .front{position:relative;width:100%}
.stack figcaption{margin-top:16px;font-size:13px;color:var(--steel);text-align:center}
@media (max-width:860px){
  .hero .wrap{--m:min(21vw,104px);--lp:clamp(14px,4vw,22px);grid-template-columns:.48em var(--c2)}
  .hero .cta{grid-template-columns:1fr}
  .lead .btn{padding:13px 14px;font-size:14px}
  .band .dot{display:none}
  .stack{grid-column:1 / -1;grid-row:3;width:min(300px,78vw);margin:40px auto 0}
}

.band{border-top:1px solid rgb(201 204 209/.2);border-bottom:1px solid rgb(201 204 209/.2);background:var(--asphalt-2)}
.band .wrap{display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:center;padding-top:16px;padding-bottom:16px;font:700 13px/1.4 var(--body);letter-spacing:.24em;text-transform:uppercase;color:var(--chrome)}
.band .dot{color:var(--cherry)}

section.block{padding:clamp(52px,7vw,96px) 0}
.head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px 32px;margin-bottom:clamp(24px,3vw,40px)}
.head h2{font:400 clamp(36px,4.4vw,60px)/1 var(--display);margin:8px 0 0}
.head h2 .script{display:block;font-size:.6em;margin-bottom:.08em}
.head p{max-width:30em;margin:0;color:var(--steel)}

/* open calls */
.calls{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px)}
.calls.one{grid-template-columns:minmax(0,640px)}
@media (max-width:860px){.calls{grid-template-columns:1fr}}
.call{background:var(--paper);color:var(--paper-ink);padding:clamp(22px,3vw,36px);border-radius:2px;position:relative;display:flex;flex-direction:column}
.call.dark{background:var(--asphalt-2);color:var(--cream);border:1px solid rgb(201 204 209/.3)}
.call .label{color:var(--paper-muted)}
.call.dark .label{color:var(--steel)}
.call .when{display:inline-block;background:var(--cherry);color:var(--cream);font:700 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;padding:8px 10px;border-radius:2px;margin-bottom:14px;align-self:flex-start}
.call h3{font:400 clamp(32px,3.4vw,46px)/1 var(--display);margin:6px 0 14px}
.call h3 .script{display:block;font-size:.66em;color:var(--cherry);margin-bottom:.06em}
.call.dark h3 .script{color:var(--pink)}
.call p{margin:0 0 12px}
.call ul{margin:4px 0 22px;padding:0;list-style:none}
.call li{padding:9px 0 9px 26px;border-top:1px solid rgb(18 18 18/.14);position:relative}
.call.dark li{border-top-color:rgb(201 204 209/.16)}
.call li::before{content:"";position:absolute;left:2px;top:17px;width:10px;height:10px;background:repeating-conic-gradient(currentColor 0 25%,transparent 0 50%) 0 0/5px 5px;opacity:.8}
.proposed{display:inline-block;margin:6px 0 0;font:700 11px/1.3 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--pink);border:1px solid currentColor;padding:3px 7px;border-radius:2px}
.rules span.proposed{margin-top:10px;font-size:11px;color:var(--pink)}
.call .btn{margin-top:auto;align-self:flex-start}

/* themes */
.themes{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgb(201 204 209/.22);border:1px solid rgb(201 204 209/.22)}
@media (max-width:1000px){.themes{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.themes{grid-template-columns:repeat(2,1fr)}}
.theme{background:var(--asphalt);padding:18px 16px 22px;min-height:132px}
.theme .label{color:var(--pink)}
.theme p{margin:8px 0 0;font:400 clamp(19px,1.7vw,23px)/1.15 var(--display)}

/* rack */
.rack{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,32px)}
@media (max-width:1000px){.rack{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.rack{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:64%;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--gutter)*-1);padding:0 var(--gutter) 10px}.rack>*{scroll-snap-align:start}}
.issue{text-decoration:none;display:block}
.issue img{width:100%;aspect-ratio:308/401;object-fit:cover;border:1px solid rgb(201 204 209/.35);transition:transform .25s ease,border-color .25s ease}
.issue:hover img{transform:translateY(-4px);border-color:var(--chrome)}
.issue .t{margin:12px 0 2px;font:400 21px/1.15 var(--display)}
.issue .m{font-size:14px;color:var(--steel)}
.issue .new{display:inline-block;margin-left:8px;color:var(--pink);font:400 22px/1 var(--script)}

/* who and events */
.two{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,64px);align-items:start}
@media (max-width:860px){.two{grid-template-columns:1fr}}
.big{font:400 clamp(36px,4.4vw,60px)/1 var(--display);margin:8px 0 0}
.big .script{display:block;font-size:.6em;margin-bottom:.08em}
.quote{font:400 clamp(22px,2.2vw,30px)/1.25 var(--display);margin:22px 0 18px;max-width:22em}
.quote small{display:block;margin-top:10px;font:400 14px/1.4 var(--body);color:var(--steel);letter-spacing:.04em}
.blank{border:1px dashed rgb(201 204 209/.5);padding:18px 20px;color:var(--steel);border-radius:2px;margin-top:20px}
.blank b{color:var(--cream)}
.page-shot{border:1px solid rgb(201 204 209/.4);box-shadow:0 24px 50px rgb(0 0 0/.55);max-width:360px;margin:0 auto}
.events{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:760px){.events{grid-template-columns:1fr}}
.event{border:1px dashed rgb(201 204 209/.5);padding:20px;border-radius:2px}
.event .d{font:400 34px/1 var(--display)}
.event .s{color:var(--steel);font-size:15px;margin-top:8px}

/* issue page */
.crumbs{font-size:14px;color:var(--steel);padding-top:26px}
.crumbs a{color:var(--chrome)}
.issue-hero{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,4vw,56px);padding:26px 0 40px;align-items:start}
@media (max-width:760px){.issue-hero{grid-template-columns:1fr}}
.issue-hero .cv{width:min(308px,80vw);border:1px solid rgb(201 204 209/.55);box-shadow:0 30px 60px rgb(0 0 0/.6)}
.issue-hero h1{font:400 clamp(44px,6vw,84px)/.95 var(--display);margin:10px 0 6px}
.facts{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:22px 0 0;max-width:30em}
.facts dt{color:var(--steel);font-size:14px;letter-spacing:.06em;text-transform:uppercase;padding-top:2px}
.facts dd{margin:0}
.planned{margin-top:20px;font-size:15px;color:var(--steel);border-left:3px solid var(--pink);padding:4px 0 4px 14px;max-width:34em}
.pages{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:22px}
.pages figure{margin:0}
.pages button{all:unset;cursor:zoom-in;display:block;width:100%}
.pages button:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
.pages img{width:100%;border:1px solid rgb(201 204 209/.35)}
.pages figcaption{font-size:13px;color:var(--steel);margin-top:8px;line-height:1.4}
.pages .n{font:700 12px/1 var(--body);letter-spacing:.14em;color:var(--pink);display:block;margin-bottom:4px}
dialog{border:1px solid rgb(201 204 209/.5);background:var(--asphalt);color:var(--cream);padding:16px;max-width:min(94vw,520px)}
dialog::backdrop{background:rgb(0 0 0/.8)}
dialog img{width:100%;image-rendering:auto}
dialog .row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;font-size:14px;color:var(--steel)}

/* entry page */
.rules{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:0;padding:0;list-style:none}
@media (max-width:760px){.rules{grid-template-columns:1fr}}
.rules li{background:var(--asphalt-2);border:1px solid rgb(201 204 209/.22);padding:18px 20px;border-radius:2px}
.rules b{display:block;font:400 22px/1.15 var(--display);margin-bottom:6px}
.rules span{color:var(--chrome);font-size:16px}
form.entry{background:var(--paper);color:var(--paper-ink);padding:clamp(22px,3vw,40px);border-radius:2px;display:grid;gap:18px;grid-template-columns:1fr 1fr}
@media (max-width:760px){form.entry{grid-template-columns:1fr}}
form.entry .full{grid-column:1/-1}
form.entry fieldset{border:0;padding:0;margin:0}
form.entry legend,form.entry label{font:700 14px/1.3 var(--body);letter-spacing:.04em;display:block;margin-bottom:6px}
form.entry .hint{font-size:14px;color:var(--paper-muted);margin-top:4px}
form.entry input[type=text],form.entry input[type=email],form.entry textarea,form.entry input[type=file]{width:100%;font:400 16px/1.4 var(--body);padding:12px 12px;border:1px solid rgb(18 18 18/.35);border-radius:2px;background:#fffaf1;color:var(--paper-ink)}
form.entry input:focus-visible,form.entry textarea:focus-visible{outline:3px solid var(--cherry);outline-offset:1px}
form.entry textarea{min-height:110px;resize:vertical}
.choice{display:flex;gap:10px;flex-wrap:wrap}
.choice label{display:flex;align-items:center;gap:10px;border:1px solid rgb(18 18 18/.35);padding:12px 14px;border-radius:2px;font-weight:600;letter-spacing:0;cursor:pointer;margin:0;background:#fffaf1}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:400!important;letter-spacing:0!important}
.check input{margin-top:4px;width:18px;height:18px;accent-color:var(--cherry)}
.sendrow{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.sendrow p{margin:0;font-size:14px;color:var(--paper-muted)}

footer{margin-top:24px;background:#0b0b0b;border-top:1px solid rgb(201 204 209/.2)}
footer .wrap{display:grid;grid-template-columns:auto 1fr auto;gap:24px 40px;align-items:center;padding-top:40px;padding-bottom:40px}
@media (max-width:860px){footer .wrap{grid-template-columns:1fr}}
footer img{width:150px}
footer .tag{font:400 clamp(26px,2.6vw,34px)/1.1 var(--script);color:var(--pink)}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:15px}
footer ul a{color:var(--chrome)}
footer .fine{grid-column:1/-1;border-top:1px solid rgb(201 204 209/.15);padding-top:18px;font-size:13px;color:var(--steel)}
/* The phone pass (his word, 2026-11-03: "please do a discovery pass on mobile version and make it happen"). Measured at
   360, 390 and 430 px: a 6 px sideways scroll from the 2027 themes at 360; about 230 px of draft notice and sticky
   header before the hero; links, buttons and checkboxes under 44 px; MAGAZINE at 8 px; the drips touching AND; the
   rack's first cover snapped flush to the screen edge; the Issue 6 previews one per row, enlarged and soft. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.themes{grid-template-columns:repeat(4,minmax(0,1fr))}
.theme p{overflow-wrap:anywhere}
@media (max-width:1000px){.themes{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){
  .draft .wrap{padding-top:7px;padding-bottom:7px;font-size:12px}
  .draft .wrap > span:last-child{display:none}
  .draft a{display:inline-flex;align-items:center;min-height:44px;margin:-10px 0}
  .top{position:relative}
  .top .wrap{min-height:0}
  .nav a{min-height:44px;display:inline-flex;align-items:center;padding:0 12px}
  .btn{min-height:44px}
  .top .btn{min-height:44px}
  .skip{padding:12px 14px}
  .label{font-size:13px;letter-spacing:.16em}
  .proposed{font-size:12px}
  .pages .n{font-size:13px}
  .m-col .m-mag{font-size:max(10px,.1em)}
  .m-col .sp-m{--sx:24%}
  .event{padding:16px 18px}
  .event .d{font-size:26px;margin:4px 0 0}
  .event .s{margin-top:6px}
  .crumbs a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
  .rules span.proposed{font-size:12px}
  .choice input{width:20px;height:20px;accent-color:var(--cherry)}
  .crumbs{padding-top:8px}
  footer ul a{display:inline-flex;align-items:center;min-height:44px}
  footer ul{gap:0}
  .check{min-height:44px;align-items:center}
  .check input{width:22px;height:22px;margin-top:0}
  .pages{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
}
@media (max-width:640px){
  .themes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rack{scroll-padding-inline:var(--gutter)}
}
@media (max-width:999px){.lead{padding-top:calc(var(--m) * .52)}}
@media (max-width:400px){
  .theme{padding:14px 12px 18px}
  .theme .label{letter-spacing:.1em;font-size:12px}
  .theme p{font-size:18px}
}