/* Locally bundled upright fonts. Licenses are in assets/fonts/. */
@font-face {
  font-family: 'Fraunces';
  src: url('assets/fonts/fraunces-latin-400-normal.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('assets/fonts/dm-sans-latin-400-normal.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* Edit these tokens to change the visual direction across the site. */
:root {
  color-scheme: dark;
  --paper: #101010;
  --ink: #ded5c6;
  --muted: #aaa297;
  /* Light tones carry text; deep pigments are decorative accents. */
  --accent: #b59cc3;
  --accent-warm: #c18d97;
  --burgundy: #612634;
  --burgundy-edge: #8b4354;
  --plum: #3d294a;
  --purple-edge: #79608b;
  --line: #382a33;
  --wash: #1d151b;
  --wash-purple: #1b1720;
  --sans: 'DM Sans', 'Helvetica Neue', sans-serif;
  --display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --width: 960px;
  /* Shared type scale; spacing and image sizes stay independent. */
  --font-size-base: 18px;
}


* {
  box-sizing:border-box
}

html {
  font-size:var(--font-size-base);
  scroll-behavior:smooth;
  scroll-padding-top:35px
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:1rem/1.7 var(--sans);
  -webkit-font-smoothing:antialiased
}

::selection {
  background:var(--burgundy);
  color:var(--ink)
}

a {
  color:inherit;
  text-underline-offset:5px;
  text-decoration-thickness:1px
}

a:hover {
  color:var(--accent)
}

a:focus-visible,summary:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:6px
}

img,svg,video {
  max-width:100%;
  display:block
}

img {
  height:auto
}

button,a {
  -webkit-tap-highlight-color:transparent
}

.shell {
  max-width:var(--width);
  margin:auto;
  padding:0 32px
}

.skip {
  position:absolute;
  top:-80px;
  left:20px;
  padding:8px 16px;
  background:var(--ink);
  color:var(--paper);
  z-index:10
}

.skip:focus {
  top:10px
}

.site-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:34px 0 25px;
  border-bottom:1px solid var(--line);
  position:relative;
}

.site-header::after {
  content:'';
  position:absolute;
  left:0;
  bottom:-1px;
  width:56px;
  height:2px;
  background:var(--burgundy);
}

.wordmark {
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:12px;
  font:0.8125rem var(--mono);
  color:var(--accent-warm);
  letter-spacing:-.03em
}

.nav {
  display:flex;
  align-items:baseline;
  gap:25px;
  font-size:0.75rem;
  line-height:20px;
}

.nav a {
  display:block;
  margin:0;
  padding:0;
  font:inherit;
  white-space:nowrap;
  text-decoration:none;
  color:var(--muted)
}

.nav a:hover {
  color:var(--ink)
}

.nav .resume-link {
  color:var(--ink);
  font-weight:500;
}

.eyebrow,.section-label,.figure-label {
  font:0.6875rem/1.5 var(--mono);
  text-transform:none;
  letter-spacing:.025em;
  color:var(--muted)
}

.hero {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) 240px;
  align-items:center;
  column-gap:42px;
  row-gap:42px;
  padding:78px 0 42px;
}

.hero .eyebrow {
  display:flex;
  gap:8px;
  align-items:center;
  margin:0 0 20px
}

h1,h2,h3,p {
  margin-top:0
}

h1,h2,h3 {
  font-weight:400
}

h1 {
  font:400 clamp(2.5rem,5vw,3.375rem)/1.12 var(--display);
  letter-spacing:-.035em;
  margin-bottom:22px
}

.intro {
  font-size:1rem;
  line-height:1.8;
  max-width:510px;
  margin-bottom:15px
}

.hero-note {
  font-size:0.875rem;
  color:var(--muted);
  max-width:480px;
  line-height:1.8
}

.socials {
  display:flex;
  flex-wrap:wrap;
  gap:23px;
  font-size:0.75rem;
  margin-top:25px
}

.socials a {
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:28px;
  text-decoration:none;
  border-bottom:1px solid transparent;
}

.socials svg {
  width:14px;
  height:14px;
  flex-shrink:0;
  color:var(--accent-warm);
}

.socials a:hover {
  border-bottom-color:var(--burgundy-edge);
}

section {
  scroll-margin-top:35px
}

.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  padding-bottom:14px;
  margin-bottom:0
}

.section-heading h2 {
  font:0.6875rem var(--mono);
  text-transform:none;
  letter-spacing:.025em;
  margin:0
}

