:root {
  /* Typography compliance references: Intersection Observer (Google */
  --kiln-smoke: #e4e0d8;
  --charcoal-ink: #3d3d3d;
  --wet-stone: #6b6e6c;
  --body-ink: #4a4a4a;
  --kintsugi-gold: #c4a265;
  --moss-thread: #8fa89e;
  --celadon-mist: #d5ded7;
  --warm-ash: #7a7570;
  --night-clay: #2a2926;
  --pale-ash: #d4d0cb;
  --washi-white: #f2efe9;
  --font-display: "Josefin Sans", Futura, "Inter", sans-serif;
  --font-body: "Cormorant Garamond", serif;
  --font-accent: "Space Grotesk", "Inter", Futura, sans-serif;
  --tile-gap: clamp(14px, 2vw, 28px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-snap-type: y proximity; }

body {
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--charcoal-ink);
  font-family: var(--font-body);
  line-height: 1.75;
  letter-spacing: .015em;
  background:
    radial-gradient(circle at 10% 10%, rgba(213, 222, 215, .8), transparent 28rem),
    radial-gradient(circle at 86% 34%, rgba(196, 162, 101, .11), transparent 23rem),
    linear-gradient(180deg, var(--washi-white), var(--kiln-smoke) 58%, var(--night-clay));
}

.paper-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .28;
  mix-blend-mode: multiply;
  background-image:
    linear-gradient(90deg, rgba(61,61,61,.035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(122,117,112,.025) 1px, transparent 1px),
    radial-gradient(circle at 30% 70%, rgba(42,41,38,.06) 0 1px, transparent 1.5px);
  background-size: 9px 11px, 13px 17px, 21px 23px;
}

.viewport { min-height: 100vh; position: relative; scroll-snap-align: start; }

.nav-toggle {
  position: fixed;
  top: 26px;
  right: 28px;
  z-index: 50;
  width: 48px;
  height: 48px;
  border: 0;
  background: transparent;
  color: var(--charcoal-ink);
  cursor: pointer;
}

.enso-nav { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transition: transform .55s ease, color .55s ease; }
.nav-toggle:hover .enso-nav, .nav-toggle.open .enso-nav { color: var(--kintsugi-gold); transform: rotate(42deg) scale(1.06); }
.nav-crack { stroke: var(--kintsugi-gold); stroke-width: 1.4; }

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: grid;
  place-content: center;
  gap: 34px;
  background: rgba(228, 224, 216, .96);
  opacity: 0;
  visibility: hidden;
  transform: scale(1.03);
  transition: opacity .45s ease, visibility .45s ease, transform .45s ease;
}

.nav-overlay.active { opacity: 1; visibility: visible; transform: scale(1); }
.nav-link { color: var(--charcoal-ink); font-family: var(--font-display); font-size: clamp(1.7rem, 5vw, 4.3rem); font-weight: 300; letter-spacing: .12em; text-decoration: none; text-transform: lowercase; }
.nav-link:hover { color: var(--kintsugi-gold); }

.threshold {
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 7vw;
  background: linear-gradient(180deg, rgba(245,241,234,.95), rgba(228,224,216,.72));
}

.threshold-mist { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .45; fill: none; stroke: var(--moss-thread); stroke-width: 1; filter: blur(.2px); animation: mist-drift 18s ease-in-out infinite alternate; }
.threshold-content { position: relative; text-align: center; max-width: 760px; }
.eyebrow { font-family: var(--font-accent); font-size: .74rem; line-height: 1.4; letter-spacing: .22em; color: var(--warm-ash); text-transform: uppercase; }
.infinity-character { margin: .08em 0 0; font-family: var(--font-display); font-size: clamp(6rem, 24vw, 18rem); font-weight: 300; line-height: .86; letter-spacing: .05em; color: var(--charcoal-ink); animation: breathe 5.8s ease-in-out infinite; }
.studio-name { font-family: var(--font-accent); font-size: clamp(1rem, 2vw, 1.32rem); letter-spacing: .18em; color: var(--wet-stone); }
.threshold-line { margin: 30px auto 0; max-width: 570px; color: var(--body-ink); font-size: clamp(1.2rem, 2.2vw, 1.6rem); }
.scroll-indicator { width: 4px; height: 72px; margin-top: 54px; overflow: visible; fill: none; stroke: var(--warm-ash); stroke-width: 1.4; stroke-linecap: round; animation: scroll-pulse 2.8s ease-in-out infinite; transition: opacity .6s ease; }

