:root{--ink:#15130f;--paper:#f2ead7;--light:#fffaf0;--yellow:#f1c84b;--rust:#a43f27;--beer:#c47a27;--blue:#253d4a;--muted:#736958;--rule:3px solid var(--ink);--shadow:8px 8px 0 var(--ink)} *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--paper);font-family:"Arial Narrow","Helvetica Neue",Arial,sans-serif;line-height:1.5;overflow-x:hidden}body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.18;background-image:radial-gradient(circle at 18% 22%,rgba(21,19,15,.22) 0 1px,transparent 1.3px),radial-gradient(circle at 72% 66%,rgba(255,255,255,.7) 0 1px,transparent 1.4px);background-size:7px 7px,11px 11px;mix-blend-mode:multiply}a{color:inherit}img{max-width:100%;display:block}:focus-visible{outline:4px solid var(--yellow);outline-offset:4px}.skip{position:fixed;z-index:120;left:1rem;top:-5rem;padding:.7rem 1rem;background:var(--yellow);border:2px solid var(--ink);font-weight:900}.skip:focus{top:1rem} .site-header{position:absolute;inset:0 0 auto;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.25rem clamp(1.1rem,4vw,4.5rem);color:var(--light);border-bottom:1px solid rgba(255,250,240,.28)}.mini-mark{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;font-weight:950;letter-spacing:.08em;text-transform:uppercase}.mini-mark:before{content:"SD";display:grid;place-items:center;width:2.25rem;aspect-ratio:1;color:var(--ink);background:var(--yellow);border:2px solid var(--light);transform:rotate(-3deg);letter-spacing:-.08em}.site-nav{display:flex;align-items:center;gap:clamp(1rem,2.7vw,2.5rem)}.site-nav a{font-size:.76rem;font-weight:900;letter-spacing:.13em;text-decoration:none;text-transform:uppercase}.site-nav a:hover{color:var(--yellow)} .hero{position:relative;min-height:100svh;display:grid;align-items:end;isolation:isolate;overflow:hidden;background:#17130e;color:var(--light)}.hero-art{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:62% center;filter:saturate(.9) contrast(1.05)}.hero:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(10,8,6,.96) 0%,rgba(10,8,6,.78) 34%,rgba(10,8,6,.18) 68%,rgba(10,8,6,.15) 100%),linear-gradient(0deg,rgba(10,8,6,.9) 0%,transparent 42%)}.hero:after{content:"";position:absolute;z-index:0;left:0;right:0;bottom:-1px;height:28px;background:var(--paper);clip-path:polygon(0 45%,4% 70%,8% 35%,13% 64%,18% 28%,24% 68%,30% 37%,36% 62%,43% 32%,49% 68%,56% 38%,63% 66%,70% 34%,77% 70%,84% 33%,91% 63%,96% 38%,100% 60%,100% 100%,0 100%)}.hero-inner{width:min(1320px,100%);margin:0 auto;padding:clamp(8rem,16vh,12rem) clamp(1.25rem,5vw,5rem) clamp(4.3rem,8vh,6rem)}.badge{display:inline-block;margin:0 0 1.1rem;padding:.48rem .76rem .4rem;color:var(--ink);background:var(--yellow);border:3px solid var(--ink);box-shadow:4px 4px 0 rgba(255,255,255,.92);font-size:clamp(.7rem,1vw,.84rem);font-weight:950;letter-spacing:.14em;text-transform:uppercase;transform:rotate(-1.5deg)}.eyebrow{margin:0;color:var(--yellow);font-size:clamp(.8rem,1.35vw,1.05rem);font-weight:950;letter-spacing:.24em;text-transform:uppercase}.hero h1{max-width:8.5ch;margin:.2rem 0 .75rem;font-family:Impact,Haettenschweiler,"Arial Black",sans-serif;font-size:clamp(4.3rem,11.5vw,10.8rem);font-weight:900;line-height:.78;letter-spacing:-.055em;text-transform:uppercase;text-wrap:balance;transform:skew(-3deg);text-shadow:5px 5px 0 var(--ink)}.hero-subtitle{display:inline-block;margin:.4rem 0 1.2rem;padding:.22rem .75rem;color:var(--ink);background:var(--light);font-size:clamp(1rem,2vw,1.7rem);font-weight:950;letter-spacing:.075em;text-transform:uppercase;transform:rotate(.5deg)}.hero-copy{max-width:42rem;margin:0;color:#f2ead7;font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.05rem,1.7vw,1.45rem);line-height:1.45}.hero-copy strong{color:var(--yellow);font-family:Arial,sans-serif;text-transform:uppercase}.hero-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem}.button{display:inline-flex;align-items:center;justify-content:center;min-height:3.25rem;padding:.8rem 1.2rem;border:3px solid currentColor;font-size:.82rem;font-weight:950;letter-spacing:.11em;text-decoration:none;text-transform:uppercase;transition:transform .15s ease,box-shadow .15s ease}.button-primary{color:var(--ink);background:var(--yellow);box-shadow:5px 5px 0 var(--light)}.button-secondary{color:var(--light);background:rgba(15,13,10,.5)}.button:hover{transform:translate(-2px,-2px) rotate(-.4deg)}.button-primary:hover{box-shadow:8px 8px 0 var(--light)}.hero-proof{display:flex;flex-wrap:wrap;gap:.65rem 1.5rem;margin:2.7rem 0 0;padding:0;list-style:none;color:#d6cdbb;font-size:.75rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.hero-proof li:before{content:"✦";margin-right:.55rem;color:var(--yellow)} .marquee{overflow:hidden;padding:.72rem 0 .6rem;color:var(--light);background:var(--rust);border-block:var(--rule);transform:rotate(-.35deg) scale(1.01)}.marquee-track{width:max-content;font-size:clamp(.82rem,1.4vw,1.05rem);font-weight:950;letter-spacing:.13em;text-transform:uppercase;animation:ticker 28s linear infinite}.marquee-track span{padding-right:1.2rem}@keyframes ticker{to{transform:translateX(-50%)}} .section{padding:clamp(4.5rem,10vw,8.5rem) clamp(1.25rem,5vw,5rem)}.section-inner{width:min(1200px,100%);margin:0 auto}.kicker{margin:0 0 .55rem;color:var(--rust);font-size:.78rem;font-weight:950;letter-spacing:.2em;text-transform:uppercase}.display-title{max-width:14ch;margin:0;font-family:Impact,Haettenschweiler,"Arial Black",sans-serif;font-size:clamp(3rem,7vw,6.6rem);line-height:.88;letter-spacing:-.035em;text-transform:uppercase}.section-lead{max-width:58rem;margin:1.2rem 0 0;color:var(--muted);font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.05rem,1.7vw,1.35rem)} .manifesto{background:var(--paper)}.manifesto-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(2rem,6vw,6rem);align-items:center}.quote-card{position:relative;padding:clamp(2rem,5vw,4.2rem);background:var(--yellow);border:var(--rule);box-shadow:var(--shadow);transform:rotate(-1.2deg)}.quote-card:before{content:"“";position:absolute;top:-2.6rem;left:1rem;font-family:Georgia,serif;font-size:9rem;line-height:1;opacity:.18}.quote-card blockquote{margin:0;font-family:Impact,Haettenschweiler,"Arial Black",sans-serif;font-size:clamp(2.4rem,5vw,5.4rem);line-height:.95;letter-spacing:-.02em;text-transform:uppercase}.quote-card cite{display:block;margin-top:1.4rem;font-size:.8rem;font-style:normal;font-weight:950;letter-spacing:.15em;text-transform:uppercase}.trait-list{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin:2rem 0 0;padding:0;list-style:none}.trait-list li{padding:.85rem 1rem;background:var(--light);border:2px solid var(--ink);font-size:.78rem;font-weight:950;letter-spacing:.08em;text-transform:uppercase} .formula{color:var(--light);background:var(--blue);border-block:var(--rule)}.formula .kicker{color:var(--yellow)}.formula .section-lead{color:#d7d0c0}.panel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,1.5rem);margin-top:3.2rem;counter-reset:panels}.panel-card{min-height:18rem;display:flex;flex-direction:column;justify-content:space-between;padding:1.2rem;color:var(--ink);background:var(--light);border:var(--rule);box-shadow:6px 6px 0 rgba(0,0,0,.55);counter-increment:panels}.panel-card:nth-child(even){transform:translateY(1rem) rotate(.5deg)}.panel-number{width:2.4rem;height:2.4rem;display:grid;place-items:center;background:var(--yellow);border:2px solid var(--ink);font-family:Impact,sans-serif;font-size:1.35rem}.panel-number:after{content:counter(panels)}.panel-card h3{margin:2rem 0 .5rem;font-family:Impact,Haettenschweiler,"Arial Black",sans-serif;font-size:2rem;line-height:1;text-transform:uppercase}.panel-card p{margin:0;color:var(--muted);font-family:Georgia,serif}.panel-tag{margin-top:2rem;padding-top:.8rem;border-top:2px solid var(--ink);font-size:.7rem;font-weight:950;letter-spacing:.1em;text-transform:uppercase} .featured{background:var(--light)}.featured-head{display:flex;justify-content:space-between;gap:2rem;align-items:end;margin-bottom:2.5rem}.issue-stamp{flex:0 0 auto;padding:.65rem .8rem;background:var(--yellow);border:2px solid var(--ink);font-weight:950;letter-spacing:.1em;text-transform:uppercase;transform:rotate(2deg)}.comic-frame{position:relative;padding:clamp(.55rem,1.5vw,1.1rem);background:var(--ink);box-shadow:12px 12px 0 var(--rust)}.comic-frame img{width:100%;background:var(--paper)}.comic-caption{display:flex;gap:1rem;align-items:center;justify-content:space-between;margin-top:1.6rem;padding:1.2rem 0 0;border-top:2px solid var(--ink)}.comic-caption p{margin:0;font-family:Georgia,serif;color:var(--muted)}.comic-caption strong{color:var(--ink);font-family:Arial,sans-serif;text-transform:uppercase} .episodes{background:var(--paper)}.episode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:3rem}.episode-card{position:relative;min-height:22rem;padding:1.6rem;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;color:var(--light);background:var(--ink);border:var(--rule);text-decoration:none}.episode-card:before{content:"";position:absolute;inset:0;opacity:.22;background:repeating-linear-gradient(0deg,transparent 0 5px,rgba(255,255,255,.13) 5px 6px),radial-gradient(circle at 70% 22%,var(--beer),transparent 34%)}.episode-card.has-art:before{opacity:.38;background:linear-gradient(0deg,rgba(10,8,6,.96) 0%,rgba(10,8,6,.35) 72%),var(--episode-art) center/cover no-repeat}.episode-card:nth-child(2):before{background:repeating-radial-gradient(circle at 20% 30%,transparent 0 8px,rgba(241,200,75,.45) 9px 11px)}.episode-card:nth-child(2).has-art:before{background:linear-gradient(0deg,rgba(10,8,6,.96) 0%,rgba(10,8,6,.35) 72%),var(--episode-art) center/cover no-repeat}.episode-card:nth-child(3):before{background:linear-gradient(145deg,transparent 40%,rgba(164,63,39,.8)),repeating-linear-gradient(45deg,transparent 0 9px,rgba(255,255,255,.1) 10px 11px)}.episode-card:nth-child(3).has-art:before{background:linear-gradient(0deg,rgba(10,8,6,.96) 0%,rgba(10,8,6,.35) 72%),var(--episode-art) center/cover no-repeat}.episode-card>*{position:relative}.episode-card small{color:var(--yellow);font-size:.72rem;font-weight:950;letter-spacing:.14em;text-transform:uppercase}.episode-card h3{margin:.6rem 0 .8rem;font-family:Impact,sans-serif;font-size:clamp(2rem,3vw,3.2rem);line-height:.95;text-transform:uppercase}.episode-card p{margin:0;color:#d9d0bd;font-family:Georgia,serif}.episode-card .episode-action{display:inline-block;margin-top:1rem;color:var(--yellow);font-size:.68rem;font-weight:950;letter-spacing:.12em;text-transform:uppercase}.episode-card[href]:hover{transform:translate(-3px,-3px);box-shadow:7px 7px 0 var(--rust)}.episode-error{grid-column:1/-1;padding:1rem;background:var(--light);border:2px solid var(--ink);font-weight:900} .thought{padding-block:clamp(4rem,8vw,7rem);background:var(--rust);border-block:var(--rule)}.thought-card{width:min(980px,100%);margin:0 auto;padding:clamp(2rem,5vw,4rem);background:var(--yellow);border:4px solid var(--ink);box-shadow:12px 12px 0 var(--ink);text-align:center;transform:rotate(.5deg)}.thought-card small{display:block;font-size:.8rem;font-weight:950;letter-spacing:.16em;text-transform:uppercase}.thought-card p{margin:.7rem auto 0;font-family:Impact,sans-serif;font-size:clamp(2.5rem,7vw,6.5rem);line-height:.94;text-transform:uppercase} .site-footer{padding:4rem clamp(1.25rem,5vw,5rem) 2.2rem;color:var(--light);background:var(--ink)}.footer-inner{width:min(1200px,100%);margin:0 auto}.footer-line{max-width:18ch;margin:0;font-family:Impact,sans-serif;font-size:clamp(2.5rem,6vw,5.5rem);line-height:.9;text-transform:uppercase}.footer-line span{color:var(--yellow)}.footer-bottom{display:flex;justify-content:space-between;gap:1.5rem;margin-top:4rem;padding-top:1.3rem;border-top:1px solid #6e6659;color:#a99f8d;font-size:.72rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase}.footer-bottom a{color:var(--light);text-decoration-color:var(--yellow);text-underline-offset:.25rem}.reveal{opacity:0;transform:translateY(26px);transition:opacity .65s ease,transform .65s ease}.reveal.visible{opacity:1;transform:none} @media(max-width:980px){.manifesto-grid{grid-template-columns:1fr}.quote-card{max-width:42rem}.panel-grid{grid-template-columns:1fr 1fr}.episode-grid{grid-template-columns:1fr}.episode-card{min-height:18rem}.hero-art{object-position:66% center}.hero:before{background:linear-gradient(90deg,rgba(10,8,6,.95),rgba(10,8,6,.58) 56%,rgba(10,8,6,.22)),linear-gradient(0deg,rgba(10,8,6,.9),transparent 50%)}} @media(max-width:680px){.site-header{align-items:flex-start;padding-top:1rem}.mini-mark span{display:none}.site-nav{gap:.8rem}.site-nav a{font-size:.64rem}.site-nav a:first-child{display:none}.hero{min-height:920px;align-items:end}.hero-art{object-position:68% top;height:64%}.hero:before{background:linear-gradient(0deg,rgba(10,8,6,1) 0%,rgba(10,8,6,.95) 42%,rgba(10,8,6,.05) 78%),linear-gradient(90deg,rgba(10,8,6,.5),transparent)}.hero-inner{padding-top:24rem;padding-bottom:4.2rem}.hero h1{font-size:clamp(4rem,20vw,6rem)}.hero-actions{align-items:stretch;flex-direction:column}.button{width:100%}.trait-list,.panel-grid{grid-template-columns:1fr}.panel-card:nth-child(even){transform:none}.featured-head,.comic-caption,.footer-bottom{align-items:flex-start;flex-direction:column}.issue-stamp{align-self:flex-start}.comic-frame{box-shadow:7px 7px 0 var(--rust)}.thought-card{box-shadow:7px 7px 0 var(--ink)}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}} .reveal{opacity:1;transform:none} /* --------------------------------------------------------------------------- Episode pages (comics/-/index.html) --------------------------------------------------------------------------- */ /* [hidden] IS NOT ENOUGH ON ITS OWN HERE. The browser's own [hidden]{display:none} is a user-agent rule, and .button{display:inline-flex} is an author rule, so the author rule wins and a hidden button renders anyway. That is exactly what happened: with one published episode, PREVIOUS and NEXT showed as dead grey buttons pointing at /#episodes. This is more specific than .button, so it wins without needing !important. */ .button[hidden], [hidden] { display: none !important; } /* The gap Steve asked for, and the reason it is a min() of two things: the thought card above carries a 12px offset drop-shadow, so a margin smaller than that would still LOOK flush even though the boxes do not touch. This clears the shadow at every viewport width regardless of how much text is in the card. */ .episode-nav { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; align-items: center; margin: clamp(2.5rem, 6vw, 4rem) auto 0; padding-top: 1rem; } .episode-nav .button { width: auto; min-width: 10rem; } /* Sharing. Plain links to each service's share URL — NO third-party widgets. An official share button loads a tracking script from someone else's server onto a page about political satire, which is a poor trade for a rounded corner. */ .episode-share { margin: clamp(2rem, 5vw, 3rem) auto 0; padding-top: clamp(1.5rem, 4vw, 2.5rem); border-top: 2px solid var(--ink); text-align: center; } .episode-share .kicker { margin: 0 0 1rem; } .share-list { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin: 0; padding: 0; list-style: none; } .share-list a, .share-list button { display: inline-flex; align-items: center; gap: .4rem; padding: .6rem 1rem; min-height: 2.75rem; background: var(--light); color: var(--ink); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); font-family: inherit; font-size: .74rem; font-weight: 950; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; } .share-list a:hover, .share-list button:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); } .share-list a:active, .share-list button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); } .share-list button.copied { background: var(--yellow); } @media (max-width: 680px) { .episode-nav .button { width: 100%; } } /* Episode-page-only overrides. Scoped under .episode on purpose: .thought-card and .comic-caption are shared with the homepage's featured section, and the homepage design is not mine to change. */ /* The label and the quote were originally crammed into one

, so the whole lot inherited the homepage pull-quote size of up to 6.5rem and filled the screen. The label now uses .thought-card small, which the stylesheet already styles for exactly this, and the quote is sized as a supporting note rather than as the hero of the page — the comic itself already says it, legibly, in panel 4. */ .episode .thought-card { width: min(760px, 100%); padding: clamp(1.4rem, 3vw, 2.2rem); } .episode .thought-card p { font-size: clamp(1.25rem, 2.6vw, 2rem); line-height: 1.08; margin-top: .5rem; } /* Room between the strip and its caption. The comic frame carries a 12px offset drop-shadow, so the old 1.6rem left the rule sitting almost on top of it. */ .episode .comic-caption { margin-top: clamp(2.2rem, 4vw, 3.2rem); padding-top: clamp(1.4rem, 3vw, 2rem); } /* And room between the caption and the thought card below it. */ .episode figure + .thought-card { margin-top: clamp(2.2rem, 5vw, 3.5rem); } /* --------------------------------------------------------------------------- The archive page (/comics/index.html) and the routes into it --------------------------------------------------------------------------- Every "episodes" link on this site used to be an in-page anchor to /#episodes, a teaser grid on the home page which by design excludes the featured strip. So the nav, and the primary button on every comic page, both led back to the page you came from, and the hero comic was reachable only by clicking artwork that carried no visible cue. /comics/ is the page that was missing. */ .archive-cta { margin-top: clamp(2.5rem, 6vw, 4rem); text-align: center; } /* The archive page's own grid is generated server-side, so unlike the home page it needs no .reveal handling and renders complete with scripts blocked. */ .archive .episode-grid { margin-top: 2.5rem; } .archive .episode-card h2 { margin: .6rem 0 .8rem; font-family: Impact, sans-serif; font-size: clamp(2rem, 3vw, 3.2rem); line-height: .95; text-transform: uppercase; } /* THE HEADER WAS INVISIBLE ON EVERY PAGE THAT IS NOT THE HOME PAGE, and had been since the comic pages shipped. .site-header is position:absolute with color:var(--light), because it was designed to sit over the dark hero photograph. The comic pages and this one have no hero, so cream text sat on a cream background: "Meet Skid", "Episodes" and "Home" were unreadable on the LIVE site, verified 2026-08-26. Only the SD mark showed, because it carries its own yellow block. Steve reported the site as having no links to the published comics; some of them were there and could not be seen. */ .episode .site-header, .archive .site-header { color: var(--ink); border-bottom-color: rgba(18, 15, 12, .28); } /* Yellow-on-cream is the same mistake one shade over, so the light pages get the rust accent for hover and for the current page instead. */ .episode .site-nav a:hover, .archive .site-nav a:hover, .episode .site-nav a[aria-current="page"], .archive .site-nav a[aria-current="page"] { color: var(--rust); } /* The nav entry for the page you are already on. Marked rather than hidden: aria-current tells a screen reader, this tells everyone else. */ .site-nav a[aria-current="page"] { color: var(--yellow); } .episode-empty { margin-top: 2.5rem; padding: clamp(1.5rem, 4vw, 2.5rem); background: var(--light); border: var(--rule); font-family: Georgia, serif; } .episode-empty p { margin: 0; } /* THE PAIRING THAT MUST NOT BE SPLIT. Episode pages set width="1536" height="1024" on the comic, which is good practice — it reserves the right space and stops the page jumping as the image loads. But the shared rule above sets only `width:100%`, so the browser took width from CSS and HEIGHT FROM THE ATTRIBUTE: 100% wide by a literal 1024px tall. On a phone that is a 3:2 comic crammed into a 350x1024 box, with every face stretched. It looked almost right on desktop, which is why it took a mobile screenshot to catch. height:auto restores the intrinsic ratio and is a no-op on the homepage, whose image carries no such attributes — but it means adding them there later cannot reintroduce this. */ .comic-frame img { height: auto; } /* --------------------------------------------------------------------------- Enlarge the comic on tap. --------------------------------------------------------------------------- */ /* The image is wrapped in a real