:root{
  --paper:#F4F1EA;      /* page ground (survey paper) */
  --band:#ECE7DC;       /* About section band */
  --well:#E3DCCD;       /* image placeholder / poster */
  --rule:#DDD5C6;       /* hairlines between sections */
  --rule-strong:#CFC6B5;/* legend border, outline buttons */
  --contour:#DDD3C1;    /* minor contour */
  --contour-major:#CDBFA6; /* every 3rd contour */
  --contour-label:#8E8576; /* decorative year labels only */
  --ink:#1D1F1C;        /* text, 14.8:1 on paper */
  --body:#4C4942;       /* descriptions */
  --muted:#6A665D;      /* captions, mono meta, 5.2:1 */
  --accent:#A8461A;     /* burnt clay, 5.2:1 on paper; white on it 5.9:1 */
  --radius-img:6px;
  --container:1280px;
  --gutter:48px;        /* 16px under 640px */

  --serif:"Instrument Serif", Georgia, "Times New Roman", serif;
  --sans:"Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
@media (max-width:640px){ :root{ --gutter:16px; } }

/* ---------- base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 16px/1.55 var(--sans);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4,p,ol,ul,figure{ margin:0; }
ol,ul{ padding:0; list-style:none; }
img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; }
em{ font-style:italic; color:var(--accent); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }
[id]{ scroll-margin-top:16px; }

.wrap{ width:100%; max-width:calc(var(--container) + 2 * var(--gutter)); margin-inline:auto; padding-inline:var(--gutter); }
.serif{ font-family:var(--serif); font-weight:400; }
.mono{ font-family:var(--mono); font-size:12px; letter-spacing:.02em; }
.caps{ text-transform:uppercase; letter-spacing:.1em; }
.muted{ color:var(--muted); }
.body{ color:var(--body); font-size:16px; }
.h2{ font:400 clamp(44px, 4.8vw, 68px)/1 var(--serif); letter-spacing:-.01em; }
.underline{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.18em; }
.underline:hover{ color:var(--accent); }
.sm-only{ display:none; }

.skip{ position:absolute; left:16px; top:-60px; z-index:50; background:var(--ink); color:var(--paper); padding:12px 16px; border-radius:999px; }
.skip:focus{ top:16px; }

/* ---------- buttons ---------- */
.pill{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:44px; padding:0 20px; border-radius:999px;
  font:500 15px/1 var(--sans); white-space:nowrap;
  transition:background-color .2s, color .2s;
}
.pill-ink{ background:var(--ink); color:var(--paper); }
.pill-ink:hover{ background:#000; }
.pill-accent{ background:var(--accent); color:#fff; }
.pill-accent:hover{ background:#923c15; }
.pill-lg{ height:54px; padding:0 28px; }
.text-link{
  display:inline-flex; align-items:center; min-height:44px;
  font:500 15px/1 var(--sans);
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:6px;
}
.text-link:hover{ color:var(--accent); }
.round-btn{
  width:44px; height:44px; flex:none; border-radius:50%;
  border:1px solid var(--rule-strong); background:var(--paper);
  display:inline-grid; place-items:center; font-size:20px; line-height:1;
}
.round-btn:hover{ border-color:var(--ink); }

/* ---------- contours ---------- */
.contours{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.contours img{ width:100%; height:100%; object-fit:cover; object-position:center; }

/* ---------- hero ---------- */
.hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--rule); }
.hero > *:not(.contours){ position:relative; z-index:1; }
.site-header{ height:84px; display:flex; align-items:center; gap:34px; }
.brand{ display:flex; align-items:baseline; gap:14px; margin-right:auto; min-height:44px; align-items:center; }
.brand-name{ font:400 28px/1 var(--serif); }
.brand-coords{ font-size:12px; }
.nav{ display:flex; gap:34px; }
.nav a{ font:500 15px/1 var(--sans); padding:14px 0; }
.nav a:hover{ color:var(--accent); }
.menu-btn{
  display:none; width:44px; height:44px; border-radius:50%;
  border:1px solid var(--rule-strong); background:var(--paper);
  flex-direction:column; align-items:center; justify-content:center; gap:6px;
}
.menu-btn span{ display:block; width:16px; height:1.5px; background:var(--ink); }

.hero-body{ padding-top:clamp(56px, 8.3vw, 120px); padding-bottom:clamp(72px, 9.7vw, 140px); display:flex; flex-direction:column; align-items:flex-start; gap:36px; }
.hero-kicker{ font-size:13px; }
.hero-title{
  font:400 clamp(46px, 6.1vw, 88px)/1 var(--serif); letter-spacing:-.02em;
  max-width:1060px; text-wrap:balance;
}
.hero-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:28px; }
.hero-sub{ font-size:17px; color:var(--muted); }

@media (max-width:899px){
  .nav{ display:none; }
  .menu-btn{ display:inline-flex; }
  .site-header{ gap:10px; }
  .lg-only{ display:none; }
  .sm-only{ display:inline; }
}
@media (max-width:640px){
  .brand-coords{ display:none; }
  .brand-name{ font-size:24px; }
  .hero-body{ gap:28px; }
  .hero-actions{ flex-direction:column; align-items:stretch; gap:12px; width:100%; }
  .hero-actions .pill-lg{ height:52px; }
  .hero-contact{
    justify-content:center; height:52px; border:1px solid var(--ink); border-radius:999px;
    text-decoration:none;
  }
}

/* ---------- showreel ---------- */
.showreel{ display:grid; grid-template-columns:1fr 260px; gap:40px; align-items:end; padding-top:72px; padding-bottom:112px; }
.reel-media{ position:relative; border-radius:var(--radius-img); overflow:hidden; background:var(--well); aspect-ratio:16/9; }
.reel-video{ width:100%; height:100%; object-fit:cover; background:var(--well); }
.reel-play{
  position:absolute; left:28px; bottom:28px; width:72px; height:72px; border-radius:50%;
  border:0; background:var(--paper); display:grid; place-items:center;
  transition:transform .2s;
}
.reel-play svg{ width:26px; height:26px; fill:var(--ink); margin-left:3px; }
.reel-play:hover{ transform:scale(1.05); }
.reel-play[hidden]{ display:none; }
.reel-caption{ display:flex; flex-direction:column; gap:10px; }
.reel-title{ font:400 34px/1 var(--serif); }
.reel-desc{ font-size:15px; color:var(--muted); }
.reel-meta{ font-size:13px; }
@media (max-width:760px){
  .showreel{ grid-template-columns:1fr; gap:16px; padding-top:48px; padding-bottom:72px; }
  .reel-caption{ flex-direction:row; justify-content:space-between; align-items:baseline; }
  .reel-desc{ display:none; }
  .reel-title{ font-size:28px; }
  .reel-play{ left:16px; bottom:16px; width:60px; height:60px; }
}

/* ---------- work ---------- */
.work{ border-top:1px solid var(--rule); padding-top:112px; padding-bottom:80px; }
.work-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:32px; }
.legend{ border:1px solid var(--rule-strong); border-radius:6px; padding:16px 20px; min-width:300px; }
.legend-cap{ margin-bottom:8px; font-size:11px; }
.legend-list a{ display:flex; align-items:center; gap:12px; min-height:30px; font-size:15px; }
.legend-list a:hover .legend-name{ color:var(--accent); }
.sym{ color:var(--accent); font-family:var(--mono); width:1em; text-align:center; }
.legend-count{ margin-left:auto; padding-left:24px; }

.group{ padding-top:72px; padding-bottom:32px; }
.group-head{ display:flex; align-items:baseline; flex-wrap:wrap; gap:14px; padding-bottom:16px; border-bottom:1px solid var(--ink); margin-bottom:40px; }
.group-head .sym{ font-size:22px; }
.group-title{ font:400 clamp(30px, 2.9vw, 42px)/1 var(--serif); }
.group-note{ color:var(--muted); font-size:15px; }
.grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(360px, 100%), 1fr)); gap:56px 32px; }

