@font-face{
  font-family:"EB Garamond"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/EBGaramond-400.woff2") format("woff2");
}
@font-face{
  font-family:"EB Garamond"; font-style:normal; font-weight:500; font-display:swap;
  src:url("fonts/EBGaramond-500.woff2") format("woff2");
}
@font-face{
  font-family:"EB Garamond"; font-style:italic; font-weight:400; font-display:swap;
  src:url("fonts/EBGaramond-400italic.woff2") format("woff2");
}
@font-face{
  font-family:"Jost"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/Jost-400.woff2") format("woff2");
}
@font-face{
  font-family:"Jost"; font-style:normal; font-weight:600; font-display:swap;
  src:url("fonts/Jost-600.woff2") format("woff2");
}

:root{
  --paper:#ffffff;
  --paper-raised:#f1f0ec;
  --ink:#141310;
  --ink-soft:#54524b;
  --ink-faint:#8f8c82;
  --line:#dedad0;
  --line-strong:#c7c2b5;
  --overlay:rgba(20,19,16,.94);

  --header-h:4.5rem;
  --header-h-mobile:3.75rem;

  --font-display: "EB Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
  --font-body: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Consolas, monospace;

  --ease: cubic-bezier(.22,.61,.36,1);
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#121110; --paper-raised:#1b1a17; --ink:#f2f0ea; --ink-soft:#b6b2a6;
    --ink-faint:#7c786d; --line:#2c2a25; --line-strong:#3c392f; --overlay:rgba(6,6,5,.96);
  }
}
:root[data-theme="dark"]{
  --paper:#121110; --paper-raised:#1b1a17; --ink:#f2f0ea; --ink-soft:#b6b2a6;
  --ink-faint:#7c786d; --line:#2c2a25; --line-strong:#3c392f; --overlay:rgba(6,6,5,.96);
}
:root[data-theme="light"]{
  --paper:#ffffff; --paper-raised:#f1f0ec; --ink:#141310; --ink-soft:#54524b;
  --ink-faint:#8f8c82; --line:#dedad0; --line-strong:#c7c2b5; --overlay:rgba(20,19,16,.94);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }
body{
  margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-body);
  -webkit-font-smoothing:antialiased; line-height:1.5;
}
img{max-width:100%; display:block;}
a{color:inherit;}
.wrap{max-width:1320px; margin:0 auto; padding:0 clamp(1.25rem,4vw,3.5rem);}
h1,h2,h3{font-family:var(--font-display); font-weight:500; margin:0; text-wrap:balance;}
p{margin:0;}
.eyebrow{
  font-family:var(--font-mono); font-size:1.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-faint);
}
.measure{max-width:38rem;}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0;}

/* ================= header ================= */
.site-header{
  position:sticky; top:0; z-index:100; height:var(--header-h);
  display:flex; align-items:center;
  background:color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter:blur(10px) saturate(1.1);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.site-header.scrolled{border-color:var(--line);}
.header-inner{display:flex; align-items:center; justify-content:space-between; width:100%; gap:2rem;}
.brand{
  font-family:var(--font-display); font-size:clamp(1.4rem,2.3vw,1.85rem); letter-spacing:.02em;
  text-decoration:none; white-space:nowrap;
}
.brand-sub{color:var(--ink-faint); font-style:italic;}

.site-nav{display:flex; align-items:center; gap:clamp(1.1rem,2.4vw,2.1rem);}
.site-nav > a, .nav-item > a{
  display:block;
  font-family:var(--font-mono); font-size:0.9em; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; color:var(--ink-soft); padding:.4em 0; border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.site-nav > a:hover, .nav-item > a:hover,
.site-nav > a.active, .nav-item > a.active{ color:var(--ink); border-color:var(--ink); }
.nav-item{position:relative;}
.sub-nav{
  position:absolute; top:100%; left:50%; transform:translate(-50%,-6px);
  display:flex; flex-direction:column; gap:.1rem;
  background:var(--paper); border:1px solid var(--line); min-width:12rem; padding:.6rem 0;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
  box-shadow:0 12px 28px rgba(0,0,0,.08);
}
.nav-item:hover .sub-nav, .nav-item:focus-within .sub-nav{
  opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0);
}
.sub-nav a{
  display:block; padding:.55rem 1.1rem; text-decoration:none; color:var(--ink-soft);
  font-family:var(--font-body); font-size:.85rem; letter-spacing:0; text-transform:none;
  border-bottom:0; transition:color .15s ease, background .15s ease;
}
.sub-nav a:hover, .sub-nav a.active{ color:var(--ink); background:var(--paper-raised); }
.sub-nav a.sub-nav-nested{padding-left:2rem; font-size:.78rem; color:var(--ink-faint);}

.lang-switch{
  display:flex; align-items:center; gap:.5rem;
  margin-left:.3rem; padding-left:1.2rem; border-left:1px solid var(--line);
}
.lang-link{
  display:block;
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; color:var(--ink-faint); transition:color .2s ease;
}
.lang-link:hover{color:var(--ink);}
.lang-link.active{color:var(--ink); text-decoration:underline; text-underline-offset:.3em;}
.lang-sep{color:var(--line-strong); font-size:.65rem;}

.nav-toggle{display:none; width:2.2rem; height:2.2rem; position:relative;}
.nav-toggle span{
  position:absolute; left:.3rem; right:.3rem; height:1px; background:var(--ink);
  transition:transform .25s ease, opacity .25s ease;
}
.nav-toggle span:nth-child(1){top:.8rem;}
.nav-toggle span:nth-child(2){top:1.2rem;}
.nav-toggle span:nth-child(3){top:1.6rem;}
.nav-toggle.open span:nth-child(1){transform:translateY(.4rem) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-.4rem) rotate(-45deg);}