.garden { min-height: 210vh; padding: clamp(70px, 9vw, 140px) clamp(20px, 6vw, 84px); background: linear-gradient(180deg, rgba(228,224,216,.48), rgba(213,222,215,.34) 58%, rgba(228,224,216,.7)); }
.section-heading { max-width: 1200px; margin: 0 auto 54px; }
.centered { text-align: center; }
.section-title { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 4.5rem); font-weight: 300; letter-spacing: .12em; line-height: 1.5; text-transform: lowercase; color: var(--charcoal-ink); }

.tile-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); grid-auto-flow: dense; grid-auto-rows: minmax(178px, auto); gap: var(--tile-gap); max-width: 1220px; margin: 0 auto; }
.tile {
  position: relative;
  overflow: hidden;
  min-height: 210px;
  padding: clamp(24px, 3vw, 42px);
  border: 1px solid rgba(122,117,112,.18);
  border-radius: 11px 17px 13px 21px;
  background: var(--celadon-mist);
  box-shadow: 0 18px 52px rgba(42,41,38,.075), inset 0 0 42px rgba(245,241,234,.28);
  opacity: 0;
  transform: translateY(38px) rotate(var(--tilt, -.4deg));
  transition: opacity .75s ease, transform .75s cubic-bezier(.2, 1.45, .31, 1), box-shadow .45s ease, border-color .45s ease;
}
.tile::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 18%, rgba(245,241,234,.36), transparent 30%), linear-gradient(135deg, rgba(255,255,255,.16), transparent 55%); opacity: .7; pointer-events: none; }
.tile.visible { opacity: 1; transform: translateY(0) rotate(var(--tilt, -.4deg)); }
.tile:hover { transform: translateY(-8px) rotate(0deg) scale(1.012); border-color: rgba(196,162,101,.52); box-shadow: 0 28px 70px rgba(42,41,38,.13), inset 0 0 48px rgba(245,241,234,.32); }
.tile:nth-child(2n) { --tilt: .55deg; border-radius: 18px 12px 22px 10px; }
.tile:nth-child(3n) { --tilt: -.8deg; }
.tile-large { grid-column: span 2; grid-row: span 2; }
.tile-medium { grid-row: span 2; }
.tile-small { min-height: 178px; }
.tile h3 { position: relative; z-index: 1; margin: 20px 0 13px; font-family: var(--font-display); font-weight: 300; letter-spacing: .12em; text-transform: lowercase; color: var(--warm-ash); font-size: clamp(1.15rem, 2vw, 1.7rem); }
.tile p { position: relative; z-index: 1; color: var(--body-ink); font-size: clamp(1.03rem, 1.55vw, 1.24rem); }
.tile strong { font-family: var(--font-accent); font-size: .78em; color: var(--charcoal-ink); }
.tile-index { position: relative; z-index: 1; font-family: var(--font-accent); color: rgba(122,117,112,.68); font-size: .7rem; letter-spacing: .2em; }
.tile.sage { background: var(--moss-thread); }
.tile.ash { background: var(--pale-ash); }
.tile.paper { background: var(--kiln-smoke); }
.tile.gold { background: color-mix(in srgb, var(--kintsugi-gold) 42%, var(--kiln-smoke)); }
.tile.night { background: var(--night-clay); color: var(--kiln-smoke); }
.tile.night h3, .tile.night p { color: var(--kiln-smoke); }
.tile.night .tile-index { color: var(--kintsugi-gold); }
.tile-crack { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--kintsugi-gold); stroke-width: 1.3; opacity: .58; }
.color-swatches { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, minmax(32px, 1fr)); gap: 11px; margin-top: 16px; }
.color-swatches span { aspect-ratio: 1; display: block; border-radius: 6px 10px 7px 12px; background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(42,41,38,.14); transition: transform .3s ease; }
.color-swatches span:hover { transform: scale(1.11) rotate(2deg); }

