:root {
  /* Font sources: Zilla Slab (Google Fonts), Source Serif 4 (Google Fonts), IBM Plex Mono (Google Fonts), Playfair Display (Google Fonts). */
  --kiln-ash: #3b3a36;
  --parchment: #e8dcc8;
  --gold: #c4a265;
  --raku: #8b6f4e;
  --smoke: #6b6560;
  --charred: #2a2520;
  --celadon: #a8b89c;
  --slip: #c9a08a;
  --faded: #8a7e6b;
  --deep-ink: #6b5c3e;
  --grain: 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='.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--kiln-ash);
  background: var(--parchment);
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  line-height: 1.75;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--grain), radial-gradient(circle at 16% 12%, rgba(201, 160, 138, 0.18), transparent 32rem), radial-gradient(circle at 84% 48%, rgba(168, 184, 156, 0.16), transparent 28rem);
  opacity: 0.18;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
}

.ink-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 30;
}

.scroll-orb {
  position: fixed;
  top: 1.618rem;
  right: 2.236rem;
  width: 44px;
  height: 44px;
  z-index: 40;
  border-radius: 47% 53% 49% 51%;
  background: rgba(232, 220, 200, 0.72);
  box-shadow: inset 0 0 0 1px rgba(107, 101, 96, 0.18), 0 9px 24px rgba(42, 37, 32, 0.12);
  backdrop-filter: blur(7px);
}

.scroll-orb svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.orb-track, .orb-progress { fill: none; stroke-width: 2; }
.orb-track { stroke: rgba(107, 101, 96, 0.22); }
.orb-progress { stroke: var(--celadon); stroke-linecap: round; stroke-dasharray: 113; stroke-dashoffset: 113; }

.site-shell { position: relative; z-index: 2; }

.hero {
  min-height: 100vh;
  position: relative;
  display: grid;
  align-items: end;
  padding: 8.472rem max(5vw, 2.5rem) 5.236rem max(4vw, 2rem);
  overflow: hidden;
  background: linear-gradient(138deg, var(--parchment), rgba(201, 160, 138, 0.22) 52%, rgba(139, 111, 78, 0.16));
}

.wave-canvas, .hero-grain { position: absolute; inset: 0; width: 100%; height: 100%; }
.wave-canvas { will-change: transform; opacity: 0.96; }
.hero-grain { background-image: var(--grain); opacity: 0.12; mix-blend-mode: multiply; }

.hero-content {
  position: relative;
  width: min(1120px, 92vw);
  padding: 1.618rem 2.236rem 1.414rem 2.618rem;
  border-left: 1px solid rgba(139, 111, 78, 0.34);
}

.eyebrow, .card-meta, .date-stamp, .archive-list span {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faded);
}

.site-title, h2, h3 {
  font-family: "Zilla Slab", serif;
  font-weight: 700;
  line-height: 1.15;
  color: var(--kiln-ash);
  letter-spacing: var(--ls-wobble, -0.02em);
}

.site-title {
  margin: 0.809rem 0 1.618rem;
  font-size: clamp(4.5rem, 16vw, 13rem);
  line-height: 0.82;
  text-shadow: 0 1px 0 rgba(196, 162, 101, 0.24);
}

.title-dot { color: var(--gold); margin: 0 -0.035em; }
.hero-copy { max-width: 740px; color: var(--deep-ink); margin: 0; font-size: clamp(1.1rem, 2vw, 1.42rem); }

.kintsugi-divider {
  width: min(1180px, 88vw);
  height: 124px;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  opacity: 0.82;
}

.reading-room, .archive-kiln {
  max-width: 1280px;
  margin-left: max(4vw, 2rem);
  margin-right: max(5vw, 2.5rem);
  padding: 4.236rem 0 3.414rem;
}

.section-intro { max-width: 760px; margin: 0 0 2.618rem; }
.section-intro h2 { font-size: clamp(2rem, 5vw, 4.5rem); margin: 0.618rem 0 0; color: var(--deep-ink); }

.story-grid {
  display: grid;
  grid-template-columns: 1fr 0.95fr 1.05fr;
  grid-auto-rows: minmax(282px, auto);
  gap: 1.618rem 2.236rem;
}

.story-card {
  position: relative;
  overflow: hidden;
  min-height: 282px;
  padding: 1.618rem 2.236rem 1.414rem 1.618rem;
  border-radius: 3px 6px 4px 5px;
  background: rgba(232, 220, 200, 0.82);
  box-shadow: inset 0 0 0 1px rgba(107, 101, 96, 0.15), inset 0 0 4px rgba(107, 101, 96, 0.05), 0 13px 34px rgba(42, 37, 32, 0.08);
  cursor: pointer;
  transition: box-shadow 300ms ease, background-color 300ms ease;
}

.story-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.04;
  mix-blend-mode: multiply;
  transition: opacity 300ms ease;
  pointer-events: none;
}

.story-card:hover::before { opacity: 0.08; }
.story-card:hover .crack path { stroke-opacity: 0.8; }
.story-card:nth-child(2n) { border-radius: 6px 3px 5px 4px; transform: translateY(3px); }
.story-card:nth-child(3n) { border-radius: 4px 5px 3px 6px; transform: translateY(-2px); }
.card-wide { grid-column: span 2; }
.card-tall { grid-row: span 2; }

