/* ===== yuk1n0w.dev — 四葉 edition ===== */
:root {
  /* Defaults; can be overridden by tweaks panel via [data-palette] */
  --bg: #fdfaf3;
  --bg-warm: #f8efde;
  --paper: #fffaf0;
  --ink: #18241c;
  --ink-soft: #3d4f3f;
  --muted: #7a8a7c;
  --rule: #d9d2bf;

  --leaf-deep: #1f4d2f;
  --leaf: #4f9c54;
  --leaf-light: #a7d39a;
  --leaf-glow: #c8e8b8;

  --ribbon: #ec8b3e;   /* yotsuba's orange */
  --ribbon-soft: #f4b878;
  --gold: #d9a441;

  --scarf: #5aa9d6;        /* yukino's scarf-blue — the winter-origin echo */
  --scarf-soft: #acd8ee;

  --shadow-1: 0 1px 0 rgba(24,36,28,0.06), 0 8px 24px -12px rgba(24,36,28,0.18);
  --shadow-2: 0 2px 0 rgba(24,36,28,0.08), 0 24px 48px -20px rgba(24,36,28,0.24);

  --max: 1240px;
}

/* Palette overrides */
[data-palette="cream"] {
  --bg:#fdfaf3; --bg-warm:#f6ecd6; --paper:#fffaf0;
  --ink:#18241c; --ink-soft:#3d4f3f; --muted:#7a8a7c;
  --leaf-deep:#1f4d2f; --leaf:#4f9c54; --leaf-light:#a7d39a; --leaf-glow:#c8e8b8;
  --ribbon:#ec8b3e; --ribbon-soft:#f4b878;
  --scarf:#5aa9d6; --scarf-soft:#acd8ee;
}
[data-palette="bright"] {
  --bg:#f4faf2; --bg-warm:#e6f3e1; --paper:#ffffff;
  --ink:#0f1f14; --ink-soft:#2d4a33; --muted:#6e8772;
  --leaf-deep:#1a6b32; --leaf:#3aaa4d; --leaf-light:#9be09c; --leaf-glow:#d2f5cd;
  --ribbon:#ff8a3d; --ribbon-soft:#ffb27a;
  --scarf:#3f9fd6; --scarf-soft:#a6daf2;
}
[data-palette="dark"] {
  --bg:#0e1611; --bg-warm:#16221a; --paper:#1a2820;
  --ink:#eef3ea; --ink-soft:#c2cfbe; --muted:#7e8d80;
  --rule:#2a3b30;
  --leaf-deep:#7ed98a; --leaf:#4ade80; --leaf-light:#9ef0a3; --leaf-glow:#34d469;
  --ribbon:#ff9f48; --ribbon-soft:#ffb878;
  --scarf:#74c4ec; --scarf-soft:#a9ddf4;
}
[data-palette="paper"] {
  --bg:#ffffff; --bg-warm:#f3efe6; --paper:#ffffff;
  --ink:#0c130e; --ink-soft:#27332a; --muted:#6b7872;
  --rule:#e2dccb;
  --leaf-deep:#143a23; --leaf:#3f7d44; --leaf-light:#cfe1c1; --leaf-glow:#e6efdb;
  --ribbon:#c97a3f; --ribbon-soft:#e2a878;
  --scarf:#4f97c2; --scarf-soft:#bcdcec;
}

/* ===== Yukino — the winter origin palette (Oregairu / <Yukino /> v1) =====
   Lifted from the original yuk1n0w.dev: icy slate + scarf-blue. Here the
   accent flips — scarf-blue leads, clover-green becomes the quiet echo,
   mirroring how the site itself evolved from blue to green. */
[data-palette="yukino"] {
  --bg:#dae4ed; --bg-warm:#cbd7e1; --paper:#e7eef5;
  --ink:#3a4751; --ink-soft:#5a6a78; --muted:#8095a3;
  --rule:#b8c7d6;
  --leaf-deep:#3f7d6a; --leaf:#5aa98f; --leaf-light:#bcd6cc; --leaf-glow:#d6e6df;
  --ribbon:#5fbce0; --ribbon-soft:#bfe4f4;   /* scarf-blue takes the accent slot */
  --scarf:#5a8fb5; --scarf-soft:#aecde0;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); }
body {
  font-family: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  font-feature-settings: "ss01","cv11";
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.jp { font-family: "Zen Maru Gothic", "Noto Serif JP", serif; }
.serif { font-family: "Fraunces", "Cormorant Garamond", serif; }
.mono { font-family: "JetBrains Mono", ui-monospace, monospace; }

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* Casual image deterrent — kill drag-to-open / drag-to-save and image
   selection. Paired with the JS dragstart guard + custom right-click menu.
   (Determined users can still reach URLs via the Network tab — unavoidable.) */
img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/* ===== Layout ===== */
.app {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.sheet {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 32px;
  z-index: 5;
}

/* Make room for the fixed kanji rail when it's visible (>920px) but the
   viewport is too narrow for the sheet to naturally clear it. */
@media (min-width: 921px) and (max-width: 1400px) {
  .sheet { padding-left: 32px; padding-right: 32px; }
  .topbar { padding-left: 32px; }
}

/* Background paper texture */
.paper-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1200px 600px at 80% -10%, color-mix(in oklab, var(--leaf-light) 35%, transparent), transparent 60%),
    radial-gradient(900px 500px at -10% 60%, color-mix(in oklab, var(--ribbon-soft) 25%, transparent), transparent 60%),
    var(--bg);
}
.paper-bg::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 25% 30%, rgba(31,77,47,0.05) 0 1px, transparent 1.5px),
    radial-gradient(circle at 75% 70%, rgba(31,77,47,0.04) 0 1px, transparent 1.5px);
  background-size: 24px 24px, 38px 38px;
  opacity: 0.7;
}

/* Giant 四葉 watermark */
.kanji-watermark {
  position: fixed;
  right: -6vw;
  top: 50%;
  transform: translateY(-50%) rotate(-6deg);
  font-family: "Zen Maru Gothic", "Noto Serif JP", serif;
  font-weight: 900;
  font-size: clamp(360px, 60vw, 900px);
  color: var(--leaf-deep);
  opacity: 0.05;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.05em;
  line-height: 0.8;
}

/* ===== Top bar ===== */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.brand .mark {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--leaf-deep);
  color: var(--leaf-glow);
  font-family: "Zen Maru Gothic", serif;
  font-weight: 900;
  font-size: 20px;
  box-shadow: var(--shadow-1);
  position: relative;
}
.brand .mark::after {
  content:"";
  position: absolute;
  bottom: -3px; right: -3px;
  width: 10px; height: 10px;
  background: var(--ribbon);
  border-radius: 50%;
  border: 2px solid var(--bg);
}
.brand .name { font-size: 15px; }
.brand .handle { color: var(--muted); font-size: 13px; }

.nav-pills {
  display: flex;
  gap: 4px;
  background: color-mix(in oklab, var(--paper) 80%, transparent);
  backdrop-filter: blur(12px);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 4px;
  box-shadow: var(--shadow-1);
}
.nav-pills a {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  display: flex; align-items: center; gap: 8px;
  transition: all .2s;
}
.nav-pills a:hover { background: var(--bg-warm); color: var(--ink); }
.nav-pills a.is-active {
  background: var(--leaf-deep);
  color: var(--leaf-glow);
}
.nav-pills .kanji { font-family: "Zen Maru Gothic", serif; font-weight: 700; }
.nav-pills a[data-i="4"] .kanji { color: var(--ribbon); }
.nav-pills a[data-i="4"].is-active .kanji { color: var(--ribbon-soft); }

