/* Hallmark · genre: editorial · macrostructure: Photographic · H6 image=full-bleed, caption=lower-left, text=overlay
 * theme: custom · vibe: "sakura summer, inn warmth, clear sky" · paper: oklch(99.2% 0.004 350) · accent: oklch(72% 0.15 245)
 * display: Noto Serif SC · body: Noto Sans SC · axes: light / roman-serif / chromatic-dusty-pink
 * enrichment: E8 approved official gameplay still · nav: N9 Edge-aligned minimal · footer: Ft1 Mast-headed
 * studied: no · context: user-provided · pre-emit critique: P5 H5 E5 S5 R5 V5
 * contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46) · chrome: pass (47)
 * tokens: pass (48) · responsive: pass (49) · icons: pass (30) · mobile: pass (34, 49, 50–57)
 */
@import url("../../tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body.has-dialog { overflow: clip; }
img { display: block; max-width: 100%; height: auto; }
button, a { -webkit-tap-highlight-color: transparent; }
button, input, select { font: inherit; }
a { color: inherit; text-decoration-thickness: var(--rule-hair); text-underline-offset: 0.22em; }
p, h1, h2, h3, figure, blockquote { margin: 0; }
h1, h2, h3 { font-family: var(--font-display); font-style: normal; line-height: 1.14; overflow-wrap: anywhere; min-width: 0; }
h1 { font-size: var(--text-display); letter-spacing: -0.035em; font-weight: 800; }
h2 { font-size: clamp(2rem, 4vw, var(--text-4xl)); letter-spacing: -0.025em; font-weight: 800; }
h3 { font-size: var(--text-lg); font-weight: 800; }
.skip-link { position: fixed; inset-block-start: var(--space-xs); inset-inline-start: var(--space-xs); z-index: var(--z-tooltip); transform: translateY(-160%); background: var(--color-ink); color: var(--color-paper); padding: var(--space-sm) var(--space-md); }
.skip-link:focus { transform: none; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.container { width: min(100%, var(--content-max)); margin-inline: auto; padding-inline: var(--page-gutter); }
.section { padding-block: var(--space-3xl); }
.section--tight { padding-block: var(--space-2xl); }
.section--pink { background: var(--color-paper-2); color: var(--color-ink); }
.section--blue { background: var(--color-surface-blue); color: var(--color-ink); }
.section--wood { background: var(--color-surface-wood); color: var(--color-ink); }
.section-head { display: grid; gap: var(--space-md); margin-block-end: var(--space-2xl); max-width: 52rem; }
.section-head p { max-width: 58ch; color: var(--color-ink-2); font-size: var(--text-md); }
.hand-note { font-family: var(--font-outlier); font-size: var(--text-lg); color: var(--color-accent-ink); transform: rotate(-1.2deg); width: fit-content; }
.hand-note::after { content: ""; display: block; height: var(--rule-hair); background: var(--color-accent); transform: rotate(-1deg); }

.site-header { position: fixed; inset: 0 0 auto; z-index: var(--z-sticky); padding: var(--space-sm) var(--page-gutter); pointer-events: none; }
.nav-edge { width: min(100%, var(--content-max)); min-height: 3.5rem; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-xs) var(--space-sm); background: var(--color-paper); color: var(--color-ink); border: var(--rule-hair) solid var(--color-rule); box-shadow: 0 0.35rem 1.2rem var(--color-shadow); pointer-events: auto; }
.wordmark { min-width: 2.75rem; min-height: 2.75rem; display: inline-flex; align-items: center; text-decoration: none; white-space: nowrap; }
.wordmark img { display: none; }
.wordmark::after { content: "葵酱"; font-family: var(--font-display); font-size: var(--text-md); font-weight: 800; letter-spacing: -0.02em; }
.nav-tools { display: flex; align-items: center; gap: var(--space-xs); }
.desktop-nav { display: none; align-items: center; gap: var(--space-lg); }
.desktop-nav a, .mobile-menu a, .footer a { white-space: nowrap; text-decoration: none; }
.desktop-nav a { min-height: 2.75rem; display: inline-flex; align-items: center; position: relative; }
.desktop-nav a::after { content: ""; position: absolute; inset: auto 0 0; height: var(--rule-hair); background: var(--color-accent); transform: scaleX(0); transform-origin: right; transition: transform var(--dur-short) var(--ease-out); }
.desktop-nav a:hover::after, .desktop-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.menu-button, .icon-button { min-width: 2.75rem; min-height: 2.75rem; display: grid; place-items: center; border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); color: var(--color-ink); cursor: pointer; }
.menu-button::before { content: "菜单"; font-size: var(--text-sm); font-weight: 700; }
.mobile-menu { position: fixed; inset: 4.8rem var(--page-gutter) auto auto; width: min(24rem, calc(100% - 2rem)); z-index: var(--z-dropdown); display: grid; gap: var(--space-xs); padding: var(--space-md); background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); box-shadow: 0 1rem 2rem var(--color-shadow); opacity: 0; transform: translateY(-0.5rem); pointer-events: none; transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.mobile-menu.is-open { opacity: 1; transform: none; pointer-events: auto; }
.mobile-menu a { min-height: 2.75rem; display: flex; align-items: center; padding-inline: var(--space-sm); }

