/* Design Gallery — editorial interior design site */
:root {
  --cream: #F4EFE6;
  --cream-2: #EBE3D3;
  --paper: #FAF6EE;
  --ink: #0E3B3A;            /* deep teal from logo */
  --ink-2: #1A4F4D;
  --teal: #3F8E8C;           /* mid teal accent */
  --teal-soft: #A9C9C7;
  --clay: #C56B4A;           /* warm clay accent */
  --char: #1B1B19;
  --muted: #6B6B66;
  --line: rgba(14,59,58,0.18);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { color-scheme: light; scroll-behavior: smooth; }
html, body { background: var(--cream); color: var(--ink); }

body {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.serif {
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-weight: 400;
  letter-spacing: -0.01em;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; border: none; background: none; color: inherit; cursor: pointer; }

/* === Top utility bar === */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 28px;
  color: var(--ink);
  pointer-events: none;
  transition: color .35s ease, padding .35s ease;
}
.topbar > * { pointer-events: auto; }
.topbar .mark {
  display: inline-flex; align-items: center; gap: 20px;
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 600;
  /* Initial-fold size — large brand presence. Collapses to the compact
     `.is-scrolled` size below once the user scrolls past 60px. */
  font-size: 52px; letter-spacing: -0.01em; line-height: 1;
  padding: 14px 28px 14px 14px;
  border-radius: 100px;
  background: transparent;
  transition: background .3s ease, box-shadow .3s ease,
              font-size .35s ease, padding .35s ease, gap .35s ease;
}
.topbar .mark span { line-height: 1; display: inline-block; }
.topbar .mark svg,
.topbar .mark img {
  width: 88px; height: 88px; object-fit: contain; flex-shrink: 0;
  transition: filter .35s ease, width .35s ease, height .35s ease;
}
/* Compact state — kicks in once the page scrolls past the hero. Shrinks the
   brand back to its previous size and applies the frosted glass capsule. */
.topbar.is-scrolled .mark {
  font-size: 28px;
  gap: 14px;
  padding: 10px 24px 10px 14px;
}
.topbar.is-scrolled .mark img,
.topbar.is-scrolled .mark svg { width: 46px; height: 46px; }
.topbar.is-scrolled .mark,
.topbar.is-scrolled .meta {
  background: rgba(244, 239, 230, 0.62);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 8px 32px -12px rgba(14,59,58,0.18), inset 0 0 0 1px rgba(255,255,255,0.35);
}
.topbar.is-scrolled.on-dark .mark,
.topbar.is-scrolled.on-dark .meta {
  background: rgba(14, 30, 30, 0.45);
  box-shadow: 0 8px 32px -12px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(241,235,222,0.12);
}
/* Over a dark section, switch to light text and force the logo to pure white. */
.topbar.on-dark { color: #f1ebde; }
.topbar.on-dark .mark img { filter: brightness(0) invert(1); }
.topbar .meta {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  display: inline-flex; gap: 24px; align-items: center;
  padding: 12px 18px;
  border-radius: 100px;
  background: transparent;
  transition: background .3s ease, box-shadow .3s ease;
}

/* === Hero === */
.hero {
  min-height: 100vh;
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  background: var(--ink);
  color: var(--cream);
  overflow: hidden;
  isolation: isolate;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.78;
  transform: scale(1.05);
}
/* Reduced green tint — keeps the studio interior visible while still
   shaping enough contrast for the headline and stats below. */
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(
    180deg,
    rgba(14,59,58,0.22) 0%,
    rgba(14,59,58,0.28) 35%,
    rgba(14,59,58,0.42) 75%,
    rgba(14,59,58,0.58) 100%
  );
}
.hero-grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  mix-blend-mode: overlay; opacity: 0.16;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.hero-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 60px; align-items: end;
  padding: 220px 48px 120px;
  max-width: 1480px; margin: 0 auto; width: 100%;
}

.hero-eyebrow {
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--cream); opacity: 0.85;
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 28px;
}
.hero-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--clay); box-shadow: 0 0 10px var(--clay); }

