/* Hallmark · macrostructure: Feature Stack · theme: custom dark / roman-serif / warm · nav: N10 · footer: Ft4 · enrichment: reviewed photography · 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) */
/* Hallmark · pre-emit critique: P5 H5 E5 S5 R4 V5 */
@import url("tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; scroll-padding-top: calc(var(--banner-height) + 1rem); }
body { margin: 0; min-width: 0; overflow-x: clip; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); line-height: 1.75; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: .13; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E"); }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: .08em; text-underline-offset: .22em; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
h1, h2, h3, p, figure { margin-top: 0; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.12; overflow-wrap: anywhere; min-width: 0; }
h1 { font-size: clamp(3.2rem, 9vw, 8.4rem); letter-spacing: -.055em; font-weight: 700; }
h2 { font-size: clamp(2.15rem, 4.8vw, 4.9rem); letter-spacing: -.035em; }
h3 { font-size: clamp(1.25rem, 2vw, 1.8rem); }
::selection { background: var(--color-accent); color: var(--color-accent-ink); }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
[hidden] { display: none !important; }
.has-overlay { overflow: hidden; }
.skip-link { position: fixed; inset-block-start: .5rem; inset-inline-start: .5rem; z-index: 200; transform: translateY(-150%); background: var(--color-accent); color: var(--color-accent-ink); padding: var(--space-sm) 1rem; }
.skip-link:focus { transform: none; }
.container { width: min(100%, var(--content-width)); margin-inline: auto; padding-inline: var(--page-gutter); }
.eyebrow { margin-bottom: .75rem; color: var(--color-accent); font-family: var(--font-mono); font-size: .73rem; letter-spacing: .16em; text-transform: uppercase; }
.lede { max-width: 44rem; color: var(--color-ink-2); font-size: clamp(1.05rem, 1.6vw, 1.3rem); }
.section { padding-block: var(--space-xl); border-block-start: 1px solid var(--color-rule); }
.section--sand { background: var(--color-sand-surface); color: var(--color-ink); }
.section--lapis { background: var(--color-lapis-surface); color: var(--color-lapis-text); }
.section-head { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 5vw, 4rem); }
.section-head h2 { max-width: 14ch; margin-bottom: 0; }
.section-head p { max-width: 42rem; color: var(--color-ink-2); }
.section--lapis .section-head p { color: var(--color-lapis-muted); }

/* N10: a single DOM morphs from a full bar into a compact floating rail. */
.site-header { position: fixed; inset: 0 0 auto; z-index: var(--z-sticky-nav); height: var(--banner-height); pointer-events: none; }
.nav-shell { width: 100%; height: 100%; border-bottom: 1px solid var(--color-nav-rule); background: var(--color-nav-surface); backdrop-filter: blur(12px); transition: background-color .38s var(--ease-out), border-color .38s var(--ease-out); pointer-events: auto; }
.site-header.is-floating .nav-shell { border-color: transparent; background: transparent; }
.nav-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; width: min(calc(100% - 2rem), var(--content-width)); height: 58px; margin: calc((var(--banner-height) - 58px) / 2) auto 0; padding-inline: var(--page-gutter); border: 1px solid transparent; border-radius: 999px; transition: background-color .38s var(--ease-out), border-color .38s var(--ease-out), box-shadow .38s var(--ease-out); }
.site-header.is-floating .nav-inner { border-color: var(--color-rule); background: var(--color-nav-floating); box-shadow: 0 8px 28px var(--color-shadow); }
.wordmark { color: var(--color-ink); font-family: var(--font-display); font-weight: 700; letter-spacing: .04em; text-decoration: none; white-space: nowrap; }
.wordmark small { display: block; margin-top: -.25rem; color: var(--color-accent); font-family: var(--font-mono); font-size: .58rem; letter-spacing: .15em; }
.primary-nav { display: none; justify-content: center; gap: clamp(1rem, 2vw, 2rem); }
.primary-nav a { min-height: 44px; display: inline-flex; align-items: center; color: var(--color-ink-2); font-size: .84rem; text-decoration: none; white-space: nowrap; }
.primary-nav a[aria-current="page"], .primary-nav a:hover { color: var(--color-accent); }
.nav-toggle { width: 44px; height: 44px; margin-inline-start: auto; border: 0; background: transparent; color: var(--color-ink); position: relative; }
.nav-toggle::before, .nav-toggle::after { content: ""; position: absolute; inset-inline: 10px; height: 1px; background: currentColor; transition: transform .2s var(--ease-out); }
.nav-toggle::before { top: 16px; }
.nav-toggle::after { bottom: 16px; }
.nav-toggle[aria-expanded="true"]::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"]::after { transform: translateY(-6px) rotate(-45deg); }
.primary-nav.is-open { display: grid; position: fixed; top: calc(var(--banner-height) + .5rem); inset-inline: 1rem; padding: 1rem; background: var(--color-paper-2); border: 1px solid var(--color-rule); }
.primary-nav.is-open a { border-bottom: 1px solid var(--color-rule); }
.nav-cta { display: none; }