.btn { position: relative; isolation: isolate; min-height: 2.9rem; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-lg); border: var(--rule-hair) solid var(--color-ink); background: var(--color-ink); color: var(--color-paper); font-weight: 800; text-decoration: none; white-space: nowrap; cursor: pointer; overflow: hidden; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn::after { content: ""; position: absolute; inset: -60% auto -60% -35%; width: 20%; transform: translateX(-250%) rotate(18deg); background: color-mix(in oklch, var(--color-paper-3) 75%, transparent); z-index: -1; }
.btn:hover { background: var(--color-ink); color: var(--color-paper); }
.btn:hover::after { animation: sheen var(--dur-long) var(--ease-out); }
.btn:active { transform: translateY(1px); }
.btn[aria-disabled="true"], .btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.btn[data-state="loading"] { cursor: wait; }
.btn[data-state="loading"]::before { content: ""; width: 1rem; aspect-ratio: 1; border: 2px solid var(--color-paper-3); border-inline-end-color: var(--color-accent); border-radius: var(--radius-pill); animation: spin 0.9s linear infinite; }
.btn[data-state="error"] { background: var(--color-error); color: var(--color-paper); }
.btn[data-state="success"] { background: var(--color-success); color: var(--color-paper); }
.btn--ghost { background: color-mix(in oklch, var(--color-paper) 86%, transparent); color: var(--color-ink); border-color: var(--color-paper); }
.btn--small { min-height: 2.75rem; padding: var(--space-xs) var(--space-md); font-size: var(--text-sm); }
@keyframes sheen { from { transform: translateX(-250%) rotate(18deg); } to { transform: translateX(850%) rotate(18deg); } }
@keyframes spin { to { transform: rotate(360deg); } }