.hero h1 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(56px, 10vw, 168px);
  line-height: 0.92;
  letter-spacing: -0.025em;
  color: var(--cream);
}
.hero h1 .it { font-style: italic; color: var(--teal-soft); }
.hero h1 .reveal-word { display: inline-block; overflow: hidden; overflow-clip-margin: 0.15em; vertical-align: bottom; padding-right: 0.08em; padding-bottom: 0.05em; }
.hero h1 .reveal-word > span { display: inline-block; transform: translateY(110%); transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.hero.is-in h1 .reveal-word > span { transform: translateY(0); }
.hero h1 .reveal-word:nth-child(1) > span { transition-delay: .05s; }
.hero h1 .reveal-word:nth-child(2) > span { transition-delay: .15s; }
.hero h1 .reveal-word:nth-child(3) > span { transition-delay: .25s; }
.hero h1 .reveal-word:nth-child(4) > span { transition-delay: .35s; }
.hero h1 .reveal-word:nth-child(5) > span { transition-delay: .45s; }

.hero-side {
  display: flex; flex-direction: column; gap: 28px;
  border-left: 1px solid rgba(244,239,230,0.25);
  padding-left: 32px;
  max-width: 420px;
}
.hero-lede {
  font-size: 16px; line-height: 1.6;
  color: rgba(244,239,230,0.82);
}
.hero-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  margin-top: 4px;
}
.hero-stat { display: flex; flex-direction: column; gap: 6px; }
.hero-stat .num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 38px; font-weight: 400; line-height: 1;
  color: var(--teal-soft);
}
.hero-stat .lbl {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em;
  color: rgba(244,239,230,0.6);
}

.hero-scrollcue {
  position: absolute; left: 48px; bottom: 110px; z-index: 3;
  display: flex; align-items: center; gap: 12px;
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(244,239,230,0.65);
}
.hero-scrollcue .line {
  width: 40px; height: 1px; background: rgba(244,239,230,0.5);
  position: relative; overflow: hidden;
}
.hero-scrollcue .line::after {
  content: ''; position: absolute; inset: 0;
  background: var(--teal-soft);
  transform: translateX(-100%);
  animation: cue-slide 2.4s ease-in-out infinite;
}
@keyframes cue-slide {
  0%   { transform: translateX(-100%); }
  50%  { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

/* === Hero ticker (the strip baked into the hero, replacing the standalone marquee) === */
.hero-ticker {
  position: relative; z-index: 2;
  border-top: 1px solid rgba(244,239,230,0.2);
  border-bottom: 1px solid rgba(244,239,230,0.2);
  background: rgba(14,30,30,0.4);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 18px 0;
  overflow: hidden;
}
.ticker-track {
  display: flex; gap: 60px;
  white-space: nowrap;
  animation: scroll 38s linear infinite;
  font-family: 'Cormorant Garamond', serif;
  font-size: 32px;
  font-style: italic;
  color: rgba(244,239,230,0.85);
  width: max-content;
}
.ticker-track span { display: inline-flex; align-items: center; gap: 60px; }
.ticker-track .star { font-size: 18px; color: var(--clay); font-style: normal; }
@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* === Manifesto === */
.manifesto {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  padding: 160px 36px 140px;
  align-items: start;
}
.manifesto-img {
  position: sticky; top: 80px;
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: 2px;
}
.manifesto-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.6s ease;
}
.manifesto-text {
  padding-top: 30px;
}
.manifesto-text .label {
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--clay);
  margin-bottom: 28px;
}
.manifesto-text h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(36px, 5vw, 78px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-bottom: 36px;
}
.manifesto-text h2 em { color: var(--teal); }
.manifesto-text p {
  font-size: 17px; line-height: 1.65; color: var(--ink-2);
  max-width: 540px; margin-bottom: 18px;
}
.manifesto-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px; margin-top: 60px;
  border-top: 1px solid var(--line); padding-top: 30px;
}
.manifesto-stats .stat .n {
  font-family: 'Cormorant Garamond', serif; font-size: 56px; line-height: 1; color: var(--ink);
}
.manifesto-stats .stat .l {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-top: 8px;
}

/* === Featured projects (alternating big spreads) === */
.featured {
  padding: 120px 0 60px;
  background: var(--ink);
  color: var(--cream);
}
.featured-head {
  display: flex; justify-content: space-between; align-items: end;
  padding: 0 36px 80px;
  border-bottom: 1px solid rgba(244,239,230,0.15);
}
.featured-head h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(40px, 6vw, 96px);
  line-height: 0.95; letter-spacing: -0.02em;
}
.featured-head h2 em { color: var(--teal-soft); }
.featured-head .count {
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  opacity: 0.6;
}

.spread {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  padding: 100px 36px;
  border-bottom: 1px solid rgba(244,239,230,0.08);
  align-items: center;
}
.spread.flip { direction: rtl; }
.spread.flip > * { direction: ltr; }

.spread-img {
  position: relative;
  aspect-ratio: 5/6;
  overflow: hidden;
  border-radius: 2px;
}
.spread-img img {
  width: 100%; height: 100%; object-fit: cover;
  will-change: transform;
}
.spread-img .num {
  position: absolute; top: 14px; left: 14px;
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 14px;
  color: var(--cream); mix-blend-mode: difference;
}

