:root {
    --bg: #0b0e0c;
    --bg-elevated: #101411;
    --surface: #151a16;
    --surface-2: #1c231d;
    --surface-3: #243026;
    --line: rgba(235, 240, 222, 0.14);
    --line-soft: rgba(235, 240, 222, 0.08);
    --text: #f0f2e8;
    --text-muted: #a6afa0;
    --text-dim: #6f7c70;
    --accent: #f08a4b;
    --accent-strong: #ffad73;
    --accent-ink: #24140d;
    --warm: #ffb36f;
    --blue: #86a9ff;
    --sans: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
    --display: Inter, var(--sans);
    --mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
    --header-height: 72px;
    --content-width: 1320px;
    --ease: cubic-bezier(.22, 1, .36, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 24px); }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: var(--bg); color: var(--text); font-family: var(--sans); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body.dialog-open { overflow: hidden; }
a { color: inherit; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
img { max-width: 100%; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
[hidden] { display: none !important; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.mono { font-family: var(--mono); letter-spacing: .08em; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 200; transform: translateY(-150%); background: var(--accent); color: var(--accent-ink); padding: 10px 14px; font-size: .82rem; font-weight: 800; text-decoration: none; }
.skip-link:focus { transform: translateY(0); }
#scroll-progress { position: fixed; inset: 0 auto auto 0; z-index: 150; width: 0; height: 3px; background: var(--accent); box-shadow: 0 0 18px rgba(240,138,75,.5); transition: width .12s linear; }
.site-frame { display: flex; min-height: 100vh; }
.site-rail { position: sticky; top: 0; z-index: 40; display: flex; flex: 0 0 76px; flex-direction: column; justify-content: space-between; height: 100vh; border-right: 1px solid var(--line-soft); background: var(--bg); }
.rail-top { padding: 20px 18px; }
.rail-mark { display: inline-flex; flex-direction: column; gap: 9px; text-decoration: none; }
.mark-square { display: inline-grid; place-items: center; width: 39px; height: 39px; border: 1px solid var(--accent); color: var(--accent); font-family: var(--display); font-size: 13px; font-weight: 800; letter-spacing: -.08em; line-height: 1; }
.mark-square span { font-size: 8px; letter-spacing: .02em; }
.mark-caption { color: var(--text-dim); font-family: var(--mono); font-size: 7px; letter-spacing: .12em; line-height: 1.45; }
.rail-middle { display: flex; justify-content: center; flex: 1; padding: 32px 0; writing-mode: vertical-rl; transform: rotate(180deg); }
.rail-middle span, .rail-scroll { color: var(--text-dim); font-family: var(--mono); font-size: 9px; letter-spacing: .15em; }
.rail-bottom { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px 0 20px; }
.rail-year { color: var(--accent); font-family: var(--mono); font-size: 10px; letter-spacing: .12em; writing-mode: vertical-rl; }
.rail-line { width: 1px; height: 34px; background: var(--line); }
.rail-scroll { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 7px; }
.page-shell { min-width: 0; flex: 1; }
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 28px; min-height: var(--header-height); padding: 0 38px; border-bottom: 1px solid transparent; background: rgba(11, 14, 12, .75); transition: border-color .25s ease, background .25s ease, box-shadow .25s ease; }
.topbar.is-scrolled { border-color: var(--line-soft); background: rgba(11, 14, 12, .94); box-shadow: 0 10px 28px rgba(0,0,0,.16); }
.mobile-brand { display: none; font-family: var(--display); font-size: .8rem; font-weight: 700; letter-spacing: .02em; text-decoration: none; }
.mobile-brand span { color: var(--accent); margin-right: 6px; }
.topnav { display: flex; align-items: center; gap: 4px; }
.topnav-link { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 8px 13px; color: var(--text-muted); font-size: .84rem; text-decoration: none; transition: color .2s ease, background .2s ease; }
.topnav-link span { color: var(--text-dim); font-family: var(--mono); font-size: .64rem; }
.topnav-link:hover, .topnav-link.is-active { color: var(--accent); }
.topnav-link.is-active { background: rgba(240,138,75,.07); }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.icon-button { display: inline-grid; place-items: center; width: 42px; height: 42px; color: var(--text-muted); border: 1px solid var(--line-soft); border-radius: 50%; text-decoration: none; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.icon-button:hover { color: var(--accent); border-color: rgba(240,138,75,.45); background: rgba(240,138,75,.06); }
.topbar-support { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 15px; color: var(--accent-ink); background: var(--accent); font-size: .78rem; font-weight: 800; text-decoration: none; transition: background .2s ease, transform .2s ease; }
.topbar-support:hover { background: var(--accent-strong); transform: translateY(-1px); }
main { overflow: clip; }
.section-wrap { width: min(100% - 76px, var(--content-width)); margin-inline: auto; }
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(340px, .84fr) 180px; gap: clamp(28px, 5vw, 84px); align-items: center; min-height: min(780px, calc(100vh - var(--header-height))); padding: clamp(72px, 10vw, 136px) 5.8vw clamp(78px, 9vw, 128px); border-bottom: 1px solid var(--line-soft); isolation: isolate; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -2; background: radial-gradient(circle at var(--pointer-x, 78%) var(--pointer-y, 32%), rgba(240,138,75,.12), transparent 22%), radial-gradient(ellipse 55% 65% at 78% 45%, rgba(111, 60, 35, .18), transparent 70%), linear-gradient(115deg, rgba(255,255,255,.02), transparent 38%); pointer-events: none; }
.hero::after { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .35; background-image: linear-gradient(rgba(235,240,222,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(235,240,222,.055) 1px, transparent 1px); background-size: 58px 58px; mask-image: linear-gradient(to bottom, #000, transparent 90%); pointer-events: none; }
.hero-gridline { position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: .3; }
.hero-copy { max-width: 720px; }
.eyebrow, .section-kicker { display: flex; align-items: center; gap: 10px; color: var(--accent); font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow { margin-bottom: 24px; }
.eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px rgba(240,138,75,.7); }
.hero h1 { max-width: 720px; margin: 0; color: var(--text); font-family: var(--display); font-size: clamp(3.5rem, 7vw, 7rem); font-weight: 800; letter-spacing: -.095em; line-height: .94; }
.hero h1 span { color: var(--accent); }
.hero-lead { max-width: 560px; margin: 30px 0 0; color: var(--text-muted); font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.9; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; margin-top: 40px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 11px 17px; border: 1px solid transparent; border-radius: 2px; font-size: .82rem; font-weight: 800; text-decoration: none; transition: transform .25s var(--ease), background .25s ease, border-color .25s ease, color .25s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--accent); color: var(--accent-ink); }
.button-primary:hover { background: var(--accent-strong); }
.button-secondary { color: var(--accent); border-color: rgba(240,138,75,.42); background: transparent; }
.button-secondary:hover { background: rgba(240,138,75,.09); border-color: var(--accent); }
.text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: .83rem; font-weight: 600; text-decoration: none; transition: color .2s ease, gap .2s ease; }
.text-link:hover { gap: 12px; color: var(--accent); }
.hero-footnote { display: flex; align-items: center; gap: 18px; margin-top: 54px; color: var(--text-dim); font-size: .74rem; }
.hero-footnote::before { content: ''; display: inline-block; width: 24px; height: 1px; background: var(--line); }
.hero-footnote .mono { color: var(--text-muted); font-size: .64rem; }
.hero-visual { position: relative; min-height: 455px; display: grid; place-items: center; }
.visual-orbit { position: absolute; border: 1px solid rgba(240,138,75,.24); border-radius: 50%; transform: rotate(-22deg); }
.orbit-one { width: min(32vw, 410px); height: min(20vw, 250px); }
.orbit-two { width: min(26vw, 330px); height: min(39vw, 490px); transform: rotate(53deg); border-color: rgba(255,143,77,.22); }
.visual-card { position: relative; z-index: 1; width: min(100%, 360px); aspect-ratio: .78; padding: 22px; color: var(--accent-ink); background: var(--accent); box-shadow: 24px 32px 0 rgba(240,138,75,.08), 0 24px 80px rgba(0,0,0,.32); transform: rotate(-6deg); transition: transform .5s var(--ease); }
.hero-visual:hover .visual-card { transform: rotate(-2deg) translateY(-5px); }
.visual-card::before { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(36,20,13,.28); pointer-events: none; }
.visual-card-head, .visual-card-foot { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 10px; font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .1em; line-height: 1.4; }
.signal { width: 8px; height: 8px; margin-top: 2px; border-radius: 50%; background: var(--warm); box-shadow: 0 0 10px rgba(255,143,77,.7); }
.visual-headline { position: absolute; inset: 50% 22px auto; transform: translateY(-50%); font-family: var(--display); font-size: clamp(2.7rem, 5vw, 4.6rem); font-weight: 800; letter-spacing: -.1em; line-height: .84; }
.visual-headline em { color: var(--warm); font-style: normal; }
.visual-rule { position: absolute; right: 22px; bottom: 66px; left: 22px; height: 1px; background: rgba(36,20,13,.32); }
.visual-card-foot { position: absolute; right: 22px; bottom: 22px; left: 22px; }
.visual-note { position: absolute; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 8px 11px; background: var(--surface); border: 1px solid var(--line); color: var(--text-muted); font-size: .73rem; box-shadow: 0 10px 24px rgba(0,0,0,.2); }
.visual-note .mono { color: var(--accent); font-size: .62rem; }
.note-top { top: 12%; right: 0; }
.note-bottom { bottom: 10%; left: 0; }
.visual-stamp { position: absolute; right: 5%; bottom: 3%; z-index: 2; display: grid; place-items: center; width: 66px; height: 66px; border: 1px solid var(--warm); color: var(--warm); font-family: var(--mono); font-size: 11px; line-height: 1.05; text-align: center; transform: rotate(12deg); }
.hero-aside { align-self: end; padding-bottom: 5px; }
.aside-index { color: var(--text-dim); font-size: 9px; }
.hero-aside p { margin: 24px 0; color: var(--text-muted); font-size: .78rem; line-height: 1.8; }
.aside-line { height: 1px; margin: 20px 0 16px; background: var(--line); }
.aside-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); color: var(--text-dim); font-size: .7rem; }
.aside-stat strong { color: var(--text); font-family: var(--display); font-size: 1.35rem; font-weight: 700; }
.manifesto { padding: clamp(58px, 7vw, 96px) 0 clamp(88px, 11vw, 150px); }
.section-kicker { color: var(--text-dim); }
.section-kicker .mono { color: var(--accent); font-size: 11px; }
.manifesto-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .75fr); gap: clamp(40px, 10vw, 160px); margin-top: 34px; padding-top: 34px; border-top: 1px solid var(--line); }
.manifesto h2, .section-heading h2, .archive-heading h2, .support-copy h2 { margin: 0; font-family: var(--display); font-weight: 800; letter-spacing: -.065em; line-height: 1.02; }
.manifesto h2 { font-size: clamp(2.6rem, 5vw, 5.6rem); }
.manifesto-title-block { min-width: 0; }
.traditional-wordmark { position: relative; display: flex; width: min(100%, 520px); min-height: clamp(220px, 23vw, 285px); flex-direction: column; justify-content: center; row-gap: 0; margin-top: clamp(24px, 4vw, 52px); overflow: visible; transform: rotate(-25deg); transform-origin: 46% 50%; isolation: isolate; pointer-events: none; }
.traditional-wordmark::before { display: none; }
.traditional-wordmark-svg { display: block; width: 100%; height: auto; overflow: visible; }
.wordmark-text { font-family: var(--display); font-size: 76px; font-weight: 800; letter-spacing: -1px; fill: none; stroke: rgba(240,138,75,.72); stroke-width: 1.35; stroke-linejoin: round; paint-order: stroke; }
.wordmark-text-bottom { stroke: rgba(240,242,232,.42); }
.manifesto h2 em, .support-copy h2 em { color: var(--accent); font-style: normal; }
.manifesto-copy { max-width: 510px; }
.manifesto-copy p { margin: 0 0 20px; color: var(--text-muted); font-size: .96rem; line-height: 1.95; }
.manifesto-copy .lead-copy { color: var(--text); font-size: 1.18rem; line-height: 1.75; }
.principles { display: flex; flex-wrap: wrap; gap: 11px 20px; margin-top: 34px; color: var(--accent); font-family: var(--mono); font-size: .68rem; }
.principles span { display: inline-flex; align-items: center; gap: 7px; }
.principles .icon { width: 14px; height: 14px; }
.works { padding-bottom: clamp(90px, 10vw, 140px); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.section-heading .section-kicker { margin-bottom: 20px; }
.section-heading h2, .archive-heading h2 { font-size: clamp(2.7rem, 5vw, 5.4rem); }
.section-heading h2 span, .archive-heading h2 span { color: var(--text-dim); font-size: .55em; font-weight: 500; letter-spacing: -.04em; }
.section-heading > p, .archive-heading > p { max-width: 250px; margin: 0 0 4px; color: var(--text-muted); font-size: .8rem; line-height: 1.8; text-align: right; }
.work-toolbar { display: grid; grid-template-columns: minmax(230px, 1fr) auto auto; align-items: center; gap: 20px; padding: 22px 0; }
.search-box { position: relative; display: flex; align-items: center; max-width: 360px; color: var(--text-dim); }
.search-box > .icon { position: absolute; left: 14px; width: 16px; height: 16px; pointer-events: none; }
.search-box input { width: 100%; min-height: 44px; padding: 9px 48px 9px 42px; border: 1px solid var(--line); border-radius: 0; outline: none; background: var(--surface); color: var(--text); font-size: .8rem; transition: border-color .2s ease, box-shadow .2s ease; }
.search-box input::placeholder { color: var(--text-dim); }
.search-box input:focus { border-color: rgba(240,138,75,.62); box-shadow: 0 0 0 3px rgba(240,138,75,.08); }
.search-box kbd { position: absolute; right: 13px; color: var(--text-dim); font-family: var(--mono); font-size: .68rem; }
.filter-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-pill { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 7px 10px; border: 1px solid transparent; border-radius: 0; background: transparent; color: var(--text-muted); font-size: .76rem; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.filter-pill span { color: var(--text-dim); font-family: var(--mono); font-size: .62rem; }
.filter-pill:hover { color: var(--text); border-color: var(--line); }
.filter-pill.is-active { color: var(--accent-ink); background: var(--accent); }
.filter-pill.is-active span { color: rgba(36,20,13,.7); }
.is-template { border-style: dashed; }
.is-template .project-type { color: var(--warm); border-color: rgba(255,179,111,.42); }
.result-count { justify-self: end; color: var(--text-dim); font-family: var(--mono); font-size: .68rem; white-space: nowrap; }
.result-count span { color: var(--accent); }
.project-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.project-card { position: relative; display: flex; grid-column: span 4; flex-direction: column; min-width: 0; border: 1px solid var(--line-soft); background: var(--surface); transition: transform .4s var(--ease), border-color .3s ease, background .3s ease, box-shadow .4s ease; }
.featured-grid .project-card.is-featured { grid-column: span 8; }
.project-card:hover { border-color: rgba(240,138,75,.45); background: var(--surface-2); transform: translateY(-6px); box-shadow: 0 22px 50px rgba(0,0,0,.24); }
.project-card.is-hidden-by-filter { display: none; }
.works.is-filter-empty .featured-grid { min-height: 0; }
.card-media { position: relative; min-height: 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-3); }
.is-featured .card-media { aspect-ratio: 16 / 7; }
.media-fallback { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(120deg, #633d28, #1c1613 58%, #4c2b1c); color: rgba(240,138,75,.25); font-family: var(--display); font-size: clamp(3rem, 8vw, 7rem); font-weight: 800; letter-spacing: -.12em; }
.project-card:nth-child(3n + 2) .media-fallback { background: linear-gradient(120deg, #3d342d, #1c1a18 58%, #563d2c); color: rgba(255,143,77,.28); }
.project-card:nth-child(3n + 3) .media-fallback { background: linear-gradient(120deg, #26395a, #151a20 58%, #353a6b); color: rgba(134,169,255,.27); }
.card-media img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; background: #171311; filter: saturate(.7) contrast(1.02); transition: transform .7s var(--ease), filter .4s ease; }
.project-card:hover .card-media img { transform: none; filter: saturate(.95) contrast(1.04); }
.media-shade { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(8,10,8,.5), transparent 42%, rgba(8,10,8,.75)); pointer-events: none; }
.card-media-top { position: absolute; top: 13px; right: 13px; left: 13px; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.project-type, .project-status, .featured-label { display: inline-flex; align-items: center; min-height: 25px; padding: 4px 8px; font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.project-type { color: var(--accent); border: 1px solid rgba(240,138,75,.34); background: rgba(11,14,12,.76); }
.project-status { color: var(--text); background: rgba(11,14,12,.78); }
.project-status i { width: 5px; height: 5px; margin-right: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.status-fresh { color: var(--accent); }
.status-recent { color: var(--blue); }
.status-progress { color: var(--warm); }
.status-archived { color: var(--text-muted); }
.media-source { position: absolute; right: 13px; bottom: 13px; z-index: 3; display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid rgba(240,242,232,.32); border-radius: 50%; color: var(--text); background: rgba(11,14,12,.58); transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease; }
.media-source:hover { color: var(--accent-ink); border-color: var(--accent); background: var(--accent); transform: translate(2px, -2px); }
.media-source .icon { width: 15px; height: 15px; }
.featured-label { position: absolute; bottom: 14px; left: 15px; z-index: 3; color: var(--accent); font-size: 8px; }
.card-body { display: flex; flex: 1; min-width: 0; flex-direction: column; padding: 19px 20px 20px; }
.card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.card-heading > div { min-width: 0; }
.project-subtitle { margin: 0 0 8px; color: var(--text-dim); font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.card-heading h3 { margin: 0; color: var(--text); font-family: var(--display); font-size: clamp(1rem, 1.5vw, 1.3rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.25; overflow-wrap: anywhere; }
.card-open { display: grid; flex: 0 0 auto; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); color: var(--text-muted); background: transparent; transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease; }
.card-open:hover { color: var(--accent-ink); border-color: var(--accent); background: var(--accent); transform: translate(2px, -2px); }
.card-open .icon { width: 14px; height: 14px; }
.card-description { display: -webkit-box; max-width: 100%; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; text-overflow: ellipsis; overflow-wrap: anywhere; margin: 18px 0 18px; color: var(--text-muted); font-size: .79rem; line-height: 1.85; }
.card-footer { display: flex; flex-direction: column; gap: 14px; margin-top: auto; }
.card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.card-tags span, .dialog-tags span { padding: 4px 7px; color: var(--text-muted); border: 1px solid var(--line-soft); font-family: var(--mono); font-size: 9px; letter-spacing: .02em; }
.card-date { color: var(--text-dim); font-family: var(--mono); font-size: 9px; }
.card-date .mono { margin-right: 6px; color: var(--text-dim); font-size: 8px; }
.card-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--line-soft); }
.card-link { display: inline-flex; align-items: center; gap: 6px; min-height: 31px; padding: 5px 8px; color: var(--text-muted); border: 1px solid var(--line); font-size: .68rem; font-weight: 700; text-decoration: none; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.card-link .icon { width: 12px; height: 12px; }
.card-link:hover, .card-link.is-primary { color: var(--accent); border-color: rgba(240,138,75,.45); }
.card-link.is-primary:hover { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.porting-section { padding: clamp(58px, 7vw, 92px) 0; border-top: 1px solid var(--line-soft); }
.porting-grid .project-card { grid-column: span 4; }
.tools-section { padding: clamp(92px, 10vw, 138px) 0; border-top: 1px solid var(--line-soft); }
.section-heading-compact { align-items: end; }
.tool-grid .project-card { grid-column: span 4; }
.tool-grid .card-media { aspect-ratio: 1.7 / 1; }
.tool-grid .project-card.is-featured { border-color: rgba(240,138,75,.23); }
.tool-grid .project-card.is-featured::before { content: ''; position: absolute; inset: -1px; border: 1px solid rgba(240,138,75,.28); pointer-events: none; }
.archive-section { padding: clamp(90px, 10vw, 140px) 0 clamp(100px, 12vw, 170px); border-top: 1px solid var(--line-soft); }
.archive-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, .48fr); gap: 22px 50px; align-items: end; padding-bottom: 30px; border-bottom: 1px solid var(--line); }
.archive-heading .section-kicker { grid-column: 1 / -1; }
.archive-heading h2 { margin-top: -2px; }
.archive-heading > p { justify-self: end; text-align: left; }
.archive-grid .project-card { grid-column: span 3; opacity: .83; }
.archive-grid .card-media { aspect-ratio: 1.4 / 1; filter: grayscale(.25); }
.archive-grid .card-media img { filter: saturate(.45) contrast(.95); }
.archive-grid .project-card:hover { opacity: 1; }
.archive-grid .card-description { -webkit-line-clamp: 2; line-clamp: 2; }
.no-results { padding: 80px 20px 100px; text-align: center; }
.no-results-mark { display: block; color: var(--accent); font-family: var(--display); font-size: 3rem; font-weight: 800; }
.no-results h3 { margin: 4px 0 8px; font-size: 1.25rem; }
.no-results p { margin: 0 0 24px; color: var(--text-muted); font-size: .86rem; }
.support-section { padding: 0 0 clamp(100px, 12vw, 160px); }
.support-inner { display: grid; grid-template-columns: minmax(0, .9fr) minmax(320px, .74fr); gap: clamp(40px, 9vw, 130px); align-items: end; padding: clamp(36px, 5vw, 64px); border: 1px solid rgba(240,138,75,.3); background: linear-gradient(125deg, rgba(240,138,75,.1), rgba(240,138,75,.03) 47%, rgba(255,143,77,.08)); }
.support-copy h2 { margin-top: 22px; font-family: var(--display); font-size: clamp(2.6rem, 5vw, 5.1rem); font-weight: 800; letter-spacing: -.065em; line-height: 1.02; }
.support-copy h2 em { color: var(--accent); font-style: normal; }
.support-copy p { max-width: 500px; margin: 24px 0 0; color: var(--text-muted); font-size: .9rem; line-height: 1.9; }
.support-actions { display: grid; gap: 10px; }
.support-card { display: grid; grid-template-columns: 45px 1fr auto; align-items: center; gap: 14px; min-height: 76px; padding: 13px 15px; border: 1px solid var(--line); color: var(--text); background: rgba(11,14,12,.54); text-decoration: none; transition: border-color .2s ease, background .2s ease, transform .25s var(--ease); }
.support-card:hover { border-color: rgba(240,138,75,.65); background: rgba(11,14,12,.78); transform: translateX(4px); }
.support-card-primary { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.support-card-primary:hover { border-color: var(--accent-strong); background: var(--accent-strong); }
.support-card-icon { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid currentColor; }
.support-card strong, .support-card small { display: block; }
.support-card strong { font-size: .85rem; }
.support-card small { margin-top: 3px; color: currentColor; opacity: .67; font-family: var(--mono); font-size: .62rem; }
.support-card .arrow { width: 16px; height: 16px; }
.site-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 26px 38px 34px; border-top: 1px solid var(--line-soft); color: var(--text-dim); font-size: .68rem; }
.footer-brand { display: flex; align-items: center; gap: 12px; color: var(--text-muted); }
.mark-square.small { width: 28px; height: 28px; border-color: var(--text-dim); color: var(--text-muted); font-size: 10px; }
.mark-square.small span { font-size: 6px; }
.site-footer p { margin: 0; text-align: center; font-family: var(--mono); font-size: 9px; }
.footer-disclaimer { grid-column: 1 / -1; margin: 2px 0 0; padding-top: 18px; border-top: 1px solid var(--line-soft); color: var(--text-dim); font-size: .68rem; line-height: 1.85; }
.footer-disclaimer strong { display: block; margin-bottom: 5px; color: var(--text-muted); font-family: var(--mono); font-size: 9px; letter-spacing: .08em; }
.footer-disclaimer p { max-width: 1000px; margin: 0; color: var(--text-dim); font-family: var(--sans); font-size: .68rem; line-height: 1.85; text-align: left; }
.footer-links { display: flex; justify-content: end; flex-wrap: wrap; gap: 14px; font-family: var(--mono); font-size: 9px; }
.footer-links a { color: var(--text-muted); text-decoration: none; }
.footer-links a:hover { color: var(--accent); }
.back-to-top { position: fixed; right: 24px; bottom: 24px; z-index: 20; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); color: var(--accent); background: rgba(11,14,12,.88); opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .25s ease, transform .25s var(--ease), background .2s ease; }
.back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.back-to-top:hover { background: var(--accent); color: var(--accent-ink); }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.project-card:nth-child(2) { transition-delay: .06s; }
.project-card:nth-child(3) { transition-delay: .12s; }
.project-card:nth-child(4) { transition-delay: .18s; }
.project-card:nth-child(5) { transition-delay: .24s; }
.project-dialog { width: min(680px, calc(100% - 32px)); padding: 0; border: 1px solid rgba(240,138,75,.38); border-radius: 0; color: var(--text); background: var(--bg-elevated); box-shadow: 0 28px 100px rgba(0,0,0,.55); }
.project-dialog::backdrop { background: rgba(3,5,4,.78); backdrop-filter: blur(8px); }
.dialog-shell { position: relative; padding: clamp(28px, 6vw, 54px); }
.dialog-close { position: absolute; top: 18px; right: 18px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); color: var(--text-muted); background: transparent; }
.dialog-close:hover { color: var(--accent-ink); border-color: var(--accent); background: var(--accent); }
.dialog-kicker { margin-bottom: 17px; color: var(--accent); font-family: var(--mono); font-size: 9px; letter-spacing: .13em; }
.project-dialog h2 { max-width: 560px; margin: 0; font-family: var(--display); font-size: clamp(2rem, 5vw, 3.3rem); letter-spacing: -.06em; line-height: 1.05; }
.dialog-meta { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 22px; color: var(--text-dim); font-family: var(--mono); font-size: .68rem; }
.dialog-meta span:first-child { color: var(--text-muted); }
.dialog-description { margin: 30px 0 22px; color: var(--text-muted); font-size: .92rem; line-height: 1.95; }
.dialog-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.dialog-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--line); }
@media (max-width: 1180px) {
    .hero { grid-template-columns: minmax(0, 1fr) minmax(300px, .72fr); gap: 50px; }
    .hero-aside { grid-column: 1 / -1; display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); align-items: end; gap: 18px; padding: 22px 0 0; border-top: 1px solid var(--line); }
    .hero-aside p { margin: 0; }
    .aside-line { display: none; }
    .aside-stat { display: block; padding: 0; border: 0; }
    .aside-stat strong { display: block; margin-bottom: 2px; }
    .archive-grid .project-card { grid-column: span 4; }
}
@media (max-width: 900px) {
    :root { --header-height: 64px; }
    .site-rail { display: none; }
    .topbar { padding: 0 20px; }
    .mobile-brand { display: block; }
    .topnav { margin-left: auto; }
    .topnav-link { padding: 8px 9px; font-size: .72rem; }
    .topnav-link span { display: none; }
    .topbar-actions { gap: 7px; }
    .icon-button { width: 36px; height: 36px; }
    .topbar-support { min-height: 36px; padding: 0 10px; font-size: .7rem; }
    .section-wrap { width: min(100% - 40px, var(--content-width)); }
    .hero { min-height: auto; padding: 88px 32px 70px; }
    .hero h1 { font-size: clamp(3.35rem, 10vw, 6rem); }
    .hero-visual { min-height: 400px; }
    .work-toolbar { grid-template-columns: 1fr; gap: 12px; }
    .search-box { max-width: none; }
    .result-count { justify-self: start; }
    .featured-grid .project-card.is-featured { grid-column: span 7; }
    .featured-grid .project-card:not(.is-featured) { grid-column: span 5; }
    .tool-grid .project-card { grid-column: span 6; }
    .support-inner { grid-template-columns: 1fr; }
    .site-footer { grid-template-columns: 1fr; padding-inline: 20px; }
    .site-footer p { text-align: left; }
    .footer-links { justify-content: start; }
}
@media (max-width: 640px) {
    html { scroll-padding-top: calc(var(--header-height) + 12px); }
    .topbar { gap: 10px; padding-inline: 14px; }
    .mobile-brand { font-size: .72rem; white-space: nowrap; }
    .topnav { gap: 0; }
    .topnav-link { min-height: 40px; padding: 8px 6px; font-size: .67rem; }
    .topbar-support { display: none; }
    .hero { display: block; padding: 70px 20px 54px; }
    .hero h1 { font-size: clamp(3.3rem, 17vw, 5.4rem); }
    .hero-lead { margin-top: 25px; font-size: .92rem; line-height: 1.85; }
    .hero-actions { align-items: stretch; flex-direction: column; gap: 17px; margin-top: 30px; }
    .hero-actions .button { width: 100%; }
    .hero-footnote { flex-wrap: wrap; gap: 8px 14px; margin-top: 32px; }
    .hero-visual { min-height: 360px; margin: 24px -3px 0; }
    .visual-card { width: min(80%, 310px); }
    .orbit-one { width: 82vw; height: 54vw; }
    .orbit-two { width: 68vw; height: 93vw; }
    .note-top { top: 8%; right: 0; }
    .note-bottom { bottom: 8%; left: 0; }
    .hero-aside { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding-top: 25px; }
    .aside-index, .hero-aside p { grid-column: 1 / -1; }
    .hero-aside p { margin: 0 0 3px; font-size: .75rem; }
    .aside-stat strong { font-size: 1.15rem; }
    .aside-stat span { font-size: .63rem; }
    .section-wrap { width: min(100% - 32px, var(--content-width)); }
    .manifesto { padding: 56px 0 90px; }
    .manifesto-grid { display: block; margin-top: 25px; padding-top: 25px; }
    .manifesto h2 { font-size: clamp(2.75rem, 13vw, 4.2rem); }
    .traditional-wordmark { width: min(92%, 400px); min-height: 205px; margin: 22px auto 0; row-gap: 0; transform: rotate(-18deg); transform-origin: center; }
    .traditional-wordmark-svg { width: 100%; }
    .manifesto-copy { margin-top: 36px; }
    .manifesto-copy .lead-copy { font-size: 1rem; }
    .section-heading { display: block; padding-bottom: 22px; }
    .section-heading h2, .archive-heading h2 { font-size: clamp(2.7rem, 14vw, 4.7rem); }
    .section-heading > p { margin-top: 17px; text-align: left; }
    .work-toolbar { padding: 18px 0; }
    .filter-pills { gap: 3px; }
    .filter-pill { min-height: 34px; padding-inline: 7px; font-size: .68rem; }
    .project-grid { display: block; }
    .project-card, .featured-grid .project-card.is-featured, .featured-grid .project-card:not(.is-featured), .tool-grid .project-card, .archive-grid .project-card { margin-bottom: 14px; }
    .project-card:last-child { margin-bottom: 0; }
    .is-featured .card-media, .card-media, .tool-grid .card-media, .archive-grid .card-media { aspect-ratio: 16 / 9; }
    .card-body { padding: 17px; }
    .card-description { -webkit-line-clamp: 3; line-clamp: 3; margin: 15px 0; }
    .archive-heading { display: block; padding-bottom: 22px; }
    .archive-heading h2 { margin-top: 17px; }
    .archive-heading > p { margin-top: 16px; }
    .support-section { padding-bottom: 90px; }
    .support-inner { padding: 25px 18px 18px; }
    .support-copy h2 { font-size: clamp(2.6rem, 13vw, 4rem); }
    .support-copy p { font-size: .82rem; }
    .support-card { grid-template-columns: 39px 1fr auto; gap: 10px; min-height: 68px; padding: 10px; }
    .support-card-icon { width: 38px; height: 38px; }
    .support-card strong { font-size: .76rem; }
    .support-card small { font-size: .56rem; }
    .back-to-top { right: 15px; bottom: 15px; }
    .project-dialog { width: calc(100% - 20px); }
    .dialog-shell { padding: 28px 20px 24px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
    .reveal { opacity: 1; transform: none; }
}



/* Small-screen fit overrides */
@media (max-width: 640px) {
    .topbar-support, .icon-button { display: none; }
    .hero h1 { font-size: clamp(2.7rem, 13vw, 4.2rem); }
}
@media (max-width: 640px) {
    .orbit-two { width: 56vw; height: 78vw; }
}


/* Latest updates carousel */
.latest-section { padding: 0 0 clamp(54px, 7vw, 88px); }
.latest-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding: 0 0 25px; border-bottom: 1px solid var(--line); }
.latest-heading .section-kicker { margin-bottom: 18px; }
.latest-heading h2 { margin: 0; color: var(--text); font-family: var(--display); font-size: clamp(2.45rem, 4.8vw, 5rem); font-weight: 800; letter-spacing: -.07em; line-height: 1; }
.latest-heading h2 span { color: var(--text-dim); font-size: .56em; font-weight: 500; letter-spacing: -.04em; }
.carousel-controls { display: flex; gap: 7px; }
.carousel-control { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--line); color: var(--text-muted); background: transparent; transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease; }
.carousel-control:hover { color: var(--accent-ink); border-color: var(--accent); background: var(--accent); transform: translateY(-2px); }
.carousel-control .icon { width: 16px; height: 16px; }
.carousel-meta { display: flex; justify-content: space-between; gap: 20px; padding: 15px 0; color: var(--text-dim); font-size: .69rem; }
.carousel-meta .mono { color: var(--accent); font-size: .65rem; }
.latest-carousel { overflow: hidden; border: 1px solid var(--line-soft); background: var(--surface); }
.carousel-track { display: flex; width: 100%; transition: transform .65s var(--ease); will-change: transform; }
.carousel-slide { display: grid; grid-template-columns: minmax(0, 1.17fr) minmax(280px, .83fr); flex: 0 0 100%; min-width: 0; min-height: 390px; }
.carousel-slide-media { position: relative; min-width: 0; overflow: hidden; background: var(--surface-3); }
.carousel-slide-media .media-fallback { background: linear-gradient(120deg, #633d28, #1c1613 58%, #4c2b1c); }
.carousel-slide-media img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; background: #171311; filter: saturate(.76) contrast(1.03); }
.carousel-slide-media .media-shade { background: linear-gradient(180deg, rgba(8,10,8,.46), transparent 38%, rgba(8,10,8,.7)); }
.carousel-slide-label { position: absolute; top: 16px; right: 16px; left: 16px; z-index: 3; display: flex; align-items: center; justify-content: space-between; color: var(--text-muted); font-size: .65rem; }
.carousel-slide-label .mono { color: var(--accent); font-size: .64rem; }
.carousel-slide-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(26px, 4vw, 54px); border-left: 1px solid var(--line-soft); }
.carousel-slide-copy .section-kicker { justify-content: space-between; gap: 15px; font-size: 9px; }
.carousel-slide-copy h3 { margin: 25px 0 7px; color: var(--text); font-family: var(--display); font-size: clamp(1.65rem, 3.4vw, 3.35rem); font-weight: 800; letter-spacing: -.065em; line-height: 1.08; }
.carousel-subtitle { margin: 0; color: var(--accent); font-family: var(--mono); font-size: .7rem; letter-spacing: .07em; }
.carousel-description { display: -webkit-box; max-width: 440px; margin: 23px 0 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; text-overflow: ellipsis; overflow-wrap: anywhere; color: var(--text-muted); font-size: .83rem; line-height: 1.9; }
.carousel-slide-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 31px; }
.carousel-slide-actions .button { min-height: 41px; padding: 9px 13px; font-size: .73rem; }
.carousel-slide-actions .text-link { font-size: .72rem; }
.carousel-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 0 0; }
.carousel-dots { display: flex; align-items: center; gap: 9px; }
.carousel-dot { width: 29px; height: 3px; padding: 0; border: 0; background: var(--line); transition: width .25s ease, background .25s ease; }
.carousel-dot:hover, .carousel-dot.is-active { background: var(--accent); }
.carousel-dot.is-active { width: 52px; }
.carousel-dot span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.carousel-pause { display: inline-flex; align-items: center; gap: 8px; padding: 5px 0; border: 0; color: var(--text-dim); background: transparent; font-family: var(--mono); font-size: 9px; }
.carousel-pause:hover { color: var(--accent); }
.pause-symbol { color: var(--accent); font-size: 11px; }
.dialog-description { white-space: normal; }

@media (max-width: 900px) {
    .carousel-slide { grid-template-columns: minmax(0, 1fr) minmax(250px, .9fr); min-height: 330px; }
    .carousel-slide-copy { padding: 25px; }
    .carousel-slide-copy h3 { font-size: clamp(1.4rem, 3.5vw, 2.4rem); }
}
@media (max-width: 640px) {
    .latest-section { padding-bottom: 54px; }
    .latest-heading { align-items: start; flex-direction: column; gap: 18px; }
    .latest-heading h2 { font-size: clamp(2.7rem, 14vw, 4.6rem); }
    .carousel-controls { align-self: end; }
    .carousel-meta { font-size: .62rem; }
    .carousel-slide { display: block; min-height: 0; }
    .carousel-slide-media { aspect-ratio: 16 / 9; }
    .carousel-slide-copy { min-height: 310px; padding: 22px 18px 24px; border-top: 1px solid var(--line-soft); border-left: 0; }
    .carousel-slide-copy h3 { margin-top: 18px; font-size: clamp(1.7rem, 8vw, 2.55rem); }
    .carousel-description { -webkit-line-clamp: 3; line-clamp: 3; margin-top: 16px; font-size: .76rem; line-height: 1.8; }
    .carousel-slide-actions { gap: 14px; margin-top: 23px; }
    .carousel-slide-actions .button { width: 100%; }
    .carousel-footer { padding-top: 12px; }
    .carousel-dot { width: 20px; }
    .carousel-dot.is-active { width: 36px; }
}