/* Base: reset, the one button, ranked dividers, the mast and its menus, cards, the door, the footer. DESIGN-truemage sections 3 to 5.
   The quiet pass: a photocopied zine, not a poster. Black and bone, hairline rules, type small and plain. Red is spent on the art and on
   hover and nowhere else. Texture (halftone, grain) never sits under running text. Motion is transform and opacity only. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--void);scroll-padding-top:calc(var(--mast-h) + 1rem)}
body{margin:0;background:var(--void);color:var(--bone);font-family:var(--serif);font-size:var(--fs-ui);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
img,svg{max-width:100%;height:auto;display:block}
[hidden]{display:none!important}
a{color:var(--bone);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:var(--crimson-2)}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--violet);outline-offset:3px}
main:focus{outline:0}
.wrap{width:100%;max-width:min(94vw, var(--grid-max));margin-inline:auto;padding-inline:var(--pad-x)}
.mono{font-family:var(--mono);font-weight:700;font-size:var(--fs-micro);line-height:1.4;letter-spacing:.06em;color:var(--ash)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:8px;top:8px;z-index:60;background:var(--bone);color:var(--void);padding:12px 16px;font:500 1rem/1 var(--disp);text-decoration:none}

/* the one button: a hairline box. The quiet and ghost forms are underlined text. No fill, no sweep. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:44px;min-width:44px;padding:0 1.1rem;font:500 1rem/1 var(--disp);letter-spacing:.02em;text-decoration:none;background:none;color:var(--bone);border:1px solid var(--line);cursor:pointer}
.btn:hover,.btn:focus-visible{border-color:var(--bone);color:var(--bone);text-decoration:underline;text-underline-offset:.3em}
.btn:active{transform:translateY(1px)}
.btn--ghost,.btn--quiet{border-color:transparent;padding:0 .25rem;text-decoration:underline;text-underline-offset:.3em}
.btn--ghost:hover,.btn--quiet:hover{border-color:transparent;color:var(--crimson-2)}
.btn[disabled]{color:var(--ash);border-color:var(--rule-d);cursor:default}

/* dividers, ranked by the weight of the line alone: d1 major, d2 mid, d3 minor, dline a dateline that names a section */
.d1{height:0;border:0;border-top:1px solid var(--line);margin-block:var(--div-y)}
.d2{height:0;border:0;border-top:1px solid var(--rule-d);margin-block:var(--s-5)}
.d3{height:0;border:0;border-top:1px solid var(--rule-d);margin-block:var(--s-3)}
.dline{display:flex;align-items:center;gap:var(--s-3);margin:0 0 var(--s-4)}
.dline::after{content:"";flex:1;height:0;border-top:1px solid var(--rule-d)}
.dline h2,.dline .mono{margin:0;color:var(--ash)}