/* ===== Quintet rail (left side, desktop) ===== */
.rail {
  position: fixed;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 45;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rail-item {
  position: relative;
  width: 52px; height: 60px;
  border-radius: 14px;
  border: 1px solid var(--rule);
  background: color-mix(in oklab, var(--paper) 90%, transparent);
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  cursor: pointer;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), background .2s, color .2s, border-color .2s;
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.rail-item::before {
  /* left accent stripe — colored, makes each button feel like a labeled tab */
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--leaf);
  opacity: 0.85;
  transition: width .25s;
}
.rail-item[data-i="0"]::before { background: var(--muted); }
.rail-item[data-i="1"]::before { background: #e07595; }
.rail-item[data-i="2"]::before { background: #d83a76; }
.rail-item[data-i="3"]::before { background: #8e6f5a; }
.rail-item[data-i="4"]::before { background: var(--ribbon); }
.rail-item[data-i="5"]::before { background: #d44a3a; }

.rail-item:hover { transform: translateX(4px) scale(1.04); border-color: var(--ink-soft); }
.rail-item.is-active {
  background: var(--ink);
  color: var(--bg);
  transform: translateX(6px) scale(1.06);
  border-color: var(--ink);
}
.rail-item.is-active::before { width: 6px; }
.rail-item[data-i="4"].is-active {
  background: var(--ribbon);
  color: var(--paper);
  border-color: var(--ribbon);
}

.rail-item .rail-kanji {
  font-family: "Noto Serif JP", "Zen Maru Gothic", serif;
  font-weight: 900;
  font-size: 22px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.rail-item.is-active .rail-kanji { color: var(--bg); }
.rail-item[data-i="4"] .rail-kanji { color: var(--ribbon); }
.rail-item[data-i="4"].is-active .rail-kanji { color: var(--paper); }

.rail-item .rail-num {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.rail-item.is-active .rail-num { color: color-mix(in oklab, var(--bg) 80%, transparent); }

.rail-item .tip {
  position: absolute;
  left: 64px; top: 50%;
  transform: translateY(-50%);
  background: var(--ink);
  color: var(--bg);
  padding: 6px 10px;
  border-radius: 8px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.rail-item:hover .tip { opacity: 1; transform: translate(4px, -50%); }

@media (max-width: 920px) {
  .rail { display: none; }
}

/* ===== Section common ===== */
.section {
  position: relative;
  padding: 120px 0 80px;
  z-index: 5;
}
.section + .section { padding-top: 60px; }
.section-eyebrow {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 24px;
  color: var(--muted);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.section-eyebrow .num {
  font-family: "Zen Maru Gothic", serif;
  font-size: 36px;
  font-weight: 800;
  color: var(--leaf-deep);
  letter-spacing: -0.02em;
  line-height: 1;
}
.section-eyebrow[data-quint="4"] .num { color: var(--ribbon); }
.section-eyebrow .rule {
  flex: 1; height: 1px; background: var(--rule);
}
.section-eyebrow .ix {
  font-weight: 700;
  color: var(--ink-soft);
  letter-spacing: 0.3em;
}

/* ===== Hero ===== */
.hero {
  min-height: calc(100vh - 80px);
  padding: 140px 0 80px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
}
@media (max-width: 920px) { .hero { grid-template-columns: 1fr; padding-top: 110px; } }

.hero-left { position: relative; z-index: 2; }

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  box-shadow: var(--shadow-1);
  margin-bottom: 28px;
}
.hero-tag .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--leaf);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--leaf) 30%, transparent);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  50% { box-shadow: 0 0 0 8px color-mix(in oklab, var(--leaf) 0%, transparent); }
}

.hero h1 {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(56px, 8vw, 116px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 24px;
}
.hero h1 .yotsuba {
  font-family: "Zen Maru Gothic", serif;
  font-weight: 900;
  color: var(--leaf-deep);
  position: relative;
  display: inline-block;
  font-style: normal;
}
.hero h1 .yotsuba::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -8px;
  height: 14px;
  background: var(--ribbon);
  z-index: -1;
  border-radius: 4px;
  transform: skewX(-12deg);
  opacity: 0.85;
}
.hero h1 em {
  font-style: italic;
  color: var(--ink-soft);
  font-weight: 300;
}

.hero-sub {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 540px;
  margin: 0 0 36px;
}
.hero-sub b { color: var(--ink); font-weight: 700; }

.hero-cta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 14px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.005em;
  transition: transform .15s, box-shadow .2s, background .2s;
  box-shadow: var(--shadow-1);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.btn.primary {
  background: var(--leaf-deep);
  color: var(--leaf-glow);
  border-color: var(--leaf-deep);
}
.btn.primary:hover { background: color-mix(in oklab, var(--leaf-deep) 88%, white); }
.btn.ribbon {
  background: var(--ribbon);
  color: var(--paper);
  border-color: var(--ribbon);
}

.hero-meta {
  margin-top: 60px;
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}
.hero-meta-item {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero-meta-item b {
  display: block;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-transform: none;
  margin-top: 2px;
}

/* Hero right: ID card */
.hero-card {
  position: relative;
  border-radius: 28px;
  background: var(--paper);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-2);
  overflow: hidden;
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 640px;
  /* Subtle clockwise tilt — leans the card slightly right like a
     scrapbook ID. Straightens on hover so it stays readable. */
  rotate: 1.8deg;
  transform-origin: center 70%;
  transition: rotate .4s cubic-bezier(.2,.8,.2,1);
}
.hero-card:hover { rotate: 0deg; }
.hero-card::before {
  content: "四";
  position: absolute;
  right: -36px; bottom: -100px;
  font-family: "Zen Maru Gothic", serif;
  font-weight: 900;
  font-size: 480px;
  line-height: 0.8;
  color: var(--leaf);
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}
.hero-card::after {
  /* candy stripe corner — sized to sit behind the stamp without overlapping */
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 130px; height: 130px;
  background:
    repeating-linear-gradient(-45deg, var(--ribbon) 0 10px, var(--ribbon-soft) 10px 20px);
  clip-path: polygon(100% 0, 100% 100%, 0 0);
  z-index: 0;
  opacity: 0.92;
}
.hero-card > * { position: relative; z-index: 1; }

.hero-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.hero-card-top .lbl {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero-card-name {
  font-family: "Zen Maru Gothic", serif;
  font-weight: 900;
  font-size: 56px;
  line-height: 0.9;
  color: var(--leaf-deep);
  margin-top: 4px;
  letter-spacing: -0.02em;
}
.hero-card-name-en {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 18px;
  color: var(--ink-soft);
  margin-top: 2px;
}
.hero-card-stamp {
  position: relative;
  z-index: 2;
  text-align: right;
  color: white;
  padding: 0 0 0 14px;
}
.hero-card-stamp .stamp-num {
  font-family: "Zen Maru Gothic", serif;
  font-weight: 900;
  font-size: 32px;
  line-height: 1;
  color: white;
  text-shadow: 0 1px 0 rgba(0,0,0,0.22);
}
.hero-card-stamp .stamp-bar {
  width: 26px; height: 2px; background: white; margin: 5px 0 4px auto; opacity: 0.92;
}
.hero-card-stamp .stamp-jp {
  font-family: "Zen Maru Gothic", serif;
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: white;
  white-space: nowrap;
}

.hero-card-avatar {
  flex: 1;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-warm);
  border: 1px solid var(--rule);
  min-height: 220px;
}
.hero-card-avatar .avatar-glow {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 30%, transparent 40%, rgba(0,0,0,0.05) 100%);
  pointer-events: none;
}

.hero-card-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 10px 12px;
  background: var(--bg-warm);
  border-radius: 12px;
  border: 1px solid var(--rule);
}
.hero-card-stats .stat-k {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}
.hero-card-stats .stat-v {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  display: flex; align-items: center; gap: 6px;
}
.hero-card-stats .swatch {
  width: 10px; height: 10px; border-radius: 3px;
  display: inline-block;
}

.hero-card-quote {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 4px;
  border-top: 1px dashed var(--rule);
}
.hero-card-quote .quote-jp {
  font-family: "Zen Maru Gothic", serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--leaf-deep);
}
.hero-card-quote .quote-en {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 12px;
  color: var(--muted);
}

