/* chikayami.net — fairycore mountain dusk, washi paper, single-typeface */

:root {
  --washi-cream: #f6ecdc;
  --washi-warm: #efe1cc;
  --lantern-glow: #e9b86b;
  --persimmon-dusk: #c46a3a;
  --cedar-smoke: #7a5a4a;
  --ink-bark: #3a2e2a;
  --moss-veil: #8aa37b;
  --rose-mist: #f3d6c4;
  /* mountain ridge depth stops (used in inline SVG polygons) */
  --ridge-2: #a8624a;
  --ridge-3: #8a5e54;
  --ridge-4: #a07a72;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--washi-cream);
}

body {
  font-family: "Commissioner", "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--ink-bark);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01" on, "kern" on;
  position: relative;
  overflow-x: hidden;
}

/* washi noise overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.07;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='7'/><feColorMatrix type='matrix' values='0 0 0 0 0.45  0 0 0 0 0.36  0 0 0 0 0.30  0 0 0 1 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
}

.noise-defs { position: absolute; }

.page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2rem) clamp(3rem, 8vh, 6rem);
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 8vh, 6rem);
}

/* shared modular block */
.block {
  position: relative;
  background: var(--washi-cream);
  border: 1px solid rgba(122, 90, 74, 0.18);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: 0 1px 0 rgba(58, 46, 42, 0.04), 0 18px 32px -28px rgba(58, 46, 42, 0.18);
}

/* ---------- 1. Lantern Header ---------- */
.lantern-header {
  position: relative;
  height: 60vh;
  min-height: 360px;
  display: flex;
  align-items: flex-end;
  margin-top: clamp(1.5rem, 5vh, 3rem);
  overflow: hidden;
}
.header-ridge {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 60%;
  opacity: 0.55;
}
.wordmark-row {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 1.4rem;
  padding-bottom: clamp(1rem, 4vh, 2.5rem);
}
.wordmark {
  margin: 0;
  font-weight: 200;
  font-size: clamp(3rem, 9vw, 7rem);
  letter-spacing: 0.04em;
  line-height: 0.95;
  color: var(--ink-bark);
}
.lantern-dots {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 0.9em;
}
.dot {
  display: block;
  border-radius: 50%;
  background: var(--lantern-glow);
  box-shadow: 0 0 10px rgba(233, 184, 107, 0.7), 0 0 22px rgba(233, 184, 107, 0.35);
}
.dot-1 { width: 12px; height: 12px; animation: breathe 4s ease-in-out infinite; }
.dot-2 { width: 14px; height: 14px; animation: breathe 5s ease-in-out infinite; }
.dot-3 { width: 18px; height: 18px; animation: breathe 7s ease-in-out infinite; }
@keyframes breathe {
  0%, 100% { opacity: 0.35; transform: scale(0.92); }
  50% { opacity: 1; transform: scale(1.06); }
}

/* ---------- 2. Threshold Block ---------- */
.threshold { display: flex; }
.threshold-block {
  max-width: 880px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  transform: translateX(24px);
  border-radius: 18px;
  background: var(--washi-warm);
}
.threshold-poem {
  margin: 0;
  font-size: clamp(1.1rem, 2.2vw, 1.45rem);
  line-height: 1.85;
  font-weight: 350;
  color: var(--cedar-smoke);
}

/* ---------- 3. Three Lanterns Row ---------- */
.lantern-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(1.2rem, 3vw, 2rem);
}
.lantern-block {
  flex: 1 1 0;
  min-width: 220px;
  overflow: hidden;
  border-radius: 14px;
  background: var(--washi-cream);
}
.lb-45 { aspect-ratio: 4 / 5; border-radius: 14px; }
.lb-11 { aspect-ratio: 1 / 1; border-radius: 22px; background: var(--washi-warm); }
.lb-54 { aspect-ratio: 5 / 4; border-radius: 18px; }
.lantern-block { display: flex; }
.lantern-content {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  justify-content: center;
  width: 100%;
  opacity: 1;
  transition: opacity 700ms ease-out;
}
.lantern-block.loading .lantern-content { opacity: 0; }
.lantern-skeleton {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, var(--rose-mist) 20%, var(--washi-cream) 50%, var(--rose-mist) 80%);
  background-size: 220% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  opacity: 0;
  transition: opacity 600ms ease-out;
  pointer-events: none;
}
.lantern-block.loading .lantern-skeleton { opacity: 1; }
@keyframes shimmer {
  0% { background-position: 130% 0; }
  100% { background-position: -30% 0; }
}
.lantern-illu { width: 24px; height: 32px; }
.stanza {
  margin: 0;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  line-height: 1.7;
  font-weight: 350;
  color: var(--ink-bark);
}
.caption {
  margin: 0;
  font-weight: 600;
  font-variant: small-caps;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  color: var(--cedar-smoke);
}

