@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=DM+Sans:wght@400;450;500;600&display=swap');

/* Shared framework: a 4/8px rhythm, three heading levels, one reading width. */
:root {
  --paper: #e3d0ad;
  --paper-light: #f0dfc1;
  --surface: #f0dfc1;
  --ink: #293e36;
  --muted: #5c5545;
  --clay: #8b4430;
  --gold: #ac8143;
  --line: #7c6b4655;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'DM Sans', Arial, sans-serif;
  --text-meta: .875rem;
  --text-body: 1rem;
  --text-lead: 1.25rem;
  --text-small-title: clamp(1.75rem, 2.3vw, 2.125rem);
  --text-feature: clamp(2.125rem, 3.35vw, 3.25rem);
  --text-section: clamp(2.625rem, 4.4vw, 4.25rem);
  --text-display: clamp(3.75rem, 6.7vw, 6.25rem);
  --text-art: clamp(2.75rem, 3vw, 4.75rem);
  --text-art-note: clamp(2.5rem, 3vw, 3.8125rem);
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --section-space: clamp(4rem, 7vw, 7rem);
  --gutter: clamp(1.5rem, 6vw, 6rem);
  --content: 76rem;
  --column-gap: clamp(2rem, 5vw, 5rem);
  --page-inset: max(var(--gutter), calc((100% - var(--content)) / 2));
  --tile: url('assets/floral-tile.webp');
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 2rem; }
body { margin: 0; background: var(--paper-light); color: var(--ink); font: 400 var(--text-body)/1.75 var(--sans); overflow-x: clip; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
h1, h2, h3, h4, p { margin: 0 0 var(--space-6); }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; text-wrap: balance; overflow-wrap: anywhere; }
h1 { font-size: var(--text-display); line-height: 1.02; letter-spacing: -.035em; }
h2 { font-size: var(--text-section); line-height: 1.09; letter-spacing: -.025em; }
h3 { font-size: var(--text-feature); line-height: 1.13; letter-spacing: -.02em; }
h4 { font-size: var(--text-small-title); line-height: 1.2; letter-spacing: -.015em; }
p { max-width: 65ch; }
em { color: var(--clay); font-weight: 400; }
strong { font-weight: 600; }
::selection { background: var(--clay); color: #fff5df; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--clay); outline-offset: 5px; }
:is(.journey, .craft) :is(a, button, summary):focus-visible { outline-color: #f1d19a; }
a, button, summary { -webkit-tap-highlight-color: transparent; }
.skip-link { position: fixed; top: -10rem; left: 1rem; padding: 1rem; background: var(--surface); z-index: 150; }
.skip-link:focus { top: 1rem; }
.paper-grain { position: fixed; inset: 0; z-index: 80; pointer-events: none; opacity: .08; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23776348' filter='url(%23n)' opacity='.32' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); }
.reading-progress { position: fixed; top: 0; left: 0; z-index: 100; width: 100%; height: 3px; background: var(--gold); transform: scaleX(0); transform-origin: left; }
.section { padding: var(--section-space) var(--page-inset); position: relative; }
:is(.roots-layout, .journey-layout, .project, .publications-layout, .education, .approach, .languages) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--column-gap); align-items: start; }
:is(.roots-layout, .journey-layout, .project, .publications-layout, .education, .approach, .languages) > * { min-width: 0; }

/* Navigation and a quiet opening spread. No text sits on the portrait. */
.site-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); margin-inline: var(--page-inset); padding-block: var(--space-6); border-bottom: 1px solid var(--line); }
.wordmark { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; font-size: var(--text-body); }
.monogram { font: italic 2.5rem/1 var(--serif); letter-spacing: -.1em; }
.site-header nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-6); font-size: var(--text-meta); }
.site-header nav a { padding-block: var(--space-2); border-bottom: 1px solid transparent; }
.site-header nav a:hover { border-color: var(--clay); }
.header-actions { display: flex; align-items: center; gap: var(--space-6); flex-shrink: 0; }
.print-button { border: 0; border-bottom: 1px solid var(--line); background: none; padding: .5rem 0; font-size: var(--text-meta); }
.cv-download { border: 1px solid var(--line); padding: .5rem .875rem; font-size: var(--text-meta); white-space: nowrap; }
.cv-download span { margin-left: var(--space-2); }
.cv-download:hover { background: #d8c39e; }
.hero { position: relative; }
.hero-stage { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: var(--column-gap); padding: var(--space-12) var(--page-inset) var(--space-16); }
.hero-copy { padding-block: var(--space-10); }
.hero h1 { margin-bottom: var(--space-8); }
.hero-role { font-size: var(--text-lead); max-width: 24ch; line-height: 1.6; color: var(--muted); margin-bottom: var(--space-10); }
.enter-story { display: inline-flex; align-items: center; gap: var(--space-6); font-size: var(--text-body); }
.circle-arrow { width: 2.75rem; height: 2.75rem; border: 1px solid #8a7756; border-radius: 50%; display: grid; place-items: center; transition: background .25s, transform .25s; }
.enter-story:hover .circle-arrow { background: #dbc49b; transform: translateY(3px); }
.hero-art { background: #eadcc0; border: 1px solid #9a81534d; box-shadow: 0 12px 26px #69503112; }
.hero-art img { width: 100%; height: auto; }
.hero-art-edge-fade { background: transparent; border-color: transparent; box-shadow: none; }
.hero-art-edge-fade img {
  --hero-edge-fade: 25px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--hero-edge-fade), #000 calc(100% - var(--hero-edge-fade)), transparent), linear-gradient(to bottom, transparent, #000 var(--hero-edge-fade), #000 calc(100% - var(--hero-edge-fade)), transparent);
  -webkit-mask-composite: source-in;
  -webkit-mask-repeat: no-repeat;
  mask-image: linear-gradient(to right, transparent, #000 var(--hero-edge-fade), #000 calc(100% - var(--hero-edge-fade)), transparent), linear-gradient(to bottom, transparent, #000 var(--hero-edge-fade), #000 calc(100% - var(--hero-edge-fade)), transparent);
  mask-composite: intersect;
  mask-repeat: no-repeat;
}
.chapter-rail { position: fixed; z-index: 60; left: .75rem; top: 35%; display: flex; flex-direction: column; gap: .5rem; opacity: 0; pointer-events: none; transition: opacity .3s; }
.chapter-rail.visible { opacity: 1; pointer-events: auto; }
.chapter-rail a { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: #eaddc2f5; border: 1px solid #a99167; color: #5a4a33; font-size: .75rem; }
.chapter-rail a.active { background: var(--ink); color: var(--paper-light); }
.tile-frieze { height: 5rem; border-block: 3px double #967747; overflow: hidden; background: #d4bd93; }
.tile-frieze > div { height: 100%; width: calc(100% + 700px); margin-left: -350px; background: url('assets/geometric-stars.webp') 0 center/185px; filter: saturate(.6); }
.frieze-wide { height: 5rem; }
.frieze-wide > div { background-image: url('assets/tile-sampler_small.webp'); background-size: 600px; }

/* The existing landscape and correspondence, aligned to the same columns. */
.roots { background: linear-gradient(115deg, #e0cdab, var(--paper-light)); }
.roots-layout { align-items: center; }
.roots-art { padding: .5rem; }
.landscape-frame { position: relative; aspect-ratio: .84; overflow: hidden; border-radius: 48% 48% 0 0 / 31% 31% 0 0; background: #d8c8a8; border: 1px solid #a98a58; box-shadow: 0 0 0 7px #cbb58c, 0 0 0 8px #ad9060; }
.landscape-frame img { position: absolute; width: 100%; height: 116%; top: -8%; object-fit: cover; object-position: 30% center; mix-blend-mode: multiply; }
/* Paint the inset above the artwork, so child images cannot hide the shadow. */
.landscape-frame, .project-art { isolation: isolate; }
.landscape-frame::after, .project-art::after, .contact-door::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 44px #000; pointer-events: none; z-index: 3; }
.art-caption { position: absolute; right: 1.5rem; bottom: 1.5rem; padding: 1rem 1.25rem; background: #efe2c9f5; color: var(--ink); text-align: right; font: 500 var(--text-small-title)/1.15 var(--serif); }
.roots-letter { padding: var(--space-10); background: #eddfc3 url('assets/correspondence-paper.webp') center/cover; border: 1px solid #bea57d66; box-shadow: 6px 12px 24px #74593316; }
.roots-letter h2 { font-size: var(--text-feature); }
.lead { font: 500 clamp(1.5rem, 2.1vw, 1.875rem)/1.4 var(--serif); }
.roots-letter > p:not(.lead), .roots-notes p { color: var(--muted); }
dl { margin: var(--space-8) 0; }
dt { font: 500 var(--text-meta)/1.6 var(--sans); color: var(--muted); margin-bottom: var(--space-2); }
dd { margin: 0; font-size: var(--text-body); line-height: 1.6; }
.personal-details, .project-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.personal-details { padding-top: var(--space-6); border-top: 1px solid var(--line); }
.signature { font: italic 2rem/1.2 var(--serif); color: var(--clay); }
.profile-milestones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); margin-top: var(--space-16); padding: var(--space-8) 0; border-block: 1px solid var(--line); }
.profile-milestones > div + div { padding-left: var(--space-8); border-left: 1px solid var(--line); }
.profile-milestones strong { display: block; font: 500 var(--text-feature)/1.15 var(--serif); color: var(--clay); margin-bottom: var(--space-3); }
.profile-milestones span { font-size: var(--text-meta); }
.roots-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-10); margin-top: var(--space-12); }
.roots-notes > div > span { font: italic 1.5rem/1.2 var(--serif); color: var(--clay); }
.roots-notes h3 { font-size: var(--text-small-title); margin: var(--space-4) 0; }
.roots-notes p { margin-bottom: 0; }

/* Stack on laptops too; tall cards pin only after their full height is readable. */
.journey { background: #704238; color: #f4e5c8; }
.journey em, .craft em { color: #efd09d; }
.journey-intro, .publications-intro { position: sticky; top: var(--space-12); }
.journey-intro { top: min(var(--space-12), calc(100svh - var(--sticky-height, 0px) - var(--space-6))); }
.journey-intro > p { color: #ecdbc1; }
.journey-counter { display: flex; align-items: center; gap: var(--space-6); margin-top: var(--space-10); }
.journey-counter > span:first-child { font: 500 4rem/1 var(--serif); }
.journey-counter > span:last-child { font-size: var(--text-meta); }
.counter-line { height: 1px; width: 6rem; background: #dbbe9377; position: relative; }
.counter-line:after { content: ''; position: absolute; inset: 0; background: #f2d8b0; transform: scaleX(var(--career-progress, 0)); transform-origin: left; }
.journey-caption { display: block; margin-top: var(--space-4); font-size: var(--text-meta); color: #ecdbc1; }
.journey-ornament { width: 10rem; margin-top: var(--space-10); border: 4px solid #57372d; box-shadow: 0 0 0 1px #ba996655; }
.journey-ornament img { width: 100%; height: auto; }
.career-stack { display: flex; flex-direction: column; gap: clamp(3rem, 12svh, 6rem); padding-bottom: var(--space-16); }
.career-card { position: sticky; top: min(calc(2rem + var(--index) * 1.5rem), calc(100svh - var(--sticky-height, 0px) - var(--space-6))); z-index: calc(2 + var(--index)); padding: var(--space-10); color: var(--ink); background: #e8d5b3 url('assets/correspondence-paper.webp') center/cover; border: 1px solid #baa077; box-shadow: 0 14px 32px #2817152b; }
.career-card { rotate: var(--card-rotation, -1.1deg); transform-origin: 50% 10%; }
.career-card:nth-child(2) { --card-rotation: .9deg; }
.career-card:nth-child(3) { --card-rotation: -.6deg; }
.career-card:nth-child(4) { --card-rotation: 1.2deg; }
.career-card h3 { margin-bottom: var(--space-6); }
.career-card h3 em { color: var(--clay); }
.career-date, .career-company { font-size: var(--text-meta); line-height: 1.65; color: #5b4b37; }
.career-date { display: block; margin-bottom: var(--space-3); }
.career-company { font-weight: 500; }
.career-card > p:not(.career-company), .career-details ul { color: var(--muted); }
.career-stack.is-expanded .career-card { position: relative; top: auto; }
.career-details, .project-details, .lab-note details { border-top: 1px solid var(--line); margin-top: var(--space-6); }
summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); list-style: none; cursor: pointer; font-size: var(--text-meta); padding: var(--space-4) 0; min-height: 3rem; }
summary::-webkit-details-marker { display: none; }
summary > span { font-size: 1.5rem; transition: rotate .25s; }
details[open] summary > span { rotate: 45deg; }
.career-details ul { padding-left: var(--space-6); }
.career-details li { margin-bottom: var(--space-3); }
.card-footnote { display: block; border-top: 1px solid var(--line); padding-top: var(--space-6); margin-top: var(--space-4); font: italic 1.25rem/1.5 var(--serif); color: #664b31; }
.education, .approach, .languages { margin-top: var(--space-16); padding-top: var(--space-16); border-top: 1px solid #dbc6a355; }
.education-records article { padding-bottom: var(--space-8); margin-bottom: var(--space-8); border-bottom: 1px solid #dbc6a355; }
.education-records article:last-child { margin: 0; padding-bottom: 0; border: 0; }
.education-records h4 { margin-bottom: var(--space-4); }
.education-records article > span, .education-records small { display: block; font-size: var(--text-meta); color: #ead6b7; }
.education-records p { font-size: var(--text-body); margin: var(--space-3) 0; }

/* A local wash behind the text leaves the pool and left arcade uncovered. */
.interlude { position: relative; height: 130svh; background: #d6c29d; --interlude-progress: 0; }
.interlude-stage { position: sticky; top: 0; min-height: 38rem; height: 100svh; display: grid; align-items: center; justify-items: end; padding: var(--space-16) var(--page-inset); overflow: hidden; isolation: isolate; }
.interlude-landscape { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 65%; z-index: -3; transform: scale(calc(1.04 + var(--interlude-progress) * .08)); }
.interlude-wash { position: absolute; inset: 0; background:radial-gradient(ellipse 83% 91% at 84% 48%, #f0dfc1ee 0%, #f0dfc1df 26%, #f0dfc19c 46%, #f0dfc133 65%, #f0dfc100 84%); z-index: -2; pointer-events: none; }
.interlude-copy { width: min(48%, 36rem); text-align: left; padding: 0; background: none; border: 0; transform: translateY(calc(-2rem + (1 - var(--interlude-progress)) * 20px)); }
.interlude h2 { margin-bottom: var(--space-6); }
.scroll-words .word { opacity: 1; }
.interlude-copy > p { font: italic clamp(1.5rem, 2vw, 1.875rem)/1.4 var(--serif); margin: 0; color: var(--muted); max-width: none; }

/* Project titles, evidence, and artwork each have a defined place. */
.work { background: var(--surface); }
.work-header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .6fr); gap: var(--column-gap); align-items: center; margin-bottom: var(--space-16); }
.work-header h2 { margin: 0; }
.work-header p { color: var(--muted); margin: 0; text-align: end;}
.project-list { display: flex; flex-direction: column; gap: var(--section-space); }
.project { grid-template-columns: minmax(0, 1.2fr) minmax(0, .85fr); align-items: center; }
.project-reverse { grid-template-columns: minmax(0, .85fr) minmax(0, 1.2fr); }
.project-reverse .project-art { order: 2; }
.project-reverse .project-copy { order: 1; }
.project-art { position: relative; overflow: hidden; border: 1px solid #a78c6255; box-shadow: 0 12px 28px #60492d18; }
.project-copy h3 { margin-bottom: var(--space-4); }
.project-copy > p { color: var(--muted); }
.project-context { font-size: var(--text-meta); font-weight: 500; margin-bottom: var(--space-6); }
.project-facts dd { font-size: var(--text-meta); }
.project-measures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); padding-top: var(--space-6); margin: var(--space-8) 0; border-top: 1px solid var(--line); }
.project-measures span { font-size: var(--text-meta); line-height: 1.6; }
.project-measures b { display: block; font: 500 var(--text-small-title)/1.15 var(--serif); color: var(--clay); margin-bottom: var(--space-3); }
.project-details { border-bottom: 1px solid var(--line); }
.project-details h4 { margin: var(--space-6) 0 var(--space-3); font-size: 1.5rem; }
.project-details p { color: var(--muted); }
.inline-link { display: inline-block; font-size: var(--text-meta); border-bottom: 1px solid var(--line); padding: var(--space-2) 0; }
.inline-link:hover { color: var(--clay); border-color: var(--clay); }
.project-details .inline-link { margin-bottom: var(--space-6); }
.identity-art { background: #d5c09a; aspect-ratio: .96; padding: 12%; display: grid; place-items: center; }
.identity-pattern { position: absolute; inset: -8% 0; background: var(--tile) center/300px; pointer-events: none; }
.identity-sheet { position: relative; z-index: 1; padding: var(--space-6); width: 42%; aspect-ratio: 1; display: grid; place-items: center; text-align: center; background: var(--paper-light); border: 1px solid #b09a7377; box-shadow: 10px 20px 25px #203b3945; rotate: -8deg; transition: rotate .6s, translate .6s; }
.identity-art:hover .identity-sheet { rotate: -3deg; translate: 0 -.5rem; }
.identity-sheet > strong { font: 400 var(--text-art)/1.02 var(--serif); }
.exploration-art { aspect-ratio: .96; background: #d2bc95; border-radius: 48% 48% 0 0 / 31% 31% 0 0; }
.exploration-art > img { width: 100%; height: 116%; top: -8%; position: absolute; object-fit: cover; mix-blend-mode: multiply; }
.exploration-type { position: absolute; left: 12%; right: 58%; bottom: 7%; padding: var(--space-6); background: #f0dfc1ed; border: 1px solid var(--line); box-shadow: 0 8px 16px #5944261c; rotate: -2deg; }
.exploration-type > strong { display: block; font: 400 var(--text-art-note)/1.05 var(--serif); }
.practice-art { background: var(--paper-light); aspect-ratio: 1122 / 1402; }
.practice-art > img { position: absolute; top: -8%; width: 100%; height: 116%; object-fit: cover; }
.practice-caption { position: absolute; top: 22%; right: 9%; width: 39%; padding: var(--space-6); background: #f0dfc1e8; border: 1px solid var(--line); box-shadow: 0 8px 16px #5944261c; rotate: 2deg; font: 400 clamp(2rem, 3vw, 3vw)/1.1 var(--serif); color: var(--ink); }
.personal-lab { padding-top: var(--space-16); margin-top: var(--section-space); border-top: 1px solid var(--line); }
.lab-heading { max-width: 42rem; margin-bottom: var(--space-12); }
.lab-heading p { color: var(--muted); margin-bottom: 0; }
.lab-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); align-items: start; }
.lab-note { position: relative; padding: var(--space-12) var(--space-8) var(--space-8); min-height: 27.5rem; border: 1px solid #bda07877; background: linear-gradient(#f0e0be73, #f0e0be73), url('assets/archive-paper.webp') center/100% 100%; box-shadow: 4px 10px 20px #6a4c3426; rotate: -1.3deg; }
.lab-note:nth-child(2) { rotate: 1.6deg; margin-top: 1.875rem; background-image: linear-gradient(#eddfc480, #eddfc480), url('assets/correspondence-paper.webp'); }
.lab-note:nth-child(3) { rotate: -.6deg; margin-top: .625rem; background-image: linear-gradient(#d6bd9220, #d6bd9220), url('assets/correspondence-paper.webp'); }
.lab-note h4 { overflow-wrap: anywhere; margin-bottom: var(--space-4); }
.lab-note p { color: var(--muted); }
.lab-note .lab-context { font-size: var(--text-meta); font-weight: 500; }
.lab-note p:last-child { margin-bottom: 0; }

/* Publication rows follow the same type and spacing tokens. */
.publications { background: #ddc8a3; border-top: 1px solid var(--line); }
.publications-layout { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.publications-intro > p { color: var(--muted); }
.publications-intro .research-note { font-size: var(--text-meta); margin-top: var(--space-4); }
.research-count { display: flex; gap: var(--space-6); align-items: center; margin: var(--space-8) 0; }
.research-count strong { font: 500 5rem/1 var(--serif); color: var(--clay); }
.research-count span { font-size: var(--text-meta); }
.publication { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-6); padding: var(--space-8) 0; border-bottom: 1px solid var(--line); }
.publication:first-child { padding-top: 0; }
.publication-year { padding-top: .375rem; font-size: var(--text-meta); color: #655038; }
.publication h3 { font-size: var(--text-small-title); line-height: 1.25; margin-bottom: var(--space-4); }
.publication h3 a:hover { color: var(--clay); }
.publication p, .publication-venue { font-size: var(--text-meta); color: var(--muted); }
.publication p { margin-bottom: var(--space-2); }
.research-events { display: flex; gap: var(--space-10); align-items: baseline; border-top: 1px solid var(--line); padding-top: var(--space-8); margin-top: var(--space-12); }
.research-events > span { font: 500 var(--text-small-title)/1.2 var(--serif); white-space: nowrap; }
.research-events p { margin: 0; color: var(--muted); }

/* Tiled niches and working method. */
.craft { background: #2c443a; color: #f0e1c4; }
.craft-heading { margin-bottom: var(--space-16); }
.craft-heading h2 { margin: 0; }
.skill-arcade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); align-items: stretch; }
.skill-niche { overflow: hidden; border-radius: 48% 48% 0 0 / 23% 23% 0 0; padding: 0 var(--space-6) var(--space-6); background: #e3d0aa; color: var(--ink); border: 1px solid #cdb782; box-shadow: 0 0 0 5px #263d33, 0 0 0 6px #bda16a66; }
.niche-cap { height: 9rem; margin: 0 -1.5rem var(--space-6); background-image: linear-gradient(#c9b18b30, #c9b18b30), url('assets/tile-sampler.webp'); background-color: #dac6a1; background-size: auto, 227% auto; background-position: center, 3.5% 3.5%; background-repeat: no-repeat; background-blend-mode: multiply; filter: saturate(.7); display: grid; place-items: center; }
.skill-niche:nth-child(2) .niche-cap { background-position: center, 96.5% 3.5%; }
.skill-niche:nth-child(3) .niche-cap { background-position: center, 3.5% 96.5%; }
.niche-cap > span { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; border: 3px double #ac8751; background: #e9d8b5; font: italic 2.5rem/1 var(--serif); }
.skill-niche h3 { font-size: var(--text-small-title); margin-bottom: var(--space-4); }
.skill-niche > p { color: var(--muted); min-height: 3.5rem; }
.skill-niche ul { list-style: none; margin: 0; padding: 0; }
.skill-niche li { border-top: 1px solid var(--line); padding: var(--space-3) 0; font-size: var(--text-meta); }
.approach-heading p, .approach-steps p { color: #e0d4bc; }
.approach-steps article { display: flex; gap: var(--space-6); padding: var(--space-8) 0; border-bottom: 1px solid #c4ad7a66; }
.approach-steps article:first-child { padding-top: 0; }
.approach-steps article > span { font: 500 1.5rem/1.3 var(--serif); color: #efd09d; }
.approach-steps h4 { margin-bottom: var(--space-4); }
.approach-steps p { margin: 0; }
.languages dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); margin: 0; }
.languages dt { font: 500 1.5rem/1.3 var(--serif); color: #f0e1c4; }
.languages dd { font-size: var(--text-meta); color: #e0d4bc; }

/* The original floral exterior surrounds a recessed geometric interior. */
.horizon { position: relative; padding: var(--section-space) var(--page-inset) 0; background: #bfa478; isolation: isolate; overflow: hidden; }
.contact-tile-wall { position: absolute; inset: 0; background: linear-gradient(#bb9b6325, #bb9b6325), url('assets/turquoise-tile.webp'); background-size: auto, 340px; z-index: -2; }
.contact-door { position: relative; isolation: isolate; border-radius: 48% 48% 0 0 / 30% 30% 0 0; padding: clamp(7rem, 13vw, 12rem) var(--space-16) 0; overflow: hidden; background: #eddfc3; border: 1px solid #927348; box-shadow: 0 0 0 10px #cfb68d, 0 0 0 11px #896d44, 0 0 0 24px #d9bf9799, 0 0 0 25px #a3895e, inset 0 14px 24px #71502f22; }
.contact-pattern { position: absolute; inset: 0; z-index: -2; background: url('assets/contact-carved-pattern.webp') center top/40rem 40rem; opacity: .9; pointer-events: none; }
.contact-door:before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 82% 67% at 50% 57%, #eddfc3f5 10%, #eddfc3db 45%, #eddfc340 100%); z-index: -1; pointer-events: none; }
.contact-copy { text-align: center; max-width: 44rem; margin-inline: auto; }
.contact-copy h2 { font-size: var(--text-display); margin-bottom: var(--space-8); }
.contact-copy p { margin-inline: auto; }
.contact-copy > p:not(.contact-email):not(.contact-note) { font: 500 var(--text-small-title)/1.4 var(--serif); color: #514c3b; }
.contact-email { position: relative; display: grid; place-items: center; width: min(100%, 21rem); margin: var(--space-8) auto var(--space-6); padding: 0; border: 0; color: #fff0ce; font: 500 clamp(1.125rem, 1.5vw, 1.25rem)/1.2 var(--sans); text-decoration: none; transition: filter .2s, transform .2s; }
.email-button-art, .contact-email > span { grid-area: 1 / 1; }
.email-button-art {
  --email-button-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M196 190H804V254C833 210 870 210 897 266C922 331 927 424 975 500C927 576 922 669 897 734C870 802 833 802 804 746V810H196V746C167 802 130 802 103 734C78 669 73 576 25 500C73 424 78 331 103 266C130 210 167 210 196 254Z'/%3E%3C/svg%3E");
  width: 100%;
  height: auto;
  pointer-events: none;
  -webkit-mask: var(--email-button-mask) center/100% 100% no-repeat;
  mask: var(--email-button-mask) center/100% 100% no-repeat;
}
.contact-email > span { position: relative; z-index: 1; padding: var(--space-3); text-shadow: 0 1px 2px #103d32; }
.contact-email:hover { filter: brightness(1.08); transform: translateY(-2px); }
.contact-email:active { filter: brightness(.96); transform: translateY(1px); }
.contact-email:focus-visible { outline: 2px solid var(--clay); outline-offset: 8px; }
.contact-note { font-size: var(--text-meta); color: var(--muted); max-width: 40ch; }
.contact-links { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-3) var(--space-6); margin-bottom: var(--space-16); }
.contact-links a { font-size: var(--text-meta); border-bottom: 1px solid var(--line); padding-block: var(--space-2); }
.contact-links a:hover { color: var(--clay); }
footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); padding: var(--space-6) 0 var(--space-8); border-top: 1px solid var(--line); font-size: var(--text-meta); color: #5d503a; }

/* Existing motion controls and interactions remain keyboard accessible. */
.motion-toggle { position: fixed; bottom: 1rem; left: 1rem; z-index: 90; display: flex; align-items: center; gap: .5rem; padding: .5rem .875rem; border: 1px solid #9c8258; border-radius: 2rem; background: #eddfc3f5; font-size: .75rem; box-shadow: 0 3px 10px #66503115; }
.cursor { display: none; position: fixed; top: 0; left: 0; width: 1.875rem; height: 1.875rem; border: 1px solid #dfc18b; border-radius: 50%; pointer-events: none; z-index: 120; transform: translate(-50%, -50%); transition: width .2s, height .2s; mix-blend-mode: difference; }
.cursor span { position: absolute; inset: .75rem; background: #dfc18b; border-radius: 50%; }
.cursor.over-link { width: 3rem; height: 3rem; }
.cursor.over-link span { opacity: 0; }
.reveal { opacity: 1; transform: none; }
.motion-active .reveal { transition: transform .7s ease; }
.motion-active .reveal:not(.visible) { transform: translateY(1.25rem); }
.motion-paused .interlude { height: auto; }
.motion-paused .interlude-stage { position: relative; }
.motion-paused .interlude-copy, .motion-paused .interlude-landscape { transform: none; }
.motion-paused .career-card { position: relative; top: auto; }
.motion-paused *, .motion-paused [data-parallax], .motion-paused [data-drift] { animation: none !important; transition: none !important; transform: none !important; }
.generated-element { position: absolute; width: 20%; pointer-events: none; }
.generated-element.left { left: 0; bottom: 0; }
.generated-element.right { right: 0; top: 15%; }
@media (pointer: fine) { body.cursor-present, body.cursor-present a, body.cursor-present button, body.cursor-present summary { cursor: none; } }

@media (max-width: 1200px) {
  .site-header { flex-wrap: wrap; gap: var(--space-4); }
  .site-header nav { order: 3; justify-content: space-between; width: 100%; }
  .header-actions { margin-left: auto; }
  .chapter-rail { display: none; }
  .roots-letter, .career-card { padding: var(--space-8); }
  .lab-note { padding: var(--space-6); }
}
@media (max-width: 900px) {
  .roots-layout, .journey-layout, .publications-layout { grid-template-columns: 1fr; }
  .roots-art { width: min(100%, 34rem); margin-inline: auto; }
  .roots-letter h2 { font-size: var(--text-section); }
  .journey-intro, .publications-intro { position: static; }
  .journey-intro h2 br { display: none; }
  .journey-counter, .journey-caption, .journey-ornament { display: none; }
  .career-card { position: relative; top: auto; }
  .lab-grid { grid-template-columns: 1fr; }
  .lab-note { padding: var(--space-8); }
  .lab-note, .lab-note:nth-child(2), .lab-note:nth-child(3) { min-height: 0; margin-top: 0; }
  .interlude-copy { width: 56%; }
  .interlude h2 { font-size: var(--text-feature); }
  .skill-arcade { gap: var(--space-6); }
  .skill-niche { padding-inline: var(--space-4); }
  .niche-cap { margin-inline: -1rem; }
  .skill-niche > p { min-height: 0; }
  .contact-door { padding-inline: var(--space-10); }
}
@media (max-width: 700px) {
  :root { --gutter: 1.5rem; --section-space: 4rem; --column-gap: 2rem; --text-display: clamp(3.5rem, 12vw, 5rem); --text-feature: 2.25rem; }
  .site-header { padding-block: var(--space-4); }
  .site-header nav { justify-content: flex-start; column-gap: var(--space-6); row-gap: 0; }
  .hero-stage { grid-template-columns: 1fr; gap: var(--space-8); padding-top: var(--space-12); padding-bottom: var(--space-12); }
  .hero-copy { padding: 0; }
  .hero h1 { margin-bottom: var(--space-6); }
  .hero-role { max-width: 30ch; margin-bottom: var(--space-6); }
  .hero-art { width: 100%; max-width: 34rem; justify-self: center; }
  .roots-letter { padding: var(--space-6); }
  .roots-letter h2 { font-size: var(--text-feature); }
  .art-caption { right: 1rem; bottom: 1rem; font-size: 1.75rem; }
  .profile-milestones, .roots-notes { grid-template-columns: 1fr; gap: var(--space-6); }
  .profile-milestones { margin-top: var(--space-10); }
  .profile-milestones > div + div { border-left: 0; border-top: 1px solid var(--line); padding: var(--space-6) 0 0; }
  .profile-milestones > div { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: center; }
  .profile-milestones strong { font-size: 2rem; margin: 0; }
  .roots-notes { margin-top: var(--space-8); }
  .roots-notes h3 { margin-top: var(--space-2); }
  .career-card { padding: var(--space-6); }
  .education, .project, .work-header, .approach, .languages { grid-template-columns: 1fr; }
  .education, .approach, .languages { padding-top: var(--space-10); margin-top: var(--space-10); }
  .work-header { margin-bottom: var(--space-10); gap: var(--space-6); }
  .project-list { gap: var(--space-16); }
  .project-reverse .project-art, .project-reverse .project-copy { order: initial; }
  .project-art { width: 100%; max-width: 34rem; justify-self: center; }
  .identity-sheet { padding: var(--space-4); }
  .exploration-type, .practice-caption { padding: var(--space-4); }
  .interlude { height: auto; }
  .interlude-stage { position: relative; min-height: 42rem; height: auto; align-items: start; padding-top: var(--space-16); padding-bottom: 22rem; }
  .interlude-copy { width: min(100%, 30rem); padding: 0; transform: none; }
  .interlude-landscape { object-position: 40% center; }
  .interlude-wash { background: radial-gradient(ellipse 115% 62% at 83% 18%, #f0dfc1ee 0%, #f0dfc1dc 33%, #f0dfc177 57%, #f0dfc100 85%); }
  .interlude h2 { font-size: var(--text-feature); }
  .interlude-copy > p { font-size: 1.5rem; }
  .personal-lab { margin-top: var(--space-16); padding-top: var(--space-10); }
  .publication { gap: var(--space-4); grid-template-columns: 2.75rem minmax(0, 1fr); }
  .publication h3 { font-size: 1.75rem; }
  .research-events { display: block; }
  .research-events p { margin-top: var(--space-4); }
  .craft-heading { margin-bottom: var(--space-10); }
  .skill-arcade { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; gap: var(--space-10); }
  .skill-niche { padding-inline: var(--space-6); border-radius: 48% 48% 0 0 / 26% 26% 0 0; }
  .niche-cap { margin-inline: -1.5rem; height: 10rem; }
  .horizon { padding: var(--space-16) var(--gutter) 0; }
  .contact-door { padding: 7rem var(--space-6) 0; border-radius: 48% 48% 0 0 / 17% 17% 0 0; box-shadow: 0 0 0 6px #cfb68d, 0 0 0 7px #896d44; }
  .contact-pattern { background-size: 28rem 28rem; }
  .contact-copy h2 { font-size: clamp(3.25rem, 12vw, 4.5rem); }
  .contact-copy > p:not(.contact-email):not(.contact-note) { font-size: 1.5rem; }
  .contact-copy > p br { display: none; }
  .contact-links { margin-bottom: var(--space-10); gap: var(--space-2) var(--space-4); }
  footer { padding-bottom: var(--space-20); }
}
@media (max-width: 380px) {
  .wordmark { gap: var(--space-2); }
  .header-actions { gap: var(--space-4); }
  .personal-details, .project-facts { grid-template-columns: 1fr; }
  .roots-letter, .career-card, .lab-note { padding: var(--space-6); }
  .contact-door { padding-inline: var(--space-4); }
}
@media (max-height: 850px) { .publications-intro { position: relative; top: auto; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *:before, *:after { animation: none !important; transition: none !important; }
  .reveal, [data-parallax], [data-drift], .interlude-copy, .interlude-landscape { transform: none !important; }
  .interlude { height: auto; }
  .interlude-stage, .career-card { position: relative; top: auto; }
  .identity-art:hover .identity-sheet { rotate: -8deg; translate: none; }
  .contact-email:hover, .contact-email:active { transform: none; }
}
@media print {
  :root { --text-body: 11pt; --text-meta: 10pt; --text-section: 28pt; --text-feature: 24pt; --text-small-title: 18pt; --text-display: 34pt; }
  body { background: #fff; color: #222; overflow: visible; }
  .paper-grain, .cursor, .reading-progress, .chapter-rail, .motion-toggle, .site-header nav, .header-actions, .enter-story, .hero-art, .tile-frieze, .roots-art, .journey-counter, .journey-caption, .journey-ornament, .interlude, .project-art, .niche-cap, .contact-tile-wall, .contact-pattern, .contact-door:before { display: none !important; }
  .site-header { margin: 0; padding: 0 0 1rem; }
  .hero-stage { display: block; padding: 1.5rem 0; }
  .hero-copy { padding: 0; }
  .hero-role { margin: 0; }
  .section, .horizon { background: transparent !important; color: #222; padding: 1.5rem 0; overflow: visible; }
  .roots-layout, .journey-layout, .project, .publications-layout, .education, .approach, .languages, .lab-grid { display: block; }
  .roots-letter, .career-card, .lab-note, .skill-niche, .contact-door { background: transparent !important; box-shadow: none; border-radius: 0; padding: 1rem 0; min-height: 0; }
  .roots-letter { border: 0; }
  .career-card, .journey-intro, .publications-intro { position: static; }
  .career-card { rotate: none; }
  .contact-door::after { display: none; }
  .career-card, .publication, .lab-note, .education-records article, .approach-steps article { break-inside: avoid; }
  .career-stack, .project-list { display: block; }
  .project { margin-block: 2rem; }
  .project-details summary, .career-details summary, .lab-note summary { display: none; }
  .education, .approach, .languages, .personal-lab { margin-top: 1.5rem; padding-top: 1.5rem; }
  .lab-note, .lab-note:nth-child(2), .lab-note:nth-child(3) { margin: 1rem 0; padding: 1rem; rotate: none; }
  .education-records small, .education-records article > span, .approach-steps p, .languages dd, .languages dt, .journey-intro > p, .approach-heading p, .journey em, .craft em { color: #333; }
  .skill-arcade { gap: 1.5rem; }
  .skill-niche { border: 0; }
  .contact-door { border: 0; }
  .contact-copy { text-align: left; max-width: none; }
  .contact-copy p { margin-inline: 0; }
  .contact-email { display: inline-block; width: auto; color: #222; margin: 1rem 0; font-size: 12pt; text-decoration: underline; }
  .email-button-art { display: none; }
  .contact-email > span { padding: 0; text-shadow: none; }
  .contact-copy h2 { font-size: 28pt; }
  .contact-copy > p:not(.contact-email):not(.contact-note) { display: none; }
  .contact-links { justify-content: flex-start; margin-bottom: 1rem; }
  footer { padding-bottom: 0; }
  .reveal { transform: none !important; }
}