.hero { position: relative; min-height: clamp(35rem, 82dvh, 52rem); display: grid; align-items: end; isolation: isolate; overflow: clip; background: var(--color-overlay); color: var(--color-overlay-text); }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; z-index: -2; animation: hero-breathe 18s var(--ease-in-out) alternate infinite; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, color-mix(in oklch, var(--color-overlay) 92%, transparent), color-mix(in oklch, var(--color-overlay) 38%, transparent) 68%, color-mix(in oklch, var(--color-overlay) 52%, transparent)); }
.hero-inner { width: min(100%, var(--content-max)); margin-inline: auto; padding: var(--space-2xl) var(--page-gutter) var(--space-3xl); display: grid; gap: var(--space-lg); }
.hero-copy { max-width: 52rem; display: grid; gap: var(--space-md); }
.hero-kicker { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.tag { display: inline-flex; align-items: center; min-height: 2rem; padding: var(--space-2xs) var(--space-sm); border: var(--rule-hair) solid currentColor; font-size: var(--text-sm); font-weight: 700; white-space: nowrap; }
.hero-title { max-width: 14ch; text-shadow: 0 0.15rem 0.8rem var(--color-overlay); }
.hero-jp { display: block; margin-block-start: var(--space-xs); font-family: var(--font-body); font-size: clamp(1rem, 2vw, var(--text-md)); font-weight: 400; letter-spacing: 0.02em; line-height: 1.4; }
.hero-lede { max-width: 48ch; font-size: clamp(1.05rem, 2vw, var(--text-md)); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.hero-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rule-hair); background: color-mix(in oklch, var(--color-overlay-text) 35%, transparent); border: var(--rule-hair) solid color-mix(in oklch, var(--color-overlay-text) 35%, transparent); max-width: 47rem; }
.hero-fact { padding: var(--space-sm); background: color-mix(in oklch, var(--color-overlay) 72%, transparent); }
.hero-fact strong, .hero-fact span { display: block; }
.hero-fact strong { font-variant-numeric: tabular-nums; }
.hero-fact span { font-size: var(--text-sm); opacity: 0.82; }
@keyframes hero-breathe { from { transform: scale(1.02); } to { transform: scale(1.05); } }

.subhero { position: relative; min-height: 32rem; display: grid; align-items: end; isolation: isolate; overflow: clip; background: var(--color-overlay); color: var(--color-overlay-text); }
.subhero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: -2; }
.subhero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, color-mix(in oklch, var(--color-overlay) 94%, transparent), color-mix(in oklch, var(--color-overlay) 42%, transparent)); }
.subhero-inner { width: min(100%, var(--content-max)); margin-inline: auto; padding: var(--space-2xl) var(--page-gutter) var(--space-3xl); display: grid; gap: var(--space-md); }
.subhero h1 { max-width: 15ch; }
.subhero p { max-width: 52ch; font-size: var(--text-md); }

.info-ribbon { position: relative; z-index: var(--z-raised); margin-block-start: calc(var(--space-xl) * -1); }
.info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); box-shadow: 0 1rem 2rem var(--color-shadow); }
.info-item { min-width: 0; padding: var(--space-md); border-block-end: var(--rule-hair) solid var(--color-rule); }
.info-item span, .spec-row dt, .timeline time { display: block; color: var(--color-muted); font-size: var(--text-sm); }
.info-item strong { display: block; margin-block-start: var(--space-2xs); font-size: var(--text-base); overflow-wrap: anywhere; }

.story-layout { display: grid; gap: var(--space-xl); }
.story-copy { display: grid; gap: var(--space-lg); font-family: var(--font-display); font-size: clamp(1.1rem, 2vw, var(--text-md)); line-height: 1.85; max-width: 66ch; }
.story-aside { align-self: start; padding: var(--space-lg); background: var(--color-surface-wood); }
.story-aside blockquote { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.45; }
.story-aside p { margin-block-start: var(--space-md); color: var(--color-ink-2); }

.feature-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
.feature { min-width: 0; padding: var(--space-xl); background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); display: grid; align-content: space-between; gap: var(--space-xl); transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.feature:nth-child(1) { background: var(--color-surface-blue); }
.feature:nth-child(4) { background: var(--color-surface-wood); }
.feature-index { font-family: var(--font-display); font-variant-numeric: tabular-nums; color: var(--color-accent-ink); }
.feature p { color: var(--color-ink-2); max-width: 40ch; }

.photo-story { display: grid; gap: 0; background: var(--color-ink); color: var(--color-paper); }
.photo-story figure { min-width: 0; min-height: 25rem; }
.photo-story img { width: 100%; height: 100%; object-fit: cover; }
.photo-story-copy { padding: var(--space-2xl) var(--page-gutter); display: grid; align-content: center; gap: var(--space-lg); }
.photo-story-copy p { max-width: 48ch; color: var(--color-paper-3); }