.card{ display:flex; flex-direction:column; gap:16px; }
.card-media{ position:relative; aspect-ratio:16/9; border-radius:var(--radius-img); overflow:hidden; background:var(--well); }
.card-media img{ width:100%; height:100%; object-fit:cover; }
@media (prefers-reduced-motion:no-preference){
  .card-media img{ transition:transform .4s ease; }
  .card:hover .card-media img, .card:focus-visible .card-media img{ transform:scale(1.02); }
}
.card-view{
  position:absolute; right:14px; bottom:14px; height:32px; padding:0 14px; border-radius:999px;
  background:var(--paper); font:500 13px/32px var(--sans); opacity:0; transition:opacity .2s;
}
.card:hover .card-view, .card:focus-visible .card-view{ opacity:1; }
.card-head{ display:flex; flex-direction:column; gap:8px; }
.card-id{ font-size:12px; }
.card-title{ font:400 clamp(23px, 2vw, 28px)/1.1 var(--serif); }
.card:hover .card-title, .card:hover .card-id,
.card:focus-visible .card-title, .card:focus-visible .card-id{ color:var(--accent); }
.card-desc{ font-size:15px; color:var(--body); }
.card-stack{ font-size:12px; }

.ph{ width:100%; height:100%; display:grid; place-items:center; background:var(--well); font:400 11px/1 var(--mono); color:var(--muted); }

