/* The blog in the GeniusID comic style (8 Nov 2026, Joshua liked the comic mockups for /blog and its posts). global.css + galaxy-site.css supply the fonts, header, footer, sky, .shell, .eyebrow and .text-link. This file draws the blog's paper objects as comic panels, the same as id.iduhgenius.com's signed-in page: heavy ink borders, caption boxes, and a coloured offset ledge per post (blog-tone.mjs picks it). Stories sit on night panels. The post text itself is unchanged: only the page around it is styled here. */ /* The headline's italic second line (display-em) needs Newsreader's italic face. global.css loads only the upright one, and Astro would inline a small font stylesheet, which the site's CSP (style-src 'self') blocks, so it lives here. */ @font-face { font-family: "Newsreader Variable"; font-style: italic; font-display: swap; font-weight: 200 800; src: url("/blog/assets/newsreader-latin-wght-italic.woff2") format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } .blog-page { --sky: #10132b; /* galaxy-ink */ --heading: #fffaf4; /* heading (dark) */ --text: #f8f5ee; --text-muted: #e0e0e7; /* 13.9:1 on the sky */ --eyebrow-text: #e9dcc1; --gold-rule: #e7bd82; --link-rule: #d6a981; --link-rule-hover: #fff7e6; --card: #fffdf7; /* paper */ --card-line: #ece9df; --card-text: #17184b; /* ink, 16.4:1 on paper */ --card-muted: #48496c; /* ink-soft, 8.4:1 on paper */ --coral-ink: #a4493d; /* 5.8:1 on paper */ --ink-line: #0b0d24; /* comic panel borders */ --night-panel: #1d2160; --lavender: #b9a8ff; --sage: #91b895; --coral: #ff806f; --gold: #e7bd82; /* ledges and caption boxes; ink on each is 7:1+ */ --serif: "Newsreader Variable", Georgia, serif; } .blog-page main { padding-bottom: 40px; } /* ---------- Comic parts ---------- */ .tone-lav { --ledge: var(--lavender); --cap: var(--lavender); } .tone-sage { --ledge: var(--sage); --cap: var(--sage); } .tone-coral { --ledge: var(--coral); --cap: var(--coral); } .tone-gold { --ledge: var(--gold); --cap: var(--gold); } .comic-panel { position: relative; min-width: 0; background: var(--card); color: var(--card-text); border: 4px solid var(--ink-line); border-radius: 6px; box-shadow: 8px 8px 0 var(--ledge, var(--lavender)); color-scheme: light; } .comic-dots { background-image: radial-gradient(#17184b1c 1.3px, transparent 1.5px); background-size: 9px 9px; } .comic-night { border-color: var(--heading); background-color: var(--night-panel); background-image: radial-gradient(#b9a8ff38 1.6px, transparent 1.8px); background-size: 13px 13px; color: var(--text); color-scheme: dark; } .comic-cap { display: inline-block; margin: 0; padding: 6px 11px; border: 2.5px solid var(--ink-line); background: var(--cap, var(--gold)); color: var(--card-text); font-size: 0.72rem; font-weight: 850; letter-spacing: 0.14em; line-height: 1.3; text-transform: uppercase; } .comic-cap.cap-paper { background: var(--card); } .comic-button { display: inline-flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 18px; border: 3px solid var(--ink-line); border-radius: 10px; background: var(--card); color: var(--card-text); font-size: 0.9rem; font-weight: 800; text-decoration: none; box-shadow: 4px 4px 0 var(--ink-line); transition: transform 0.2s, box-shadow 0.2s; } .comic-button:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink-line); } .comic-button:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink-line); } .comic-button.is-lit { background: var(--gold); } .bubble { position: relative; margin: 0; padding: 18px 22px; border: 3px solid var(--ink-line); border-radius: 28px; background: var(--card); color: var(--card-text); font-size: 1.04rem; font-weight: 600; line-height: 1.5; } .bubble::after { content: ""; position: absolute; left: -22px; bottom: 30px; width: 34px; height: 26px; background: var(--card); border-left: 3px solid var(--ink-line); border-bottom: 3px solid var(--ink-line); transform: skewY(-28deg) rotate(8deg); } .burst { position: absolute; right: -14px; top: -18px; z-index: 2; display: grid; place-items: center; width: 92px; height: 92px; background: var(--coral); color: var(--card-text); font-size: 0.78rem; font-weight: 850; line-height: 1.05; letter-spacing: 0.1em; text-align: center; text-transform: uppercase; transform: rotate(10deg); clip-path: polygon(50% 0, 61% 13%, 77% 6%, 79% 22%, 95% 24%, 88% 39%, 100% 50%, 88% 61%, 95% 76%, 79% 78%, 77% 94%, 61% 87%, 50% 100%, 39% 87%, 23% 94%, 21% 78%, 5% 76%, 12% 61%, 0 50%, 12% 39%, 5% 24%, 21% 22%, 23% 6%, 39% 13%); } /* Paper objects take the ink focus ring; night panels keep the ivory one. */ .comic-panel a:focus-visible, .compass-tray button:focus-visible { outline-color: var(--card-text); } .comic-night a:focus-visible { outline-color: var(--heading); } /* ---------- Index hero: the headline beside Big Head's splash panel ---------- */ .blog-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 56px; align-items: center; padding-block: 72px 88px; } .blog-hero h1 { color: var(--heading); margin-bottom: 26px; text-wrap: balance; } .blog-page h1 em { color: var(--gold); } .blog-lede { color: var(--text-muted); font-size: clamp(1.07rem, 1.5vw, 1.3rem); line-height: 1.55; max-width: 560px; margin: 0; } .splash { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 8px; align-items: end; padding: 26px 26px 0 6px; overflow: hidden; box-shadow: 10px 10px 0 var(--coral); } .splash-art { width: 100%; max-width: 200px; height: auto; align-self: end; } .splash-say { align-self: center; display: grid; justify-items: start; gap: 14px; padding-bottom: 26px; min-width: 0; } /* Shared card pieces */ .card-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 12px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--card-muted); } .comic-night .card-top { color: var(--eyebrow-text); } .card-description { color: var(--card-muted); margin: 0; } .comic-night .card-description { color: var(--text-muted); } .lead-card h2 a, .post-card h3 a { text-decoration: none; } .lead-card h2 a:hover, .post-card h3 a:hover { text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 2px; text-underline-offset: 5px; } .byline { display: flex; align-items: center; gap: 10px; } .byline > img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; border: 2.5px solid var(--ink-line); background: var(--night-panel); } .byline > div { display: grid; gap: 2px; } .byline span { font-size: 0.88rem; font-weight: 750; } .byline small { font-size: 0.82rem; color: var(--card-muted); } /* ---------- Lead story: the cover panel ---------- */ .blog-lead { padding-bottom: 0; } .lead-card { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); overflow: visible; } .lead-art { position: relative; display: block; overflow: hidden; border-right: 4px solid var(--ink-line); background: var(--night-panel); } .lead-art .story-visual, .lead-art .giveback-scene { height: 100%; } .lead-art .story-visual img, .lead-art .giveback-scene img { height: 100%; object-fit: cover; } .lead-art .app-scene { height: 100%; min-height: 360px; } .lead-art > .comic-cap { position: absolute; left: 16px; top: 16px; z-index: 2; } .lead-copy { display: flex; flex-direction: column; gap: 4px; padding: 30px 32px; background-image: radial-gradient(#17184b1c 1.3px, transparent 1.5px); background-size: 9px 9px; } .lead-card h2 { font-family: var(--serif); font-size: clamp(2.2rem, 3.6vw, 3.3rem); line-height: 1; letter-spacing: -0.045em; margin: 4px 0 14px; text-wrap: balance; color: var(--card-text); } .lead-card .card-description { font-size: 1.08rem; line-height: 1.55; max-width: 46ch; } .lead-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 18px; border-top: 2px dashed #17184b33; } .lead-card .lead-foot { margin-top: 26px; } /* ---------- The archive: a page of panels ---------- */ .blog-more { padding-top: 96px; } .blog-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 360px); align-items: end; gap: 32px; margin-bottom: 40px; } .blog-heading h2 { color: var(--heading); margin: 0; font-size: clamp(2.4rem, 4.4vw, 4.2rem); } .blog-heading > p { color: var(--text-muted); margin: 0 0 8px; } .post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; align-items: stretch; } .post-card { display: flex; flex-direction: column; overflow: hidden; } .post-card:not(.comic-night) .post-copy { background-image: radial-gradient(#17184b1c 1.3px, transparent 1.5px); background-size: 9px 9px; } .post-art { position: relative; display: block; flex: 1 0 auto; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 4px solid var(--ink-line); background: var(--night-panel); } .comic-night .post-art { border-bottom-color: var(--heading); } .post-art .story-visual, .post-art .giveback-scene, .post-art .app-scene { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; border-radius: 0; } .post-art .story-visual img, .post-art .giveback-scene img { width: 100%; height: 100%; object-fit: cover; } .post-art .app-scene .scene-orbit { width: 62%; } .post-art .app-scene .scene-label, .post-art .app-scene .scene-footnote { display: none; } .post-art > .comic-cap { position: absolute; left: 12px; top: 12px; z-index: 2; } .post-copy { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px; } .post-copy .card-top { margin-bottom: 4px; } .post-card h3 { font-family: var(--serif); font-size: 1.6rem; line-height: 1.08; letter-spacing: -0.035em; margin: 0 0 6px; color: var(--card-text); } .comic-night h3, .comic-night h3 a { color: var(--heading); } .post-card .card-description { font-size: 0.94rem; line-height: 1.55; } .card-author { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; padding-top: 12px; border-top: 2px dashed #17184b33; font-size: 0.86rem; font-weight: 750; } .comic-night .card-author { border-top-color: #fffaf433; } .card-author img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2.5px solid var(--ink-line); background: var(--night-panel); } .comic-night .card-author img { border-color: var(--heading); } /* The whole card opens the post; the title link stretches over it. */ .post-card h3 a::after { content: ""; position: absolute; inset: 0; } /* A comic-page rhythm in sixes: three panels, a wide one and a single, then one across the page. A short last row stretches so no panel sits beside empty space. */ .post-card:nth-child(6n+4) { grid-column: span 2; } .post-card:nth-child(6n+4) .post-art { aspect-ratio: 21 / 9; } .post-card:nth-child(6n+4) h3 { font-size: 2.1rem; } .post-card:nth-child(6n), .post-card:nth-child(6n+1):last-child, .post-card:nth-child(6n+4):last-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } .post-card:nth-child(6n+2):last-child { grid-column: span 2; } .post-card:nth-child(6n) .post-art, .post-card:nth-child(6n+1):last-child .post-art, .post-card:nth-child(6n+4):last-child .post-art { aspect-ratio: 16 / 9; border-bottom: 0; border-right: 4px solid var(--ink-line); } .post-card:nth-child(6n) .post-copy, .post-card:nth-child(6n+1):last-child .post-copy, .post-card:nth-child(6n+4):last-child .post-copy { justify-content: center; padding: 24px 28px; } .post-card:nth-child(6n) h3, .post-card:nth-child(6n+1):last-child h3, .post-card:nth-child(6n+4):last-child h3 { font-size: 2.1rem; } /* ---------- The project panel ---------- */ .blog-close { padding-top: 96px; } .blog-close-rail { max-width: 560px; } .project-sessions { background: var(--card); color: var(--card-text); border: 4px solid var(--ink-line); border-radius: 6px; padding: 20px 0 12px; box-shadow: 8px 8px 0 var(--gold); background-image: radial-gradient(#17184b1c 1.3px, transparent 1.5px); background-size: 9px 9px; } .ps-head { display: flex; justify-content: flex-start; align-items: center; gap: 0; padding: 0 20px; } .project-sessions .ps-head > h2.eyebrow { margin: 0; padding: 6px 4px 6px 11px; border: 2.5px solid var(--ink-line); border-right: 0; background: var(--gold); color: var(--card-text); font-family: inherit; font-size: 0.72rem; font-weight: 850; letter-spacing: 0.14em; line-height: 1.3; } .project-sessions .ps-head > h2.eyebrow .eyebrow-line { display: none; } .ps-count { padding: 6px 11px 6px 4px; border: 2.5px solid var(--ink-line); border-left: 0; background: var(--gold); color: var(--card-text); font-size: 0.72rem; font-weight: 850; letter-spacing: 0.14em; line-height: 1.3; text-transform: uppercase; font-variant-numeric: tabular-nums; white-space: nowrap; } .ps-count::before { content: "· "; } .ps-intro { font-family: var(--serif); font-size: 1.15rem; line-height: 1.35; color: var(--card-text); padding: 12px 20px 0; margin: 0; } .ps-list { list-style: none; margin: 12px 0 0; padding: 0 20px 6px; } .ps-session + .ps-session { margin-top: 12px; } .ps-row { display: grid; grid-template-columns: 7px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 3px; align-items: baseline; padding: 12px 14px; border: 3px solid var(--ink-line); border-radius: 6px; background: var(--card); box-shadow: 4px 4px 0 var(--ink-line); text-decoration: none; } .ps-row:hover .ps-title { text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 2px; } .ps-dot { width: 7px; height: 7px; border-radius: 50%; align-self: center; } .ps-dot-prototype { background: #b4914b; box-shadow: 0 0 0 3px #b4914b2e; } .ps-dot-beta { background: #5b7f4f; box-shadow: 0 0 0 3px #5b7f4f2e; } .ps-title { font-family: var(--serif); font-size: 1.2rem; font-weight: 550; letter-spacing: -0.02em; line-height: 1.2; min-width: 0; overflow-wrap: anywhere; } .ps-time { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--card-muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .ps-state { grid-column: 2 / -1; font-size: 0.82rem; line-height: 1.5; color: var(--card-muted); } .ps-current > .ps-row { background: #f1ecfb; } .ps-actions { list-style: none; margin: 10px 0 4px; padding: 0 0 0 31px; } .ps-actions a { display: inline-block; font-size: 0.82rem; font-weight: 750; line-height: 1.6; padding: 4px 0; color: var(--card-text); text-decoration: underline; text-decoration-color: var(--coral-ink); text-decoration-thickness: 2px; text-underline-offset: 4px; } .ps-actions a:hover { text-decoration-color: var(--card-text); } /* ---------- Article ---------- */ .article-hero { padding-block: 40px 34px; } .article-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0 0 24px; } .article-crumbs .back-link { display: inline-flex; gap: 10px; align-items: center; margin: 0; font-size: 0.86rem; font-weight: 800; text-decoration: none; color: var(--heading); border-bottom: 2px solid var(--link-rule); padding-bottom: 3px; } .article-crumbs .back-link:hover { border-color: var(--link-rule-hover); } .article-hero h1 { color: var(--heading); font-size: clamp(2.8rem, 6vw, 5.6rem); line-height: 0.98; max-width: 16ch; margin-bottom: 0; text-wrap: balance; } .article-deck { color: var(--text-muted); font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.5; max-width: 700px; margin: 18px 0 0; } .blog-story .article-deck { font-family: var(--serif); font-style: italic; color: var(--gold); font-size: clamp(1.4rem, 2.2vw, 1.9rem); } .article-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 14px; margin-top: 26px; } .article-meta .byline { color: var(--heading); } .article-meta .byline > img { width: 52px; height: 52px; border: 3px solid var(--heading); } .article-meta .byline span { font-size: 1rem; font-weight: 800; } .article-meta .byline small { color: var(--text-muted); font-size: 0.84rem; } .date-pill { margin: 0; padding: 5px 10px; border: 2px solid #fffaf455; border-radius: 100px; color: var(--eyebrow-text); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .article-visual { margin: 0 0 56px; overflow: hidden; } .article-visual > .story-visual, .article-visual > .giveback-scene, .article-visual > .app-scene { border-radius: 0; } .article-visual figcaption { padding: 12px 16px; border-top: 4px solid var(--ink-line); background: var(--card); color: var(--card-muted); font-size: 0.86rem; line-height: 1.45; } .article-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 310px); gap: 40px 48px; align-items: start; padding-bottom: 56px; } .story-layout { grid-template-columns: minmax(0, 920px); justify-content: center; } .article-sheet { padding: clamp(24px, 4vw, 52px) clamp(20px, 5vw, 64px) clamp(28px, 4vw, 44px); } .article-sheet > * { max-width: 66ch; margin-inline: auto; } .article-rail { position: sticky; top: 24px; } .article-body { font-size: 1.1rem; line-height: 1.72; } .article-body > * + * { margin-top: 0; } .article-body > p { margin: 0 0 1.1em; } .article-body > h2 { font-family: var(--serif); font-size: clamp(1.7rem, 2.6vw, 2.2rem); line-height: 1.12; letter-spacing: -0.04em; margin: 1.9em 0 0.8em; padding-bottom: 8px; color: var(--card-text); background: linear-gradient(var(--coral), var(--coral)) 0 100% / 48px 4px no-repeat; } .article-body > h3 { font-size: 1.25rem; margin: 1.5em 0 0.5em; } .article-body strong { font-weight: 800; } .article-body ul, .article-body ol { padding-left: 1.3em; margin: 0 0 1.3em; } .article-body li { margin-bottom: 0.55em; padding-left: 0.3em; } .article-body li::marker { color: var(--coral-ink); } .article-body li > p { margin: 0; } .article-body a { color: var(--card-text); font-weight: 700; text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 2px; text-underline-offset: 3px; } .article-body a:hover { text-decoration-color: var(--card-text); } .article-body img { width: 100%; height: auto; margin: 1.4em 0 1.6em; border: 4px solid var(--ink-line); border-radius: 6px; box-shadow: 6px 6px 0 var(--sage); } .article-body blockquote { margin: 1.5em 0; padding-left: 22px; border-left: 4px solid var(--coral); font-family: var(--serif); font-size: 1.35rem; line-height: 1.28; } .author-signoff { margin: 24px auto 0; font-family: var(--serif); font-style: italic; font-size: 1.3rem; text-align: right; color: var(--coral-ink); } .story-body { font-size: 1.1rem; line-height: 1.72; } .story-body > p { margin: 0 0 1.1em; } .story-body > p:last-child { margin-bottom: 0; } .article-end { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 20px; margin-top: 2.4em; padding-top: 20px; border-top: 2px dashed #17184b33; } .article-end > span { color: var(--card-muted); font-size: 0.92rem; } /* ---------- Post visuals (illustration, not UI: literal colors) ---------- */ .story-visual { overflow: hidden; background: #241f45; } .story-visual img { width: 100%; height: auto; } .giveback-scene { overflow: hidden; background: #e9eddf; } .giveback-scene img { width: 100%; height: auto; } .app-scene { height: 525px; background: #1a1d3d; position: relative; overflow: hidden; isolation: isolate; } .app-scene::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 20%, #a48bd640, transparent 65%); z-index: -1; } .scene-orbit { position: absolute; width: 355px; aspect-ratio: 1; border: 1px solid #cfcc9e66; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #2a2c5a88; z-index: -1; } .scene-orbit::after { content: ""; position: absolute; border-radius: 50%; inset: 15px; border: 1px solid #cfcc9e33; } .scene-label, .scene-footnote { position: absolute; z-index: 2; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.16em; color: #e9dcc1; } .scene-label { top: 25px; left: 27px; } .scene-footnote { bottom: 24px; left: 27px; letter-spacing: 0.04em; font-weight: 600; } .vision-scene .vision-guide { position: absolute; left: 50%; top: 50%; width: min(400px, 78%); transform: translate(-50%, -48%); } .article-visual .app-scene { height: 560px; } .article-visual .vision-scene .scene-orbit { width: 470px; } .article-body .giveback-phone-figure, .article-body .giveback-profile-figure { margin: 2em 0 2.2em; } .giveback-phone-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; padding: 32px; background: #efe9dc; border: 3px solid var(--ink-line); border-radius: 6px; } .giveback-phone-pair img { width: 100%; border: 6px solid #fffdf6; border-radius: 23px; box-shadow: 0 8px 22px #17184b1a; } .giveback-profile-figure img { border: 1px solid #dcdbdf; border-radius: 11px; } .article-body .giveback-phone-figure figcaption, .article-body .giveback-profile-figure figcaption { font-size: 0.8rem; line-height: 1.6; color: var(--card-muted); margin-top: 12px; } /* Meet GeniusHQ's compass tray: the GeniusHQ page's Frost · Ice blue glow and name chip. The glow is a traced picture per pin. */ .compass-tray { position: relative; } .tray-glow { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .tray-compass { position: absolute; z-index: 1; top: 46.8%; width: 18.6%; height: 32.5%; padding: 0; border: 0; border-radius: 42%; background: none; color: #14213d; cursor: pointer; transform: translate(-50%, -50%); -webkit-tap-highlight-color: transparent; } .tray-compass:hover + .tray-glow, .tray-compass:focus-visible + .tray-glow, .tray-compass.is-shown + .tray-glow { opacity: 1; } .tray-compass:focus-visible { outline: none; } .tray-name { position: absolute; top: calc(100% + 4px); left: 50%; padding: 1px 8px; border-radius: 5px; background: #fffdf8; box-shadow: 0 2px 8px #14213d26; font-family: var(--serif); font-size: 1.12rem; line-height: 1.3; white-space: nowrap; opacity: 0; transform: translate(-50%, 4px); pointer-events: none; transition: opacity 0.2s ease 0.15s, transform 0.2s ease 0.15s; } .tray-compass:hover .tray-name, .tray-compass:focus-visible .tray-name, .tray-compass.is-shown .tray-name { opacity: 1; transform: translate(-50%, 0); } /* ---------- Responsive ---------- */ @media (max-width: 1060px) { .blog-hero, .lead-card { grid-template-columns: minmax(0, 1fr); } .lead-art { border-right: 0; border-bottom: 4px solid var(--ink-line); aspect-ratio: 16 / 9; } .lead-art .app-scene { min-height: 0; } .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .post-card:nth-child(n) { grid-column: auto; display: flex; } .post-card:nth-child(n) .post-art { aspect-ratio: 16 / 9; border-right: 0; border-bottom: 4px solid var(--ink-line); } .comic-night.post-card:nth-child(n) .post-art { border-bottom-color: var(--heading); } .post-card:nth-child(n) .post-copy { justify-content: flex-start; padding: 18px 20px 20px; } .post-card:nth-child(n) h3 { font-size: 1.6rem; } .post-card:nth-child(odd):last-child { grid-column: 1 / -1; } .article-layout { grid-template-columns: minmax(0, 1fr); } .article-rail { position: static; max-width: 420px; } .blog-heading { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 30px; } .app-scene, .article-visual .app-scene { height: 460px; } } @media (max-width: 700px) { .blog-hero { padding-block: 36px 64px; } .splash { grid-template-columns: minmax(0, 1fr); padding: 22px 18px 0; } .splash-art { max-width: 170px; margin: 0 auto; order: 2; } .splash-say { padding-bottom: 0; } .bubble { font-size: 1rem; padding: 16px 18px; } .bubble::after { display: none; } .burst { width: 76px; height: 76px; font-size: 0.66rem; right: -8px; top: -12px; } .lead-copy { padding: 22px 20px; } .lead-card h2 { font-size: clamp(2rem, 9vw, 2.6rem); } .blog-more, .blog-close { padding-top: 72px; } .post-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; } .post-card:nth-child(odd):last-child { grid-column: auto; } .article-hero { padding-block: 28px 26px; } .article-hero h1 { font-size: clamp(2.5rem, 11vw, 3.6rem); line-height: 1.02; } .article-visual { margin-bottom: 40px; } .article-body, .story-body { font-size: 1.04rem; } .app-scene, .article-visual .app-scene { height: 400px; } .scene-orbit, .article-visual .vision-scene .scene-orbit { width: 280px; } .vision-scene .vision-guide { width: min(330px, 82%); } .scene-label { top: 20px; left: 20px; } .scene-footnote { bottom: 18px; left: 20px; } .giveback-phone-pair { gap: 14px; padding: 16px; } .giveback-phone-pair img { border-width: 3px; border-radius: 14px; } .tray-name { top: 100%; font-size: 0.82rem; padding: 0 5px; } } @media (prefers-reduced-motion: reduce) { .comic-button, .tray-glow, .tray-name { transition: none; } .comic-button:hover, .comic-button:active { transform: none; } } @media (forced-colors: active) { .comic-panel, .project-sessions, .comic-cap, .comic-button, .bubble { border: 1px solid CanvasText; } .burst { display: none; } } /* The vision scene's Big Head fits inside an archive panel instead of running off its bottom edge. */ .post-art .vision-scene .vision-guide { width: auto; height: 90%; max-width: 78%; object-fit: contain; } /* "IDuh Genius is on Patreon" post: available-now list and the family icon row. Append to public/blog/assets/blog.css when the post is published (the CSP allows no inline