.section-heading span {
  font:0.6875rem var(--mono);
  color:var(--muted)
}

.project-row {
  display:grid;
  grid-template-columns:30px minmax(0,1fr) 150px;
  gap:24px;
  padding:29px 0;
  border-bottom:1px solid var(--line);
  align-items:center
}

.project-number {
  font:0.6875rem var(--mono);
  color:var(--muted);
  align-self:start;
  padding-top:8px
}

.project-row :is(h2,h3) {
  font:400 1.6875rem/1.2 var(--display);
  letter-spacing:-.025em;
  margin:0 0 9px
}

.project-row :is(h2,h3) a {
  text-decoration:none
}

.project-row p {
  font-size:0.8125rem;
  line-height:1.8;
  max-width:520px;
  color:var(--muted);
  margin:0 0 12px
}

.tags {
  font:0.625rem/1.6 var(--mono);
  letter-spacing:.035em;
  color:var(--accent)
}

.project-thumb {
  height:104px;
  width:150px;
  overflow:hidden;
  border-radius:2px;
  background:var(--wash);
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  transition:background .2s
}

.project-thumb img {
  width:100%;
  height:100%;
  object-fit:cover
}

.project-thumb svg {
  width:120px;
  height:85px;
  color:var(--accent)
}

.project-row:hover .project-thumb {
  background:var(--plum)
}

.projects-action {
  display:flex;
  justify-content:flex-end;
  margin-top:24px;
}

.all-projects-link {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:9px 17px;
  border:1px solid var(--burgundy-edge);
  border-radius:2px;
  font-size:0.75rem;
  text-decoration:none;
  transition:background 180ms ease,border-color 180ms ease,color 180ms ease;
}

.all-projects-link:hover {
  background:var(--wash-purple);
  border-color:var(--purple-edge);
  color:var(--ink);
}

.projects-index {
  padding:45px 0 62px;
}

.project-index-header {
  padding-bottom:24px;
}

.project-index-header .project-lede {
  max-width:580px;
  font-size:0.9375rem;
  margin-bottom:0;
}

.project-index-list {
  border-top:1px solid var(--line);
}

.below-work {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:65px;
  padding-top:55px
}

.experience {
  display:grid;
  grid-template-columns:1fr auto;
  gap:5px 12px;
  padding:20px 0 16px;
  border-bottom:1px solid var(--line)
}

.experience h3 {
  font:0.9375rem var(--sans);
  margin:0
}

.experience time {
  font-size:0.6875rem;
  color:var(--muted)
}

.experience .role {
  grid-column:1/-1;
  font-size:0.75rem;
  color:var(--accent);
  margin:0
}

.experience p {
  grid-column:1/-1;
  font-size:0.75rem;
  color:var(--muted);
  margin:3px 0 0;
  line-height:1.8
}

.personal h3 {
  font:400 1.5rem var(--display);
  margin:22px 0 12px;
  letter-spacing:-.02em
}

.personal p {
  font-size:0.8125rem;
  color:var(--muted);
  line-height:1.75
}

.personal > p:not(.sports) { margin-bottom:0; }

.coffee-gallery {
  margin:22px 0 0;
}

.coffee-photos {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:start;
  gap:9px;
}

.coffee-photos a {
  display:block;
  overflow:hidden;
  cursor:zoom-in;
  background:var(--wash);
  border-radius:2px;
}

.coffee-photos img {
  width:100%;
  height:auto;
  aspect-ratio:1;
  object-fit:cover;
}

.coffee-gallery figcaption {
  margin-top:9px;
  font-size:0.625rem;
  color:var(--muted);
}

.personal .sports {
  border-top:0;
  padding:0;
  margin:22px 0 0;
  max-width:38ch;
}

.personal .sports::before {
  content:'';
  display:block;
  width:30px;
  height:1px;
  margin-bottom:15px;
  background:var(--burgundy-edge);
}

.contact {
  margin-top:67px;
  padding:36px 0 38px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px
}

.contact h2 {
  font:400 1.9375rem var(--display);
  letter-spacing:-.025em;
  margin:0 0 7px
}

.contact p {
  font-size:0.8125rem;
  color:var(--muted);
  margin:0
}

.contact>a {
  font-size:0.8125rem;
  white-space:nowrap
}

.site-footer {
  padding:20px 0 30px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  font-size:0.625rem;
  color:var(--muted);
  letter-spacing:.025em
}