.button { position: relative; isolation: isolate; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-accent); border-radius: var(--radius-sm); background: var(--color-accent); color: var(--color-accent-ink); font-weight: 800; text-decoration: none; white-space: nowrap; overflow: hidden; transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), background .18s var(--ease-out); }
.button::after { content: ""; position: absolute; inset: 0; z-index: -1; transform: translateX(-130%) skewX(-18deg); background: linear-gradient(90deg, transparent, var(--color-shine), transparent); animation: sheen 3.8s ease-in-out infinite; }
.button--secondary { background: transparent; color: var(--color-ink); border-color: var(--color-ink-2); }
.button--secondary::after { display: none; }
.button--large { min-height: 60px; padding-inline: clamp(1.25rem, 4vw, 3rem); font-size: 1.05rem; }
.button[aria-disabled="true"], .button:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.button[data-state="loading"] { cursor: wait; }
.button[data-state="error"] { border-color: var(--color-danger); background: var(--color-danger); color: var(--color-error-ink); }
.button[data-state="success"] { border-color: var(--color-success); background: var(--color-success); color: var(--color-success-ink); }
.button:active { transform: translateY(1px) scale(.99); }
.nav-inner > .nav-cta { display: none; }
@keyframes sheen { 0%, 60% { transform: translateX(-130%) skewX(-18deg); } 85%, 100% { transform: translateX(130%) skewX(-18deg); } }

