1/* ─────────────────────────────────────────────────────────────2 goq.sh — landing page3 Refined-minimal, earth-tone palette, dither + pixel accents.4 ───────────────────────────────────────────────────────────── */56:root {7 /* paper + ink */8 --paper: #ece3d2;9 --paper-2: #e3d8c2;10 --ink: #2b2119;11 --ink-muted: #6b5d4a;12 --hair: rgba(43, 33, 25, 0.14);13 --hair-strong: rgba(43, 33, 25, 0.28);14 --panel-shadow: rgba(43, 33, 25, 0.22);1516 /* earth-tone splashes */17 --terracotta: #b5623b;18 --ochre: #c98a3a;19 --moss: #6b7145;20 --clay: #9c5a44;21 --sand: #d8c39c;22 --accent: var(--terracotta);23 /* natural greens + tans (second dither ramp) */24 --moss-deep: #46512f;25 --olive: #8b8b4e;26 --tan: #c3b184;2728 --mono: "SFMono-Regular", "Cascadia Mono", "Liberation Mono", ui-monospace, monospace;29 --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;3031 --edge: min(6vw, 64px);32 --maxw: 1080px;33}3435@media (prefers-color-scheme: dark) {36 :root {37 --paper: #201913;38 --paper-2: #271f17;39 --ink: #ece0cd;40 --ink-muted: #a3927a;41 --hair: rgba(236, 224, 205, 0.12);42 --hair-strong: rgba(236, 224, 205, 0.24);43 --panel-shadow: rgba(0, 0, 0, 0.45);44 --terracotta: #cf7048;45 --ochre: #d99a47;46 --moss: #8a9155;47 --clay: #bd6c52;48 --sand: #cbb488;49 --moss-deep: #5c6a3e;50 --olive: #a6a45f;51 --tan: #b8a77e;52 }53}5455* { margin: 0; padding: 0; box-sizing: border-box; }5657html { scroll-behavior: smooth; }58@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }5960body {61 background: var(--paper);62 color: var(--ink);63 font-family: var(--sans);64 font-size: 17px;65 line-height: 1.6;66 -webkit-font-smoothing: antialiased;67 overflow-x: hidden;68}6970a { color: inherit; }7172.skip {73 position: absolute;74 left: -9999px;75 top: 0;76 background: var(--ink);77 color: var(--paper);78 padding: 8px 14px;79 z-index: 20;80 font-family: var(--mono);81 font-size: 13px;82}83.skip:focus { left: 8px; top: 8px; }8485::selection { background: var(--ochre); color: var(--ink); }8687/* ─── Selection policy: prose and the install command are content88 and stay selectable; controls, nav chrome, and decorative89 glyphs are not. The $ prompt is excluded so a hand-selected90 command never carries it into a terminal paste. ──────────── */91.skip,92.topbar-github,93.topbar-nav,94.seg,95.portal-download,96.install-copy,97.install-prompt,98.section-title span,99.start-num,100.dg-channel,101.hero-key {102 -webkit-user-select: none;103 user-select: none;104}105106/* ─── Top bar ──────────────────────────────────────────────── */107.topbar {108 display: flex;109 align-items: center;110 gap: 20px;111 padding: 18px var(--edge);112 border-bottom: 1px solid var(--hair);113 position: relative;114 z-index: 5;115}116.topbar-github {117 font-family: var(--mono);118 font-weight: 500;119 font-size: 13px;120 letter-spacing: 0.02em;121 text-transform: lowercase;122 color: var(--terracotta);123 text-decoration: none;124 transition: color 0.12s;125}126.topbar-github:hover { color: var(--ink); }127.topbar-github:focus-visible { outline: 2px solid var(--moss); outline-offset: 4px; }128.topbar-nav {129 margin-left: auto;130 display: flex;131 gap: 36px;132 font-family: var(--mono);133 font-size: 13px;134}135.topbar-nav a {136 color: var(--ink-muted);137 text-decoration: none;138 text-transform: lowercase;139 transition: color 0.12s;140}141.topbar-nav a:hover { color: var(--ink); }142@media (max-width: 620px) {143 .topbar-nav { gap: 14px; }144}145146/* ─── First screen: full-viewport dither + floating panel ──── */147.screen {148 min-height: 100vh;149 min-height: 100svh;150 display: flex;151 flex-direction: column;152}153.hero {154 position: relative;155 flex: 1;156 min-height: 0;157 overflow: hidden;158 display: flex;159 align-items: center;160 justify-content: center;161 padding: 24px;162 border-bottom: 1px solid var(--hair);163}164.hero-canvas {165 position: absolute;166 inset: 0;167 width: 100%;168 height: 100%;169 image-rendering: pixelated;170 image-rendering: crisp-edges;171}172.hero-panel {173 position: relative;174 z-index: 1;175 width: 100%;176 max-width: 600px;177 padding: clamp(28px, 4vw, 44px);178 background: color-mix(in srgb, var(--paper) 88%, transparent);179 backdrop-filter: blur(3px);180 -webkit-backdrop-filter: blur(3px);181 border: 1px solid var(--hair-strong);182 box-shadow: 12px 12px 0 var(--panel-shadow);183 display: flex;184 flex-direction: column;185 align-items: center;186 gap: 22px;187 text-align: center;188}189.hero-key {190 display: block;191 image-rendering: pixelated;192 image-rendering: crisp-edges;193 margin-bottom: -4px;194}195.hero-ascii {196 margin: 0;197 max-width: 100%;198 overflow: hidden;199 color: var(--terracotta);200 font-family: var(--mono);201 font-size: clamp(13px, 4.4vw, 31px);202 line-height: 1;203 white-space: pre;204 letter-spacing: 0;205 -webkit-user-select: none;206 user-select: none;207 -webkit-user-drag: none;208 pointer-events: none;209}210.hero-tagline {211 margin: 0;212 font-family: var(--mono);213 font-size: clamp(13px, 2vw, 15px);214 color: var(--ink);215 letter-spacing: 0.01em;216}217218/* ─── Install ──────────────────────────────────────────────── */219.install-group {220 display: flex;221 flex-direction: column;222 align-items: center;223 gap: 10px;224 max-width: 100%;225}226.release-action {227 display: flex;228 flex-direction: column;229 align-items: center;230 gap: 8px;231 max-width: 100%;232}233.release-action[hidden] { display: none; }234.portal-download {235 display: inline-flex;236 align-items: center;237 gap: 10px;238 min-height: 40px;239 padding: 9px 18px;240 border: 1px solid var(--hair-strong);241 background: color-mix(in srgb, var(--paper-2) 82%, transparent);242 color: var(--ink);243 font-family: var(--mono);244 font-size: 12.5px;245 font-weight: 700;246 letter-spacing: 0.04em;247 text-decoration: none;248 text-transform: lowercase;249 box-shadow: 4px 4px 0 var(--hair);250 transition: background 0.12s, color 0.12s, box-shadow 0.12s, transform 0.12s;251}252/* pixel marker, same language as the hero-note square */253.portal-download::before {254 content: "";255 width: 8px;256 height: 8px;257 flex-shrink: 0;258 background: var(--terracotta);259}260.portal-download:hover { background: var(--ink); color: var(--paper); }261.portal-download:hover::before { background: var(--ochre); }262.portal-download:active {263 transform: translate(2px, 2px);264 box-shadow: 1px 1px 0 var(--hair);265}266.portal-download:focus-visible { outline: 2px solid var(--moss); outline-offset: 3px; }267.portal-picker {268 display: flex;269 flex-wrap: wrap;270 justify-content: center;271 gap: 8px;272}273/* combo without an artifact: dashed slot, no shadow — a pending space,274 not a pressable thing */275.portal-download.disabled {276 background: transparent;277 color: var(--ink-muted);278 border: 1px dashed var(--hair-strong);279 box-shadow: none;280 cursor: not-allowed;281}282.portal-download.disabled::before { background: var(--hair-strong); }283.portal-download.disabled:hover {284 background: transparent;285 color: var(--ink-muted);286}287@media (prefers-reduced-motion: reduce) {288 .portal-download:active { transform: none; }289}290.release-note {291 color: var(--ink-muted);292 font-family: var(--mono);293 font-size: 10.5px;294 line-height: 1.45;295}296.release-history { text-decoration: underline; text-underline-offset: 2px; }297.release-history:hover { color: var(--ink); }298/* platform segmented radio */299.seg {300 display: inline-flex;301 border: 1px solid var(--hair-strong);302 font-family: var(--mono);303 font-size: 12px;304}305.seg-opt { position: relative; display: flex; }306.seg-opt input {307 position: absolute;308 inset: 0;309 margin: 0;310 opacity: 0;311 cursor: pointer;312}313.seg-opt span {314 padding: 7px 18px;315 text-transform: lowercase;316 letter-spacing: 0.06em;317 color: var(--ink-muted);318 transition: background 0.12s, color 0.12s;319}320.seg-opt:not(:last-child) span { border-right: 1px solid var(--hair-strong); }321.seg-opt:has(input:checked) span { background: var(--ink); color: var(--paper); }322.seg-opt:hover span { color: var(--ink); }323.seg-opt:has(input:checked):hover span { color: var(--paper); }324.seg-opt input:focus-visible + span { outline: 2px solid var(--moss); outline-offset: -2px; }325326.install {327 display: inline-flex;328 align-items: stretch;329 border: 1px solid var(--hair-strong);330 background: color-mix(in srgb, var(--paper-2) 82%, transparent);331 max-width: 100%;332 overflow: hidden;333}334.install-cmd {335 font-family: var(--mono);336 font-size: 12.5px;337 padding: 12px 12px;338 color: var(--ink);339 white-space: nowrap;340 overflow-x: auto;341 scrollbar-width: none;342}343.install-cmd::-webkit-scrollbar { display: none; }344.install-prompt { color: var(--moss); margin-right: 8px; }345.install-copy {346 font-family: var(--mono);347 font-size: 12px;348 text-transform: uppercase;349 letter-spacing: 0.06em;350 border: none;351 border-left: 1px solid var(--hair-strong);352 background: transparent;353 color: var(--ink-muted);354 padding: 0 16px;355 cursor: pointer;356 transition: background 0.12s, color 0.12s;357 flex-shrink: 0;358}359.install-copy:hover { background: var(--terracotta); color: var(--paper); }360.install-copy.copied { background: var(--moss); color: var(--paper); }361.install-copy:focus-visible { outline: 2px solid var(--moss); outline-offset: -2px; }362363.hero-note {364 margin: 0;365 font-family: var(--mono);366 font-size: 12px;367 color: var(--ink-muted);368}369.hero-note::before {370 content: "";371 display: inline-block;372 width: 8px; height: 8px;373 margin-right: 9px;374 background: var(--ochre);375 vertical-align: baseline;376}377378/* ─── Dithered / pixel section rule ────────────────────────── */379.section-rule {380 height: 8px;381 background-image:382 repeating-linear-gradient(90deg,383 var(--terracotta) 0 8px, transparent 8px 24px),384 repeating-linear-gradient(90deg,385 var(--moss) 12px 16px, transparent 16px 40px),386 repeating-linear-gradient(90deg,387 var(--ochre) 28px 32px, transparent 32px 56px);388 opacity: 0.7;389 margin-bottom: clamp(48px, 7vw, 84px);390}391392/* ─── Section titles: markdown-flavoured mono headings ─────── */393.section-title {394 max-width: var(--maxw);395 margin: 0 auto clamp(28px, 4vw, 44px);396 font-family: var(--mono);397 font-size: clamp(21px, 3.2vw, 30px);398 font-weight: 700;399 letter-spacing: -0.01em;400 text-transform: lowercase;401}402.section-title span {403 color: var(--ochre);404 margin-right: 10px;405 font-weight: 500;406}407408/* ─── Features ─────────────────────────────────────────────── */409.features { padding: clamp(56px, 8vw, 96px) var(--edge); }410.feature-grid {411 max-width: var(--maxw);412 margin: 0 auto;413 list-style: none;414 display: grid;415 grid-template-columns: repeat(3, 1fr);416 gap: 1px;417 background: var(--hair);418 border: 1px solid var(--hair);419}420.feature {421 background: var(--paper);422 padding: clamp(22px, 2.8vw, 32px);423 position: relative;424}425.feature h3 {426 margin: 0 0 10px;427 font-family: var(--mono);428 font-size: 15.5px;429 letter-spacing: -0.01em;430 font-weight: 700;431 text-transform: lowercase;432 padding-right: 18px;433}434.feature p {435 color: var(--ink-muted);436 font-size: 14.5px;437 line-height: 1.55;438 max-width: 40ch;439}440/* pixel corner tick — grows on hover */441.feature::after {442 content: "";443 position: absolute;444 top: 0; right: 0;445 width: 12px; height: 12px;446 background: var(--sand);447 transform-origin: top right;448 transition: transform 0.32s cubic-bezier(0.34, 1.4, 0.64, 1);449 will-change: transform;450 pointer-events: none;451}452.feature:nth-child(2)::after { background: var(--ochre); }453.feature:nth-child(3)::after { background: var(--moss); }454.feature:nth-child(4)::after { background: var(--clay); }455.feature:nth-child(5)::after { background: var(--olive); }456.feature:nth-child(6)::after { background: var(--terracotta); }457.feature:hover::after { transform: scale(4.2); }458@media (prefers-reduced-motion: reduce) {459 .feature::after { transition: none; }460}461@media (max-width: 900px) {462 .feature-grid { grid-template-columns: repeat(2, 1fr); }463}464@media (max-width: 620px) {465 .feature-grid { grid-template-columns: 1fr; }466}467468/* ─── Promoted hardening roadmap ──────────────────────────── */469.roadmap { padding: clamp(56px, 8vw, 96px) var(--edge); }470.roadmap-intro {471 max-width: var(--maxw);472 margin: 0 auto clamp(24px, 3vw, 34px);473 color: var(--ink-muted);474 font-size: 15px;475}476.roadmap-grid {477 max-width: var(--maxw);478 margin: 0 auto;479 list-style: none;480 display: grid;481 grid-template-columns: repeat(2, 1fr);482 gap: 1px;483 border: 1px solid var(--hair);484 background: var(--hair);485}486.roadmap-item {487 min-height: 210px;488 padding: clamp(22px, 3vw, 34px);489 background: var(--paper-2);490}491.roadmap-status {492 display: block;493 margin-bottom: 18px;494 color: var(--terracotta);495 font-family: var(--mono);496 font-size: 10.5px;497 letter-spacing: 0.08em;498 text-transform: uppercase;499}500.roadmap-item h3 {501 margin-bottom: 10px;502 font-family: var(--mono);503 font-size: 17px;504 text-transform: lowercase;505}506.roadmap-item h3 a { text-decoration-thickness: 1px; text-underline-offset: 4px; }507.roadmap-item h3 a:hover { color: var(--terracotta); }508.roadmap-item h3 a:focus-visible { outline: 2px solid var(--moss); outline-offset: 4px; }509.roadmap-item p { color: var(--ink-muted); font-size: 14.5px; line-height: 1.55; }510@media (max-width: 720px) {511 .roadmap-grid { grid-template-columns: 1fr; }512 .roadmap-item { min-height: 0; }513}514515/* ─── How it works: one-stop diagram ───────────────────────── */516.how {517 padding: clamp(56px, 8vw, 96px) var(--edge);518 max-width: calc(var(--maxw) + 2 * var(--edge));519 margin: 0 auto;520}521522.diagram {523 max-width: var(--maxw);524 margin: 0 auto;525 display: grid;526 grid-template-columns: 1fr minmax(120px, 0.7fr) 1fr;527 align-items: stretch;528 gap: 0;529}530531/* nodes */532.dg-node {533 border: 1px solid var(--hair-strong);534 background: var(--paper-2);535 box-shadow: 8px 8px 0 var(--hair);536 padding: clamp(18px, 2.4vw, 26px);537 display: flex;538 flex-direction: column;539}540.dg-label {541 font-family: var(--mono);542 font-size: 11px;543 letter-spacing: 0.08em;544 text-transform: uppercase;545 color: var(--terracotta);546 margin-bottom: 16px;547}548.dg-steps {549 list-style: none;550 display: flex;551 flex-direction: column;552 gap: 0;553 flex: 1;554}555.dg-steps li {556 position: relative;557 font-family: var(--mono);558 font-size: clamp(12px, 1.5vw, 14px);559 color: var(--ink);560 padding: 9px 0 9px 20px;561}562/* pixel bullet */563.dg-steps li::before {564 content: "";565 position: absolute;566 left: 0;567 top: 15px;568 width: 7px;569 height: 7px;570 background: var(--moss);571}572/* connector line implying sequence */573.dg-steps li:not(:last-child)::after {574 content: "";575 position: absolute;576 left: 3px;577 top: 22px;578 bottom: 1px;579 width: 1px;580 background: var(--hair-strong);581}582.dg-foot-in {583 margin-top: 16px;584 padding-top: 14px;585 border-top: 1px dotted var(--hair-strong);586 font-family: var(--mono);587 font-size: 11px;588 color: var(--ink-muted);589}590591/* channel between the two nodes */592.dg-channel {593 display: flex;594 flex-direction: column;595 justify-content: center;596 gap: clamp(28px, 5vh, 52px);597 padding: 0 clamp(6px, 1.4vw, 14px);598}599/* each rail is a dashed wire with a label pill and an arrowhead */600.dg-rail {601 position: relative;602 display: flex;603 align-items: center;604 justify-content: center;605 min-height: 30px;606}607.dg-rail::before {608 content: "";609 position: absolute;610 left: 0; right: 0;611 top: 50%;612 border-top: 2px dashed currentColor;613 opacity: 0.65;614}615.dg-pill {616 position: relative;617 background: var(--paper);618 padding: 3px 9px;619 font-family: var(--mono);620 font-size: 10px;621 letter-spacing: 0.12em;622 text-transform: uppercase;623 color: currentColor;624 white-space: nowrap;625}626.dg-head {627 position: absolute;628 top: 50%;629 transform: translateY(-50%);630 font-size: 15px;631 line-height: 0;632}633.dg-video { color: var(--terracotta); }634.dg-input { color: var(--moss); }635.dg-video .dg-head { right: -3px; } /* points into the client */636.dg-input .dg-head { left: -3px; } /* points back into the host */637638/* summary notes */639.dg-notes {640 list-style: none;641 max-width: var(--maxw);642 margin: clamp(28px, 4vw, 44px) auto 0;643 display: grid;644 grid-template-columns: repeat(3, 1fr);645 gap: 1px;646 background: var(--hair);647 border: 1px solid var(--hair);648}649.dg-notes li {650 background: var(--paper);651 padding: 18px 20px;652 font-size: 14px;653 color: var(--ink-muted);654 line-height: 1.5;655}656.dg-notes strong { color: var(--ink); font-weight: 620; }657658@media (max-width: 720px) {659 .diagram { grid-template-columns: 1fr; }660 .dg-channel {661 flex-direction: row;662 justify-content: center;663 gap: clamp(28px, 12vw, 60px);664 padding: 18px 0;665 }666 .dg-rail { min-height: 64px; min-width: 84px; }667 .dg-rail::before {668 left: 50%; right: auto;669 top: 0; bottom: 0;670 border-top: none;671 border-left: 2px dashed currentColor;672 }673 .dg-video .dg-head { right: auto; left: 50%; top: auto; bottom: -6px; transform: translateX(-50%) rotate(90deg); }674 .dg-input .dg-head { right: auto; left: 50%; top: -6px; bottom: auto; transform: translateX(-50%) rotate(90deg); }675 .dg-node { box-shadow: 6px 6px 0 var(--hair); }676 .dg-notes { grid-template-columns: 1fr; }677}678679/* ─── Quick start ──────────────────────────────────────────── */680.start { padding: clamp(56px, 8vw, 96px) var(--edge); }681.start-grid {682 max-width: var(--maxw);683 margin: 0 auto;684 list-style: none;685 display: grid;686 grid-template-columns: repeat(3, 1fr);687 gap: clamp(14px, 2vw, 22px);688}689.start-step {690 position: relative;691 border: 1px solid var(--hair-strong);692 background: var(--paper-2);693 box-shadow: 6px 6px 0 var(--hair);694 padding: clamp(20px, 2.6vw, 28px);695}696.start-num {697 display: block;698 font-family: var(--mono);699 font-size: clamp(30px, 4vw, 42px);700 font-weight: 700;701 line-height: 1;702 color: var(--terracotta);703 opacity: 0.85;704 margin-bottom: 14px;705}706.start-step:nth-child(2) .start-num { color: var(--ochre); }707.start-step:nth-child(3) .start-num { color: var(--moss); }708.start-step h3 {709 font-family: var(--mono);710 font-size: 16px;711 font-weight: 700;712 text-transform: lowercase;713 margin-bottom: 8px;714 display: flex;715 align-items: center;716 gap: 10px;717}718.start-step kbd {719 font-family: var(--mono);720 font-size: 11px;721 font-weight: 500;722 line-height: 1;723 color: var(--ink-muted);724 border: 1px solid var(--hair-strong);725 background: var(--paper);726 padding: 4px 7px 5px;727 box-shadow: 2px 2px 0 var(--hair);728}729.start-step p {730 color: var(--ink-muted);731 font-size: 14.5px;732 line-height: 1.55;733}734.start-note {735 max-width: var(--maxw);736 margin: clamp(24px, 3.4vw, 36px) auto 0;737 font-size: 14.5px;738 color: var(--ink-muted);739}740@media (max-width: 720px) {741 .start-grid { grid-template-columns: 1fr; }742}743744/* ─── Scroll reveal: Bayer dither dissolve (JS-gated: html.js) ──745 Elements materialize the way the hero field is drawn: pixels746 arrive in ordered-dither (4x4 Bayer) sequence — sparse747 checkerboard, then dense, then solid — instead of fading.748 mask-image is discrete-animatable, so the keyframes step749 through three threshold masks; browsers that don't animate750 masks degrade to a fast pop-in via the opacity ramp. */751html.js .reveal { opacity: 0; }752html.js .reveal.in {753 opacity: 1;754 -webkit-mask-repeat: repeat;755 mask-repeat: repeat;756 -webkit-mask-size: 12px 12px;757 mask-size: 12px 12px;758 animation: dither-in 0.45s var(--reveal-delay, 0s) backwards;759}760@keyframes dither-in {761 0% {762 opacity: 0;763 -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Crect x='0' y='0' width='1' height='1'/%3E%3Crect x='2' y='0' width='1' height='1'/%3E%3Crect x='0' y='2' width='1' height='1'/%3E%3Crect x='2' y='2' width='1' height='1'/%3E%3C/svg%3E");764 mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Crect x='0' y='0' width='1' height='1'/%3E%3Crect x='2' y='0' width='1' height='1'/%3E%3Crect x='0' y='2' width='1' height='1'/%3E%3Crect x='2' y='2' width='1' height='1'/%3E%3C/svg%3E");765 }766 10% { opacity: 1; }767 30% {768 -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Crect x='0' y='0' width='1' height='1'/%3E%3Crect x='2' y='0' width='1' height='1'/%3E%3Crect x='0' y='2' width='1' height='1'/%3E%3Crect x='2' y='2' width='1' height='1'/%3E%3Crect x='1' y='1' width='1' height='1'/%3E%3Crect x='3' y='1' width='1' height='1'/%3E%3Crect x='1' y='3' width='1' height='1'/%3E%3Crect x='3' y='3' width='1' height='1'/%3E%3C/svg%3E");769 mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Crect x='0' y='0' width='1' height='1'/%3E%3Crect x='2' y='0' width='1' height='1'/%3E%3Crect x='0' y='2' width='1' height='1'/%3E%3Crect x='2' y='2' width='1' height='1'/%3E%3Crect x='1' y='1' width='1' height='1'/%3E%3Crect x='3' y='1' width='1' height='1'/%3E%3Crect x='1' y='3' width='1' height='1'/%3E%3Crect x='3' y='3' width='1' height='1'/%3E%3C/svg%3E");770 }771 60% {772 -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Crect x='0' y='0' width='4' height='1'/%3E%3Crect x='0' y='2' width='4' height='1'/%3E%3Crect x='1' y='1' width='1' height='1'/%3E%3Crect x='3' y='1' width='1' height='1'/%3E%3Crect x='1' y='3' width='1' height='1'/%3E%3Crect x='3' y='3' width='1' height='1'/%3E%3C/svg%3E");773 mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Crect x='0' y='0' width='4' height='1'/%3E%3Crect x='0' y='2' width='4' height='1'/%3E%3Crect x='1' y='1' width='1' height='1'/%3E%3Crect x='3' y='1' width='1' height='1'/%3E%3Crect x='1' y='3' width='1' height='1'/%3E%3Crect x='3' y='3' width='1' height='1'/%3E%3C/svg%3E");774 }775 100% {776 -webkit-mask-image: none;777 mask-image: none;778 }779}780@media (prefers-reduced-motion: reduce) {781 html.js .reveal { opacity: 1; }782 html.js .reveal.in { animation: none; }783}784785/* ─── Footer ───────────────────────────────────────────────── */786.footer { padding: clamp(48px, 7vw, 80px) var(--edge) 64px; }787.footer-inner { max-width: var(--maxw); margin: 0 auto; }788.stack-row {789 list-style: none;790 display: flex;791 flex-wrap: wrap;792 gap: 8px;793 margin-bottom: 30px;794}795.stack-row li {796 font-family: var(--mono);797 font-size: 11px;798 letter-spacing: 0.04em;799 text-transform: lowercase;800 color: var(--ink-muted);801 border: 1px solid var(--hair-strong);802 padding: 5px 10px;803 background: color-mix(in srgb, var(--paper-2) 70%, transparent);804}805.stack-row li:last-child { color: var(--terracotta); border-color: var(--terracotta); }806.footer-meta {807 display: flex;808 flex-wrap: wrap;809 gap: 10px 24px;810 align-items: center;811 padding-top: 26px;812 border-top: 1px solid var(--hair);813 font-family: var(--mono);814 font-size: 12px;815 color: var(--ink-muted);816}817.footer-link {818 color: var(--ink);819 text-decoration: none;820 border-bottom: 1px solid var(--hair-strong);821 padding-bottom: 1px;822 transition: color 0.12s, border-color 0.12s;823}824.footer-link:hover { color: var(--terracotta); border-color: var(--terracotta); }825.footer-link:focus-visible { outline: 2px solid var(--moss); outline-offset: 3px; }826.footer-domain {827 margin-left: auto;828 color: var(--terracotta);829 font-weight: 600;830}831@media (max-width: 620px) { .footer-domain { margin-left: 0; } }