:root{
  --bg:#0C0B09;
  --bg-alt:#151310;
  --panel:#1B1815;
  --ink:#F4F0E8;
  --ink-soft:#B4AC9E;
  --muted:#797263;
  --accent:#C9A063;
  --accent-soft:#8f7a53;
  --rule:rgba(244,240,232,0.12);
  --rule-strong:rgba(244,240,232,0.22);
  --maxw:1280px;
  --font-display:'Bricolage Grotesque', var(--font);
  --font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{ color:var(--ink); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ opacity:.72; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}

h1,h2,h3{ font-family:var(--font-display); font-weight:600; margin:0; letter-spacing:-.02em; }

.eyebrow{
  font-family:var(--font);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:600;
}

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

/* ---------- Reveal-on-scroll ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ---------- Buttons ---------- */
.btn-cta{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--accent); color:#151310;
  font-family:var(--font); font-weight:600; font-size:14px;
  letter-spacing:.02em;
  padding:15px 28px; border-radius:2px; border:none;
  cursor:pointer; text-decoration:none;
  transition:background .25s ease, transform .25s ease;
}
.btn-cta:hover{ background:#e0b877; opacity:1; transform:translateY(-1px); }
.btn-cta.is-ghost{
  background:transparent; color:var(--ink); border:1px solid var(--rule-strong);
}
.btn-cta.is-ghost:hover{ border-color:var(--accent); background:rgba(201,160,99,.08); }
.btn-cta .arrow{ transition:transform .25s ease; }
.btn-cta:hover .arrow{ transform:translateX(4px); }

/* ---------- Site nav (all pages) ---------- */
.site-nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 5vw;
  background:rgba(12,11,9,.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.site-nav .brand{
  font-family:var(--font-display); font-size:17px; letter-spacing:.01em; text-decoration:none; color:var(--ink);
}
.site-nav .brand span{ color:var(--accent); }
.site-nav .nav-links{ display:flex; align-items:center; gap:28px; font-size:13px; }
.site-nav .nav-links a{ text-decoration:none; color:var(--ink-soft); }
.site-nav .nav-links a:hover, .site-nav .nav-links a.is-active{ color:var(--ink); opacity:1; }
.site-nav .nav-links .btn-cta{ padding:10px 20px; font-size:13px; }
#contact-trigger{ cursor:pointer; background:none; border:none; padding:0; font:inherit; }
@media (max-width:780px){
  .site-nav{ padding:18px 20px; }
  .site-nav .nav-links{ gap:16px; font-size:12px; }
  .site-nav .nav-links a:not(.btn-cta){ display:none; }
}

/* ================= HOMEPAGE ================= */
.hero{
  position:relative;
  min-height:92vh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 5vw 72px;
  overflow:hidden;
  background:#050403;
}
.hero-media{ position:absolute; inset:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; opacity:.55; }
.hero-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(5,4,3,.35) 0%, rgba(5,4,3,.15) 40%, rgba(5,4,3,.92) 100%);
}
.hero-content{ position:relative; z-index:2; max-width:980px; }
.hero-eyebrow{ color:var(--accent); font-size:12px; letter-spacing:.2em; text-transform:uppercase; margin-bottom:22px; font-weight:600; }
.hero h1{
  font-size:clamp(40px, 6.4vw, 92px);
  line-height:1.03;
  color:var(--ink);
}
.hero h1 em{ font-style:normal; color:var(--accent); }
.hero p{ font-size:clamp(15px,1.6vw,19px); color:var(--ink-soft); max-width:56ch; margin:26px 0 36px; }
.hero-cta{ display:flex; gap:16px; flex-wrap:wrap; }
.hero-scroll{
  position:absolute; bottom:28px; left:5vw; z-index:2;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
  display:flex; align-items:center; gap:10px;
}
.hero-scroll::after{ content:''; width:1px; height:34px; background:linear-gradient(var(--accent), transparent); }

.section{ padding:120px 5vw; max-width:var(--maxw); margin:0 auto; }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:56px; }
.section-head h2{ font-size:clamp(28px,3.4vw,46px); max-width:16ch; }
.section-head p{ color:var(--ink-soft); font-size:15px; max-width:40ch; margin-top:14px; }