/* ===== Quintet cards row ===== */
.quint-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 32px;
}
@media (max-width: 920px) {
  .quint-row { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
}
/* Mobile-only swipe cue under the carousel (shown ≤700px) */
.quint-swipe-hint {
  display: none;
  margin-top: 2px;
  text-align: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--muted);
}
/* Phone (≤700px) — five-across is unreadable. The grid becomes a swipeable
   card binder: full-size cards, snap-centered, neighbors peeking at the
   screen edges (the row bleeds past the sheet padding on purpose). Top and
   bottom padding leave room for the hover lift + shadow inside the scroll
   clip box. */
@media (max-width: 700px) {
  .quint-row {
    display: flex;
    gap: 12px;
    margin: 24px -20px 0;
    padding: 12px 20px 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .quint-row::-webkit-scrollbar { display: none; }
  .quint-slot {
    flex: 0 0 min(64vw, 250px);
    scroll-snap-align: center;
  }
  .quint-swipe-hint { display: block; }
}
/* The slot is the stationary grid cell + hover target; the card lifts
   inside it. transform-origin keeps the slight rotate centered. */
.quint-slot {
  position: relative;
}
.quint-card {
  position: relative;
  aspect-ratio: 3 / 4.4;
  border-radius: 18px;
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .25s;
  cursor: pointer;
  --sister: var(--leaf);
  --sister-soft: var(--leaf-glow);
}
.quint-card::before {
  /* tinted top stripe */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 6px;
  background: var(--sister);
  z-index: 1;
}
/* Lift is driven by the JS `is-hovered` class set via mouseenter on a
   stationary parent slot — NOT by :hover on the card itself. Using :hover
   here caused a flicker loop: the lift moved the card's edge out from under
   the cursor, dropping :hover, dropping the lift, repeating ~100×/sec. */
.quint-card.is-hovered {
  transform: translateY(-10px) rotate(-1.5deg);
  box-shadow: 0 22px 40px -16px color-mix(in oklab, var(--sister) 30%, transparent), var(--shadow-2);
  border-color: var(--sister);
}
.quint-card.is-bias {
  background: linear-gradient(180deg, color-mix(in oklab, var(--sister-soft) 40%, var(--paper)), var(--paper));
}
.quint-card.is-bias::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 2px solid var(--ribbon);
  border-radius: 18px;
  box-shadow: inset 0 0 0 4px color-mix(in oklab, var(--paper) 100%, transparent);
}
.quint-card .ribbon-tag {
  position: absolute;
  left: 8px; top: 14px;
  background: var(--ribbon);
  color: var(--paper);
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  padding: 4px 9px 4px 7px;
  border-radius: 2px;
  clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%);
  z-index: 5;
  box-shadow: 0 4px 8px rgba(0,0,0,0.12);
}

.quint-card-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  position: relative;
  z-index: 2;
}
.quint-num {
  font-family: "Zen Maru Gothic", serif;
  font-weight: 900;
  font-size: 36px;
  line-height: 0.9;
  color: var(--sister);
  letter-spacing: -0.02em;
}
.quint-card.is-bias .quint-num { color: var(--ribbon); }
.quint-romaji {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 13px;
  color: var(--ink-soft);
}

.quint-portrait {
  flex: 1;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--sister-soft);
  border: 1px solid color-mix(in oklab, var(--sister) 30%, var(--rule));
  min-height: 130px;
}

.quint-meta {
  display: flex;
  justify-content: space-between;
  align-items: end;
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: var(--muted);
}
.quint-meta b {
  display: block;
  font-family: "Zen Maru Gothic", serif;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  font-weight: 700;
  margin-bottom: 2px;
}
.quint-id {
  font-weight: 700;
  color: var(--sister);
}

/* When hovered, slight green tilt for non-bias siblings */
.quint-card.is-hovered:not(.is-bias) {
  background: linear-gradient(180deg, color-mix(in oklab, var(--sister-soft) 50%, var(--paper)), var(--paper));
}

/* ===== About ===== */
.about {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 60px;
  align-items: start;
}
@media (max-width: 920px) { .about { grid-template-columns: 1fr; } }

.about-title {
  font-family: "Fraunces", serif;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin: 0 0 28px;
  color: var(--ink);
}
.about-title .green { color: var(--leaf-deep); font-style: italic; font-weight: 400; }

.about-body p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 14px;
  max-width: 600px;
}
.about-body p b { color: var(--ink); }
.about-body p .accent { color: var(--leaf-deep); font-weight: 700; }
.about-body p .ribbon-text { color: var(--ribbon); font-weight: 700; }

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--rule);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
}
.tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--leaf); }
.tag.js .dot { background: #f7df1e; }
.tag.react .dot { background: #61dafb; }
.tag.py .dot { background: #ffd43b; }
.tag.xp .dot { background: var(--ribbon); }

/* Sticky note style facts */
.facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.fact {
  position: relative;
  padding: 18px 20px 20px;
  border-radius: 14px;
  background: var(--paper);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-1);
  transition: transform .25s;
}
.fact:hover { transform: rotate(-1deg) translateY(-2px); }
.fact:nth-child(2) { background: linear-gradient(180deg, color-mix(in oklab, var(--leaf-glow) 50%, var(--paper)), var(--paper)); }
.fact:nth-child(3) { background: linear-gradient(180deg, color-mix(in oklab, var(--ribbon-soft) 30%, var(--paper)), var(--paper)); }
.fact-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.fact h4 {
  font-family: "Fraunces", serif;
  font-size: 22px;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.fact p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.fact .pin {
  position: absolute;
  top: -8px; left: 18px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--ribbon);
  box-shadow: inset -2px -2px 4px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.15);
}

/* ===== Projects ===== */
.projects-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
  align-items: start;
}
/* The waydroid card carries a terminal + a real screenshot stacked under
   its text, so it's taller than the right column. Let it grow to fit its
   content instead of being clipped to the grid row height. */
.project:has(.project-visual) { overflow: visible; }
.project:has(.project-visual) .project-main { height: auto; }
@media (max-width: 920px) { .projects-grid { grid-template-columns: 1fr; } }

.project {
  position: relative;
  border-radius: 22px;
  border: 1px solid var(--rule);
  background: var(--paper);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: transform .3s, box-shadow .3s;
}
.project:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.project-main {
  padding: 28px;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 360px;
  gap: 16px;
}
.project-tag-row {
  display: flex;
  gap: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.project-tag-row .live {
  color: var(--leaf-deep); font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px;
}
.project-tag-row .live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--leaf); animation: pulse 2s infinite;
}
.project h3 {
  font-family: "Fraunces", serif;
  font-size: 36px;
  margin: 0;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.project h3 .slash { color: var(--leaf); font-weight: 300; }
.project p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
.project-os {
  display: flex;
  gap: 8px;
  margin-top: auto;
}
.os-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--bg-warm);
  border: 1px solid var(--rule);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
}
.os-chip .glyph {
  width: 14px; height: 14px;
  display: grid; place-items: center;
  font-size: 12px;
}
.project-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--leaf-deep);
  align-self: flex-start;
}
.project-link::after {
  content: "→"; transition: transform .2s;
}
.project:hover .project-link::after { transform: translateX(4px); }

.project-visual {
  position: relative;
  background:
    repeating-linear-gradient(135deg, color-mix(in oklab, var(--leaf-deep) 12%, transparent) 0 1px, transparent 1px 14px),
    linear-gradient(180deg, var(--leaf-glow), var(--bg-warm));
  border-top: 1px solid var(--rule);
  padding: 24px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--ink-soft);
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.project-visual .ascii {
  white-space: pre;
  line-height: 1.15;
  color: var(--leaf-deep);
  font-size: 10px;
  opacity: 0.85;
}