.site-footer a {
  text-decoration:none
}

.footer-socials {
  display:flex;
  align-items:center;
  gap:4px;
  flex-shrink:0;
}

.footer-socials a {
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  color:var(--muted);
  transition:color 180ms ease;
}

.footer-socials a:hover {
  color:var(--accent-warm);
  background:var(--wash);
}

.footer-socials svg {
  width:18px;
  height:18px;
}

.project-main {
  max-width:740px;
  margin:auto;
  padding-top:45px
}

.back {
  font-size:0.75rem;
  color:var(--muted);
  text-decoration:none;
  display:inline-block;
  margin-bottom:44px
}

.project-header .eyebrow {
  margin-bottom:17px
}

.project-header h1 {
  font-size:clamp(2rem,4vw,2.625rem);
  max-width:680px;
  margin-bottom:22px
}

.project-lede {
  font:1.125rem/1.8 var(--sans);
  color:var(--muted);
  max-width:680px
}

.project-meta {
  display:flex;
  justify-content:space-between;
  align-items:start;
  gap:22px;
  padding:22px 0 25px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin-top:28px
}

.project-meta .tags {
  max-width:360px;
  font-size:0.6875rem
}

.project-meta .socials {
  margin-top:0;
  gap:17px;
  flex-shrink:0
}

.project-body {
  padding-top:34px
}

.project-body h2 {
  font:400 1.8125rem/1.3 var(--display);
  letter-spacing:-.025em;
  margin:41px 0 16px
}

.project-body h3 {
  font:1.0625rem var(--sans);
  margin:25px 0 10px
}

.project-body p,.project-body li {
  font-size:0.9375rem;
  line-height:1.9;
  color:var(--muted)
}

.project-body ul {
  padding-left:20px
}

.project-body li {
  padding-left:5px;
  margin-bottom:13px
}

.project-body strong {
  font-weight:550;
  color:var(--ink)
}

.photo-pair {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin:0
}

.photo-pair img {
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:2px
}

.photo-pair figcaption,.wide-figure figcaption {
  font:0.6875rem/1.7 var(--sans);
  color:var(--muted);
  padding-top:10px
}

.wide-figure {
  margin:30px 0
}

.wide-figure video {
  width:100%;
  max-height:410px;
  background:var(--wash);
  border-radius:2px
}

.diagram {
  padding:25px 24px;
  background:var(--wash);
  border:1px solid var(--line);
  border-radius:2px;
  margin:25px 0 30px
}

.diagram>.figure-label {
  display:block;
  margin-bottom:20px
}

.flow {
  display:flex;
  align-items:stretch;
  justify-content:center;
  gap:9px
}

.flow-node {
  flex:1;
  min-width:0;
  border:1px solid var(--line);
  background:var(--paper);
  padding:14px 8px;
  font:0.75rem/1.55 var(--sans);
  text-align:center;
  color:var(--ink)
}

.flow-node small {
  display:block;
  font-size:0.625rem;
  color:var(--muted);
  margin-top:4px
}

.flow-arrow {
  align-self:center;
  color:var(--accent);
  font-size:0.9375rem
}

.diagram-note {
  font:0.6875rem/1.8 var(--sans)!important;
  color:var(--muted)!important;
  margin:15px 0 0!important;
  text-align:center
}

.callout {
  border-left:2px solid var(--burgundy-edge);
  padding:1px 0 1px 20px;
  margin:30px 0
}

.callout p {
  font-size:0.8125rem;
  margin:0
}

.project-next {
  border-top:1px solid var(--line);
  padding:30px 0 40px;
  margin-top:50px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px
}

.project-next a {
  text-decoration:none
}

.project-next .next-label {
  font-size:0.625rem;
  color:var(--muted);
  display:block;
  letter-spacing:.1em;
  text-transform:none;
  margin-bottom:5px
}

.project-next .next-title {
  font:1.5rem var(--display)
}

.project-next .back-home {
  font-size:0.75rem;
  color:var(--muted)
}

.solar-diagram {
  width:100%;
  height:auto;
  max-height:310px;
  color:var(--accent);
  margin:auto
}

.links-note a {
  color:var(--accent)
}

.resume-page .shell {
  display:flex;
  flex-direction:column;
  min-height:100svh;
}

.resume-main {
  flex:1;
  padding:42px 0 30px;
}

.resume-placeholder {
  border-top:1px solid var(--line);
  padding:28px 0 60px;
}