/* Services */
.services{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); }
.service-card{ background:var(--bg); padding:44px 34px; }
.service-card .num{ font-family:var(--font-display); font-size:14px; color:var(--accent); margin-bottom:26px; display:block; }
.service-card h3{ font-size:21px; margin-bottom:14px; }
.service-card p{ color:var(--ink-soft); font-size:14px; line-height:1.65; }
@media (max-width:900px){ .services{ grid-template-columns:1fr; } }

/* Featured work */
.work-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:2px; }
.work-card{
  position:relative; aspect-ratio:4/5; overflow:hidden; text-decoration:none; display:block;
  background:var(--panel);
}
.work-card img{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.16,1,.3,1); }
.work-card:hover img{ transform:scale(1.06); opacity:1; }
.work-card::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 45%, rgba(5,4,3,.88) 100%); }
.work-card-copy{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:28px; }
.work-card-copy .eyebrow{ display:block; margin-bottom:8px; }
.work-card-copy h3{ font-size:24px; color:var(--ink); }
.work-card-copy .loc{ color:var(--ink-soft); font-size:13px; margin-top:6px; }
@media (max-width:780px){ .work-grid{ grid-template-columns:1fr; } }

/* Process */
.process-list{ display:flex; flex-direction:column; }
.process-row{
  display:grid; grid-template-columns:80px 1fr 2fr; gap:32px; align-items:baseline;
  padding:34px 0; border-top:1px solid var(--rule);
}
.process-row:last-child{ border-bottom:1px solid var(--rule); }
.process-row .step-num{ font-family:var(--font-display); font-size:15px; color:var(--accent); }
.process-row h3{ font-size:19px; }
.process-row p{ color:var(--ink-soft); font-size:14px; max-width:52ch; }
@media (max-width:780px){ .process-row{ grid-template-columns:1fr; gap:10px; } }

/* Quote */
.quote-block{ text-align:center; max-width:900px; margin:0 auto; }
.quote-block blockquote{ margin:0; font-family:var(--font-display); font-style:normal; font-weight:500; font-size:clamp(22px,3vw,34px); line-height:1.4; color:var(--ink); }
.quote-block cite{ display:block; margin-top:28px; font-style:normal; color:var(--ink-soft); font-size:13px; letter-spacing:.05em; text-transform:uppercase; }

/* CTA banner */
.cta-banner{
  background:var(--bg-alt); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  padding:100px 5vw; text-align:center;
}
.cta-banner h2{ font-size:clamp(28px,4.2vw,54px); max-width:22ch; margin:0 auto 30px; }
.cta-banner p{ color:var(--ink-soft); max-width:52ch; margin:0 auto 38px; font-size:15px; }

/* Footer */
.site-footer-v2{
  max-width:var(--maxw); margin:0 auto; padding:60px 5vw 40px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px;
  font-size:12px; color:var(--muted);
  border-top:1px solid var(--rule);
}
.site-footer-v2 a{ color:var(--muted); text-decoration:none; }
.site-footer-v2 a:hover{ color:var(--ink); }

/* Floating CTA */
.floating-cta{
  position:fixed; bottom:24px; right:24px; z-index:60;
}
@media (max-width:780px){ .floating-cta{ bottom:16px; right:16px; } .floating-cta .btn-cta{ padding:12px 18px; font-size:12px; } }

/* ================= Legacy listing pages (Work archive / Academic) ================= */
.page{
  max-width:var(--maxw); margin:0 auto; padding:56px 5vw 100px;
  display:grid; grid-template-columns:1.45fr 1fr;
  grid-template-areas:"nav identity" "main identity";
  column-gap:64px; row-gap:28px; align-items:start;
}
.nav-wrap{ display:none; } /* replaced by .site-nav */
.main{ grid-area:main; min-width:0; grid-column:1/-1; }
.identity{
  grid-area:identity; position:sticky; top:96px; max-height:calc(100vh - 130px);
  overflow-y:auto; padding-left:8px; scrollbar-width:none; -ms-overflow-style:none;
  display:none;
}
.identity::-webkit-scrollbar{ display:none; }

