@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&family=Noto+Serif+SC:wght@400;500;600;700&display=swap');

:root {
  color-scheme: light;
  --paper: #e9e5da;
  --paper-light: #f4f1e9;
  --ink: #201f1a;
  --muted: #77756c;
  --line: rgba(32, 31, 26, .19);
  --rail: #24231e;
  --rail-muted: #9c998d;
  --signal: #c84f35;
  --signal-light: #e6a78b;
  --moss: #546451;
  --serif: 'Noto Serif SC', 'Songti SC', Georgia, serif;
  --sans: 'Manrope', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --mono: 'DM Mono', 'SFMono-Regular', Consolas, monospace;
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: var(--paper); scroll-behavior: smooth; }
body { min-width: 320px; min-height: 100vh; margin: 0; overflow: hidden; background: var(--paper); }
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, .wall-stage:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }
a { color: inherit; }

.paper-texture { position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: .14; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"); }
.skip-link { position: fixed; top: 8px; left: 18px; z-index: 100; padding: 9px 12px; transform: translateY(-160%); background: var(--ink); color: var(--paper); }
.skip-link:focus { transform: translateY(0); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }

.bravais-rail { --rail-expanded-width: 138px; position: fixed; inset: 0 auto 0 50%; z-index: 30; display: flex; width: var(--rail-expanded-width); height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; flex-direction: column; align-items: center; padding: 23px 8px 20px; transform: translateX(-50%); overflow: hidden; border-right: 1px solid rgba(255,255,255,.13); border-left: 1px solid rgba(255,255,255,.13); background: linear-gradient(180deg, rgba(36,35,30,.94), rgba(36,35,30,.86) 24%, rgba(36,35,30,.91)); color: var(--paper-light); box-shadow: 0 0 18px rgba(18,17,14,.12); backdrop-filter: blur(18px); pointer-events: auto; opacity: 1; visibility: visible; transition: width .34s cubic-bezier(.2,.75,.25,1), height .34s cubic-bezier(.2,.75,.25,1), max-height .34s cubic-bezier(.2,.75,.25,1), top .34s cubic-bezier(.2,.75,.25,1), padding .34s cubic-bezier(.2,.75,.25,1), border-radius .34s cubic-bezier(.2,.75,.25,1), transform .34s cubic-bezier(.2,.75,.25,1), left 0s, opacity .18s ease, visibility 0s, background .2s; }
.bravais-rail.is-rail-transitioning { transition: width .34s cubic-bezier(.2,.75,.25,1), height .34s cubic-bezier(.2,.75,.25,1), max-height .34s cubic-bezier(.2,.75,.25,1), top .34s cubic-bezier(.2,.75,.25,1), padding .34s cubic-bezier(.2,.75,.25,1), border-radius .34s cubic-bezier(.2,.75,.25,1), transform .34s cubic-bezier(.2,.75,.25,1), opacity .18s ease, visibility 0s, background .2s; }
.bravais-rail.is-rail-reanchoring { opacity: 0; visibility: hidden; pointer-events: none; transition: none !important; }
.bravais-rail.is-edge-collapsed { top: 50%; bottom: auto; width: 28px; height: 68px; max-height: 68px; padding: 0; border-radius: 3px 8px 8px 3px; background: rgba(36,35,30,.94); }
.bravais-rail.is-edge-left { transform: translate(0, -50%); }
.bravais-rail.is-edge-right { transform: translate(-100%, -50%); border-radius: 8px 3px 3px 8px; }
.bravais-rail > :not(.rail-edge-tab) { transition: opacity .14s ease, visibility 0s linear .14s; }
.bravais-rail.is-edge-collapsed > :not(.rail-edge-tab) { visibility: hidden; opacity: 0; pointer-events: none; }
.rail-edge-tab { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; color: var(--paper-light); font: 8px/1 var(--mono); letter-spacing: .1em; writing-mode: vertical-rl; cursor: pointer; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .14s ease, visibility 0s linear .14s; }
.rail-mark, .module-link, .rail-track-button, .rail-language, .rail-open-project { pointer-events: auto; }
.bravais-rail.is-edge-collapsed .rail-edge-tab { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity .2s ease .1s, visibility 0s; }
.rail-edge-tab:focus-visible { outline-offset: -4px; }
.rail-mark { display: flex; width: 49px; height: 49px; flex: 0 0 49px; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(235,231,218,.52); border-radius: 50%; color: inherit; text-decoration: none; font: 600 15px/1 var(--serif); letter-spacing: -.04em; }
.rail-mark span { margin-top: 4px; color: var(--rail-muted); font: 6px/1 var(--mono); letter-spacing: .16em; }
.rail-index { display: flex; width: 100%; justify-content: space-between; margin: 17px 0 10px; color: var(--rail-muted); font: 8px/1.4 var(--mono); letter-spacing: .12em; writing-mode: vertical-rl; transform: rotate(180deg); align-items: center; gap: 9px; }
.rail-index i { font-style: normal; color: var(--signal-light); }
.rail-current { display: grid; width: 100%; max-height: 0; flex: 0 0 auto; gap: 6px; overflow: hidden; padding: 0 7px; border-top: 0 solid rgba(255,255,255,.1); border-bottom: 0 solid rgba(255,255,255,.1); opacity: 0; visibility: hidden; transition: max-height .28s ease, opacity .2s ease, padding .28s ease, margin .28s ease, border-width .28s ease, visibility 0s linear .2s; }
.rail-current.is-visible { max-height: 180px; margin-top: 8px; padding: 10px 7px 11px; border-top-width: 1px; border-bottom-width: 1px; opacity: 1; visibility: visible; transition: max-height .28s ease, opacity .2s ease, padding .28s ease, margin .28s ease, border-width .28s ease, visibility 0s; }
.rail-current-kicker { color: var(--signal-light); font: 7px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.rail-project-title { display: -webkit-box; overflow: hidden; color: var(--paper-light); font-size: 11px; font-weight: 600; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.rail-project-meta { display: grid; gap: 3px; color: var(--rail-muted); font-size: 8px; line-height: 1.45; overflow-wrap: anywhere; }
.rail-open-project { display: flex; width: 100%; align-items: center; justify-content: space-between; margin-top: 2px; padding: 7px 0 2px; border: 0; border-top: 1px solid rgba(255,255,255,.12); background: transparent; color: var(--paper-light); font-size: 8px; text-align: left; cursor: pointer; }
.rail-open-project b { color: var(--signal-light); font-size: 12px; font-weight: 400; }
.rail-open-project:hover { color: var(--signal-light); }
.rail-open-project:disabled { display: none; }
.module-nav { display: flex; width: 100%; min-height: 0; flex: 1; flex-direction: column; justify-content: center; gap: 3px; overflow-y: auto; scrollbar-width: none; }
.module-nav::-webkit-scrollbar { display: none; }
.module-link { position: relative; display: grid; width: 100%; min-height: 43px; flex: 0 0 43px; grid-template-columns: 24px 1fr; align-items: center; padding: 6px 2px; border: 0; border-top: 1px solid rgba(255,255,255,.09); background: transparent; color: var(--rail-muted); text-align: left; cursor: pointer; transition: color .2s, padding .2s; }
.module-link::before { position: absolute; top: -1px; left: 0; width: 0; height: 1px; background: var(--signal-light); content: ''; transition: width .25s ease; }
.module-link:hover, .module-link.is-active { padding-left: 6px; color: var(--paper-light); }
.module-link:hover::before, .module-link.is-active::before { width: 100%; }
.module-number { color: var(--signal-light); font: 9px/1 var(--mono); }
.module-label { font-size: 10px; font-weight: 500; letter-spacing: .04em; }
.rail-bottom { width: 100%; flex: 0 0 auto; padding-top: 11px; border-top: 1px solid rgba(255,255,255,.1); }
.rail-caption { display: block; margin-bottom: 7px; color: var(--rail-muted); font: 8px/1 var(--mono); letter-spacing: .1em; }
.rail-track-switch { display: grid; gap: 3px; width: 100%; margin-bottom: 12px; }
.rail-track-button { display: flex; width: 100%; min-height: 28px; align-items: center; padding: 5px 7px; border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.025); color: var(--rail-muted); font-size: 8px; text-align: left; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.rail-track-button:hover, .rail-track-button.is-active { border-color: rgba(230,167,139,.55); background: rgba(200,79,53,.14); color: var(--paper-light); }
.rail-language-caption { margin-top: 0; }
.rail-language { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; border: 0; background: transparent; color: var(--paper-light); font: 9px/1 var(--mono); cursor: pointer; }
.language-dot, .status-mark { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--signal-light); box-shadow: 0 0 0 3px rgba(230,167,139,.12); }

.portfolio-shell { position: relative; min-height: 100vh; isolation: isolate; }
.wall-stage { position: fixed; inset: 0; z-index: 1; overflow: hidden; touch-action: none; cursor: grab; }
.wall-stage.is-dragging { cursor: grabbing; }
.wall-stage:focus-visible { outline-offset: -6px; }
.wall-visualization { position: absolute; inset: -12%; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at 18% 26%, rgba(200,79,53,.3), transparent 31%), radial-gradient(ellipse at 73% 60%, rgba(84,100,81,.32), transparent 34%), radial-gradient(ellipse at 52% 92%, rgba(102,91,125,.23), transparent 30%), linear-gradient(135deg, rgba(32,31,26,.11), rgba(244,241,233,.12)); filter: blur(26px) saturate(.82); animation: wall-drift 26s ease-in-out infinite alternate; }
@keyframes wall-drift { from { transform: translate3d(-1.4%, -1%, 0) scale(1); } to { transform: translate3d(1.6%, 1.2%, 0) scale(1.035); } }
.wall-field { position: absolute; inset: 0; z-index: 1; }
.wall-block { position: absolute; top: 0; left: 0; z-index: 1; }
.wall-block:hover, .wall-block:focus-within { z-index: 8; }
.stage-glaze { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(ellipse at 57% 54%, transparent 32%, rgba(233,229,218,.025) 70%, rgba(233,229,218,.13) 100%); }

.topbar { position: fixed; top: 21px; right: 30px; left: 30px; z-index: 12; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.topbar-name, .topbar-right { display: flex; align-items: center; gap: 10px; }
.topbar-name { color: rgba(32,31,26,.73); font: 10px/1 var(--mono); letter-spacing: .12em; }
.topbar-name .status-mark { width: 5px; height: 5px; background: var(--moss); box-shadow: 0 0 0 3px rgba(84,100,81,.12); }
.topbar-right { gap: 22px; }
.topbar-note { color: var(--muted); font: 9px/1 var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.ask-button { display: inline-flex; min-height: 37px; align-items: center; gap: 9px; padding: 0 11px; border: 1px solid rgba(32,31,26,.35); border-radius: 99px; background: rgba(233,229,218,.77); color: var(--ink); font-size: 10px; cursor: pointer; pointer-events: auto; backdrop-filter: blur(12px); transition: background .2s, color .2s, border-color .2s; }
.ask-button:hover { border-color: var(--ink); background: var(--ink); color: var(--paper-light); }
.ask-orbit { color: var(--signal); font-size: 15px; }
.ask-button:hover .ask-orbit { color: var(--signal-light); }
.ask-arrow { font-size: 13px; }

.hero-copy { position: fixed; top: clamp(132px, 17vh, 188px); left: clamp(42px, 6vw, 92px); z-index: 8; width: min(450px, 36vw); pointer-events: none; }
.hero-copy .resume-switch-wrap { display: none; }
.hero-copy::before { position: absolute; z-index: -1; inset: -18px -28px -16px -18px; background: linear-gradient(90deg, rgba(233,229,218,.73) 0%, rgba(233,229,218,.37) 66%, rgba(233,229,218,0) 100%); content: ''; filter: blur(2px); }
.hero-kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; color: var(--muted); font: 9px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.hero-kicker > span:first-child { color: var(--signal); }
.kicker-line { display: inline-block; width: 56px; height: 1px; background: var(--signal); opacity: .65; }
.hero-copy h1 { max-width: 570px; margin: 0; color: var(--ink); font: 600 clamp(49px, 5.5vw, 78px)/1 var(--serif); letter-spacing: -.07em; }
.hero-copy h1 em { color: var(--signal); font-style: normal; font-weight: 500; }
.hero-intro { max-width: 365px; margin: 17px 0 18px; color: rgba(32,31,26,.8); font-size: 12px; line-height: 1.75; }
.resume-switch-wrap { display: flex; align-items: center; gap: 12px; pointer-events: auto; }
.resume-switch-label { color: var(--muted); font: 8px/1 var(--mono); letter-spacing: .12em; }
.resume-switch { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border: 1px solid rgba(32,31,26,.22); border-radius: 99px; background: rgba(244,241,233,.62); }
.track-button { padding: 7px 11px; border: 0; border-radius: 99px; background: transparent; color: var(--muted); font-size: 10px; cursor: pointer; transition: background .2s, color .2s; }
.track-button:hover { color: var(--ink); }
.track-button.is-active { background: var(--ink); color: var(--paper-light); }
.hero-actions { display: flex; align-items: center; gap: 22px; margin-top: 22px; pointer-events: auto; }
.text-link { display: inline-flex; align-items: center; gap: 11px; padding: 0 0 7px; border: 0; border-bottom: 1px solid var(--ink); background: transparent; font-size: 11px; cursor: pointer; }
.text-link b { color: var(--signal); font-size: 14px; font-weight: 400; transition: transform .2s; }
.text-link:hover b { transform: translate(2px, -2px); }
.github-link { color: var(--muted); font: 9px/1 var(--mono); letter-spacing: .11em; text-decoration: none; }
.github-link span { color: var(--signal); }
.github-link:hover { color: var(--ink); }

.work-card { position: absolute; display: block; padding: 0; overflow: hidden; border: 1px solid rgba(244,241,233,.26); background: #25241f; color: var(--paper-light); text-align: left; cursor: pointer; box-shadow: 0 7px 18px rgba(24,22,18,.15); transform: translate3d(0,0,0); transition: left .32s cubic-bezier(.2,.7,.2,1), top .32s cubic-bezier(.2,.7,.2,1), width .32s cubic-bezier(.2,.7,.2,1), height .32s cubic-bezier(.2,.7,.2,1), transform .24s cubic-bezier(.2,.7,.2,1), box-shadow .24s, border-color .24s; will-change: transform; }
.work-card:hover, .work-card:focus-visible { z-index: 4; transform: scale(1.018); border-color: var(--signal-light); box-shadow: 0 17px 36px rgba(24,22,18,.29); }
.card-image-wrap { position: absolute; inset: 0; display: block; overflow: hidden; background: #d4d0c4; }
.card-image-wrap::after { position: absolute; inset: 28% 0 0; background: linear-gradient(180deg, transparent 5%, rgba(22,20,15,.16) 48%, rgba(22,20,15,.65)); content: ''; pointer-events: none; }
.card-image { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.work-card:hover .card-image { transform: scale(1.045); }
.card-number { position: absolute; z-index: 1; top: 9px; left: 9px; padding: 5px 6px; background: rgba(32,31,26,.64); color: var(--paper-light); font: 8px/1 var(--mono); letter-spacing: .07em; backdrop-filter: blur(5px); }
.card-category { position: absolute; z-index: 1; top: 10px; right: 10px; padding: 5px 7px; border: 1px solid rgba(255,255,255,.58); background: rgba(32,31,26,.4); color: white; font: 7px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(6px); }
.card-caption { position: absolute; right: 0; bottom: 0; left: 0; z-index: 2; display: flex; min-height: 0; align-items: flex-end; justify-content: space-between; gap: 7px; padding: 12px 11px 11px; background: linear-gradient(180deg, transparent, rgba(20,19,16,.59)); }
.card-title-group { min-width: 0; flex: 1; }
.card-title { display: -webkit-box; overflow: hidden; color: white; font: 500 13px/1.28 var(--serif); text-overflow: ellipsis; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.card-subtitle { display: block; margin-top: 4px; overflow: hidden; color: rgba(255,255,255,.75); font: 7px/1.2 var(--mono); letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap; }
.card-open { flex: 0 0 auto; color: white; font-size: 16px; transition: transform .2s; }
.work-card:hover .card-open { transform: translate(2px,-2px); }
.work-card.is-window { border-color: rgba(32,31,26,.28); background: transparent; box-shadow: inset 0 0 0 1px rgba(244,241,233,.1); backdrop-filter: blur(1px); }
.work-card.is-window .card-image-wrap { background: transparent; }
.work-card.is-window .card-image-wrap::after, .work-card.is-window .card-image { display: none; }
.work-card.is-window .card-caption { top: 0; align-items: center; justify-content: center; padding: 12px; background: rgba(233,229,218,.035); text-align: center; }
.work-card.is-window .card-title-group { flex: 0 1 auto; }
.work-card.is-window .card-title { color: var(--paper-light); font-size: clamp(12px, 1.15vw, 17px); line-height: 1.35; text-align: center; text-shadow: 0 2px 12px rgba(0,0,0,.7); }
.work-card.is-window .card-number, .work-card.is-window .card-category, .work-card.is-window .card-subtitle, .work-card.is-window .card-open { display: none; }

.wall-controls { position: fixed; right: 30px; bottom: 25px; left: 30px; z-index: 10; display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; pointer-events: none; }
.filter-list { display: flex; max-width: min(590px, 38vw); flex-wrap: wrap; gap: 6px; pointer-events: auto; }
.filter-chip { min-height: 30px; padding: 0 11px; border: 1px solid rgba(32,31,26,.26); border-radius: 99px; background: rgba(233,229,218,.86); color: var(--muted); font: 8px/1 var(--mono); cursor: pointer; backdrop-filter: blur(8px); transition: color .18s, background .18s, border .18s; }
.filter-chip:hover, .filter-chip.is-active { border-color: var(--ink); background: var(--ink); color: var(--paper-light); }
.wall-instructions { display: flex; align-items: center; gap: 9px; color: var(--muted); font: 8px/1 var(--mono); letter-spacing: .03em; text-align: right; white-space: nowrap; }
.direction-glyph { display: inline-grid; width: 22px; height: 22px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--signal); font-size: 14px; }
.reset-button { margin-left: 7px; padding: 0 0 3px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); font: inherit; cursor: pointer; pointer-events: auto; }
.reset-button:hover { border-color: var(--signal); color: var(--signal); }
.bottom-stamp { position: fixed; right: 30px; bottom: 76px; z-index: 5; display: flex; flex-direction: column; gap: 4px; color: rgba(32,31,26,.46); font: 7px/1 var(--mono); letter-spacing: .16em; text-align: right; pointer-events: none; }

.sheet { position: fixed; z-index: 60; max-width: none; max-height: none; margin: auto 22px auto auto; padding: 0; overflow: hidden; border: 1px solid rgba(32,31,26,.13); border-radius: 2px; background: var(--paper-light); color: var(--ink); box-shadow: 0 28px 90px rgba(18,17,14,.32); }
.sheet:not([open]) { display: none; }
.sheet::backdrop { background: rgba(28,27,23,0); backdrop-filter: blur(0); }
.sheet[open]::backdrop { animation: sheet-backdrop-in .42s ease both; }
.sheet.is-closing::backdrop { animation: sheet-backdrop-out .27s ease both; }
@keyframes sheet-backdrop-in { to { background: rgba(28,27,23,.48); backdrop-filter: blur(6px); } }
@keyframes sheet-backdrop-out { from { background: rgba(28,27,23,.48); backdrop-filter: blur(6px); } to { background: rgba(28,27,23,0); backdrop-filter: blur(0); } }
.module-sheet { top: 0; right: 0; bottom: 0; width: min(630px, 89vw); height: 100dvh; margin: 0 0 0 auto; border-width: 0 0 0 1px; }
.assistant-sheet { inset: 0; display: flex; width: min(640px, calc(100vw - 40px)); height: min(760px, calc(var(--visible-viewport-height, 100dvh) - 48px)); max-height: calc(var(--visible-viewport-height, 100dvh) - 48px); flex-direction: column; margin: auto; }
.sheet-topline { display: flex; height: 55px; flex: 0 0 55px; align-items: center; justify-content: space-between; padding: 0 22px; border-bottom: 1px solid var(--line); }
.sheet-kicker { color: var(--muted); font: 9px/1 var(--mono); letter-spacing: .13em; }
.close-button { display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); font: 20px/1 var(--sans); cursor: pointer; transition: transform .2s, color .2s, border-color .2s; }
.close-button:hover { transform: rotate(90deg); border-color: var(--signal); color: var(--signal); }
.project-view { position: fixed; inset: 0; z-index: 22; padding: 0; overflow-y: auto; overscroll-behavior: contain; background: rgba(233,229,218,.975); color: var(--ink); scrollbar-color: rgba(32,31,26,.3) transparent; scrollbar-width: thin; }
.project-view[hidden] { display: none; }
.project-view.is-opening, .project-view.is-closing { will-change: transform, opacity; }
.project-view-topline { position: sticky; top: 0; z-index: 4; display: flex; height: 59px; align-items: center; justify-content: space-between; padding: 0 clamp(250px,18vw,300px) 0 clamp(34px,6vw,100px); border-bottom: 1px solid rgba(32,31,26,.12); background: rgba(233,229,218,.91); backdrop-filter: blur(16px); }
.project-back { display: inline-flex; align-items: center; gap: 11px; padding: 8px 0; border: 0; background: transparent; color: var(--ink); font-size: 11px; cursor: pointer; }
.project-back span:first-child { color: var(--signal); font-size: 18px; transition: transform .2s; }
.project-back:hover span:first-child { transform: translateX(-4px); }
.project-content { max-width: none; margin: 0; padding: 0 clamp(250px,18vw,300px) 72px clamp(34px,6vw,100px); }
.module-content { height: calc(100% - 55px); overflow-y: auto; overscroll-behavior: contain; scrollbar-color: rgba(32,31,26,.3) transparent; scrollbar-width: thin; }
.project-heading { max-width: 960px; padding: clamp(42px,7vh,76px) 0 30px; }
.project-meta { display: flex; align-items: center; gap: 10px; color: var(--signal); font: 8px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.project-title { max-width: 760px; margin: 13px 0 9px; font: 600 clamp(34px, 5vw, 64px)/1.07 var(--serif); letter-spacing: -.055em; }
.project-kind { margin: 0; color: var(--muted); font: 10px/1.4 var(--mono); letter-spacing: .04em; }
.project-copy { max-width: 690px; margin: 0; color: rgba(32,31,26,.84); font-size: 13px; line-height: 1.85; }
.project-heading .project-copy { margin-top: 18px; }
.project-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding-bottom: 5px; border-bottom: 1px solid var(--signal); color: var(--signal); font: 9px/1 var(--mono); letter-spacing: .08em; text-decoration: none; }
.project-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 17px; }
.project-tag { padding: 6px 8px; border: 1px solid rgba(32,31,26,.19); border-radius: 99px; color: var(--muted); font: 8px/1 var(--mono); }
.project-case-study { max-width: 1060px; margin: 0 0 40px; }
.case-study-heading { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.case-study-kicker { color: var(--signal); font: 9px/1 var(--mono); letter-spacing: .13em; }
.case-study-rule { width: 38px; height: 1px; background: var(--signal); }
.case-study-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.case-study-card { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; min-height: 102px; padding: 16px 17px; border: 1px solid rgba(32,31,26,.14); background: rgba(255,255,255,.31); }
.case-study-index { padding-top: 2px; color: var(--signal); font: 8px/1.4 var(--mono); letter-spacing: .08em; }
.case-study-card h3 { margin: 0; font: 500 12px/1.35 var(--serif); }
.case-study-card p { margin: 7px 0 0; color: rgba(32,31,26,.72); font-size: 10px; line-height: 1.75; }
.gallery-heading { display: flex; align-items: center; gap: 10px; margin: 0; padding: 15px 0 13px; color: var(--muted); font: 9px/1 var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.gallery-heading::after { width: 40px; height: 1px; background: var(--signal); content: ''; }
.project-gallery { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); grid-auto-rows: clamp(24px, 2.2vw, 34px); grid-auto-flow: dense; gap: 10px; padding: 0 0 32px; }
.gallery-item { position: relative; display: grid; grid-column: span 6; grid-row: span 10; min-height: 260px; place-items: center; overflow: hidden; background: #ded9ca; }
.gallery-item:nth-child(5n + 1) { grid-column: span 8; grid-row: span 13; }
.gallery-item:nth-child(5n + 2) { grid-column: span 4; grid-row: span 8; }
.gallery-item:nth-child(5n + 4) { grid-column: span 4; grid-row: span 11; }
.gallery-item:first-child:nth-last-child(1) { grid-column: 1 / -1; grid-row: span 17; }
.gallery-item img { display: block; width: 100%; height: 100%; max-height: 680px; object-fit: contain; }
.gallery-item:first-child:nth-last-child(1) img { max-height: 65vh; }
.gallery-counter { position: absolute; right: 8px; bottom: 8px; padding: 5px 6px; background: rgba(32,31,26,.74); color: white; font: 8px/1 var(--mono); }

.module-trackbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 24px; border-bottom: 1px solid var(--line); color: var(--muted); font: 8px/1 var(--mono); letter-spacing: .1em; }
.resume-switch-small { background: transparent; }
.resume-switch-small .track-button { padding: 7px 9px; font-size: 9px; }
.module-content { height: calc(100% - 110px); padding: 0 29px 36px; }
.module-eyebrow { margin: 29px 0 11px; color: var(--signal); font: 9px/1 var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.module-title { margin: 0; font: 600 clamp(29px, 4vw, 44px)/1.15 var(--serif); letter-spacing: -.045em; }
.module-intro { max-width: 480px; margin: 16px 0 24px; color: rgba(32,31,26,.76); font-size: 13px; line-height: 1.8; }
.module-point-list { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.module-point-list li { position: relative; padding: 14px 0 14px 20px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.7; }
.module-point-list li::before { position: absolute; top: 20px; left: 0; width: 6px; height: 6px; border: 1px solid var(--signal); border-radius: 50%; content: ''; }
.module-open-link { display: inline-flex; align-items: center; gap: 9px; margin-top: 23px; padding: 0 0 5px; border: 0; border-bottom: 1px solid var(--signal); background: transparent; color: var(--signal); font: 9px/1 var(--mono); cursor: pointer; }
.module-related { display: flex; flex-wrap: wrap; gap: 0 12px; align-items: center; margin-top: 25px; padding-top: 13px; border-top: 1px solid var(--line); }
.module-related p { width: 100%; margin: 0; color: var(--muted); font: 8px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.module-related .module-open-link { margin-top: 15px; }

.assistant-heading { display: flex; align-items: center; gap: 16px; padding: 23px 23px 17px; }
.assistant-sigil { display: grid; width: 48px; height: 48px; flex: 0 0 48px; place-items: center; border: 1px solid var(--signal); border-radius: 50%; color: var(--signal); font-size: 23px; }
.assistant-overline { margin: 0 0 7px; color: var(--signal); font: 8px/1 var(--mono); letter-spacing: .14em; }
.assistant-heading h2 { margin: 0; font: 600 23px/1.2 var(--serif); }
.assistant-heading p:last-child { margin: 6px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.assistant-status { display: flex; align-items: center; gap: 8px; margin: 0 23px 14px; padding: 9px 10px; border: 1px solid rgba(84,100,81,.22); background: rgba(84,100,81,.06); color: var(--moss); font: 8px/1.2 var(--mono); letter-spacing: .04em; }
.assistant-status .status-mark { width: 5px; height: 5px; background: var(--moss); box-shadow: 0 0 0 3px rgba(84,100,81,.12); }
.assistant-status.is-checking .status-mark { animation: assistant-status-pulse 1.1s ease-in-out infinite alternate; }
.assistant-status.is-unavailable { border-color: rgba(200,79,53,.25); background: rgba(200,79,53,.06); color: var(--signal); }
.assistant-status.is-unavailable .status-mark { background: var(--signal); box-shadow: 0 0 0 3px rgba(200,79,53,.12); }
@keyframes assistant-status-pulse { to { opacity: .35; box-shadow: 0 0 0 5px rgba(84,100,81,.06); } }
.chat-log { display: flex; min-height: 0; flex: 1 1 0%; flex-direction: column; gap: 12px; padding: 8px 23px 15px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: rgba(32,31,26,.3) transparent; scrollbar-width: thin; }
.chat-message { max-width: 88%; min-width: 0; padding: 11px 13px; overflow-wrap: anywhere; border: 1px solid var(--line); background: #eeebe3; color: var(--ink); font-size: 11px; line-height: 1.7; white-space: pre-wrap; }
.chat-message.is-user { align-self: flex-end; border-color: rgba(200,79,53,.24); background: rgba(200,79,53,.09); }
.chat-message.is-assistant { align-self: flex-start; }
.chat-message.is-pending { color: var(--muted); font-style: italic; }
.chat-related { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.chat-related button { padding: 5px 7px; border: 1px solid var(--line); border-radius: 99px; background: var(--paper-light); color: var(--signal); font: 8px/1 var(--mono); cursor: pointer; }
.suggestion-list { display: flex; max-height: 92px; flex: 0 0 auto; flex-wrap: wrap; gap: 6px; padding: 0 23px 13px; overflow-y: auto; overscroll-behavior: contain; }
.suggestion-chip { padding: 7px 9px; border: 1px solid var(--line); border-radius: 99px; background: transparent; color: var(--muted); font-size: 9px; cursor: pointer; transition: border-color .2s, color .2s; }
.suggestion-chip:hover { border-color: var(--signal); color: var(--signal); }
.assistant-form { display: flex; flex: 0 0 auto; align-items: stretch; gap: 8px; margin: 0 23px; padding: 8px; border: 1px solid rgba(32,31,26,.3); background: white; }
.assistant-form input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 11px; }
.assistant-form input::placeholder { color: #98968e; }
.assistant-form button { display: inline-flex; min-width: 82px; align-items: center; justify-content: center; gap: 9px; padding: 10px 12px; border: 0; background: var(--ink); color: var(--paper-light); font-size: 10px; cursor: pointer; transition: background .2s; }
.assistant-form button:hover { background: var(--signal); }
.assistant-form button:disabled { cursor: wait; opacity: .65; }
.assistant-footnote { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; margin: 11px 23px 17px; color: var(--muted); font-size: 8px; line-height: 1.5; }
.assistant-footnote span:first-child { color: var(--moss); font-size: 7px; }
.screen-reader-status { position: fixed; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

@media (min-width: 1500px) {
  .hero-copy { left: clamp(82px, 7vw, 132px); }
  .hero-copy h1 { font-size: clamp(68px, 5vw, 86px); }
}

@media (max-width: 960px) {
  .hero-copy { width: min(420px, 42vw); }
  .hero-copy h1 { font-size: clamp(48px, 6.5vw, 68px); }
  .filter-list { max-width: 43vw; }
  .topbar-note { display: none; }
}

@media (max-width: 960px) and (min-width: 681px) {
  .bravais-rail { --rail-expanded-width: 132px; }
  .hero-copy { left: 28px; width: min(420px, calc(50vw - 118px)); }
  .hero-copy h1 { font-size: clamp(38px, 5.3vw, 54px); }
  .wall-controls { right: 16px; left: 16px; gap: 10px; }
  .filter-list { max-width: calc(50vw - 106px); }
  .wall-instructions { max-width: calc(50vw - 106px); justify-content: flex-end; gap: 6px; font-size: 7px; white-space: normal; }
  .bottom-stamp { right: 17px; bottom: 67px; }
  .project-content { padding: 0 174px 72px 28px; }
  .project-view-topline { padding: 0 174px 0 28px; }
}

@media (max-width: 737px) and (min-width: 681px) {
  .bravais-rail { --rail-expanded-width: 76px; padding: 16px 6px 13px; }
  .rail-mark { width: 42px; height: 42px; flex-basis: 42px; font-size: 12px; }
  .rail-mark span { font-size: 5px; }
  .rail-index { margin: 11px 0 8px; gap: 5px; font-size: 6px; letter-spacing: .05em; }
  .rail-current { display: none; }
  .module-link { min-height: 38px; flex-basis: 38px; grid-template-columns: 14px minmax(0, 1fr); gap: 2px; padding: 4px 0; }
  .module-number { font-size: 8px; }
  .module-label { font-size: 7px; letter-spacing: 0; line-height: 1.2; }
  .rail-bottom { padding-top: 7px; }
  .rail-caption { margin-bottom: 4px; font-size: 6px; letter-spacing: .04em; }
  .rail-track-switch { gap: 2px; margin-bottom: 6px; }
  .rail-track-button { min-height: 23px; padding: 4px 3px; font-size: 7px; line-height: 1.2; }
  .rail-language { gap: 4px; padding: 5px 0; font-size: 7px; }
  .language-dot { width: 5px; height: 5px; }
}

@media (min-width: 961px) {
  .hero-copy { width: min(450px, 36vw, calc(50vw - 95px - clamp(42px, 6vw, 92px))); }
}

@media (min-width: 681px) {
  .project-view { z-index: 40; }
}

@media (max-width: 680px) {
  body { min-height: 100dvh; }
  .bravais-rail { inset: auto 0 0; width: 100%; height: 62px; max-height: none; flex-direction: row; align-items: center; gap: 10px; padding: 6px 10px max(6px, env(safe-area-inset-bottom)); transform: none; border: 0; border-top: 1px solid rgba(255,255,255,.1); border-radius: 0; background: rgba(36,35,30,.94); }
  .bravais-rail.is-edge-collapsed { inset: auto 0 0; width: 100%; height: 62px; max-height: none; }
  .bravais-rail.is-edge-left, .bravais-rail.is-edge-right { transform: none; }
  .rail-edge-tab { display: none !important; }
  .rail-mark { width: 39px; height: 39px; flex-basis: 39px; font-size: 12px; }
  .rail-mark span { font-size: 5px; }
  .rail-index, .rail-caption { display: none; }
  .rail-current { display: none; }
  .rail-track-switch { display: none; }
  .module-nav { min-width: 0; flex: 1; flex-direction: row; justify-content: flex-start; gap: 3px; overflow-x: auto; scrollbar-width: none; }
  .module-nav::-webkit-scrollbar { display: none; }
  .module-link { display: flex; width: auto; min-width: 42px; min-height: 42px; flex: 1 0 auto; flex-direction: column; justify-content: center; gap: 4px; padding: 5px 7px; border-top: 0; }
  .module-link::before { top: auto; bottom: 0; height: 1px; }
  .module-number { font-size: 7px; }
  .module-label { font-size: 8px; white-space: nowrap; }
  .rail-bottom { width: auto; flex: 0 0 auto; padding: 0 0 0 9px; border-top: 0; border-left: 1px solid rgba(255,255,255,.13); }
  .rail-language { gap: 5px; padding: 9px 2px; font-size: 8px; }
  .language-dot { width: 5px; height: 5px; }
  .portfolio-shell { min-height: 100dvh; margin-left: 0; }
  .wall-stage { inset: 0; }
  .stage-glaze { background: linear-gradient(180deg, rgba(233,229,218,.27), transparent 38%, rgba(233,229,218,.08)); }
  .topbar { top: max(13px, env(safe-area-inset-top)); right: 12px; left: 13px; }
  .topbar-name { gap: 7px; font-size: 8px; letter-spacing: .08em; }
  .ask-button { min-height: 33px; gap: 6px; padding: 0 9px; font-size: 9px; }
  .ask-orbit { font-size: 13px; }
  .hero-copy { top: clamp(86px, 12vh, 122px); left: 15px; width: min(400px, calc(100vw - 28px)); }
  .hero-copy .resume-switch-wrap { display: flex; }
  .hero-copy::before { inset: -8px -12px -8px -8px; background: linear-gradient(90deg, rgba(233,229,218,.78), rgba(233,229,218,.48) 76%, rgba(233,229,218,.08)); }
  .hero-kicker { gap: 7px; margin-bottom: 10px; font-size: 7px; }
  .kicker-line { width: 32px; }
  .hero-copy h1 { font-size: clamp(40px, 10vw, 56px); line-height: 1.02; }
  .hero-intro { max-width: 310px; margin: 11px 0 12px; font-size: 9px; line-height: 1.6; }
  .resume-switch-wrap { align-items: flex-start; flex-direction: column; gap: 5px; }
  .resume-switch-label { font-size: 7px; }
  .track-button { padding: 6px 9px; font-size: 8px; }
  .hero-actions { gap: 16px; margin-top: 13px; }
  .text-link { gap: 7px; padding-bottom: 4px; font-size: 9px; }
  .github-link { font-size: 8px; }
  .card-caption { padding: 9px 8px 8px; }
  .card-title { font-size: 10px; }
  .card-subtitle { font-size: 6px; }
  .card-number { top: 7px; left: 7px; padding: 4px 5px; font-size: 7px; }
  .card-category { top: 7px; right: 7px; padding: 4px 5px; font-size: 6px; }
  .wall-controls { right: 10px; bottom: 73px; left: 12px; gap: 9px; }
  .filter-list { max-width: 100%; flex-wrap: nowrap; gap: 5px; overflow-x: auto; scrollbar-width: none; }
  .filter-list::-webkit-scrollbar { display: none; }
  .filter-chip { min-height: 26px; flex: 0 0 auto; padding: 0 9px; font-size: 7px; }
  .wall-instructions { align-self: flex-start; gap: 6px; font-size: 7px; }
  .direction-glyph { width: 19px; height: 19px; font-size: 12px; }
  .reset-button { margin-left: 1px; }
  .bottom-stamp { right: 12px; bottom: 151px; gap: 3px; font-size: 6px; }
  .assistant-sheet { top: var(--visible-viewport-top, 0px); right: 0; bottom: auto; left: 0; width: 100vw; max-width: 100vw; height: var(--visible-viewport-height, 100dvh); max-height: var(--visible-viewport-height, 100dvh); margin: 0; padding-bottom: env(safe-area-inset-bottom); border: 0; border-radius: 0; }
  .module-sheet { width: 100vw; }
  .sheet-topline { height: 48px; flex-basis: 48px; padding: 0 15px; }
  .project-view-topline { height: 48px; padding: 0 15px; }
  .project-back { gap: 7px; font-size: 9px; }
  .project-content { padding: 0 16px 86px; }
  .project-heading { padding: 26px 0 17px; }
  .project-title { font-size: clamp(29px, 9vw, 43px); }
  .project-copy { font-size: 11px; }
  .project-case-study { margin-bottom: 25px; }
  .case-study-grid { grid-template-columns: 1fr; gap: 6px; }
  .case-study-card { min-height: 0; padding: 12px 13px; }
  .case-study-card p { font-size: 9px; }
  .gallery-heading { padding: 12px 0 10px; }
  .project-gallery { grid-template-columns: 1fr; grid-auto-rows: minmax(220px, auto); gap: 7px; padding: 0 0 24px; }
  .gallery-item, .gallery-item:nth-child(5n + 1), .gallery-item:nth-child(5n + 2), .gallery-item:nth-child(5n + 4), .gallery-item:first-child:nth-last-child(1) { grid-column: 1; grid-row: auto; min-height: 220px; }
  .gallery-item img { max-height: 440px; }
  .gallery-item:first-child:nth-last-child(1) img { max-height: 66vh; }
  .module-trackbar { padding: 12px 15px; }
  .resume-switch-small { gap: 2px; padding: 2px; }
  .resume-switch-small .track-button { padding: 6px 7px; font-size: 8px; }
  .module-content { height: calc(100% - 98px); padding: 0 19px 30px; }
  .assistant-heading { gap: 12px; padding: 19px 16px 13px; }
  .assistant-sigil { width: 39px; height: 39px; flex-basis: 39px; font-size: 19px; }
  .assistant-heading h2 { font-size: 19px; }
  .assistant-status { margin-right: 16px; margin-left: 16px; }
  .chat-log { padding-right: 16px; padding-left: 16px; }
  .suggestion-list { padding-right: 16px; padding-left: 16px; }
  .assistant-form { margin-right: 16px; margin-left: 16px; }
  .assistant-footnote { margin-right: 16px; margin-left: 16px; }
}

@media (max-height: 710px) and (min-width: 681px) {
  .hero-copy { top: 15vh; }
  .hero-copy h1 { font-size: clamp(44px, 5vw, 62px); }
  .hero-intro { margin-top: 14px; margin-bottom: 15px; }
  .hero-actions { margin-top: 14px; }
}

@media (max-height: 560px) {
  .assistant-heading { gap: 10px; padding-top: 10px; padding-bottom: 8px; }
  .assistant-sigil { width: 34px; height: 34px; flex-basis: 34px; font-size: 17px; }
  .assistant-heading h2 { font-size: 18px; }
  .assistant-status { margin-bottom: 6px; padding-top: 6px; padding-bottom: 6px; }
  .suggestion-list { max-height: 56px; padding-bottom: 8px; }
  .assistant-form { padding: 6px; }
  .assistant-footnote { margin-top: 7px; margin-bottom: 9px; }
}

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