/* Victor Woelffel — a quiet engineering workshop. No external assets or tracking. */
:root {
  --bg:#10120f; --surface:#191c17; --surface-raised:#20251d; --text:#eeeee7;
  --muted:#a4aa9b; --soft:#828b79; --line:#33392e; --accent:#d5f590;
  --accent-text:#141b0a; --section-alt:#151812; --header:rgba(16,18,15,.93);
  --contact:#d5f590; --contact-ink:#1b2510; --shadow:0 24px 90px #0008;
  --display:'Bahnschrift','Arial',sans-serif; --body:'Segoe UI',system-ui,-apple-system,sans-serif;
  --mono:'Cascadia Code','Consolas','Liberation Mono',monospace;
  color-scheme:dark;
}
:root[data-theme="light"] {
  --bg:#f3f2eb; --surface:#eaeae1; --surface-raised:#e0e3d6; --text:#23291e;
  --muted:#5b6353; --soft:#65705a; --line:#ced2c4; --accent:#42671c;
  --accent-text:#fff; --section-alt:#eaece2; --header:rgba(243,242,235,.95);
  --contact:#d5edac; --contact-ink:#1b2510; --shadow:0 24px 90px #17220b30; color-scheme:light;
}
*,*::before,*::after { box-sizing:border-box; }
html {scroll-behavior:smooth;scroll-padding-top:115px;}
body {margin:0;background:var(--bg);color:var(--text);font:16px/1.65 var(--body);-webkit-font-smoothing:antialiased;overflow-x:clip;}
body.modal-open {overflow:hidden;}
button,input,a {-webkit-tap-highlight-color:transparent;}
button,input {font:inherit;}
button,a {touch-action:manipulation;}
button {color:inherit;cursor:pointer;}
button {border:0;}
a {color:inherit;text-decoration:none;}
a,button,input {outline-offset:5px;}
:focus-visible {outline:2px solid var(--accent);}
::selection {background:var(--accent);color:var(--accent-text);}
img,svg,canvas {display:block;max-width:100%;}
svg {width:24px;height:24px;}
button svg,a svg {fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
h1,h2,h3,h4,p {margin:0;}
h1,h2,h3,h4 {font-family:var(--display);font-weight:500;line-height:1.08;}
button:disabled {cursor:default;opacity:.35;}
[hidden] {display:none!important;}
.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;}
.mono {font-family:var(--mono);font-size:11px;line-height:1.5;font-weight:400;letter-spacing:.06em;text-transform:uppercase;}
.accent {color:var(--accent);}
.section-shell {width:min(1320px,calc(100% - 112px));margin-inline:auto;}
.section-space {padding-block:118px;}
.skip-link {position:fixed;top:12px;left:16px;background:var(--accent);color:var(--accent-text);padding:12px 20px;border-radius:4px;transform:translateY(-200%);z-index:2000;}
.skip-link:focus {transform:translateY(0);}
.reading-progress {position:fixed;top:0;left:0;right:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;z-index:101;pointer-events:none;}
.site-header {height:100px;display:flex;align-items:center;justify-content:space-between;padding-inline:56px;max-width:1600px;margin:auto;position:sticky;top:0;z-index:100;background:var(--header);border-bottom:1px solid var(--line);backdrop-filter:blur(18px);gap:24px;}
.brand {display:flex;gap:12px;align-items:center;font:500 13px/1.2 var(--display);letter-spacing:.015em;}
.brand svg {width:42px;height:42px;border:1px solid var(--line);transition:color .2s,transform .3s;}
.brand:hover svg {color:var(--accent);transform:rotate(-6deg);}
.brand-dot {color:var(--accent);}
.desktop-nav {display:flex;gap:34px;margin-left:auto;margin-right:34px;}
.desktop-nav a {font-size:13px;color:var(--muted);padding-block:10px;position:relative;transition:color .2s;}
.desktop-nav a:hover,.desktop-nav a[aria-current] {color:var(--text);}
.desktop-nav a::after {content:'';position:absolute;bottom:3px;left:0;width:100%;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .25s;}
.desktop-nav a:hover::after,.desktop-nav a[aria-current]::after {transform:scaleX(1);}
.header-actions {display:flex;align-items:center;gap:17px;}
.language-switch {display:flex;align-items:center;gap:6px;background:transparent;font:11px var(--mono);min-height:44px;padding:8px 0;color:var(--soft);}
html[lang="fr"] .lang-fr,html[lang="en"] .lang-en {color:var(--text);}
.language-switch>span:nth-child(2) {color:var(--soft);}
.icon-button {width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid transparent;border-radius:50%;flex-shrink:0;font:26px/1 var(--body);transition:background .2s,border-color .2s;}
.icon-button svg {width:18px;height:18px;}
.icon-button:hover {background:var(--surface-raised);border-color:var(--line);}
.header-contact {display:flex;gap:20px;align-items:center;border:1px solid var(--line);padding:9px 16px;font-size:13px;min-height:43px;transition:border-color .2s;}
.header-contact svg {width:15px;height:15px;}
.header-contact:hover {border-color:var(--accent);}
.menu-toggle {display:none;}
.mobile-nav {position:absolute;top:100%;left:0;right:0;background:var(--bg);padding:12px 24px 24px;border-bottom:1px solid var(--line);box-shadow:0 20px 30px #0002;}
.mobile-nav a {display:block;padding:14px 4px;border-bottom:1px solid var(--line);font-size:20px;}
.hero {display:grid;grid-template-columns:1.1fr 1fr;gap:18px 50px;padding-top:88px;min-height:720px;align-items:center;}
.hero-copy {position:relative;z-index:2;padding-bottom:32px;}
.eyebrow {display:flex;align-items:center;gap:12px;color:var(--muted);font:11px/1.5 var(--mono);letter-spacing:.055em;text-transform:uppercase;margin-bottom:28px;}
.tiny-cross {font-family:var(--mono);font-size:23px;font-weight:300;color:var(--accent);line-height:1;}
h1 {font-size:clamp(66px,7.2vw,112px);letter-spacing:-.065em;line-height:.99;font-weight:500;white-space:nowrap;}
.headline-second {color:var(--accent);}
.hero-intro {max-width:450px;font-size:16px;color:var(--muted);line-height:1.8;margin-top:30px;text-wrap:pretty;}
.availability {display:flex;align-items:center;gap:10px;font-size:11px;margin-top:23px;color:var(--text);}
.status-dot {width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 10%,transparent);flex-shrink:0;}
.hero-actions {display:flex;align-items:center;flex-wrap:wrap;gap:22px;margin-top:32px;}
.button {display:inline-flex;align-items:center;justify-content:center;gap:24px;padding:15px 21px;min-height:52px;font-size:12px;font-weight:600;border:1px solid transparent;border-radius:2px;transition:background .25s,transform .25s,border-color .25s;}
.button svg {width:18px;height:18px;transition:transform .25s;}
.button:hover svg {transform:translate(2px,-2px);}
.button-primary {background:var(--accent);color:var(--accent-text);}
.button-primary:hover {background:color-mix(in srgb,var(--accent) 85%,var(--text));transform:translateY(-2px);}
.button-secondary {border-color:var(--line);background:transparent;}
.button-secondary:hover {border-color:var(--accent);background:var(--surface);}
.text-button {display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:8px 0;background:transparent;color:var(--muted);font-size:12px;min-height:44px;transition:color .2s;}
.text-button:hover {color:var(--accent);}
.text-button svg {width:14px;height:14px;}
.hero-art {height:530px;position:relative;align-self:center;min-width:0;border:1px solid var(--line);border-radius:4px;isolation:isolate;background:radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--accent) 6%,var(--bg)),transparent 66%);}
.hero-art::before {content:'';position:absolute;inset:0;z-index:-1;background-image:radial-gradient(var(--soft) .55px,transparent .55px);background-size:20px 20px;opacity:.18;mask-image:linear-gradient(to bottom,#000,transparent 95%);}
.art-topline {position:absolute;top:20px;left:22px;right:22px;display:flex;justify-content:space-between;color:var(--muted);font-size:9px;}
#system-canvas {width:100%;height:100%;touch-action:pan-y;}





.art-footer {position:absolute;left:20px;right:20px;bottom:45px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:15px;gap:12px;}
.scene-controls {display:flex;gap:4px;}
.scene-controls button {display:flex;align-items:center;gap:7px;font:10px var(--mono);padding:10px 11px;min-height:38px;background:transparent;color:var(--muted);border:1px solid transparent;border-radius:2px;}
.scene-controls button[aria-pressed="true"] {border-color:var(--line);color:var(--text);background:var(--surface);}
.scene-dot {width:4px;height:4px;background:var(--soft);border-radius:50%;}
.scene-controls button[aria-pressed="true"] .scene-dot {background:var(--accent);}

.hero-bottom {grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;padding-block:20px 27px;color:var(--soft);gap:20px;}
.scroll-cue {display:flex;align-items:center;gap:12px;font-size:9px;color:var(--muted);}
.scroll-line {display:flex;justify-content:center;align-items:center;width:27px;height:36px;border:1px solid var(--line);border-radius:20px;color:var(--text);font-size:17px;transition:transform .2s;}
.scroll-cue:hover .scroll-line {transform:translateY(3px);}
.hero-location {font-size:9px;}
.hero-location span {padding-inline:12px;color:var(--accent);}
.summary-strip {display:flex;gap:70px;align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-block:33px;}
.summary-strip>div {display:flex;align-items:center;gap:16px;min-width:0;}
.summary-strip>div>span:last-child {color:var(--muted);font-size:11px;max-width:92px;line-height:1.5;}
.summary-number {font:500 36px/1 var(--display);letter-spacing:-.05em;}
.summary-number span {color:var(--accent);font-size:18px;vertical-align:top;margin-left:3px;}
.strip-mark {margin-left:auto;color:var(--accent);}
.strip-mark svg {width:49px;height:49px;stroke:currentColor;stroke-width:1;fill:none;}
.section-index {color:var(--muted);font-size:10px;display:flex;align-items:center;gap:16px;margin-bottom:32px;}
.section-index>span:first-child {color:var(--accent);}
.heading-row {display:flex;align-items:flex-end;justify-content:space-between;gap:40px;}
h2 {font-size:clamp(44px,5.2vw,75px);letter-spacing:-.055em;line-height:1.02;}
.muted-heading {color:var(--muted);}
.section-intro {color:var(--muted);max-width:350px;font-size:14px;line-height:1.8;padding-bottom:4px;}
.project-toolbar {display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:52px;padding-block:18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.filter-group {display:flex;align-items:center;gap:4px;flex-wrap:wrap;}
.filter-button {background:transparent;color:var(--muted);font-size:11px;padding:10px 13px;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:40px;border:1px solid transparent;border-radius:3px;white-space:nowrap;transition:background .2s,color .2s;}
.filter-button:hover {color:var(--text);background:var(--surface);}
.filter-button[aria-pressed="true"] {color:var(--accent-text);background:var(--accent);}
.filter-count {opacity:.65;font:10px var(--mono);}
.search-field {display:flex;align-items:center;gap:10px;min-width:180px;max-width:250px;width:25%;padding:0 6px 0 12px;border-left:1px solid var(--line);}
.search-field svg {width:15px;height:15px;fill:none;stroke:var(--muted);stroke-width:1.4;flex-shrink:0;}
.search-field input {width:100%;min-width:0;border:0;background:transparent;color:var(--text);font-size:11px;padding:11px 0;line-height:20px;}
.search-field input::placeholder {color:var(--soft);opacity:1;}
.search-field input::-webkit-search-cancel-button {display:none;}
.clear-search {background:var(--surface);border-radius:50%;font-size:18px;line-height:20px;width:28px;height:28px;flex-shrink:0;color:var(--muted);}
.result-count {color:var(--soft);text-align:right;margin-block:12px 22px;font-size:9px;min-height:14px;}
.project-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 25px;}
.project-card {min-width:0;position:relative;}
.project-open {display:flex;flex-direction:column;text-align:left;width:100%;background:transparent;color:var(--text);padding:0;border-radius:3px;height:100%;border:1px solid transparent;}
.project-open:focus-visible {outline-offset:7px;}
.project-visual {position:relative;aspect-ratio:1.44;background:var(--project-color);width:100%;overflow:hidden;border-radius:3px;color:#27312b;}
.project-visual>svg {width:100%;height:100%;max-width:none;transition:transform .7s cubic-bezier(.2,.65,.3,1);}
.project-open:hover .project-visual>svg {transform:scale(1.035);}
.project-visual .project-figure {position:absolute;bottom:14px;left:16px;font:8px var(--mono);letter-spacing:.08em;color:#36453b;}
.project-open .project-arrow {position:absolute;top:14px;right:14px;width:31px;height:31px;background:#ffffff70;backdrop-filter:blur(4px);display:grid;place-items:center;border-radius:50%;font-size:18px;transition:transform .3s,background .3s;color:#1b281f;}
.project-open:hover .project-arrow {background:#fff;transform:rotate(45deg);}
.project-info {padding-top:18px;width:100%;display:flex;flex-direction:column;flex:1;}
.project-meta {font:8.5px/1.5 var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.035em;margin-bottom:9px;}
.project-card h3 {font-size:24px;letter-spacing:-.035em;line-height:1.1;margin-bottom:11px;transition:color .2s;}
.project-open:hover h3 {color:var(--accent);}
.project-description {font-size:12px;line-height:1.8;color:var(--muted);margin-bottom:16px;max-width:96%;}
.tags {display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0;}
.tag {font:9px/1.5 var(--mono);border:1px solid var(--line);padding:4px 8px;border-radius:3px;white-space:normal;}
.project-card .tags {margin-top:auto;}
.project-card .tag {font-size:8px;padding:3px 7px;color:var(--muted);}
.project-explore {display:flex;align-items:center;justify-content:space-between;font-size:10px;color:var(--text);border-bottom:1px solid var(--line);padding:17px 0 10px;margin-top:8px;}
.project-explore>span:last-child {color:var(--accent);font-size:16px;}
.more-projects {display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:42px;padding-top:25px;border-top:1px solid var(--line);}
.more-projects>p {color:var(--soft);font-size:9px;}
.more-projects .button {font-size:11px;}
.empty-state {text-align:center;padding:70px 20px;}
.empty-state>span {display:block;font:50px var(--mono);color:var(--soft);margin-bottom:20px;}
.empty-state h3 {font-size:27px;}
.empty-state p {margin-top:12px;color:var(--muted);font-size:14px;}
.empty-state .text-button {color:var(--accent);margin-top:20px;border-bottom:1px solid var(--accent);}
.journey-section {background:var(--section-alt);border-block:1px solid var(--line);}
.experience-list {margin-top:56px;}
.experience {display:grid;grid-template-columns:1fr 2.3fr;gap:50px;border-top:1px solid var(--line);padding-block:36px;}
.experience-aside .mono {font-size:10px;color:var(--muted);}
.experience-aside h3 {font-size:24px;letter-spacing:-.035em;margin-block:16px 10px;}
.experience-location {font-size:11px;color:var(--soft);}
.experience-body h4 {font-size:20px;letter-spacing:-.02em;}
.experience-intro {color:var(--muted);font-size:13px;margin-top:10px;}
.experience ul:not(.tags) {list-style:none;margin:18px 0 22px;padding:0;}
.experience ul:not(.tags) li {position:relative;font-size:12px;line-height:1.8;margin-top:9px;padding-left:17px;color:var(--muted);}
.experience ul:not(.tags) li::before {content:'↳';color:var(--accent);position:absolute;left:0;top:0;font:13px/1.8 var(--mono);}
.experience .tag {color:var(--muted);font-size:8px;}
.experience-results {display:flex;gap:40px;margin-block:24px 10px;}
.experience-results>div {display:flex;flex-direction:column;}
.experience-results strong {font:400 36px/1.1 var(--display);color:var(--accent);letter-spacing:-.05em;}
.experience-results small {font-size:10px;color:var(--muted);margin-top:5px;}
.experience .text-button {font-size:11px;color:var(--text);margin-top:9px;}
.publication-card {display:flex;align-items:center;gap:24px;border:1px solid var(--line);background:var(--surface);padding:28px 30px;margin-top:9px;transition:border-color .25s,background .25s;border-radius:3px;}
.publication-card:hover {border-color:var(--accent);background:var(--surface-raised);}
.publication-icon {width:45px;height:57px;border:1px solid var(--soft);flex-shrink:0;display:flex;align-items:flex-end;padding:7px;font-size:22px;color:var(--accent);position:relative;}
.publication-icon::before,.publication-icon::after {content:'';position:absolute;height:1px;background:var(--soft);top:12px;left:7px;width:23px;}
.publication-icon::after {top:17px;width:16px;}
.publication-card .mono {font-size:9px;color:var(--muted);margin-bottom:9px;}
.publication-card h3 {font-family:var(--body);font-size:16px;line-height:1.4;max-width:760px;font-weight:500;}
.publication-card div>span {display:block;font:10px var(--mono);color:var(--accent);margin-top:12px;}
.publication-card>svg {margin-left:auto;width:20px;flex-shrink:0;}
.education-block {margin-top:70px;}
.small-heading {font:400 12px var(--mono);color:var(--text);text-transform:uppercase;letter-spacing:.07em;margin-bottom:26px;}
.education-grid {display:grid;grid-template-columns:1fr 1fr 1fr;gap:34px;}
.education-card {border-top:1px solid var(--line);padding-top:21px;position:relative;}
.education-card::before {content:'';position:absolute;top:-3px;left:0;width:5px;height:5px;border-radius:50%;background:var(--accent);}
.education-card .mono {font-size:9px;color:var(--muted);}
.education-card h4 {font-size:24px;margin-block:17px 9px;letter-spacing:-.03em;}
.education-sub {font-size:11px;line-height:1.6;min-height:36px;}
.education-body {font-size:12px;color:var(--muted);margin-top:14px;line-height:1.8;}
.about-layout {display:grid;grid-template-columns:1.2fr 1fr;gap:90px;align-items:start;}
.about-copy h2 {font-size:clamp(36px,4.2vw,58px);margin-bottom:30px;}
.about-copy>p:not(.mono) {font-size:14px;color:var(--muted);margin-top:18px;line-height:1.85;text-wrap:pretty;}
.about-copy .languages {font-size:9px;color:var(--text);margin-top:28px;}
.toolbox {border:1px solid var(--line);padding:29px 30px;background:var(--surface);border-radius:4px;margin-top:5px;}
.toolbox-heading {display:flex;align-items:center;gap:15px;margin-bottom:26px;}
.toolbox-heading h3 {font-size:21px;letter-spacing:-.02em;}
.skill-group {padding-top:21px;margin-top:21px;border-top:1px solid var(--line);}
.skill-group .mono {font-size:9px;color:var(--muted);margin-bottom:12px;}
.skill-group .tag {font-size:9px;color:var(--text);padding:5px 9px;}
.toolbox-note {font-size:10px;line-height:1.7;color:var(--muted);margin-top:23px;}
.beyond-grid {display:grid;grid-template-columns:1.25fr 1fr;gap:25px;margin-top:65px;}
.club-card {background:var(--surface);border:1px solid var(--line);padding:28px 30px;position:relative;overflow:hidden;border-radius:3px;}
.club-card>.mono {font-size:8px;color:var(--muted);max-width:80%;}
.club-card h3 {font-size:26px;letter-spacing:-.035em;margin-block:16px 14px;position:relative;z-index:1;}
.club-card>p:not(.mono) {font-size:12px;line-height:1.8;color:var(--muted);max-width:78%;position:relative;z-index:1;}
.club-number {position:absolute;right:16px;bottom:9px;font:500 110px/.85 var(--display);color:var(--soft);opacity:.22;letter-spacing:-.09em;}
.club-number span {font-size:45px;color:var(--accent);vertical-align:top;}
.interests-card {border:1px solid var(--line);padding:28px 30px;border-radius:3px;position:relative;overflow:hidden;}
.interests-card>.mono {font-size:9px;color:var(--muted);position:relative;z-index:1;}
.interest-list {margin-top:20px;display:flex;flex-direction:column;gap:9px;position:relative;z-index:1;font-size:15px;}
.interest-list>span {display:flex;align-items:center;gap:11px;}
.interest-list>span::before {content:'+';color:var(--accent);font:12px var(--mono);}
.interest-art {position:absolute;right:-16px;bottom:0;width:210px;height:165px;color:var(--accent);opacity:.3;transform:rotate(9deg);}
.contact-section {background:var(--contact);color:var(--contact-ink);padding-block:80px 90px;position:relative;}
.contact-section .section-index {color:#4a5c36;}
.contact-section .section-index>span:first-child {color:#32431e;}
.contact-layout {display:grid;grid-template-columns:1.6fr 1fr;gap:100px;align-items:end;}
.contact-layout h2 {font-size:clamp(64px,7.8vw,110px);font-weight:500;letter-spacing:-.065em;position:relative;display:inline-block;}
.contact-asterisk {position:absolute;right:-93px;top:9px;font:80px/1 var(--body);transform:rotate(15deg);opacity:.9;}
.contact-intro {max-width:480px;margin-top:29px;font-size:14px;line-height:1.85;color:#42532e;}
.contact-email {display:inline-flex;align-items:center;justify-content:space-between;gap:60px;border-bottom:1px solid #34451f;margin-top:29px;font:400 24px/1.8 var(--display);letter-spacing:-.025em;}
.contact-email>span:last-child {transition:transform .25s;}
.contact-email:hover>span:last-child {transform:translate(3px,-3px);}
.contact-links {padding-bottom:3px;}
.contact-links>a {display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #869c64;padding:17px 0;font-size:14px;gap:20px;transition:padding .2s;}
.contact-links>a:hover {padding-inline:8px;}
.contact-links>a>span:last-child {font-size:20px;}
.email-copy {display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0 18px;border-bottom:1px solid #869c64;}
.email-copy .mono {font-size:11px;letter-spacing:0;text-transform:none;overflow-wrap:anywhere;}
.email-copy .icon-button {border-color:#869c64;}
.email-copy .icon-button:hover {background:#c3e07e;border-color:#34451f;}
.contact-note {font-size:11px;color:#4a5c36;margin-top:23px;max-width:260px;line-height:1.7;}
.contact-section :focus-visible {outline-color:var(--contact-ink);}
.site-footer {padding-block:54px 26px;}
.footer-name {font:500 clamp(35px,7.6vw,112px)/1 var(--display);letter-spacing:-.065em;white-space:nowrap;display:block;max-width:max-content;}
.footer-name>span {color:var(--accent);}
.footer-bottom {display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--line);margin-top:35px;padding-top:24px;}
.footer-bottom p {display:flex;flex-direction:column;gap:5px;font-size:9px;color:var(--muted);}

.back-top {font-size:9px;color:var(--muted);white-space:nowrap;}
.privacy-note {font-size:8px;color:var(--soft);margin-top:20px;}
dialog {color:var(--text);background:var(--bg);border:1px solid var(--line);padding:0;box-shadow:var(--shadow);}
dialog::backdrop {background:#080b08b8;backdrop-filter:blur(5px);}
.project-dialog {width:min(900px,calc(100% - 40px));max-height:calc(100dvh - 48px);border-radius:5px;overscroll-behavior:contain;}
.dialog-toolbar {position:sticky;top:0;background:var(--header);backdrop-filter:blur(15px);z-index:2;display:flex;align-items:center;justify-content:space-between;padding:12px 25px;border-bottom:1px solid var(--line);}
.dialog-toolbar .mono {font-size:10px;color:var(--muted);}
.dialog-close {border-color:var(--line);font-size:25px;}
.detail-hero {height:265px;position:relative;background:var(--project-color);color:#27312b;overflow:hidden;}
.detail-hero svg {width:100%;height:100%;max-width:none;}
.detail-hero>span {position:absolute;bottom:15px;left:30px;font-size:8px;color:#36453b;}
.detail-body {padding:32px 40px 36px;}
.detail-body>.project-meta {margin-bottom:12px;font-size:10px;}
.detail-body h2 {font-size:46px;letter-spacing:-.05em;margin-bottom:22px;}
.detail-lead {font-size:17px;line-height:1.7;color:var(--muted);margin-bottom:22px;max-width:700px;}
.detail-body .tags {margin-bottom:32px;}
.detail-section {border-top:1px solid var(--line);padding-top:23px;margin-top:23px;display:grid;grid-template-columns:160px 1fr;gap:24px;}
.detail-section h3 {font:10px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.045em;color:var(--accent);}
.detail-section p,.detail-section li {font-size:13px;line-height:1.85;color:var(--muted);}
.detail-section ul {padding-left:15px;margin:0;}
.detail-section li+li {margin-top:9px;}
.detail-note {font-size:11px;color:var(--muted);line-height:1.8;margin-top:28px;border-left:2px solid var(--line);padding-left:17px;}
.detail-note strong {font-weight:500;color:var(--text);}
.detail-links {display:flex;gap:12px;flex-wrap:wrap;margin-top:30px;}
.detail-links .button {font-size:11px;}
.dialog-bottom {display:flex;justify-content:space-between;border-top:1px solid var(--line);gap:20px;padding:18px 30px;background:var(--surface);}
.dialog-bottom .text-button {font-size:11px;}
.toast {position:fixed;left:50%;bottom:27px;transform:translateX(-50%);z-index:1100;background:var(--text);color:var(--bg);padding:12px 24px;border-radius:4px;font-size:12px;box-shadow:var(--shadow);text-align:center;max-width:calc(100% - 32px);overflow-wrap:anywhere;}
.noscript-note {padding:25px;color:var(--text);background:var(--surface);border:1px solid var(--line);}
.reveal {animation:appear .55s both;}
@keyframes appear {from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* This project runs the original digit CNN entirely on the visitor's device. */
.detail-hero--neural {height:140px;}
.digit-lab {margin:28px 0 30px;padding:25px;background:var(--surface);border:1px solid var(--line);border-radius:4px;}
.digit-lab-kicker {color:var(--accent);font-size:9px;margin-bottom:12px;}
.digit-lab h3 {font-size:27px;letter-spacing:-.035em;line-height:1.15;}
.digit-lab-intro {color:var(--muted);font-size:12px;line-height:1.8;margin-top:10px;max-width:550px;}
.digit-workbench {display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr) minmax(0,1fr);gap:23px;margin-top:27px;}
.digit-workbench h4 {font:9px/1.7 var(--mono);color:var(--muted);min-height:32px;letter-spacing:.02em;text-transform:uppercase;margin-bottom:12px;}
.digit-pad {position:relative;aspect-ratio:1;background:#080e0d;border:1px solid #586250;border-radius:3px;overflow:hidden;}
#digit-canvas {width:100%;height:100%;touch-action:none;cursor:crosshair;}
.digit-pad-mark {position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;font:58px var(--display);color:#6a765f;}
.digit-hint {font-size:10px;color:var(--muted);line-height:1.6;margin-top:9px;}
.digit-tools {display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-top:11px;font:9px var(--mono);}
.digit-tools>span {width:100%;color:var(--muted);margin-bottom:3px;}
.digit-tools button {background:var(--bg);border:1px solid var(--line);min-width:30px;min-height:32px;padding:6px 8px;border-radius:2px;}
.digit-tools button:hover {border-color:var(--accent);color:var(--accent);}
#digit-clear {margin-left:auto;}
.digit-inside {border-left:1px solid var(--line);padding-left:17px;}
#digit-pixels {width:min(100%,98px);height:auto;aspect-ratio:1;image-rendering:pixelated;background:#0f1814;border:1px solid #586250;}
.digit-inside p {font:8px/1.6 var(--mono);color:var(--muted);margin-top:7px;}
.digit-feature-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;max-width:98px;margin-top:15px;}
.digit-feature-grid canvas {width:100%;height:auto;aspect-ratio:1;background:#0f1814;image-rendering:pixelated;}
.digit-prediction {border-bottom:1px solid var(--line);padding-bottom:12px;display:flex;flex-direction:column;}
#digit-answer-value {font:88px/.95 var(--display);letter-spacing:-.06em;color:var(--accent);}
.digit-prediction>span:last-child {color:var(--muted);font-size:9px;margin-top:12px;}
#digit-scores {padding:0;margin:18px 0 0;list-style:none;display:grid;gap:12px;}
#digit-scores li {display:grid;grid-template-columns:10px minmax(0,1fr) 43px;gap:7px;align-items:center;font:10px var(--mono);}
#digit-scores li>span:last-child {text-align:right;color:var(--muted);font-size:9px;}
.digit-score-track {height:4px;background:var(--line);}
.digit-score-track>span {display:block;height:100%;background:var(--accent);}
.digit-status {margin-top:19px;font-size:11px;line-height:1.6;color:var(--accent);}
.digit-lab-note {border-top:1px solid var(--line);padding-top:15px;margin-top:15px;color:var(--muted);font-size:10px;line-height:1.8;}
.digit-lab-note>span {display:block;color:var(--text);margin-top:4px;}
.digit-architectures {margin-bottom:30px;}
.digit-architectures>h3 {color:var(--accent);font-size:10px;}
.digit-architectures>div {display:grid;grid-template-columns:1fr 1fr;gap:25px;margin-top:17px;}
.digit-architectures article {border-top:1px solid var(--line);padding-top:17px;}
.digit-architectures article>span {font-size:9px;color:var(--muted);}
.digit-architectures h4 {font-size:20px;letter-spacing:-.03em;margin-top:9px;line-height:1.2;}
.digit-architectures article p {font-size:12px;line-height:1.8;color:var(--muted);margin-top:11px;}
@media(max-width:620px) {
 .digit-lab {padding:18px;margin-inline:-6px;}
 .digit-lab h3 {font-size:25px;}
 .digit-workbench {grid-template-columns:1fr 1fr;gap:23px 25px;}
 .digit-draw {grid-column:1/-1;}
 .digit-pad {max-width:260px;margin-inline:auto;}
 .digit-workbench h4 {min-height:0;}
 .digit-inside {padding-left:0;border-left:0;}
 .digit-architectures>div {grid-template-columns:1fr;gap:22px;}
}


/* The report's custom three-stage processor, explored one clock cycle at a time. */
.processor-lab {margin:28px 0 32px;padding:25px;background:var(--surface);border:1px solid var(--line);border-radius:4px;}
.processor-lab>p.mono {font-size:9px;color:var(--accent);margin-bottom:12px;}
.processor-lab h3 {font-size:29px;letter-spacing:-.04em;}
.processor-lab-intro {font-size:12px;line-height:1.85;color:var(--muted);margin-top:13px;}
.processor-controls {display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-block:22px;}
.processor-controls .button {min-height:40px;padding:10px 14px;font-size:10px;}
.processor-controls .text-button {font-size:10px;margin-left:3px;}
#processor-cycle {margin-left:auto;font-size:10px;color:var(--accent);}
.processor-pipeline {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.processor-stage {border:1px solid var(--line);padding:13px 11px;background:var(--bg);min-width:0;}
.processor-stage>.mono {font-size:9px;color:var(--muted);}
.processor-stage code {display:block;font:11px/1.7 var(--mono);margin-top:8px;overflow-wrap:anywhere;min-height:38px;}
.processor-stage small {display:block;font-size:9px;line-height:1.6;color:var(--muted);}
.processor-stage[data-active="true"][data-cpu-stage="fetch"] {border-color:#72a99e;box-shadow:inset 0 2px #72a99e;}
.processor-stage[data-active="true"][data-cpu-stage="decode"] {border-color:#b4a45c;box-shadow:inset 0 2px #b4a45c;}
.processor-stage[data-active="true"][data-cpu-stage="execute"] {border-color:var(--accent);box-shadow:inset 0 2px var(--accent);}
.processor-datapath {width:100%;height:auto;max-width:none;margin-top:13px;overflow:visible;}
.cpu-stage-zones rect {fill:var(--bg);stroke:var(--line);stroke-width:1;}
.cpu-wires path {fill:none;stroke:var(--soft);stroke-width:1.5;marker-end:url(#cpu-lab-arrow);opacity:.55;}
#cpu-lab-arrow path {fill:var(--soft);}
.cpu-blocks>* {fill:var(--surface-raised);stroke:var(--soft);stroke-width:1;filter:drop-shadow(1px 2px 1px #0002);}
.cpu-latches rect {fill:#8a7a9b33;stroke:#9e8ab6;stroke-width:.7;}
.cpu-diagram-labels text {font:10px var(--mono);fill:var(--text);text-anchor:middle;}
.cpu-diagram-labels #cpu-svg-alu,.cpu-diagram-labels #cpu-svg-memory {fill:var(--accent);}
.processor-datapath[data-fetch="true"] .path-fetch,.processor-datapath[data-op="MOVI"] .path-immediate,.processor-datapath[data-op="MOVI"] .path-writeback,.processor-datapath[data-op="ADD"] .path-writeback,.processor-datapath[data-op="LOAD"] .path-writeback,.processor-datapath[data-op="STORE"] .path-memory,.processor-datapath[data-op="LOAD"] .path-memory,.processor-datapath[data-forwarding="true"] .path-forward {stroke:var(--accent);stroke-width:2;opacity:1;stroke-dasharray:5 4;animation:cpu-signal .8s linear infinite;}
.processor-datapath[data-op="ADD"] .block-alu,.processor-datapath[data-op="MOVI"] .block-immediate,.processor-datapath[data-op="STORE"] .block-memory,.processor-datapath[data-op="LOAD"] .block-memory {stroke:var(--accent);stroke-width:2;}
@keyframes cpu-signal {to{stroke-dashoffset:-18}}
.processor-forward {font:10px/1.7 var(--mono);color:var(--accent);padding:10px 13px;border:1px solid var(--line);background:var(--bg);}
.processor-status {min-height:40px;font-size:11px;line-height:1.9;color:var(--accent);margin-top:14px;}
.processor-binary {border-top:1px solid var(--line);padding-top:17px;margin-top:17px;}
.processor-lab h4 {font-size:9px;color:var(--muted);}
#processor-bits {display:flex;gap:6px;flex-wrap:wrap;margin-top:12px;min-height:57px;align-items:flex-start;}
#processor-bits>span:not(.processor-bit-field) {font-size:11px;color:var(--muted);}
.processor-bit-field {border:1px solid var(--line);background:var(--bg);padding:6px 9px;text-align:center;}
.processor-bit-field code {font:13px var(--mono);letter-spacing:.04em;}
.processor-bit-field small {display:block;margin-top:5px;font:9px var(--mono);color:var(--muted);}
.processor-bit-field[data-field="opcode"] {border-color:#72a99e;}.processor-bit-field[data-field="imm"]{border-color:#b4a45c;}
.processor-state-grid {display:grid;grid-template-columns:1fr 1.12fr;gap:25px;margin-top:25px;}
.processor-program {list-style:none;margin:13px 0 0;padding:0;}
.processor-program li {display:grid;grid-template-columns:35px 1fr 18px;gap:4px;align-items:center;padding:10px 6px;border-top:1px solid var(--line);font:10px/1.7 var(--mono);}
.processor-program li>span {color:var(--muted);font-size:9px;}
.processor-program b {font-size:9px;font-weight:400;color:var(--accent);}
.processor-program li[data-stage="fetch"] {background:#79b4a414;}.processor-program li[data-stage="decode"]{background:#b4a45c19}.processor-program li[data-stage="execute"]{outline:1px solid var(--accent);outline-offset:-1px;}
.processor-registers {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin-top:13px;}
.processor-registers>div {padding:9px 7px;background:var(--bg);border:1px solid var(--line);min-width:0;}
.processor-registers span {display:block;font:8px/1.6 var(--mono);color:var(--muted);white-space:nowrap;}
.processor-registers strong {display:block;font:17px/1.3 var(--mono);margin-top:5px;}
.processor-registers .is-written,.processor-memory.is-written {border-color:var(--accent);color:var(--accent);}
.processor-memory {margin-top:18px;display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);padding:12px;font-size:10px;color:var(--muted);}
.processor-memory strong {font:23px var(--mono);color:var(--accent);}
.processor-lab-note {font-size:10px;line-height:1.9;color:var(--muted);margin-top:24px;border-top:1px solid var(--line);padding-top:16px;}
@media(max-width:620px){
 .processor-lab {padding:18px;margin-inline:-6px;}.processor-lab h3{font-size:26px}.processor-state-grid{grid-template-columns:1fr;gap:22px}.processor-stage{padding:11px 7px}.processor-stage code{font-size:9px;min-height:49px}.processor-stage>.mono{font-size:8px}.processor-stage small{font-size:8px}.processor-datapath{display:none}.processor-registers span{font-size:9px}.processor-registers>div{padding:10px 8px}.processor-controls{gap:8px}#processor-cycle{width:100%;margin-left:0;margin-top:6px}
}
@media(prefers-reduced-motion:reduce){.cpu-wires path{animation:none!important}}


.hardware-lab {margin:28px 0 30px;padding:25px;background:var(--surface);border:1px solid var(--line);border-radius:4px;}
.hardware-lab>p.mono {font-size:9px;color:var(--accent);margin-bottom:12px;}
.hardware-lab h3 {font-size:28px;letter-spacing:-.04em;line-height:1.15;}
.hardware-intro {font-size:12px;color:var(--muted);line-height:1.85;margin-top:13px;}
.hardware-controls {display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:22px;}
.hardware-controls .button {font-size:10px;padding:11px 14px;min-height:42px;}
.hardware-controls .text-button {font-size:10px;}
.hardware-status {font-size:12px;color:var(--accent);line-height:1.85;margin-top:19px;min-height:45px;}
.hardware-note {font-size:10px;color:var(--muted);line-height:1.85;border-top:1px solid var(--line);padding-top:15px;margin-top:18px;}
.hardware-note a {text-decoration:underline;text-underline-offset:3px;color:var(--text);white-space:nowrap;}
.irq-layout {display:grid;grid-template-columns:1.05fr 1fr;gap:36px;max-width:540px;margin:25px auto 0;}
.irq-board {border:1px solid #55735b;background:#1a3026;border-radius:7px;min-height:251px;padding:17px 15px;color:#b8d6b0;box-shadow:inset 0 0 0 5px #20382b,4px 5px 0 #080e0929;}
.irq-board>p {font-size:8px;letter-spacing:.02em;text-align:center;}
.irq-led-area {display:flex;align-items:center;gap:10px;margin-top:20px;font:8px/1.7 var(--mono);}
.irq-led-area b {font-weight:400;display:block;}
.irq-led {width:13px;height:13px;flex-shrink:0;border-radius:50%;background:#2b4b2b;border:1px solid #71866a;}
.irq-led[data-on="true"] {background:#a8f26b;box-shadow:0 0 10px #a8f26baa,0 0 23px #94d16b55;}
.irq-chip {position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;width:92px;height:71px;margin:21px auto;background:#17201c;border:1px solid #526355;outline:4px solid #0f1a12;font:12px var(--mono);color:#b3c6ab;}
.irq-chip span {font-size:6.5px;margin-top:9px;}
.irq-chip::before,.irq-chip::after {content:'';position:absolute;top:3px;bottom:3px;width:8px;background:repeating-linear-gradient(to bottom,#a1a778 0 3px,transparent 3px 8px);}
.irq-chip::before {left:-13px;}.irq-chip::after{right:-13px}
#irq-trigger {display:block;margin:17px auto 0;width:39px;height:39px;border-radius:50%;font:11px var(--mono);background:#367a9c;color:#f5ffff;border:4px solid #70958f;box-shadow:0 3px 0 #0f1d18;}
#irq-trigger:hover:not(:disabled){background:#4698bd;transform:translateY(-1px)}
.irq-pin {display:block;font:7px var(--mono);margin-top:9px;text-align:center;}
.irq-flow {list-style:none;margin:0;padding:0;display:grid;grid-template-rows:repeat(4,1fr);gap:8px;}
.irq-flow li {display:grid;grid-template-columns:26px 1fr;align-items:center;gap:8px;border:1px solid var(--line);padding:8px 12px;position:relative;}
.irq-flow .mono {font-size:8px;color:var(--muted);}.irq-flow strong{font:12px var(--mono);font-weight:400}.irq-flow i{position:absolute;bottom:-14px;left:50%;font-style:normal;color:var(--soft);font-size:12px;z-index:1}.irq-flow li:last-child i{display:none}
.irq-flow li[data-active="true"] {color:var(--accent);border-color:var(--accent);background:var(--bg);}
.irq-state {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:23px;gap:7px;}
.irq-state>span {display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;border:1px solid var(--line);padding:9px 10px;font:9px/1.7 var(--mono);color:var(--muted);}
.irq-state b {font-weight:400;color:var(--text);}
.avalon-chain {display:grid;grid-template-columns:1.15fr 1.25fr .8fr 1.15fr;gap:8px;margin-top:25px;align-items:stretch;}
.avalon-module {border:1px solid var(--line);background:var(--bg);padding:12px 10px;min-width:0;}
.avalon-module h4 {font:9px/1.6 var(--mono);color:var(--muted);min-height:30px;}
.avalon-module>.mono {display:block;color:var(--muted);font-size:8px;text-transform:none;letter-spacing:0;margin-top:12px;overflow-wrap:anywhere;}
.pixel-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;aspect-ratio:1;max-width:128px;margin:9px auto 0;background:#101710;padding:4px;border:1px solid #52634c;}
.pixel-grid button,.pixel-grid>span {padding:0;min-width:0;min-height:0;aspect-ratio:1;border:1px solid #ffffff10;background:#080f09;border-radius:1px;}
.pixel-grid button[aria-pressed="true"] {outline:2px solid var(--text);outline-offset:1px;z-index:1;}
.pixel-screen .is-current {outline:2px solid var(--accent);outline-offset:1px;}
.avalon-module dl {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:13px 5px;font:8px/1.5 var(--mono);margin:15px 0 0;}
.avalon-module dt {color:var(--muted);}.avalon-module dd {margin:0;color:var(--accent);font-size:11px;}
.avalon-module[data-active="true"] {border-color:var(--accent);box-shadow:inset 0 2px var(--accent);}
.fifo-slots {display:grid;grid-template-columns:1fr;gap:6px;margin-top:14px;}
.fifo-slots>span {display:block;height:18px;border:1px solid var(--line);background:var(--surface-raised);}
.avalon-edit {display:flex;gap:15px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-top:20px;font-size:10px;color:var(--muted);}
.avalon-edit code {display:block;font:13px var(--mono);color:var(--text);margin-top:5px;}
.pixel-swatches {display:flex;gap:7px;}.pixel-swatches button{width:28px;height:28px;border:1px solid var(--soft);background:var(--swatch);border-radius:50%;}.pixel-swatches button:hover{outline:1px solid var(--accent);outline-offset:3px}
.avalon-clock {font-size:10px;color:var(--muted);line-height:1.8;margin-top:20px;}
@media(max-width:620px){
 .hardware-lab{padding:18px;margin-inline:-6px}.hardware-lab h3{font-size:26px}.irq-layout{grid-template-columns:1.15fr .85fr;gap:12px}.irq-board{padding:14px 9px;min-height:244px}.irq-board>p{font-size:6px}.irq-led-area{font-size:7px;gap:5px}.irq-chip{width:70px;height:64px;font-size:10px}.irq-chip span{font-size:5.5px}.irq-flow li{display:flex;flex-direction:column;justify-content:center;gap:3px;padding:7px 4px}.irq-flow strong{font-size:9px}.irq-flow .mono{font-size:7px}.irq-state>span{font-size:8px;padding:8px}.avalon-chain{grid-template-columns:1fr 1fr;gap:10px}.avalon-module{padding:11px 9px}.avalon-module h4{font-size:8px}.avalon-module dl{font-size:8px}.hardware-controls{gap:8px}.hardware-controls .button{font-size:9px;padding-inline:10px}.pixel-grid{max-width:120px}
}

@media(min-width:1600px) {.site-header{padding-inline:max(56px,calc((100vw - 1320px)/2));max-width:none;} .hero{padding-top:100px;min-height:800px;} h1{font-size:116px;}}
@media(max-width:1200px) {
  .section-shell{width:calc(100% - 80px)}.site-header{padding-inline:40px}
  .hero{gap:20px 30px;min-height:680px;padding-top:65px;grid-template-columns:1.1fr 1fr}
  h1{font-size:clamp(66px,7.3vw,100px)}.hero-art{height:470px}.hero-actions{gap:12px}
  .hero-actions .button{padding-inline:17px;gap:14px}
  .hero-intro{font-size:14px}.summary-strip{gap:45px}.section-space{padding-block:96px}
  .project-toolbar{flex-wrap:wrap}.search-field{max-width:205px}.filter-button{padding-inline:9px;font-size:10px}
  .project-card h3{font-size:22px}.project-grid{gap:35px 22px}.about-layout{gap:55px}
  .contact-layout{gap:70px}.contact-asterisk{right:-68px;font-size:60px}.contact-layout h2{font-size:clamp(60px,7.2vw,90px)}
}
@media(max-width:950px) {
  .desktop-nav{gap:22px;margin-right:8px}.header-actions{gap:10px}.site-header{height:86px}
  .hero{grid-template-columns:1.1fr 1fr;gap:20px;padding-top:55px;min-height:610px}
  h1{font-size:clamp(57px,7.8vw,76px)}.eyebrow{font-size:9px;margin-bottom:24px}.hero-intro{font-size:13px;margin-top:25px}
  .hero-art{height:430px}.hero-actions{flex-direction:column;align-items:flex-start;gap:8px;margin-top:25px}
  .availability{font-size:9px;gap:8px}
  .scene-controls button{padding:9px 7px;font-size:8px;gap:5px}.art-footer{left:12px;right:12px}.art-topline{font-size:8px;left:16px;right:16px}
  .summary-strip{gap:30px}.summary-number{font-size:30px}.summary-strip>div{gap:10px}.summary-strip>div>span:last-child{font-size:10px}
  .project-toolbar{gap:8px}.filter-group{width:100%}.search-field{width:100%;max-width:none;border-left:0;border-top:1px solid var(--line);margin-top:7px;padding:8px 10px 0}
  .project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 26px}
  .section-intro{max-width:290px;font-size:12px}.experience{gap:30px;grid-template-columns:1fr 2fr}.education-grid{gap:22px}.education-card h4{font-size:21px}
  .about-layout{gap:35px;grid-template-columns:1.1fr 1fr}.about-copy h2{font-size:38px}.about-copy>p:not(.mono){font-size:13px}
  .toolbox{padding:23px}.beyond-grid{grid-template-columns:1.1fr 1fr}.club-card{padding:25px}.club-card h3{font-size:24px}
  .contact-layout{grid-template-columns:1.3fr 1fr;gap:55px}.contact-asterisk{right:-47px;font-size:44px}.contact-layout h2{font-size:59px}.contact-intro{font-size:13px}
}
@media(max-width:720px) {
  html{scroll-padding-top:90px}.section-shell{width:calc(100% - 40px)}.section-space{padding-block:74px}
  .site-header{height:78px;padding-inline:20px;gap:12px}.brand{font-size:11px;gap:9px}.brand svg{width:36px;height:36px}
  .desktop-nav,.header-contact{display:none}.menu-toggle{display:flex}.header-actions{gap:9px}.language-switch{font-size:10px}
  .hero{grid-template-columns:1fr;padding-top:47px;gap:23px;min-height:0}.hero-copy{padding-bottom:0}
  .eyebrow{font-size:10px;margin-bottom:25px}
  h1{font-size:clamp(62px,11.8vw,91px);letter-spacing:-.065em}
  .hero-intro{max-width:470px;font-size:14px;line-height:1.8;margin-top:26px}
  .availability{font-size:10px;margin-top:23px}
  .hero-actions{flex-direction:row;align-items:center;gap:17px;margin-top:26px}
  .hero-actions .button{font-size:11px;padding:14px 17px;min-height:49px}
  .hero-art{height:390px;margin-top:10px;width:100%}.art-footer{left:19px;right:19px;bottom:40px}.scene-controls button{font-size:10px;padding:10px 12px}.art-topline{font-size:9px;left:20px;right:20px}

  .hero-bottom{padding-block:6px 24px;gap:16px}.hero-location{font-size:7px;text-align:right;max-width:180px}.hero-location span{padding-inline:5px}
  .scroll-cue{font-size:8px;gap:8px}
  .summary-strip{gap:20px;padding-block:25px;justify-content:space-between}.summary-strip>div{gap:8px;flex:1;align-items:flex-start}.summary-number{font-size:28px}.summary-strip>div>span:last-child{font-size:9px;max-width:70px}.summary-number span{display:none}.strip-mark{display:none}
  .section-index{font-size:9px;margin-bottom:25px;gap:12px}
  .heading-row{flex-direction:column;align-items:flex-start;gap:23px}h2{font-size:clamp(44px,9vw,62px)}
  .section-intro{font-size:13px;max-width:420px}
  .project-toolbar{margin-top:32px;padding-top:13px;gap:5px}.filter-button{padding:9px 10px;font-size:10px;min-height:39px}
  .filter-group{gap:3px}.search-field{margin-top:8px}.search-field input{font-size:12px}
  .result-count{font-size:8px;margin-block:11px 20px}
  .project-grid{gap:33px 17px}.project-card h3{font-size:20px;line-height:1.15}.project-info{padding-top:14px}.project-meta{font-size:7px;margin-bottom:8px}
  .project-description{font-size:11px;line-height:1.7;max-width:100%;margin-bottom:13px}
  .project-card .tag{font-size:7px;padding:3px 5px}.project-explore{font-size:9px;margin-top:5px;padding-top:12px}
  .project-visual{aspect-ratio:1.2}.project-visual .project-figure{font-size:6px;left:10px;bottom:10px}.project-open .project-arrow{width:25px;height:25px;top:9px;right:9px;font-size:16px}
  .more-projects{margin-top:30px;gap:15px;flex-wrap:wrap}.more-projects>p{font-size:8px}.more-projects .button{font-size:10px;gap:14px;min-height:45px;padding:11px 15px}
  .experience-list{margin-top:38px}.experience{grid-template-columns:1fr;gap:22px;padding-block:27px}.experience-aside{position:relative}.experience-aside h3{font-size:27px;margin-block:10px 0}.experience-location{position:absolute;right:0;top:1px}.experience-body h4{font-size:21px}.experience li{font-size:12px}.experience-intro{font-size:12px}
  .experience-results{gap:35px}.experience-results strong{font-size:35px}
  .publication-card{padding:22px 18px;gap:17px;margin-top:13px}.publication-icon{width:32px;height:45px;padding:4px;font-size:20px}.publication-icon::before{left:5px;width:20px}.publication-icon::after{left:5px;width:14px}
  .publication-card h3{font-size:13px;line-height:1.5}.publication-card .mono{font-size:8px}.publication-card>svg{width:17px}.publication-card div>span{font-size:9px}
  .education-block{margin-top:48px}.education-grid{grid-template-columns:1fr;gap:25px}.education-card{padding-top:17px}.education-card h4{font-size:24px;margin-block:10px 7px}.education-sub{min-height:0;font-size:11px}.education-body{font-size:12px;margin-top:10px;max-width:540px}
  .about-layout{grid-template-columns:1fr;gap:32px}.about-copy h2{font-size:clamp(35px,8vw,47px);margin-bottom:23px}.about-copy>p:not(.mono){font-size:13px}
  .toolbox{padding:24px}.toolbox-heading{margin-bottom:18px}.skill-group{margin-top:18px;padding-top:18px}.toolbox-note{font-size:11px}
  .beyond-grid{grid-template-columns:1fr;gap:18px;margin-top:32px}.club-card{padding:25px}.club-card>p:not(.mono){max-width:85%;font-size:12px}.club-number{font-size:115px;right:25px}.interests-card{padding:25px}.interest-art{right:18px;width:190px;opacity:.25}
  .contact-section{padding-block:63px}.contact-layout{grid-template-columns:1fr;gap:34px}.contact-layout h2{font-size:clamp(63px,13vw,91px)}.contact-asterisk{right:-64px;font-size:55px;top:8px}.contact-intro{font-size:13px;max-width:470px;margin-top:25px}.contact-email{font-size:23px;margin-top:20px}
  .contact-links{max-width:none}.contact-links>a{padding-block:14px;font-size:13px}.contact-note{max-width:none;font-size:10px;margin-top:20px}
  .footer-name{font-size:clamp(32px,9.4vw,65px)}.site-footer{padding-block:37px 22px}.footer-bottom{flex-wrap:wrap;margin-top:26px;padding-top:18px;gap:13px}.footer-bottom p{width:100%}.back-top{font-size:8px}.privacy-note{font-size:8px}
  .project-dialog{width:calc(100% - 22px);max-height:calc(100dvh - 22px)}.dialog-toolbar{padding:9px 17px}.detail-hero{height:210px}.detail-body{padding:26px 23px 30px}.detail-body h2{font-size:36px}.detail-body>.project-meta{font-size:8px}.detail-lead{font-size:15px}.detail-section{grid-template-columns:1fr;gap:12px;margin-top:22px;padding-top:22px}.detail-section p,.detail-section li{font-size:12px}.detail-note{font-size:10px}.detail-links .button{font-size:10px;padding:11px 14px;gap:12px}.dialog-bottom{padding:12px 19px;gap:15px}.dialog-bottom .text-button{font-size:10px}
}
@media(max-width:400px) {
 .section-shell{width:calc(100% - 32px)}.site-header{padding-inline:16px}
 .hero-actions{gap:6px 14px}.hero-actions .button{padding-inline:14px}
 .hero-art{height:350px}.scene-controls button{font-size:9px;padding:9px 8px}
 .summary-strip{gap:9px}.summary-number{font-size:24px}.summary-strip>div>span:last-child{font-size:8px}
 .project-grid{grid-template-columns:1fr;gap:30px}.project-visual{aspect-ratio:1.5}.project-card h3{font-size:26px}.project-meta{font-size:8px}.project-description{font-size:12px}.project-card .tag{font-size:8px}
 .project-visual .project-figure{font-size:8px;left:15px;bottom:13px}.project-explore{font-size:10px}.project-open .project-arrow{width:30px;height:30px;top:13px;right:13px}
 .filter-button{font-size:9px;padding-inline:8px}.filter-count{font-size:9px}.contact-asterisk{right:-42px;font-size:36px;top:8px}
}
@media(prefers-reduced-motion:reduce) {
 html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}
}
@media print {
 :root{--bg:#fff;--text:#111;--muted:#444;--soft:#555;--line:#ccc;--surface:#fff;--section-alt:#fff;--accent:#243e0f}
 body{font-size:11px}.site-header,.hero-art,.hero-bottom,.summary-strip,.project-toolbar,.result-count,.more-projects,dialog,.reading-progress,.header-actions,.site-footer,.contact-links,.project-explore,.skip-link,.tags,.club-number{display:none!important}
 .section-shell{width:100%}.hero{display:block;min-height:0;padding:20px 0}.hero-copy{padding:0}h1{font-size:44px;line-height:1.05}.hero-intro{max-width:600px;margin-top:15px;font-size:12px}.hero-actions{display:none}
 .section-space{padding:25px 0}.section-index{margin-bottom:14px}.section-heading h2,h2{font-size:30px}.heading-row{display:block}.section-intro{max-width:none;margin-top:14px}.project-grid{grid-template-columns:repeat(3,1fr);gap:20px}.project-visual{display:none}.project-card h3{font-size:17px}.project-description{font-size:10px}.project-card{break-inside:avoid}
 .experience{padding-block:18px;gap:25px}.experience li{font-size:10px}.publication-card{padding:15px}.education-body{font-size:10px}.about-layout{gap:25px}.beyond-grid{margin-top:20px}.contact-section{background:#fff;color:#111}.contact-layout{display:block}.contact-layout h2{font-size:35px}.contact-asterisk{display:none}.contact-intro{font-size:11px}.contact-email{font-size:20px}.contact-email::after{content:' · v.woelffel.94@gmail.com';font-size:14px}.contact-email>span{display:none}a[href]::after{color:#333}
}

@media(max-width:600px) { .project-grid{grid-template-columns:1fr;gap:35px}.project-visual{aspect-ratio:1.5}.project-card h3{font-size:27px}.project-meta{font-size:9px}.project-description{font-size:13px}.project-card .tag{font-size:9px;padding:4px 8px}.project-explore{font-size:11px}.project-visual .project-figure{font-size:8px;left:15px;bottom:13px}.project-open .project-arrow{width:32px;height:32px;top:13px;right:13px}.filter-button{font-size:10px;min-height:44px}.filter-group{gap:5px} }

/* Readability refinements after mobile and desktop review. */
.project-description{font-size:13px}.project-meta{font-size:9px}.project-card .tag{font-size:9px}.experience ul:not(.tags) li{font-size:13px}.experience .tags{margin-top:18px}.experience .tags li{margin:0;padding:4px 8px;line-height:1.5}.experience .tags li::before{content:none}.toolbox-note{font-size:11px}
@media(max-width:720px){.hero-intro{font-size:15px}.project-description{font-size:13px}.filter-button{font-size:10px;min-height:44px}.availability{font-size:10px}}
@media(max-width:350px){h1{font-size:55px}.hero-actions{gap:8px}.eyebrow{font-size:9px}}

@media(max-width:600px){.contact-asterisk{display:none}}

/* The header leaves room for the work while scrolling down. Keyboard focus reveals it. */
.site-header {transition:transform .28s cubic-bezier(.2,.7,.25,1),opacity .22s;will-change:transform;}
.site-header.header-away {transform:translate3d(0,calc(-100% - 2px),0);opacity:0;pointer-events:none;}
.hero-art {height:560px;}
.art-topline {top:19px;left:24px;right:24px;}
.scene-heading {position:absolute;top:49px;left:24px;right:24px;font:500 23px/1.2 var(--display);letter-spacing:-.035em;pointer-events:none;}
.art-footer {bottom:81px;left:22px;right:22px;padding-top:11px;gap:9px;}
.scene-controls {gap:4px;}
.scene-controls button {font-size:10px;padding:10px 10px;min-height:40px;}
.scene-description {position:absolute;bottom:18px;left:24px;right:24px;color:var(--muted);font-size:11px;line-height:1.65;pointer-events:none;max-width:470px;}
@media(max-width:1200px){.hero-art{height:530px}}
@media(max-width:950px){.hero-art{height:490px}.scene-heading{font-size:21px}.scene-controls button{font-size:8px;padding:10px 7px;gap:5px}.art-footer{left:16px;right:16px}.scene-description{left:19px;right:19px;font-size:10px}.art-topline{left:19px;right:19px}.scene-heading{left:19px;right:19px}}
@media(max-width:720px){.hero-art{height:470px}.scene-heading{top:49px;font-size:23px;left:22px;right:22px}.art-topline{left:22px;right:22px}.scene-controls button{font-size:10px;padding:10px 9px}.art-footer{left:18px;right:18px;bottom:81px}.scene-description{left:22px;right:22px;bottom:17px;font-size:11px}}
@media(max-width:400px){.hero-art{height:470px}.scene-heading{font-size:22px}.scene-controls button{font-size:9px;padding:10px 8px}.scene-description{font-size:10px}.art-footer .icon-button{width:33px;height:36px}}
@media(max-width:350px){.hero-art{height:460px}.art-footer{left:13px;right:13px;gap:5px}.scene-controls{gap:2px}.scene-controls button{font-size:8px;padding:10px 7px;gap:4px}.scene-heading{font-size:20px}.scene-description{font-size:10px;line-height:1.6}}

/* Three equally reachable visualisations, including the digit CNN. */
.scene-controls {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));flex:1;min-width:0;}
.scene-controls button {justify-content:center;white-space:nowrap;padding-inline:7px;}
@media(max-width:400px){.scene-controls button{font-size:8px;padding-inline:3px;gap:4px}.art-footer{gap:7px}.art-footer .icon-button{flex:none;width:29px}.scene-controls .scene-dot{width:4px;height:4px}}

.scene-underlay,.scene-solid {position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}

.detail-hero--compact{height:140px}.detail-links--intro{margin-top:0;margin-bottom:26px}.detail-links--intro .button{padding-block:12px}

.detail-links .button{max-width:100%;white-space:normal;line-height:1.6;gap:12px}.detail-links .button svg{flex-shrink:0}

@media(min-width:951px) and (max-height:780px){.hero{padding-top:44px;min-height:0}.hero-art{height:530px}}

/* Confirmed personal outcomes are kept separate from conceptual diagrams. */
.project-outcome{display:flex;align-items:center;gap:22px;padding:19px 22px;border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--surface);margin:0 0 24px;}
.project-outcome>strong{font:42px/1 var(--display);letter-spacing:-.055em;color:var(--accent);white-space:nowrap;font-weight:500;}
.project-outcome>div>span{font:10px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.04em;}
.project-outcome p{font-size:12px;line-height:1.7;color:var(--muted);margin-top:7px;}
.project-outcome--compact{padding:12px 15px;gap:16px;margin-bottom:18px;background:transparent;}
.project-outcome--compact>strong{font-size:31px;}.project-outcome--compact>div>span{font-size:9px;}
.experience .project-outcome{max-width:430px;margin-top:20px;}
@media(max-width:600px){.project-outcome{gap:15px;padding:16px}.project-outcome>strong{font-size:34px}.project-outcome p{font-size:11px}.project-outcome--compact>strong{font-size:29px}}

/* The portrait is framed by layout; its original pixels are preserved. */
.about-layout{grid-template-columns:minmax(0,1.15fr) minmax(170px,.64fr) minmax(0,1fr);gap:38px;}
.about-portrait{margin:5px 0 0;width:100%;max-width:230px;justify-self:center;}
.portrait-frame{position:relative;aspect-ratio:4/5;overflow:hidden;background:#aaa;border:1px solid var(--line);border-radius:3px;}
.portrait-frame img{position:absolute;width:200%;max-width:none;height:auto;left:-22.5%;top:-12%;}
.about-portrait figcaption{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);margin-top:12px;padding-top:10px;font-size:9px;color:var(--muted);}
.about-portrait figcaption span{color:var(--accent);font-size:14px;}
@media(min-width:951px) and (max-width:1200px){.about-layout{gap:28px;grid-template-columns:minmax(0,1.1fr) minmax(155px,.6fr) minmax(0,1fr)}.about-copy h2{font-size:38px}.toolbox{padding:23px 20px}}
@media(max-width:950px){.about-layout{grid-template-columns:minmax(0,1fr) 210px;gap:34px}.about-portrait{margin-top:5px}.about-layout .toolbox{grid-column:1/-1;width:100%;margin-top:0}}
@media(max-width:720px){.about-layout{grid-template-columns:minmax(0,1fr);gap:30px}.about-portrait{width:190px;justify-self:start;margin-top:0}.about-layout .toolbox{grid-column:auto}.about-portrait figcaption{font-size:9px}}
@media print{.about-layout{grid-template-columns:1fr 145px 1fr;gap:20px}.about-portrait{max-width:145px}.about-layout .toolbox{grid-column:auto}}