.resume-placeholder p {
  max-width:36ch;
  margin:0;
  color:var(--muted);
  font-size:1rem;
  line-height:1.8;
}

.resume-main .back {
  margin-bottom:28px;
}

.resume-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:28px;
}

.resume-heading .eyebrow {
  margin-bottom:9px;
}

.resume-heading h1 {
  margin:0;
}

.resume-pdf-link {
  font-size:0.75rem;
  white-space:nowrap;
}

.resume-document {
  margin:0;
}

.resume-viewer {
  display:block;
  width:100%;
  height:auto;
  border:1px solid var(--line);
  background:var(--wash);
}

.resume-viewer-note {
  margin:14px 0 0;
  font-size:0.75rem;
  color:var(--muted);
}

@media(max-width:560px) {
  .resume-main { padding-top:28px; }
  .resume-heading { align-items:end; }

}


@media(min-width:1100px) {
  .shell {
  padding:0
}


}


@media(max-width:760px) {
  .hero {
    grid-template-columns:minmax(0,1fr) 185px;
    column-gap:24px;
    padding-top:58px;
  }

.below-work {
  gap:35px
}

.nav {
  gap:19px
}

.project-meta {
  flex-direction:column
}

.project-meta .socials {
  flex-shrink:1
}


}


@media(max-width:560px) {
  .shell {
  padding:0 23px
}

.site-header {
  padding:23px 0 20px
}

.wordmark {
  font-size:0.75rem;
  gap:8px
}

.nav {
  gap:17px;
  font-size:0.6875rem
}

.nav .home-about {
  display:none
}

.hero {
  grid-template-columns:1fr;
  padding-top:43px;
  position:relative;
  gap:0
}

.hero h1 {
  font-size:clamp(2.1875rem,9.5vw,2.6875rem);
  max-width:100%
}

.hero .eyebrow {
  font-size:0.5625rem
}

.intro {
  font-size:0.9375rem;
  max-width:100%
}

.hero-note {
  font-size:0.8125rem
}

.socials {
  gap:22px
}

.project-row {
  grid-template-columns:20px minmax(0,1fr);
  gap:12px;
  padding:25px 0
}

.project-row :is(h2,h3) {
  font-size:1.4375rem
}

.project-row p {
  font-size:0.75rem
}

.project-thumb {
  display:none
}

.below-work {
  grid-template-columns:1fr;
  gap:38px;
  padding-top:40px
}

.personal p {
  font-size:0.8125rem
}

.coffee-gallery { max-width:400px; }

.contact {
  margin-top:40px;
  flex-direction:column;
  align-items:start;
  gap:19px;
  padding:28px 0
}

.contact h2 {
  font-size:1.6875rem
}

.site-footer {
  font-size:0.5625rem
}

.project-main {
  padding-top:27px
}

.back {
  margin-bottom:30px
}

.project-header h1 {
  font-size:2rem
}

.project-lede {
  font-size:1rem
}

.project-body p,.project-body li {
  font-size:0.875rem
}

.project-body h2 {
  font-size:1.625rem
}

.photo-pair {
  grid-template-columns:1fr;
  gap:22px
}

.diagram {
  padding:20px 14px
}

.flow {
  flex-direction:column;
  gap:6px
}

.flow-node {
  padding:10px
}

.flow-arrow {
  transform:rotate(90deg);
  line-height:1.2
}

.project-next .next-title {
  font-size:1.125rem
}

.project-next {
  align-items:start
}

.solar-diagram {
  min-height:180px
}


}


@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto
}

*,*::before,*::after {
  transition:none!important;
  animation:none!important
}


}



/* Homepage context and personal notes. */
.background-note {
  margin:18px 0 0;
  color:var(--muted);
  font-size:0.75rem;
  line-height:1.8;
}
.hero .intro { max-width:580px; }
.hero-note { max-width:540px; }
@media(max-width:560px) {
  .hero { padding-bottom:32px; }
  .project-row :is(h2,h3) { font-size:1.5625rem; }
}

/* A full first screen keeps the introduction separate from the project reveals. */
.home-page { --home-header-height:82px; }
.home-page .site-header { height:var(--home-header-height); }
.home-page .hero {
  min-height:calc(100svh - var(--home-header-height));
  grid-template-rows:1fr auto;
  padding:48px 0 24px;
  row-gap:28px;
}
.home-page #work { padding-top:35px; }