.story-card h3 { font-size: clamp(1.55rem, 2.8vw, 2.55rem); margin: 0.809rem 0 1.236rem; --ls-wobble: 0.01em; }
.story-card:nth-child(4n+1) h3 { --ls-wobble: -0.02em; }
.story-card:nth-child(4n+2) h3 { --ls-wobble: 0.01em; }
.story-card:nth-child(4n+3) h3 { --ls-wobble: -0.01em; }
.story-card:nth-child(4n+4) h3 { --ls-wobble: 0.015em; }
.story-card p:not(.card-meta) { margin: 0; color: var(--smoke); }

.wave-separator { width: 100%; height: 22px; margin: 0.809rem 0 1.214rem; opacity: 0.9; }
.crack { position: absolute; inset: auto 0.809rem 0.809rem auto; width: 46%; height: 38%; pointer-events: none; opacity: 0.82; }
.crack path { fill: none; stroke: var(--gold); stroke-width: 0.75px; stroke-opacity: 0.3; transition: stroke-opacity 300ms ease; }
.card-ripple { position: absolute; inset: 50% auto auto 50%; width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(196, 162, 101, 0.15); transform: translate(-50%, -50%) scale(0); opacity: 0; pointer-events: none; }
.story-card.loaded .card-ripple { animation: ripple 1200ms ease-out forwards; }

blockquote {
  margin: 1.618rem 0 0;
  color: var(--deep-ink);
  font-family: "Playfair Display", serif;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-style: italic;
  line-height: 1.35;
}

blockquote::before { content: "●"; color: var(--gold); font-size: 0.62em; margin-right: 0.5em; }

.archive-kiln { padding-top: 2.236rem; }
.archive-list { list-style: none; padding: 0; margin: 0; max-width: 1050px; }
.archive-list li {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: 1.618rem;
  padding: 1.214rem 0 1.118rem;
  border-bottom: 1px solid rgba(139, 111, 78, 0.18);
  font-family: "Zilla Slab", serif;
  font-size: clamp(1.2rem, 2.2vw, 2rem);
  line-height: 1.25;
}
.archive-list li:nth-child(1) { opacity: 1; }
.archive-list li:nth-child(2) { opacity: 0.86; }
.archive-list li:nth-child(3) { opacity: 0.72; }
.archive-list li:nth-child(4) { opacity: 0.58; }
.archive-list li:nth-child(5) { opacity: 0.44; }
.archive-list li:nth-child(6) { opacity: 0.3; }

.colophon {
  min-height: 48vh;
  padding: 5.236rem max(5vw, 2.5rem) 4.236rem max(4vw, 2rem);
  background: var(--charred);
  color: var(--parchment);
  position: relative;
  overflow: hidden;
}
.colophon::before { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: 0.08; }
.colophon p { position: relative; max-width: 780px; margin: 1.618rem 0 0; color: rgba(232, 220, 200, 0.78); }
.colophon .date-stamp { color: var(--celadon); }
.footer-wave { position: relative; height: 42px; width: min(420px, 80vw); }

.resolve-text { opacity: 0.3; filter: blur(1px); transition: opacity 800ms ease-out, filter 800ms ease-out; }
.resolve-text.is-clear { opacity: 1; filter: blur(0); }

.expanded-reader {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 4.236rem max(5vw, 2.5rem);
  background: rgba(42, 37, 32, 0.86);
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms ease-in-out;
}
.expanded-reader.is-open { opacity: 1; pointer-events: auto; }
.reader-surface {
  width: min(920px, 92vw);
  max-height: 82vh;
  overflow: auto;
  padding: 2.618rem 3.414rem 2.236rem 2.618rem;
  background: var(--parchment);
  border-radius: 6px 3px 5px 4px;
  box-shadow: inset 0 0 0 1px rgba(107, 101, 96, 0.16), 0 28px 80px rgba(42, 37, 32, 0.38);
  transform: translateY(18px) scale(0.985);
  transition: transform 500ms ease-in-out;
}
.expanded-reader.is-open .reader-surface { transform: translateY(0) scale(1); }
.reader-surface h3 { font-size: clamp(2rem, 5vw, 4.5rem); margin: 0.809rem 0 1.618rem; }
.reader-close {
  position: absolute;
  top: 1.618rem;
  right: 2.236rem;
  border: 1px solid rgba(232, 220, 200, 0.26);
  background: rgba(232, 220, 200, 0.08);
  color: var(--parchment);
  font-family: "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.809rem 1.214rem;
  border-radius: 999px;
  cursor: pointer;
}

@keyframes ripple {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0.55; }
  100% { transform: translate(-50%, -50%) scale(22); opacity: 0; }
}

@media (max-width: 860px) {
  .hero { padding: 6.854rem 1.618rem 3.414rem; }
  .hero-content { padding-left: 1.214rem; padding-right: 1.214rem; }
  .reading-room, .archive-kiln { margin-left: 1.414rem; margin-right: 1.618rem; }
  .story-grid { grid-template-columns: 1fr; gap: 1.414rem; }
  .card-wide, .card-tall { grid-column: auto; grid-row: auto; }
  .archive-list li { grid-template-columns: 1fr; gap: 0.382rem; }
  .reader-surface { padding: 2.236rem 1.414rem; }
}