/* hand-drawn rule */
.rule { width: 100%; height: 12px; display: block; }

/* ---------- 4. Mountain Ridge Band ---------- */
.ridge-band {
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  height: 280px;
  overflow: hidden;
}
.ridge-svg { width: 100%; height: 100%; display: block; }
.fireflies { position: absolute; inset: 0; pointer-events: none; }
.firefly {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--lantern-glow);
  box-shadow: 0 0 8px #e9b86b, 0 0 16px rgba(233, 184, 107, 0.4);
}
.f1 { left: 12%; top: 30%; animation: drift1 21s cubic-bezier(0.4,0,0.6,1) infinite; }
.f2 { left: 28%; top: 55%; animation: drift2 26s cubic-bezier(0.4,0,0.6,1) infinite; }
.f3 { left: 44%; top: 22%; animation: drift3 18s cubic-bezier(0.4,0,0.6,1) infinite; }
.f4 { left: 60%; top: 48%; animation: drift4 31s cubic-bezier(0.4,0,0.6,1) infinite; }
.f5 { left: 76%; top: 34%; animation: drift5 24s cubic-bezier(0.4,0,0.6,1) infinite; }
.f6 { left: 88%; top: 58%; animation: drift6 28s cubic-bezier(0.4,0,0.6,1) infinite; }
@keyframes drift1 { 0%{transform:translate(0,0);opacity:.3} 30%{opacity:1} 50%{transform:translate(70px,-40px)} 80%{opacity:.6} 100%{transform:translate(-20px,18px);opacity:.3} }
@keyframes drift2 { 0%{transform:translate(0,0);opacity:.2} 25%{opacity:.9} 50%{transform:translate(-60px,32px)} 75%{opacity:1} 100%{transform:translate(40px,-26px);opacity:.2} }
@keyframes drift3 { 0%{transform:translate(0,0);opacity:.4} 40%{opacity:1} 60%{transform:translate(54px,40px)} 100%{transform:translate(-30px,-22px);opacity:.4} }
@keyframes drift4 { 0%{transform:translate(0,0);opacity:.25} 35%{opacity:.95} 55%{transform:translate(-48px,-36px)} 80%{opacity:1} 100%{transform:translate(36px,28px);opacity:.25} }
@keyframes drift5 { 0%{transform:translate(0,0);opacity:.3} 30%{opacity:1} 50%{transform:translate(62px,-30px)} 100%{transform:translate(-26px,34px);opacity:.3} }
@keyframes drift6 { 0%{transform:translate(0,0);opacity:.2} 45%{opacity:.9} 65%{transform:translate(-58px,-24px)} 100%{transform:translate(30px,40px);opacity:.2} }

/* ---------- 5. Wandering Notes ---------- */
.wandering-notes {
  display: flex;
  flex-direction: column;
  gap: clamp(1.4rem, 4vh, 2.4rem);
}
.note { border-radius: 18px; }
.note-a { width: 62%; margin-right: auto; border-radius: 14px; }
.note-b { width: 48%; margin-left: auto; background: var(--washi-warm); border-radius: 22px; }
.note-c { width: 75%; margin-right: auto; border-radius: 18px; }
.note-d { width: 40%; margin-left: auto; background: var(--washi-warm); border-radius: 14px; }
.note-e { width: 58%; margin-right: auto; border-radius: 22px; }
.note-date {
  margin: 0 0 0.5rem;
  font-weight: 350;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--cedar-smoke);
}
.note-body {
  margin: 0;
  color: var(--ink-bark);
}
.note:hover { border-color: rgba(196, 106, 58, 0.45); }

/* ---------- 6. Twilight Foot ---------- */
.twilight-foot {
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  padding: clamp(3rem, 9vh, 6rem) clamp(1rem, 4vw, 2rem) clamp(2rem, 6vh, 4rem);
  text-align: center;
  overflow: hidden;
}
.foot-ridge {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 70%;
}
.foot-lantern { width: 24px; height: 32px; opacity: 0.35; position: relative; margin-bottom: 0.8rem; }
.foot-stamp {
  position: relative;
  margin: 0;
  font-weight: 350;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  color: var(--cedar-smoke);
}

/* ---------- responsive ---------- */
@media (max-width: 720px) {
  .lantern-row { flex-direction: column; }
  .lantern-block { aspect-ratio: auto; min-height: 200px; }
  .ridge-band, .twilight-foot { }
  .ridge-band { height: 180px; }
  .threshold-block { transform: translateX(0); }
  .note-a, .note-b, .note-c, .note-d, .note-e { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .dot-1, .dot-2, .dot-3 { animation: none; opacity: 1; }
  .firefly { animation: none !important; opacity: 0.8; }
  .lantern-skeleton { animation: none; }
  .lantern-block.loading .lantern-content { opacity: 1; }
  .lantern-block.loading .lantern-skeleton { opacity: 0; }
}