.spread-text .eyebrow {
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--teal-soft); margin-bottom: 24px;
  display: flex; align-items: center; gap: 12px;
}
.spread-text .eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--clay); }
.spread-text h3 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400; font-size: clamp(36px, 5vw, 80px);
  line-height: 0.98; letter-spacing: -0.02em;
  margin-bottom: 30px;
}
.spread-text h3 em { color: var(--teal-soft); }
.spread-text p {
  font-size: 16px; line-height: 1.7; color: rgba(244,239,230,0.78);
  max-width: 460px; margin-bottom: 30px;
}
.spread-text .meta-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 20px;
  border-top: 1px solid rgba(244,239,230,0.18); padding-top: 24px;
  max-width: 460px;
}
.spread-text .meta-grid .k { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.55; margin-bottom: 6px; }
.spread-text .meta-grid .v { font-family: 'Cormorant Garamond', serif; font-size: 18px; }
.spread-text .view {
  margin-top: 36px;
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  border-bottom: 1px solid rgba(244,239,230,0.4); padding-bottom: 6px;
  transition: gap 0.3s;
}
.spread-text .view:hover { gap: 22px; }
.spread-text .view .arr { font-family: 'Cormorant Garamond', serif; font-style: italic; text-transform: none; letter-spacing: 0; font-size: 16px; }

/* === Galleries grid (masonry-ish) === */
.galleries {
  padding: 160px 36px 120px;
}
.galleries-head {
  margin-bottom: 80px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end;
}
.galleries-head h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400; font-size: clamp(40px, 6vw, 96px);
  line-height: 0.95; letter-spacing: -0.02em;
}
.galleries-head h2 em { color: var(--teal); }
.galleries-head .filters {
  display: flex; gap: 8px; flex-wrap: wrap;
  justify-self: end;
}
.galleries-head .chip {
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  background: transparent;
  color: var(--ink);
  transition: all 0.25s;
}
.galleries-head .chip.active, .galleries-head .chip:hover {
  background: var(--ink); color: var(--cream); border-color: var(--ink);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 28px;
}
.tile {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  background: var(--cream-2);
}
.tile.is-hidden { display: none; }
.tile img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.tile:hover img { transform: scale(1.06); }
.tile .veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(14,59,58,0.7));
  opacity: 0.85; transition: opacity .4s;
}
.tile:hover .veil { opacity: 1; }
.tile .info {
  position: absolute; left: 22px; right: 22px; bottom: 20px;
  color: var(--cream);
  display: flex; justify-content: space-between; align-items: end;
  gap: 20px;
}
.tile .info h4 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400; font-size: 28px; line-height: 1; letter-spacing: -0.01em;
}
.tile .info .sub {
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.85;
  margin-top: 6px;
}
.tile .info .arrow {
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 22px;
  flex-shrink: 0;
  transition: transform .35s;
}
.tile:hover .info .arrow { transform: translate(4px,-4px); }
.tile .corner {
  position: absolute; top: 14px; left: 14px;
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 13px;
  color: var(--cream); mix-blend-mode: difference;
}
.tile .pill {
  position: absolute; top: 14px; right: 14px;
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--cream);
  background: rgba(14,59,58,0.55); backdrop-filter: blur(6px);
  padding: 6px 10px; border-radius: 100px;
}

/* tile sizes */
.t-tall { grid-column: span 5; aspect-ratio: 4/5; }
.t-wide { grid-column: span 7; aspect-ratio: 16/11; }
.t-sq   { grid-column: span 4; aspect-ratio: 1/1; }
.t-mid  { grid-column: span 4; aspect-ratio: 4/5; }
.t-big  { grid-column: span 8; aspect-ratio: 16/10; }
.t-xtall{ grid-column: span 4; aspect-ratio: 3/5; }

/* text-only tile variant (used when no project photograph is available) */
.tile-text {
  background:
    radial-gradient(120% 100% at 30% 20%, rgba(63,142,140,0.18), transparent 60%),
    linear-gradient(180deg, var(--cream-2), var(--cream));
  display: flex; align-items: center; justify-content: center;
}
.tile-text .veil {
  background: linear-gradient(180deg, transparent 60%, rgba(14,59,58,0.55));
  opacity: 0.95;
}
.tile-text .corner, .tile-text .pill { mix-blend-mode: normal; color: var(--ink); }
.tile-text .pill { color: var(--cream); background: rgba(14,59,58,0.55); }
.tile-text .info { color: var(--cream); }
.tile-text .centerpiece {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(48px, 6vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--ink);
  opacity: 0.55;
  text-align: center;
  padding: 0 14px;
  transition: opacity .45s, transform .9s cubic-bezier(.2,.7,.2,1);
}
.tile-text .centerpiece em { color: var(--teal); font-style: italic; }
.tile-text:hover .centerpiece { opacity: 0.75; transform: translateY(-4px); }

