:root{
  --ink:#1B2430;
  --ink-deep:#141B25;
  --paper:#EDE6D6;
  --brass:#C9A227;
  --rust:#E2683F;
  --grey:#8A94A6;
  --muted:#DCD5C4;
  --line: rgba(237,230,214,0.18);
  --header-fade-strong: rgba(20,27,37,0.92);
  --header-fade-mid: rgba(20,27,37,0.7);
  --portrait-fade: rgba(20,27,37,0.5);
}
html[data-theme="light"]{
  --ink:#EDE6D6;
  --ink-deep:#DDD2B8;
  --paper:#1B2430;
  --grey:#6B7280;
  --rust:#B5482A;
  --muted:#3E4656;
  --line: rgba(27,36,48,0.16);
  --header-fade-strong: rgba(237,230,214,0.92);
  --header-fade-mid: rgba(237,230,214,0.7);
  --portrait-fade: rgba(27,36,48,0.3);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:'IBM Plex Sans', sans-serif;
  line-height:1.6;
  overflow-x:hidden;
  transition: background-color 0.3s ease, color 0.3s ease;
}
html:not([data-theme="light"]) body{
  background: linear-gradient(180deg, #1B2430 0%, #141B25 100%);
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}

a{color:inherit;}
a:focus-visible, button:focus-visible{outline:2px solid var(--brass); outline-offset:4px;}

.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:lowercase;
  color:var(--brass);
}

/* ---- Staff-line signature element ---- */
.staff{position:relative; width:100%; height:34px; margin:0 auto;}
.staff::before{
  content:"";
  position:absolute; top:0; left:0; right:0; bottom:0;
  background-image: repeating-linear-gradient(to bottom, var(--line) 0px, var(--line) 1px, transparent 1px, transparent 8px);
  background-position: top; background-size: 100% 32px; background-repeat: no-repeat;
  opacity:0.9;
}
.staff.compact{height:18px;}
.staff.compact::before{background-size:100% 16px;}

/* ---- Header / nav ---- */
@keyframes dropIn{
  from{opacity:0; transform:translateY(-20px);}
  to{opacity:1; transform:translateY(0);}
}
header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; justify-content:space-between; align-items:center;
  padding:1.4rem clamp(1.5rem,5vw,4rem);
  background:linear-gradient(to bottom, var(--header-fade-strong), var(--header-fade-mid) 70%, transparent);
  transition: background 0.3s ease;
  opacity:0;
  animation:dropIn 1.6s cubic-bezier(0.22,1,0.36,1) forwards;
}
header .mark{font-family:'Fraunces', serif; font-weight:600; font-size:1.05rem; letter-spacing:0.02em; text-decoration:none;}
.nav-wrap{display:flex; align-items:center;}
header nav{display:flex; gap:clamp(1rem,2.5vw,2.2rem); font-family:'IBM Plex Mono', monospace; font-size:0.75rem; text-transform:lowercase; letter-spacing:0.06em;}
header nav a{position:relative; text-decoration:none; color:var(--paper); transition:color 0.25s;}
header nav a:hover, header nav a[aria-current="page"]{color:var(--brass);}
.lang-toggle{
  font-family:'IBM Plex Mono', monospace; font-size:0.72rem;
  letter-spacing:0.06em; text-transform:uppercase;
  background:transparent; border:1px solid var(--line); color:var(--paper);
  padding:0.35rem 0.7rem; border-radius:2px; cursor:pointer;
  transition:border-color 0.25s, color 0.25s;
  margin-left:clamp(1rem,2.5vw,2.2rem);
}
.lang-toggle:hover{border-color:var(--brass); color:var(--brass);}
.theme-toggle{
  font-size:1rem;
  background:transparent; border:1px solid var(--line); color:var(--paper);
  width:2.1rem; height:2.1rem; border-radius:2px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  margin-left:0.6rem;
  transition:border-color 0.25s, color 0.25s;
}
.theme-toggle:hover{border-color:var(--brass); color:var(--brass);}