.hero { min-height: 100svh; position: relative; display: grid; align-items: end; overflow: clip; background: var(--color-paper-2); }
.hero__media, .hero__shade { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.82) contrast(1.05); }
.hero__shade { background: linear-gradient(90deg, var(--color-hero-shade-strong) 0%, var(--color-hero-shade-mid) 48%, var(--color-hero-shade-light) 100%), linear-gradient(0deg, var(--color-paper) 0%, transparent 42%); }
.hero__content { position: relative; z-index: 2; padding-block: calc(var(--banner-height) + 1rem) clamp(7rem, 12vw, 10rem); }
.hero__content h1 { max-width: 10ch; margin-bottom: 1rem; text-shadow: 0 4px 32px var(--color-hero-shadow); }
.hero__english { display: block; margin-top: var(--space-xs); color: var(--color-accent); font-family: var(--font-mono); font-size: clamp(.9rem, 2vw, 1.25rem); letter-spacing: .18em; text-transform: uppercase; }
.hero__lede { max-width: 40rem; font-size: clamp(1.1rem, 2vw, 1.38rem); color: var(--color-hero-text); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-block: 1.75rem; }
.hero__facts { display: flex; flex-wrap: wrap; gap: .5rem; }
.fact-badge { display: inline-flex; min-height: 32px; align-items: center; padding: .25rem .75rem; border: 1px solid var(--color-badge-rule); background: var(--color-badge-surface); color: var(--color-ink); font-size: .75rem; white-space: nowrap; }
.age-marker { position: absolute; z-index: 3; inset-inline-end: var(--page-gutter); inset-block-end: 6rem; width: 56px; aspect-ratio: 1; display: grid; place-items: center; border: 2px solid var(--color-danger); background: var(--color-age-surface); color: var(--color-age-text); font-family: var(--font-mono); font-weight: 800; }
.dust { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.dust i { position: absolute; left: var(--left); bottom: -2rem; width: 3px; height: 3px; border-radius: 50%; background: var(--color-accent); opacity: .4; animation: drift 18s linear infinite; animation-delay: var(--delay); }
@keyframes drift { to { transform: translate3d(2rem, -105svh, 0); opacity: 0; } }

.info-rail { position: relative; z-index: 3; display: grid; background: var(--color-paper-2); border-bottom: 1px solid var(--color-rule); }
.info-rail article { padding: var(--space-md) var(--page-gutter); border-top: 1px solid var(--color-rule); }
.info-rail small { display: block; color: var(--color-muted); font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.info-rail strong { display: block; margin-top: .25rem; font-family: var(--font-display); font-size: 1.05rem; }

.story-copy { max-width: 55rem; margin-inline: auto; font-family: var(--font-display); font-size: clamp(1.16rem, 2vw, 1.42rem); line-height: 2; }
.story-copy p:first-child::first-letter { float: left; margin: .13em .18em 0 0; color: var(--color-accent); font-size: 4.2em; line-height: .8; }
.feature-stack { display: grid; gap: 2rem; }
.feature-intro h2 { margin-bottom: 1rem; }
.feature-list { display: grid; gap: 1rem; }
.feature-panel { min-width: 0; border-top: 1px solid var(--color-rule); padding-top: 1rem; }
.feature-panel figure { margin: 0; }
.feature-panel img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--color-rule); }
.feature-panel .panel-copy { padding-block: 1rem 2rem; }
.feature-panel h3 { margin-bottom: .5rem; }
.feature-panel p { color: var(--color-ink-2); }
.feature-number { color: var(--color-accent); font-family: var(--font-mono); font-size: .72rem; }
.mechanics-grid, .guide-grid, .requirements, .platform-grid, .route-grid { display: grid; gap: 1px; background: var(--color-rule); border: 1px solid var(--color-rule); }
.mechanic, .guide-card, .requirement-card, .platform-card, .route-card { min-width: 0; padding: clamp(1.25rem, 3vw, 2rem); background: var(--color-paper-2); }
.mechanic .glyph { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 1.5rem; border: 1px solid var(--color-accent); color: var(--color-accent); font-family: var(--font-mono); }
.mechanic p, .guide-card p, .route-card p { color: var(--color-ink-2); }
.guide-card a, .route-card a { min-height: 44px; display: inline-flex; align-items: center; color: var(--color-accent); font-weight: 700; white-space: nowrap; }

.gallery-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
.gallery-item { min-width: 0; margin: 0; }
.gallery-button { width: 100%; padding: 0; border: 1px solid var(--color-rule); background: var(--color-paper-2); color: inherit; cursor: zoom-in; overflow: hidden; }
.gallery-button img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .35s var(--ease-out), filter .35s var(--ease-out); }
.gallery-item figcaption { padding-top: var(--space-xs); color: var(--color-muted); font-size: .75rem; }
.gallery-tabs { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: 1rem; margin-bottom: 1.25rem; scrollbar-width: thin; }
.gallery-tabs button { min-height: 44px; padding: var(--space-xs) 1rem; border: 1px solid var(--color-rule); background: transparent; color: var(--color-ink-2); white-space: nowrap; }
.gallery-tabs button[aria-selected="true"] { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); }

.lightbox { position: fixed; inset: 0; z-index: var(--z-overlay); display: grid; place-items: center; padding: 1rem; background: var(--color-overlay); }
.lightbox[aria-hidden="true"] { display: none; }
.lightbox__figure { width: min(100%, 84rem); margin: 0; }
.lightbox__figure img { width: 100%; max-height: 78svh; object-fit: contain; }
.lightbox__figure figcaption { margin-top: var(--space-sm); text-align: center; color: var(--color-ink-2); }
.lightbox button { position: fixed; width: 48px; height: 48px; border: 1px solid var(--color-rule); background: var(--color-paper-2); color: var(--color-ink); }
.lightbox__close { top: 1rem; right: 1rem; }
.lightbox__prev { left: 1rem; top: 50%; }
.lightbox__next { right: 1rem; top: 50%; }

