@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  font-display: swap;
  src: url(assets/archivo-1.woff2) format('truetype');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: normal;
  font-display: swap;
  src: url(assets/archivo-2.woff2) format('truetype');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: normal;
  font-display: swap;
  src: url(assets/archivo-3.woff2) format('truetype');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: normal;
  font-display: swap;
  src: url(assets/archivo-4.woff2) format('truetype');
}

/* Archivo hierarchy; retain the portfolio's existing image geometry and section spacing. */
:root{--font:'Archivo',Arial,sans-serif;--paper:#2e2e2e;--ink:#f8f8f5;--muted:#d0d0cb;--line:#ffffff40;--soft:#3d3d3d;--on-ink:#20201e;--accent:#edc6cf}
body{font-weight:400;font-synthesis:none}
h1,h2,h3,strong{font-style:normal}
.wordmark{font-weight:700}
.home-page>.signature h1,.about-content h1{font-size:clamp(32px,4vw,56px);font-weight:600;letter-spacing:-.045em;line-height:1.06}
.role{font-size:clamp(22px,2vw,28px);font-weight:400;letter-spacing:-.025em;line-height:1.3}
.site-header nav a,.about-link,.signature div>a{font-size:16px}
.site-header nav a[aria-current=page]{font-weight:600}
.intro-description{font-size:15px;line-height:1.5}
.project-caption h2{font-size:clamp(24px,2.1vw,30px);font-weight:600;letter-spacing:-.035em;line-height:1.15}
.project-caption p{font-size:16px;line-height:1.5}
.project-kind,.meta,figcaption{font-size:14px;line-height:1.5}
.professional-experience>h2,.experience-list h2,.education h2{font-size:28px;font-weight:600;letter-spacing:-.035em;line-height:1.15}
.experience-row h3,.detail-columns h3,.interaction-sequence h3,.education h3{font-size:22px;font-weight:600;letter-spacing:-.025em;line-height:1.25}
.case-sidebar h1{font-size:clamp(34px,3.2vw,46px);font-weight:600;letter-spacing:-.045em}
.case-deck{font-size:22px;line-height:1.35;letter-spacing:-.02em}
.prose h2,.demo-section h2,.sidenote-hero .prose h2{font-size:clamp(30px,3vw,42px);font-weight:500;letter-spacing:-.035em;line-height:1.12}
.prose p:not(.eyebrow){font-size:18px;line-height:1.65}
.eyebrow,.project-facts dt{font-weight:500}
.objects-index>a>span{font-weight:500}
.next-project strong{font-weight:600;letter-spacing:-.035em}
.about-lead{font-size:24px;line-height:1.45;letter-spacing:-.02em}
.about-bio{font-size:18px;line-height:1.65}
.button-link,.skip-link{color:var(--on-ink)}
.button-link:hover{background:var(--ink);opacity:.85}
.sidenote-hero{background:var(--soft)}
#demo-dialog,.demo-toolbar button{background:var(--paper);color:var(--ink)}
::selection{background:var(--ink);color:var(--on-ink)}
@media(max-width:480px){.home-page>.signature h1{font-size:clamp(28px,8.3vw,36px)}.role{font-size:22px}.project-caption h2{font-size:26px}}
/* Preview controls use their own colors so they remain usable on any chosen background. */
.appearance{position:fixed;right:20px;bottom:20px;z-index:20;width:270px;font:14px/1.5 'Archivo',Arial,sans-serif;color:#20201e;background:#fff;border:1px solid #d5d5d1;border-radius:10px;box-shadow:0 3px 20px #00000012}
.appearance:not([open]){width:auto}
.appearance summary{cursor:pointer;min-height:44px;padding:12px 16px;font-weight:500;list-style-position:inside}
.appearance-controls{padding:0 16px 16px;max-height:calc(100dvh - 110px);overflow-y:auto;overscroll-behavior:contain}
.appearance-objects{border:0;border-top:1px solid #ffffff30;margin:16px 0;padding:12px 0 0;min-width:0}
.appearance-objects legend{padding:0 8px 0 0;font-weight:600}
.appearance-controls label{display:block;margin:0 0 6px;font-weight:500}
.appearance-color{display:flex;gap:8px;margin-bottom:12px}
.appearance input{font:inherit;color:#20201e;background:#fff;border:1px solid #aaa;border-radius:4px;min-height:44px;min-width:0}
.appearance input[type=color]{width:48px;padding:4px;cursor:pointer;flex-shrink:0}
.appearance input[type=text]{width:100%;padding:8px 10px;text-transform:uppercase}
.appearance button{min-height:44px;border:1px solid #aaa;border-radius:4px;padding:8px 10px;background:#fff;color:#20201e;cursor:pointer}
.appearance button:hover{background:#f0f0ed}
.appearance button[aria-pressed=true]{background:#20201e;color:#fff}
.appearance-actions{display:flex;gap:8px}
.appearance-actions button:first-child{flex:1}
.appearance summary:focus-visible,.appearance input:focus-visible,.appearance button:focus-visible{outline:2px solid #345dcb;outline-offset:3px}
.appearance-hint{margin-top:10px;font-size:12px;color:#62625f}
@media(max-width:480px){.appearance{right:12px;bottom:12px}}
@media print{.appearance{display:none}}

/* Small rose accents keep the photography as the main source of color. */
.site-header nav a[aria-current=page]{text-decoration-color:var(--accent);text-decoration-thickness:2px}
.project-arrow,.signature a .icon,.about-portrait .text-link .icon,.next-project>span:last-child{color:var(--accent)}
.section-nav a[aria-current=location]{text-decoration-color:var(--accent);text-decoration-thickness:2px}
.project-link:hover h2,.project-link:focus-visible h2{ text-decoration-color:var(--accent) }
::selection{background:var(--accent);color:#2e2e2e}
/* Clip the baked-in white border without changing the portrait itself. */
.about-portrait>img{clip-path:inset(2px 7%);border-radius:0;background:transparent}
/* Contained artwork gets a deliberate, image-specific presentation surface. */
.cut-run-stage,.objects-index>a:nth-child(2) .object-thumbnail{background:#f7f6f2}
.objects-index>a:nth-child(3) .object-thumbnail{background:#d8cfca}
.objects-index>a:nth-child(4) .object-thumbnail{background:var(--paper)}
.object-portrait{background:transparent}
.object-portrait img{background:var(--paper)}
.object-portrait figcaption{padding:0;margin-top:12px}
.lotus-hero{background:var(--paper)}
.interface-inset{border-color:#e8e5e1}
.appearance{background:#383838;color:#f8f8f5;border-color:#ffffff30;box-shadow:0 3px 20px #0003}
.appearance input,.appearance button{background:#2e2e2e;color:#f8f8f5;border-color:#ffffff50}
.appearance button:hover{background:#464646}
.appearance button[aria-pressed=true]{background:#edc6cf;color:#2e2e2e;border-color:#edc6cf}
.appearance-hint{color:#d0d0cb}
.appearance summary:focus-visible,.appearance input:focus-visible,.appearance button:focus-visible{outline-color:#edc6cf}
.appearance input[type=color]{color-scheme:dark}

/* Screenshots retain the native Pixel 8 screen ratio; containers never stretch them. */
.phone-figure img{width:auto;height:auto;max-width:100%;max-height:530px;aspect-ratio:9/20;object-fit:contain;margin-inline:auto}
.sidenote-visual>img{aspect-ratio:9/20;object-fit:contain;max-width:100%}
#demo-dialog{background:#2e2e2e;color:#f8f8f5}
#demo-dialog .demo-toolbar{height:65px}
#demo-dialog .demo-toolbar button{background:#383838;color:#f8f8f5;border-color:#ffffff50}
@media(max-width:480px){.phone-figure img{max-height:450px}}

 /* A single identity line replaces the duplicated home introduction. */
.header-identity{display:flex;align-items:center;gap:24px;min-width:0}
.header-email{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:15px;white-space:nowrap}
.header-email .icon{color:var(--accent)}
.header-identity .wordmark{font-size:34px;letter-spacing:-.035em}
.site-header{gap:24px}
@media(max-width:700px){
 .site-header{height:auto;min-height:132px;flex-wrap:wrap;gap:0;padding-top:12px;padding-bottom:12px}
 .header-identity{width:100%;gap:16px;justify-content:space-between}
 .header-email{font-size:14px;gap:5px}
 .header-identity .wordmark{font-size:30px}
 .site-header nav{margin-left:auto}
}
@media(max-width:360px){.header-identity{gap:10px}.header-email{font-size:12px}.header-identity .wordmark{font-size:28px}}

/* Align the email with the wordmark's text baseline. */
.header-identity{align-items:baseline}
.header-email{align-items:baseline}


/* Keep the wordmark's 44px row fixed; the email must not enlarge the baseline-aligned group. */
.header-email{min-height:0;position:relative}
.header-email::before{content:'';position:absolute;inset:-11px 0}

/* Draw one continuous underline across each composite label. */
.cv-label{position:relative;display:inline-flex;align-items:center;gap:7px}
.site-header nav .nav-cv:hover,.site-header nav .nav-cv:focus-visible{text-decoration:none}
.cv-label::after{content:'';position:absolute;left:0;right:0;bottom:-5px;height:1px;background:currentColor;opacity:0}
.nav-cv:hover .cv-label::after,.nav-cv:focus-visible .cv-label::after{opacity:1}
.directed-link .directed-name{position:relative;display:inline-block}
.directed-link:hover h2,.directed-link:focus-visible h2{text-decoration:none}
.directed-link .directed-name::after{content:'';position:absolute;left:0;right:0;bottom:-5px;height:1px;background:var(--accent);opacity:0}
.directed-link:hover .directed-name::after,.directed-link:focus-visible .directed-name::after{opacity:1}

/* Consistent, restrained motion across navigation and controls. */
:root{--motion-ease:cubic-bezier(.22,1,.36,1)}
a,button{transition:color 220ms ease,background-color 220ms ease,border-color 220ms ease,text-decoration-color 220ms ease}
.project-visual>img{transition:transform 480ms var(--motion-ease)}
.project-arrow{transition:transform 320ms var(--motion-ease)}
.cv-label::after,.directed-link .directed-name::after{transition:opacity 220ms ease}
@media(prefers-reduced-motion:no-preference){
 html{scroll-behavior:smooth}
 #demo-dialog[open]::backdrop{animation:backdrop-in 280ms ease both}
 #demo-dialog.is-closing::backdrop{animation:backdrop-out 180ms ease both}
 ::view-transition-old(root){animation:page-out 160ms ease both}
 ::view-transition-new(root){animation:page-in 280ms var(--motion-ease) both}
}
@keyframes page-out{to{opacity:0}}
@keyframes page-in{from{opacity:0}to{opacity:1}}
@keyframes backdrop-in{from{background:#0000}to{background:#0009}}
@keyframes backdrop-out{from{background:#0009}to{background:#0000}}

.appearance[open]{width:min(420px,calc(100vw - 32px))}
.appearance-image-row{display:grid;grid-template-columns:105px minmax(0,1fr);column-gap:16px;margin:18px 0;padding-bottom:16px;border-bottom:1px solid #8884}
.appearance-image-row>label{grid-column:1/-1}
.appearance-image-row>.appearance-color{display:flex;flex-direction:column;margin:0}
.appearance-image-row input[type=color]{width:100%;height:48px}
.appearance-gradient{display:grid;grid-template-columns:1fr 1fr;gap:8px;border:0;margin:0;padding:0;min-width:0}
.appearance-gradient legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.appearance-controls .appearance-gradient label{font-size:11px;margin:0;line-height:1.4}
.appearance-gradient input{display:block;width:100%;padding:6px;margin-top:4px}
@media(max-width:480px){.appearance{right:16px;bottom:16px}.appearance-image-row{grid-template-columns:85px minmax(0,1fr);column-gap:12px}}