/* mast */
.mast{position:sticky;top:0;z-index:40;background:var(--void);border-bottom:1px solid var(--rule-d)}
.mast .row{display:flex;align-items:center;gap:var(--s-2);min-height:var(--mast-h)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--bone);min-height:44px;margin-right:auto}
.brand img{height:34px;width:24px;filter:var(--mark-f)}
.brand b{font:600 1rem/1 var(--disp);letter-spacing:.02em;white-space:nowrap}
.mnav{display:flex;flex-wrap:wrap;order:5;flex-basis:100%;padding-bottom:var(--s-2)}
.mnav a,.mnav .mt{font:500 1rem/1 var(--disp);letter-spacing:.02em;color:var(--bone-dim);text-decoration:none;background:none;border:0;padding:0 var(--s-3) 0 0;min-height:44px;min-width:44px;display:inline-flex;align-items:center;gap:.4em;cursor:pointer}
.mnav a:hover,.mnav .mt:hover,.mnav a[aria-current=page],.mnav .mt[aria-expanded=true]{color:var(--bone);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.4em}
.mnav a.mdoor{margin-left:auto;color:var(--bone)}
.js .mnav{display:none}
.mast .row{flex-wrap:wrap}
.iconbtn{width:44px;height:44px;display:inline-grid;place-items:center;background:none;border:0;color:var(--bone);cursor:pointer;text-decoration:none}
.iconbtn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5}
.themebtn svg .h{fill:currentColor;stroke:none}
.themebtn[aria-pressed=true] svg{transform:rotate(180deg)}
html:not(.js) .themebtn{display:none}
.menubtn{display:none}
.js .menubtn{display:inline-grid}
.mast .btn.mbtn{display:none}
@media (min-width:64rem){
  .mast .row{flex-wrap:nowrap}
  .mnav,.js .mnav{display:flex;order:0;flex-basis:auto;padding:0;margin-right:var(--s-4);gap:var(--s-5)}
  .mnav a,.mnav .mt{padding:0 2px}
  .mnav a.mdoor{display:none}
  .js .menubtn,.menubtn{display:none}
  /* the letter link is text like the rest of the nav, not a box */
  .mast .btn.mbtn{display:inline-flex;border-color:transparent;padding:0 .25rem;font-size:1rem;text-decoration:underline;text-underline-offset:.4em}
}
/* mega: a plain index of the codex */
.mega{position:absolute;left:0;right:0;top:100%;background:var(--void);border-bottom:1px solid var(--line);padding:var(--s-5) 0 var(--s-6)}
.mega .cols{display:grid;grid-template-columns:repeat(6,1fr) 15rem;gap:var(--s-5)}
.mega h3{margin:0 0 var(--s-3);font:700 var(--fs-micro)/1.2 var(--mono);letter-spacing:.06em;color:var(--ash);padding-bottom:var(--s-2);border-bottom:1px solid var(--rule-d)}
.mega ul{list-style:none;margin:0;padding:0}
.mega li a{display:block;padding:.35rem 0;min-height:32px;font:500 1rem/1.25 var(--disp);color:var(--bone);text-decoration:none}
.mega li a:hover{text-decoration:underline;text-underline-offset:.2em}
.mega li.all a{font:700 var(--fs-micro)/1.3 var(--mono);letter-spacing:.06em;color:var(--ash);padding-top:var(--s-3);min-height:44px}
.mega .feat{border-left:1px solid var(--rule-d);padding-left:var(--s-5)}
.mega .feat img{aspect-ratio:16/10;object-fit:cover;width:100%}
.mega .feat p{margin:var(--s-2) 0 0;font:500 1rem/1.2 var(--disp)}
@media (pointer:coarse){.mega li a{min-height:44px;display:flex;align-items:center}}
/* the phone sheet */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:50}
.sheetnav{position:fixed;left:0;right:0;bottom:0;z-index:55;max-height:88svh;display:flex;flex-direction:column;background:var(--void);border-top:1px solid var(--line)}
.sheetnav .scroll{overflow:auto;overscroll-behavior:contain;padding:var(--s-4) var(--pad-x) var(--s-3)}
.sheetnav h3{margin:var(--s-4) 0 var(--s-2);font:700 var(--fs-micro)/1.2 var(--mono);letter-spacing:.06em;color:var(--ash)}
.sheetnav h3:first-child{margin-top:0}
.sheetnav a.row{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:48px;border-bottom:1px solid var(--rule-d);font:500 1.0625rem/1.2 var(--disp);color:var(--bone);text-decoration:none}
.sheetnav a.row small{font:700 var(--fs-micro)/1.2 var(--mono);letter-spacing:.04em;color:var(--ash);text-align:right}
.sheetnav .bar{display:flex;gap:var(--s-3);padding:var(--s-3) var(--pad-x) calc(var(--s-3) + env(safe-area-inset-bottom));border-top:1px solid var(--rule-d);background:var(--void)}
.sheetnav .bar .btn{flex:1}
@media (min-width:64rem){.sheetnav,.scrim{display:none!important}}
@media (prefers-reduced-motion:no-preference){.sheetnav:not([hidden]){animation:rise-sheet var(--base) var(--ease)}@keyframes rise-sheet{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}}
/* search: one field, one list, two homes (the mast panel and the sheet), and the codex page */
.sf{display:block;margin-top:var(--s-3)}
.sf input,.sp input{width:100%;min-height:48px;background:var(--void);border:1px solid var(--line);color:var(--bone);font:700 1rem/1 var(--mono);padding:0 var(--s-3);border-radius:0}
.sp input{min-height:52px;font-size:1.0625rem;padding:0 var(--s-4)}
.sf input::placeholder,.sp input::placeholder,.door input::placeholder{color:var(--ash);opacity:1}
.sp{position:absolute;left:0;right:0;top:100%;background:var(--void);border-bottom:1px solid var(--line);padding:var(--s-4) 0 var(--s-5)}
.sf label,.sp label{display:block;margin-bottom:var(--s-2)}
.sr-list{list-style:none;margin:var(--s-3) 0 0;padding:0}
.sr-list li a{display:flex;gap:var(--s-3);align-items:center;min-height:48px;border-bottom:1px solid var(--rule-d);color:var(--bone);text-decoration:none;font:500 1.0625rem/1.2 var(--disp)}
.sr-list li a small{margin-left:auto;font:700 var(--fs-micro)/1.2 var(--mono);letter-spacing:.04em;color:var(--ash);text-align:right}
.sr-list li[aria-selected=true] a,.sr-list li a:hover{background:var(--panel);box-shadow:inset 2px 0 0 var(--bone)}
.sr-live{margin:var(--s-2) 0 0;min-height:1.4em}
.sp .hint{margin:var(--s-2) 0 0}
@media (pointer:coarse){.sp .hint{display:none}}

