:root {
  /* Interactive elements (sidebar icons) use Intersection Observer with thresholds 0.1. Intersection Observer. The path draws itself as if an invisible brush is painting it in real time. */
  --rice-paper: #f5efe6;
  --sumi-ink: #1a1210;
  --burnished-copper: #b87333;
  --vermillion-red: #c73e1d;
  --charcoal-ink: #2d2926;
  --stone-gray: #8a8279;
  --gold-leaf: #d4a843;
  --dark-parchment: #1a1210;
  --warm-silver: #c4b9a8;
  --display: "Poiret One", system-ui, sans-serif;
  --body: "Josefin Sans", Arial, sans-serif;
  --accent: "Noto Serif JP", serif;
  --elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
  --side-collapsed: 56px;
  --side-expanded: 220px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  background: var(--rice-paper);
  color: var(--charcoal-ink);
  font-family: var(--body);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  font-weight: 300;
  line-height: 1.75;
  letter-spacing: 0.01em;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.22;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--side-collapsed);
  background: var(--dark-parchment);
  color: var(--warm-silver);
  z-index: 10;
  padding: 20px 0;
  border-right: 1px solid rgba(196,185,168,.22);
  overflow: hidden;
  transition: width .55s var(--elastic), box-shadow .55s var(--elastic);
  animation: breathe 8s ease-in-out infinite;
}
.sidebar:hover { width: var(--side-expanded); box-shadow: 18px 0 45px rgba(26,18,16,.28); }
@keyframes breathe { 0%,100%{ width:var(--side-collapsed);} 50%{ width:58px;} }
.sidebar:hover { animation: none; }
.brand-mark, .nav-link {
  color: inherit;
  text-decoration: none;
  display: flex;
  align-items: center;
  white-space: nowrap;
  position: relative;
}
.brand-mark { gap: 16px; padding: 0 16px 36px; font-family: var(--display); color: var(--burnished-copper); letter-spacing: .08em; }
.brand-mark svg { width: 24px; height: 24px; flex: 0 0 24px; }
svg path, svg circle, svg rect, svg line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.brand-mark span, .nav-link span:last-child { opacity: 0; transform: translateX(-8px); transition: .35s var(--elastic); }
.sidebar:hover .brand-mark span, .sidebar:hover .nav-link span:last-child { opacity: 1; transform: translateX(0); }
.nav-rail { display: grid; gap: 20px; }
.nav-link { min-height: 48px; gap: 18px; padding: 0 16px; font-family: var(--display); letter-spacing: .08em; overflow: hidden; }
.glyph { width: 24px; flex: 0 0 24px; text-align: center; font-family: var(--accent); font-size: 1.28rem; color: var(--warm-silver); }
.nav-link::before, .stampable::before, .section-title h2::before {
  content: "";
  position: absolute;
  width: 88px;
  height: 88px;
  left: var(--stamp-x, 50%);
  top: var(--stamp-y, 50%);
  transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(circle, rgba(199,62,29,.48) 0 22%, rgba(199,62,29,.16) 23% 42%, transparent 64%);
  border-radius: 50%;
  pointer-events: none;
  transition: transform .45s var(--elastic), opacity .35s ease;
  opacity: 0;
}
.nav-link:hover, .nav-link.active { color: var(--vermillion-red); }
.nav-link:hover::before, .stampable:hover::before, .section-title h2:hover::before { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.page-shell { margin-left: var(--side-collapsed); position: relative; z-index: 1; }
.section { min-height: 100vh; position: relative; display: grid; place-items: stretch; padding: clamp(32px, 5vw, 76px); overflow: hidden; }
.paper-section { background: var(--rice-paper); }
.dark-section { background: var(--sumi-ink); color: var(--rice-paper); }
.tatami-grid { width: min(1260px, 100%); margin: auto; display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(16px, 2vw, 28px); min-height: calc(100vh - clamp(64px, 10vw, 152px)); position: relative; }
.kicker { color: var(--stone-gray); text-transform: uppercase; letter-spacing: .28em; font-size: .72rem; font-weight: 400; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: .08em; line-height: 1; }
h1 { font-size: clamp(3rem, 8vw, 7rem); color: var(--charcoal-ink); }
h2 { font-size: clamp(3rem, 8vw, 7rem); }
h3 { font-size: clamp(1.35rem, 2vw, 2rem); }
p { max-width: 58ch; }

.hero-grid { align-items: center; }
.empty-field { grid-column: 1 / 5; grid-row: 1; min-height: 65vh; position: relative; }
.hero-copy { grid-column: 4 / 7; grid-row: 1; align-self: end; padding: clamp(24px, 4vw, 46px); background: rgba(245,239,230,.72); box-shadow: 0 24px 80px rgba(45,41,38,.08); }
.hero-copy p:last-of-type { margin-top: 18px; font-size: clamp(1.1rem, 1.7vw, 1.45rem); color: var(--stone-gray); }
.hero-spiral { position: absolute; width: min(62vw, 720px); height: auto; left: -8%; top: 2%; color: var(--burnished-copper); opacity: .8; }
.hero-spiral path, .final-swirl path { stroke-width: 6; vector-effect: non-scaling-stroke; }
.ink-dot { position: absolute; left: 38%; top: 44%; width: 18px; height: 18px; background: var(--sumi-ink); border-radius: 50%; box-shadow: 0 0 0 16px rgba(184,115,51,.08), 0 0 80px rgba(26,18,16,.22); animation: dotBloom 3.8s var(--elastic) infinite; }
@keyframes dotBloom { 0%,100%{ transform:scale(.7); opacity:.55;} 50%{ transform:scale(1.45); opacity:1;} }
.seal { width: 58px; height: 58px; margin-top: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--vermillion-red); color: var(--rice-paper); font-family: var(--accent); transform: rotate(-10deg); box-shadow: inset 0 0 0 3px rgba(245,239,230,.18); }