section{padding:clamp(3.5rem,8vw,6rem) clamp(1.5rem,7vw,6rem);}
.wrap{max-width:960px; margin:0 auto;}

/* ---- Hero (compact) ---- */
.hero{padding-top:9rem; padding-bottom:2.5rem;}
.hero-grid{display:grid; grid-template-columns: 1.3fr 0.9fr; gap:clamp(2rem,5vw,4rem); align-items:center;}

@keyframes revealUp{
  from{opacity:0; transform:translateY(18px);}
  to{opacity:1; transform:translateY(0);}
}
.hero-grid > div:first-child > *,
.hero-portrait-wrap{
  opacity:0;
  animation:revealUp 1.3s cubic-bezier(0.22,1,0.36,1) forwards;
}
.hero-grid > div:first-child > h1{animation-delay:0.1s;}
.hero-grid > div:first-child > .tagline{animation-delay:0.55s;}
.hero-grid > div:first-child > .staff{animation-delay:1s;}
.hero-portrait-wrap{animation-delay:0.75s;}
.hero .eyebrow{margin-bottom:1.2rem;}
.hero h1{
  font-family:'Fraunces', serif; font-weight:500;
  font-size:clamp(2.2rem, 6.5vw, 4rem); line-height:1; letter-spacing:-0.01em;
  max-width:16ch;
}
.hero .tagline{margin-top:1.2rem; max-width:42ch; font-size:clamp(0.98rem,1.5vw,1.1rem); color:var(--grey);}
.hero .tagline strong{color:var(--paper); font-weight:500; font-style:normal;}
.hero .staff{margin-top:2.2rem; max-width:520px;}
.hero-portrait{
  position:relative;
  border:1px solid var(--line);
  overflow:hidden;
  aspect-ratio: 4 / 5;
}
.hero-portrait img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(0.85) contrast(1.05) brightness(1.18);
}
.hero-portrait::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 60%, var(--portrait-fade));
  pointer-events:none;
}
.photo-credit{
  margin-top:0.6rem;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.6rem;
  color:var(--grey);
  text-align:right;
}
@media (max-width:760px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-portrait-wrap{max-width:320px; order:-1;}
}

/* page hero (for sub-pages, shorter still) */
.page-hero{padding-top:9rem; padding-bottom:0;}
.page-hero .eyebrow{margin-bottom:1rem;}
.page-hero h1{
  font-family:'Fraunces', serif; font-weight:500;
  font-size:clamp(2rem, 5.5vw, 3.4rem);
  opacity:0; transform:translateY(18px);
  animation:revealUp 1.3s cubic-bezier(0.22,1,0.36,1) forwards;
  animation-delay:0.1s;
}

#bio .bio-text > p,
#bio .about-photo{
  opacity:0; transform:translateY(18px);
  animation:revealUp 1.3s cubic-bezier(0.22,1,0.36,1) forwards;
}
#bio .bio-text > p:nth-of-type(1){animation-delay:0.4s;}
#bio .bio-text > p:nth-of-type(2){animation-delay:0.6s;}
#bio .bio-text > p:nth-of-type(3){animation-delay:0.8s;}
#bio .about-photo{animation-delay:0.5s;}

/* ---- Section headings on the staff ---- */
.section-head{margin-bottom:2.6rem;}
.section-head .staff.compact{margin-bottom:0.6rem; max-width:120px;}
.section-head h2{font-family:'Fraunces', serif; font-weight:500; font-size:clamp(1.7rem,3.6vw,2.4rem);}

.section-head h2{
  opacity:0; transform:translateY(-24px);
  transition: opacity 1.6s cubic-bezier(0.22,1,0.36,1), transform 1.6s cubic-bezier(0.22,1,0.36,1);
}
.section-head h2.revealed{opacity:1; transform:translateY(0);}
.event-row{
  opacity:0; transform:translateY(24px);
  transition: opacity 1.6s cubic-bezier(0.22,1,0.36,1), transform 1.6s cubic-bezier(0.22,1,0.36,1);
}
.event-row.revealed{opacity:1; transform:translateY(0);}

