@font-face { font-family:"IBM Plex Sans"; src:url("./fonts/IBMPlexSans-Regular.woff2") format("woff2"); font-weight:400; font-display:swap }
@font-face { font-family:"IBM Plex Sans"; src:url("./fonts/IBMPlexSans-Medium.woff2") format("woff2"); font-weight:500 900; font-display:swap }
@font-face { font-family:"IBM Plex Mono"; src:url("./fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight:400 900; font-display:swap }
@view-transition { navigation:auto }
::view-transition-old(root),::view-transition-new(root) { animation-duration:.3s }
:root {
  --bg:#F4F0E7; --surface:#E8E8DC; --surface-alt:#DEE8DF; --ink:#202A27; --muted:#53635B;
  --accent:#9B441F; --accent-alt:#496D62; --line:#C4CEC1; --glow:rgba(155,68,31,.12);
  --ambient-one:rgba(105,151,129,.19); --ambient-two:rgba(198,131,86,.15);
  --sans:"IBM Plex Sans",Arial,Helvetica,sans-serif; --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
}
* { box-sizing:border-box }
[hidden] { display:none!important }
html { scroll-behavior:smooth; scroll-padding-top:90px }
body { margin:0; background:radial-gradient(ellipse 60% 800px at 86% 4%,var(--ambient-one),transparent 74%),radial-gradient(ellipse 55% 850px at 4% 82%,var(--ambient-two),transparent 72%),var(--bg); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased; transition:background-color .56s ease,color .56s ease }
body::after { content:""; position:fixed; inset:0; z-index:30; pointer-events:none; opacity:0; clip-path:circle(0 at var(--transition-x,90%) var(--transition-y,40px)) }
body.mode-changing.enter-afterburn::after { background:radial-gradient(circle at var(--transition-x,90%) var(--transition-y,40px),rgba(242,171,104,.6),rgba(155,68,31,.28) 34%,rgba(19,32,30,.7) 72%); animation:afterburn-wake .56s ease-out both }
body.mode-changing.enter-present::after { background:radial-gradient(circle at var(--transition-x,90%) var(--transition-y,40px),rgba(255,255,255,.88),rgba(244,240,231,.72) 45%,rgba(244,240,231,.35) 78%); animation:present-reveal .56s ease-out both }
@keyframes afterburn-wake { 0% { opacity:0; clip-path:circle(0 at var(--transition-x) var(--transition-y)) } 32% { opacity:.85 } 100% { opacity:0; clip-path:circle(150vmax at var(--transition-x) var(--transition-y)) } }
@keyframes present-reveal { 0% { opacity:0; clip-path:circle(0 at var(--transition-x) var(--transition-y)) } 42% { opacity:.75 } 100% { opacity:0; clip-path:circle(150vmax at var(--transition-x) var(--transition-y)) } }
body[data-mode="afterburn"] { color-scheme:dark; --bg:#13201E; --surface:#1B302D; --surface-alt:#203A35; --ink:#F1EEE4; --muted:#B2C5BA; --accent:#F2AB68; --accent-alt:#8AC2B4; --line:#3E5B54; --glow:rgba(242,171,104,.15); --ambient-one:rgba(70,137,120,.23); --ambient-two:rgba(180,91,54,.18) }
::selection { background:var(--accent); color:var(--bg) }
a { color:inherit }
a:focus-visible,button:focus-visible { outline:2px solid var(--accent); outline-offset:4px }
button { font:inherit; cursor:pointer }
.shell { width:min(100% - 80px,1380px); margin-inline:auto }
.skip-link { position:fixed; top:-70px; left:16px; z-index:100; padding:12px 17px; background:var(--ink); color:var(--bg) }
.skip-link:focus { top:12px }
.site-header { position:sticky; top:0; z-index:20; min-height:78px; padding:15px 40px; display:flex; align-items:center; gap:30px; border-bottom:1px solid var(--line); background:var(--bg); transition:background .75s ease,border-color .75s ease }
.brand { display:inline-flex; align-items:center; gap:9px; text-decoration:none; white-space:nowrap; font-size:15px; font-weight:900; letter-spacing:.11em }
.brand-symbol { font-size:29px; color:var(--accent); line-height:0 }
.nav { display:flex; gap:29px; margin-left:auto }
.nav a { position:relative; padding:10px 0; color:var(--muted); text-decoration:none; font-size:13px; font-weight:600; transition:color .2s }
.nav a:hover,.nav a.active { color:var(--ink) }
.nav a.active:after { content:""; position:absolute; bottom:3px; left:0; right:0; height:1px; background:var(--accent) }
.back-link { display:inline-flex; align-items:center; min-height:44px; margin-bottom:72px; color:var(--accent); font-size:13px; font-weight:500; text-decoration:none }
.back-link:hover { text-decoration:underline }
.header-actions { display:flex; align-items:center; gap:20px }
.mode-toggle { min-height:44px; display:flex; align-items:center; gap:8px; padding:6px 11px 6px 7px; border:1px solid var(--line); border-radius:24px; background:transparent; color:var(--ink); font:10px var(--mono); letter-spacing:.03em; white-space:nowrap; transition:border-color .2s,background .2s; isolation:isolate }
.mode-toggle:hover { border-color:var(--accent); background:var(--glow) }
.mode-track { width:43px; height:25px; flex:none; position:relative; overflow:hidden; border:1px solid var(--line); border-radius:30px; background:var(--surface); transition:background .35s ease,box-shadow .35s ease,border-color .35s ease }
body[data-mode="afterburn"] .mode-track { background:rgba(155,68,31,.35); border-color:var(--accent); box-shadow:0 0 12px var(--glow) }
.mode-track:after { content:""; position:absolute; inset:0; border-top:2px solid var(--accent); opacity:0; transform:translateX(-100%); transition:transform .3s,opacity .3s }
.mode-thumb { width:17px; height:17px; position:absolute; top:3px; left:3px; border-radius:50%; background:var(--accent); transition:transform .22s ease,background .5s ease }
body[data-mode="afterburn"] .mode-thumb { transform:translateX(18px) }
body.mode-changing.enter-afterburn .mode-track:after { opacity:1; transform:translateX(0) }
body.mode-changing.enter-present .mode-track:after { opacity:1; transform:translateX(0) rotate(180deg) }
body.mode-changing.enter-afterburn .mode-thumb { animation:ember-ignite .56s ease-out }
body.mode-changing.enter-present .mode-thumb { animation:paper-settle .56s ease-out }
@keyframes ember-ignite { 35% { box-shadow:0 0 0 8px rgba(242,171,104,.18),0 0 25px 8px rgba(242,171,104,.4) } }
@keyframes paper-settle { 35% { box-shadow:0 0 0 8px rgba(245,242,235,.32),0 0 20px 6px rgba(245,242,235,.6) } }
.mode-option { transition:color .2s ease; color:var(--muted) }
body[data-mode="present"] .mode-present,body[data-mode="afterburn"] .mode-afterburn { color:var(--accent); font-weight:700 }
.mode-option+.mode-option:before { content:"↔"; color:var(--accent-alt); margin-right:8px; font-weight:400 }
.eyebrow { margin:0 0 22px; font:700 12px var(--mono); letter-spacing:.1em; color:var(--accent) }
.hero { min-height:calc(100dvh - 78px); position:relative; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:center; gap:20px; padding-block:70px 95px; overflow:hidden }
.hero-copy { position:relative; z-index:2 }
.hero-kicker span { margin-inline:9px; color:var(--accent-alt) }
.hero-name { margin:0 0 26px; color:var(--muted); font:13px var(--mono); line-height:1.6; text-transform:uppercase }
h1,h2,h3,p { overflow-wrap:break-word }
h1,h2,h3 { font-weight:500; text-wrap:balance }
h1 { margin:0; font-size:clamp(55px,6.7vw,92px); letter-spacing:-.065em; line-height:1.01 }
h1 span { display:inline-block }
h1 em,h2 em { font-family:Georgia,serif; font-weight:400; letter-spacing:-.065em; color:var(--accent) }
.hero-summary { max-width:560px; margin:32px 0 25px; color:var(--muted); font-size:18px; line-height:1.65 }
.hero-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.button { min-height:48px; display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border:0; text-decoration:none; font-size:13px; font-weight:700; transition:transform .2s,color .2s,background .2s }
.button:hover { transform:translateY(-2px) }
.button:active { transform:translateY(1px) }
.button-arrow { font-size:16px; line-height:1 }
.primary-button { border-radius:23px 6px 23px 6px; background:var(--ink); color:var(--bg) }
.primary-button:hover { background:var(--accent); color:var(--bg) }
.text-button { padding-inline:8px 4px; background:transparent; color:var(--ink) }
.text-button:hover { color:var(--accent) }
.text-button .button-arrow { width:28px; height:28px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; background:var(--surface); transition:border-color .2s,transform .2s }
.text-button:hover .button-arrow { border-color:var(--accent); transform:rotate(35deg) }
.mode-explainer { margin:12px 0 0; color:var(--muted); font-size:12px }
.hero-visual { width:min(100%,510px); aspect-ratio:1; justify-self:center; position:relative; display:grid; place-items:center; transition:transform .42s ease }
.hero-visual:before { content:""; position:absolute; inset:4%; border-radius:50%; background:radial-gradient(circle at 42% 40%,var(--ambient-one),var(--glow) 44%,transparent 72%); filter:blur(22px) }
.time-arc { position:absolute; border:1px solid var(--line); border-radius:50%; transform:rotate(-23deg) scaleY(.83) }
.arc-one { width:93%; height:93% }.arc-two { width:68%; height:68% }.arc-three { width:43%; height:43% }
.arc-one:after,.arc-two:after { content:""; position:absolute; width:7px; height:7px; border-radius:50%; background:var(--accent); top:15%; right:17%; box-shadow:0 0 19px var(--accent) }
.arc-point { position:absolute; z-index:1; width:5px; height:5px; border-radius:50%; background:var(--accent) }
.point-one { top:15%; left:26% }.point-two { top:30%; right:19%; background:var(--accent-alt) }.point-three { bottom:20%; left:29% }
.visual-note { position:absolute; font:11px var(--mono); letter-spacing:.12em; color:var(--muted) }
.note-one { top:8%; left:15% }.note-two { top:23%; right:4%; color:var(--accent-alt) }.note-three { bottom:11%; left:12% }
.visual-center { font-size:clamp(32px,3.7vw,56px); font-weight:500; line-height:.85; letter-spacing:-.07em; text-align:center; color:var(--accent); transform:rotate(-8deg) }
.ticker { height:55px; display:flex; align-items:center; overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:linear-gradient(90deg,var(--surface),var(--bg) 60%,var(--surface)); color:var(--muted); position:relative }
.ticker-track { width:max-content; display:flex; white-space:nowrap; animation:marquee 24s linear infinite; font:11px var(--mono); letter-spacing:.12em }
.ticker-track span { padding-right:2em }
.ticker.paused .ticker-track,.ticker.tab-hidden .ticker-track { animation-play-state:paused }
.ticker-toggle { position:absolute; right:15px; top:8px; min-width:55px; min-height:38px; border:1px solid var(--line); border-radius:19px; background:var(--bg); color:var(--ink); font:11px var(--mono) }
@keyframes marquee { to { transform:translateX(-50%) } }
.section { padding-block:125px }
.projects-section { background:radial-gradient(ellipse at 90% 12%,var(--ambient-two),transparent 50%) }
.skills-section { background:radial-gradient(ellipse at 7% 86%,var(--ambient-one),transparent 54%) }
.section-intro { max-width:750px; margin-bottom:72px }
.section-intro h2,.about-grid h2,.archive-section h2 { margin:0; font-size:clamp(40px,4.4vw,62px); line-height:1.08; letter-spacing:-.055em }
.section-intro>p:last-child { max-width:560px; margin:24px 0 0; color:var(--muted); font-size:17px; line-height:1.65 }
.projects-list { display:grid; gap:115px }
.all-projects-link { display:inline-flex; align-items:center; gap:12px; margin-top:72px; padding:13px 0; color:var(--accent); font-size:16px; font-weight:700; text-decoration:none; border-bottom:1px solid var(--accent) }
.all-projects-link span { transition:transform .2s }
.all-projects-link:hover span,.all-projects-link:focus-visible span { transform:translate(4px,-4px) }
.project-feature { display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:clamp(42px,6vw,105px) }
.project-feature:nth-child(even) { grid-template-columns:.85fr 1.15fr }
.project-feature:nth-child(even) .project-media { order:2 }
.project-media { min-height:420px; aspect-ratio:1.32; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; background:radial-gradient(circle at 60% 40%,var(--glow),transparent 56%),var(--surface); text-decoration:none; transition:background .56s ease }
.project-media.shape-arch,.case-media.shape-arch { border-radius:50% 50% 4% 4% / 68% 68% 4% 4% }
.project-media.shape-oval,.case-media.shape-oval { border-radius:50%; background:radial-gradient(circle at 35% 60%,var(--ambient-one),transparent 58%),var(--surface-alt) }
.project-media.shape-hex,.case-media.shape-hex { border-radius:0; background:radial-gradient(circle at 30% 70%,var(--ambient-two),transparent 60%),var(--surface); clip-path:polygon(20% 0,80% 0,100% 50%,80% 100%,20% 100%,0 50%) }
.project-feature:has(.project-media.shape-hex:focus-visible) { outline:2px solid var(--accent); outline-offset:6px }
.project-media:before,.project-media:after { content:""; position:absolute; width:55%; aspect-ratio:1; border:1px solid var(--line); border-radius:50%; transform:scaleY(.62) rotate(-20deg) }
.project-media:after { width:33%; transform:scaleX(.55) rotate(30deg) }
.project-media img { position:absolute; width:100%; height:100%; object-fit:cover; transition:transform .32s ease }
.project-media:hover img,.project-media:focus-visible img { transform:scale(1.03) }
.media-annotation { position:absolute; top:18%; left:50%; z-index:2; max-width:80%; transform:translateX(-50%); color:var(--muted); font:11px var(--mono); text-align:center; white-space:nowrap }
.media-placeholder { position:relative; z-index:2; padding:12px 17px; border:1px solid var(--line); border-radius:24px; color:var(--muted); background:var(--bg); font:11px var(--mono); letter-spacing:.1em }
.media-arrow { position:absolute; z-index:3; bottom:24px; right:27px; font-size:30px; transition:transform .3s ease }
.shape-oval .media-arrow,.shape-hex .media-arrow { right:24%; bottom:18% }
.project-media:hover .media-arrow,.project-media:focus-visible .media-arrow { transform:translate(4px,-4px) }
.project-copy { max-width:500px }
.project-copy h2,.project-copy h3 { margin:0 0 21px; font-size:clamp(34px,3.6vw,50px); letter-spacing:-.05em; line-height:1.1 }
.project-copy h2 a,.project-copy h3 a { text-decoration:none }
.project-copy h2 a:hover,.project-copy h3 a:hover { color:var(--accent) }
.project-summary { margin:0 0 28px; color:var(--muted); font-size:18px; line-height:1.6 }
.project-facts { display:grid; gap:9px; padding-top:20px; border-top:1px solid var(--line); color:var(--muted); font:11px var(--mono); letter-spacing:.05em }
.project-actions { display:flex; gap:26px; flex-wrap:wrap; margin-top:29px }
.project-actions a { font-size:13px; font-weight:700; text-decoration:none }
.project-actions a:hover { color:var(--accent) }
.case-link { color:var(--accent) }
.about-section { background:radial-gradient(ellipse at 12% 18%,var(--ambient-one),transparent 52%),var(--surface-alt); transition:background-color .56s ease }
.about-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:9vw }
.about-main { padding-top:40px }
.about-text { max-width:66ch; font-size:17px; line-height:1.75; letter-spacing:-.01em }
.about-text p { margin:0 0 22px }
.about-text p:first-child { font-size:clamp(19px,1.8vw,23px); line-height:1.58; color:var(--ink) }
.about-text p:last-child { margin-bottom:0 }
.template-note { margin:24px 0 0; color:var(--muted); font:12px var(--mono); line-height:1.6 }
.template-note code { color:var(--accent) }
.milestones { margin-top:55px; border-left:1px solid var(--accent) }
.milestone { position:relative; padding:0 0 38px 27px }
.milestone:before { content:""; position:absolute; width:8px; height:8px; border-radius:50%; top:3px; left:-5px; background:var(--accent) }
.milestone time { display:block; color:var(--accent); font:12px var(--mono); margin-bottom:8px }
.milestone strong { font-size:19px }.milestone p { color:var(--muted); line-height:1.55; margin:8px 0 }
.milestone a { color:var(--accent); font-size:13px }
.skills-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5vw }
.skill-group { border-top:1px solid var(--line); padding-top:22px }
.skill-group h3 { font-size:23px; letter-spacing:-.04em; margin:0 0 27px }
.skill-group ul { list-style:none; padding:0; margin:0 }
.skill-group li { display:grid; gap:7px; padding:0 0 23px; margin-bottom:23px; border-bottom:1px solid var(--line) }
.skill-group strong { font-size:16px }.skill-group span { color:var(--muted); font-size:14px; line-height:1.5 }.skill-group a { color:var(--accent); font-size:13px }
.archive-section { display:none; background:radial-gradient(ellipse at 80% 30%,var(--ambient-two),transparent 58%),var(--surface-alt); transition:background-color .56s ease }
body[data-mode="afterburn"] .archive-section { display:block }
.archive-layout { display:grid; grid-template-columns:190px 1fr; gap:6vw }
.year-filters { display:flex; flex-direction:column; gap:7px; align-items:start; align-self:start; position:sticky; top:120px }
.year-filters button { min-height:44px; border:0; background:none; color:var(--muted); text-align:left; font:13px var(--mono) }
.year-filters button.active { color:var(--accent); font-weight:700 }
.archive-records { border-left:1px solid var(--line) }
.archive-record { display:grid; grid-template-columns:100px 1fr auto; align-items:start; gap:25px; padding:0 0 55px 30px; position:relative }
.archive-record:before { content:""; position:absolute; width:9px; height:9px; border-radius:50%; background:var(--accent); top:4px; left:-5px; box-shadow:0 0 16px var(--accent) }
.archive-year { color:var(--accent); font:12px var(--mono) }
.archive-record .eyebrow { font-size:10px; margin:0 0 12px }
.archive-record h3 { margin:0 0 10px; font-size:25px; letter-spacing:-.04em }
.archive-record p:not(.eyebrow) { max-width:580px; color:var(--muted); line-height:1.55; margin:0 }
.archive-open { color:var(--accent); font-size:12px; font-weight:700; text-decoration:none; white-space:nowrap }
.archive-empty { padding-left:30px; color:var(--muted) }
.extras-section>div+div { margin-top:100px }.extras-section h2 { font-size:42px; letter-spacing:-.05em }
.extra-row { display:grid; grid-template-columns:120px 1fr 2fr; gap:20px; padding:22px 0; border-top:1px solid var(--line) }
.extra-row span { color:var(--accent); font:12px var(--mono) }.extra-row p { margin:0; color:var(--muted) }
.contact-section { background:radial-gradient(ellipse at 85% 20%,var(--ambient-one),transparent 55%),radial-gradient(ellipse at 5% 95%,var(--ambient-two),transparent 52%),var(--surface); transition:background-color .56s ease }
.contact-section h2 { margin:0; max-width:1000px; font-size:clamp(52px,7vw,94px); line-height:1.04; letter-spacing:-.06em }
.contact-description { max-width:570px; margin:32px 0; color:var(--muted); font-size:18px; line-height:1.65 }
.contact-links { display:flex; gap:14px; flex-wrap:wrap }
.contact-links a { min-height:48px; display:inline-flex; align-items:center; padding:13px 19px; border:1px solid var(--line); border-radius:30px; text-decoration:none; font-size:14px; font-weight:700 }
.contact-links a:hover { border-color:var(--accent); color:var(--accent) }
.footer { min-height:95px; display:flex; align-items:center; justify-content:space-between; gap:20px; color:var(--muted); font:11px var(--mono); letter-spacing:.07em }
.footer a { text-decoration:none }.footer a:hover { color:var(--accent) }
body[data-mode="afterburn"] .project-feature { padding-left:30px; border-left:1px solid var(--line) }
body[data-mode="afterburn"] .project-feature:nth-child(even) { border-left:0; border-right:1px solid var(--line); padding-left:0; padding-right:30px }
body[data-mode="afterburn"] .hero-visual:before { animation:breathe 9s ease-in-out infinite }
@keyframes breathe { 50% { opacity:.5; transform:scale(1.08) } }
.hero-copy>* { animation:hero-rise .55s both }.hero-copy>*:nth-child(2) { animation-delay:.05s }.hero-copy>*:nth-child(3) { animation-delay:.1s }.hero-copy>*:nth-child(4) { animation-delay:.15s }.hero-copy>*:nth-child(5) { animation-delay:.2s }
@media(min-width:701px) { .hero { padding-block:30px 45px }.hero-summary { margin-top:22px; margin-bottom:18px } }
body[data-mode="afterburn"] .hero { grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr) }
body[data-mode="afterburn"] .hero-visual { transform:rotate(8deg) scale(1.04) }
body.mode-changing.enter-afterburn .time-arc { animation:arc-ignite .56s ease-out both }
body.mode-changing.enter-present .time-arc { animation:arc-settle .56s ease-out both }
@keyframes arc-ignite { 50% { border-color:var(--accent); box-shadow:0 0 30px var(--glow); transform:rotate(22deg) scaleY(.83) scale(1.08) } }
@keyframes arc-settle { 50% { border-color:var(--accent); transform:rotate(-42deg) scaleY(.83) scale(.94) } }
@keyframes hero-rise { from { opacity:0; transform:translateY(10px) } to { opacity:1; transform:translateY(0) } }
.reveal.visible { animation:section-in .42s both }
@keyframes section-in { from { opacity:.5; transform:translateY(10px) } to { opacity:1; transform:translateY(0) } }
@media(max-width:1050px) {
  .site-header { gap:18px; padding-inline:25px }.nav { gap:18px }
  .hero,body[data-mode="afterburn"] .hero { grid-template-columns:1fr }.hero-copy { max-width:750px }
  .hero-visual { position:absolute; right:-4%; top:10%; width:48%; opacity:.28 }
  .project-feature,.project-feature:nth-child(even) { grid-template-columns:1fr; gap:28px }
  .project-feature:nth-child(even) .project-media { order:0 }
  .project-media { min-height:340px; aspect-ratio:1.6 }
  .project-copy { max-width:650px }
  .archive-record { grid-template-columns:80px 1fr }.archive-open { grid-column:2 }
}
@media(max-width:700px) {
  html { scroll-padding-top:125px }.shell { width:min(100% - 40px,1380px) }
  .site-header { min-height:0; padding:13px 20px; flex-wrap:wrap; gap:12px }
  .brand { font-size:13px }.brand-symbol { font-size:23px }
  .header-actions { margin-left:auto }.mode-toggle { font-size:9px; padding:8px 10px }
  .nav { width:100%; order:3; justify-content:space-between; margin:0; gap:10px }.nav a { font-size:12px; min-height:40px }
  .hero { min-height:calc(100dvh - 120px); padding-block:70px 75px }
  .hero h1 { font-size:clamp(46px,11.5vw,65px) }.hero-name { font-size:11px }.hero-summary { font-size:16px; margin-top:26px }
  .hero-visual { width:80%; right:-12%; top:15%; opacity:.18 }.visual-note { display:none }
  .hero-actions { gap:6px }.button { padding-inline:13px; font-size:12px }
  .text-button { padding-inline:6px 2px }
  .mode-explainer { font-size:11px }
  .ticker { height:48px }.ticker-track { font-size:10px }.section { padding-block:85px }
  .section-intro { margin-bottom:48px }.section-intro h2,.about-grid h2,.archive-section h2 { font-size:clamp(38px,10vw,52px) }
  .section-intro>p:last-child { font-size:15px }.projects-list { gap:80px }
  .project-feature,.project-feature:nth-child(even) { grid-template-columns:1fr; gap:24px }
  .project-feature:nth-child(even) .project-media { order:0 }
  .project-media { min-height:230px; aspect-ratio:1.2 }
  .project-copy h2,.project-copy h3 { font-size:34px }.project-summary { font-size:16px }
  body[data-mode="afterburn"] .project-feature,body[data-mode="afterburn"] .project-feature:nth-child(even) { padding:0; border:0 }
  .about-grid { grid-template-columns:1fr; gap:16px }.about-main { padding:0 }.about-text { font-size:16px }
  .skills-list { grid-template-columns:1fr; gap:35px }.skill-group h3 { margin-bottom:20px }
  .archive-layout { grid-template-columns:1fr; gap:30px }.year-filters { flex-direction:row; flex-wrap:wrap; position:static }
  .archive-record { grid-template-columns:1fr; gap:10px; padding:0 0 40px 20px }.archive-open { grid-column:1 }
  .extra-row { grid-template-columns:1fr; gap:9px }.contact-section h2 { font-size:clamp(48px,10.5vw,70px) }
  .back-link { margin-bottom:55px }
  .footer { padding-block:25px; flex-direction:column; align-items:start; gap:9px }
}
@media(max-width:360px) { .mode-toggle { font-size:8px }.hero h1 { font-size:44px }.hero-actions .text-button { padding-left:0 } }
@media(prefers-reduced-motion:reduce) {
  ::view-transition-old(root),::view-transition-new(root) { animation-duration:.01ms }
  html { scroll-behavior:auto }
  *,*:before,*:after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important }
  .ticker-track { animation:none }
}