/* Velvet Liga — 1A Paste-Up */
:root{--paper:#f4efe6;--ink:#161412;--pink:#f45099;--magenta:#c32a6d;--yellow:#ffe400;--teal:#68cec1;--muted:#6b655c;--card:#fffdf8}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 21px/1.65 "Work Sans",sans-serif}
img{max-width:100%}
::selection{background:var(--yellow)}
a{color:inherit;text-decoration:none}
a:hover{color:var(--magenta)}
h1,h2,h3{font-family:"Archivo Black",sans-serif;text-transform:uppercase;line-height:1.02;letter-spacing:-.01em;margin:0}
mark{background:linear-gradient(104deg,transparent 1%,var(--yellow) 5%,var(--yellow) 95%,transparent 99%);padding:0 8px;color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.mono-label{display:block;font:600 13px/1.4 "IBM Plex Mono",monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.mono-cap{font:500 14px/1.5 "IBM Plex Mono",monospace;color:var(--muted)}

/* masthead */
.masthead{border-bottom:3px solid var(--ink);padding:16px 0}
.masthead-in{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.logo-plate{display:inline-flex;flex-direction:column;background:var(--ink);padding:10px 16px;transform:rotate(-2deg);font-family:"Archivo Black",sans-serif;text-transform:uppercase;line-height:.92}
.logo-plate:hover{color:inherit;transform:rotate(-2deg) translate(-1px,-1px)}
.logo-v{font-size:21px;color:#f4efe6;text-shadow:2px 2px 0 var(--pink)}
.logo-l{font-size:21px;color:var(--yellow);letter-spacing:.42em;margin-right:-.42em}
.site-nav{display:flex;align-items:center;gap:26px;flex-wrap:wrap;font:600 14px "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase}
.site-nav a.on{box-shadow:inset 0 -6px 0 var(--yellow)}
.submit-chip{background:var(--yellow);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);padding:8px 14px;font-weight:600}
.submit-chip:hover{color:var(--ink);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}

/* buttons + chips + stickers */
.btn{display:inline-block;font:700 15px "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase;padding:14px 22px;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);background:var(--card);transition:transform .12s,box-shadow .12s}
.btn:hover{color:var(--ink);transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.btn-yellow{background:var(--yellow)}
.btn-ink{background:var(--ink);color:var(--paper);box-shadow:5px 5px 0 var(--magenta)}
.btn-ink:hover{color:var(--paper);box-shadow:7px 7px 0 var(--magenta)}
.btn-ghost{background:transparent}
.tag-chip{display:inline-block;font:600 12px "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;border:2px solid var(--ink);padding:5px 10px;background:var(--card)}
.chip-yellow{background:var(--yellow)}.chip-pink{background:var(--pink)}.chip-teal{background:var(--teal)}.chip-ink{background:var(--ink);color:var(--paper)}
.sticker{display:inline-block;font:700 13px "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;padding:10px 14px;border:2px solid var(--ink);background:var(--card)}
.sticker-pink{background:var(--magenta);color:#fff;box-shadow:4px 4px 0 var(--ink)}
.sticker-teal{background:var(--teal);color:var(--ink);box-shadow:4px 4px 0 var(--ink)}

/* hero */
.hero{overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;padding:72px 32px 64px}
.kicker{font:600 14px "IBM Plex Mono",monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--magenta);margin:0 0 18px}
.hero-title{font-size:clamp(56px,6.5vw,96px)}
.hero-sub{font-size:23px;line-height:1.55;color:#4a453d;max-width:560px;margin:26px 0 0}
.hero-ctas{display:flex;gap:18px;flex-wrap:wrap;margin-top:34px}
.hero-art{position:relative;justify-self:end;max-width:420px}
.polaroid{position:relative;margin:0;background:#fff;border:3px solid var(--ink);padding:14px;transform:rotate(2deg);box-shadow:10px 10px 0 rgba(22,20,18,.18)}
.polaroid::before{content:"";position:absolute;top:-15px;left:50%;width:120px;height:28px;background:rgba(255,228,0,.78);border:1px solid rgba(22,20,18,.25);transform:translateX(-50%) rotate(-3deg)}
.polaroid img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border:2px solid var(--ink)}
.polaroid figcaption{text-align:center;margin-top:10px}
.hero-art .sticker-pink{position:absolute;right:-16px;top:-18px;transform:rotate(7deg)}
.hero-art .sticker-teal{position:absolute;left:-20px;bottom:36px;transform:rotate(-5deg)}

/* ticker */
.ticker{border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);background:var(--ink);color:var(--paper);padding:12px 32px;font:600 15px "IBM Plex Mono",monospace;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;overflow:hidden}
.ticker span{margin:0 16px}
.ticker span:first-child{margin-left:0}

/* sections */
.section{padding:72px 0}
.section-tint{background:rgba(104,206,193,.14);border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:34px}
.section-head h2{font-size:42px}
.section-note{margin:0;font-size:18px;color:var(--muted);max-width:480px}
.view-all{font:600 14px "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;box-shadow:inset 0 -6px 0 var(--yellow)}

/* featured + index */
.featured{display:grid;grid-template-columns:1fr 1fr;border:3px solid var(--ink);background:var(--card);margin-bottom:44px}
.featured-art{margin:0;border-right:3px solid var(--ink)}
.featured-art img{display:block;width:100%;height:100%;min-height:380px;object-fit:cover}
.featured-body{padding:44px;display:flex;flex-direction:column;gap:16px;justify-content:center;align-items:flex-start}
.featured-title{font-size:34px}
.featured-dek{margin:0;font-size:19px;line-height:1.6;color:#4a453d}
.read-more{font:700 14px "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--magenta)}
.index-list{border-top:3px solid var(--ink)}
.index-row{display:grid;grid-template-columns:84px 1fr auto;gap:26px;align-items:center;padding:22px 12px;border-bottom:3px solid var(--ink);transition:background .12s}
.index-row:hover{background:rgba(255,228,0,.45);color:inherit}
.idx{font-family:"Archivo Black",sans-serif;font-size:32px;color:var(--magenta)}
.idx-body{display:flex;flex-direction:column;gap:5px}
.idx-title{font:700 23px/1.25 "Space Grotesk",sans-serif}
.idx-exc{font-size:17px;line-height:1.55;color:var(--muted)}

/* trails */
.trail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.trail-card{display:flex;flex-direction:column;border:3px solid var(--ink);background:var(--card);box-shadow:6px 6px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.trail-card:hover{color:inherit;transform:translate(-2px,-2px);box-shadow:9px 9px 0 var(--ink)}
.trail-card img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-bottom:3px solid var(--ink)}
.trail-kicker{font-family:"Archivo Black",sans-serif;font-size:22px;text-transform:uppercase;margin:18px 20px 6px}
.trail-blurb{font-size:17px;line-height:1.55;color:var(--muted);margin:0 20px 22px}

/* bands + strips */
.band{border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);padding:60px 0}
.band-yellow{background:var(--yellow)}
.band-in{display:flex;align-items:center;justify-content:space-between;gap:44px;flex-wrap:wrap}
.band h2{font-size:44px;margin:14px 0 12px}
.band p{margin:0;max-width:620px;font-size:20px}
.strip-submit{background:rgba(244,80,153,.14);border-bottom:3px solid var(--ink)}
.strip-in{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:26px 32px}
.strip-in p{margin:0;font-size:19px;color:#4a453d}

/* author */
.author-band{display:flex;align-items:center;gap:36px;flex-wrap:wrap}
.author-photo{width:150px;height:150px;border-radius:50%;object-fit:cover;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--teal);flex:none}
.author-line{font-size:22px;line-height:1.55;max-width:680px;margin:10px 0 14px}

/* partners */
.stickerwall{display:flex;flex-wrap:wrap;gap:34px 30px;align-items:flex-start;justify-content:center;padding:44px 32px 38px;border:3px solid var(--ink);background:repeating-linear-gradient(45deg,var(--card) 0 26px,rgba(22,20,18,.035) 26px 52px)}
.wall-card{position:relative;display:flex;flex-direction:column;gap:12px;background:#fff;border:2px solid var(--ink);padding:20px 22px 18px;width:240px;box-shadow:5px 5px 0 rgba(22,20,18,.25);text-decoration:none}
.wall-card::before{content:"";position:absolute;top:-13px;left:50%;transform:translateX(-50%) rotate(-4deg);width:86px;height:22px;background:rgba(255,228,0,.78);border:1px solid rgba(22,20,18,.22)}
.wall-card:nth-child(4n+1){transform:rotate(-2.2deg)}
.wall-card:nth-child(4n+2){transform:rotate(1.6deg) translateY(10px)}
.wall-card:nth-child(4n+3){transform:rotate(-1.1deg) translateY(-6px)}
.wall-card:nth-child(4n+4){transform:rotate(2.3deg) translateY(4px)}
.wall-card:hover{box-shadow:7px 7px 0 rgba(22,20,18,.3)}
.wall-logo{display:flex;align-items:center;justify-content:center;width:100%;box-sizing:border-box;min-height:76px;padding:14px 16px;border:2px solid var(--ink);background:#121013;border-radius:2px}
.wall-logo img{height:44px;width:auto;max-width:100%;object-fit:contain;object-position:center;display:block;margin:0 auto;opacity:1}
.wall-blurb{margin:0;font-size:15px;line-height:1.5;color:var(--muted)}
.wall-more > .stickerwall{margin-top:20px;border-style:dashed}
.partner-more{margin-top:18px}
.partner-more summary{cursor:pointer;font:600 14px "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);list-style:none;display:inline-block;border-bottom:3px solid var(--yellow);padding-bottom:2px}
.partner-more summary::-webkit-details-marker{display:none}
.partner-more summary::after{content:" +"}
.partner-more[open] summary::after{content:" −"}
.partner-more > .partner-grid{margin-top:18px}

/* page scaffolding */
.page-head{padding:72px 0 8px}
.page-head h1{font-size:clamp(48px,5.5vw,76px);margin:16px 0 0}
.page-dek{font-size:22px;color:var(--muted);max-width:760px;margin:20px 0 0}
.page-404{padding:110px 0 140px}
.page-404 h1{font-size:clamp(80px,11vw,150px);margin:24px 0 10px}
.page-404 p{font-size:23px;color:#4a453d;max-width:560px}

/* footer */
.site-footer{border-top:3px solid var(--ink);background:var(--ink);color:var(--paper);padding:44px 0 36px;margin-top:72px}
main + .site-footer{margin-top:0}
.footer-row{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:26px}
.footer-logo{font-family:"Archivo Black",sans-serif;font-size:20px;letter-spacing:.06em;text-transform:uppercase;text-shadow:2px 2px 0 var(--magenta)}
.footer-nav{display:flex;gap:22px;flex-wrap:wrap;font:600 13px "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase}
.footer-nav a:hover{color:var(--yellow)}
.disclaimer{margin:0 0 8px;font-size:16px;color:rgba(244,239,230,.7);max-width:760px}
.fineprint{margin:0;font:500 13px "IBM Plex Mono",monospace;color:rgba(244,239,230,.5)}

/* ============ article vocabulary ============ */
.article-page .wrap{max-width:1000px}
.article-head{padding:64px 0 34px;border-bottom:3px solid var(--ink);margin-bottom:44px}
.article-head h1{font-size:clamp(44px,5vw,68px);margin:18px 0 16px}
.article-meta{margin:0;font:500 15px "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.article-body{max-width:780px;margin:0 auto;padding-bottom:80px}
.article-body p{margin:1.3em 0}
.article-body > p:first-child{margin-top:0}
.article-body h2{font-size:34px;margin:1.9em 0 .7em}
.article-body h3{font-size:23px;margin:1.7em 0 .6em}
.article-body ul,.article-body ol{margin:1.3em 0;padding-left:1.3em}
.article-body li{margin:.5em 0}
.article-body a{text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:3px;text-underline-offset:3px}
.lead{font:500 25px/1.55 "Space Grotesk",sans-serif;color:var(--ink)}
.pullquote{margin:2.4em 0;padding:26px 30px;border:3px solid var(--ink);background:var(--card);box-shadow:7px 7px 0 var(--pink);transform:rotate(-1deg);font:700 26px/1.4 "Space Grotesk",sans-serif}
.pullquote p{margin:0}
.blockquote{margin:2.4em 0;padding:22px 28px;border:3px solid var(--ink);background:var(--card)}
.blockquote p{margin:0 0 10px;font-size:21px;font-style:italic}
.blockquote cite{font:600 14px "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase;font-style:normal;color:var(--muted)}
.callout{margin:2.4em 0;padding:22px 28px;background:var(--yellow);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);font-weight:500}
.callout p{margin:0}
.note{padding:14px 18px;background:rgba(104,206,193,.28);border:2px solid var(--ink);font-size:18px}
.datatable,.versus,.ranktable{width:100%;border-collapse:collapse;margin:2.4em 0;border:3px solid var(--ink);background:var(--card);font-size:18px}
.datatable caption,.versus caption,.ranktable caption{caption-side:top;text-align:left;font:700 23px "Space Grotesk",sans-serif;padding:0 0 12px}
.datatable th,.versus th,.ranktable th{font:600 13px "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;text-align:left;padding:12px 16px;background:var(--ink);color:var(--paper)}
.datatable td,.versus td,.ranktable td{padding:12px 16px;border-top:2px solid rgba(22,20,18,.16);vertical-align:top}
.datatable tbody tr:nth-child(even) td,.ranktable tbody tr:nth-child(even) td{background:rgba(22,20,18,.035)}
.versus th{background:var(--magenta)}
.versus td:first-child{font-weight:600}
.ranktable td:first-child{font-family:"Archivo Black",sans-serif;font-size:24px;color:var(--magenta)}
.statblock{margin:2.4em 0;padding:24px 28px;border:3px solid var(--ink);background:var(--card);box-shadow:6px 6px 0 var(--teal);font:600 24px/1.4 "Space Grotesk",sans-serif}
.stat-num{display:block;font-family:"Archivo Black",sans-serif;font-size:56px;line-height:1;color:var(--magenta)}
.stat-label{display:block;font:600 13px "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.statrow{display:flex;gap:22px;flex-wrap:wrap;margin:2.4em 0}
.statrow .statblock{flex:1;min-width:180px;margin:0}
.proscons{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:2.4em 0}
.proscons > div{border:3px solid var(--ink);background:var(--card)}
.proscons h4{margin:0;padding:12px 18px;font:700 15px "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;border-bottom:3px solid var(--ink)}
.pros h4{background:var(--teal)}
.cons h4{background:var(--pink)}
.proscons ul{list-style:none;margin:0;padding:16px 20px}
.proscons li{margin:.6em 0;padding-left:26px;position:relative;font-size:18px}
.pros li::before{content:"✓";position:absolute;left:0;font-weight:700;color:var(--magenta)}
.cons li::before{content:"✗";position:absolute;left:0;font-weight:700;color:var(--magenta)}
.article-figure,.place-figure{margin:2.6em 0}
.article-figure img,.place-figure img{display:block;width:100%;border:3px solid var(--ink);box-shadow:8px 8px 0 rgba(195,42,109,.3)}
.article-figure figcaption,.place-figure figcaption{font:500 15px/1.5 "IBM Plex Mono",monospace;color:var(--muted);margin-top:14px}
.article-figure figcaption::before{content:"↑ "}
.place-figure figcaption::before{content:"◉ ";color:var(--magenta)}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin:2.6em 0}
.gallery figure{margin:0}
.gallery img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border:3px solid var(--ink)}
.gallery figcaption{font:500 14px "IBM Plex Mono",monospace;color:var(--muted);margin-top:8px}
.brand-logo-row{display:flex;flex-wrap:wrap;gap:30px;align-items:center;margin:2.4em 0;padding:22px 28px;border:3px solid var(--ink);background:var(--card)}
.brand-logo{height:44px;width:auto;filter:grayscale(1) contrast(1.15)}
.map-figure{margin:2.6em 0;border:3px solid var(--ink);background:var(--card);padding:18px}
.map-figure svg,.map-figure img{display:block;width:100%;height:auto}
.map-figure figcaption{font:500 15px "IBM Plex Mono",monospace;color:var(--muted);margin-top:12px}
.timeline{list-style:none;margin:2.4em 0;padding:0 0 0 4px;border-left:4px solid var(--ink)}
.timeline li{position:relative;padding:0 0 24px 30px}
.timeline li::before{content:"";position:absolute;left:-14px;top:5px;width:14px;height:14px;background:var(--pink);border:3px solid var(--ink);border-radius:50%}
.t-when{display:inline-block;font:600 14px "IBM Plex Mono",monospace;background:var(--yellow);border:2px solid var(--ink);padding:2px 9px;margin-right:12px}
.profile-card{border:3px solid var(--ink);background:var(--card);box-shadow:7px 7px 0 var(--pink);max-width:380px;margin:2.4em 0}
.p-photo{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-bottom:3px solid var(--ink)}
.profile-card h3{margin:20px 24px 4px;font-size:24px}
.p-role{margin:0 24px 10px;font:600 13px "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--magenta)}
.profile-card p{margin:0 24px 22px;font-size:18px;line-height:1.55}
.steps{list-style:none;counter-reset:s;margin:2.4em 0;padding:0}
.steps li{counter-increment:s;position:relative;padding:2px 0 2px 66px;margin:0 0 20px;min-height:48px}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:0;width:48px;height:48px;display:grid;place-items:center;font-family:"Archivo Black",sans-serif;font-size:22px;background:var(--ink);color:var(--yellow)}
.checklist{list-style:none;margin:2.4em 0;padding:0}
.checklist li{position:relative;padding:2px 0 2px 42px;margin:0 0 14px}
.checklist li::before{content:"✓";position:absolute;left:0;top:2px;width:26px;height:26px;display:grid;place-items:center;font-weight:700;font-size:16px;background:var(--teal);border:2px solid var(--ink)}
.faq{margin:2.4em 0}
.faq details{border:3px solid var(--ink);background:var(--card);margin-bottom:14px}
.faq summary{cursor:pointer;padding:16px 22px;font:700 20px "Space Grotesk",sans-serif;list-style:none;position:relative;padding-right:52px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);font-family:"Archivo Black",sans-serif;font-size:24px;color:var(--magenta)}
.faq details[open] summary{background:var(--yellow);border-bottom:3px solid var(--ink)}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:16px 22px;margin:0}
.tabs{margin:2.4em 0}
.tabs > input{position:absolute;opacity:0;pointer-events:none}
.tabs > label{display:inline-block;cursor:pointer;font:600 14px "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase;border:2px solid var(--ink);padding:9px 15px;margin:0 10px 10px 0;background:var(--card)}
.tabs > input:checked + label{background:var(--yellow);box-shadow:3px 3px 0 var(--ink)}
.tabs > input:focus-visible + label{outline:3px solid var(--magenta)}
.tab-panels > section{display:none;border:3px solid var(--ink);background:var(--card);padding:22px 26px;margin-top:6px}
.tabs > input:nth-of-type(1):checked ~ .tab-panels > section:nth-child(1),
.tabs > input:nth-of-type(2):checked ~ .tab-panels > section:nth-child(2),
.tabs > input:nth-of-type(3):checked ~ .tab-panels > section:nth-child(3),
.tabs > input:nth-of-type(4):checked ~ .tab-panels > section:nth-child(4){display:block}
.chart{margin:2.6em 0;border:3px solid var(--ink);background:var(--card);padding:24px}
.chart svg{display:block;width:100%;height:auto}
.chart figcaption{font:500 15px "IBM Plex Mono",monospace;color:var(--muted);margin-top:14px}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;margin:2.8em 0 0}
.further-grid a{display:flex;flex-direction:column;gap:12px;padding:22px;border:3px solid var(--ink);background:var(--card);box-shadow:5px 5px 0 var(--ink);text-decoration:none;transition:transform .12s,box-shadow .12s}
.further-grid a:hover{color:inherit;transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.f-tag{align-self:flex-start;font:600 12px "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;border:2px solid var(--ink);background:var(--pink);padding:4px 9px}
.f-t{font:700 19px/1.35 "Space Grotesk",sans-serif}

/* contact form */
.contact-form{margin:2.6em 0;display:grid;gap:20px;max-width:640px}
.contact-form label{display:grid;gap:9px;font:600 13px "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.contact-form input,.contact-form textarea{font:400 19px "Work Sans",sans-serif;color:var(--ink);padding:14px 16px;border:3px solid var(--ink);background:var(--card);border-radius:0}
.contact-form input:focus,.contact-form textarea:focus{outline:4px solid var(--yellow)}
.contact-form button{justify-self:start;cursor:pointer}

/* styleguide */
.sg-item{margin:0 0 60px;padding-top:28px;border-top:3px solid var(--ink)}
.sg-label{display:inline-block;font:700 14px "IBM Plex Mono",monospace;letter-spacing:.1em;background:var(--ink);color:var(--paper);padding:6px 12px;margin-bottom:24px}

@media(max-width:960px){
.hero-grid{grid-template-columns:1fr;padding:52px 32px 44px}
.hero-art{justify-self:start;margin-top:20px}
.featured{grid-template-columns:1fr}
.featured-art{border-right:none;border-bottom:3px solid var(--ink)}
.trail-grid{grid-template-columns:1fr}

.proscons{grid-template-columns:1fr}
.index-row{grid-template-columns:60px 1fr;gap:16px}
.index-row .tag-chip{display:none}
}

/* mobile-tight */
@media(max-width:640px){
body{font-size:19px}
.wrap{padding:0 20px}
.masthead{padding:14px 0}
.masthead-in{gap:14px}
.logo-plate{padding:8px 12px}
.logo-v,.logo-l{font-size:17px}
.site-nav{gap:14px 18px;font-size:12.5px}
.submit-chip{padding:7px 11px}
.hero-grid{padding:36px 20px 32px;gap:36px}
.hero-title{font-size:44px}
.hero-sub{font-size:19px;margin-top:18px}
.hero-ctas{gap:14px;margin-top:26px}
.btn{padding:12px 18px;font-size:14px}
.hero-art{max-width:260px}
.hero-art .sticker-pink{right:-8px;top:-14px}
.hero-art .sticker-teal{left:-10px}
.sticker{font-size:11.5px;padding:8px 11px}
.ticker{padding:10px 20px;font-size:13px}
.ticker span{margin:0 10px}
.section{padding:44px 0}
.section-head{margin-bottom:24px}
.section-head h2{font-size:31px}
.section-note{font-size:16px}
.featured-body{padding:26px 22px;gap:12px}
.featured-title{font-size:25px}
.featured-dek{font-size:17px}
.featured-art img{min-height:220px}
.index-row{padding:16px 6px;gap:12px;grid-template-columns:48px 1fr}
.idx{font-size:24px}
.idx-title{font-size:18px}
.idx-exc{font-size:15px}
.trail-kicker{font-size:19px;margin:14px 16px 4px}
.trail-blurb{font-size:15.5px;margin:0 16px 18px}
.band{padding:36px 0}
.band h2{font-size:30px}
.band p{font-size:17px}
.strip-in{padding:20px 0}
.strip-in p{font-size:17px}
.author-band{gap:22px}
.author-photo{width:104px;height:104px}
.author-line{font-size:18px}
.stickerwall{padding:32px 16px 28px;gap:26px 18px}
.wall-card{width:100%;max-width:300px;padding:16px 18px 14px}
.page-head{padding:48px 0 4px}
.page-404{padding:70px 0 90px}
.site-footer{padding:32px 0 28px;margin-top:44px}
.footer-row{margin-bottom:18px}
.disclaimer{font-size:14.5px}
.article-head{padding:44px 0 24px;margin-bottom:30px}
.article-head h1{font-size:36px}
.article-meta{font-size:13px}
.article-body{padding-bottom:56px}
.article-body h2{font-size:26px}
.article-body h3{font-size:20px}
.lead{font-size:21px}
.pullquote{font-size:21px;padding:20px 22px}
.blockquote{padding:18px 20px}
.blockquote p{font-size:18px}
.callout{padding:18px 20px}
.note{font-size:16px}
.datatable,.versus,.ranktable{display:block;overflow-x:auto;font-size:16px}
.datatable th,.versus th,.ranktable th,.datatable td,.versus td,.ranktable td{padding:10px 12px}
.statblock{padding:18px 20px;font-size:20px}
.stat-num{font-size:42px}
.statrow{gap:14px}
.steps li{padding-left:56px}
.steps li::before{width:40px;height:40px;font-size:18px}
.faq summary{font-size:17px;padding:13px 16px;padding-right:46px}
.faq details p{padding:13px 16px}
.tab-panels > section{padding:16px 18px}
.chart{padding:16px}
.timeline li{padding:0 0 20px 24px}
.profile-card{max-width:none}
.p-links{margin:0 18px 16px}
.profile-card h3{margin:16px 18px 4px}
.profile-card p,.p-role{margin-left:18px;margin-right:18px}
.p-attr{padding:9px 18px 12px}
.page-head h1{font-size:38px}
.page-dek{font-size:18px}
.page-404 h1{font-size:72px}
.page-404 p{font-size:19px}
.contact-form input,.contact-form textarea{font-size:17px;padding:12px 13px}
.sg-item{margin-bottom:44px}
}

/* figure references + maps (Design 1A patch) */
.map-figure{margin:2.6em 0;border:3px solid var(--ink);background:var(--card);padding:16px;box-shadow:7px 7px 0 var(--teal)}
.map-figure svg,.map-figure img{display:block;width:100%;height:auto;border:2px solid var(--ink)}
.map-figure figcaption{display:flex;align-items:baseline;gap:10px;font:500 15px/1.5 "IBM Plex Mono",monospace;color:var(--muted);margin-top:14px}
.map-figure figcaption::before{content:"\25C9";color:var(--magenta);flex:none}
.map-figure .m-attr{margin-left:auto;font-size:12px;color:rgba(107,101,92,.75);text-align:right}
.profile-card{position:relative;border:3px solid var(--ink);background:var(--card);box-shadow:7px 7px 0 var(--pink);max-width:380px;margin:2.4em 0;transform:rotate(-.6deg)}
.profile-card::before{content:"";position:absolute;top:-14px;left:50%;transform:translateX(-50%) rotate(-4deg);width:96px;height:24px;background:rgba(255,228,0,.78);border:1px solid rgba(22,20,18,.22);z-index:1}
.p-photo{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-bottom:3px solid var(--ink)}
.profile-card h3{margin:20px 24px 4px;font-size:24px}
.p-role{margin:0 24px 12px;font:600 13px "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--magenta)}
.profile-card p{margin:0 24px 20px;font-size:18px;line-height:1.55}
.profile-card.no-photo{border-top:14px solid var(--ink);background:linear-gradient(180deg,rgba(255,228,0,.32) 0,rgba(255,228,0,0) 96px),var(--card)}
.profile-card.no-photo h3{margin-top:24px}
.p-links{display:flex;flex-wrap:wrap;gap:10px;margin:0 24px 20px;padding:0}
.p-links a{font:600 12px "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;border:2px solid var(--ink);background:var(--card);padding:5px 10px;box-shadow:2px 2px 0 var(--ink)}
.p-links a:hover{color:var(--ink);background:var(--yellow);transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.p-attr{margin:0;padding:10px 24px 14px;border-top:2px dashed rgba(22,20,18,.3);font:500 12px/1.5 "IBM Plex Mono",monospace;color:rgba(107,101,92,.8)}

/* ticker marquee (CSS-only, reduced-motion aware) */
.ticker{overflow:hidden}
.ticker-track{display:inline-flex;white-space:nowrap;animation:tickerscroll 32s linear infinite;will-change:transform}
.ticker-seq{display:inline-block;padding-right:0}
@keyframes tickerscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none;justify-content:center;width:100%}}

/* profile-grid layout (velvet 1A; future domains via PALETTE_SPEC) */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;align-items:start;margin:2.6em 0}
.profile-grid .profile-card{max-width:none;margin:0}

/* ===== pipeline mobile-gutter guard (finalize) — content never touches the screen edge ===== */
@media (max-width:680px){
  .wrap,.wrap-wide,.container,.hero-inner,.footer-inner,.footer-bottom,.article-inner,.climate-inner,.nav,
  [class$="-inner"],[class*="-inner "]{
    padding-left:max(18px,env(safe-area-inset-left,0px))!important;
    padding-right:max(18px,env(safe-area-inset-right,0px))!important;
  }
}

/* op-article-width: the article column was capped at 780px (76 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through max-width 780px (declared in .article-body) to ~91 characters per line in this build's own prose font, never past the edge Design's own content already reaches beside it. The layout has no room to grow above 1600, so this width holds there. Nothing below 1024 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1024px){
  article.article-body{max-width:min(1052px, 100%)!important}
}
/* op-article-width:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(article.article-body > figure.article-figure > img,
  div.featured > figure.featured-art > img,
  div.hero-art > figure.polaroid > img,
  div.profile-grid > div.profile-card > img.p-photo,
  div.trail-grid > a.trail-card > img,
  section.section > div.author-band.wrap > img.author-photo){height:auto}
/* op-img-dims:end */