.timeline { border-inline-start: 1px solid var(--color-accent); padding-inline-start: 1.5rem; }
.timeline-entry { position: relative; padding: 0 0 2rem 1rem; }
.timeline-entry::before { content: ""; position: absolute; inset-inline-start: -1.82rem; inset-block-start: .55rem; width: .58rem; aspect-ratio: 1; border-radius: 50%; background: var(--color-accent); }
.timeline-entry time { color: var(--color-accent); font-family: var(--font-mono); font-size: .72rem; }
.timeline-entry h3 { margin-top: .25rem; }
.review-layout { display: grid; gap: 1.5rem; }
.review-score { padding: 2rem; border: 1px solid var(--color-rule); background: var(--color-paper-2); }
.review-score strong { display: block; color: var(--color-accent); font-family: var(--font-display); font-size: clamp(3.5rem, 7vw, 7rem); line-height: .9; }
.review-score span, .review-score small { display: block; margin-top: var(--space-sm); }
.review-score small { color: var(--color-muted); }
.audience-list { display: grid; gap: 1px; background: var(--color-rule); }
.audience-list article { padding: 1.5rem; background: var(--color-paper-2); }

.accordion { border-top: 1px solid var(--color-rule); }
.accordion details { border-bottom: 1px solid var(--color-rule); }
.accordion summary { min-height: 60px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; cursor: pointer; list-style: none; font-family: var(--font-display); font-size: 1.05rem; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; color: var(--color-accent); font-family: var(--font-mono); font-size: 1.4rem; }
.accordion details[open] summary::after { content: "−"; }
.accordion details > div { max-width: 55rem; padding: 0 0 1.5rem; color: var(--color-ink-2); }

.final-cta { position: relative; overflow: hidden; padding-block: var(--space-xl); border-block-start: 2px solid var(--color-accent); background: var(--color-paper-3); color: var(--color-ink); }
.final-cta::before { content: "WASED-HEQ"; position: absolute; inset-inline-end: -2rem; inset-block-start: -.3em; color: var(--color-watermark); font-family: var(--font-display); font-size: clamp(5rem, 17vw, 18rem); line-height: 1; white-space: nowrap; }
.final-cta .container { position: relative; }
.final-cta h2 { max-width: 12ch; }
.final-cta p { max-width: 40rem; }
.final-cta .button { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); }

.page-hero { padding-block: calc(var(--banner-height) + 5rem) clamp(3rem, 8vw, 6rem); border-bottom: 1px solid var(--color-rule); background: linear-gradient(120deg, var(--color-paper), var(--color-page-hero-end)); }
.page-hero h1 { max-width: 12ch; margin-bottom: 1rem; }
.breadcrumbs { margin-bottom: 2rem; color: var(--color-muted); font-size: .78rem; }
.breadcrumbs a { min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; }
.content-layout { display: grid; gap: 2rem; }
.toc { align-self: start; border-block: 1px solid var(--color-rule); padding-block: 1rem; }
.toc strong { display: block; margin-bottom: var(--space-sm); color: var(--color-accent); font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; }
.toc a { display: flex; min-height: 44px; align-items: center; padding-block: var(--space-xs); color: var(--color-ink-2); text-decoration: none; }
.article-body { min-width: 0; }
.article-body section { padding-block: 3rem; border-top: 1px solid var(--color-rule); }
.article-body h2 { font-size: clamp(1.9rem, 4vw, 3.4rem); }
.article-body h3 { margin-top: 2rem; }
.article-body p, .article-body li { max-width: 68ch; color: var(--color-ink-2); }
.article-body li + li { margin-top: var(--space-xs); }
.article-body a { min-height: 44px; display: inline-flex; align-items: center; }
.note { padding: 1rem var(--space-md); border-inline-start: 3px solid var(--color-accent); background: var(--color-paper-2); color: var(--color-ink-2); }
.step-list { counter-reset: steps; display: grid; gap: 1px; background: var(--color-rule); border: 1px solid var(--color-rule); padding: 0; list-style: none; }
.step-list li { counter-increment: steps; max-width: none; padding: 1.5rem; background: var(--color-paper-2); }
.step-list li::before { content: "0" counter(steps); display: block; color: var(--color-accent); font-family: var(--font-mono); }
.requirement-card h3, .platform-card h3 { color: var(--color-accent); }
.requirement-card li { color: var(--color-ink-2); }
.platform-card--disabled { opacity: .6; }
.platform-meta { display: flex; gap: var(--space-xs); flex-wrap: wrap; margin-block: 1rem; }
.status-tag { padding: .25rem var(--space-xs); border: 1px solid var(--color-rule); color: var(--color-ink-2); font-size: .72rem; white-space: nowrap; }