/* cards: no fill and no frame. The plate stands in for art that does not exist yet, drawn in the same textures as The Section */
.plate{position:relative;aspect-ratio:16/9;background:var(--art-black);overflow:hidden;color:var(--chalk);display:grid;place-items:center}
.plate::before{content:"";position:absolute;inset:0;background:radial-gradient(var(--cream) .9px,transparent 1px) 0 0/6px 6px;-webkit-mask-image:linear-gradient(200deg,transparent 30%,#000 90%);mask-image:linear-gradient(200deg,transparent 30%,#000 90%);opacity:.22}
.plate svg{position:relative;width:40%;max-width:150px;min-width:48px;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.plate .w{position:relative;padding:0 var(--s-3);text-align:center;font:600 clamp(1.25rem, 1rem + 2vw, 2rem)/1.05 var(--disp);color:var(--chalk)}
.plate[data-j=above]{background:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 7px),linear-gradient(#1c1812,#000)}
.plate[data-j=middle]{background:repeating-linear-gradient(0deg,var(--rule-d) 0 8px,transparent 8px 14px),#000}
.plate[data-j=below]{background:repeating-linear-gradient(135deg,var(--line) 0 1px,transparent 1px 9px),#000}
.plate[data-j=between]{background:repeating-linear-gradient(90deg,var(--ash) 0 16px,transparent 16px 32px) 0 78%/100% 2px no-repeat,#000}
.plate[data-j=shift]{background:repeating-linear-gradient(45deg,var(--line) 0 2px,transparent 2px 9px),#000}
.card{display:block;color:inherit;text-decoration:none;position:relative}
.card .im{aspect-ratio:16/9;overflow:hidden;background:var(--art-black)}
.card .im img{width:100%;height:100%;object-fit:cover}
.card .tx{padding:var(--s-3) 0 var(--s-4)}
.card .k{display:flex;align-items:center;gap:var(--s-2);color:var(--ash)}
.card h3{margin:var(--s-1) 0 var(--s-2);font:500 var(--fs-h3)/1.2 var(--disp);letter-spacing:.01em;color:var(--bone)}
.card p{margin:0;font:400 .9375rem/1.5 var(--serif);color:var(--bone-dim)}
.card:hover h3,.card:focus-visible h3{text-decoration:underline;text-underline-offset:.2em}
.card.row{display:grid;grid-template-columns:96px 1fr;gap:var(--s-3);align-items:center;border-bottom:1px solid var(--rule-d);padding-block:var(--s-3)}
.card.row .im,.card.row .plate{aspect-ratio:4/3}
.card.row .plate svg{width:46%;min-width:0}
.card.row .plate .w{font-size:1rem;padding:0 var(--s-1)}
.card.row .tx{padding:0;border:0}
.card.row h3{font-size:1.0625rem;margin-bottom:var(--s-1)}
.card.row p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.9375rem}
.jg{width:14px;height:22px;flex:0 0 auto;display:inline-block;vertical-align:middle}
.jg rect{fill:var(--line)}.jg .on{fill:var(--bone)}
.jg line{stroke:var(--line);stroke-width:1.4}.jg .on-l{stroke:var(--bone)}

/* the door: one strip, the same on the gate, every entry and the foot of every category. A hairline above, a hairline field. */
.door{margin-block:var(--s-7);border-top:1px solid var(--line);padding:var(--s-5) 0 0;display:grid;gap:var(--s-4)}
.door h2{margin:var(--s-2) 0 0;font:600 var(--fs-h2)/1.15 var(--disp)}
.door p{margin:0;max-width:46ch;color:var(--bone-dim);font-size:1rem}
.door .pitch p{margin-top:var(--s-2)}
.door label{display:block;margin-bottom:var(--s-2)}
/* the 1px gap shows the form's own background, so the field and its button are divided by one hairline wherever they wrap */
.door form{display:flex;flex-wrap:wrap;gap:1px;background:var(--line);border:1px solid var(--line)}
.door input{flex:1 1 12rem;min-width:0;min-height:48px;background:var(--void);border:0;color:var(--bone);font:700 1rem/1 var(--mono);padding:0 var(--s-3);border-radius:0}
.door input:focus-visible{outline-offset:-3px}
.door button{flex:1 1 9rem;border:0;min-height:48px;font:500 1rem/1 var(--disp);letter-spacing:.02em;padding:0 1.2rem;background:var(--void);color:var(--bone);text-decoration:underline;text-underline-offset:.3em;cursor:pointer}
.door button:hover,.door button:focus-visible{color:var(--crimson-2)}
.door button[disabled]{color:var(--ash);text-decoration:none;cursor:default}
.door .msg{min-height:1.4em;margin:var(--s-2) 0 0;font:700 var(--fs-micro)/1.5 var(--mono);color:var(--bone-dim);letter-spacing:.04em}
.door .msg[data-s=err]{color:var(--crimson-2)}
@media (min-width:56rem){.door{grid-template-columns:1.2fr 1fr;align-items:center;gap:var(--s-6)}}

/* footer */
.foot{background:var(--void);border-top:1px solid var(--rule-d);margin-top:var(--s-7);padding:var(--s-6) 0 var(--s-7)}
.foot .in{display:grid;gap:var(--s-5)}
.foot p{margin:var(--s-2) 0 0;color:var(--bone-dim);max-width:46ch;font-size:.9375rem}
.foot .brandline{color:var(--bone)}
.foot nav{display:flex;flex-wrap:wrap;gap:0 var(--s-5);align-content:start}
.foot nav a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;font:700 var(--fs-micro)/1.3 var(--mono);letter-spacing:.04em;color:var(--bone);text-decoration:none}
.foot nav a:hover{text-decoration:underline;text-underline-offset:.3em}
.foot nav a.next{color:var(--ash)}
.foot nav a.next:hover{color:var(--bone)}
@media (min-width:56rem){.foot nav{flex-direction:column}.foot .in{grid-template-columns:1.4fr 1fr 1fr}}

/* motion: only transform and opacity, and every end state is the state without it */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media (prefers-contrast:more){.plate::before{display:none}}
@media (forced-colors:active){.btn,.door button{border:2px solid ButtonText}}
@media print{.mast,.scrim,.sheetnav,.foot,.door,.rail,.pn,.btn,.skip{display:none!important}body{background:#fff;color:#000}}
.plainlist{list-style:none;margin:0;padding:0}
.plainlist a{display:flex;align-items:center;min-height:44px;color:var(--bone);text-decoration:none;font:500 1rem/1.2 var(--disp)}
.plainlist a:hover{text-decoration:underline;text-underline-offset:.2em}
html:not(.js) .door form,html:not(.js) .door label{display:none}
.door .f{min-width:0}
.door.letterform{margin:var(--s-5) 0 0}