.project.wip {
  display: flex; align-items: center; justify-content: center;
  background:
    repeating-linear-gradient(45deg, var(--paper) 0 16px, var(--bg-warm) 16px 32px);
  text-align: center;
  padding: 40px 28px;
  min-height: 360px;
}
.project.wip h3 {
  font-family: "Fraunces", serif;
  font-size: 32px;
  font-style: italic;
  color: var(--ink-soft);
}
.project.wip p {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
}

/* ===== Stack ===== */
.stack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.stack-card {
  position: relative;
  padding: 22px;
  border-radius: 16px;
  border: 1px solid var(--rule);
  background: var(--paper);
  box-shadow: var(--shadow-1);
  transition: transform .25s;
}
.stack-card:hover { transform: translateY(-4px); }
.stack-card .glyph {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.04em;
  color: var(--leaf-deep);
  margin-bottom: 16px;
}
.stack-card h4 {
  font-family: "Fraunces", serif;
  font-size: 22px;
  margin: 0 0 4px;
  color: var(--ink);
}
.stack-card p {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.stack-card .stack-note {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--rule);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  display: flex;
  gap: 7px;
  align-items: baseline;
}
.stack-card .stack-note-mark {
  color: var(--leaf);
  font-weight: 700;
  flex-shrink: 0;
}
.stack-card.featured {
  background: linear-gradient(160deg, var(--leaf-deep), color-mix(in oklab, var(--leaf-deep) 60%, black));
  color: var(--leaf-glow);
  border-color: var(--leaf-deep);
}
.stack-card.featured .glyph { color: var(--ribbon); }
.stack-card.featured h4 { color: var(--paper); }
.stack-card.featured p { color: color-mix(in oklab, var(--leaf-glow) 80%, transparent); }
.stack-card.featured .stack-note {
  border-top-color: color-mix(in oklab, var(--leaf-glow) 28%, transparent);
  color: color-mix(in oklab, var(--leaf-glow) 90%, transparent);
}
.stack-card.featured .stack-note-mark { color: var(--ribbon); }

/* ===== Contact ===== */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 24px;
}
.contact-card {
  position: relative;
  padding: 26px;
  border-radius: 18px;
  border: 1px solid var(--rule);
  background: var(--paper);
  box-shadow: var(--shadow-1);
  transition: transform .25s, box-shadow .25s, background .25s;
  overflow: hidden;
}
.contact-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); }
.contact-card .icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: grid; place-items: center;
  margin-bottom: 14px;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 16px;
}
.contact-card.irc .icon { background: #1a1a1a; color: #5be88a; font-family: "JetBrains Mono", monospace; }
.contact-card.github .icon { background: #1a1a1a; color: white; }
.contact-card.instagram .icon { background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af); color: white; }
.contact-card.matrix .icon { background: #0dbd8b; color: white; }
.contact-card h4 {
  font-family: "Fraunces", serif;
  font-size: 22px;
  margin: 0;
  line-height: 1;
  color: var(--ink);
}
.contact-card .handle {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  margin-top: 4px;
  color: var(--ink-soft);
}
.contact-card .arrow {
  position: absolute;
  top: 22px; right: 22px;
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  color: var(--muted);
  transition: transform .2s, color .2s;
}
.contact-card:hover .arrow { transform: translate(2px, -2px); color: var(--leaf-deep); }
.contact-card .leaf {
  position: absolute;
  right: -12px; bottom: -16px;
  font-family: "Zen Maru Gothic", serif;
  font-weight: 900;
  font-size: 120px;
  line-height: 0.8;
  color: var(--leaf-glow);
  opacity: 0.45;
  pointer-events: none;
  user-select: none;
}

/* ===== Footer ===== */
.footer {
  padding: 80px 0 40px;
  border-top: 1px solid var(--rule);
  margin-top: 80px;
  position: relative;
  z-index: 5;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  flex-wrap: wrap;
}
.footer .big {
  font-family: "Zen Maru Gothic", serif;
  font-weight: 900;
  font-size: clamp(80px, 14vw, 200px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--leaf-deep);
  margin: 0;
}
.footer .big .o { color: var(--ribbon); }
.footer-meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
  line-height: 1.7;
}
.footer-meta b { color: var(--ink); }

/* ===== Falling petals ===== */
.petals {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.petal {
  position: absolute;
  top: -40px;
  width: 18px; height: 18px;
  animation: fall linear infinite, sway ease-in-out infinite alternate;
  opacity: 0.9;
}
.petal svg { width: 100%; height: 100%; display: block; }
@keyframes fall {
  to { transform: translateY(110vh) rotate(720deg); }
}
@keyframes sway {
  from { margin-left: -20px; }
  to { margin-left: 20px; }
}

/* ===== Clover SVG primitive ===== */
.clover-icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em; }

/* ===== Easter egg hint (now lives in the footer, not floating) ===== */
.footer-hint {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px dashed var(--rule);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 9px;
}
.footer-hint b { color: var(--ink-soft); font-weight: 700; }
.footer-hint-mark { color: var(--leaf); font-size: 13px; }

/* Origin-story note in About + lineage line in footer (Oregairu → Quints) */
.origin-note {
  border-left: 2px solid color-mix(in oklab, var(--ribbon) 55%, var(--rule));
  padding-left: 16px;
  color: var(--ink-soft);
}
.origin-note b[lang="ja"] {
  font-family: "Zen Maru Gothic", "Noto Serif JP", serif;
  color: var(--leaf-deep);
}
.origin-note em { color: var(--muted); font-style: italic; }
.origin-note .winter-text {
  color: var(--scarf);
  font-weight: 600;
}
.origin-note .origin-mark {
  font-family: "JetBrains Mono", monospace;
  color: var(--scarf);                    /* winter-origin echo: scarf-blue */
  font-weight: 700;
  white-space: nowrap;
  border-bottom: 1px dotted color-mix(in oklab, var(--scarf) 60%, transparent);
}

.footer-lineage {
  margin-top: 14px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.footer-lineage .now { color: var(--leaf-deep); font-weight: 700; }
.footer-lineage b[lang="ja"] {
  font-family: "Zen Maru Gothic", "Noto Serif JP", serif;
  color: var(--ribbon);
  font-weight: 900;
}

/* <Yukino /> hover-reveal plaque — a tiny museum label for the v1 self. */
.yukino-mark {
  position: relative;
  display: inline-block;
  cursor: help;
  outline: none;
}
.yukino-mark .was {
  color: var(--scarf);
  font-weight: 700;
  border-bottom: 1px dotted color-mix(in oklab, var(--scarf) 60%, transparent);
  transition: color .2s;
}
.yukino-mark:hover .was,
.yukino-mark:focus-visible .was { color: color-mix(in oklab, var(--scarf) 75%, var(--ink)); }

.yukino-plaque {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  width: max-content;
  max-width: 280px;
  padding: 10px 13px;
  border-radius: 10px;
  background: color-mix(in oklab, var(--scarf) 16%, var(--paper));
  border: 1px solid color-mix(in oklab, var(--scarf) 45%, var(--rule));
  box-shadow: var(--shadow-2);
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--ink);
  text-transform: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .25s, transform .25s, visibility 0s linear .25s;
  z-index: 20;
  pointer-events: none;
}
.yukino-plaque::after {
  /* little pointer down to the mark */
  content: "";
  position: absolute;
  left: 22px; top: 100%;
  border: 6px solid transparent;
  border-top-color: color-mix(in oklab, var(--scarf) 45%, var(--rule));
}
.yukino-plaque small {
  display: block;
  margin-top: 5px;
  font-family: "JetBrains Mono", monospace;
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--scarf);
}
.yukino-mark:hover .yukino-plaque,
.yukino-mark:focus-visible .yukino-plaque {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .25s, transform .25s, visibility 0s;
}

