/* Pages and articles rendered by tools/seo from content/quit/seo (markdown), inside the site's own chrome. Only the
   site's tokens (runtime/components/tokens.css): VT323 body text sized for reading, Silkscreen headings, the orange
   accent for headings and the green for links. */
.q-seo-main{display:block;background:var(--t-paper,#08110e);color:var(--t-ink,#f4e7cb);padding:clamp(28px,6vw,72px) clamp(18px,5vw,40px) clamp(48px,8vw,96px)}
.q-seo-article{max-width:44rem;margin:0 auto;font:400 clamp(21px,2.1vw,24px)/1.45 var(--t-font-body,"VT323",monospace)}
.q-seo-article h1,.q-seo-article h2,.q-seo-article h3{font-family:var(--t-font-display,"Silkscreen",monospace);color:var(--t-accent,#ff610b);line-height:1.15;letter-spacing:.01em;margin:1.6em 0 .55em}
.q-seo-article h1{font-size:clamp(28px,4.4vw,44px);margin-top:.4em}
.q-seo-article h2{font-size:clamp(20px,2.6vw,28px)}
.q-seo-article h3{font-size:clamp(17px,2vw,20px);color:var(--t-ink,#f4e7cb)}
/* A link to a heading (a manifesto contents link, /about#official-accounts from /press, /real-quit and /token-facts,
   /token-facts#risk) lands with the heading clear of the fixed site header: --t-header-desktop is 70 px and
   --t-header-phone 62 px in the built tokens, and the header switches to the phone height at 767 px. */
.q-seo-article :is(h2,h3,h4)[id]{scroll-margin-top:calc(var(--t-header-desktop,70px) + 16px)}
@media (max-width:767px){.q-seo-article :is(h2,h3,h4)[id]{scroll-margin-top:calc(var(--t-header-phone,62px) + 16px)}}
.q-seo-article p,.q-seo-article ul,.q-seo-article ol,.q-seo-article blockquote,.q-seo-article table,.q-seo-article pre{margin:0 0 1em}
.q-seo-article ul,.q-seo-article ol{padding-left:1.3em}
.q-seo-article li{margin:.25em 0}
.q-seo-article a{color:var(--t-sky,#25dc71);text-decoration:underline;text-underline-offset:.18em}
.q-seo-article a:hover{color:var(--t-yellow,#ff721c)}
.q-seo-article a:focus-visible{outline:var(--t-focus-width,3px) solid var(--t-focus,#fff0ad);outline-offset:2px}
/* COPY ADDRESS and BUY $QUIT under the contract address after the T0 switch (/seo/live.js); a button keeps its own colours. */
.q-seo-article .q-live-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.6em;margin:-.35em 0 1em}
.q-seo-article a.c-btn,.q-seo-article a.c-btn:hover{color:var(--c-text);text-decoration:none}
.q-seo-article strong{color:var(--t-ink,#f4e7cb);font-weight:400;background:var(--t-wood,#232720);padding:0 .15em}
.q-seo-article blockquote{border-left:4px solid var(--t-accent,#ff610b);padding:.1em 0 .1em 1em;color:var(--t-muted,#b5bba9)}
.q-seo-article code,.q-seo-article pre{font-family:var(--t-font-body,"VT323",monospace);background:var(--t-screen,#040c09);color:var(--t-sky,#25dc71)}
.q-seo-article pre{padding:.8em 1em;overflow-x:auto}
.q-seo-article code{overflow-wrap:anywhere}
.q-seo-article td,.q-seo-article td a{overflow-wrap:anywhere}
.q-seo-article td:first-child{overflow-wrap:normal;word-break:normal}
.q-seo-article img{display:block;max-width:100%;height:auto;margin:1.2em 0;border:var(--t-outline-heavy,3px) solid var(--t-metal,#333a32)}
.q-seo-article table{border-collapse:collapse;width:100%;display:block;overflow-x:auto}
.q-seo-article th,.q-seo-article td{border:1px solid var(--t-metal,#333a32);padding:.35em .6em;text-align:left;vertical-align:top}
.q-seo-article th{color:var(--t-accent,#ff610b);font-weight:400}
.q-seo-article hr{border:0;border-top:2px dashed var(--t-metal-light,#656853);margin:2em 0}
.q-seo-crumbs{font-size:.85em;color:var(--t-muted,#b5bba9)}
.q-seo-meta{color:var(--t-muted,#b5bba9);font-size:.9em}
.q-seo-faq,.q-seo-related{border-top:2px solid var(--t-metal,#333a32);margin-top:2.2em;padding-top:.4em}
.q-seo-related ul{list-style:none;padding:0}
.q-seo-list{list-style:none;padding:0;margin:1.6em 0 0}
.q-seo-list li{border-top:2px solid var(--t-metal,#333a32);padding:.9em 0}
.q-seo-list h2{margin:0 0 .3em;font-size:clamp(18px,2.2vw,24px)}
.q-seo-intro{font-size:1.1em}

/* /manifesto, Gary's manifesto: one continuous sheet of the accounting department's green-bar printout paper, tractor
   holes down both edges, VT323 for the printer and Silkscreen for the headings. Scoped to the page, so every other
   generated page keeps the rules above. A picture always shows its whole frame: its width and height follow the file
   (at most the column, at most most of the screen's height), never a crop. */
html[data-page="/manifesto"] .q-seo-main{background:#060d0a;padding:clamp(16px,4vw,56px) clamp(6px,3vw,32px) clamp(48px,8vw,96px)}
html[data-page="/manifesto"] .q-seo-article{--mf-paper:#f3eedc;--mf-band:#dde8cf;--mf-ink:#1d231d;--mf-soft:#4f5a4c;--mf-perf:#9fac92;--mf-accent:#b23c00;--mf-link:#0b5d2f;--mf-line:32px;--mf-edge:44px;--mf-hole:8px;--mf-gutter:clamp(18px,5vw,72px);position:relative;max-width:1120px;margin:0 auto;color:var(--mf-ink);font-size:24px;line-height:var(--mf-line);padding:calc(var(--mf-line)*2) calc(var(--mf-edge) + var(--mf-gutter)) calc(var(--mf-line)*3);background:repeating-linear-gradient(180deg,var(--mf-paper) 0 calc(var(--mf-line)*3),var(--mf-band) calc(var(--mf-line)*3) calc(var(--mf-line)*6));box-shadow:0 24px 60px rgb(0 0 0/.6)}
html[data-page="/manifesto"] .q-seo-article::before,html[data-page="/manifesto"] .q-seo-article::after{content:"";position:absolute;top:0;bottom:0;width:var(--mf-edge);pointer-events:none;background:radial-gradient(circle,#060d0a 0 var(--mf-hole),transparent calc(var(--mf-hole) + .5px)) 50% calc(var(--mf-line)*.75)/100% calc(var(--mf-line)*1.5) repeat-y,var(--mf-paper)}
html[data-page="/manifesto"] .q-seo-article::before{left:0;border-right:2px dashed var(--mf-perf)}
html[data-page="/manifesto"] .q-seo-article::after{right:0;border-left:2px dashed var(--mf-perf)}
html[data-page="/manifesto"] .q-seo-crumbs{font-size:18px;color:var(--mf-soft);margin:0 0 var(--mf-line)}
html[data-page="/manifesto"] .q-seo-article a{color:var(--mf-link);text-decoration-thickness:2px;text-underline-offset:.2em}
html[data-page="/manifesto"] .q-seo-article a:hover{color:var(--mf-accent)}
html[data-page="/manifesto"] .q-seo-article a:focus-visible{outline:3px solid var(--mf-accent);outline-offset:2px}
html[data-page="/manifesto"] .q-seo-article h1{font-weight:700;color:var(--mf-ink);font-size:clamp(30px,5.4vw,62px);line-height:1.04;letter-spacing:0;margin:0 0 calc(var(--mf-line)*1.5);max-width:15em}
html[data-page="/manifesto"] .q-seo-article h2,html[data-page="/manifesto"] .q-seo-article h3{color:var(--mf-ink)}
html[data-page="/manifesto"] .q-seo-body{counter-reset:mf}
html[data-page="/manifesto"] .q-seo-body>*{max-width:44rem}
html[data-page="/manifesto"] .q-seo-body>:is(h2,hr,table,p:has(>img)){max-width:none}
html[data-page="/manifesto"] .q-seo-body :is(p,ul,ol,blockquote,table){margin:0 0 var(--mf-line)}
html[data-page="/manifesto"] .q-seo-body em{font-style:normal}
html[data-page="/manifesto"] .q-seo-body>h2{counter-increment:mf;display:flex;align-items:baseline;gap:.65em;font-size:clamp(22px,2.7vw,31px);line-height:1.15;margin:calc(var(--mf-line)*3) 0 var(--mf-line);padding-top:calc(var(--mf-line)*1.25);border-top:2px dashed var(--mf-perf)}
html[data-page="/manifesto"] .q-seo-body>h2::before{content:counter(mf,decimal-leading-zero);flex:none;color:var(--mf-accent);font-size:.78em}
html[data-page="/manifesto"] .q-seo-body>h2#contents{counter-increment:none;font-size:clamp(17px,1.8vw,20px);letter-spacing:.08em;color:var(--mf-soft)}
html[data-page="/manifesto"] .q-seo-body>h2#contents::before{content:none}
html[data-page="/manifesto"] .q-seo-body>h2#contents+ol{columns:2 15rem;column-gap:3rem;padding-left:2.4em;list-style:decimal-leading-zero}
html[data-page="/manifesto"] .q-seo-body>h2#contents+ol li{break-inside:avoid;margin:0 0 calc(var(--mf-line)*.2)}
html[data-page="/manifesto"] .q-seo-body li::marker{color:var(--mf-accent)}
html[data-page="/manifesto"] .q-seo-body>ul{list-style:square;padding-left:1.15em}
html[data-page="/manifesto"] .q-seo-body>ol{padding-left:1.6em}
html[data-page="/manifesto"] .q-seo-body li{margin:0 0 calc(var(--mf-line)*.3)}
html[data-page="/manifesto"] .q-seo-body>p:has(>img){margin:calc(var(--mf-line)*1.5) 0;text-align:center;line-height:0}
/* Width comes from the picture's own width attribute (the SEO step writes width and height from the file), capped at the
   column; height follows its ratio, so the box has its final size before the file loads and an anchor lands where it
   should. Never width:auto or a height cap here: either would undo the reserved box. */
html[data-page="/manifesto"] .q-seo-body img{box-sizing:border-box;display:inline-block;vertical-align:top;max-width:100%;height:auto;margin:0;border:6px solid #141a14;outline:2px solid #3b4438;outline-offset:-1px;background:#0b120e}
html[data-page="/manifesto"] .q-seo-body>p:has(>img+img){display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--mf-cell,170px),1fr));gap:clamp(8px,1.4vw,16px);align-items:start}
html[data-page="/manifesto"] .q-seo-body>p:has(>img+img)>img{width:100%;min-width:0}
/* The one tall picture: Gary's letter, kept to a screen's height by its width. */
html[data-page="/manifesto"] .q-seo-body img[src*="desktop-mission/letter"]{max-width:min(100%,640px)}
html[data-page="/manifesto"] .q-seo-body>p:has(>img[src*="/nft-v3/showcase/"]){--mf-cell:min(150px,40%)}
html[data-page="/manifesto"] .q-seo-body>p:has(>img[src*="/merch/"]){--mf-cell:min(300px,100%)}
html[data-page="/manifesto"] .q-seo-body>p:has(>img[src*="/pilots/"]){--mf-cell:min(150px,28%)}
html[data-page="/manifesto"] .q-seo-body img[src*="/pilots/"]{padding:10%;border-width:4px}
/* The airdrop card comes in a wide and a tall version, as on the badges floor: one shows per screen. */
html[data-page="/manifesto"] .q-seo-body>p:has(>img[src*="nft-airdrop-phone"]){display:none}
html[data-page="/manifesto"] .q-seo-body>p:has(>img)+p:has(>em:only-child){margin-top:calc(var(--mf-line)*-.75);text-align:center;color:var(--mf-soft);font-size:20px;max-width:none}
html[data-page="/manifesto"] .q-seo-body>hr{border:0;border-top:2px dashed var(--mf-ink);margin:calc(var(--mf-line)*2.5) calc(var(--mf-gutter)*-1) calc(var(--mf-line)*1.5)}
html[data-page="/manifesto"] .q-seo-body>hr+p{color:var(--mf-soft);letter-spacing:.04em}
html[data-page="/manifesto"] .q-seo-body>blockquote{border:2px solid var(--mf-ink);border-left-width:2px;padding:calc(var(--mf-line)*.5) 1em;background:var(--mf-paper);color:var(--mf-ink)}
html[data-page="/manifesto"] .q-seo-body>blockquote>p{margin:0}
html[data-page="/manifesto"] .q-seo-article code{background:none;color:var(--mf-ink);font-size:1em;padding:0}
html[data-page="/manifesto"] .q-seo-body>table{display:table;width:100%;border-collapse:collapse}
html[data-page="/manifesto"] .q-seo-body th,html[data-page="/manifesto"] .q-seo-body td{border:0;border-bottom:1px solid var(--mf-perf);padding:calc(var(--mf-line)*.3) 1em calc(var(--mf-line)*.3) 0;text-align:left;vertical-align:top}
html[data-page="/manifesto"] .q-seo-body th{font-family:var(--t-font-display,"Silkscreen",monospace);font-size:15px;letter-spacing:.08em;color:var(--mf-soft);border-bottom:2px solid var(--mf-ink)}
html[data-page="/manifesto"] .q-seo-body td:first-child{white-space:nowrap;color:var(--mf-accent)}
html[data-page="/manifesto"] .q-seo-related{border-top:2px dashed var(--mf-perf);margin-top:calc(var(--mf-line)*3);padding-top:var(--mf-line)}
html[data-page="/manifesto"] .q-seo-related h2{font-size:clamp(17px,1.8vw,20px);letter-spacing:.08em;color:var(--mf-soft);margin:0 0 calc(var(--mf-line)*.5)}
html[data-page="/manifesto"] .q-seo-related ul{columns:2 15rem;column-gap:3rem}
/* Version 3.0 cards (the callers, the Quitters, the garments and the showcase portraits): a card opens with its label
   line (a paragraph that starts in bold), which starts below the card before; then the picture sits beside the card's
   words at a size that shows the whole frame. The wide pictures (the floors, the launchpad screens, the badges doors)
   keep the full column. Quotes and lists beside a picture keep their own box. */
html[data-page="/manifesto"] .q-seo-body>:is(h2,h3,hr,table,p:has(>img),p:has(>strong:first-child)){clear:both}
html[data-page="/manifesto"] .q-seo-body>:is(blockquote,ul,ol){display:flow-root}
html[data-page="/manifesto"] .q-seo-body>h4{font-family:var(--t-font-display,"Silkscreen",monospace);font-size:clamp(17px,1.7vw,21px);line-height:1.25;letter-spacing:.04em;margin:calc(var(--mf-line)*.2) 0 calc(var(--mf-line)*.4);color:var(--mf-ink)}
html[data-page="/manifesto"] .q-seo-body>p:is(:has(>img[src*="/assets/phone/caller-"]:only-child),:has(>img[src*="/runtime/merch/"]:only-child),:has(>img[src*="/nft-v3/showcase/"]:only-child),:has(>img[src*="/merch/wild/"]+img)){float:left;margin:calc(var(--mf-line)*.25) clamp(14px,2.2vw,28px) calc(var(--mf-line)*.6) 0;text-align:left}
html[data-page="/manifesto"] .q-seo-body>p:has(>img[src*="/assets/phone/caller-"]:only-child){width:min(140px,30%)}
html[data-page="/manifesto"] .q-seo-body>p:has(>img[src*="/runtime/merch/"]:only-child){width:min(270px,42%)}
html[data-page="/manifesto"] .q-seo-body>p:has(>img[src*="/nft-v3/showcase/"]:only-child){width:min(176px,34%)}
html[data-page="/manifesto"] .q-seo-body>p:has(>img[src*="/merch/wild/"]+img){width:min(380px,52%);--mf-cell:130px}
html[data-page="/manifesto"] .q-seo-body>table:has(th:nth-child(3)){display:block;overflow-x:auto;font-size:.78em;line-height:1.4}
html[data-page="/manifesto"] .q-seo-body>table:has(th:nth-child(3)) td:first-child{white-space:normal;min-width:8.5em}
@media (max-width:640px){
 html[data-page="/manifesto"] .q-seo-article{--mf-line:28px;--mf-edge:20px;--mf-hole:5px;--mf-gutter:12px;font-size:20px}
 html[data-page="/manifesto"] .q-seo-body>h2{margin-top:calc(var(--mf-line)*2)}
 html[data-page="/manifesto"] .q-seo-body td:first-child{white-space:normal;width:7.5em}
 html[data-page="/manifesto"] .q-seo-body img{border-width:4px}
 html[data-page="/manifesto"] .q-seo-body>p:has(>img[src*="nft-airdrop-desktop"]){display:none}
 html[data-page="/manifesto"] .q-seo-body>p:has(>img[src*="nft-airdrop-phone"]){display:block}
 html[data-page="/manifesto"] .q-seo-body>p:has(>img[src*="/runtime/merch/"]:only-child){float:none;width:auto;max-width:min(100%,380px);margin:var(--mf-line) auto;text-align:center}
 html[data-page="/manifesto"] .q-seo-body>p:has(>img[src*="/merch/wild/"]+img){float:none;width:auto;margin:var(--mf-line) 0}
 html[data-page="/manifesto"] .q-seo-body>p:has(>img[src*="/assets/phone/caller-"]:only-child){width:40%}
 html[data-page="/manifesto"] .q-seo-body>p:has(>img[src*="/nft-v3/showcase/"]:only-child){width:42%}
}
@media print{html[data-page="/manifesto"] .q-seo-article{box-shadow:none}}