/* === Process === */
.process {
  padding: 160px 36px;
  background: var(--paper);
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
  align-items: start;
}
.process .left {
  position: sticky; top: 80px;
  padding: 22px 24px;
  margin: -22px -24px;
  border-radius: 24px;
  background: transparent;
  transition: background .3s ease, box-shadow .3s ease;
}
.process .left.is-stuck {
  background: rgba(250, 246, 238, 0.7);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 10px 40px -16px rgba(14,59,58,0.18), inset 0 0 0 1px rgba(255,255,255,0.35);
}
.process .left .label {
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--clay); margin-bottom: 24px;
}
.process .left h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400; font-size: clamp(40px, 5vw, 76px);
  line-height: 1; letter-spacing: -0.02em;
}
.process .left h2 em { color: var(--teal); }
.process .left p {
  font-size: 16px; line-height: 1.6; margin-top: 24px; color: var(--ink-2); max-width: 360px;
}

.steps { display: flex; flex-direction: column; gap: 0; }
.step {
  display: grid; grid-template-columns: 80px 1fr;
  gap: 30px;
  padding: 36px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.step:first-child { border-top: 1px solid var(--line); }
.step .n {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 28px; color: var(--teal);
}
.step h4 {
  font-family: 'Cormorant Garamond', serif; font-weight: 400;
  font-size: 32px; line-height: 1.05; letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.step p { font-size: 15px; line-height: 1.6; color: var(--ink-2); max-width: 540px; }

/* === CTA / footer === */
.cta {
  padding: 180px 36px;
  background: var(--ink);
  color: var(--cream);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta .label { font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--teal-soft); margin-bottom: 32px; }
.cta h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400; font-size: clamp(48px, 9vw, 160px);
  line-height: 0.92; letter-spacing: -0.025em;
}
.cta h2 em { color: var(--teal-soft); }
.cta .btn {
  margin-top: 50px;
  display: inline-flex; align-items: center; gap: 16px;
  background: var(--cream); color: var(--ink);
  padding: 22px 36px; border-radius: 100px;
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  transition: all 0.3s;
}
.cta .btn:hover { background: var(--clay); color: var(--cream); transform: translateY(-2px); }
.cta .btn .a { font-family: 'Cormorant Garamond', serif; font-style: italic; text-transform: none; letter-spacing: 0; font-size: 18px; }

footer {
  background: var(--ink);
  color: var(--teal-soft);
  padding: 60px 36px 120px;
  border-top: 1px solid rgba(244,239,230,0.1);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  font-size: 13px;
}
footer .col h5 {
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(244,239,230,0.5); margin-bottom: 18px; font-weight: 500;
}
footer .col a, footer .col p { display: block; margin-bottom: 8px; line-height: 1.6; }
footer .brand {
  font-family: 'Cormorant Garamond', serif;
  font-size: 38px; line-height: 1; color: var(--cream);
  margin-bottom: 14px;
}
footer .colophon {
  grid-column: 1/-1;
  display: flex; justify-content: space-between;
  border-top: 1px solid rgba(244,239,230,0.1);
  padding-top: 30px; margin-top: 60px;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(244,239,230,0.4);
}

/* === Bottom dock === */
.dock {
  position: fixed; left: 50%; bottom: 24px;
  transform: translateX(-50%) translateY(140%);
  z-index: 80;
  display: flex; align-items: center; gap: 4px;
  padding: 8px;
  background: rgba(14,59,58,0.92);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-radius: 100px;
  box-shadow: 0 20px 60px -20px rgba(14,59,58,0.5), 0 0 0 1px rgba(244,239,230,0.06) inset;
  transition: transform 0.6s cubic-bezier(.2,.8,.2,1);
}
.dock.show { transform: translateX(-50%) translateY(0); }
.dock .lg {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--cream);
  display: flex; align-items: center; justify-content: center;
  margin-right: 4px;
  -webkit-tap-highlight-color: transparent;
}
/* Logo bubble must not change on tap/hover/focus — preserve cream pill regardless. */
.dock .lg:hover,
.dock .lg:active,
.dock .lg:focus { background: var(--cream); outline: none; }
.dock .lg:focus-visible { outline: 2px solid var(--teal-soft); outline-offset: 2px; }
.dock .lg svg,
.dock .lg img { width: 22px; height: 22px; object-fit: contain; pointer-events: none; }
.dock a.link {
  padding: 12px 18px; border-radius: 100px;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(244,239,230,0.78);
  transition: all 0.25s;
  position: relative;
}
.dock a.link:hover { color: var(--cream); background: rgba(244,239,230,0.06); }
.dock a.link.active { color: var(--ink); background: var(--teal-soft); }
.dock .cta-btn {
  margin-left: 6px;
  padding: 12px 22px; border-radius: 100px;
  background: var(--clay); color: var(--cream);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
  transition: all 0.25s;
  white-space: nowrap;
  flex-shrink: 0;
}
.dock a.link { white-space: nowrap; flex-shrink: 0; }
.dock .lg { flex-shrink: 0; }
.dock .cta-btn:hover { background: #D87856; }
.dock .cta-btn .a { font-family: 'Cormorant Garamond', serif; font-style: italic; text-transform: none; letter-spacing: 0; font-size: 14px; }
.dock .div { width: 1px; height: 22px; background: rgba(244,239,230,0.15); margin: 0 4px; }
.hero-eyebrow .nowrap { white-space: nowrap; }

/* === Mobile drawer (logo button → site sections) === */
.mob-drawer { position: fixed; inset: 0; z-index: 90; visibility: hidden; pointer-events: none; }
.mob-drawer.open { visibility: visible; pointer-events: auto; }
.mob-drawer-backdrop { position: absolute; inset: 0; background: transparent; transition: background .22s ease; }
.mob-drawer.open .mob-drawer-backdrop { background: rgba(14, 17, 13, 0.18); }
.mob-drawer-panel {
  position: absolute;
  bottom: calc(70px + env(safe-area-inset-bottom));
  left: calc(16px + env(safe-area-inset-left));
  min-width: 200px; padding: 14px 16px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 45%, rgba(255,255,255,0.06) 100%),
    rgba(14, 59, 58, 0.62);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 24px 60px rgba(0,0,0,0.35);
  transform: translateY(8px) scale(0.96); opacity: 0;
  transition: transform .22s cubic-bezier(.2, .8, .25, 1), opacity .22s ease;
}
.mob-drawer.open .mob-drawer-panel { transform: none; opacity: 1; }
.mob-drawer-nav { display: flex; flex-direction: column; gap: 2px; }
.mob-drawer-nav a {
  color: rgba(244, 239, 230, 0.92);
  font-family: 'Cormorant Garamond', serif; font-weight: 400;
  font-size: 22px; letter-spacing: -0.01em;
  padding: 10px 14px; border-radius: 10px;
  transition: background .2s, color .2s;
}
.mob-drawer-nav a:hover { background: rgba(244, 239, 230, 0.08); color: var(--cream); }
@media (min-width: 901px) { .mob-drawer { display: none; } }