@media (max-width:640px){
  .work{ padding-top:72px; }
  .legend{ width:100%; min-width:0; }
  .legend-list a{ min-height:44px; }
  .group{ padding-top:56px; }
  .grid{ gap:44px; }
}

/* ---------- experience ---------- */
.experience{ border-top:1px solid var(--rule); padding-top:112px; padding-bottom:112px; }
.exp-top{ display:flex; flex-wrap:wrap; gap:48px; }
.exp-intro{ flex:1 1 240px; display:flex; flex-direction:column; gap:20px; }
.exp-lede{ font-size:15px; max-width:300px; }
.exp-list{ flex:2.2 1 600px; }
.exp-row{
  display:grid; grid-template-columns:96px 200px 1fr auto; align-items:baseline; gap:0 16px;
  padding:22px 0; border-top:1px solid var(--rule);
}
.exp-elev{ font-size:12px; color:var(--accent); }
.exp-dates{ font-size:13px; }
.exp-role{ font:400 27px/1.15 var(--serif); }
.exp-company{ font:500 15px/1.3 var(--sans); }
.exp-foot{ margin-top:64px; border-top:1px solid var(--ink); padding-top:36px; display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.exp-foot .caps{ font-size:11px; margin-bottom:12px; }
.exp-school{ font-size:24px; line-height:1.2; margin-bottom:6px; }
.exp-stack{ max-width:520px; }

@media (max-width:760px){
  .experience{ padding-top:72px; padding-bottom:72px; }
  .exp-list{ flex-basis:100%; }
  .exp-row{ display:flex; flex-wrap:wrap; gap:8px 0; padding:18px 0; }
  .exp-elev, .exp-dates, .exp-company{ font:400 12px/1.4 var(--mono); color:var(--muted); }
  .exp-elev{ order:1; color:var(--accent); }
  .exp-dates{ order:2; }
  .exp-company{ order:3; }
  .exp-dates::before, .exp-company::before{ content:"\00a0·\00a0"; color:var(--muted); }
  .exp-role{ order:4; flex-basis:100%; font-size:23px; }
  .exp-foot{ grid-template-columns:1fr; }
}

/* ---------- about ---------- */
.about{ background:var(--band); padding:112px 0; border-top:1px solid var(--rule); }
.about-top{ display:flex; flex-wrap:wrap; gap:24px 48px; }
.about-top > .mono{ flex:1 1 240px; font-size:12px; padding-top:12px; }
.about-statement{ flex:2.2 1 600px; font:400 clamp(28px, 2.9vw, 42px)/1.22 var(--serif); text-wrap:pretty; }
.expertise{
  margin-top:64px; border-top:1px solid var(--ink); padding-top:28px;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:28px 32px;
}
.exp-n{ font:500 12px/1 var(--mono); color:var(--accent); display:block; margin-bottom:12px; }
.exp-t{ font:500 18px/1.3 var(--sans); }
.exp-s{ font-size:15px; color:var(--body); margin-top:4px; }
@media (max-width:640px){
  .about{ padding:72px 0; }
  .about-statement{ flex-basis:100%; }
  .expertise{ grid-template-columns:1fr; gap:0; padding-top:0; margin-top:48px; }
  .expertise li{ padding:20px 0; border-top:1px solid var(--rule-strong); }
  .expertise li:first-child{ border-top:0; }
}

/* ---------- contact ---------- */
.contact{ position:relative; overflow:hidden; border-top:1px solid var(--rule); }
.contact .contours{ opacity:.7; }
.contact > *:not(.contours){ position:relative; z-index:1; }
.contact-body{ padding-top:128px; padding-bottom:96px; display:flex; flex-direction:column; gap:28px; }
.contact-body > .caps{ font-size:12px; }
.contact-title{ font:400 clamp(58px, 7.2vw, 104px)/.95 var(--serif); letter-spacing:-.02em; }
.contact-grid{
  margin-top:28px; border-top:1px solid var(--ink); padding-top:32px;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:32px;
}
.contact-grid .caps{ font-size:11px; margin-bottom:10px; }
.contact-val{ display:inline-block; font-size:clamp(22px, 2vw, 28px); line-height:1.2; overflow-wrap:anywhere; }
.contact-cta{ display:flex; align-items:flex-end; }
.site-footer{ border-top:1px solid var(--rule); padding-top:24px; padding-bottom:24px; display:flex; justify-content:space-between; align-items:center; font-size:12px; }
.site-footer a{ min-height:44px; display:inline-flex; align-items:center; }
.site-footer a:hover{ color:var(--accent); }
@media (max-width:640px){
  .contact-body{ padding-top:88px; padding-bottom:64px; }
  .contact-cta .pill{ width:100%; }
}

/* ---------- menu sheet ---------- */
.menu{
  width:100%; max-width:none; height:100%; max-height:none; margin:0; padding:0; border:0;
  background:var(--paper); color:var(--ink);
}
.menu-inner{ display:flex; flex-direction:column; min-height:100%; padding-bottom:32px; }
.menu-top{ height:84px; display:flex; align-items:center; justify-content:space-between; }
.menu-nav{ display:flex; flex-direction:column; padding:24px 0; border-top:1px solid var(--rule); margin-bottom:auto; }
.menu-nav a{ font:400 44px/1.1 var(--serif); padding:12px 0; border-bottom:1px solid var(--rule); }
.menu-pdf{ margin-top:32px; }

/* ---------- lightbox ---------- */
.lightbox{
  width:100%; max-width:none; height:100%; max-height:none; margin:0; padding:16px;
  border:0; background:transparent; overflow:auto;
}
.lightbox[open]{ display:grid; place-items:center; }
.lightbox::backdrop{ background:rgba(29,31,28,.55); }
.lb-panel{
  position:relative; width:100%; max-width:1200px;
  background:#FAF8F3; border:1px solid var(--rule); border-radius:8px;
  padding:28px 80px; display:flex; flex-direction:column; gap:18px;
}
.lb-top{ display:flex; justify-content:space-between; align-items:center; gap:16px; }
.lb-meta{ font-size:12px; }
.lb-figure{
  /* same 16:9 crop as the cards; shrinks on short screens so the caption stays visible */
  aspect-ratio:16/9; width:min(100%, calc((100dvh - 380px) * 16 / 9)); margin-inline:auto;
  border-radius:var(--radius-img); overflow:hidden; background:var(--well);
}
.lb-figure picture, .lb-figure img{ width:100%; height:100%; }
.lb-figure img{ object-fit:cover; }
.lb-thumbs{ display:flex; gap:8px; flex-wrap:wrap; }
.lb-thumbs:empty{ display:none; }
.lb-thumb{
  width:96px; aspect-ratio:16/9; padding:0; border:1px solid transparent; border-radius:4px;
  overflow:hidden; background:var(--well); opacity:.6; min-height:44px;
}
.lb-thumb img{ width:100%; height:100%; object-fit:cover; }
.lb-thumb[aria-current="true"]{ opacity:1; border-color:var(--ink); }
.lb-thumb:hover{ opacity:1; }
.lb-info{ display:grid; grid-template-columns:1.4fr 1fr; gap:32px; align-items:start; }
.lb-title{ font:400 38px/1.05 var(--serif); margin-bottom:10px; }
.lb-desc{ font-size:16px; color:var(--body); }
.lb-stack{ text-align:right; font-size:12px; padding-top:10px; }
.lb-prev, .lb-next{ position:absolute; top:50%; transform:translateY(-50%); background:var(--paper); }
.lb-prev{ left:18px; }
.lb-next{ right:18px; }
@media (max-width:760px){
  .lightbox{ padding:0; }
  .lightbox[open]{ display:block; }
  .lb-panel{ min-height:100%; border-radius:0; border:0; padding:16px; }
  .lb-figure{ width:100%; }
  .lb-info{ grid-template-columns:1fr; gap:12px; }
  .lb-title{ font-size:30px; }
  .lb-stack{ text-align:left; padding-top:0; }
  .lb-nav{ margin-top:auto; display:flex; justify-content:space-between; padding-top:16px; border-top:1px solid var(--rule); }
  .lb-prev, .lb-next{ position:static; transform:none; }
}