/* Personal engineering portfolio: graphite, IBM Plex Sans and quiet technical labels. */
@font-face { font-family: 'IBM Plex Sans'; src: url('/data/fonts/ibm-plex-sans-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('/data/fonts/ibm-plex-sans-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('/data/fonts/ibm-plex-sans-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
:root {
 --bg:#111416; --bg-deep:#0c0f11; --surface:#181d20; --surface-hi:#21282c;
 --text:#e7ecee; --text-dim:#a9b3b8; --text-faint:#929ea5; --line:#30383c; --line-hi:#536067;
 --signal:#bad7b0; --signal-hot:#d2e7ca; --signal-wash:#1c2720;
 --font-display:'IBM Plex Sans',system-ui,sans-serif; --font-sans:'IBM Plex Sans',system-ui,sans-serif; --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
 --container:1160px; --measure:67ch; --section:clamp(3.5rem,7vw,5.5rem); --t-title:clamp(2rem,4.5vw,3.2rem); --t-lead:clamp(1.1rem,1.7vw,1.3rem);
 color-scheme:dark;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:2rem; -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--text); font-family:var(--font-sans); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; }
h1,h2,h3,p,figure { margin:0; }
h1,h2,h3 { line-height:1.13; font-weight:500; letter-spacing:-.03em; }
h1,h2 { font-family:var(--font-display); }
em { font-style:normal; font-weight:inherit; }
ul,ol { margin:0; padding:0; list-style:none; }
a { color:inherit; text-underline-offset:5px; text-decoration-thickness:1px; }
a:hover { color:var(--signal); }
img { display:block; max-width:100%; height:auto; }
svg { display:block; flex:none; }
button,input { font:inherit; }
::selection { background:#365445; color:#f1f6f1; }
:focus-visible { outline:2px solid var(--signal); outline-offset:5px; }
main:focus { outline:none; }
.container { width:min(var(--container),calc(100% - 96px)); margin-inline:auto; }
section,article[id] { scroll-margin-top:2rem; }
main > section:not(.intro):not(.selected-section):not(.approach-section):not(.contact-section):not(.hero):not(.work-section) { padding-block:var(--section); }
.skip-link { position:fixed; top:10px; left:15px; z-index:100; padding:10px 18px; background:var(--text); color:var(--bg); transform:translateY(-160%); }
.skip-link:focus { transform:none; }
.eyebrow,.tele,.hero-role,.meta-label { font-family:var(--font-mono); font-size:.69rem; line-height:1.6; text-transform:uppercase; letter-spacing:.08em; font-weight:400; color:var(--text-dim); }
.eyebrow span { display:block; margin-top:4px; }
.nav { border-bottom:1px solid var(--line); }
.nav-inner { min-height:82px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.nav-brand,.footer-brand { font-family:var(--font-sans); font-size:1.05rem; font-weight:500; text-decoration:none; letter-spacing:-.02em; white-space:nowrap; }
.nav-brand > span { color:var(--signal); }
.nav-brand .brand-prefix { font-family:var(--font-mono); font-size:.75rem; margin-right:8px; }
.nav-links { display:flex; align-items:center; gap:34px; }
.nav-links a { font-size:.82rem; text-decoration:none; padding-block:9px; color:var(--text-dim); }
.nav-links a:hover,.nav-links a[aria-current='page'] { color:var(--text); }
.nav-links a[aria-current='page'] { box-shadow:0 1px var(--signal); }
.intro { display:grid; grid-template-columns:minmax(0,1.22fr) minmax(0,1fr); align-items:center; gap:85px; padding-block:80px 70px; }
.intro .eyebrow { color:var(--signal); }
.intro h1 { font-size:clamp(3.3rem,6.6vw,5.7rem); line-height:1.06; font-weight:600; letter-spacing:-.055em; margin:22px 0 26px; }
.intro-text { max-width:48ch; color:var(--text-dim); font-size:1.05rem; line-height:1.8; }
.button-row { display:flex; flex-wrap:wrap; align-items:center; gap:20px 28px; margin-top:30px; }
.button,.text-link { display:inline-flex; align-items:center; gap:18px; text-decoration:none; font-size:.8rem; font-weight:500; line-height:1.4; }
.button { border:1px solid var(--line-hi); border-radius:3px; padding:14px 20px; min-height:48px; }
.button-primary { background:var(--signal); color:#14201b; border-color:var(--signal); }
.button:hover { border-color:var(--signal); }
.button-primary:hover { background:var(--signal-hot); color:#14201b; }
.text-link svg,.work-card h3 svg { transition:transform .18s ease; }
.text-link:hover svg,.work-card h3 a:hover svg { transform:translateX(4px); }
.availability { display:flex; align-items:center; gap:9px; font-size:.72rem; color:var(--text-dim); margin-top:25px; }
.dot { display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--signal); flex:none; }
.selected-section { padding-block:48px 65px; border-top:1px solid var(--line); }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:30px 65px; margin-bottom:38px; }
.section-heading .eyebrow { margin-bottom:13px; }
.section-heading h2 { font-size:clamp(2rem,3.6vw,3rem); letter-spacing:-.035em; font-weight:500; }
.section-heading > p { max-width:36ch; color:var(--text-dim); font-size:.86rem; }
.selected-grid { display:grid; gap:40px; }
.work-card { min-width:0; }
.work-card-visual { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); align-items:center; gap:50px; border-bottom:1px solid var(--line); padding-bottom:40px; }
.visual-link { display:block; text-decoration:none; min-width:0; }
.work-card-copy { padding-block:12px; }
.project-eyebrow { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 20px; font-family:var(--font-mono); font-size:.58rem; color:var(--text-faint); }
.project-eyebrow span:last-child { white-space:nowrap; }
.work-card h3 { font-size:2.05rem; letter-spacing:-.03em; margin-top:16px; font-weight:500; }
.work-card h3 a { display:flex; align-items:center; justify-content:space-between; gap:20px; text-decoration:none; }
.work-card h3 svg { width:20px; height:20px; color:var(--signal); }
.work-card-copy > p { font-size:.92rem; color:var(--text-dim); margin-top:17px; max-width:53ch; }
.work-card-copy > .work-stack { font-size:.65rem; color:var(--text-faint); line-height:1.8; margin-top:24px; }
.further-work { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px; margin-top:10px; }
.further-work > a { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:26px 0; text-decoration:none; }
.further-work strong { display:block; font-size:1.25rem; font-weight:500; margin:7px 0 10px; }
.further-work small { font-family:var(--font-mono); font-size:.6rem; color:var(--text-faint); }
.further-work a > span > span { display:block; font-size:.79rem; color:var(--text-dim); max-width:49ch; }
.section-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:20px; border-top:1px solid var(--line); padding-top:25px; margin-top:10px; }
.section-bottom > span { font-family:var(--font-mono); font-size:.63rem; color:var(--text-faint); }
.approach-section { background:#171d20; border-block:1px solid var(--line); padding-block:65px; }
.approach-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,3fr); gap:65px; }
.approach-grid h2 { font-size:clamp(2.1rem,3.8vw,3.3rem); line-height:1.17; max-width:23ch; }
.approach-text { font-size:1.03rem; color:var(--text-dim); margin-top:25px; max-width:62ch; }
.approach-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:35px; margin:32px 0; }
.approach-details p { font-size:.8rem; color:var(--text-dim); }
.approach-details span { display:block; color:var(--text); font-weight:500; margin-bottom:8px; }
.portrait { margin:0; width:100%; max-width:300px; }
.portrait-image { background:#2a3235; border:1px solid #465259; aspect-ratio:1; overflow:hidden; position:relative; }
.portrait-image img { width:100%; height:100%; object-fit:contain; filter:saturate(.3); }
.portrait figcaption { display:flex; flex-wrap:wrap; gap:0 10px; justify-content:space-between; font-size:.62rem; color:var(--text-dim); padding-top:11px; }
.approach-person > .eyebrow { margin-bottom:24px; }
.approach-person .portrait { max-width:150px; }
.approach-person .portrait figcaption { display:block; font-size:.65rem; }
.approach-person figcaption span { display:block; }
.approach-person figcaption span:first-child { color:var(--text); }
.contact-section { padding-block:70px 80px; }
.contact-section h2 { font-size:clamp(2.3rem,5vw,4rem); margin-top:21px; max-width:18ch; }
.contact-section > p:not(.eyebrow) { margin-top:24px; font-size:.95rem; color:var(--text-dim); max-width:61ch; }
.contact-email { display:inline-flex; align-items:center; gap:28px; max-width:100%; overflow-wrap:anywhere; font-size:clamp(1.5rem,3.2vw,2.5rem); font-weight:400; letter-spacing:-.04em; line-height:1.4; text-decoration:none; border-bottom:1px solid var(--line-hi); padding-bottom:8px; margin-top:30px; }
.contact-email svg { width:27px; height:27px; color:var(--signal); }
.contact-secondary { display:flex; flex-wrap:wrap; gap:27px; margin-top:25px; font-size:.75rem; color:var(--text-dim); }
.contact-secondary a { text-decoration:none; }
.footer { border-top:1px solid var(--line); padding-block:28px; }
.footer-inner { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; }
.footer-brand { font-size:.9rem; }
.footer-note { color:var(--text-faint); font-size:.63rem; }
.footer-links { display:flex; gap:25px; font-size:.7rem; color:var(--text-dim); }
.footer-links a { text-decoration:none; }
/* Long-form pages retain the evidence, diagrams and readable measures. */
.hero-compact { padding-block:60px 50px; }
.hero-role { margin-bottom:20px; }
.page-title { font-size:clamp(2.6rem,6vw,5rem); letter-spacing:-.045em; max-width:19ch; margin-top:23px; }
.hero-summary,.lead-strong { font-size:1rem; line-height:1.8; color:var(--text-dim); max-width:67ch; margin-top:25px; }
.hero-meta { font-size:.77rem; color:var(--text-dim); margin-top:25px; }
.hero-meta .dot { margin-right:9px; }
.about-intro { display:grid; grid-template-columns:minmax(0,1fr) 270px; align-items:center; gap:75px; }
.about-intro .page-title { font-size:clamp(2.6rem,5.5vw,4.5rem); }
.work-jump { display:flex; flex-wrap:wrap; gap:25px; margin-top:30px; font-size:.73rem; }
.work-jump a { text-decoration:none; border-bottom:1px solid var(--line-hi); padding-block:5px; }
.work-section { border-top:1px solid var(--line); padding-block:45px 60px; }
.compact-project-grid,.project-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:35px 50px; }
.project-list .work-card { border-top:1px solid var(--line); padding-top:15px; }
.project-list .work-card h3 { font-size:1.5rem; }
.project-list .work-card-copy > p { font-size:.85rem; }
.section-head { margin-bottom:35px; }
.section-head .tele { margin-bottom:16px; }
.section-title { font-size:var(--t-title); max-width:25ch; }
.prose-rails { display:grid; gap:44px; }
.rail { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,3fr); gap:25px 65px; }
.rail > .prose,.rail > .decisions,.rail > .diagram { grid-column:2; }
.rail-label { padding-top:6px; }
.prose p { max-width:var(--measure); color:var(--text-dim); }
.prose p + p { margin-top:20px; }
.prose-emphatic { font-size:1.6rem; line-height:1.5; }
.rule { width:min(var(--container),calc(100% - 96px)); margin:0 auto; border:0; border-top:1px solid var(--line); }
.experience { display:grid; gap:35px; }
.job { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,3fr); gap:20px 65px; border-top:1px solid var(--line); padding-top:26px; }
.job-period { font-family:var(--font-mono); color:var(--text-faint); font-size:.66rem; }
.job-role { font-size:1.5rem; }
.job-org { font-size:.8rem; color:var(--text-dim); margin-top:8px; }
.job-bullets { display:grid; gap:12px; margin-top:18px; }
.job-bullets li { font-size:.87rem; color:var(--text-dim); padding-left:17px; position:relative; }
.job-bullets li::before { content:'–'; position:absolute; left:0; }
.skill-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 55px; }
.skill-group { border-top:1px solid var(--line); padding-top:24px; }
.skill-group h3 { font-family:var(--font-mono); font-size:.75rem; font-weight:400; line-height:1.5; margin-bottom:13px; text-transform:uppercase; letter-spacing:.03em; }
.skill-list { display:flex; flex-wrap:wrap; gap:7px 15px; }
.chip { font-size:.8rem; color:var(--text-dim); }
.skill-note { color:var(--text-faint); font-size:.75rem; margin-top:15px; }
.link-list { border-top:1px solid var(--line); }
.link-row { display:flex; align-items:center; justify-content:space-between; gap:20px; text-decoration:none; border-bottom:1px solid var(--line); padding:24px 0; }
.link-row .label { font-size:1.35rem; font-weight:500; }
.link-row .handle { color:var(--text-dim); font-size:.8rem; overflow-wrap:anywhere; text-align:right; }
.prose-block { margin-top:65px; }
.project-header { border-bottom:1px solid var(--line); padding-block:45px; }
.back-link { text-decoration:none; font-size:.74rem; color:var(--text-dim); }
.project-title { font-size:clamp(3rem,7.5vw,6rem); letter-spacing:-.045em; margin:30px 0 20px; overflow-wrap:anywhere; }
.project-tagline { color:var(--text-dim); font-size:1.15rem; max-width:55ch; }
.meta-grid { display:grid; grid-template-columns:2fr 1fr 1fr 2fr; gap:30px; padding-top:30px; margin-top:32px; border-top:1px solid var(--line); }
.meta-label { font-size:.61rem; margin-bottom:8px; }
.meta-value { font-size:.76rem; line-height:1.65; color:var(--text-dim); }
.project-metrics { display:flex; flex-wrap:wrap; gap:28px 55px; margin-top:35px; }
.project-metrics > div { max-width:220px; }
.project-metric-value { font-size:2rem; font-weight:500; line-height:1.2; color:var(--signal); }
.project-metric-label { color:var(--text-dim); font-size:.65rem; line-height:1.5; margin-top:7px; }
.project-body { display:grid; gap:55px; padding-block:50px; }
.lead { font-size:var(--t-lead); color:var(--text-dim); max-width:var(--measure); }
.project-body > .lead { max-width:65ch; margin-left:calc((100% - 65px)/4 + 65px); }
.project-section { padding:0; }
.project-section > h2 { font-size:1.4rem; line-height:1.35; letter-spacing:-.02em; }
.project-section-n { display:block; font-size:.65rem; color:var(--signal); margin-bottom:13px; }
.decisions { display:grid; gap:28px; }
.decision { border-top:1px solid var(--line); padding-top:22px; }
.decision h3 { font-size:1.05rem; font-weight:500; line-height:1.45; letter-spacing:0; margin-bottom:10px; }
.decision p { color:var(--text-dim); font-size:.93rem; }
.project-nav { display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px; border-top:1px solid var(--line); padding-block:28px; }
.panel { background:var(--signal-wash); border:1px solid #344638; padding:38px 45px; }
.panel-lead { font-size:1rem; margin-top:18px; max-width:60ch; }
.diagram { min-width:0; margin:0; }
.diagram-scroll { overflow-x:auto; background:var(--bg-deep); border:1px solid var(--line); padding:18px; border-radius:3px; }
.diagram-svg { width:100%; height:auto; min-width:620px; }
.diagram-caption { color:var(--text-dim); font-size:.73rem; max-width:var(--measure); margin-top:12px; }
.d-zone { fill:#1b2821; stroke:var(--signal); stroke-width:1; stroke-dasharray:5 4; }
.d-zone-label { fill:var(--signal); font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; }
.d-box { fill:var(--surface-hi); stroke:var(--line-hi); stroke-width:1; }
.d-box-gpu { stroke:var(--signal); }
.d-box-title { fill:var(--text); font-family:var(--font-sans); font-size:14px; font-weight:500; }
.d-box-sub { fill:var(--text-dim); font-family:var(--font-mono); font-size:10px; }
.d-line { stroke:var(--line-hi); stroke-width:1.5; fill:none; }
.d-line-return { stroke:var(--signal); stroke-dasharray:4 3; }
.d-arrowhead { fill:var(--line-hi); }
.d-edge { fill:var(--text-dim); font-family:var(--font-mono); font-size:10px; }
.d-strong { fill:var(--signal); font-family:var(--font-mono); font-size:10px; }
.d-profile { stroke:var(--text); stroke-width:2; fill:none; }
.d-profile-alt { stroke:var(--signal); stroke-width:2; stroke-dasharray:5 4; fill:none; }
.d-tick { stroke:var(--signal); stroke-width:1; }
.legal { max-width:850px; padding-block:60px 80px; }
.legal h1 { font-size:var(--t-title); margin-bottom:30px; }
.legal h2 { font-size:1.35rem; margin:34px 0 13px; }
.legal p,.legal li { color:var(--text-dim); }
.legal p + p { margin-top:18px; }
.notfound { display:grid; align-content:center; gap:20px; min-height:70vh; padding-block:70px; }
.notfound-code { color:var(--signal); font-size:6rem; line-height:1; font-weight:500; }

.library-demo { margin: 0; border: 1px solid #354766; background: #111b2d; border-radius: 14px; padding: 20px; min-width: 0; }
.library-demo-top { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: #d1ddef; margin-bottom: 22px; }
.demo-marker { font-size: 9px; color: #91a5c2; }
.library-tabs { display: flex; gap: 5px; border: 0; margin-bottom: 21px; }
.library-tabs label { position: relative; cursor: pointer; }
.library-tabs input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.library-tabs label > span { display: block; color: #a5b6d1; font-size: 17px; font-weight: 600; border-bottom: 2px solid transparent; padding: 0 7px 9px; }
.library-tabs label:has(input:checked) > span { color: #f2f5fc; border-color: #91b5ff; }
.library-tabs label:has(input:focus-visible) > span { outline: 2px solid #adcaff; outline-offset: 4px; }
.sample-search { display: flex; align-items: center; gap: 11px; background: #202e46; border: 1px solid #3a4d6b; color: #c6d5ec; border-radius: 6px; padding: 10px 13px; font-size: 12px; }
.sample-search svg { color: #b0c4e4; }
.sample-filters { display: flex; gap: 8px; align-items: center; padding-block: 17px 15px; }
.sample-filters > span { padding: 4px 11px; font-size: 10px; color: #adbed8; border: 1px solid #354766; border-radius: 25px; }
.sample-filters .selected { background: #adcaff; color: #10203c; border-color: #adcaff; }
.sample-track { display: flex; align-items: center; gap: 12px; padding: 13px 10px; border-radius: 7px; }
.sample-track img { width: 44px; height: 44px; flex-shrink: 0; border-radius: 4px; object-fit: cover; }
.sample-track > div { min-width: 0; margin-right: auto; }
.sample-track strong { display: block; font-size: 13px; font-weight: 500; line-height: 1.5; }
.sample-track div > span { font-size: 10px; color: #9badc8; }
.selected-track { background: #1b2b47; }
.selected-track strong, .sample-liked { color: #91b5ff; }
.sample-duration { font: 10px/1.5 var(--font-mono); color: #a6b7d1; }
.sample-mini-player { display: flex; align-items: center; gap: 11px; background: #263852; border: 1px solid #405a7d; border-radius: 7px; padding: 10px; margin-top: 19px; }
.sample-mini-player img { width: 35px; height: 35px; border-radius: 3px; object-fit: cover; }
.sample-mini-player > div { margin-right: auto; }
.sample-mini-player strong { display: block; font-size: 11px; font-weight: 500; line-height: 1.4; }
.sample-mini-player span { font-size: 9px; color: #b7c6dd; }
.library-demo figcaption { font-size: 9px; color: #9badc8; line-height: 1.7; margin-top: 17px; }
.demo-library { display: none; min-height: 284px; }
.demo-search { min-height: 284px; }
.library-demo:has(input[value='library']:checked) .demo-search { display: none; }
.library-demo:has(input[value='library']:checked) .demo-library { display: block; }
.collection-title { font-size: 12px; color: #b5c7e2; margin-bottom: 14px; }
.collection-liked { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.collection-liked > span { display: grid; place-items: center; width: 45px; height: 45px; border-radius: 5px; background: #adcaff; color: #142443; }
.collection-liked strong { display: block; font-size: 12px; font-weight: 600; }
.collection-liked div > span { display: block; font-size: 10px; color: #9badc8; }
.collection-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.collection-grid img { display: block; width: 100%; height: auto; aspect-ratio: 1.45; object-fit: cover; border-radius: 5px; margin-bottom: 9px; }
.collection-grid strong { display: block; font-size: 12px; font-weight: 500; line-height: 1.5; }
.collection-grid span { display: block; font-size: 10px; color: #9badc8; }

@font-face { font-family:'Figtree'; src:url('/data/fonts/figtree-latin-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Figtree'; src:url('/data/fonts/figtree-latin-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Figtree'; src:url('/data/fonts/figtree-latin-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Figtree'; src:url('/data/fonts/figtree-latin-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.project-media { min-width:0; width:100%; margin:0; }
.project-media > figcaption { display:flex; flex-wrap:wrap; justify-content:space-between; gap:5px 15px; font-family:var(--font-mono); color:var(--text-faint); font-size:.55rem; line-height:1.6; padding-top:13px; }
.project-media > figcaption > span { color:#9aa7ad; }
.screen-mockup { display:block; border:1px solid #3e484e; background:#0c1013; border-radius:6px; overflow:hidden; text-decoration:none; }
.screen-mockup img { display:block; width:100%; height:auto; }
.browser-mockup { box-shadow:0 13px 35px #0003; }
.window-chrome { display:flex; align-items:center; justify-content:space-between; gap:15px; font:9px/1.6 var(--font-mono); background:#23292e; color:#abb5bd; border-bottom:1px solid #394249; padding:9px 13px; }
.window-dots { color:#657178; font-size:8px; letter-spacing:2px; }
.desktop-mockup { box-shadow:0 15px 40px #0003; }
.ec-client-mockup { position:relative; isolation:isolate; width:100%; aspect-ratio:1.6; border:1px solid #625239; border-radius:6px; overflow:hidden; color:#dbc797; background:#141510; }
.ec-artwork { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.7); }
.ec-client-mockup::after { content:''; position:absolute; z-index:0; inset:0; background:linear-gradient(90deg,#080b0d35,#080b0d65,#080b0d20); }
.ec-logo { position:absolute; z-index:1; top:0; left:calc(50% - 15%); width:30%; height:auto; mix-blend-mode:screen; }
.ec-login { position:absolute; z-index:1; top:42%; left:calc(50% - 16%); width:32%; text-align:center; font-family:Georgia,serif; font-size:8px; }
.ec-login > span { display:block; font-size:7px; letter-spacing:.12em; margin-bottom:3px; text-shadow:0 1px #000; }
.ec-field { border:1px solid #76603c; background:#080b0dba; color:#c7bfae; padding:6px; margin-bottom:9px; font-family:var(--font-sans); font-size:8px; }
.ec-login-button { display:grid; place-items:center; background:url('/data/work/eternal-crossing-button.png') center/100% 100% no-repeat; height:38px; color:#f0dba0; font-size:10px; letter-spacing:.1em; }
.ec-login small { display:block; font-size:6px; margin-top:4px; }
.ec-footer { display:flex; position:absolute; z-index:1; left:15px; right:15px; bottom:10px; gap:15px; justify-content:space-between; color:#e3d0aa; font:6px/1.5 var(--font-mono); text-shadow:0 1px #000; }
.native-frostify { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:18px; padding:32px 18px 22px; border:1px solid #2e3e4c; border-radius:6px; background:#18232d; font-family:'Figtree',sans-serif; }
.phone-shell { position:relative; width:276px; flex:0 0 276px; border:4px solid #080d13; background:#080d13; border-radius:32px; box-shadow:0 15px 35px #0004; padding-top:12px; }
.phone-camera { position:absolute; top:5px; left:calc(50% - 16px); width:32px; height:4px; background:#415064; border-radius:5px; }
.project-media .native-frostify .player-demo { padding-left:0; margin:0; width:100%; display:block; }
.project-media .native-frostify .player-screen { width:100%; border-radius:25px; border-color:#354b70; padding:13px 19px 19px; box-shadow:none; }
.project-media .native-frostify .record-sleeve { display:none; }
.project-media .native-frostify .player-caption { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); margin:-1px; padding:0; }
.project-media .native-frostify .player-art,.project-media .native-frostify .player-lyrics { margin-bottom:18px; }
.project-media .native-frostify .player-lyrics p { font-size:17px; }
.project-media .native-frostify .player-lyrics small { font-size:8px; margin-top:9px; }
.project-media .native-frostify .player-meta strong { font-size:19px; }
.project-media .native-frostify .player-controls { gap:13px; }
.project-media .native-frostify .player-play { width:46px; height:46px; }
.library-shell { width:250px; flex:0 1 250px; min-width:0; }
.native-frostify .library-demo { padding:16px; border-radius:13px; }
.native-frostify .library-demo-top { font-size:9px; margin-bottom:20px; gap:10px; }
.native-frostify .demo-marker { font-size:7px; }
.native-frostify .library-tabs { margin-bottom:17px; padding:0; }
.native-frostify .library-tabs label > span { font-size:15px; padding-inline:4px; }
.native-frostify .sample-track { gap:7px; padding:11px 3px; }
.native-frostify .sample-track img { width:32px; height:32px; }
.native-frostify .sample-track strong { font-size:10px; }
.native-frostify .sample-track div > span { font-size:8px; }
.native-frostify .sample-duration { font-size:8px; }
.native-frostify .sample-track > span:last-child svg { width:12px; height:12px; }
.native-frostify .sample-filters { gap:5px; }
.native-frostify .sample-filters > span { padding:4px 7px; font-size:8px; }
.native-frostify .demo-library,.native-frostify .demo-search { min-height:225px; }
.native-frostify .collection-grid { gap:10px; }
.native-frostify .collection-grid strong { font-size:10px; }
.native-frostify .collection-liked strong { font-size:11px; }
.native-frostify .collection-liked div > span { font-size:8px; }
.native-frostify .library-demo figcaption { font-size:8px; }
.case-project-media { width:100%; max-width:960px; margin-inline:auto; }
.case-project-media .native-frostify { gap:50px; }
.case-project-media .phone-shell { width:312px; flex-basis:312px; }
.case-project-media .library-shell { width:330px; flex-basis:330px; }
.case-project-media .ec-client-mockup { max-width:800px; margin-inline:auto; }
.case-project-media .ec-login { font-size:11px; }
.case-project-media .ec-login > span { font-size:10px; }
.case-project-media .ec-field { font-size:11px; padding:9px; margin-bottom:11px; }
.case-project-media .ec-login-button { height:48px; font-size:13px; }
.case-project-media .ec-login small { font-size:8px; }
.playful-project { border-bottom:1px solid var(--line); padding:0 0 40px; margin-top:40px; }
.playful-copy { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:12px 30px; margin-bottom:25px; }
.playful-copy .eyebrow { width:100%; }
.playful-copy h3 { font-size:1.9rem; }
.playful-copy h3 a { display:flex; align-items:center; gap:20px; text-decoration:none; }
.playful-copy > p { color:var(--text-dim); font-size:.85rem; max-width:58ch; margin-right:auto; }
.kritzl-mockup { max-width:960px; margin-inline:auto; }

.work-card-visual:has(.media-frostcord),.work-card-visual:has(.media-frostify) { grid-template-columns:1fr; gap:25px; }
.media-frostcord .desktop-mockup { max-width:900px; margin-inline:auto; }
.work-card-visual:has(.media-frostcord) .work-card-copy,.work-card-visual:has(.media-frostify) .work-card-copy { max-width:850px; width:100%; }
.native-frostify { gap:50px; }
.phone-shell { width:308px; flex-basis:308px; }
.library-shell { width:330px; flex-basis:330px; }
/* The first screen shows the actual desktop app and a captured native-player mockup. */
.intro { grid-template-columns:minmax(0,1fr) minmax(0,1.04fr); gap:65px; padding-block:85px 65px; }
.intro h1 { font-size:clamp(3.3rem,6.4vw,5.25rem); }
.intro-media { margin:0; min-width:0; }
.intro-device-scene { position:relative; min-height:350px; padding:20px 62px 48px 0; display:flex; align-items:center; }
.intro-desktop { display:block; width:100%; border:1px solid #465159; background:#181e22; border-radius:5px; overflow:hidden; box-shadow:0 20px 45px #0005; transform:perspective(900px) rotateY(-5deg); text-decoration:none; }
.scene-chrome { display:flex; justify-content:space-between; gap:20px; padding:7px 10px; font:7px/1.5 var(--font-mono); color:#a8b3ba; border-bottom:1px solid #343e45; }
.intro-desktop > img { width:100%; height:auto; }
.intro-phone { position:absolute; width:143px; bottom:7px; right:0; border-radius:16px; overflow:hidden; box-shadow:-12px 13px 35px #0007; transform:rotate(4deg); }
.intro-phone img { width:100%; height:auto; }
.intro-media figcaption { display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px 20px; font:8px/1.7 var(--font-mono); color:var(--text-faint); padding-top:15px; }
.project-shortcuts { display:flex; flex-wrap:wrap; gap:12px 30px; align-items:center; padding:21px 0; border-top:1px solid var(--line); }
.project-shortcuts > span { font:10px/1.5 var(--font-mono); text-transform:uppercase; color:var(--text-faint); margin-right:auto; }
.project-shortcuts a { display:inline-flex; gap:12px; align-items:center; font-size:.72rem; text-decoration:none; color:var(--text-dim); }
.project-shortcuts a:hover { color:var(--signal); }
.project-shortcuts svg { width:13px; height:13px; }
@media (max-width:1100px) {
 .intro-device-scene { min-height:300px; padding-right:45px; }
 .intro-phone { width:126px; }
 .intro { gap:50px; padding-block:60px; }
 .intro h1 { font-size:4.5rem; }
 .work-card-visual { gap:35px; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); }
 .work-card-visual:has(.media-frostify) { grid-template-columns:1fr; }
 .work-card-visual:has(.media-frostify) .work-card-copy { max-width:680px; }
 .native-frostify { gap:40px; }
 .approach-grid,.rail,.job { gap:25px 35px; }
 .project-body > .lead { margin-left:calc((100% - 35px)/4 + 35px); }
 .about-intro { gap:40px; grid-template-columns:minmax(0,1fr) 240px; }
 .ec-login { font-size:7px; }
 .ec-field { font-size:6px; padding:4px; margin-bottom:6px; }
 .ec-login > span { font-size:6px; }
 .ec-login-button { height:29px; font-size:8px; }
 .ec-login small { font-size:5px; margin-top:2px; }
}
@media (max-width:800px) {
 .intro-media { width:100%; max-width:600px; margin-inline:auto; }
 .intro-device-scene { min-height:330px; padding:20px 55px 40px 0; }
 .intro-phone { width:145px; }
 .project-shortcuts { gap:14px 23px; }
 .project-shortcuts > span { display:none; }
 .container,.rule { width:calc(100% - 48px); }
 .nav-inner { min-height:76px; }
 .intro { grid-template-columns:1fr; gap:40px; padding-block:50px; }
 .intro h1 { font-size:4.6rem; margin-block:18px 23px; }
 .intro-text { max-width:54ch; }
 .section-heading { flex-direction:column; align-items:flex-start; gap:20px; margin-bottom:30px; }
 .section-heading > p { max-width:50ch; }
 .section-heading h2 { font-size:2.6rem; }
 .work-card-visual { grid-template-columns:1fr; gap:20px; padding-bottom:32px; }
 .work-card h3 { font-size:1.9rem; margin-top:14px; }
 .work-card-copy { padding:0; }
 .work-card-copy > p { max-width:67ch; }
 .selected-grid { gap:36px; }
 .project-media > figcaption { font-size:.56rem; }
 .ec-logo { width:28%; left:36%; }
 .ec-login { top:40%; width:30%; left:35%; }
 .ec-login > span { font-size:9px; }
 .ec-field { font-size:9px; padding:8px; margin-bottom:10px; }
 .ec-login-button { height:43px; font-size:11px; }
 .ec-login small { font-size:7px; margin-top:4px; }
 .approach-grid { grid-template-columns:1fr; gap:32px; }
 .approach-person { display:flex; align-items:flex-start; gap:30px; }
 .approach-person .portrait { display:flex; align-items:center; gap:16px; max-width:none; width:auto; }
 .approach-person .portrait-image { width:72px; flex:none; }
 .approach-person .portrait figcaption { padding-top:0; }
 .approach-person > .eyebrow { max-width:13ch; padding-top:8px; }
 .about-intro { grid-template-columns:minmax(0,1fr) 190px; gap:30px; }
 .about-intro .page-title { font-size:3.4rem; }
 .lead-strong { font-size:.94rem; }
 .rail,.job { grid-template-columns:1fr; gap:18px; }
 .rail > .prose,.rail > .decisions,.rail > .diagram { grid-column:1; }
 .project-body > .lead { margin-left:0; }
 .project-body { gap:40px; }
 .meta-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:23px; }
 .project-metrics { gap:25px 38px; }
 .project-title { font-size:4.7rem; }
 .footer-inner { gap:20px; }
 .footer-note { width:100%; order:3; }
 .case-project-media .phone-shell { flex-basis:276px; width:276px; }
 .case-project-media .library-shell { flex-basis:280px; width:280px; }
 .case-project-media .native-frostify { gap:25px; }
}
@media (max-width:540px) {
 .intro-media { max-width:420px; }
 .intro-device-scene { min-height:230px; padding:10px 46px 33px 0; }
 .intro-phone { width:103px; border-radius:13px; }
 .intro-media figcaption { font-size:6px; padding-top:12px; }
 .scene-chrome { font-size:5px; padding:5px 7px; }
 .project-shortcuts { gap:13px 22px; padding-block:19px; }
 .project-shortcuts a { font-size:.65rem; gap:7px; }
 .project-shortcuts svg { width:11px; height:11px; }
 body { font-size:15px; }
 .container,.rule { width:calc(100% - 36px); }
 .nav-inner { min-height:70px; gap:14px; }
 .nav-brand { font-size:.9rem; }
 .nav-brand .brand-prefix { font-size:.64rem; margin-right:3px; }
 .nav-links { gap:18px; }
 .nav-links a { font-size:.73rem; }
 .intro { padding-block:39px; gap:31px; }
 .intro .eyebrow { font-size:.59rem; }
 .intro h1 { font-size:3.45rem; letter-spacing:-.055em; margin-block:17px 21px; }
 .intro-text { font-size:.98rem; }
 .intro .button-row { gap:23px; }
 .intro .button { padding-inline:15px; font-size:.75rem; gap:12px; }
 .intro .text-link { font-size:.76rem; gap:10px; }
 .selected-section { padding-block:34px 44px; }
 .section-heading h2 { font-size:2.2rem; }
 .section-heading .eyebrow { font-size:.6rem; }
 .section-heading > p { font-size:.84rem; }
 .work-card h3 { font-size:1.8rem; }
 .project-eyebrow { font-size:.54rem; gap:8px 12px; }
 .work-card-copy > p { font-size:.89rem; }
 .work-card-copy > .work-stack { font-size:.63rem; margin-top:18px; }
 .project-media > figcaption { font-size:.5rem; gap:4px; }
 .project-media > figcaption > span { width:100%; }
 .window-chrome { font-size:7px; padding:6px 9px; }
 .window-dots { font-size:5px; }
 .ec-client-mockup { aspect-ratio:1.45; }
 .ec-login { top:38%; width:36%; left:32%; }
 .ec-logo { width:31%; left:34.5%; top:-1%; }
 .ec-login > span { font-size:5px; margin-bottom:2px; }
 .ec-field { font-size:5px; padding:5px 2px; margin-bottom:5px; }
 .ec-login-button { height:25px; font-size:7px; }
 .ec-login small { font-size:4px; margin-top:2px; }
 .ec-footer { font-size:4px; left:9px; right:9px; bottom:6px; }
 .native-frostify { padding:25px 17px; gap:26px; }
 .phone-shell { width:min(276px,100%); flex-basis:276px; max-width:100%; }
 .library-shell { width:100%; max-width:276px; flex-basis:276px; }
 .case-project-media .phone-shell { width:276px; max-width:100%; }
 .case-project-media .library-shell { width:276px; max-width:100%; }
 .case-project-media .ec-login > span { font-size:5px; }
 .case-project-media .ec-field { font-size:5px; padding:5px 2px; margin-bottom:5px; }
 .case-project-media .ec-login-button { height:25px; font-size:7px; }
 .case-project-media .ec-login small { font-size:4px; }
 .further-work,.compact-project-grid,.project-list { grid-template-columns:1fr; gap:0; }
 .further-work > a + a { border-top:1px solid var(--line); }
 .further-work strong { font-size:1.2rem; }
 .compact-project-grid,.project-list { gap:30px; }
 .section-bottom { gap:17px; }
 .section-bottom > span { width:100%; font-size:.59rem; }
 .playful-project { margin-top:34px; padding-bottom:32px; }
 .playful-copy { gap:12px; }
 .playful-copy h3 { font-size:1.8rem; }
 .playful-copy .eyebrow { font-size:.56rem; }
 .playful-copy .text-link { margin-top:6px; }
 .approach-section { padding-block:40px; }
 .approach-grid h2 { font-size:2.2rem; }
 .approach-text { font-size:.95rem; }
 .approach-details { grid-template-columns:1fr; gap:25px; }
 .contact-section { padding-block:47px; }
 .contact-section h2 { font-size:2.5rem; }
 .contact-email { font-size:1.6rem; gap:12px; }
 .contact-email svg { width:20px; height:20px; }
 .footer-links { gap:18px; }
 .footer-brand { font-size:.85rem; }
 .hero-compact { padding-block:40px; }
 .page-title { font-size:3rem; }
 .about-intro { grid-template-columns:1fr; gap:32px; }
 .about-intro .page-title { font-size:3rem; }
 .about-intro .portrait { max-width:210px; }
 .hero-summary { font-size:.94rem; }
 .work-jump { gap:17px; font-size:.65rem; }
 .skill-grid { grid-template-columns:1fr; }
 .link-row { gap:15px; }
 .link-row .label { font-size:1.1rem; }
 .link-row .handle { font-size:.64rem; max-width:63%; }
 .project-title { font-size:3rem; }
 .project-tagline { font-size:1rem; }
 .meta-grid { gap:23px 20px; }
 .project-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:23px; }
 .project-metric-value { font-size:1.9rem; }
 .project-metric-label { font-size:.61rem; }
 .project-body { gap:35px; padding-block:38px; }
 .project-section > h2 { font-size:1.4rem; }
 .diagram-scroll { padding:12px; }
 .diagram-caption { font-size:.7rem; }
 .panel { padding:27px 23px; }
 .section-title { font-size:2rem; }
}
@media (max-width:360px) {
 .nav-brand .brand-prefix { display:none; }
 .nav-links { gap:16px; }
 .intro h1 { font-size:3rem; }
 .intro .button-row { gap:20px; }
 .intro .text-link { font-size:.69rem; }
 .contact-email { font-size:1.35rem; }
 .native-frostify { padding-inline:12px; }
}
@media (prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto; }
 *,*::before,*::after { animation:none !important; transition:none !important; }
}
@media print {
 body { background:#fff; color:#111; }
 .container { width:100%; }
 .rail,.job { display:block; }
 .diagram-scroll { overflow:visible; }
 .diagram-svg { min-width:0; }
}