:root {
  --bg: #141312;
  --bg-black: #0a0a0a;
  --ink: #efece5;
  --ink-soft: #9b968c;
  --cream: #1d1b19;
  --line: #efece5;
  --line-soft: rgba(255,255,255,0.12);
  --accent: #ff3d1a;

  --flat-1: #2b2f33;
  --flat-2: #33302b;
  --flat-3: #2d3228;
  --flat-4: #332a2c;
  --flat-5: #262a30;
  --flat-6: #302b23;

  --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;

  --container: 1240px;
  --gap: 20px;
}

* { box-sizing: border-box; }
/* scroll-behavior:smooth deliberately omitted — combined with mandatory
   scroll-snap it makes browsers animate toward the scroll target and then
   visibly snap-correct at the end, which reads as a jump. The browser's
   native snap transition already animates on its own without it. */
html { scroll-snap-type: y mandatory; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, button, input, textarea, select { font-family: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

h1, h2, h3 {
  font-family: "Monument Extended", var(--font);
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.02em;
}
em { font-style: italic; font-weight: 400; color: var(--accent); }

.eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 16px;
}
.eyebrow--light { color: rgba(255,255,255,0.6); }

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.35s ease, border-color 0.35s ease;
}
.site-header.scrolled,
.site-header.on-light {
  background: rgba(10, 9, 8, 0.88);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--line-soft);
}
.site-header.scrolled .logo,
.site-header.scrolled .main-nav a,
.site-header.on-light .logo,
.site-header.on-light .main-nav a { color: var(--ink); }
.site-header.scrolled .nav-toggle span,
.site-header.on-light .nav-toggle span { background: var(--ink); }

.header-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 24px 32px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.logo {
  font-family: var(--font);
  font-weight: 700;
  font-size: 1.2rem;
  color: #fff;
  margin-right: auto;
  transition: color 0.35s ease;
}

.main-nav { display: flex; gap: 40px; }
.main-nav a {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  transition: color 0.35s ease, opacity 0.2s ease;
}
.main-nav a:hover { color: var(--accent); opacity: 1; }

