@font-face{font-family:Source Sans;src:url('/assets/source-sans-3.woff2') format('woff2');font-weight:200 900;font-display:swap}
@font-face{font-family:Source Serif;src:url('/assets/source-serif-4.woff2') format('woff2');font-weight:200 900;font-display:swap}

:root {
  color-scheme: light;
  --paper: #faf8f3;
  --surface: #fffdf9;
  --ink: #20252e;
  --muted: #535966;
  --line: #dcd7cb;
  --night: #191d26;
  --light: #fff9ee;
  --soft: #d0ccd0;
  --gold: #efca84;
  --ochre: #77521f;
  --focus: var(--ochre);
  --radius-control: .55rem;
  --radius-panel: .85rem;
  --body: 'Source Sans', system-ui, sans-serif;
  --display: 'Source Serif', Georgia, serif;
  --ease: cubic-bezier(.23, 1, .32, 1);
  --max: 76rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 1.0625rem/1.55 var(--body); }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
h1, h2, h3 { font-family: var(--display); line-height: 1.06; letter-spacing: -.037em; font-weight: 560; text-wrap: balance; }
h2 { font-size: clamp(2.3rem, 5vw, 4.1rem); }
h3 { font-size: clamp(1.65rem, 3vw, 2.25rem); }
p { text-wrap: pretty; }
ul { margin: 0; }
a { color: inherit; text-underline-offset: .18em; }
img { display: block; width: 100%; height: auto; }
svg { width: 1.1em; height: 1.1em; flex: none; }
button, select { font: inherit; }
button { cursor: pointer; }
button:disabled, select:disabled { cursor: default; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; white-space: nowrap; clip-path: inset(50%); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
[id] { scroll-margin-top: 1.5rem; }

.wrap { width: min(var(--max), calc(100% - 5rem)); margin-inline: auto; }
.dark { background: var(--night); color: var(--light); --focus: var(--gold); }
.skip-link { position: fixed; inset: .7rem auto auto 1rem; z-index: 5; padding: .7rem 1rem; color: var(--ink); background: var(--gold); border-radius: .4rem; translate: 0 -180%; }
.skip-link:focus { translate: 0 0; }
.kicker { display: flex; align-items: center; gap: .6rem; font-size: .76rem; font-weight: 720; line-height: 1.35; letter-spacing: .11em; text-transform: uppercase; color: var(--ochre); }
.dark .kicker { color: var(--gold); }
.marker { width: 1.6rem; height: 1px; background: currentColor; }
.muted { color: var(--muted); }
.dark .muted { color: var(--soft); }

.site-header { border-bottom: 1px solid #393c44; }
.site-nav { display: flex; min-height: 4.25rem; gap: .75rem 1.5rem; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; gap: .66rem; align-items: center; text-decoration: none; color: var(--light); font-weight: 680; white-space: nowrap; }
.monogram { width: 2.2rem; height: 2.2rem; flex: none; }
.site-nav ul { display: flex; gap: clamp(.65rem, 2.3vw, 2.1rem); align-items: center; padding: 0; list-style: none; }
.nav-link { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--soft); text-decoration: none; font-size: .98rem; font-weight: 620; transition: color 160ms ease-out; }
.nav-link:hover { color: var(--gold); }

.hero { position: relative; }
.hero-grid { min-height: clamp(29rem, 48vw, 36.5rem); display: grid; grid-template-columns: minmax(0,.96fr) minmax(0,1.04fr); align-items: center; gap: clamp(2rem,5vw,5rem); padding-block: clamp(3.3rem,7.1vw,6rem); }
.hero h1 { font-size: clamp(3.3rem,7.5vw,6.85rem); margin: .72rem 0 .58rem; line-height: .98; font-weight: 535; letter-spacing: -.068em; }
.hero-role { margin-block: 1rem .78rem; font: 540 clamp(1.28rem,2.05vw,1.85rem)/1.25 var(--display); letter-spacing: -.023em; }
.hero-intro { max-width: 31rem; color: var(--soft); font-size: clamp(1.04rem,1.7vw,1.22rem); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .75rem; }
.hero .actions { margin-top: 1.65rem; }
.button { display: inline-flex; justify-content: center; align-items: center; min-height: 2.82rem; gap: .52rem; padding: .53rem .92rem; border: 1px solid transparent; border-radius: var(--radius-control); background: transparent; color: var(--ink); font-weight: 680; font-size: .98rem; text-decoration: none; line-height: 1.15; transition: background-color 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out, transform 120ms var(--ease); }
.button:not(:disabled):active { transform: translateY(1px); }
.button:disabled { color: #626671; background: #efede7; border-color: #dedbd1; }
.button-primary { background: var(--ink); color: white; }
.button-primary:not(:disabled):hover { background: #374459; }
.dark .button-primary { background: var(--gold); color: var(--night); }
.dark .button-primary:hover { background: #ffdda2; }
.button-outline { border-color: #a49f94; }
.button-outline:not(:disabled):hover { background: #f1ede3; border-color: #777062; }
.dark .button-outline { border-color: #67666b; color: var(--light); }
.dark .button-outline:hover { background: #2b303b; border-color: #a8a2a5; }
.button-quiet { padding-inline: .55rem; }
.button-quiet:not(:disabled):hover { background: #ede7d9; }
.dark .button-quiet { color: var(--light); }
.dark .button-quiet:hover { background: #2b303b; }

.hero-visual { align-self: center; min-width: 0; }
.hero-frame { overflow: hidden; border: 1px solid #55555d; border-radius: var(--radius-panel); background: #2c303a; box-shadow: 0 20px 46px #11131a55; }
.frame-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 2.55rem; padding: .46rem .85rem; border-bottom: 1px solid #57534d; color: var(--soft); font-size: .75rem; font-weight: 650; }
.frame-top span:first-child { display: inline-flex; align-items: center; gap: .5rem; }
.frame-top svg { color: var(--gold); }
.frame-top .frame-tag { color: #f0d095; }
.hero-frame img { aspect-ratio: 60/41; object-fit: cover; object-position: top; }
.hero-caption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .15rem 1rem; margin-top: .58rem; color: var(--soft); font-size: .88rem; }
.text-link { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.75rem; font-weight: 700; color: var(--ink); text-decoration-color: #928670; transition: color 140ms ease-out, text-decoration-color 140ms ease-out; }
.text-link:hover { color: var(--ochre); text-decoration-color: currentColor; }
.dark .text-link { color: var(--gold); text-decoration-color: #a18a64; }
.dark .text-link:hover { color: #ffe3ac; }
.text-link svg { transition: transform 160ms var(--ease); }
.text-link:hover svg { transform: translateX(2px); }

.section { padding-block: clamp(3.6rem,7.9vw,6.65rem); }
.section-title { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .56fr); align-items: end; gap: .72rem 2rem; margin-bottom: clamp(1.7rem,3.8vw,2.7rem); }
.section-title h2, .about h2, .contact h2 { margin-top: .55rem; }
.section-title > p { color: var(--muted); max-width: 27rem; }
.feature-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.4rem; }
.project-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel); overflow: hidden; }
.project-shot { overflow: hidden; background: #e6e0d4; border-bottom: 1px solid var(--line); }
.project-shot img { aspect-ratio: 60/36; object-fit: cover; object-position: top center; }
.card-content { display: grid; gap: .72rem; padding: clamp(1rem,3vw,1.8rem); }
.card-content h3 { margin-top: .14rem; }
.card-content > p:not(.kicker) { color: var(--muted); max-width: 42ch; }
.card-content .actions { gap: .45rem 1.15rem; }
.tags { display: flex; flex-wrap: wrap; gap: .37rem; padding: 0; list-style: none; }
.tags li { padding: .22rem .52rem; border: 1px solid #e5dfd2; border-radius: .33rem; background: #f5f0e5; color: #524a3d; font-size: .84rem; line-height: 1.3; font-weight: 620; }
.project-index { padding-top: 0; }
.index-list { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.index-list li + li { border-top: 1px solid var(--line); }
.index-link { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: .4rem 1.5rem; align-items: center; min-height: 5rem; padding: .9rem .4rem .9rem 0; text-decoration: none; transition: color 140ms ease-out; }
.index-link:hover { color: var(--ochre); }
.index-link:hover .index-title { text-decoration: underline; }
.index-title { display: block; font: 575 clamp(1.25rem,2.5vw,1.68rem)/1.16 var(--display); letter-spacing: -.02em; }
.index-area { display: block; color: var(--muted); font-size: .94rem; margin-top: .22rem; }
.index-status { font-size: .86rem; color: #534532; font-weight: 650; background: #f0eadc; padding: .24rem .55rem; border-radius: .32rem; }
.index-link > svg { transition: transform 160ms var(--ease); }
.index-link:hover > svg { transform: translateX(3px); }

.about { background: #eee9de; border-top: 1px solid #e2dacc; }
.about-grid { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); gap: 2.25rem 5rem; align-items: start; }
.about .intro { max-width: 55ch; margin-block: 1rem .65rem; font-size: 1.14rem; }
.profile-facts { align-self: center; border-top: 1px solid #cfc5b6; }
.profile-facts > div { padding-block: .88rem; border-bottom: 1px solid #cfc5b6; }
.profile-facts dt { font-weight: 725; }
.profile-facts dd { color: var(--muted); }
.contact-grid { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem 2rem; }
.contact-grid p:not(.kicker) { margin-top: .72rem; color: var(--soft); }
.contact .actions { margin-top: .7rem; }
.footer { border-top: 1px solid #393c44; }
.footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .4rem 1.5rem; padding-block: .8rem; color: var(--soft); font-size: .95rem; }

.project-hero { padding-block: clamp(1.7rem,5.5vw,4.7rem) clamp(3rem,6vw,5rem); }
.project-hero .back-link { margin-bottom: 1.2rem; }
.project-hero h1 { font-size: clamp(2.7rem,7vw,5.8rem); margin: .65rem 0 .85rem; max-width: 17ch; }
.project-hero .lede { max-width: 56ch; font-size: clamp(1.08rem,2vw,1.31rem); color: var(--soft); }
.project-hero .actions { margin-top: 1.2rem; }
.detail-layout { display: grid; grid-template-columns: minmax(0,1.48fr) minmax(0,.75fr); gap: 2rem clamp(2rem,7vw,6rem); align-items: start; }
.detail-content { display: grid; gap: 2.1rem; }
.detail-content h2, .detail-aside h2 { font-size: clamp(1.52rem,3vw,2.27rem); margin-bottom: .62rem; }
.detail-content ul { padding-inline-start: 1.15rem; }
.detail-content li + li { margin-top: .3rem; }
.detail-shot { border: 1px solid var(--line); border-radius: .72rem; overflow: hidden; }
.detail-shot video { display: block; width: 100%; height: auto; }
.detail-shot figcaption { padding: .65rem .8rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .91rem; }
.project-demo { padding-top: clamp(1.5rem, 4vw, 3.2rem); }
.project-demo h2 { margin-bottom: .75rem; font-size: clamp(1.52rem, 3vw, 2.4rem); }
.project-demo .detail-shot { width: min(100%, 55rem); background: var(--surface); }
.detail-aside { display: grid; gap: 1.5rem; padding: 1.32rem; border: 1px solid var(--line); border-radius: .72rem; background: var(--surface); }
.detail-aside .text-link { margin-top: .35rem; }
.not-found { min-height: 52vh; }
.not-found p { margin-block: .85rem; }

@media (prefers-reduced-motion: no-preference) {
  .hero-copy, .hero-visual { animation: enter 460ms var(--ease) both; }
  .hero-visual { animation-delay: 70ms; }
  @keyframes enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
}

@media (max-width: 54rem) {
  .wrap { width: min(var(--max),calc(100% - 3rem)); }
  .hero-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 1.55rem; }
  .detail-layout { gap: 2rem; }
}

@media (max-width: 43rem) {
  .wrap { width: calc(100% - 2rem); }
  .site-nav { min-height: 3.85rem; gap: .4rem; }
  .site-nav ul { gap: clamp(.48rem,2.3vw,1.05rem); }
  .brand { gap: .43rem; font-size: .93rem; }
  .monogram { width: 1.8rem; height: 1.8rem; }
  .nav-link { font-size: .91rem; }
  .hero-grid, .section-title, .feature-grid, .about-grid, .detail-layout { grid-template-columns: minmax(0,1fr); }
  .hero-grid { padding-block: 2.9rem 2.25rem; gap: 1.9rem; }
  .hero h1 { font-size: clamp(3.6rem,11.9vw,5.3rem); }
  .hero-role { margin-top: .8rem; }
  .hero .actions { gap: .45rem; margin-top: 1.25rem; }
  .section-title { align-items: start; }
  .index-link { gap: .4rem .65rem; }
  .index-status { max-width: 8rem; text-align: center; }
}

@media (max-width: 21rem) {
  .site-nav .monogram { display: none; }
  .hero .button { padding-inline: .65rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}