/* Kizashi — shared night theme stylesheet */

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

:root {
  --ink:         oklch(14% 0.04 310);
  --plum:        oklch(30% 0.10 340);
  --sakura-pale: oklch(90% 0.03 348);
  --sakura-mid:  oklch(78% 0.07 350);
  --sakura-deep: oklch(62% 0.12 355);
  --gold:        oklch(70% 0.11 78);
  --text-main:   oklch(92% 0.015 60);
  --text-dim:    oklch(65% 0.02 60);
}

html, body {
  width: 100%; height: 100%;
  background: var(--ink);
  color: var(--text-main);
  font-family: 'EB Garamond', Georgia, serif;
  overflow: hidden;
}

/* Washi noise texture */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 1;
}

/* Radial vignette */
body::after {
  content: '';
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at center, transparent 45%, oklch(8% 0.03 310 / 0.55) 100%);
  pointer-events: none; z-index: 2;
}

/* Sakura petal canvas */
#petals {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 3;
}

/* Branch corner decorations */
.branch {
  position: fixed;
  pointer-events: none; z-index: 4;
  opacity: 0.15;
}
.branch-tl { top: -20px; left: -20px; transform: rotate(0deg); }
.branch-tr { top: -20px; right: -20px; transform: scaleX(-1); }
.branch-bl { bottom: -20px; left: -20px; transform: rotate(180deg) scaleX(-1); }
.branch-br { bottom: -20px; right: -20px; transform: rotate(180deg); }

/* Main layout */
main {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 10;
}

/* Ghost kanji watermark */
.kanji-ghost {
  font-family: 'Shippori Mincho B1', serif;
  font-size: clamp(160px, 22vw, 260px);
  font-weight: 800;
  color: var(--sakura-pale);
  opacity: 0.06;
  position: absolute;
  user-select: none;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* Top-left navigation wordmark */
.nav-wordmark {
  position: fixed;
  top: 28px; left: 32px;
  font-family: 'Shippori Mincho B1', serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.15em;
  color: var(--text-main);
  opacity: 0.5;
  z-index: 20;
  font-variant: small-caps;
  text-transform: lowercase;
  text-decoration: none;
}

/* ── Home — placeholder wordmark ─────────────────────────────────────── */

.wordmark {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.wordmark-romaji {
  font-family: 'Shippori Mincho B1', serif;
  font-size: clamp(36px, 6vw, 72px);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-main);
  line-height: 1;
}

.wordmark-rule {
  width: 80px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--sakura-mid), transparent);
  border: none;
}

.wordmark-tagline {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: clamp(14px, 1.8vw, 18px);
  color: var(--text-dim);
  letter-spacing: 0.12em;
}

/* ── Error pages (404, 500) — card layout ────────────────────────────── */

.card {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
}

.card-code {
  font-family: 'Shippori Mincho B1', serif;
  font-size: clamp(14px, 1.6vw, 17px);
  font-weight: 400;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--sakura-mid);
  opacity: 0.6;
}

.card-title {
  font-family: 'Shippori Mincho B1', serif;
  font-size: clamp(32px, 5vw, 58px);
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-main);
  line-height: 1;
}

.card-rule {
  width: 80px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--sakura-mid), transparent);
  border: none;
}

.card-message {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: clamp(16px, 2vw, 22px);
  color: var(--text-dim);
  letter-spacing: 0.04em;
  line-height: 1.75;
  max-width: 36ch;
}

.card-link {
  font-family: 'EB Garamond', serif;
  font-size: clamp(13px, 1.4vw, 15px);
  color: var(--sakura-mid);
  opacity: 0.55;
  letter-spacing: 0.12em;
  text-decoration: none;
  margin-top: 0.5rem;
  transition: opacity 0.2s ease;
}
.card-link:hover { opacity: 1; }