/* === Reveal animations === */
.r-fade { opacity: 0; transform: translateY(30px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.r-fade.in { opacity: 1; transform: none; }

.r-img { clip-path: inset(100% 0 0 0); transition: clip-path 1.2s cubic-bezier(.7,0,.2,1); }
.r-img.in { clip-path: inset(0 0 0 0); }

.r-mask { position: relative; overflow: hidden; }
.r-mask::after {
  content: ''; position: absolute; inset: 0;
  background: var(--cream);
  transform: translateX(0);
  transition: transform 1.1s cubic-bezier(.7,0,.2,1);
}
.r-mask.dark::after { background: var(--ink); }
.r-mask.in::after { transform: translateX(101%); }

/* === Responsive === */
@media (max-width: 900px) {
  .topbar { padding: 14px 16px; justify-content: center; }
  .topbar .meta { display: none; }
  /* Mobile initial fold: stacked, centered brand for a strong first impression. */
  .topbar .mark {
    flex-direction: column; align-items: center; text-align: center;
    gap: 12px;
    font-size: 40px;
    padding: 12px 22px;
  }
  .topbar .mark img { width: 96px; height: 96px; }
  /* Mobile scrolled: collapse back to a compact row, left-aligned. */
  .topbar.is-scrolled { justify-content: flex-start; }
  .topbar.is-scrolled .mark {
    flex-direction: row; align-items: center; text-align: left;
    gap: 12px;
    font-size: 22px;
    padding: 8px 18px 8px 10px;
  }
  .topbar.is-scrolled .mark img { width: 36px; height: 36px; }

  .hero-inner { grid-template-columns: 1fr; gap: 32px; padding: 280px 22px 90px; }
  .hero-side { border-left: none; padding-left: 0; padding-top: 24px; border-top: 1px solid rgba(244,239,230,0.25); max-width: none; }
  .hero-stats { gap: 12px; }
  .hero-stat .num { font-size: 30px; }
  .hero-scrollcue { left: 22px; bottom: 100px; }
  .ticker-track { font-size: 24px; }
  .manifesto, .process { grid-template-columns: 1fr; padding: 80px 22px; gap: 40px; }
  .process .left { padding: 16px 16px; margin: -16px -16px; border-radius: 20px; }
  .manifesto-img { position: relative; top: auto; }
  .galleries, .featured-head, .spread { padding-left: 22px; padding-right: 22px; }
  .spread { grid-template-columns: 1fr; gap: 30px; padding: 60px 22px; }
  .spread.flip { direction: ltr; }
  .grid { grid-template-columns: repeat(6,1fr); gap: 14px; }
  .t-tall, .t-wide, .t-sq, .t-mid, .t-big, .t-xtall { grid-column: span 6; aspect-ratio: 4/3; }
  .galleries-head { grid-template-columns: 1fr; }
  .galleries-head .filters { justify-self: start; }
  footer { grid-template-columns: 1fr 1fr; }
  .dock { bottom: 12px; padding: 6px; flex-wrap: nowrap; max-width: calc(100vw - 24px); }
  .dock .lg { width: 32px; height: 32px; cursor: pointer; }
  .dock .cta-btn { padding: 10px 16px; font-size: 11px; gap: 6px; margin-left: 4px; }
  .dock .cta-btn .a { font-size: 13px; }
  /* Mobile dock collapses to logo + CTA. The hidden nav links live in the
     drawer that the logo opens (see #mobDrawer). */
  .dock a.link { display: none; }
  .dock .div { display: none; }
  .featured-head { flex-direction: column; align-items: start; gap: 16px; }
}

/* ============================================================
   PROJECT PAGE — single template (project.html?p=<slug>)
   Reuses palette, typography and tile sizes from above.
   ============================================================ */

.pg {
  background: var(--cream);
}

.pg-hero {
  padding: 140px 36px 40px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
}
.pg-crumbs {
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ink); opacity: 0.65;
}
.pg-crumbs .sep { margin: 0 10px; opacity: 0.5; }
.pg-crumbs .num {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 14px; letter-spacing: 0; text-transform: none;
  color: var(--teal); margin-left: 14px;
}

.pg-titlerow {
  display: grid; grid-template-columns: 1.6fr 1fr;
  gap: 60px; align-items: end;
}
.pg-titlerow h1 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(48px, 8vw, 150px);
  line-height: 0.95;
  letter-spacing: -0.02em;
}
.pg-titlerow h1 em { color: var(--teal); }
.pg-titlerow .brief {
  border-left: 1px solid var(--line);
  padding-left: 22px;
  max-width: 360px;
}
.pg-titlerow .brief .label {
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--clay); margin-bottom: 14px;
}
.pg-titlerow .brief p {
  font-size: 15px; line-height: 1.6; color: var(--ink-2);
}

