:root{--paper:#f5f4ed;--ink:#162d28;--line:#c6cec2;--green:#32664a;font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper)}*{box-sizing:border-box}body{margin:0}header,main{width:min(1200px,90%);margin:auto}header,nav,.brand,.actions,figcaption,.section-title,summary{display:flex;align-items:center}header{justify-content:space-between;min-height:84px;border-bottom:1px solid var(--line);gap:18px}a{color:inherit;text-underline-offset:5px}header a,.actions a{text-decoration:none}a:hover{text-decoration:underline}.brand{gap:12px;font-weight:650}.brand b{background:var(--ink);color:white;padding:6px 8px;border-radius:6px;letter-spacing:-1px}nav,.actions{gap:26px}.desktop{border:1px solid var(--line);padding:7px 13px;border-radius:30px}.hero{display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:6%;padding:54px 0}.hero h1,footer h2,.section-title{font:500 clamp(3rem,5.8vw,5.7rem)/1.02 Georgia,serif;letter-spacing:-.055em;margin:0}.hero em{color:var(--green)}.hero p{max-width:47ch;font-size:1.1rem;margin:24px 0}.actions{flex-wrap:wrap;font-weight:600}.solid{background:var(--ink);color:white;border-radius:6px;padding:12px 20px}figure{margin:0;background:#17332c;position:relative;border-radius:12px;overflow:hidden}figure img{display:block;width:100%;height:clamp(320px,31vw,430px);object-fit:cover}figcaption{position:absolute;bottom:0;inset-inline:0;justify-content:space-between;padding:36px 18px 14px;color:white;background:linear-gradient(transparent,#101d19d9);font:12px monospace}.proof{border-block:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);padding:25px 0;gap:20px}.proof article+article{border-left:1px solid var(--line);padding-left:24px}small,.section-title span{font:12px/1.5 monospace;color:var(--green)}.proof h2,.role h3{font-size:1.25rem;margin:8px 0 3px}.proof p,.role p{margin:0;color:#445750}.section-title{justify-content:space-between;font-size:clamp(2.5rem,4vw,4rem);padding:60px 0 20px;border-bottom:2px solid var(--ink)}summary,.role{padding:22px 0;border-bottom:1px solid var(--line);gap:24px}summary{cursor:pointer;list-style:none}summary::-webkit-details-marker{display:none}summary strong{font-size:1.25rem}summary span{margin-left:auto;color:#51635b}summary:after{content:'+';font-size:1.4rem}details[open] summary:after{content:'−'}.detail{max-width:70ch;padding:0 0 22px 40px}.role{display:grid;grid-template-columns:1fr 3fr}.role h3{margin-top:0}footer{background:#dfe8d9;border-radius:14px;margin:64px 0 32px;padding:clamp(25px,5vw,70px)}footer h2{margin-bottom:24px}.skip{position:absolute;left:-999px}.skip:focus{left:10px;background:white}a:focus-visible,summary:focus-visible{outline:3px solid #38815b;outline-offset:4px}
@media(max-width:760px){header{flex-wrap:wrap;padding:14px 0;gap:10px}nav{order:3;width:100%;gap:22px}.hero{grid-template-columns:1fr;padding:32px 0;gap:26px}.hero h1{max-width:13ch}figure img{height:200px}.proof{grid-template-columns:1fr;gap:16px}.proof article+article{border-left:0;border-top:1px solid var(--line);padding:15px 0 0}summary{gap:12px}summary span{display:none}summary:after{margin-left:auto}.role{grid-template-columns:1fr;gap:6px}.detail{padding-left:0}.section-title{padding-top:40px}}

/* Profile masthead and project artwork */
:root { --paper: #fafaf8; --ink: #161b20; --green: #334f92; --line: #d5d8dc; }
.hero h1, .section-title, footer h2 { font-family: Arial, Helvetica, sans-serif; font-weight: 550; }
.hero h1 { font-size: clamp(4.2rem, 8vw, 7.5rem); line-height: .87; letter-spacing: -.08em; }
.hero h1 span { color: #4a65ab; }
.hero .identity { font-size: 1.14rem; font-weight: 650; margin: 24px 0 0; }
.identity + p { margin: 10px 0 24px; color: #4d5660; }
.feature { display: grid; grid-template-rows: auto 1fr auto; background: #192e53; color: white; min-width: 0; padding: 24px; border-radius: 4px; text-decoration: none; overflow: hidden; }
.feature:hover { text-decoration: none; background: #203962; }
.feature img { width: calc(100% + 48px); margin: -12% -24px -5%; align-self: center; }
.feature-top, .feature-bottom { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.feature-top { font: 12px/1.5 monospace; color: #d8e7ff; }
.feature-bottom strong { font-size: clamp(2rem, 4vw, 4rem); letter-spacing: -.065em; font-weight: 500; }
.feature-bottom span { font-size: 13px; }
.section-title { font-size: clamp(2.6rem, 5vw, 4.5rem); }
.proof p,.role p { color: #47515a; }
.project[open] summary { border-bottom-color: transparent; }
.project[open] { border-bottom: 1px solid var(--line); }
.detail p:first-child { margin-top: 0; }
#skill-groups { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(220px,100%),1fr)); gap: 16px 36px; }
#skill-groups article { padding: 14px 0; border-bottom: 1px solid var(--line); }
#skill-groups h3 { font: 13px monospace; color: var(--green); }
footer { background: #192e53; color: white; }
footer .solid { background: white; color: var(--ink); }
@media(max-width:760px){ .hero h1 br {display:none} .hero h1 br:after {content:' '} .hero h1{font-size:clamp(3.8rem,13vw,6rem)} nav{justify-content:space-between;gap:8px} .feature img{max-height:175px} }

header nav { flex:1; justify-content:flex-start; }
header nav a { position:relative; padding-block:8px; }
header nav a::after { content:""; position:absolute; inset:auto 0 3px; height:2px; background:currentColor; transform:scaleX(0); transform-origin:left; }
header nav a:hover, header nav a:focus-visible { text-decoration:none; }
header nav a:is(:hover,:focus-visible)::after { transform:scaleX(1); }
.feature { isolation:isolate; position:relative; background:radial-gradient(ellipse at 75% 30%,#344e78,#152841 76%); }
.feature::before { content:""; position:absolute; inset:0; z-index:-1; opacity:.28; background-image:linear-gradient(#bed8fd30 1px,transparent 1px),linear-gradient(90deg,#bed8fd30 1px,transparent 1px); background-size:36px 36px; }
.feature-bottom { padding-top:14px; border-top:1px solid #ffffff40; }
.proof { background:#eef1f5; border-block:none; border-radius:8px; padding:26px; }
.hero h1 { letter-spacing:-.065em; }
@keyframes portfolio-enter { from {opacity:0;transform:translateY(14px)} to {opacity:1;transform:none} }
@keyframes wave-drift { from {transform:scale(1.04) translate(-1%,2%)} to {transform:scale(1.11) translate(1%,-2%)} }
@media(prefers-reduced-motion:no-preference){
  html { scroll-behavior:smooth; }
  .hero h1,.hero .identity,.hero .identity+p,.hero .actions,.feature { animation:portfolio-enter .65s both; }
  .hero .identity { animation-delay:.08s; }
  .hero .identity+p,.feature { animation-delay:.15s; }
  .hero .actions { animation-delay:.22s; }
  .feature img { animation:wave-drift 4s ease-in-out alternate 1 both; }
  .feature:hover img { scale:1.045; }
  .feature img,.actions a,header nav a::after { transition:scale .4s, transform .25s; }
  .actions a:hover { transform:translateY(-2px); }
  details[open] .detail { animation:portfolio-enter .28s both; }
  .section-enter { animation:portfolio-enter .55s both; }
}
@media(max-width:760px){header{gap:4px 12px}header nav{order:0;justify-content:space-between;flex:1 1 320px}.desktop{font-size:.84rem}.proof{padding:20px}.feature-bottom{position:relative}}
.exhibit {overflow:hidden;border-radius:12px;background:#192e53;color:white;box-shadow:0 16px 42px -26px #11254399}
.exhibit-bar,.gallery-controls {display:flex;align-items:center;gap:10px}
.exhibit-bar {justify-content:space-between;padding:12px 18px;border-bottom:1px solid #ffffff30;font:13px monospace}
.gallery-controls button {font:18px system-ui;color:white;background:transparent;border:1px solid #ffffff60;border-radius:50%;width:38px;height:38px;cursor:pointer}
.gallery-controls button:hover,.gallery-controls button:focus-visible {background:white;color:#192e53}
.exhibit .feature {border-radius:0;grid-template-rows:1fr auto;height:clamp(280px,27vw,360px);animation:none}
.exhibit .feature img {min-height:0;height:100%;max-height:none;object-fit:cover;margin:0 -24px}
.exhibit .photograph img {position:absolute;inset:0;width:100%;margin:0;filter:brightness(.54);z-index:-1}
.exhibit .photograph .feature-bottom {grid-row:2}
.exhibit .feature-bottom strong {font-size:clamp(1.55rem,3.3vw,3.2rem);line-height:1.06}
.feature-bottom span {flex:none}
.sr-only {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(max-width:760px){.exhibit .feature{height:245px}.exhibit .feature-bottom{align-items:flex-end}}

.hero .typed-name { animation:none; }
.hero .typed-name > span { color:inherit; }
.typed-name i { font-style:normal; }
.typed-name i:last-child { color:#4a65ab; }
@keyframes type-letter { from { opacity:0; } to { opacity:1; } }
@media (prefers-reduced-motion:no-preference) {
  .typed-name i {
    animation:type-letter 1ms steps(1,end) both;
    animation-delay:calc(100ms + var(--letter) * 80ms);
  }
}

.exhibit { --exhibit-color:#153e43; background:var(--exhibit-color); }
.exhibit .feature { background:transparent; }
.exhibit .feature img { object-fit:contain; }
.exhibit-note { margin:0; padding:0 24px 22px; max-width:55ch; color:#e2eeeb; font-size:.94rem; min-height:4.4em; }
.hero .exhibit-note { margin:0; font-size:.94rem; }
.exhibit-bar { letter-spacing:.035em; }
.exhibit .feature-bottom { align-items:center; }
@media (prefers-reduced-motion:no-preference){.exhibit{transition:background-color .35s}}
.exhibit .feature::before { content:none; }
.exhibit .feature { height:auto; min-height:260px; gap:24px; }
.project-fact { display:grid; align-content:center; justify-items:start; }
.project-fact b { font:500 clamp(2.3rem,5.6vw,5rem)/1.12 Georgia,serif; letter-spacing:-.055em; }
.project-fact > span { color:#e2eeeb; margin-top:4px; }
.project-fact small { margin-top:18px; color:white; border-left:2px solid #b2d8cb; padding-left:10px; }

.ask-layout { display:grid; grid-template-columns:1fr 2fr; gap:8%; }
.ask-layout > p { max-width:27ch; color:#47515a; }
.ask-layout summary { justify-content:space-between; font-weight:650; }
.ask-layout details p { max-width:60ch; }
.ask-layout details a { display:inline-block; margin-bottom:18px; color:var(--green); }
@media(max-width:760px){.ask-layout{display:block}.ask-layout > p{max-width:none}}

.section-title > span {
  letter-spacing: normal;
  line-height: 1;
  flex: none;
  align-self: center;
  font-variant-numeric: tabular-nums;
}

/* Raised lettering, lit from the upper left. */
.hero .typed-name {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 750;
  letter-spacing: -.055em;
  color: #192329;
  text-shadow: 0 1px #aab8bd, 1px 2px #9baab0, 2px 3px #899aa2,
    2px 4px #798b94, 3px 5px #677c87, 4px 6px 1px #536873,
    6px 10px 9px #24394726;
}
@media (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine) {
  .hero .typed-name {
    transform: perspective(850px) rotateX(var(--name-rx,0deg)) rotateY(var(--name-ry,0deg));
    transition: transform 160ms ease-out;
    transform-origin: 45% center;
  }
}