.mobile-menu{
  position:fixed; inset:var(--header-h-mobile) 0 0 0; z-index:90;
  background:var(--paper); transform:translateY(-8px); opacity:0; visibility:hidden;
  transition:opacity .25s ease, transform .25s ease, visibility .25s;
  overflow-y:auto; padding:1rem clamp(1.25rem,4vw,3.5rem) 3rem;
}
.mobile-menu.open{opacity:1; visibility:visible; transform:none;}
.mobile-menu a{
  display:block; text-decoration:none; font-family:var(--font-display); font-size:1.5rem;
  padding:.7rem 0; border-bottom:1px solid var(--line); color:var(--ink);
}
.mobile-menu .mobile-sub{padding-left:1.2rem;}
.mobile-menu .mobile-sub a{font-family:var(--font-body); font-size:1.05rem; color:var(--ink-soft); border-bottom:1px solid var(--line);}
.mobile-menu .mobile-sub a.mobile-sub-nested{padding-left:1.4rem; font-size:.92rem; color:var(--ink-faint);}
.mobile-lang{display:flex; align-items:center; gap:1rem; padding:1.4rem 0 0;}
.mobile-lang a{
  display:inline; border-bottom:0; padding:0; font-family:var(--font-mono); font-size:.85rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);
}
.mobile-lang a.active{color:var(--ink); text-decoration:underline; text-underline-offset:.3em;}
.mobile-lang .lang-sep{color:var(--line-strong);}

@media (max-width:860px){
  :root{--header-h:var(--header-h-mobile);}
  .site-nav{display:none;}
  .nav-toggle{display:block;}
}

/* ================= sections ================= */
section{scroll-margin-top:var(--header-h);}
#sketches{scroll-margin-top:calc(var(--header-h) + 1.5rem);}
.block{padding:clamp(4.5rem,10vw,8rem) 0;}
.block + .block{border-top:1px solid var(--line);}
.section-head{margin-bottom:clamp(2.5rem,6vw,4.5rem);}
.section-head h2{font-size:clamp(2rem,4.5vw,3.2rem);}
.section-head .eyebrow{
  font-size:clamp(1.15rem,2.4vw,1.6rem); letter-spacing:.06em; color:var(--ink); margin-bottom:0;
}
.section-head p{margin-top:1.1rem; color:var(--ink-soft); line-height:1.7;}

/* ================= reveal ================= */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease);}
.reveal.in{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none; transition:none;} }

/* ================= hero ================= */
.hero{position:relative;}
.hero-media{
  position:relative; height:min(78vh,760px); min-height:420px; overflow:hidden; background:var(--paper-raised);
  perspective:1000px;
}
.hero-media{ --parallax-y:0px; --tilt-x:0deg; --tilt-y:0deg; }
.hero-media .ph-slot{position:absolute; inset:0; border:0;}
.hero-media .ph-slot .ph-media{
  position:absolute; inset:-8% -2%; will-change:transform;
  transform:translateY(var(--parallax-y)) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition:transform .3s ease-out;
}
.hero-copy{padding-top:clamp(3rem,7vw,5rem); padding-bottom:clamp(2.5rem,6vw,4rem);}
.hero-lead{color:var(--ink-soft); font-size:clamp(1.1rem,2vw,1.4rem); line-height:1.4; max-width:44rem;}
.hero-lead + .hero-lead{margin-top:1.1rem; color:var(--ink-soft); font-size:clamp(1.1rem,2vw,1.4rem);}
.refrain{
  margin:clamp(3rem,7vw,5rem) auto 0; max-width:46rem; text-align:center;
  font-family:var(--font-display); font-style:italic; font-size:clamp(1.1rem,2vw,1.4rem);
  line-height:1.5; color:var(--ink-soft);
}
.hero-copy .refrain{
  margin:1.1rem 0 0; max-width:44rem; text-align:left;
  font-family:var(--font-display); font-style:italic; font-size:clamp(1.1rem,2vw,1.4rem);
  line-height:1.4; color:var(--ink-soft);
}