/* ---- Upcoming (prominent, home page) ---- */
.upcoming{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(201,162,39,0.05), transparent 60%);
}
.events-list{display:flex; flex-direction:column;}
.event-row{
  display:grid; grid-template-columns: 9ch 1fr auto; gap:1.6rem; align-items:baseline;
  padding:1.4rem 0; border-top:1px solid var(--line);
}
.events-list .event-row:last-child{border-bottom:1px solid var(--line);}
.event-date{font-family:'IBM Plex Mono', monospace; font-size:0.78rem; color:var(--rust); letter-spacing:0.04em;}
.event-info h3{font-family:'Fraunces', serif; font-weight:500; font-style:italic; font-size:1.15rem;}
.event-info h3 a{color:inherit; text-decoration:none; transition:color 0.25s;}
.event-info h3 a:hover{color:var(--brass);}
.event-info p{font-size:0.85rem; color:var(--grey); margin-top:0.2rem;}
.event-link{font-family:'IBM Plex Mono', monospace; font-size:0.75rem; text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:0.15rem; white-space:nowrap; transition:border-color 0.25s, color 0.25s;}
.event-link:hover{border-color:var(--brass); color:var(--brass);}
.event-row.extra.hidden{display:none;}
.events-empty{font-size:0.9rem; color:var(--grey); padding:1.4rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.events-empty{
  opacity:0; transform:translateY(18px);
  animation:revealUp 1s cubic-bezier(0.22,1,0.36,1) forwards;
  animation-delay:0.4s;
}

/* ---- Bio (about page) ---- */
.bio-grid{max-width:62ch;}
.bio-grid.with-photo{
  display:grid; grid-template-columns:1.15fr 0.85fr;
  gap:clamp(2rem,5vw,4rem); align-items:start;
  max-width:none;
}
.about-photo{
  position:relative; border:1px solid var(--line); overflow:hidden;
  aspect-ratio:3/4; background:var(--ink-deep);
}
.about-photo img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(0.9) contrast(1.03);
}
@media (max-width:760px){
  .bio-grid.with-photo{grid-template-columns:1fr;}
  .about-photo{max-width:360px; order:-1;}
}
.bio-text p{margin-bottom:1.15rem; font-size:1.02rem; color:var(--muted);}
.bio-text p:first-of-type::first-letter{
  font-family:'Fraunces', serif; font-style:italic; font-weight:500;
  font-size:2.6rem; float:left; line-height:0.8; padding-right:0.14em; padding-top:0.1em;
  color:var(--brass);
}

/* ---- Works / videos ---- */
.works-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:clamp(1.6rem,3vw,2.4rem);}
.work-card{border-top:1px solid var(--line); padding-top:1rem;}
.work-card{
  opacity:0; transform:translateY(24px);
  transition: opacity 1.6s cubic-bezier(0.22,1,0.36,1), transform 1.6s cubic-bezier(0.22,1,0.36,1);
}
.work-card.revealed{opacity:1; transform:translateY(0);}
.work-card .num{font-family:'IBM Plex Mono', monospace; font-size:0.72rem; color:var(--rust); display:block; margin-bottom:0.7rem;}
.video-frame{position:relative; width:100%; padding-top:56.25%; background:var(--ink-deep); border:1px solid var(--line); overflow:hidden;}
.video-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.image-frame{
  position:relative; display:block; width:100%; padding-top:56.25%;
  background:var(--ink-deep); border:1px solid var(--line); overflow:hidden;
}
.image-frame img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 0.4s ease, filter 0.4s ease;
}
.image-frame:hover img{transform:scale(1.03); filter:brightness(1.05);}