.sunburst-divider { position: absolute; inset: 0 0 auto; height: 42px; opacity: .56; background: repeating-conic-gradient(from 0deg at 50% 0%, transparent 0 4deg, var(--gold-leaf) 5deg 6deg, transparent 7deg 12deg); }
.section-title { grid-column: 1 / 6; align-self: start; position: relative; z-index: 2; }
.dark-section .section-title h2, .finale-copy h2 { color: var(--burnished-copper); }
.script-library { grid-column: 1 / 7; align-self: end; display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.script-card { min-height: 265px; grid-column: span 2; position: relative; overflow: hidden; padding: 28px; background: linear-gradient(145deg, rgba(45,41,38,.96), rgba(26,18,16,.92)); border: 1px solid rgba(184,115,51,.38); color: var(--warm-silver); transform: scale(.92); opacity: 0; transition: transform .55s var(--elastic), border-color .35s, background .35s; }
.script-card.in-view { transform: scale(1); opacity: 1; }
.script-card:hover { transform: translateY(-8px) scale(1.02); border-color: var(--burnished-copper); background: linear-gradient(145deg, rgba(65,37,22,.98), rgba(26,18,16,.94)); }
.script-card svg { width: 78px; height: 78px; color: var(--burnished-copper); margin-bottom: 24px; }
.script-card h3 { color: var(--burnished-copper); margin-bottom: 12px; }
.script-card p { font-size: .98rem; line-height: 1.55; }

.manifesto-section::before, .garden-section::before { content:""; position:absolute; inset:0; opacity:.06; background: repeating-radial-gradient(ellipse at 30% 50%, transparent 0 32px, var(--charcoal-ink) 33px 35px, transparent 36px 62px); }
.wall-title { grid-column: 1 / 5; }
.manifesto-wall { grid-column: 1 / 7; align-self: stretch; position: relative; min-height: 620px; }
.fragment { position: absolute; max-width: 390px; padding: 18px 22px; background: rgba(245,239,230,.9); border: 2px solid var(--charcoal-ink); box-shadow: 12px 14px 0 rgba(184,115,51,.2); font-family: var(--accent); font-size: clamp(1.05rem, 1.6vw, 1.5rem); line-height: 1.35; opacity: 0; clip-path: inset(0 100% 0 0); transition: clip-path 1s var(--elastic), opacity .6s, transform 1s var(--elastic); }
.fragment.in-view { opacity: 1; clip-path: inset(0); }
.f1{left:2%;top:8%;transform:rotate(-3deg)} .f2{right:13%;top:3%;transform:rotate(2deg)} .f3{left:28%;top:30%;transform:rotate(4deg)} .f4{right:3%;bottom:18%;transform:rotate(-2deg)} .f5{left:10%;bottom:9%;transform:rotate(3deg)} .f6{right:30%;bottom:2%;transform:rotate(-4deg)}
.kanji-anchor { position: absolute; right: 6%; top: 23%; font-family: var(--accent); font-size: clamp(7rem, 16vw, 14rem); color: rgba(199,62,29,.13); line-height: 1; }

.garden-section { min-height: 115vh; }
.ink-wash { grid-column: 1 / 7; grid-row: 1; align-self: center; height: 36vh; background: linear-gradient(90deg, transparent, rgba(26,18,16,.72) 28%, rgba(184,115,51,.28) 52%, transparent); filter: blur(7px); opacity: .5; transform: translateX(var(--wash-shift, 0px)); }
.garden-copy { grid-column: 2 / 5; grid-row: 1; align-self: center; position: relative; z-index: 2; }
.large-kanji { display: block; font-family: var(--accent); font-size: clamp(4rem, 10vw, 9rem); color: var(--burnished-copper); line-height: .8; margin-bottom: 26px; }
.garden-copy h2 { color: var(--charcoal-ink); margin-bottom: 28px; }
.quote { font-family: var(--accent); color: var(--stone-gray); font-size: clamp(1.1rem, 1.5vw, 1.3rem); }

.finale-grid { place-items: center; }
.final-swirl { grid-column: 1 / 7; grid-row: 1; width: min(86vw, 1060px); height: auto; color: var(--burnished-copper); opacity: .84; filter: drop-shadow(0 0 42px rgba(184,115,51,.22)); }
.finale-copy { grid-column: 4 / 7; grid-row: 1; justify-self: end; align-self: end; padding: 34px; background: rgba(26,18,16,.72); border-left: 1px solid rgba(212,168,67,.35); position: relative; z-index: 2; }
.finale-copy p { color: var(--warm-silver); margin-top: 18px; }

.reveal-ink { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateX(-18px); transition: clip-path 1.1s var(--elastic), opacity .6s ease, transform 1.1s var(--elastic); }
.reveal-ink.in-view { opacity: 1; clip-path: inset(0); transform: translateX(0); }

@media (max-width: 900px) {
  .section { padding: 28px 20px; }
  .tatami-grid { grid-template-columns: repeat(4, 1fr); }
  .hero-copy, .empty-field, .section-title, .script-library, .manifesto-wall, .ink-wash, .final-swirl { grid-column: 1 / -1; }
  .hero-copy { grid-row: 1; align-self: end; }
  .script-card { grid-column: span 2; }
  .garden-copy, .finale-copy { grid-column: 1 / -1; }
  .fragment { position: relative; inset: auto; margin: 14px 0; transform: rotate(0deg); max-width: 100%; }
  .manifesto-wall { min-height: auto; }
}
@media (max-width: 560px) {
  .script-card { grid-column: 1 / -1; }
  .sidebar:hover { width: 176px; }
}