/* Konami flash */
@keyframes konami-flash {
  0% { background: var(--bg); }
  50% { background: var(--ribbon); }
  100% { background: var(--bg); }
}
.konami-active { animation: konami-flash 0.6s ease 3; }

.konami-toast {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  background: var(--ink);
  color: var(--ribbon);
  padding: 24px 36px;
  border-radius: 20px;
  font-family: "Zen Maru Gothic", serif;
  font-weight: 900;
  font-size: 48px;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  user-select: none;
  transition: opacity .3s, transform .3s cubic-bezier(.34,1.56,.64,1), visibility 0s linear .3s;
  text-align: center;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.konami-toast.show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
  transition: opacity .3s, transform .3s cubic-bezier(.34,1.56,.64,1), visibility 0s;
}
.konami-toast small {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--leaf-glow);
  margin-top: 8px;
  font-weight: 600;
}

/* Clover counter UI */
.clover-counter {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 40;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 10px 14px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  box-shadow: var(--shadow-1);
  cursor: default;
}
.clover-counter .pip {
  width: 12px; height: 12px;
  display: inline-block;
  color: var(--rule);
  transition: color .3s, transform .3s;
}
.clover-counter .pip.on { color: var(--leaf); transform: scale(1.2); }
.clover-counter .pip[data-i="4"].on { color: var(--ribbon); }

/* Hidden clover hover indicator */
.hidden-clover {
  position: absolute;
  width: 22px; height: 22px;
  cursor: pointer;
  color: var(--leaf);
  opacity: 0.0;
  transition: opacity .2s, transform .2s;
  z-index: 6;
}
.hidden-clover:hover { opacity: 0.8; transform: scale(1.2) rotate(15deg); }
.hidden-clover.found { opacity: 0; pointer-events: none; }
.hidden-clover.peek { opacity: 0.15; }

/* ===== NOW strip ===== */
.now-strip {
  position: relative;
  z-index: 5;
  margin: 24px 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background:
    repeating-linear-gradient(45deg, transparent 0 8px, color-mix(in oklab, var(--leaf-deep) 4%, transparent) 8px 9px);
}
@media (max-width: 1180px) {
  .now-strip { grid-template-columns: 1fr 1fr; }
  .now-item:nth-child(2) { border-right: 0; }
  .now-item:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
}
@media (max-width: 560px) {
  .now-strip { grid-template-columns: 1fr; }
  .now-item { border-right: 0 !important; border-bottom: 1px solid var(--rule) !important; }
  .now-item:last-child { border-bottom: 0 !important; }
}
.now-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-right: 1px solid var(--rule);
  position: relative;
  transition: background .25s;
}
.now-item:last-child { border-right: 0; }
@media (max-width: 920px) {
  /* legacy fallback */
}
.now-item:hover { background: color-mix(in oklab, var(--leaf-glow) 30%, transparent); }
.now-glyph {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--leaf-deep);
  color: var(--leaf-glow);
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}
.now-item:nth-child(2) .now-glyph { background: var(--ribbon); color: var(--paper); }
.now-item:nth-child(3) .now-glyph { background: #4a5b9c; color: white; }
.now-item:nth-child(4) .now-glyph { background: var(--ink); color: var(--leaf-glow); }
.now-text { min-width: 0; flex: 1; }
.now-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.now-value {
  font-family: "Fraunces", serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.now-sub {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  color: var(--muted);
  margin-top: 1px;
}

/* ===== Terminal mock ===== */
.terminal {
  width: 100%;
  border-radius: 12px;
  background: #14201a;
  border: 1px solid color-mix(in oklab, var(--leaf-deep) 30%, transparent);
  overflow: hidden;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.4);
}
.terminal-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #1d2c24;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.terminal-bar .dot {
  width: 10px; height: 10px; border-radius: 50%;
}
.terminal-bar .dot.r { background: #ff5f57; }
.terminal-bar .dot.y { background: #febc2e; }
.terminal-bar .dot.g { background: #28c840; }
.terminal-bar .tt {
  margin-left: 8px;
  color: #9bb29f;
  font-size: 11px;
}
.terminal-body {
  padding: 14px 16px;
  color: #d6efd6;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.terminal-body .pmt { color: var(--leaf-light); font-weight: 700; margin-right: 6px; }
.terminal-body .out { color: #b4cbb4; }
.terminal-body .out.muted { color: #7e9281; font-size: 11px; }
.terminal-body .ok { color: var(--leaf-light); font-weight: 700; }
.terminal-body .blink {
  display: inline-block;
  width: 7px; height: 13px;
  background: var(--leaf-light);
  vertical-align: -2px;
  margin-left: 4px;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* override project-visual to host terminal cleanly */
.project-visual {
  padding: 20px;
  background:
    radial-gradient(800px 200px at 50% -10%, color-mix(in oklab, var(--leaf-deep) 14%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in oklab, var(--leaf-deep) 8%, var(--bg-warm)), var(--bg-warm));
  display: block;
  min-height: 220px;
}

/* Real proof-shot under the mock terminal in the waydroid card */
.project-shot {
  margin: 16px 0 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--leaf-light) 40%, var(--rule));
  background: #1b1614;
  box-shadow: var(--shadow-1), inset 0 0 0 4px rgba(255,255,255,0.04);
  padding: 5px;
}
.project-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.project-shot figcaption {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  padding: 9px 12px;
  background: var(--bg-warm);
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  gap: 7px;
}
.project-shot figcaption .ok { color: var(--leaf); font-size: 9px; }
@media (max-width: 600px) {
  .project-shot figcaption { font-size: 9.5px; }
}

/* ===== Footer band (was the scrolling marquee — now a quiet stripe) ===== */
.footer-band {
  height: 8px;
  background: var(--leaf-deep);
  border-top: 1px solid color-mix(in oklab, var(--leaf-deep) 50%, black);
  border-bottom: 1px solid color-mix(in oklab, var(--leaf-deep) 50%, black);
}

.footer {
  padding: 0 0 40px;
  margin-top: 80px;
  position: relative;
  z-index: 5;
  border-top: none;
}
.footer .sheet { padding-top: 60px; }
.footer-inner {
  display: block;
  align-items: start;
}
@media (max-width: 920px) { .footer-inner { display: block; } }
.footer .big {
  font-family: "Zen Maru Gothic", serif;
  font-weight: 900;
  font-size: clamp(64px, 10vw, 132px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--leaf-deep);
  margin: 0;
}
.footer .big .o { color: var(--ribbon); }
.footer-sub {
  margin-top: 10px;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 17px;
  color: var(--ink-soft);
}
.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 600px) { .footer-cols { grid-template-columns: 1fr; } }
.footer-col {
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  color: var(--ink-soft);
  line-height: 1.7;
}
.footer-col > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.footer-col > div.wrap { white-space: normal; }
.footer-h {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
  font-weight: 700;
}
.footer-konami {
  margin-top: 6px;
  color: var(--ribbon);
  letter-spacing: 0.1em;
}

/* ===== Cursor clover trail ===== */
.trail-clover {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  animation: trail-fall 1.3s cubic-bezier(.25,.6,.4,1) forwards;
}
.trail-clover svg { display: block; }
@keyframes trail-fall {
  0%   { opacity: 0.9; transform: translate(-50%, -50%) scale(0.6) rotate(var(--rot, 0deg)); }
  20%  { opacity: 1;   transform: translate(-50%, -50%) scale(1) rotate(var(--rot, 0deg)); }
  100% { opacity: 0;   transform: translate(calc(-50% + var(--drift, 0px)), calc(-50% + 36px)) scale(0.5) rotate(calc(var(--rot, 0deg) + 180deg)); }
}
/* ===== Sister images (replacing SVG avatars) ===== */
.hero-card-avatar-photo {
  background:
    radial-gradient(circle at 50% 80%, color-mix(in oklab, var(--leaf-light) 70%, transparent), transparent 60%),
    linear-gradient(180deg, var(--paper), color-mix(in oklab, var(--leaf-glow) 30%, var(--paper)));
  position: relative;
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-radius: 16px;
  overflow: hidden;
  min-height: 420px;
}
/* Soft top fade — bleeds the photo into the card paper so there's no
   hard line between the new bg-baked image and the card chrome. */
.hero-card-avatar-photo::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 40%;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--paper) 90%, transparent) 0%,
    transparent 100%);
  pointer-events: none;
  z-index: 3;
}
.hero-yotsuba-img {
  height: 100%;
  width: 100%;
  /* Wallpaper-aspect source has lots of empty top space — bottom-anchor
     a cover crop so she sits in the frame, then breathe with a slow
     ambient zoom so the card feels alive instead of static. */
  object-fit: cover;
  object-position: center 78%;
  filter: drop-shadow(0 12px 24px rgba(31,77,47,0.22));
  position: relative;
  z-index: 2;
  animation: yotsuba-breathe 14s ease-in-out infinite;
  transform-origin: center 75%;
}
@keyframes yotsuba-breathe {
  0%, 100% { transform: scale(1.00) translateY(0); }
  50%      { transform: scale(1.04) translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-yotsuba-img { animation: none; }
}
.hero-card-avatar-photo::before {
  /* spotlight ground circle behind feet */
  content: "";
  position: absolute;
  bottom: 14px; left: 50%;
  transform: translateX(-50%);
  width: 70%; height: 18px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(31,77,47,0.18), transparent);
  z-index: 1;
}