/* ---- Photo gallery ---- */
.photo-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(0.8rem,2vw,1.4rem);
}
.photo-grid a{
  position:relative; display:block; overflow:hidden;
  border:1px solid var(--line); background:var(--ink-deep);
  aspect-ratio:4/5;
  opacity:0; transform:translateY(24px);
  transition: opacity 1.6s cubic-bezier(0.22,1,0.36,1), transform 1.6s cubic-bezier(0.22,1,0.36,1);
}
.photo-grid a.revealed{opacity:1; transform:translateY(0);}
.photo-grid a.wide{grid-column:span 2; aspect-ratio:8/5;}
.photo-grid img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 0.4s ease, filter 0.4s ease;
}
.photo-grid a:hover img{transform:scale(1.04); filter:brightness(1.05);}
@media (max-width:760px){
  .photo-grid{grid-template-columns:repeat(2, 1fr);}
  .photo-grid a.wide{grid-column:span 2;}
}

/* ---- Lightbox ---- */
.lightbox{
  position:fixed; inset:0; z-index:100;
  background:rgba(10,13,18,0.92);
  display:none; align-items:center; justify-content:center;
  padding:clamp(1.5rem,5vw,4rem);
  cursor:zoom-out;
}
.lightbox.open{display:flex;}
.lightbox img{
  max-width:100%; max-height:100%;
  border:1px solid var(--line);
  cursor:default;
}
.lightbox-close{
  position:absolute; top:1.4rem; right:clamp(1.5rem,5vw,4rem);
  background:transparent; border:1px solid var(--line); color:var(--paper);
  width:2.4rem; height:2.4rem; border-radius:2px; cursor:pointer;
  font-size:1.2rem; line-height:1; display:flex; align-items:center; justify-content:center;
  transition:border-color 0.25s, color 0.25s;
}
.lightbox-close:hover{border-color:var(--brass); color:var(--brass);}
.work-card h3{font-family:'Fraunces', serif; font-weight:500; font-style:italic; font-size:1.15rem; margin-top:1rem;}

.more-link-wrap{margin-top:2.6rem; display:flex; justify-content:flex-end;}
.btn{
  display:inline-flex; align-items:center; gap:0.5rem;
  font-family:'IBM Plex Mono', monospace; font-size:0.78rem; letter-spacing:0.05em;
  text-decoration:none; color:var(--paper);
  border:1px solid var(--line); padding:0.7rem 1.2rem; border-radius:2px;
  transition:border-color 0.25s, color 0.25s;
}
.btn:hover{border-color:var(--brass); color:var(--brass);}

/* ---- Contact ---- */
.contact-wrap{display:flex; flex-direction:column; align-items:flex-start; gap:2rem;}
.contact h2{font-family:'Fraunces', serif; font-weight:500; font-style:italic; font-size:clamp(2.2rem,6.5vw,3.8rem); max-width:14ch;}
.contact-links{display:flex; flex-wrap:wrap; gap:2.2rem; font-family:'IBM Plex Mono', monospace; font-size:0.85rem;}
.contact-links a{text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:0.2rem; transition:border-color 0.25s, color 0.25s;}
.contact-links a{
  opacity:0; transform:translateY(18px);
  animation:revealUp 1s cubic-bezier(0.22,1,0.36,1) forwards;
}
.contact-links a:nth-child(1){animation-delay:0.4s;}
.contact-links a:nth-child(2){animation-delay:0.55s;}
.contact-links a:nth-child(3){animation-delay:0.7s;}
.contact-links a:hover{border-color:var(--brass); color:var(--brass);}

#featured-work{
  position:relative;
  background:var(--ink);
}
footer{
  padding:2rem clamp(1.5rem,7vw,6rem) 2.6rem;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  font-family:'IBM Plex Mono', monospace; font-size:0.7rem; color:var(--grey);
  border-top:1px solid var(--line);
  background:var(--ink);
}
footer a{color:inherit; text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:0.15rem; transition:border-color 0.25s, color 0.25s;}
footer a:hover{border-color:var(--brass); color:var(--brass);}

@media (max-width:760px){
  header nav{display:none;}
  .works-grid{grid-template-columns:1fr;}
  .event-row{grid-template-columns:1fr; gap:0.4rem;}
}