.gallery-preview, .gallery-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
.gallery-card { position: relative; min-width: 0; border: 0; padding: 0; background: var(--color-ink); color: var(--color-paper); cursor: zoom-in; overflow: clip; text-align: start; }
.gallery-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform var(--dur-long) var(--ease-out), opacity var(--dur-short) var(--ease-out); }
.gallery-card span { position: absolute; inset: auto var(--space-sm) var(--space-sm); padding: var(--space-xs) var(--space-sm); background: color-mix(in oklch, var(--color-overlay) 78%, transparent); font-size: var(--text-sm); }
.gallery-card:active img { transform: scale(0.99); }
.gallery-card[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.gallery-card[data-state="loading"]::after { content: "加载中"; position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); padding: var(--space-xs); background: var(--color-overlay); }
.gallery-card[data-state="error"] { outline: 2px solid var(--color-error); }
.gallery-card[data-state="success"] { outline: 2px solid var(--color-success); }
.gallery-filter { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-block-end: var(--space-xl); }
.gallery-more { margin-block-start: var(--space-xl); }
.filter-button { min-height: 2.75rem; padding: var(--space-xs) var(--space-md); border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); color: var(--color-ink); cursor: pointer; white-space: nowrap; }
.filter-button[aria-pressed="true"] { background: var(--color-ink); color: var(--color-paper); }
[hidden] { display: none !important; }

.download-slab { background: var(--color-ink); color: var(--color-paper); }
.download-slab-inner { display: grid; gap: var(--space-xl); align-items: center; }
.download-slab p { color: var(--color-paper-3); max-width: 55ch; }
.download-slab .btn { background: var(--color-paper); color: var(--color-ink); justify-self: start; }

.timeline { display: grid; gap: 0; }
.timeline-item { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-lg); border-block-start: var(--rule-hair) solid var(--color-rule); }
.timeline-item:last-child { border-block-end: var(--rule-hair) solid var(--color-rule); }
.timeline-item p { margin-block-start: var(--space-xs); color: var(--color-ink-2); }
.review-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
.review-card { padding: var(--space-xl); background: var(--color-paper); border-block-start: 0.25rem solid var(--color-ink); }
.review-card:nth-child(2) { transform: translateY(var(--space-md)); }
.review-card p { margin-block-start: var(--space-md); color: var(--color-ink-2); }

.accordion { border-block-end: var(--rule-hair) solid var(--color-rule); }
.accordion-item { border-block-start: var(--rule-hair) solid var(--color-rule); }
.accordion-button { width: 100%; min-height: 4rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-md); padding: var(--space-md) 0; border: 0; background: transparent; color: var(--color-ink); text-align: start; cursor: pointer; }
.accordion-button h3 { font-family: var(--font-body); font-size: var(--text-md); }
.accordion-icon { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border: var(--rule-hair) solid var(--color-rule); }
.accordion-icon::before { content: "+"; font-size: var(--text-lg); }
.accordion-button[aria-expanded="true"] .accordion-icon::before { content: "−"; }
.accordion-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-long) var(--ease-in-out); }
.accordion-panel > div { overflow: hidden; }
.accordion-panel p, .accordion-panel ul { padding: 0 3.75rem var(--space-lg) 0; color: var(--color-ink-2); max-width: 70ch; }
.accordion-button[aria-expanded="true"] + .accordion-panel { grid-template-rows: 1fr; }

.platform-grid, .guide-grid, .article-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
.platform-card, .guide-card, .article-card { min-width: 0; padding: var(--space-xl); border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); display: grid; align-content: start; gap: var(--space-md); }
.platform-card--primary { background: var(--color-surface-blue); }
.platform-card--disabled { background: var(--color-paper-2); color: var(--color-muted); }
.platform-card .tag { width: fit-content; }
.steps { counter-reset: step; display: grid; gap: var(--space-md); }
.step { counter-increment: step; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-lg); border-block-start: var(--rule-hair) solid var(--color-rule); }
.step::before { content: counter(step, decimal-leading-zero); font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-accent-ink); }
.spec-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.spec-list { margin: 0; }
.spec-row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-sm); border-block-start: var(--rule-hair) solid var(--color-rule); }
.spec-row dd { margin: 0; }