.page-heading{ grid-column:1/-1; margin-bottom:8px; }
.page-heading .eyebrow{ display:block; margin-bottom:16px; }
.page-heading h1{ font-size:clamp(32px,4.5vw,54px); max-width:16ch; }

.entry{ padding:56px 0; border-top:1px solid var(--rule); display:block; grid-column:1/-1; }
.entry:first-of-type{ border-top:1px solid var(--rule); padding-top:56px; }
.entry-media{ width:100%; margin-bottom:28px; }
.entry .carousel{ aspect-ratio:16/10; }

.entry-head{ display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; }
.entry-index{ font-size:26px; letter-spacing:.005em; }
.entry-index a{ text-decoration:none; color:var(--ink); }
.entry-index a:hover{ color:var(--accent); }
.entry-index .num{ color:var(--accent); margin-right:10px; font-size:16px; font-weight:400; font-family:var(--font-display); }

.entry-meta-inline{ font-size:11px; letter-spacing:.03em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:8px; }
.entry-meta-inline .tag-code{ border:1px solid var(--rule-strong); padding:3px 9px; border-radius:2px; color:var(--ink-soft); text-transform:none; letter-spacing:0; }

.entry-copy{ margin-top:16px; }
.entry-copy p{ margin:0 0 14px; font-size:15px; color:var(--ink-soft); max-width:60ch; }
.entry-copy .more{ display:inline-block; margin-top:4px; font-size:12px; letter-spacing:.03em; text-transform:uppercase; text-decoration:none; color:var(--accent); }
.entry-copy .more:hover{ text-decoration:underline; }

.site-footer{ display:none; }