.quint-doll-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  padding: 8px 4px 0;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.10));
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.quint-card:hover .quint-doll-img {
  transform: translateY(-4px) scale(1.05);
}
.quint-portrait {
  /* override since image already has background */
  background:
    radial-gradient(circle at 50% 80%, color-mix(in oklab, var(--sister-soft) 90%, transparent), transparent 70%),
    linear-gradient(180deg, var(--sister-soft), color-mix(in oklab, var(--sister-soft) 50%, var(--paper)));
}

/* ===== Gallery section ===== */
.gallery-section {
  position: relative;
}

/* Featured "the five" hero image — wide editorial banner above the card row. */
.gallery-feature {
  position: relative;
  display: block;
  cursor: pointer;
  margin: 8px auto 36px;
  max-width: 720px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-2);
  rotate: -0.6deg;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), rotate .35s, box-shadow .25s;
}
.gallery-feature:hover {
  rotate: 0deg;
  transform: translateY(-4px);
  box-shadow: 0 28px 60px -20px color-mix(in oklab, var(--ribbon) 30%, transparent), var(--shadow-2);
}
.gallery-feature-img {
  position: relative;
  aspect-ratio: 5 / 4;
  background: var(--bg-warm);
  overflow: hidden;
}
.gallery-feature-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.gallery-feature:hover .gallery-feature-img img { transform: scale(1.03); }

/* Two strips of washi tape, one each corner */
.gallery-feature-tape {
  position: absolute;
  top: -8px;
  width: 110px;
  height: 22px;
  background: color-mix(in oklab, var(--ribbon-soft) 85%, white);
  border: 1px dashed color-mix(in oklab, var(--ribbon) 40%, white);
  opacity: 0.9;
  z-index: 4;
  pointer-events: none;
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}
.gallery-feature-tape--l { left: 24px;  transform: rotate(-6deg); }
.gallery-feature-tape--r { right: 24px; transform: rotate(5deg);  }

.gallery-feature-cap {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  padding: 14px 18px 16px;
  border-top: 1px dashed var(--rule);
  background: linear-gradient(180deg, var(--paper), color-mix(in oklab, var(--bg-warm) 50%, var(--paper)));
}
.gallery-feature-cap-jp {
  font-family: "Zen Maru Gothic", "Noto Serif JP", serif;
  font-weight: 900;
  font-size: 22px;
  color: var(--leaf-deep);
  letter-spacing: -0.01em;
  line-height: 1;
}
.gallery-feature-cap-en {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 14px;
  color: var(--ink-soft);
  margin-top: 6px;
}
.gallery-feature-cap-meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
@media (max-width: 600px) {
  .gallery-feature { margin: 4px auto 24px; rotate: 0deg; }
  .gallery-feature-tape { width: 80px; }
  .gallery-feature-cap-jp { font-size: 18px; }
  .gallery-feature-cap-en { font-size: 12px; }
}

.gallery-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 32px;
}
@media (max-width: 1100px) { .gallery-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .gallery-row { grid-template-columns: repeat(2, 1fr); } }

.gallery-card {
  position: relative;
  display: block;
  cursor: pointer;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 10px 10px 12px;
  box-shadow: var(--shadow-1);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .25s, rotate .35s;
  --sister: var(--leaf);
}
.gallery-card:nth-child(1) { rotate: -1.5deg; }
.gallery-card:nth-child(2) { rotate: 1deg;  }
.gallery-card:nth-child(3) { rotate: -0.5deg; }
.gallery-card:nth-child(4) { rotate: 2deg;  }
.gallery-card:nth-child(5) { rotate: -1deg; }
.gallery-card:hover {
  transform: translateY(-10px) scale(1.04);
  rotate: 0deg;
  box-shadow: 0 24px 40px -16px color-mix(in oklab, var(--sister) 30%, transparent), var(--shadow-2);
  z-index: 5;
}

.gallery-card-tape {
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%) rotate(-4deg);
  width: 60px; height: 18px;
  background: color-mix(in oklab, var(--ribbon-soft) 70%, transparent);
  border: 1px dashed color-mix(in oklab, var(--ribbon) 60%, transparent);
  z-index: 6;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

.gallery-card-img {
  position: relative;
  aspect-ratio: 1 / 1.55;
  overflow: hidden;
  border-radius: 4px;
  background: var(--bg-warm);
}
.gallery-card-img img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.gallery-card:hover .gallery-card-img img { transform: scale(1.05); }

.gallery-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 4px 0;
}
.gallery-card-k {
  font-family: "Zen Maru Gothic", serif;
  font-weight: 900;
  font-size: 22px;
  line-height: 1;
  color: var(--sister);
}
.gallery-card-name {
  font-family: "Fraunces", serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-top: 2px;
}
.gallery-card-num {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.1em;
}
.gallery-card-bias {
  position: absolute;
  top: 14px; right: -6px;
  background: var(--ribbon);
  color: var(--paper);
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 3px 8px;
  border-radius: 3px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  z-index: 7;
}
.gallery-caption {
  margin-top: 28px;
  display: flex;
  justify-content: space-between;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  flex-wrap: wrap;
  gap: 8px;
}

/* ===== Section peek stickers ===== */
.section { overflow: visible; }
.section-peek {
  position: absolute;
  pointer-events: none;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.15));
  z-index: 6;
  aspect-ratio: 1 / 1;
}
.section-peek img {
  width: 100%;
  height: auto;
  display: block;
}
body.peeks-off .section-peek { display: none; }
@media (max-width: 920px) {
  .section-peek { display: none; }
}

/* ===== Viewport peeks (fixed to screen corners) ===== */
.viewport-peeks {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 35;
}
.vp-peek {
  position: absolute;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.18));
  pointer-events: auto;
  /* Outer layer: handles SHY state only. Always smoothly transitions. */
  transform: translate(0, 0);
  transition: transform 0.55s cubic-bezier(0.34, 1.4, 0.5, 1), opacity 0.3s;
  will-change: transform;
}
.vp-peek__cycle {
  /* Middle layer: runs the ambient peekaboo animation. Independent of the
     outer SHY transform so cursor interactions never fight the cycle. */
  display: block;
}
.vp-peek__face {
  display: block;
  /* Inner layer: face orientation transform (rotate/mirror), set inline. */
}
.vp-peek__face img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── Idle peekaboo runs on the MIDDLE layer ────────────────────────────
   Each corner spends most of its cycle tucked off-screen behind its
   corner, briefly slides into view, then retreats. Hide distance comes
   from --hx / --hy custom properties on the OUTER peek element (they
   inherit down to this layer). Staggered timings keep the four out of
   sync. */
