/* Narmox — white studio / quiet terminal accents */
:root {
  --ink: #202421;
  --muted: #626b65;
  --green: #246e4f;
  --green-dark: #174d36;
  --mint: #eaf4ed;
  --paper: #f7f8f7;
  --line: #e2e6e2;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { font-size: clamp(16px, calc(14px + .28vw), 20px); scroll-behavior: smooth; scroll-padding-top: 94px; }
body { margin: 0; color: var(--ink); background: #fff; font: 1rem/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button, summary { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
a, button, summary, input { outline-offset: 5px; }
:focus-visible { outline: 2px solid var(--green); }
[hidden] { display: none !important; }
.wrap { width: min(1680px, calc(100% - clamp(40px, 8vw, 192px))); margin: 0 auto; }
.section { padding: 116px 0; }
.eyebrow { display: block; font: .75rem/1.6 var(--mono); letter-spacing: .11em; color: var(--green); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; clip: rect(0,0,0,0); overflow: hidden; white-space: nowrap; }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 100; padding: 12px 20px; border-radius: 8px; background: #fff; box-shadow: 0 2px 20px #0002; }
.skip-link:focus { top: 12px; }
.site-header { position: sticky; z-index: 20; top: 0; background: rgb(255 255 255 / 92%); backdrop-filter: blur(20px); border-bottom: 1px solid rgb(32 36 33 / 6%); }
.navigation { height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-size: 1.625rem; letter-spacing: -.065em; font-weight: 700; }
.brand-symbol { font: 1.5rem/1 var(--mono); letter-spacing: -.15em; margin-right: 3px; }
.brand-symbol span { color: var(--green); }
nav { display: flex; align-items: center; gap: 33px; font-size: .875rem; font-weight: 500; }
nav a { padding: 9px 0; transition: color .2s; }
nav a:hover { color: var(--green); }
nav .nav-contact { padding: 9px 16px; border: 1px solid var(--line); border-radius: 30px; }
.nav-contact span { margin-left: 12px; }
.menu-toggle { display: none; border: 0; background: none; padding: 12px; width: 44px; height: 44px; }
.menu-toggle span { height: 1.5px; width: 22px; background: var(--ink); display: block; margin: 5px 0; transition: transform .2s; }
.hero { padding: clamp(48px, 6vh, 90px) 0 0; text-align: center; background: radial-gradient(ellipse at 50% 50%, #f5f9f5, #fff 60%); }
.hero-eyebrow { font: .75rem/1.5 var(--mono); letter-spacing: .12em; color: #52695b; display: flex; justify-content: center; align-items: center; gap: 10px; }
.status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #33855a; box-shadow: 0 0 0 4px #33855a0b; flex-shrink: 0; }
.hero h1 { font-size: clamp(3rem, 6.3vw, 6.2rem); letter-spacing: -.065em; line-height: 1.055; font-weight: 600; margin: 24px 0; }
.hero h1 > span { color: var(--green); }
.hero-description { color: var(--muted); font-size: 1.125rem; line-height: 1.8; max-width: 670px; margin: 0 auto; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 26px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 20px; padding: 13px 23px; border-radius: 30px; font-size: .875rem; font-weight: 500; transition: background .2s, transform .2s; }
.primary { background: var(--ink); color: white; }
.primary:hover { background: var(--green-dark); transform: translateY(-2px); }
.text-button { color: var(--green); }
.text-button:hover { background: #edf4ee; }
.hero-showcase { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: center; max-width: 1180px; margin: 54px auto 58px; text-align: left; }
.experience { padding: 6px 12px 6px 35px; }
.experience-number { font-size: 94px; font-weight: 500; letter-spacing: -.075em; line-height: 1; margin: 18px 0 2px; }
.experience-number span { font-size: 1.75rem; font-weight: 400; letter-spacing: -.04em; margin-left: 15px; color: #85948a; }
.experience h2 { font-size: 1.5rem; font-weight: 500; letter-spacing: -.025em; }
.experience p { font-size: .875rem; color: var(--muted); margin-top: 12px; line-height: 1.7; }
.tiny-code { display: block; margin-top: 25px; color: #657e6e; font: .75rem/1.5 var(--mono); }
.lab-window { border: 1px solid #d8e1da; border-radius: 14px; background: #fff; box-shadow: 0 30px 55px -28px #41564b42, 0 2px 6px #1c3e2305; overflow: hidden; transform: perspective(1200px) rotateY(-3deg) rotateX(2deg); }
.window-chrome { display: flex; height: 40px; gap: 14px; align-items: center; justify-content: space-between; padding: 0 16px; background: #f5f6f5; border-bottom: 1px solid #e9ece9; font: .75rem var(--mono); color: #758177; }
.window-dots { display: inline-flex; gap: 5px; }
.window-dots i { height: 7px; width: 7px; border-radius: 100%; background: #d4dcd5; }
.window-dots i:nth-child(1) { background: #d5b8ae; }
.window-dots i:nth-child(2) { background: #d9c9a0; }
.window-dots i:nth-child(3) { background: #afcbb8; }
.window-shortcut { font-size: 1rem; color: #89958c; }
.lab-body { padding: 22px 26px 0; }
.command { font: .8125rem/1.6 var(--mono); color: #405347; min-height: 18px; white-space: nowrap; }
.command > span:first-child { color: var(--green); margin-right: 8px; }
.cursor { display: inline-block; width: 6px; height: 12px; background: #347859; vertical-align: -1px; margin-left: 4px; animation: blink 1.1s step-end 5; }
@keyframes blink { 50% { opacity: 0; } }
.lab-code { margin: 22px 0; font: .8125rem/1.9 var(--mono); }
.lab-code p { display: flex; gap: 18px; white-space: pre; }
.line-number { color: #78897d; user-select: none; font-size: .75rem; }
.code-comment { color: #6a8071; }
.lab-code b { color: #765f99; font-weight: 400; }
.lab-code em { color: #387452; font-style: normal; }
.lab-footer { display: flex; justify-content: space-between; border-top: 1px solid #e9eeea; padding: 13px 0; font: .75rem/1.5 var(--mono); color: #66806c; }
.lab-footer > span:first-child { display: flex; align-items: center; gap: 8px; }
.lab-footer .status-dot { width: 4px; height: 4px; }
.recognition-strip { display: flex; justify-content: space-between; align-items: center; gap: 25px; padding: 27px 0 33px; border-top: 1px solid var(--line); color: #5a635d; text-align: left; }
.recognition-strip > span { font-size: .75rem; color: #727c75; line-height: 1.6; }
.recognition-strip a { font-size: .875rem; line-height: 1.35; padding: 6px; }
.recognition-strip b { color: #3e4941; font-size: 1rem; font-weight: 600; }
.recognition-strip a:hover, .recognition-strip a:hover b { color: var(--green); }
.projects-section { background: var(--paper); }
.section-heading { display: flex; justify-content: space-between; gap: 50px; align-items: end; margin-bottom: 44px; }
h2 { font-size: clamp(2rem, 3.9vw, 3.4rem); line-height: 1.12; letter-spacing: -.05em; font-weight: 600; }
.section-heading h2 { margin-top: 16px; }
.section-heading > p { color: var(--muted); font-size: 1rem; max-width: 365px; line-height: 1.85; margin-bottom: 4px; }
.project-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.project-card { background: #fff; border-radius: 20px; border: 1px solid #e9ece9; overflow: hidden; }
.project-visual { height: 225px; padding: 26px 32px 15px; background: #f0f5f1; position: relative; }
.visual-caption { display: block; font: .6875rem/1.5 var(--mono); letter-spacing: .14em; color: #728d7c; }
.project-visual svg { display: block; width: 100%; max-height: 145px; margin: 1px auto; }
.visual-bottom { font: .75rem/1.5 var(--mono); display: block; color: #61816d; }
.behavior-visual { background: #f4f3f0; }
.behavior-flow { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 31px 0 20px; font: .75rem var(--mono); }
.behavior-flow span { padding: 9px 13px; background: white; border: 1px solid #e0e5de; border-radius: 7px; }
.behavior-flow i { color: #98a39b; font-style: normal; }
.behavior-flow .active { border-color: #95b49d; color: var(--green); background: #f7fbf6; }
.behavior-bars { height: 42px; display: flex; gap: 7px; align-items: end; justify-content: center; margin-bottom: 16px; }
.behavior-bars i { display: block; width: 13px; border-radius: 3px 3px 0 0; background: #d0dfd0; height: 14px; }
.behavior-bars i:nth-child(3n) { height: 23px; }
.behavior-bars i:nth-child(n+7) { height: 28px; background: #a8c2af; }
.behavior-bars i:nth-child(n+10) { height: 34px; }
.behavior-bars i:nth-child(n+13) { height: 42px; background: #739b80; }
.project-copy { padding: 32px; }
.project-card h3 { font-size: 1.875rem; letter-spacing: -.04em; font-weight: 600; line-height: 1.18; margin: 13px 0 18px; }
.project-card h3 span { color: #818b84; font-size: 1.5rem; font-weight: 400; }
.project-card p { font-size: 1rem; line-height: 1.85; color: #535f57; }
.project-card .secondary-copy { margin-top: 15px; color: #6b766e; font-size: .875rem; }
.inline-link { display: inline-flex; align-items: center; gap: 12px; color: var(--green); font-size: .875rem; font-weight: 500; margin-top: 24px; }
.inline-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.ai-card { grid-column: 1/-1; display: grid; grid-template-columns: 1fr 1.2fr; align-items: center; gap: 75px; padding: 36px; }
.ai-card h3 { font-size: 2rem; margin-top: 12px; }
.applications { padding: 0; margin: 0; list-style: none; }
.applications li { border-bottom: 1px solid var(--line); padding: 15px 0; font-size: .875rem; display: flex; gap: 17px; align-items: baseline; }
.applications li:last-child { border: 0; }
.applications span { font: .75rem var(--mono); color: #698474; flex: none; }
.soft-text { color: #7b877e; }
.featured-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 19px; }
.featured-card { display: flex; flex-direction: column; border-top: 1px solid #bfd0c2; padding: 22px 23px 0 0; transition: border-color .2s; }
.featured-card:hover { border-top-color: var(--green); }
.featured-card > .eyebrow { font-size: .6875rem; }
.featured-type { color: #727e76; font-size: .8125rem; margin-top: 25px; }
.featured-card h3 { font-size: 1.5rem; line-height: 1.2; letter-spacing: -.025em; font-weight: 500; margin: 8px 0 16px; }
.featured-card p { color: var(--muted); font-size: .875rem; line-height: 1.85; margin-bottom: 27px; }
.featured-footer { display: flex; justify-content: space-between; align-items: center; font-size: .75rem; color: #44664e; margin-top: auto; }
.featured-footer i { background: #f0f4ef; width: 29px; height: 29px; border-radius: 100%; display: grid; place-items: center; font-style: normal; font-size: 1rem; transition: background .2s; }
.featured-card:hover .featured-footer i { background: #dfebde; }
.archive { border: 1px solid #dce4dd; border-radius: 16px; margin-top: 44px; box-shadow: 0 12px 35px -20px #23482c17; overflow: clip; }
.archive > summary { padding: 28px; display: flex; align-items: center; gap: 20px; cursor: pointer; list-style: none; background: #f7faf7; }
.archive > summary::-webkit-details-marker { display: none; }
.archive > summary:hover { background: #f1f6f1; }
.archive-symbol { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; border: 1px solid #d9e2da; color: var(--green); background: #fff; font: 1.125rem var(--mono); flex: none; }
.archive-summary-copy { display: flex; flex-direction: column; gap: 4px; }
.archive-summary-copy strong { font-size: 1.125rem; font-weight: 500; letter-spacing: -.02em; }
.archive-summary-copy > span { font-size: .8125rem; color: #6b7b70; }
.archive-toggle { margin-left: auto; display: flex; align-items: center; gap: 18px; font-size: .8125rem; white-space: nowrap; color: var(--green); }
.archive-toggle i { font-style: normal; font-size: 1.625rem; font-weight: 300; transition: transform .2s; }
.archive[open] > summary .archive-toggle i { transform: rotate(45deg); }
.archive .when-open { display: none; }
.archive[open] .when-open { display: inline; }
.archive[open] .when-closed { display: none; }
.archive-content { border-top: 1px solid #314339; background: #14201b; color: #e8eee9; color-scheme: dark; }
.archive-command { background: #19281f; border-bottom: 1px solid #304036; padding: 15px 32px; color: #bdd4c4; font: .75rem/1.5 var(--mono); min-height: 46px; }
.archive-command > span:first-child { color: #a9d4ae; margin-right: 10px; }
.archive-command .cursor { width: 5px; height: 10px; }
.archive-intro { padding: 36px 36px 20px; }
.archive-intro h3 { font-weight: 500; font-size: 1.625rem; letter-spacing: -.03em; line-height: 1.2; margin-bottom: 12px; }
.archive-intro p { max-width: 760px; font-size: 1rem; color: #b9c9be; }
.publication { padding: 36px; display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 35px; border-bottom: 1px solid #304036; scroll-margin-top: 100px; }
.publication:target { background: #1c2d22; }
.archive[open] .publication { animation: print-record .35s ease both; }
@keyframes print-record { from { opacity: .5; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.archive-content :focus-visible { outline-color: #b9dcb7; }
.archive-content .cursor { background: #c1dbbb; }
.publication-aside { display: flex; align-items: flex-start; flex-direction: column; padding-top: 3px; }
.index { font: .75rem var(--mono); color: #9eb69f; margin-bottom: 21px; }
.kind { font-size: .8125rem; padding: 4px 8px; background: #25382a; color: #c4d9bf; border: 1px solid #3e5441; border-radius: 5px; }
.publication-year { font-size: 1.625rem; letter-spacing: -.04em; font-weight: 500; margin: 13px 0 2px; }
.place { font-size: .8125rem; line-height: 1.5; color: #a7b7a9; max-width: 145px; }
.product-label { display: block; color: #acd0ac; font: .75rem/1.5 var(--mono); letter-spacing: .04em; margin-bottom: 10px; }
.publication h3 { font-size: 1.5rem; font-weight: 500; letter-spacing: -.025em; line-height: 1.25; margin-bottom: 13px; overflow-wrap: anywhere; text-wrap: pretty; }
.publication .authors { font-size: .875rem; color: #d0ddcf; margin-bottom: 3px; }
.publication .publisher { font-size: .8125rem; color: #afc0b0; margin-bottom: 22px; }
.publication-content > p { font-size: 1rem; color: #e0e8df; line-height: 1.9; max-width: 790px; }
.publication-role { margin: 20px 0; padding: 16px 20px; background: #203126; border-left: 2px solid #7e9e7a; border-radius: 0 8px 8px 0; }
.publication-role > span { display: block; margin-bottom: 6px; color: #b8d7b1; font-size: .8125rem; font-weight: 600; }
.publication-role p { font-size: 1rem; line-height: 1.85; color: #e1ebdf; }
.publication-bottom { display: flex; flex-wrap: wrap; gap: 9px 20px; justify-content: space-between; align-items: baseline; }
.relation { color: #adbdad; font-size: .75rem; display: inline-flex; gap: 6px; align-items: center; }
.relation i { width: 4px; height: 4px; border-radius: 100%; background: #6e967a; flex: none; }
.citation-code { font: .75rem/1.7 var(--mono); color: #96aa9b; overflow-wrap: anywhere; }
.originals { margin-top: 17px; display: flex; flex-wrap: wrap; gap: 4px 18px; color: #91a296; font-size: .75rem; }
.originals a { padding: 5px 0; text-decoration: underline; text-decoration-color: #425548; text-underline-offset: 4px; }
.originals a:hover { color: #e2eddf; text-decoration-color: #a5bca5; }
.archive-end { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 36px; background: #19271e; font-size: .8125rem; color: #b0c1b2; }
.archive-end p { max-width: 670px; }
.close-archive { background: none; border: 0; color: #bfd8b8; padding: 7px 0; font-size: .8125rem; white-space: nowrap; }
.close-archive:hover { text-decoration: underline; }
.approach-section { background: var(--paper); }
.approach-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 90px; align-items: start; }
.approach-grid h2 { font-size: 2.8rem; margin: 16px 0 23px; }
.section-description { color: var(--muted); font-size: 1rem; line-height: 1.85; max-width: 410px; }
.approach-code { display: block; font: .8125rem var(--mono); color: #608269; margin-top: 30px; }
.steps { list-style: none; padding: 0; margin: 0; }
.steps li { display: flex; gap: 25px; padding: 23px 0; border-top: 1px solid #dce4dd; }
.steps li > span { font: .75rem var(--mono); color: #7b9684; padding-top: 5px; }
.steps h3 { font-size: 1.375rem; font-weight: 500; letter-spacing: -.025em; margin-bottom: 8px; line-height: 1.3; }
.steps p { font-size: 1rem; color: #6b776e; line-height: 1.8; }
.collaboration-section { background: var(--paper); padding: 0 0 100px; }
.collaboration-panel { border-top: 1px solid #dce4dd; padding-top: 50px; }
.collaboration-panel h2 { font-size: 2rem; margin: 15px 0 20px; }
.collaboration-panel p { color: var(--muted); font-size: 1rem; max-width: 780px; margin-top: 12px; }
.contact-section { text-align: center; }
.contact-section h2 { font-size: clamp(2rem,4.2vw,3.6rem); margin: 22px auto 30px; max-width: 850px; }
.contact-mail { font-size: clamp(1.3rem,2.8vw,2.1rem); color: var(--green); letter-spacing: -.035em; }
.contact-mail span { display: inline-block; transition: transform .2s; padding-left: 8px; }
.contact-mail:hover span { transform: translate(3px,-3px); }
.contact-section p { color: #7d897f; font-size: .875rem; margin-top: 12px; }
footer { border-top: 1px solid var(--line); padding: 29px 0; }
.footer-row { display: flex; justify-content: space-between; align-items: center; gap: 30px; }
.footer-row .brand { font-size: 1.375rem; }
.footer-row p { font-size: .75rem; color: #77857b; line-height: 1.9; }
.footer-code { font: .75rem var(--mono); color: #6b8774; }
.footer-code span { color: var(--green); }
@media (min-width: 1500px) { .hero { padding-top: 108px; } }
@media (max-width: 950px) {
  .hero-showcase { gap: 25px; }
  .section-heading { gap: 30px; }
  .section-heading > p { max-width: 320px; }
  .project-copy { padding: 27px; }
  .ai-card { gap: 35px; }
  .featured-card h3 { font-size: 1.375rem; }
  .featured-card { padding-right: 7px; }
  .archive > summary { padding: 23px; gap: 13px; }
  .archive-summary-copy > span { max-width: 360px; }
  .archive-toggle { gap: 10px; }
  .publication { grid-template-columns: 125px minmax(0,1fr); gap: 25px; padding: 28px; }
  .approach-grid { gap: 45px; }
  .approach-grid h2 { font-size: 2.3rem; }
}
@media (max-width: 720px) {
  .wrap { width: calc(100% - 40px); }
  .section { padding: 76px 0; }
  .navigation { height: 66px; }
  nav { gap: 15px; font-size: .8125rem; }
  nav .nav-contact { padding: 7px 12px; }
  .hero { padding-top: 67px; }
  .hero h1 { font-size: 58px; }
  .hero-description { font-size: 1rem; max-width: 550px; }
  .hero-showcase { grid-template-columns: .65fr 1fr; gap: 15px; }
  .experience { padding-left: 0; }
  .experience-number { font-size: 75px; }
  .experience h2 { font-size: 1.375rem; }
  .experience .eyebrow { font-size: .6875rem; }
  .tiny-code { font-size: .6875rem; }
  .lab-body { padding: 18px 16px 0; }
  .lab-code { font-size: .75rem; }
  .lab-code p { gap: 10px; }
  .command { font-size: .75rem; }
  .lab-footer { font-size: .6875rem; }
  .recognition-strip { gap: 14px; }
  .recognition-strip > span { font-size: .6875rem; }
  .recognition-strip a { font-size: .75rem; }
  .recognition-strip b { font-size: .8125rem; }
  .section-heading { flex-direction: column; align-items: start; gap: 20px; }
  .section-heading > p { max-width: 480px; font-size: 1rem; }
  h2 { font-size: 2.5rem; }
  .project-grid { gap: 13px; }
  .project-visual { padding: 22px 18px 14px; height: 205px; }
  .visual-caption { font-size: .6875rem; }
  .project-card h3 { font-size: 1.75rem; }
  .project-card h3 span { display: block; font-size: 1.25rem; margin-top: 5px; }
  .project-copy { padding: 24px; }
  .project-card p { font-size: 1rem; }
  .behavior-flow { gap: 5px; font-size: .6875rem; margin-top: 35px; }
  .behavior-flow span { padding: 7px; }
  .behavior-bars { gap: 5px; margin-top: 24px; }
  .behavior-bars i { width: 9px; }
  .visual-bottom { font-size: .6875rem; }
  .ai-card { grid-template-columns: 1fr; padding: 28px; gap: 18px; }
  .featured-grid { gap: 18px; }
  .featured-card .eyebrow { font-size: .6875rem; }
  .featured-card h3 { font-size: 1.25rem; }
  .featured-card p { font-size: .8125rem; }
  .featured-footer { gap: 6px; font-size: .75rem; }
  .featured-footer i { flex: none; }
  .archive-summary-copy > span { font-size: .75rem; max-width: 260px; }
  .archive-summary-copy strong { font-size: 1rem; }
  .archive-toggle > span { display: none !important; }
  .archive-intro { padding-left: 25px; padding-right: 25px; }
  .archive-command { padding-left: 25px; font-size: .75rem; }
  .publication { grid-template-columns: 1fr; gap: 17px; padding: 29px 25px; }
  .publication-aside { flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap; }
  .index { margin: 0 4px 0 0; }
  .publication-year { font-size: 1rem; margin: 0; }
  .place { font-size: .75rem; max-width: none; }
  .publication h3 { font-size: 1.5rem; }
  .publication-role { padding: 14px 16px; }
  .publication-bottom { display: block; }
  .citation-code { display: block; margin-top: 6px; }
  .archive-end { padding: 20px 25px; align-items: start; }
  .approach-grid { grid-template-columns: 1fr; gap: 35px; }
  .collaboration-section { padding-bottom: 76px; }
}
@media (max-width: 540px) {
  .brand { font-size: 1.5rem; }
  .hero { padding-top: 55px; }
  .hero-eyebrow { font-size: .6875rem; letter-spacing: .08em; }
  .hero h1 { font-size: clamp(39px, 10.3vw, 54px); margin: 23px 0 20px; }
  .hero-description { font-size: 1rem; line-height: 1.8; max-width: 350px; }
  .desktop-break { display: none; }
  .hero-actions { gap: 5px; margin-top: 22px; }
  .button { font-size: .8125rem; padding: 12px 18px; gap: 12px; }
  .hero-showcase { display: flex; flex-direction: column; margin: 39px auto 35px; gap: 28px; max-width: 430px; }
  .experience { width: 100%; display: grid; grid-template-columns: auto 1fr; column-gap: 20px; align-items: center; text-align: left; padding: 0 8px; }
  .experience > .eyebrow { grid-column: 2; grid-row: 1; align-self: end; }
  .experience-number { grid-column: 1; grid-row: 1/4; font-size: 76px; margin: 0; }
  .experience-number span { font-size: 1.375rem; margin-left: 8px; }
  .experience h2 { grid-column: 2; font-size: 1.5rem; }
  .experience p { grid-column: 2; font-size: .75rem; margin: 1px 0 0; align-self: start; }
  .experience p br { display: none; }
  .tiny-code { display: none; }
  .lab-window { width: 100%; transform: none; border-radius: 12px; }
  .lab-body { padding: 19px 23px 0; }
  .lab-code { font-size: .8125rem; margin: 19px 0; }
  .lab-code p { gap: 15px; }
  .command { font-size: .75rem; }
  .lab-footer { font-size: .6875rem; }
  .recognition-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; text-align: center; padding: 22px 0 29px; }
  .recognition-strip > span { grid-column: 1/-1; font-size: .75rem; }
  .recognition-strip > span br { display: none; }
  .recognition-strip a { font-size: .75rem; }
  .recognition-strip b { font-size: 1rem; }
  .project-grid, .featured-grid { grid-template-columns: 1fr; }
  .project-visual { height: 215px; padding-left: 26px; padding-right: 26px; }
  .project-visual svg { height: 143px; }
  .visual-caption { font-size: .6875rem; }
  .visual-bottom { font-size: .6875rem; }
  .behavior-flow { font-size: .75rem; gap: 10px; margin-top: 32px; }
  .behavior-flow span { padding: 8px 12px; }
  .behavior-bars { margin-top: 15px; }
  .project-card h3 span { display: inline; }
  .project-copy { padding: 27px; }
  .project-card p { font-size: 1rem; }
  .ai-card { padding: 27px; }
  .ai-card h3 { font-size: 1.875rem; }
  .applications li { font-size: .875rem; gap: 13px; }
  .featured-grid { gap: 28px; }
  .featured-card { padding: 20px 0 0; }
  .featured-card h3 { font-size: 1.625rem; margin-bottom: 12px; }
  .featured-card h3 br { display: none; }
  .featured-type { margin-top: 14px; }
  .featured-card .eyebrow { font-size: .75rem; }
  .featured-card p { font-size: 1rem; margin-bottom: 14px; }
  .featured-footer { font-size: .8125rem; }
  .archive { margin-top: 35px; border-radius: 13px; }
  .archive > summary { padding: 19px 15px; gap: 11px; }
  .archive-symbol { width: 33px; height: 36px; border-radius: 7px; font-size: 1rem; }
  .archive-summary-copy strong { font-size: 1rem; }
  .archive-summary-copy > span { font-size: .75rem; max-width: 220px; }
  .archive-command { padding: 13px 18px; font-size: .6875rem; }
  .archive-command > span:first-child { display: block; margin-bottom: 4px; }
  .archive-intro { padding: 25px 19px 17px; }
  .archive-intro h3 { font-size: 1.625rem; }
  .archive-intro p { font-size: .875rem; }
  .publication { padding: 27px 19px; }
  .publication h3 { font-size: 1.5rem; }
  .publication-content > p, .publication-role p { font-size: 1rem; }
  .publication-role { padding: 13px 14px; }
  .originals { gap: 4px 14px; }
  .originals a { padding: 8px 0; }
  .archive-end { flex-direction: column; gap: 13px; padding: 22px 19px; }
  .close-archive { padding: 10px 0; }
  .approach-grid h2 { font-size: 2.25rem; }
  .collaboration-panel h2 { font-size: 2rem; }
  .contact-section > .wrap > .eyebrow { font-size: .6875rem; }
  .contact-section h2 { font-size: 2.2rem; }
  .contact-mail { font-size: 1.625rem; }
  .footer-row { flex-wrap: wrap; gap: 16px; }
  .footer-row p { text-align: right; }
  .footer-code { width: 100%; text-align: center; padding-top: 12px; border-top: 1px solid #edf0ed; }
  /* Without JavaScript, mobile navigation remains fully accessible. */
  nav { flex-wrap: wrap; justify-content: end; font-size: .75rem; gap: 2px 12px; }
  nav .nav-contact { padding: 3px 7px; }
  .js .menu-toggle { display: block; flex: none; }
  .js nav { display: none; position: absolute; top: 65px; left: 0; right: 0; padding: 14px 20px 22px; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 15px 25px #244b3108; }
  .js nav.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .js nav a { padding: 12px 4px; font-size: 1rem; }
  .js nav .nav-contact { margin-top: 10px; padding: 10px 14px; text-align: center; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  .site-header, .hero-actions, .archive-command, .close-archive { display: none !important; }
  .section { padding: 30px 0; }
  .wrap { width: 100%; }
  .publication { break-inside: avoid; }
}

/* Finishing layer: light, depth and precise motion. */
.hero { position: relative; isolation: isolate; overflow: clip; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(#315c3c06 1px,transparent 1px),linear-gradient(90deg,#315c3c06 1px,transparent 1px); background-size: 58px 58px; mask-image: radial-gradient(ellipse at 50% 52%,#000,transparent 68%); }
.hero::after { content: ""; position: absolute; width: min(780px,90vw); height: 520px; top: 160px; left: 50%; z-index: -1; pointer-events: none; border-radius: 50%; background: radial-gradient(ellipse,#d8e9d670,transparent 70%); filter: blur(40px); transform: translateX(-50%); animation: studio-light 10s ease-in-out 2 alternate; }
@keyframes studio-light { to { transform: translate(-45%,35px) scale(1.12); opacity: .6; } }
.hero h1 > span { background: linear-gradient(115deg,#244d36,#52865b 52%,#244d36); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lab-window { transform: perspective(1200px) rotateX(var(--tilt-x,2deg)) rotateY(var(--tilt-y,-3deg)); transition: transform .25s ease-out, box-shadow .5s; }
.lab-window:hover { box-shadow: 0 38px 65px -28px #41564b52,0 2px 6px #1c3e2305; }
.lab-modes { display: flex; gap: 5px; margin-top: 20px; }
.lab-modes button { padding: 7px 10px; border-radius: 6px; border: 1px solid transparent; background: transparent; color: #6d8173; font: .75rem var(--mono); transition: background .2s,color .2s; }
.lab-modes button[aria-pressed="true"] { border-color: #dce6dd; color: #28593b; background: #f0f6f0; }
.lab-modes button:hover { color: #24482f; background: #f6f8f5; }
.lab-modes .lab-autoplay { margin-left: auto; font-size: .875rem; min-width: 28px; padding: 4px; }
#lab-canvas { width: 100%; height: 145px; display: block; }
.lab-readout { display: flex; flex-direction: column; gap: 8px; font: .75rem/1.5 var(--mono); color: #41634b; padding-bottom: 17px; }
.lab-readout small { color: #849388; font-size: .6875rem; letter-spacing: .07em; }
.project-card { position: relative; transition: box-shadow .4s,border-color .4s; }
.project-card:hover { border-color: #cadaca; box-shadow: 0 20px 45px -26px #294e3725; }
.project-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(350px circle at var(--light-x,50%) var(--light-y,0%),#d1e8cf25,transparent 65%); opacity: 0; transition: opacity .4s; }
.project-card:hover::after { opacity: 1; }
.section-heading.motion-ready, .featured-card.motion-ready, .project-card.motion-ready, .approach-grid.motion-ready { transition: opacity .8s,transform .8s,filter .8s; }
.motion-ready:not(.in-view) { opacity: 0; transform: translateY(22px); filter: blur(3px); }
.motion-ready.in-view { opacity: 1; transform: translateY(0); filter: blur(0); }
@media (max-width: 540px) { .lab-window { transform: none !important; } .lab-modes { gap: 3px; } .lab-modes button { font-size: .6875rem; padding: 8px; min-height: 34px; } }
@media (max-width: 380px) { .lab-modes { gap: 2px; } .lab-modes button { font-size: .6875rem; padding: 7px 4px; } }
@media (prefers-reduced-motion: reduce) { .motion-ready:not(.in-view) { opacity: 1; transform: none; filter: none; } .hero::after { animation: none; } .lab-window { transform: none; } }
/* Readable at 100% zoom: fluid type, wider layouts, comfortable line lengths. */
:root { --muted: #58645d; }
html { scroll-padding-top: 104px; }
.navigation { height: clamp(74px, 5vw, 94px); }
.brand { font-size: 1.65rem; flex: none; }
nav { font-size: .875rem; }
.hero-description { font-size: 1.2rem; max-width: 48ch; line-height: 1.7; }
.hero-eyebrow { font-size: .75rem; }
.hero-actions .button { font-size: .95rem; min-height: 50px; padding: 14px 25px; }
.hero-showcase { grid-template-columns: .7fr 1.3fr; }
.experience-number { font-size: clamp(90px, 7.5vw, 132px); }
.experience h2 { font-size: 1.75rem; }
.experience p { font-size: .95rem; max-width: 28ch; }
.experience > .eyebrow { font-size: .75rem; }
.tiny-code { font-size: .75rem; }
.window-chrome { height: 48px; font-size: .75rem; }
.lab-body { padding: 25px 28px 0; }
.command { font-size: .85rem; white-space: normal; overflow-wrap: anywhere; }
.lab-code { font-size: .875rem; }
.lab-code p { white-space: pre-wrap; overflow-wrap: anywhere; }
.lab-footer { font-size: .75rem; }
.lab-modes { flex-wrap: wrap; gap: 7px; }
.lab-modes button { font-size: .75rem; min-height: 42px; padding: 8px 10px; }
.lab-modes .lab-autoplay { font-size: 1rem; min-width: 36px; }
#lab-canvas { height: clamp(170px, 12vw, 220px); }
.lab-readout { font-size: .875rem; }
.lab-readout small { font-size: .6875rem; }
.recognition-strip { padding-top: 35px; padding-bottom: 35px; }
.recognition-strip > span { font-size: .8rem; }
.recognition-strip a { font-size: .875rem; }
.recognition-strip b { font-size: 1.05rem; }
.section-heading > p { max-width: 40ch; font-size: 1rem; line-height: 1.75; }
.project-copy { padding: clamp(27px, 2.5vw, 46px); }
.project-card p, .featured-card p, .applications li { font-size: 1rem; line-height: 1.75; }
.project-card .secondary-copy { font-size: .9rem; }
.inline-link { font-size: .95rem; min-height: 44px; }
.project-visual { height: 260px; }
.project-visual svg { max-height: 170px; height: 170px; }
.visual-caption, .visual-bottom { font-size: .6875rem; }
.behavior-flow { font-size: .875rem; }
.featured-card h3 { font-size: clamp(1.5rem, 1.9vw, 2rem); }
.featured-card .eyebrow { font-size: .7rem; }
.featured-type, .featured-footer { font-size: .875rem; }
.archive-summary-copy { min-width: 0; }
.archive-summary-copy strong { font-size: 1.3rem; }
.archive-summary-copy > span { font-size: .875rem; }
.archive-toggle { font-size: .9rem; }
.archive-intro p { max-width: 75ch; font-size: 1rem; }
.archive-command { font-size: .85rem; }
.publication { grid-template-columns: clamp(145px, 12vw, 205px) minmax(0, 1fr); padding: clamp(32px, 3vw, 50px); gap: clamp(30px, 3vw, 56px); }
.publication-content { max-width: 80ch; min-width: 0; }
.publication h3 { font-size: clamp(1.5rem, 1.9vw, 2rem); }
.publication-content > p, .publication-role p { font-size: 1rem; line-height: 1.8; max-width: 75ch; }
.publication .authors { font-size: .9rem; }
.publication .publisher { font-size: .85rem; }
.publication-role { padding: 20px 24px; }
.publication-role > span, .kind, .place { font-size: .8rem; }
.product-label, .relation { font-size: .75rem; }
.originals { font-size: .75rem; }
.originals a { padding: 8px 0; }
.citation-code { font-size: .7rem; }
.archive-end, .close-archive { font-size: .875rem; }
.section-description { max-width: 42ch; font-size: 1rem; }
.steps p, .collaboration-panel p { font-size: 1rem; line-height: 1.75; }
.collaboration-panel p { max-width: 80ch; }
.contact-section p { font-size: 1rem; }
.footer-row p, .footer-code { font-size: .75rem; }
@media (min-width: 1800px) {
  .hero-showcase { max-width: 1360px; gap: 90px; }
  .hero-description { max-width: 52ch; }
  .section { padding: 130px 0; }
  .project-grid, .featured-grid { gap: 30px; }
}
@media (max-width: 1000px) {
  .wrap { width: calc(100% - 48px); }
  nav { gap: 20px; }
  .hero-showcase { gap: 28px; }
  .experience { padding-left: 8px; }
  .section-heading { align-items: start; }
  .section-heading > p { max-width: 33ch; }
  .featured-grid { gap: 23px; }
}
@media (max-width: 820px) {
  .navigation { min-height: 72px; height: auto; padding: 10px 0; }
  .js .menu-toggle { display: block; flex: none; }
  .js nav { display: none; position: absolute; top: 71px; left: 0; right: 0; padding: 14px 24px 23px; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 15px 25px #244b3108; }
  .js nav.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .js nav a { padding: 13px 4px; font-size: 1rem; }
  .js nav .nav-contact { margin-top: 8px; text-align: center; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
  .section-heading { flex-direction: column; gap: 22px; }
  .section-heading > p { max-width: 55ch; }
  .hero-showcase { display: flex; flex-direction: column; max-width: 620px; gap: 34px; }
  .experience { width: 100%; display: grid; grid-template-columns: auto 1fr; column-gap: 26px; text-align: left; padding: 0 10px; }
  .experience-number { grid-column: 1; grid-row: 1/4; margin: 0; font-size: 100px; }
  .experience > .eyebrow { grid-column: 2; grid-row: 1; align-self: end; }
  .experience h2 { grid-column: 2; }
  .experience p { grid-column: 2; align-self: start; margin-top: 3px; max-width: 35ch; }
  .experience p br { display: none; }
  .tiny-code { display: none; }
  .lab-window { width: 100%; transform: none; }
  .project-grid, .featured-grid { grid-template-columns: 1fr; }
  .ai-card { grid-template-columns: 1fr; gap: 24px; }
  .featured-card { padding-right: 0; }
  .featured-card h3 br { display: none; }
  .featured-card p { max-width: 62ch; }
  .featured-grid { gap: 35px; }
  .archive-summary-copy > span { max-width: none; }
  .archive-toggle > span { display: none !important; }
  .publication { grid-template-columns: 1fr; gap: 23px; padding: 30px; }
  .publication-aside { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; }
  .index { margin: 0 4px 0 0; }
  .publication-year { font-size: 1.1rem; margin: 0; }
  .place { max-width: none; }
  .approach-grid { grid-template-columns: 1fr; gap: 36px; }
  .recognition-strip { flex-wrap: wrap; gap: 22px; }
  .recognition-strip > span { width: 100%; }
  .recognition-strip > span br { display: none; }
}
@media (max-width: 540px) {
  .wrap { width: calc(100% - 36px); }
  .hero { padding-top: 44px; }
  .hero h1 { font-size: clamp(2.15rem, 10.3vw, 3.5rem); }
  .hero-description { font-size: 1.0625rem; line-height: 1.75; max-width: none; }
  .hero-actions .button { font-size: .9375rem; }
  .hero-eyebrow { font-size: .6875rem; letter-spacing: .04em; gap: 8px; }
  .hero-showcase { margin-top: 38px; gap: 28px; }
  .experience { padding: 0; column-gap: 15px; }
  .experience-number { font-size: 80px; }
  .experience-number span { font-size: 1.2rem; margin-left: 8px; }
  .experience h2 { font-size: 1.45rem; }
  .experience p { font-size: .875rem; }
  .experience > .eyebrow { font-size: .6875rem; }
  .lab-body { padding: 20px 17px 0; }
  .window-chrome { padding: 0 12px; gap: 8px; font-size: .6875rem; }
  .window-shortcut { display: none; }
  .command, .lab-code { font-size: .75rem; }
  .lab-code p { gap: 8px; }
  .lab-modes { gap: 4px; }
  .lab-modes button { font-size: .75rem; padding: 7px 8px; min-height: 42px; }
  .mode-index { display: none; }
  .lab-modes .lab-autoplay { min-width: 32px; padding: 4px; }
  #lab-canvas { height: 180px; }
  .lab-readout { font-size: .8125rem; }
  .lab-footer { font-size: .6875rem; }
  .recognition-strip { display: grid; grid-template-columns: 1fr 1fr; }
  .recognition-strip > span { grid-column: 1/-1; }
  .recognition-strip a { font-size: .875rem; }
  .recognition-strip b { font-size: 1rem; }
  .section { padding: 70px 0; }
  .section-heading h2, .approach-grid h2 { font-size: 2.25rem; }
  .project-copy, .ai-card { padding: 26px; }
  .project-card h3 { font-size: 1.875rem; }
  .project-card h3 span { font-size: 1.4rem; }
  .project-card p, .featured-card p, .applications li { font-size: 1rem; }
  .project-visual { padding: 22px; height: 245px; }
  .visual-caption, .visual-bottom { font-size: .6875rem; letter-spacing: .02em; }
  .behavior-flow { font-size: .75rem; gap: 7px; }
  .behavior-flow span { padding: 8px; }
  .featured-card h3 { font-size: 1.7rem; }
  .featured-card .eyebrow { font-size: .7rem; }
  .archive > summary { gap: 10px; padding: 22px 14px; flex-wrap: wrap; }
  .archive-summary-copy { flex: 1; }
  .archive-summary-copy strong { font-size: 1.1rem; }
  .archive-summary-copy > span { font-size: .8125rem; }
  .archive-toggle { flex: none; margin-left: 0; }
  .archive-symbol { width: 32px; }
  .archive-command { font-size: .75rem; padding: 14px 18px; }
  .archive-command > span:first-child { display: block; }
  .archive-intro h3 { font-size: 1.6rem; }
  .archive-intro p { font-size: 1rem; }
  .publication { padding: 29px 18px; }
  .publication h3 { font-size: 1.5rem; }
  .publication-content > p, .publication-role p { font-size: 1rem; }
  .publication-role { padding: 16px; margin: 20px 0; }
  .publication .authors, .publication .publisher { font-size: .875rem; }
  .publication-aside { gap: 9px; }
  .publication-bottom { display: block; }
  .kind, .place { font-size: .75rem; }
  .archive-end { padding: 22px 18px; }
  .contact-section h2 { font-size: 2.2rem; }
  .contact-section > .wrap > .eyebrow { font-size: .6875rem; }
  .footer-row { gap: 20px; }
  .footer-row p { font-size: .75rem; }
  .footer-code { font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) { .lab-window { transform: none; } }