.lang-switch { display: flex; align-items: center; gap: 7px; }
.lang-btn {
  background: none;
  border: none;
  padding: 4px 2px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.5);
  transition: color 0.25s ease;
}
.lang-btn:hover { color: rgba(255,255,255,0.85); }
.lang-btn.active { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.lang-sep { color: rgba(255,255,255,0.3); font-size: 0.7rem; }
.site-header.scrolled .lang-btn,
.site-header.on-light .lang-btn { color: var(--ink-soft); }
.site-header.scrolled .lang-btn:hover,
.site-header.on-light .lang-btn:hover { color: var(--ink); }
.site-header.scrolled .lang-btn.active,
.site-header.on-light .lang-btn.active { color: var(--ink); }
.site-header.scrolled .lang-sep,
.site-header.on-light .lang-sep { color: var(--line-soft); }

.nav-toggle {
  display: none;
  width: 28px; height: 20px;
  background: none;
  border: none;
  padding: 0;
  position: relative;
}
.nav-toggle span {
  position: absolute;
  left: 0; right: 0;
  height: 1.5px;
  background: #fff;
  transition: transform 0.25s ease, top 0.25s ease, background 0.35s ease;
}
.nav-toggle span:first-child { top: 6px; }
.nav-toggle span:last-child { top: 14px; }
.nav-toggle.open span:first-child { top: 10px; transform: rotate(45deg); }
.nav-toggle.open span:last-child { top: 10px; transform: rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  --hero-photo-w: min(22vw, 320px);
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg-black);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Taller desktop viewports: there's headroom to spare, so let the photo run
   noticeably bigger. */
@media (min-height: 1100px) and (min-width: 901px) {
  .hero { --hero-photo-w: min(26vw, 460px); }
}

/* Very short desktop viewports: shrink a little so there's still comfortable
   room for the subtitle and action bar below the photo. */
@media (max-height: 850px) and (min-width: 901px) {
  .hero { --hero-photo-w: min(18vw, 280px); }
  .hero-title-row { font-size: clamp(2rem, 8vw, 5rem); }
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg-tile {
  position: absolute;
  opacity: 0;
  border-radius: 2px;
  overflow: hidden;
  background: var(--flat-1);
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
  animation: heroFadeIn 1.6s ease forwards;
}
.hero-bg-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@keyframes heroFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(55% 45% at 50% 42%, rgba(10,10,10,0.55), rgba(10,10,10,0.78) 75%),
    linear-gradient(180deg, rgba(10,10,10,0.5), rgba(10,10,10,0.55) 40%, rgba(10,10,10,0.7) 100%);
}

/* Wraps the title block and the action bar so they always share the space
   below the photo via flex — space-between keeps the title pinned near the
   photo and the actions pinned to the hero's bottom edge without either one
   needing to know the other's size, so the photo can be resized freely. */
.hero-lower {
  position: absolute;
  top: calc(100px + var(--hero-photo-w) * 1.46 + 4px);
  left: 0;
  right: 0;
  bottom: 48px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 32px;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  animation: heroCardIn 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes heroCardIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-title-wrap {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-title-row {
  display: flex;
  align-items: center;
  gap: 0.22em;
  text-transform: uppercase;
  line-height: 0.86;
  font-size: clamp(2.6rem, 10vw, 6.5rem);
  color: #fff;
}

.hero-name-word { display: block; }

.hero-photo {
  position: absolute;
  top: 100px;
  right: 32px;
  z-index: 2;
  width: var(--hero-photo-w);
  box-shadow: 0 20px 40px rgba(0,0,0,0.55);
}
.hero-photo img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.hero-role {
  position: relative;
  z-index: 2;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin: 20px 0 0;
}

.hero-actions {
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 28px;
}
.hero-actions a {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  border-bottom: 1px solid rgba(255,255,255,0.3);
  padding-bottom: 3px;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.hero-actions a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 14px 30px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 0;
  transition: all 0.25s ease;
  border: 1px solid currentColor;
}
.btn-primary {
  background: #fff;
  color: #0a0a0a;
  border-color: #fff;
}
.btn-primary:hover {
  background: transparent;
  color: #fff;
}
.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-outline:hover {
  background: var(--ink);
  color: var(--bg);
}

/* ---------- Placeholder tiles (flat, plain colors) ---------- */
.ph-tile {
  width: 100%; height: 100%;
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.ph-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ph-tile span {
  position: relative;
  color: rgba(255,255,255,0.85);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 16px 18px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

.flat-1 { background: var(--flat-1); }
.flat-2 { background: var(--flat-2); }
.flat-3 { background: var(--flat-3); }
.flat-4 { background: var(--flat-4); }
.flat-5 { background: var(--flat-5); }
.flat-6 { background: var(--flat-6); }

/* ---------- Scroll reveal — fade ---------- */
.reveal-frame {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.reveal-frame.in-view {
  opacity: 1;
  transform: translateY(0);
}

.text-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.text-reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Categories (Work) ---------- */
.categories { padding: 0; }

.category-block {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 100vh;
  min-height: 100dvh;
  max-width: var(--container);
  margin: 0 auto;
  padding: 108px 32px 48px;
  color: inherit;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.category-head {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "num  cta"
    "title cta"
    "desc desc";
  column-gap: 24px;
  row-gap: 4px;
}
.category-num {
  grid-area: num;
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-soft);
}
.category-head h3 { grid-area: title; font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.category-head p { grid-area: desc; color: var(--ink-soft); font-size: 1rem; max-width: 640px; margin: 6px 0 0; }
.category-cta {
  grid-area: cta;
  align-self: center;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 3px;
  white-space: nowrap;
  transition: gap 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.category-cta::after { content: "→"; transition: transform 0.25s ease; }
.category-block:hover .category-cta { gap: 12px; border-color: var(--accent); color: var(--accent); }

.category-strip {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: flex-end;
  gap: 22px;
  overflow-x: auto;
  /* Must NOT be "visible": per the CSS overflow spec, pairing overflow-x:auto
     with overflow-y:visible forces the visible axis to compute as auto too,
     which quietly turns this into a real (if only few-px) vertically
     scrollable element. That nested vertical scroller is what fought the
     page's scroll-snap — a vertical wheel gesture here could get partly or
     wholly consumed by the strip's own tiny scroll range instead of moving
     the page, which is what caused the unreliable "block by block" scroll.
     hidden keeps it a single-axis (horizontal only) scroller; tiles are
     already sized to fit within this box so nothing gets clipped by it. */
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  padding-top: 4px;
  padding-bottom: 10px;
  padding-right: 32px;
  padding-left: max(32px, calc((100vw - var(--container)) / 2 + 32px));
  scrollbar-width: none;
  -ms-overflow-style: none;
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
}
.category-strip::-webkit-scrollbar { display: none; }
.category-strip .ph-tile {
  flex: 0 0 auto;
  width: 240px;
  height: 46dvh;
  display: block;
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  transition: transform 0.4s ease;
}
.category-strip .ph-tile.is-featured { height: 68dvh; }
.category-strip .ph-tile.is-wide { height: 34dvh; }
.category-strip .ph-tile:nth-child(odd) { align-self: flex-start; }
.category-strip .ph-tile:nth-child(even) { align-self: flex-end; }
.category-strip .ph-tile img {
  height: 100%;
  width: auto;
  display: block;
}
.category-strip .ph-tile:hover { transform: scale(1.03); }

/* ---------- Intro / About ---------- */
.intro {
  min-height: 100vh;
  min-height: 100dvh;
  max-width: var(--container);
  margin: 0 auto;
  padding: 96px 32px 28px;
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  grid-template-rows: auto auto auto;
  gap: 32px 72px;
  align-items: center;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.intro-portrait { height: 420px; }
.intro-copy h2 {
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  line-height: 1.16;
  margin-bottom: 16px;
}
.intro-copy .lede {
  font-style: italic;
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--ink);
  margin-bottom: 0;
  max-width: 46ch;
}
.intro-copy .btn { margin-top: 12px; }
.intro-location {
  margin: 14px 0 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.intro-actions {
  grid-column: 1 / -1;
  width: 100%;
}

/* ---------- Footer ---------- */
.site-footer {
  max-width: var(--container);
  margin: 0 auto;
  padding: 32px;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--line-soft);
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.to-top:hover { color: var(--accent); }

.intro-footer {
  grid-column: 1 / -1;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border-top: none;
}

/* ---------- Category detail page ---------- */
.cat-hero {
  max-width: var(--container);
  margin: 0 auto;
  padding: 160px 32px 60px;
}
.cat-hero .back-link {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin-bottom: 24px;
  transition: color 0.2s ease;
}
.cat-hero .back-link:hover { color: var(--accent); }
.cat-hero h1 { font-size: clamp(2.2rem, 5.5vw, 4.2rem); margin-bottom: 18px; }
.cat-hero p { color: var(--ink-soft); font-size: 1.05rem; max-width: 60ch; }

.cat-gallery {
  max-width: var(--container);
  margin: 0 auto;
  padding: 20px 32px 140px;
  column-count: 3;
  column-gap: 20px;
}
.cat-gallery > div {
  break-inside: avoid;
  margin-bottom: 20px;
  border-radius: 2px;
  overflow: hidden;
}
.cat-gallery img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  /* Mobile keeps the old independently-positioned title/actions layout;
     the desktop flex wrapper steps out of the way here. */
  .hero-lower { position: static; display: contents; }
  .hero-content { position: absolute; z-index: 2; width: 100%; margin: 0 auto; padding: 0 32px; }
  .hero .hero-actions { position: absolute; left: 32px; right: 32px; bottom: 48px; }
  .intro { grid-template-columns: 1fr; gap: 40px; }
  .intro-portrait { height: 340px; }
  .category-block { padding-top: 88px; padding-bottom: 32px; gap: 24px; }
  .category-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: 6px;
  }
  .category-num { order: 1; }
  .category-head h3 { order: 2; }
  .category-head p { order: 3; margin-top: 4px; }
  .category-cta { order: 4; margin-top: 8px; }
  .category-strip { column-gap: 18px; }
  .cat-gallery { column-count: 2; }
  .hero-photo { top: 88px; width: min(28vw, 220px); }
  .hero-content { top: calc(88px + min(28vw, 220px) * 1.46 + 24px); }
}

@media (max-width: 640px) {
  .header-inner { padding: 18px 20px; gap: 16px; }
  .main-nav {
    position: fixed;
    top: 64px; left: 0; right: 0;
    background: var(--bg-black);
    flex-direction: column;
    padding: 24px 32px 32px;
    gap: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    transform: translateY(-120%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  .main-nav.open { transform: translateY(0); opacity: 1; }
  .nav-toggle { display: block; }
  .hero-content { padding: 0 20px; top: calc(72px + 192px * 1.46 + 20px); }
  .hero-title-row { gap: 0.18em; }
  .hero-role { margin: 14px 0 0; }
  .hero-photo { top: 72px; right: 20px; width: 192px; }
  .hero .hero-actions { left: 20px; right: 20px; bottom: 28px; gap: 10px 20px; }
  .intro-actions { flex-direction: column; align-items: flex-start; gap: 14px; }
  .intro { padding-left: 20px; padding-right: 20px; }
  .site-footer, .category-block { padding-left: 20px; padding-right: 20px; }
  .intro-footer { padding-left: 0; padding-right: 0; }
  .category-block { padding-top: 76px; padding-bottom: 24px; gap: 20px; }
  .category-cta { margin-top: 8px; align-self: flex-end; }
  .category-strip {
    column-gap: 14px;
    padding-right: 20px;
    padding-left: max(20px, calc((100vw - var(--container)) / 2 + 20px));
  }
  .category-strip .ph-tile { height: 30dvh; }
  .category-strip .ph-tile.is-featured { height: 38dvh; }
  .category-strip .ph-tile.is-wide { height: 20dvh; }
  .cat-hero { padding: 130px 20px 40px; }
  .cat-gallery { padding: 20px 20px 100px; column-count: 1; }
  .site-footer { flex-direction: column; gap: 12px; }
}