@keyframes peek-cycle {
  0%, 72%, 100% { transform: translate(var(--hx, 0), var(--hy, 0)); }
  80%, 92%      { transform: translate(0, 0); }
}

.vp-peek--tl .vp-peek__cycle { animation: peek-cycle 13s cubic-bezier(0.34, 1.4, 0.5, 1) infinite;  animation-delay: 2s;  }
.vp-peek--tr .vp-peek__cycle { animation: peek-cycle 16s cubic-bezier(0.34, 1.4, 0.5, 1) infinite;  animation-delay: 6s;  }
.vp-peek--bl .vp-peek__cycle { animation: peek-cycle 18s cubic-bezier(0.34, 1.4, 0.5, 1) infinite;  animation-delay: 11s; }
.vp-peek--br .vp-peek__cycle { animation: peek-cycle 15s cubic-bezier(0.34, 1.4, 0.5, 1) infinite;  animation-delay: 15s; }

/* ── Shy state lives on the OUTER layer. Because the outer always has
   a transform + transition, entering & leaving shy both ease smoothly —
   no snapping back. The inner animation keeps cycling underneath. */
.vp-peek[data-shy="1"],
.viewport-peeks[data-scrolling="1"] .vp-peek {
  transform: translate(var(--hx, 0), var(--hy, 0));
}

/* Hover: pull fully into view (override the inner cycle) and grow slightly. */
.vp-peek:hover .vp-peek__cycle {
  animation-play-state: paused;
  transform: translate(0, 0) scale(1.06);
  transition: transform 0.25s cubic-bezier(0.34, 1.6, 0.4, 1);
}
.vp-peek:hover { z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .vp-peek__cycle { animation: none !important; transform: translate(0, 0) !important; }
  .vp-peek { transform: translate(0, 0) !important; }

  /* Global safety net: kill looping/decorative motion site-wide for users
     who ask for reduced motion. Petals + cursor trail are skipped in JS;
     this covers the rest (pulse dot, breathing, hover lifts, transitions). */
  .petals,
  .trail-clover { display: none !important; }
  .hero-tag .dot { animation: none !important; }
  .hero-yotsuba-img { animation: none !important; }
  .quint-card.is-hovered { transform: none !important; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 920px) {
  .vp-peek--tl, .vp-peek--bl { display: none; }
  .vp-peek--tr,
  .vp-peek--br { width: 90px !important; }
}
body.peeks-off .viewport-peeks { display: none; }

/* ===== Custom right-click menu ===== */
.ctx-menu {
  position: fixed;
  z-index: 10000;
  width: 244px;
  padding: 8px;
  border-radius: 14px;
  background: color-mix(in oklab, var(--paper) 94%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--rule);
  box-shadow: 0 18px 44px -16px rgba(24,36,28,0.45), 0 2px 0 rgba(24,36,28,0.05);
  font-family: "JetBrains Mono", monospace;
  animation: ctx-in .26s cubic-bezier(.2,.95,.3,1.25) both;
  transform-origin: top left;
  user-select: none;
}
@keyframes ctx-in {
  from { opacity: 0; transform: translateY(-10px) scale(.92); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* the menu items fade up in a gentle stagger (delays set inline per-item) */
.ctx-menu .ctx-item, .ctx-menu .ctx-note {
  animation: ctx-item-in .3s ease both;
}
@keyframes ctx-item-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: translateX(0); } }

.ctx-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 10px;
  border-bottom: 1px dashed var(--rule);
  margin-bottom: 6px;
}
.ctx-avatar {
  width: 40px;
  height: 46px;
  border-radius: 9px;
  object-fit: cover;
  object-position: center 16%;
  border: 2px solid var(--sister);
  background: var(--bg-warm);
  flex-shrink: 0;
  cursor: pointer;
  transition: transform .18s, box-shadow .18s, filter .18s;
}
.ctx-avatar:hover {
  transform: scale(1.08) rotate(-2deg);
  box-shadow: 0 6px 14px -4px color-mix(in oklab, var(--sister) 60%, transparent);
  filter: brightness(1.04);
}
.ctx-title {
  font-family: "Zen Maru Gothic", "Noto Serif JP", serif;
  font-weight: 900;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.1;
}
.ctx-sub {
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--sister);
  margin-top: 3px;
}

.ctx-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  background: transparent;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  text-align: left;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.ctx-item:hover {
  background: color-mix(in oklab, var(--sister) 16%, transparent);
  color: var(--ink);
}
.ctx-item--winter:hover {
  background: color-mix(in oklab, var(--scarf) 18%, transparent);
}
.ctx-ic {
  width: 18px;
  text-align: center;
  font-size: 13px;
  color: var(--sister);
  flex-shrink: 0;
}
.ctx-item--winter .ctx-ic { color: var(--scarf); }

.ctx-sep {
  height: 1px;
  background: var(--rule);
  margin: 6px 4px;
  opacity: 0.6;
}
.ctx-note {
  padding: 2px 10px 6px;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--muted);
}
@media (prefers-reduced-motion: reduce) {
  .ctx-menu, .ctx-menu .ctx-item, .ctx-menu .ctx-note { animation: none; }
}

/* ===== Gallery lightbox (in-page enlarge) ===== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vmin;
  background: color-mix(in oklab, var(--ink) 78%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: lb-fade .25s ease;
}
@keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }

.lb-figure {
  margin: 0;
  max-width: min(1100px, 94vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid color-mix(in oklab, var(--sister, var(--leaf)) 40%, var(--rule));
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  animation: lb-pop .3s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes lb-pop { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.lb-img-wrap {
  position: relative;
  background: var(--bg-warm);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lb-img-wrap img {
  display: block;
  max-width: 100%;
  max-height: calc(92vh - 58px);
  object-fit: contain;
}
.lb-cap {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 13px 18px;
  border-top: 1px solid var(--rule);
  background: linear-gradient(180deg, var(--paper), color-mix(in oklab, var(--bg-warm) 50%, var(--paper)));
}
.lb-cap .lb-k {
  font-family: "Zen Maru Gothic", "Noto Serif JP", serif;
  font-weight: 900;
  font-size: 22px;
  color: var(--sister, var(--leaf-deep));
  line-height: 1;
}
.lb-cap .lb-name {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 16px;
  color: var(--ink-soft);
  flex: 1;
}
.lb-cap .lb-meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.lb-btn {
  position: absolute;
  display: grid;
  place-items: center;
  border: none;
  cursor: pointer;
  color: var(--paper);
  background: color-mix(in oklab, var(--paper) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--paper) 28%, transparent);
  backdrop-filter: blur(6px);
  transition: background .2s, transform .15s;
}
.lb-btn:hover { background: color-mix(in oklab, var(--paper) 26%, transparent); }
.lb-close {
  top: 18px; right: 18px;
  width: 44px; height: 44px;
  border-radius: 50%;
  font-size: 18px;
}
.lb-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  font-size: 30px;
  line-height: 1;
  padding-bottom: 4px;
}
.lb-nav:hover { transform: translateY(-50%) scale(1.08); }
.lb-prev { left: 18px; }
.lb-next { right: 18px; }
.lb-hint {
  position: absolute;
  bottom: 18px; left: 50%;
  transform: translateX(-50%);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--paper) 70%, transparent);
  pointer-events: none;
}
@media (max-width: 600px) {
  .lb-nav { width: 42px; height: 42px; font-size: 24px; }
  .lb-prev { left: 8px; } .lb-next { right: 8px; }
  .lb-close { top: 10px; right: 10px; }
  .lb-cap .lb-name { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox, .lb-figure { animation: none; }
}

/* ===== Era toggle — rewind to the original <Yukino /> site ===== */
.era-toggle {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border-radius: 999px;
  cursor: pointer;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #28506b;
  background: color-mix(in oklab, var(--scarf-soft) 70%, white);
  border: 1.5px solid var(--scarf);
  box-shadow: 0 8px 22px rgba(40,80,107,0.22), inset 0 1px 0 rgba(255,255,255,0.5);
  transition: transform .18s, box-shadow .18s, background .18s;
}
.era-toggle:hover {
  transform: translateX(-50%) translateY(-2px);
  background: color-mix(in oklab, var(--scarf-soft) 85%, white);
  box-shadow: 0 12px 28px rgba(90,169,214,0.4), inset 0 1px 0 rgba(255,255,255,0.6);
}
.era-toggle .flake { font-size: 14px; }
@media (max-width: 600px) {
  .era-toggle { font-size: 11px; padding: 9px 14px; bottom: 16px; }
}
@media print { .era-toggle { display: none !important; } }