/* ---------- Carousel ---------- */
.carousel{ position:relative; width:100%; aspect-ratio:4/3; background:var(--panel); border:1px solid var(--rule); overflow:hidden; }
.carousel .slide{ position:absolute; inset:0; display:flex; align-items:flex-end; opacity:0; transition:opacity .6s ease; }
.carousel .slide img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:0; }
.carousel .slide.is-active{ opacity:1; }
.carousel .slide-label{ position:relative; font-size:11px; color:var(--ink-soft); background:rgba(12,11,9,.75); padding:4px 8px; margin:12px; }
.carousel-controls{ position:absolute; bottom:10px; right:10px; display:flex; gap:4px; z-index:2; }
.carousel-controls button{ width:28px; height:28px; border:1px solid var(--rule-strong); background:rgba(12,11,9,.8); color:var(--ink); font-size:14px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.carousel-controls button:hover{ border-color:var(--accent); }
.carousel-dots{ position:absolute; top:12px; right:12px; display:flex; gap:6px; z-index:2; }
.carousel-dots button{ width:7px; height:7px; border-radius:50%; border:1px solid var(--accent-soft); background:transparent; padding:0; cursor:pointer; }
.carousel-dots button.is-active{ background:var(--accent); }

.group-title{ display:none; }

/* ---------- Contact modal ---------- */
.modal-overlay{ position:fixed; inset:0; background:rgba(5,4,3,.78); display:flex; align-items:center; justify-content:center; padding:24px; z-index:200; }
.modal-overlay[hidden]{ display:none; }
.modal{ background:var(--bg-alt); border:1px solid var(--rule-strong); width:min(560px,100%); max-height:82vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.5); border-radius:2px; }
.modal-header{ display:flex; align-items:center; justify-content:space-between; padding:20px 24px; border-bottom:1px solid var(--rule); }
.modal-header h2{ font-size:19px; }
.modal-close{ width:26px; height:26px; border-radius:50%; border:none; background:var(--panel); color:var(--ink-soft); cursor:pointer; font-size:14px; line-height:1; display:flex; align-items:center; justify-content:center; }
.modal-close:hover{ background:var(--rule-strong); color:var(--ink); }
.modal-body{ padding:24px; display:flex; flex-direction:column; gap:18px; overflow-y:auto; flex:1; }
#contact-email{ background:transparent; border:none; border-bottom:1px solid var(--rule-strong); padding:10px 2px; font-size:14px; font-family:var(--font); color:var(--ink); }
#contact-email::placeholder{ color:var(--muted); }
#contact-email:focus{ outline:none; border-bottom-color:var(--accent); }
#contact-message{ background:transparent; border:none; resize:vertical; min-height:180px; font-size:14px; font-family:var(--font); padding:2px; color:var(--ink); }
#contact-message::placeholder{ color:var(--muted); }
#contact-message:focus{ outline:none; }
.modal-footer{ display:flex; justify-content:flex-end; gap:10px; padding:16px 24px; border-top:1px solid var(--rule); }
.btn{ padding:10px 20px; border-radius:2px; font-size:13px; border:1px solid var(--rule-strong); cursor:pointer; font-family:var(--font); background:transparent; color:var(--ink); }
.btn-ghost:hover{ border-color:var(--ink); }
.btn-solid{ background:var(--accent); color:#151310; border-color:var(--accent); font-weight:600; }
.btn-solid:hover{ background:#e0b877; }

/* ---------- Information / about me page ---------- */
.info-page{ max-width:820px; margin:0 auto; padding:64px 5vw 100px; }
.info-back{ display:none; }
.info-photo{ width:240px; aspect-ratio:3/4; background:var(--panel); border:1px solid var(--rule); margin-bottom:36px; position:relative; overflow:hidden; }
.info-photo .cap{ position:absolute; bottom:8px; left:8px; font-size:10px; color:var(--ink-soft); background:rgba(12,11,9,.8); padding:2px 6px; }
.info-name{ font-size:clamp(28px,4vw,40px); margin-bottom:10px; }
.info-role{ font-size:16px; color:var(--ink-soft); font-weight:500; margin-bottom:32px; font-family:var(--font-display); font-style:normal; }
.info-bio p{ font-size:15.5px; color:var(--ink-soft); max-width:68ch; margin:0 0 18px; }
.info-section-title{ margin-top:46px; padding-top:18px; border-top:1px solid var(--rule); margin-bottom:16px; }
.info-contact{ margin-top:36px; display:flex; gap:22px; flex-wrap:wrap; font-size:13px; }
.record{ display:grid; grid-template-columns:130px 1fr; gap:14px; margin-top:16px; font-size:14px; }
.record .when{ font-size:12px; color:var(--muted); line-height:1.6; padding-top:1px; }
.record .what{ color:var(--ink-soft); line-height:1.6; }
.record .what strong{ color:var(--ink); font-weight:600; }

/* ---------- Project detail page ---------- */
.project-page{ max-width:var(--maxw); margin:0 auto; padding:56px 5vw 0; }
.project-back{ font-size:12px; text-decoration:none; color:var(--ink-soft); }
.project-back:hover{ color:var(--accent); }
.project-title{ font-size:clamp(30px,5vw,58px); margin:36px 0 34px; }
.project-title .num{ color:var(--accent); font-weight:400; margin-right:14px; font-size:.5em; vertical-align:middle; }
.project-media{ width:100%; aspect-ratio:16/9; background:var(--panel); border:1px solid var(--rule); position:relative; overflow:hidden; }
.project-details{ display:grid; grid-template-columns:240px 1fr; gap:40px; margin-top:40px; align-items:start; padding-bottom:80px; }
.project-category{ font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--accent); font-weight:600; margin-bottom:14px; }
.project-meta-lines{ font-size:12px; color:var(--muted); line-height:2; }
.project-text p{ font-size:15.5px; color:var(--ink-soft); max-width:70ch; margin:0 0 16px; }
.project-text p:last-child{ margin-bottom:0; }
@media (max-width:780px){ .project-details{ grid-template-columns:1fr; } }

/* ---------- Mobile ---------- */
@media (max-width:900px){
  .page{ grid-template-columns:1fr; padding:40px 20px 64px; }
  .section{ padding:80px 20px; }
  .cta-banner{ padding:70px 20px; }
}