.site-footer { padding: 2.5rem var(--page-gutter) 7rem; border-top: 1px solid var(--color-rule); background: var(--color-footer); color: var(--color-ink-2); }
.footer-nav { display: flex; flex-wrap: wrap; gap: var(--space-xs) 1rem; margin-bottom: 1.5rem; }
.footer-nav a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; }
.related-links { display: grid; gap: .25rem 1.5rem; margin-block: 1.5rem; }
.related-links a { min-height: 44px; display: inline-flex; align-items: center; color: var(--color-muted); }
.foot-dense { max-width: 90rem; margin-inline: auto; font-family: var(--font-mono); font-size: .68rem; line-height: 1.7; }
.foot-dense strong { color: var(--color-accent); }
.back-top { margin-top: 1rem; min-height: 44px; border: 1px solid var(--color-rule); background: transparent; color: var(--color-ink); }
.sticky-cta { position: fixed; z-index: 45; inset: auto 0 0; display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); padding: var(--space-sm) max(1rem, env(safe-area-inset-right)) max(var(--space-sm), env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); border-top: 1px solid var(--color-rule); background: var(--color-sticky); }
.sticky-cta span { display: none; color: var(--color-ink-2); font-size: .78rem; }
.sticky-cta .button { min-height: 46px; width: 100%; }
.sticky-cta .button { background: transparent; color: var(--color-accent); }

@media (hover: hover) and (pointer: fine) {
  .button:hover { transform: translateY(-2px); box-shadow: 0 10px 30px var(--color-shadow); }
  .button--secondary:hover { background: var(--color-paper-3); }
  .gallery-button:hover img { transform: scale(1.025); filter: brightness(1.08); }
  .guide-card:hover, .mechanic:hover { background: var(--color-paper-3); }
}

@media (min-width: 40rem) {
  .info-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .info-rail article { border-inline-end: 1px solid var(--color-rule); }
  .mechanics-grid, .guide-grid, .platform-grid, .route-grid, .requirements { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .review-layout { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .related-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sticky-cta span { display: block; }
  .sticky-cta .button { width: auto; }
}

@media (min-width: 60rem) {
  :root { --banner-height: 82px; }
  .primary-nav { display: flex; }
  .nav-toggle { display: none; }
  .nav-inner > .nav-cta { display: inline-flex; }
  .info-rail { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .info-rail article { padding-inline: 1.5rem; }
  .feature-stack { grid-template-columns: minmax(18rem, .72fr) minmax(0, 1.28fr); gap: clamp(3rem, 7vw, 8rem); }
  .feature-intro { position: sticky; top: calc(var(--banner-height) + 2rem); align-self: start; }
  .feature-panel { min-height: 80svh; display: grid; align-content: center; }
  .mechanics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gallery-grid .gallery-item:nth-child(5n + 1) { grid-column: span 2; }
  .gallery-grid .gallery-item:nth-child(5n + 1) img { aspect-ratio: 2 / 1; }
  .content-layout { grid-template-columns: minmax(13rem, .28fr) minmax(0, 1fr); gap: clamp(3rem, 7vw, 8rem); }
  .toc { position: sticky; top: calc(var(--banner-height) + 2rem); }
  .age-marker { inset-block-end: 2rem; }
  .related-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sticky-cta { inset-inline: auto 1.25rem; inset-block-end: 1.25rem; width: auto; max-width: 28rem; border: 1px solid var(--color-rule); border-radius: 999px; padding: var(--space-xs) var(--space-xs) var(--space-xs) 1rem; }
  .sticky-cta .button { background: var(--color-accent); color: var(--color-accent-ink); }
  .site-footer { padding-bottom: 3rem; }
}

@media (min-width: 90rem) {
  .hero__content { padding-inline-start: max(var(--page-gutter), calc((100% - var(--content-width)) / 2 + var(--page-gutter))); }
  .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .dust { display: none; }
}