.prose-layout { display: grid; gap: var(--space-xl); }
.toc { padding: var(--space-lg); background: var(--color-paper-2); align-self: start; }
.toc strong { display: block; margin-block-end: var(--space-sm); }
.toc a { display: block; min-height: 2.75rem; padding-block: var(--space-xs); text-decoration: none; }
.prose { max-width: 72ch; }
.prose section { scroll-margin-top: 6rem; padding-block: var(--space-xl); border-block-start: var(--rule-hair) solid var(--color-rule); }
.prose section:first-child { border: 0; padding-block-start: 0; }
.prose h2 { font-size: var(--text-2xl); margin-block-end: var(--space-lg); }
.prose h3 { margin-block: var(--space-lg) var(--space-sm); }
.prose p + p, .prose p + ul, .prose ul + p, .prose ol + p { margin-block-start: var(--space-md); }
.prose li + li { margin-block-start: var(--space-xs); }
.prose table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.prose th, .prose td { padding: var(--space-sm); border-block-start: var(--rule-hair) solid var(--color-rule); text-align: start; }

.lightbox { position: fixed; inset: 0; margin: auto; width: min(94%, 80rem); height: fit-content; max-height: 90dvh; padding: 0; border: var(--rule-hair) solid var(--color-rule); background: var(--color-overlay); color: var(--color-paper); overflow: visible; opacity: 0; transform: scale(0.96); transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.lightbox[open] { opacity: 1; transform: scale(1); }
.lightbox::backdrop { background: color-mix(in oklch, var(--color-overlay) 84%, transparent); }
.lightbox figure { display: grid; grid-template-rows: minmax(0, 1fr) auto; max-height: 90dvh; }
.lightbox img { width: 100%; max-height: 82dvh; object-fit: contain; }
.lightbox figcaption { padding: var(--space-sm) 4rem var(--space-sm) var(--space-md); }
.lightbox-close, .lightbox-prev, .lightbox-next { position: absolute; z-index: var(--z-raised); min-width: 2.75rem; min-height: 2.75rem; border: var(--rule-hair) solid var(--color-paper); background: var(--color-overlay); color: var(--color-paper); cursor: pointer; }
.lightbox-close { inset: var(--space-sm) var(--space-sm) auto auto; }
.lightbox-prev { inset: 50% auto auto var(--space-sm); transform: translateY(-50%); }
.lightbox-next { inset: 50% var(--space-sm) auto auto; transform: translateY(-50%); }

.final-cta { padding-block: var(--space-4xl); background: var(--color-paper-2); }
.final-cta-inner { display: grid; gap: var(--space-xl); max-width: 60rem; }
.final-cta p { max-width: 52ch; font-size: var(--text-md); color: var(--color-ink-2); }
.footer { padding: var(--space-3xl) var(--page-gutter) 7rem; background: var(--color-ink); color: var(--color-paper); }
.footer-inner { width: min(100%, var(--content-max)); margin-inline: auto; display: grid; gap: var(--space-2xl); }
.footer-mast { display: grid; gap: var(--space-md); }
.footer-mast img { display: none; }
.footer-mast::before { content: "能干的后辈葵酱"; font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 800; letter-spacing: -0.025em; }
.footer-mast p { max-width: 48ch; color: var(--color-paper-3); }
.footer-links-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); padding-block-start: var(--space-xl); border-block-start: var(--rule-hair) solid var(--color-neutral); }
.footer-link-group { display: grid; align-content: start; gap: var(--space-xs); }
.footer-link-group h3 { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-paper-3); }
.footer-link-group a { min-width: 2.75rem; min-height: 2.75rem; display: flex; align-items: center; width: fit-content; }
.footer-legal { display: grid; gap: var(--space-xs); padding-block-start: var(--space-lg); border-block-start: var(--rule-hair) solid var(--color-neutral); color: var(--color-paper-3); font-size: var(--text-sm); }