/* ================= work teaser (home) ================= */
.teaser-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);}
@media (max-width:900px){ .teaser-grid{grid-template-columns:repeat(2,1fr);} }
.teaser{position:relative; aspect-ratio:3/4; background:var(--paper); overflow:hidden; text-decoration:none; display:block;}
.teaser .ph-slot{position:absolute; inset:0;}
.teaser-label{
  position:absolute; left:0; right:0; bottom:0; padding:1.4rem 1.3rem;
  background:linear-gradient(to top, rgba(0,0,0,.55), transparent 70%);
  color:#fff; font-family:var(--font-display); font-size:1.15rem; letter-spacing:.01em;
}
.teaser:hover .ph-media{transform:scale(1.045);}

/* ================= placeholder slots ================= */
.ph-slot{
  position:relative; overflow:hidden; background:var(--paper-raised);
  border:1px solid var(--line);
}
.ph-slot .ph-media{
  position:absolute; inset:0; transition:transform .6s var(--ease);
}
.ph-slot .ph-inner{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.5rem; color:var(--ink-faint); text-align:center; padding:1rem;
}
.ph-slot .ph-mark{
  width:1.6rem; height:1.6rem; border:1px solid var(--line-strong); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:.9rem; line-height:1;
}
.ph-slot .ph-name{font-family:var(--font-mono); font-size:.62rem; letter-spacing:.04em; word-break:break-all; padding:0 .5rem;}
.ph-slot img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.ph-slot img.broken{display:none;}

/* ================= work categories ================= */
.category{padding-top:clamp(3rem,7vw,4.5rem);}
.category + .category{border-top:1px solid var(--line); margin-top:clamp(3rem,7vw,4.5rem);}
.category-head{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:2.2rem;}
.category-head h3{font-size:clamp(1.6rem,3vw,2.2rem);}
.tag-line{font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); max-width:26rem; text-align:right; line-height:1.9;}
@media (max-width:640px){ .tag-line{text-align:left;} }


.grid{display:grid; grid-template-columns:repeat(3,1fr); column-gap:clamp(.75rem,1.6vw,1.25rem); row-gap:clamp(2.75rem,5.5vw,4.5rem);}
@media (max-width:820px){ .grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:480px){ .grid{grid-template-columns:1fr;} }
.tile{width:100%; text-align:left; display:flex; flex-direction:column; gap:.6rem;}
.tile .ph-slot{width:100%; aspect-ratio:4/5;}
.tile:hover .ph-media{transform:scale(1.04);}
.tile-label{display:flex; justify-content:space-between; align-items:baseline; gap:.6rem;}
.tile-title{font-family:var(--font-display); font-size:.98rem; color:var(--ink);}
.tile-year{font-family:var(--font-mono); font-size:.68rem; color:var(--ink-faint); white-space:nowrap; font-variant-numeric:tabular-nums;}

/* extra photos of a work already shown by its primary tile — not laid out in
   the grid, but still real .tile elements so lightbox prev/next walks through
   them before moving on to the next work */
.tile--extra{display:none;}

.tile-count{
  position:absolute; right:.6rem; bottom:.6rem; z-index:1;
  background:rgba(20,19,16,.72); color:#fff;
  font-family:var(--font-mono); font-size:.65rem; letter-spacing:.03em; font-variant-numeric:tabular-nums;
  padding:.25em .55em; line-height:1;
}

/* ================= atelier ================= */
.atelier-grid{display:grid; grid-template-columns:repeat(3,1fr); column-gap:clamp(.75rem,1.6vw,1.25rem); row-gap:clamp(2.75rem,5.5vw,4.5rem);}
@media (max-width:820px){ .atelier-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:480px){ .atelier-grid{grid-template-columns:1fr;} }
.atelier-grid .tile .ph-slot{aspect-ratio:3/2;}

/* ================= about ================= */
.about-copy{display:flex; flex-direction:column; gap:1.4rem; font-size:1.05rem; line-height:1.85; color:var(--ink-soft); max-width:44rem;}
.about-copy p{margin:0;}
.about-grid{display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(2.5rem,6vw,5rem); align-items:start;}
@media (max-width:900px){ .about-grid{grid-template-columns:1fr;} }
.timeline{list-style:none; margin:0; padding:0; display:flex; flex-direction:column;}
.timeline li{padding:1.3rem 0; border-top:1px solid var(--line);}
.timeline li:last-child{border-bottom:1px solid var(--line);}
.timeline .t-key{font-family:var(--font-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); display:block; margin-bottom:.5rem;}
.timeline .t-val{font-family:var(--font-display); font-size:1.15rem; display:block; margin-bottom:.35rem;}
.timeline .t-desc{color:var(--ink-soft); font-size:.92rem; line-height:1.6;}