/* The diagram stays still; off-screen content resets for its next entrance. */
.hero-art {
  margin:0;
  color:var(--accent);
  width:100%;
  max-width:240px;
  justify-self:end;
}
.hero-art svg { width:100%; height:auto; }
.orbit-burgundy { stroke:var(--burgundy-edge); stroke-width:1.5; }
.orbit-plum { stroke:var(--purple-edge); opacity:1; }
.orbit-point { fill:var(--accent-warm); stroke:var(--accent-warm); }
.hero-art figcaption {
  margin-top:17px;
  text-align:center;
  color:var(--muted);
  font:0.625rem/1.5 var(--sans);
  letter-spacing:.12em;
}
.scroll-cue {
  grid-column:1/-1;
  justify-self:center;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  padding:8px 18px;
  color:var(--muted);
  font:0.6875rem/1.5 var(--sans);
  letter-spacing:.04em;
  text-decoration:none;
}
.scroll-cue span:last-child {
  color:var(--accent);
  display:inline-block;
  font-size:1.0625rem;
  transition:transform 250ms ease;
  animation:scroll-nudge 2.8s ease-in-out infinite;
}
.scroll-cue::after {
  content:'';
  width:1px;
  height:28px;
  background:linear-gradient(var(--accent),transparent);
}
.scroll-cue:hover { color:var(--ink); }
.scroll-cue:hover span:last-child { transform:translateY(3px); }
@keyframes scroll-nudge {
  0%,75%,100% { transform:translateY(0); }
  35% { transform:translateY(5px); }
}
.reveal {
  opacity:0;
  transform:translateY(16px);
  transition:opacity 700ms cubic-bezier(.2,.65,.3,1), transform 700ms cubic-bezier(.2,.65,.3,1);
  transition-delay:var(--reveal-delay,0ms);
}
.reveal.is-visible,.reveal:focus-within {
  opacity:1;
  transform:none;
}
.project-row.reveal {
  transform:translateY(38px);
  filter:blur(2px);
  transition:opacity 650ms ease,transform 900ms cubic-bezier(.16,1,.3,1),filter 700ms ease;
}
.project-row.reveal.is-visible,.project-row.reveal:focus-within {
  transform:none;
  filter:none;
}
.project-row.reveal .project-thumb > * {
  transform:scale(.95);
  transition:transform 1100ms cubic-bezier(.16,1,.3,1);
}
.project-row.reveal.is-visible .project-thumb > *,
.project-row.reveal:focus-within .project-thumb > * { transform:none; }
@media(max-width:560px) {
  .hero-art {
    width:160px;
    justify-self:center;
    margin:2px 0 0;
  }
  .hero-art figcaption { margin-top:10px; font-size:0.5625rem; }
  .scroll-cue { justify-self:center; }
  .home-page { --home-header-height:68px; }
  .home-page .hero {
    grid-template-rows:1fr auto auto;
    row-gap:16px;
    padding:30px 0 18px;
  }
  .home-page .hero h1 { margin-bottom:18px; }
  .home-page .hero .eyebrow { margin-bottom:16px; }
  .home-page .hero-art { width:140px; }
}
@media(max-width:560px) and (max-height:740px) {
  .home-page .hero { padding-top:18px; row-gap:10px; }
  .home-page .hero-art { width:90px; }
  .home-page .hero-art figcaption { display:none; }
  .home-page .hero .socials { margin-top:16px; }
  .home-page .scroll-cue::after { height:16px; }
}
@media(prefers-reduced-motion:reduce) {
  .reveal,.project-row.reveal { opacity:1; transform:none; filter:none; transition:none; }
  .scroll-cue:hover span:last-child { transform:none; }
}
@media print {
  .reveal,.project-row.reveal { opacity:1; transform:none; filter:none; transition:none; }
  .scroll-cue { display:none; }
}

/* Small fields of pigment, with readable warm and cool tones above them. */
.project-row:nth-of-type(odd) .tags { color:var(--accent-warm); }
.project-row:nth-of-type(2) .project-thumb { background:var(--wash-purple); }
.project-row:nth-of-type(3) .project-thumb { background:#25161c; }
.project-row:nth-of-type(3) .project-thumb svg { color:var(--accent-warm); }
.project-row:hover .project-thumb { background:var(--plum); }
.diagram { border-left:2px solid var(--burgundy); }
.contact > a { text-decoration-color:var(--accent-warm); }
.contact > a:hover { text-decoration-color:var(--accent); }