.pg-facts {
  margin-top: 50px;
  display: grid; grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.pg-facts .f {
  padding: 30px 28px;
  border-right: 1px solid var(--line);
}
/* First/last cells align flush with the section padding, so the dividers
   only sit between cells and the row visually breathes against the edges. */
.pg-facts .f:first-child { padding-left: 0; }
.pg-facts .f:last-child { padding-right: 0; border-right: none; }
.pg-facts .lbl {
  display: block;
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 22px;
}
.pg-facts .val {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400; font-size: 22px;
  letter-spacing: -0.01em; color: var(--ink);
}

.pg-cover {
  margin: 70px 36px 0;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 2px;
  position: relative;
  background: var(--cream-2);
}
.pg-cover img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.6s ease;
}
.pg-cover .credit {
  position: absolute; left: 18px; bottom: 18px;
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--cream);
  background: rgba(14,59,58,0.55);
  padding: 8px 14px; border-radius: 100px;
  backdrop-filter: blur(6px);
}

/* Story / intro */
.pg-story {
  padding: 140px 36px;
  display: grid; grid-template-columns: 1fr 2fr;
  gap: 80px;
  max-width: 1320px; margin: 0 auto;
  align-items: start;
}
.pg-story .label {
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--clay);
}
.pg-story p {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 36px);
  line-height: 1.3;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.pg-story p em { color: var(--teal); font-style: italic; }