.sticky-cta { position: fixed; inset: auto 0 0; z-index: var(--z-sticky); min-height: 4.4rem; display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-xs) max(var(--page-gutter), env(safe-area-inset-right)) max(var(--space-xs), env(safe-area-inset-bottom)) max(var(--page-gutter), env(safe-area-inset-left)); background: var(--color-paper); color: var(--color-ink); border-block-start: var(--rule-hair) solid var(--color-rule); box-shadow: 0 -0.5rem 1.4rem var(--color-shadow); }
.sticky-cta span { min-width: 0; font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (hover: hover) and (pointer: fine) {
  .feature:hover { box-shadow: 0 0.6rem 0 var(--color-shadow); }
  .gallery-card:hover img, .gallery-card:focus-visible img { transform: scale(1.025); }
  .footer a:hover, .toc a:hover, .guide-card a:hover { color: var(--color-accent); }
}
@media (min-width: 40rem) {
  .wordmark::after { content: "能干的后辈葵酱"; }
  .hero-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .info-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gallery-preview, .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-preview .gallery-card:first-child { grid-column: span 2; }
  .gallery-preview .gallery-card:first-child img { aspect-ratio: 16 / 8; }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature:first-child { grid-row: span 2; min-height: 28rem; }
  .platform-grid, .guide-grid, .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .review-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-links-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 60rem) {
  .desktop-nav { display: flex; }
  .hero-inner { padding-block-end: var(--space-3xl); }
  .subhero-inner { padding-block-end: var(--space-3xl); }
  .info-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .info-item { border-inline-end: var(--rule-hair) solid var(--color-rule); border-block-end: 0; }
  .story-layout { grid-template-columns: minmax(0, 1.65fr) minmax(18rem, 0.75fr); }
  .feature-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(12rem, auto); }
  .feature:nth-child(1) { grid-column: span 3; }
  .feature:nth-child(2), .feature:nth-child(3) { grid-column: span 3; }
  .feature:nth-child(4) { grid-column: span 2; }
  .feature:nth-child(5) { grid-column: span 4; }
  .photo-story { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); min-height: 42rem; }
  .photo-story--reverse figure { order: 2; }
  .download-slab-inner { grid-template-columns: minmax(0, 1fr) auto; }
  .download-slab .btn { justify-self: end; }
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gallery-grid .gallery-card:nth-child(4n + 1) { grid-column: span 2; }
  .gallery-grid .gallery-card:nth-child(4n + 1) img { aspect-ratio: 16 / 7; }
  .platform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prose-layout { grid-template-columns: minmax(14rem, 0.35fr) minmax(0, 1fr); }
  .toc { position: sticky; inset-block-start: 6rem; }
  .footer-inner { grid-template-columns: minmax(18rem, 0.7fr) minmax(0, 1.3fr); }
  .footer-links-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-legal { grid-column: 1 / -1; }
  .sticky-cta { left: 50%; right: auto; bottom: var(--space-md); width: min(42rem, calc(100% - 2rem)); transform: translate(-50%, calc(100% + 3rem)); opacity: 0; border: var(--rule-hair) solid var(--color-rule); transition: transform var(--dur-long) var(--ease-out), opacity var(--dur-short) var(--ease-out); }
  .sticky-cta.is-visible { transform: translate(-50%, 0); opacity: 1; }
}
@media (min-width: 90rem) {
  .hero-title { max-width: 16ch; }
  .section { padding-block: var(--space-4xl); }
}
@media (pointer: coarse) {
  .btn, .filter-button, .gallery-card, .accordion-button, .footer a, .toc a { min-height: 3rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 150ms !important; animation-iteration-count: 1 !important; transition-duration: 150ms !important; }
  .hero > img { animation: none; transform: none; }
  .btn::after { display: none; }
  .lightbox { transform: none; }
}