/* ================= exhibitions ================= */
.ex-list{list-style:none; margin:0; padding:0;}
.ex-list li{
  display:grid; grid-template-columns:9rem 1fr; gap:1.4rem;
  padding:.95rem 0; border-top:1px solid var(--line); font-size:.94rem; line-height:1.55;
}
.ex-list li:last-child{border-bottom:1px solid var(--line);}
@media (max-width:600px){ .ex-list li{grid-template-columns:1fr; gap:.2rem;} }
.ex-date{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.03em; color:var(--ink-faint); padding-top:.15rem; font-variant-numeric:tabular-nums;}
.ex-desc{color:var(--ink-soft);}
.ex-desc b{color:var(--ink); font-weight:600;}
.sub-block{margin-top:clamp(3rem,6vw,4.5rem);}
.sub-block h3{font-size:1.2rem; margin-bottom:1.2rem;}

/* ================= press ================= */
.press-list{list-style:none; margin:0; padding:0;}
.press-list li{border-top:1px solid var(--line);}
.press-list li:last-child{border-bottom:1px solid var(--line);}
.press-list a{
  display:flex; flex-wrap:wrap; gap:.6rem 1.2rem; padding:1.1rem 0; align-items:baseline;
  text-decoration:none; transition:opacity .2s ease;
}
.press-list a:hover{opacity:.6;}
.press-pub{font-family:var(--font-display); font-size:1.05rem;}
.press-note{font-family:var(--font-mono); font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint);}
.press-gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.5rem,1.4vw,1rem); margin-top:clamp(2.5rem,5vw,4rem);}
@media (max-width:820px){ .press-gallery{grid-template-columns:repeat(2,1fr);} }
.press-gallery .tile .ph-slot{aspect-ratio:4/3;}

/* ================= contact ================= */
.contact-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; max-width:30rem;}
.contact-list li{padding:1.2rem 0; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;}
.contact-list li:last-child{border-bottom:1px solid var(--line);}
.contact-list a{text-decoration:none; font-family:var(--font-display); font-size:1.2rem; transition:color .2s ease;}
.contact-list a:hover{color:var(--ink-faint);}

/* ================= footer ================= */
footer{border-top:1px solid var(--line); padding:clamp(2.5rem,5vw,4rem) 0;}
.foot-grid{display:flex; justify-content:space-between; align-items:center; gap:2rem; flex-wrap:wrap;}
.foot-brand{font-family:var(--font-display); font-size:1.05rem;}
.foot-note{color:var(--ink-faint); font-size:.78rem; font-family:var(--font-mono); letter-spacing:.03em;}

/* ================= lightbox ================= */
.lightbox{
  position:fixed; inset:0; z-index:200; background:var(--overlay);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s;
}
.lightbox.open{opacity:1; visibility:visible;}
.lightbox-frame{
  position:relative; width:min(88vw,1100px); height:min(82vh,820px);
  display:flex; flex-direction:column; align-items:center; gap:1.1rem;
}
.lightbox-slot{width:100%; flex:1 1 auto; min-height:0; border:1px solid rgba(255,255,255,.18);}
.lightbox-slot .ph-inner{color:rgba(255,255,255,.55);}
.lightbox-slot .ph-mark{border-color:rgba(255,255,255,.3);}
.lightbox-slot img{object-fit:contain;}
.lightbox-info{width:100%; max-width:44rem; text-align:center; color:#fff; flex:0 0 auto;}
.lightbox-title{font-family:var(--font-display); font-size:1.35rem; margin:0 0 .4rem;}
.lightbox-sub{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  opacity:.7; margin:0; font-variant-numeric:tabular-nums;
}
.lightbox-desc{font-family:var(--font-body); font-size:.92rem; line-height:1.65; opacity:.85; margin:1rem 0 0;}
.lightbox-close, .lightbox-prev, .lightbox-next{
  position:fixed; color:#fff; opacity:.75; transition:opacity .2s ease;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{opacity:1;}
.lightbox-close{top:1.6rem; right:1.8rem; font-size:1.6rem; line-height:1;}
.lightbox-prev, .lightbox-next{top:50%; transform:translateY(-50%); font-size:2rem; padding:.5rem 1rem;}
.lightbox-prev{left:.5rem;}
.lightbox-next{right:.5rem;}
@media (max-width:640px){
  .lightbox-prev, .lightbox-next{font-size:1.5rem; padding:.4rem .7rem;}
  .lightbox-close{top:1rem; right:1rem;}
}

.placeholder-note{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.03em; color:var(--ink-faint);
  border:1px dashed var(--line-strong); padding:1rem 1.2rem; line-height:1.7; max-width:36rem;
}