/* Icy rewind transition overlay */
.era-wipe {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: linear-gradient(180deg, #eaf3fa, #cbdae8);
  opacity: 0;
  visibility: hidden;
  transition: opacity .55s ease;
}
.era-wipe.on { opacity: 1; visibility: visible; }
.era-wipe-mark {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: clamp(28px, 5vw, 46px);
  color: #3A4751;
}
.era-wipe-sub {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #5aa9d6;
}

/* ===== Floating Tweaks button (so users can always reach the panel) ===== */
.tweaks-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9000;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: #1f4d2f;
  border: 2px solid #143521;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.12);
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.tweaks-fab:hover {
  background: #2a6a40;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.14);
}
.tweaks-fab span[aria-hidden="true"] {
  font-size: 14px;
  line-height: 1;
}
@media print {
  .tweaks-fab { display: none !important; }
}
@media print {
  .topbar, .rail, .petals, .clover-counter, .hint, .trail-clover, .section-peek { display: none !important; }
}

/* ===== Loading screen ===== */
.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity .7s ease, visibility .7s;
}
.loader.is-fading { opacity: 0; visibility: hidden; pointer-events: none; }

.loader-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(1000px 600px at 70% 20%, color-mix(in oklab, var(--leaf-light) 60%, transparent), transparent 60%),
    radial-gradient(800px 500px at 20% 80%, color-mix(in oklab, var(--ribbon-soft) 40%, transparent), transparent 60%),
    var(--bg);
}

.loader-petals {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.loader-petal {
  position: absolute;
  top: -40px;
  animation: l-fall linear infinite, l-sway ease-in-out infinite alternate;
  opacity: 0.85;
}
@keyframes l-fall { to { transform: translateY(110vh) rotate(720deg); } }
@keyframes l-sway { from { margin-left: -22px; } to { margin-left: 22px; } }

.loader-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

.loader-kanji {
  font-family: "Zen Maru Gothic", "Noto Serif JP", serif;
  font-weight: 900;
  font-size: clamp(64px, 10vw, 96px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--leaf-deep);
  animation: l-pulse 2.2s ease-in-out infinite;
}
@keyframes l-pulse {
  50% { color: var(--ribbon); transform: scale(1.04); }
}

.loader-tower {
  position: relative;
  width: 220px;
  height: 300px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: l-bob 2.4s ease-in-out infinite;
}
.loader-tower img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 14px 24px rgba(31,77,47,0.25));
  position: relative;
  z-index: 2;
}
.loader-shadow {
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(31,77,47,0.25), transparent);
  animation: l-shadow 2.4s ease-in-out infinite;
}
@keyframes l-bob {
  50% { transform: translateY(-8px); }
}
@keyframes l-shadow {
  50% { width: 56%; opacity: 0.6; }
}

.loader-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 280px;
}
.loader-label {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 17px;
  color: var(--ink-soft);
}
.loader-bar {
  width: 280px;
  height: 6px;
  border-radius: 999px;
  background: var(--rule);
  overflow: hidden;
  position: relative;
}
.loader-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--leaf), var(--ribbon));
  border-radius: 999px;
  transition: width .25s ease-out;
  box-shadow: 0 0 12px color-mix(in oklab, var(--leaf) 50%, transparent);
}
.loader-pct {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--muted);
}

@media (max-width: 600px) {
  .loader-tower { width: 180px; height: 240px; }
  .loader-bar { width: 220px; }
}

/* =====================================================================
   MOBILE PASS — phones (≤600px) and tablets (≤920px)
   Everything below tunes existing layout for narrow viewports.
   ===================================================================== */

/* Tablet (≤920px) — sheet padding shrinks, nav becomes tighter */
@media (max-width: 920px) {
  :root { --max: 100%; }
  .sheet { padding: 0 20px; }
  .topbar { padding: 12px 16px; }
  .brand .handle { display: none; }
  .nav-pills { padding: 3px; gap: 2px; }
  .nav-pills a { padding: 7px 10px; font-size: 12px; gap: 6px; }
}

/* Phone (≤600px) — collapse non-essentials, scale down hero/cards */
@media (max-width: 600px) {
  .sheet { padding: 0 16px; }

  /* Topbar: keep just the brand mark + kanji-only nav pills */
  .topbar { padding: 10px 14px; }
  .brand .name { display: none; }
  .nav-pills a span:not(.kanji) { display: none; }
  .nav-pills a { padding: 6px 8px; min-width: 28px; justify-content: center; }
  .nav-pills .kanji { font-size: 16px; }

  /* Hero: tighter spacing, smaller h1 min, shorter ID card */
  .hero { padding: 90px 0 48px; gap: 36px; min-height: 0; }
  .hero h1 { font-size: clamp(40px, 11vw, 64px); margin-bottom: 18px; }
  .hero-tag { margin-bottom: 18px; font-size: 10px; padding: 6px 10px 6px 6px; }
  .hero-sub { font-size: 16px; margin-bottom: 24px; }
  .hero-meta { margin-top: 32px; gap: 20px; }
  .btn { padding: 12px 18px; font-size: 13px; }

  /* Hero ID card */
  .hero-card { min-height: 0; padding: 16px 18px 18px; border-radius: 22px; rotate: 0deg; }
  .hero-card::before { font-size: 280px; right: -24px; bottom: -60px; }
  .hero-card::after { width: 96px; height: 96px; }
  .hero-card-name { font-size: 40px; }
  .hero-card-name-en { font-size: 15px; }
  .hero-card-stamp .stamp-num { font-size: 24px; }

  /* Quintet carousel — sheet padding is 16px here, keep the bleed flush */
  .quint-row { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }

  /* Section eyebrows and headlines */
  .about-title { font-size: clamp(28px, 7vw, 40px) !important; line-height: 1.1; }

  /* Watermark kanji — don't dominate small screens */
  .kanji-watermark { font-size: 280px !important; }

  /* Now strip already collapses to 1-col at 560px — make rows tighter */
  .now-item { padding: 14px 16px !important; }

  /* Hint chip is hidden on tablets already; nothing extra here */

  /* Tweaks FAB — move to bottom-LEFT on phone so it doesn't collide with
     the bottom-right peek that lives there. */
  .tweaks-fab {
    right: auto;
    left: 14px;
    bottom: 14px;
    padding: 8px 12px;
    font-size: 11px;
  }

  /* Footer band a bit thinner */
  .footer-band { height: 6px; }
  .footer { margin-top: 56px; }
  .footer .sheet { padding-top: 40px; }

  /* Gallery — already 2-col at 700px; rows tighter */
  .gallery-row { gap: 10px; }
}

/* Very small phones (≤380px) — last-ditch tightening */
@media (max-width: 380px) {
  .nav-pills { gap: 0; padding: 2px; }
  .nav-pills a { padding: 5px 6px; }
}