.vine-path { position: absolute; inset: 70px 0 auto; width: 100%; height: calc(100% - 100px); z-index: 1; pointer-events: none; opacity: .52; fill: none; stroke: url(#vineGradient); stroke-width: 2.2; stroke-linecap: round; }

.stream { display: grid; align-content: center; min-height: 145vh; padding: 12vh 0; background: linear-gradient(180deg, rgba(228,224,216,.76), var(--kiln-smoke)); overflow: hidden; }
.stream-ribbon-container { width: 100%; margin-top: 7vh; overflow: hidden; border-top: 1px solid rgba(122,117,112,.24); border-bottom: 1px solid rgba(122,117,112,.24); background: rgba(245,241,234,.22); }
.stream-ribbon { display: block; width: 200%; height: clamp(126px, 18vw, 190px); fill: none; stroke: var(--moss-thread); stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; animation: ribbon-flow 56s linear infinite; }
.botanical-row .moss { fill: var(--moss-thread); stroke: none; }
.blossom { stroke: color-mix(in srgb, var(--moss-thread) 78%, var(--kintsugi-gold)); }

.root { display: grid; place-items: center; min-height: 100vh; padding: 9vw 24px; background: radial-gradient(circle at 50% 40%, rgba(196,162,101,.14), transparent 22rem), var(--night-clay); }
.root-content { text-align: center; display: grid; place-items: center; gap: 42px; max-width: 640px; }
.kintsugi-circle { width: min(58vw, 260px); height: auto; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 24px 38px rgba(0,0,0,.3)); }
.enso { stroke: var(--kiln-smoke); stroke-width: 3; stroke-dasharray: 560; stroke-dashoffset: 560; animation: draw-enso 3s ease forwards, root-breathe 6s ease-in-out 3s infinite; }
.gold-crack { stroke: var(--kintsugi-gold); stroke-width: 2; stroke-dasharray: 180; stroke-dashoffset: 180; animation: draw-enso 2s ease 1.3s forwards; }
.gold-crack.fine { stroke-width: 1.15; animation-delay: 1.8s; }
.root-info h2 { margin: 4px 0 22px; font-family: var(--font-display); font-size: clamp(2rem, 5vw, 4.5rem); font-weight: 300; letter-spacing: .12em; line-height: 1.5; color: var(--kintsugi-gold); text-transform: lowercase; }
.root-info p:not(.eyebrow) { color: var(--kiln-smoke); font-size: clamp(1.16rem, 2vw, 1.44rem); }
.infinity { margin-top: 26px; color: var(--kintsugi-gold); font-family: var(--font-display); font-size: 4.8rem; font-weight: 300; line-height: 1; }

@keyframes breathe { 0%, 100% { opacity: .82; transform: scale(.992); } 50% { opacity: 1; transform: scale(1.008); } }
@keyframes mist-drift { from { transform: translateX(-2.5%); } to { transform: translateX(2.5%); } }
@keyframes scroll-pulse { 0%, 100% { opacity: .28; transform: translateY(0); } 50% { opacity: .9; transform: translateY(13px); } }
@keyframes ribbon-flow { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes draw-enso { to { stroke-dashoffset: 0; } }
@keyframes root-breathe { 0%, 100% { opacity: .86; } 50% { opacity: 1; } }

@media (max-width: 820px) {
  .tile-grid { grid-template-columns: 1fr; }
  .tile-large, .tile-medium { grid-column: span 1; grid-row: span 1; }
  .garden { min-height: auto; }
  .vine-path { opacity: .24; }
  .nav-toggle { top: 16px; right: 16px; }
}