/* Image gallery — reuses .grid + tile sizes from main */
.pg-gallery {
  padding: 0 36px 120px;
}
.pg-gallery .grid {
  margin-bottom: 0;
}
.pg-gallery .gimg {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  background: var(--cream-2);
}
.pg-gallery .gimg img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s ease;
}
.pg-gallery .gimg:hover img { transform: scale(1.04); }
.pg-gallery .gimg .num {
  position: absolute; top: 14px; left: 14px;
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 13px; color: var(--cream);
  mix-blend-mode: difference;
}
.pg-gallery .gimg .cap {
  position: absolute; left: 14px; bottom: 14px;
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--cream);
  background: rgba(14,59,58,0.55);
  padding: 6px 12px; border-radius: 100px;
  backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(4px);
  transition: opacity .35s, transform .35s;
}
.pg-gallery .gimg:hover .cap { opacity: 1; transform: none; }

/* Empty-gallery state — when project has only its cover */
.pg-gallery .empty {
  padding: 60px 0;
  text-align: center;
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  color: var(--muted); font-size: 18px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* Process / interstitial line */
.pg-quote {
  padding: 160px 36px;
  background: var(--ink); color: var(--cream);
  text-align: center;
}
.pg-quote .label {
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--teal-soft); margin-bottom: 24px;
}
.pg-quote blockquote {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(28px, 4vw, 60px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  max-width: 1000px; margin: 0 auto;
}
.pg-quote blockquote em { color: var(--teal-soft); font-style: italic; }

/* Next project */
.pg-next {
  padding: 0 36px 120px;
}
.pg-next a {
  display: grid; grid-template-columns: 1fr 1.6fr;
  gap: 40px; align-items: center;
  border-top: 1px solid var(--line);
  padding: 60px 0;
  transition: opacity .3s;
}
.pg-next a:hover { opacity: 0.85; }
.pg-next .label {
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--clay); margin-bottom: 14px;
}
.pg-next h3 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(36px, 5vw, 78px);
  line-height: 0.98;
  letter-spacing: -0.02em;
}
.pg-next h3 em { color: var(--teal); }
.pg-next .next-img {
  aspect-ratio: 16/10;
  overflow: hidden;
  border-radius: 2px;
  background: var(--cream-2);
}
.pg-next .next-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s ease;
}
.pg-next a:hover .next-img img { transform: scale(1.04); }
.pg-next .arrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  margin-top: 24px;
  color: var(--ink);
}
.pg-next .arrow .a {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  text-transform: none; letter-spacing: 0; font-size: 18px;
}

@media (max-width: 900px) {
  .pg-hero { padding: 120px 22px 30px; }
  .pg-titlerow { grid-template-columns: 1fr; gap: 30px; }
  .pg-titlerow .brief { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 24px; }
  .pg-facts { grid-template-columns: 1fr 1fr; }
  /* Mobile has no vertical dividers — drop the desktop horizontal padding
     so every label/value sits flush with the section edge. */
  .pg-facts .f {
    border-right: none; border-bottom: 1px solid var(--line);
    padding-left: 0; padding-right: 0;
  }
  .pg-facts .f:nth-last-child(-n+2) { border-bottom: none; }
  .pg-cover { margin: 40px 22px 0; aspect-ratio: 4/3; }
  .pg-story { grid-template-columns: 1fr; padding: 80px 22px; gap: 30px; }
  .pg-gallery { padding: 0 22px 80px; }
  .pg-quote { padding: 100px 22px; }
  .pg-next { padding: 0 22px 80px; }
  .pg-next a { grid-template-columns: 1fr; gap: 24px; padding: 40px 0; }
}

/* ============================================================
   DARK MODE — warm near-black palette, no muddy teal-green
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root {
    /* Light surfaces in light mode become a clean neutral near-black in dark
       mode — almost no yellow tint, so it doesn't read as olive. */
    --cream:    #0e0e0d;
    --cream-2:  #181816;
    --paper:    #15151a;
    /* Primary text was deep teal --ink — flip to warm cream */
    --ink:      #f1ebde;
    --ink-2:    #c8c2b3;
    /* Accents — slightly brightened for legibility on dark */
    --teal:     #6cc1be;
    --teal-soft:#b6dedb;
    --clay:     #e3987d;
    --char:     #f1ebde;
    --muted:    #8a8a85;
    --line:     rgba(241,235,222,0.15);
  }

  html { color-scheme: dark; }

  /* In dark mode every section is dark, so the topbar logo+text must always read as light. */
  .topbar { color: #f1ebde; }
  .topbar .mark img { filter: brightness(0) invert(1); }

  /* Sections that hard-coded `background:var(--ink)` and `color:var(--cream)`
     in light mode (.featured, .cta, footer, .pg-quote) would invert otherwise.
     Override to a deeper bg + explicit cream text. */
  .featured, .cta, footer, .pg-quote {
    background: #08060a;
    color: #f1ebde;
  }
  .featured-head { border-bottom-color: rgba(241,235,222,0.15); }
  .spread { border-bottom-color: rgba(241,235,222,0.08); }
  .spread-text p { color: rgba(241,235,222,0.78); }
  .spread-text .meta-grid { border-top-color: rgba(241,235,222,0.18); }
  .spread-text .view { border-bottom-color: rgba(241,235,222,0.4); }
  .colophon {
    border-top-color: rgba(241,235,222,0.1);
    color: rgba(241,235,222,0.4);
  }
  footer .col h5 { color: rgba(241,235,222,0.5); }

  /* Hero — --ink flips to cream in dark mode, but the hero is meant to stay
     dark with the studio image showing through. Pin the surface to a near-black
     and switch the green tint to a neutral darken. */
  .hero { background: #08060a; color: #f1ebde; }
  .hero-bg img { opacity: 0.42; }
  .hero-bg::after {
    background: linear-gradient(
      180deg,
      rgba(8,6,10,0.18) 0%,
      rgba(8,6,10,0.28) 35%,
      rgba(8,6,10,0.45) 75%,
      rgba(8,6,10,0.60) 100%
    );
  }
  .hero h1 { color: #f1ebde; }
  .hero h1 .it { color: var(--teal); }
  .hero-eyebrow { color: rgba(241,235,222,0.85); }
  .hero-side { border-left-color: rgba(241,235,222,0.22); }
  .hero-lede { color: rgba(241,235,222,0.78); }
  .hero-stat .num { color: var(--teal); }
  .hero-stat .lbl { color: rgba(241,235,222,0.55); }
  .hero-scrollcue { color: rgba(241,235,222,0.55); }
  .hero-scrollcue .line { background: rgba(241,235,222,0.4); }
  .hero-scrollcue .line::after { background: var(--teal); }
  .hero-ticker { background: rgba(8,6,10,0.5); border-color: rgba(241,235,222,0.18); border-top-color: rgba(241,235,222,0.18); border-bottom-color: rgba(241,235,222,0.18); }
  .ticker-track { color: rgba(241,235,222,0.78); }

  /* Tile veil + chips — were teal-tinted */
  .tile { background: var(--cream-2); }
  .tile .veil { background: linear-gradient(180deg, transparent 50%, rgba(8,6,10,0.85)); }
  .tile .pill { background: rgba(8,6,10,0.65); color: #f1ebde; }
  /* Tile text used --cream which flips to near-black in dark mode — force light. */
  .tile .info { color: #f1ebde; }
  .tile .info .sub { color: rgba(241,235,222,0.85); }
  .tile .corner { color: #f1ebde; }
  .tile-text {
    background:
      radial-gradient(120% 100% at 30% 20%, rgba(108,193,190,0.18), transparent 60%),
      linear-gradient(180deg, var(--cream-2), var(--cream));
  }
  .tile-text .centerpiece { color: rgba(241,235,222,0.55); }
  .tile-text .centerpiece em { color: var(--teal); }

  /* Marquee divider was --line which already updates */
  /* Manifesto stats divider already adapts via --line */

  /* Frosted topbar/process header use a dark translucent base in dark mode */
  .topbar.is-scrolled .mark,
  .topbar.is-scrolled .meta {
    background: rgba(14, 14, 13, 0.55);
    box-shadow: 0 8px 32px -12px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(241,235,222,0.1);
  }
  .process .left.is-stuck {
    background: rgba(21, 21, 26, 0.62);
    box-shadow: 0 10px 40px -16px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(241,235,222,0.1);
  }

  /* Dock — keep dark pill, but lighten the logo bubble */
  .dock { background: rgba(20,17,13,0.94); }
  .dock .lg { background: var(--ink); }
  .dock .lg svg { fill: #08060a; }
  .dock a.link.active { color: #08060a; background: var(--teal-soft); }

  /* CTA button reads dark-on-cream in light mode — flip the contrast */
  .cta .btn { background: var(--ink); color: #08060a; }
  .cta .btn:hover { background: var(--clay); color: #f1ebde; }

  /* Project page covers + caption pills */
  .pg-cover .credit { background: rgba(8,6,10,0.65); }
  .pg-gallery .gimg .cap { background: rgba(8,6,10,0.65); }
  .pg-gallery .empty { color: var(--muted); }
}