/* ═══════════════════════════════════════════════════════════════
   KOBAKO — promo site, structure & layout.
   Every colour, font and ornament is a variable; themes.css swaps them.
   ═══════════════════════════════════════════════════════════════ */

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

/* Ornaments bleed off the right edge on purpose (the hinomaru sits at
   right:-46px on phones). Clipped at the root, or the page gets a
   sideways pan — and on iOS a pannable page eats taps as scroll intent. */
html { scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .55s ease, color .55s ease;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* paper grain — one SVG, opacity per theme */
.grain {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  opacity: var(--grain-opacity);
  mix-blend-mode: var(--grain-blend);
  background-image: var(--grain-url);
  background-size: 220px 220px;
}

/* ── shared type helpers ───────────────────────────────────── */
.kicker {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--ink-soft); display: flex; align-items: center; gap: 14px; margin: 0 0 var(--gap-kicker);
  flex-wrap: wrap;
}
.kicker span:not(.kicker__rule) { min-width: 0; }
.kicker__rule { width: 54px; height: 1px; background: var(--accent); flex: none; }

/* ═══════════ THEME SWITCHER ═══════════ */
.switcher {
  position: fixed; z-index: 100; left: 0; right: 0; bottom: 22px;
  display: flex; justify-content: center; pointer-events: none;
}
.switcher__rail {
  pointer-events: auto;
  display: flex; align-items: center; gap: 6px;
  padding: 7px 10px;
  background: var(--rail-bg);
  border: 1px solid var(--rail-line);
  border-radius: var(--rail-radius);
  box-shadow: var(--rail-shadow);
  backdrop-filter: blur(14px) saturate(1.2);
}
.switcher__lead {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .22em;
  color: var(--ink-faint); padding: 0 10px 0 6px;
}
.switcher__div { width: 1px; height: 22px; background: var(--rail-line); margin: 0 4px; }
.chip {
  display: flex; align-items: baseline; gap: 7px;
  padding: 7px 13px; border-radius: calc(var(--rail-radius) - 6px);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
  color: var(--ink-soft); transition: background .25s, color .25s;
  white-space: nowrap;
}
.chip b { font-family: var(--font-jp); font-size: 13px; font-weight: 500; }
.chip:hover { background: var(--rail-hover); color: var(--ink); }
.chip[aria-current="true"] { background: var(--accent); color: var(--accent-on); }
.chip--ghost { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.chip--ghost[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* ═══════════ HEADER ═══════════ */
.head {
  position: relative; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 26px var(--pad) 0;
}
.wordmark { display: flex; align-items: baseline; gap: 10px; }
.wordmark__latin {
  font-family: var(--font-display); font-weight: var(--wm-weight);
  font-size: 17px; letter-spacing: var(--wm-track); text-transform: uppercase;
}
.wordmark__jp { font-family: var(--font-jp); font-size: 15px; color: var(--accent); }
.head__nav { display: flex; gap: 30px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; }
.head__nav a { color: var(--ink-soft); padding-bottom: 3px; border-bottom: 1px solid transparent; }
.head__nav a:hover { color: var(--ink); border-color: var(--accent); }
.head__meta { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .2em; color: var(--ink-faint); }

/* ═══════════ HERO ═══════════ */
.hero {
  position: relative;
  min-height: min(calc(100vh - 70px), 840px);
  min-height: min(calc(100svh - 70px), 840px);
  display: grid;
  grid-template-columns: minmax(340px, 42%) 1fr;
  align-items: center; gap: 44px;
  padding: 18px calc(var(--pad) + 46px) 78px var(--pad);
}
.hero > * { min-width: 0; }
.hero__copy { position: relative; z-index: 12; max-width: 520px; }

.hero__title { margin: 0; line-height: .84; }
.hero__title-main {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(66px, 10vw, 146px);
  font-weight: var(--h1-weight);
  letter-spacing: var(--h1-track);
  font-style: var(--h1-style);
  color: var(--ink);
  position: relative;
}
.hero__sub {
  margin: 16px 0 0;
  font-family: var(--font-text);
  font-size: clamp(19px, 1.7vw, 25px);
  font-style: var(--sub-style);
  color: var(--accent);
  letter-spacing: var(--sub-track);
}
.hero__slogan {
  margin: 6px 0 0;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-soft);
}
.hero__body {
  margin: 20px 0 0; max-width: 42ch;
  font-size: var(--body-size); line-height: 1.6; color: var(--ink-soft);
}
.hero__cta { margin: 26px 0 0; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 22px 12px 18px;
  border-radius: var(--btn-radius);
  border: 1px solid var(--btn-line);
  background: var(--btn-bg); color: var(--btn-fg);
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: var(--btn-shadow);
}
.btn:hover { transform: translateY(-2px); }
.btn__glyph { width: 17px; height: 20px; background: currentColor; -webkit-mask: var(--apple-mask) center/contain no-repeat; mask: var(--apple-mask) center/contain no-repeat; }
.btn__stack { display: flex; flex-direction: column; line-height: 1.15; }
.btn__stack small { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .18em; text-transform: uppercase; opacity: .8; }
.btn__stack b { font-family: var(--font-display); font-size: 17px; font-weight: 500; letter-spacing: .01em; }
.hero__cta-note { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; color: var(--ink-faint); }

/* ── hero stage / plate ─────────────────────────────────────── */
.hero__stage { position: relative; z-index: 10; display: flex; justify-content: center; }
.plate { position: relative; margin: 0; width: min(100%, 660px); }
/* The room image is the plate's shape — no aspect-ratio here. The old
   ratio sat on the border box, so the 9px frame skewed the content box
   and object-fit: cover cropped the art by a size-dependent sliver; the
   hotspot percentages then drifted off their objects, worst on phones.
   The img's width/height attributes reserve the height before load. */
.plate__inner {
  position: relative; overflow: hidden;
  border-radius: var(--plate-radius);
  border: var(--plate-border);
  box-shadow: var(--plate-shadow);
  background: var(--panel);
  filter: var(--plate-filter);
}
.plate__room { width: 100%; height: auto; }
.plate__kapi {
  position: absolute; right: 11%; bottom: 3%;
  width: 18.5%; height: auto;
  filter: drop-shadow(0 12px 14px rgba(40,26,12,.28));
  transform-origin: 50% 100%;
  cursor: pointer;
  /* a tap, not a double-tap-to-zoom candidate */
  touch-action: manipulation;
}
.plate__glow {
  position: absolute; inset: 0; pointer-events: none;
  background: var(--plate-glow);
  mix-blend-mode: var(--plate-glow-blend);
}
/* rotating seal on the plate corner */
.plate__seal {
  position: absolute; z-index: 3; right: -44px; bottom: -38px;
  width: 92px; height: 92px; border-radius: 50%;
  background: var(--seal-bg); color: var(--seal-fg);
  display: var(--seal-display); align-items: center; justify-content: center;
  animation: spin 26s linear infinite;
  box-shadow: var(--seal-shadow);
}
.plate__seal span {
  position: absolute; inset: 0;
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .22em;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── ornaments (shown per theme) ───────────────────────────── */
.orn { position: absolute; pointer-events: none; z-index: 1; }
.orn--hinomaru {
  display: var(--orn-hinomaru);
  right: 26%; top: 12%;
  width: min(34vw, 420px); aspect-ratio: 1; border-radius: 50%;
  background: var(--accent);
  opacity: var(--hinomaru-opacity);
  mix-blend-mode: var(--hinomaru-blend);
}
.orn--diagonal {
  display: var(--orn-diagonal);
  inset: 0;
  background:
    linear-gradient(101deg, transparent calc(38% - .5px), var(--line) 38%, transparent calc(38% + .5px)),
    linear-gradient(-77deg, transparent calc(64% - .5px), var(--accent-line) 64%, transparent calc(64% + .5px));
  opacity: .55;
}
.orn--tategaki {
  display: var(--orn-tategaki);
  writing-mode: vertical-rl;
  right: calc(var(--pad) - 46px); top: 15%;
  font-family: var(--font-jp); font-size: 13px; letter-spacing: .5em;
  color: var(--ink-soft); opacity: .8; z-index: 14;
}
.orn--tategaki i { color: var(--accent); font-style: normal; }

/* ═══════════ PLAYER ═══════════ */
.player {
  margin: 26px 0 0; max-width: 470px;
  padding: 12px 15px 13px;
  background: var(--player-bg);
  border: 1px solid var(--player-line);
  border-radius: var(--player-radius);
  box-shadow: var(--player-shadow);
  backdrop-filter: blur(8px);
}
.player__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.player__label { font-family: var(--font-mono); font-size: 9px; letter-spacing: .24em; color: var(--ink-faint); }
.player__note { font-family: var(--font-mono); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }

.player__main { display: flex; align-items: center; gap: 13px; }
.player__play {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-on);
  border-radius: var(--player-btn-radius, calc(var(--player-radius) - 6px));
  font-size: 13px; transition: transform .18s ease;
}
.player__play:hover { transform: scale(1.06); }
.player__mid { flex: 1; min-width: 0; }
.player__now { display: flex; align-items: baseline; gap: 8px; }
.player__idx { font-family: var(--font-mono); font-size: 10px; color: var(--accent); flex: none; }
.player__title {
  font-family: var(--font-display); font-size: 18px; font-weight: var(--wm-weight);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.player__jp { font-family: var(--font-jp); font-size: 10.5px; color: var(--ink-faint); margin-left: auto; flex: none; }
.player__viz { display: flex; align-items: flex-end; gap: 2px; height: 15px; margin-top: 6px; }
.player__viz i { flex: 1; background: var(--viz-fill); height: 2px; border-radius: 1px; transition: height .12s linear; }

.player__side { display: flex; align-items: center; gap: 5px; flex: none; }
.player__side button {
  width: 30px; height: 28px; border-radius: calc(var(--player-radius) - 8px);
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft);
  border: 1px solid var(--player-line); transition: background .2s, color .2s;
}
.player__side button:hover { background: var(--rail-hover); color: var(--ink); }
.player__time { font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); width: 30px; }

.player__disc {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: var(--disc-bg);
  box-shadow: inset 0 0 0 1px var(--line);
  position: relative;
}
.player__disc::after { content: ""; position: absolute; inset: 42%; border-radius: 50%; background: var(--accent); }
.player__disc.is-spinning { animation: spin 3.2s linear infinite; }

/* ═══════════ SYSTEM ═══════════ */
.system { padding: var(--sys-pad-top) var(--pad) 70px; }
.system__head { max-width: 900px; margin-bottom: 44px; }
.system__title { margin: 0; display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; font-family: var(--font-display); font-size: clamp(30px, 4vw, 52px); font-weight: var(--h2-weight); letter-spacing: var(--h2-track); }
.system__title-jp { font-family: var(--font-jp); color: var(--accent); font-size: .8em; flex: none; white-space: nowrap; }
.system__intent { margin: 16px 0 0; max-width: 62ch; font-size: var(--body-size); color: var(--ink-soft); line-height: 1.66; }

.system__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 704px;
  grid-template-areas: "type ui" "colour ui";
  align-items: start;
  gap: var(--panel-gap);
}
.panel--type { grid-area: type; }
.panel--colour { grid-area: colour; }
.panel--ui { grid-area: ui; }

.panel {
  position: relative;
  padding: var(--panel-pad);
  background: var(--panel);
  border: var(--panel-border);
  border-radius: var(--panel-radius);
  box-shadow: var(--panel-shadow);
}
.panel__label {
  margin: 0 0 22px;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink-faint);
  display: flex; align-items: center; gap: 8px;
}
.panel__foot { margin: 22px 0 0; font-size: 13px; line-height: 1.6; color: var(--ink-soft); max-width: 52ch; }

/* type specimen */
.spec { padding: 14px 0; border-top: var(--rule); }
.spec:first-of-type { border-top: 0; padding-top: 0; }
.spec__row { display: flex; align-items: baseline; gap: 12px; }
.spec__role { font-family: var(--font-mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); width: 74px; flex: none; }
.spec__name { font-family: var(--font-mono); font-size: 11px; color: var(--accent); letter-spacing: .04em; }
.spec__sample { margin: 4px 0 0; }
.spec__sample--display { font-family: var(--font-display); font-size: clamp(38px, 5vw, 62px); font-weight: var(--h1-weight); letter-spacing: var(--h1-track); line-height: 1; }
.spec__sample--text { font-family: var(--font-text); font-size: 20px; line-height: 1.5; color: var(--ink-soft); }
.spec__sample--mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; color: var(--ink-soft); }
.spec__sample--jp { font-family: var(--font-jp); font-size: 22px; letter-spacing: .08em; }

.scale { display: flex; align-items: baseline; gap: 24px; flex-wrap: wrap; margin-top: 22px; padding-top: 18px; border-top: var(--rule); }
.scale i { font-style: normal; font-family: var(--font-display); color: var(--ink-soft); line-height: 1; }
.scale i b { display: block; font-family: var(--font-mono); font-size: 8px; font-weight: 400; letter-spacing: .12em; color: var(--ink-faint); margin-top: 5px; }

/* palette */
.swatches { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
.sw { border-radius: var(--sw-radius); overflow: hidden; border: 1px solid var(--line); }
.sw__chip { height: 78px; }
.sw__meta { padding: 8px 9px 9px; background: var(--paper); }
.sw__name { display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.sw__hex { display: block; font-family: var(--font-mono); font-size: 9px; color: var(--ink-faint); margin-top: 2px; }
.contrast { margin-top: 20px; padding-top: 18px; border-top: var(--rule); display: grid; gap: 8px; }
.contrast div { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; color: var(--ink-soft); }
.contrast b { font-weight: 400; }
.contrast u { text-decoration: none; padding: 2px 7px; border-radius: 3px; font-size: 9px; }
.contrast .ok { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.contrast .warn { background: color-mix(in srgb, var(--warn) 20%, transparent); color: var(--warn); }

/* ═══════════ PHONE MOCKUPS ═══════════ */
.phones { display: flex; gap: 40px; flex-wrap: wrap; }
.phone { width: 292px; flex: none; }
.phone__body {
  position: relative;
  border-radius: 34px;
  border: var(--phone-border);
  background: var(--app-bg);
  overflow: hidden;
  height: 592px;
  display: flex; flex-direction: column;
  box-shadow: var(--phone-shadow);
  color: var(--app-ink);
}
.phone__cap { margin: 12px 0 0; font-family: var(--font-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }
.phone__status { display: flex; justify-content: space-between; padding: 12px 20px 6px; font-family: var(--font-mono); font-size: 9.5px; color: var(--app-ink); opacity: .75; }

.phone__scene { position: relative; height: 196px; overflow: hidden; flex: none; }
.phone__room { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; filter: var(--app-room-filter); }
.phone__kapi { position: absolute; right: 16%; bottom: 6px; width: 74px; filter: drop-shadow(0 6px 8px rgba(40,26,12,.3)); }
.phone__scene-fade { position: absolute; inset: auto 0 0 0; height: 62px; background: linear-gradient(to top, var(--app-bg), transparent); }
.phone__bubble {
  position: absolute; left: 14px; top: 16px; max-width: 62%;
  padding: 7px 11px;
  background: var(--app-bubble-bg); color: var(--app-bubble-fg);
  border-radius: var(--app-bubble-radius);
  font-family: var(--font-text); font-size: 11.5px; line-height: 1.35;
  box-shadow: 0 3px 10px rgba(0,0,0,.12);
}

.phone__sheet { padding: 4px 16px 0; flex: 1; overflow: hidden; }
.phone__row { display: flex; align-items: baseline; justify-content: space-between; margin: 12px 0 9px; }
.phone__row--tight { margin-top: 18px; }
.ui-label { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--app-ink-soft); }
.ui-count { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .12em; color: var(--app-accent); }

.ui-card {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; margin-bottom: 7px;
  background: var(--app-card); border: var(--app-card-border);
  border-radius: var(--app-radius);
  box-shadow: var(--app-card-shadow);
}
.ui-card__t { font-size: 12.5px; line-height: 1.3; flex: 1; }
.ui-card__check { width: 15px; height: 15px; border-radius: var(--app-check-radius); border: 1.5px solid var(--app-line); flex: none; }
.ui-card--empty {
  justify-content: center; background: transparent;
  border: 1px dashed var(--app-line); box-shadow: none;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--app-ink-soft);
  padding: 12px;
}
.ui-dot { width: 8px; height: 8px; border-radius: var(--app-dot-radius); background: var(--app-ink-soft); flex: none; }
.ui-dot--hi { background: var(--pri-hi); }
.ui-dot--mid { background: var(--pri-mid); }
.ui-dot--lo { background: var(--pri-lo); }

.ui-folders { display: flex; gap: 7px; }
.ui-folder {
  flex: 1; padding: 12px 10px 11px;
  background: var(--app-card); border: var(--app-card-border); border-radius: var(--app-radius);
  box-shadow: var(--app-card-shadow);
}
.ui-folder b { display: block; font-family: var(--font-text); font-size: 12px; font-weight: 500; }
.ui-folder span { font-family: var(--font-mono); font-size: 9px; color: var(--app-accent); }

.phone__tabs {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 20px 16px; border-top: 1px solid var(--app-line);
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--app-ink-soft);
}
.phone__tabs .is-on { color: var(--app-accent); }
.phone__tabs span { position: relative; }
.phone__tabs span:nth-child(2) { padding-right: 12px; }
.phone__tabs i {
  position: absolute; top: -7px; right: -6px;
  background: var(--app-accent); color: var(--app-bg);
  font-style: normal; font-size: 7.5px; padding: 1px 4px; border-radius: 6px;
}
.ui-fab {
  width: 30px; height: 30px; margin-top: -8px;
  display: grid; place-items: center;
  background: var(--app-accent); color: var(--app-bg);
  border-radius: var(--app-fab-radius); font-size: 15px;
}

.phone__head { display: flex; align-items: center; justify-content: space-between; padding: 10px 18px 12px; border-bottom: 1px solid var(--app-line); }
.phone__back, .phone__head-a { font-family: var(--font-mono); color: var(--app-ink-soft); font-size: 14px; }
.phone__head-t { font-family: var(--font-display); font-size: 19px; font-weight: var(--wm-weight); }
.phone__list { padding: 6px 16px; flex: 1; overflow: hidden; }
.ui-groupline { display: flex; align-items: center; gap: 10px; margin: 14px 0 8px; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .2em; color: var(--app-ink-soft); }
.ui-groupline i { flex: 1; height: 1px; background: var(--app-line); }
.ui-idea {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 11px 12px; margin-bottom: 6px;
  background: var(--app-card); border: var(--app-card-border); border-radius: var(--app-radius);
  box-shadow: var(--app-card-shadow);
}
.ui-idea .ui-dot { margin-top: 5px; }
.ui-idea b { display: block; font-family: var(--font-text); font-size: 12.5px; font-weight: 500; line-height: 1.3; }
.ui-idea small { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--app-ink-soft); }
.ui-idea.is-done { opacity: .5; }
.ui-idea.is-done b { text-decoration: line-through; }
.phone__compose {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 16px 18px; padding: 12px 14px;
  border: 1px dashed var(--app-line); border-radius: var(--app-radius);
  font-size: 12px; color: var(--app-ink-soft);
}
.phone__compose i { font-style: normal; color: var(--app-accent); font-size: 15px; }

/* ═══════════ FOOTER ═══════════ */
.foot {
  border-top: var(--rule);
  padding: 44px var(--pad) 110px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
.foot__mark { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.foot__latin { font-family: var(--font-display); font-size: 27px; font-weight: var(--wm-weight); letter-spacing: var(--wm-track); }
.foot__jp { font-family: var(--font-jp); font-size: 18px; color: var(--accent); }
.foot__tag { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); }
.foot__links { display: flex; gap: 26px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; }
.foot__links a { border-bottom: 1px solid var(--accent-line); padding-bottom: 2px; }
.foot__links a:hover { border-color: var(--accent); color: var(--accent); }
.foot__legal { margin: 0; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em; color: var(--ink-faint); display: flex; align-items: center; gap: 7px; }

/* ═══════════ ASSET NOTES ═══════════ */
.note { display: none; }
body.notes-on .note {
  display: inline-grid; place-items: center;
  width: 15px; height: 15px; border-radius: 50%; vertical-align: middle;
  margin-left: 4px;
  background: var(--note-bg); color: var(--note-fg);
  font-family: var(--font-mono); font-size: 9px; cursor: help;
  animation: pulse 2.6s ease-in-out infinite;
  position: relative; z-index: 30;
}
body.notes-on .note::after { content: "!"; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 var(--note-ring); } 50% { box-shadow: 0 0 0 6px transparent; } }
.notecard {
  position: fixed; z-index: 120; max-width: 320px;
  padding: 13px 15px;
  background: var(--ink); color: var(--paper);
  border-radius: 8px; font-size: 12.5px; line-height: 1.5;
  box-shadow: 0 18px 40px rgba(0,0,0,.3); pointer-events: none;
}
.notecard b { color: var(--note-bg); }

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 1180px) {
  .hero {
    grid-template-columns: 1fr;
    padding: 46px var(--pad) 40px; min-height: 0;
  }
  .hero__stage { order: 3; justify-content: flex-start; }
  .player { max-width: 100%; }
  .orn--tategaki { display: none !important; }
  .plate__seal { right: 10px; bottom: -34px; }
  .system__grid { grid-template-columns: 1fr; grid-template-areas: "type" "colour" "ui"; }
  .system { --sys-pad-top: 56px; }
}
@media (max-width: 720px) {
  /* set on body, not :root — themes.css redeclares --pad on :root and would win */
  body { --pad: 20px; }
  .head__nav, .head__meta { display: none; }
  .switcher__rail { flex-wrap: wrap; justify-content: center; max-width: calc(100vw - 24px); }
  .switcher__lead { display: none; }
  .phones { justify-content: center; }
  .player__side .player__time, .player__disc, .plate__seal { display: none; }
  .orn--hinomaru { left: auto !important; right: -54px; top: 3% !important; width: 190px !important; }
  .hero__title-main { font-size: clamp(52px, 15vw, 96px); }
  .foot { padding-bottom: 130px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  /* the blanket rule above would leave a peeled note frozen mid-curl */
  .note-sticky.is-gone { opacity: 0 !important; }
}

/* ═══════════════════════════════════════════════════════════════
   MATERIAL LAYERS
   Directions that treat the page as a surface rather than a colour
   fill these in. Everything defaults to none, so the flat directions
   are untouched. Declared last: a `background:` shorthand earlier in
   the file would otherwise reset background-image back to none.
   ═══════════════════════════════════════════════════════════════ */
body { background-image: var(--paper-texture, none); background-attachment: fixed; }
.panel, .player { background-image: var(--panel-texture, none); }
.ui-card, .ui-idea, .ui-folder, .phone__compose { background-image: var(--card-texture, none); }
.phone__body { background-image: var(--app-surface-texture, none); }

/* The tray the app cards stand on. Inert unless a direction claims it. */
.ui-shelf { position: relative; }


/* ═══════════════════════════════════════════════════════════════
   ONE-PAGER ADDITIONS
   The licensed-track player art, Kapi's room switcher, and the
   per-room grade. All scoped to new classes — the parked directions
   above are untouched.
   ═══════════════════════════════════════════════════════════════ */

/* sleeve art in the player */
.player__art {
  width: 46px; height: 46px; flex: none;
  border-radius: 7px; object-fit: cover;
  box-shadow: 0 0 0 1px var(--line), 0 4px 10px rgba(40, 26, 12, .25);
}
.player__art.is-playing { animation: art-sway 4.2s ease-in-out infinite; }
@keyframes art-sway {
  0%, 100% { transform: rotate(-1.2deg); }
  50% { transform: rotate(1.2deg); }
}

/* Kapi's room switcher, under the plate caption */
.rooms {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: 14px;
}
.rooms__lead {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .22em;
  color: var(--ink-faint); margin-right: 5px;
}
.rooms__chip {
  padding: 7px 14px;
  background: var(--panel);
  border: 1px solid var(--line); border-radius: 7px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em;
  color: var(--ink-soft);
  transition: background .25s, color .25s, border-color .25s;
}
.rooms__chip:hover { color: var(--ink); border-color: var(--accent); }
.rooms__chip[aria-current="true"] {
  background: var(--accent); color: var(--accent-on); border-color: var(--accent);
}

/* room crossfade — a clone of the old room fading out over the new */
.plate__room--ghost {
  position: absolute; inset: 0;
  opacity: 1; transition: opacity .6s ease;
  will-change: opacity; pointer-events: none;
}
.plate__room--ghost.is-fading { opacity: 0; }

/* the room grades the page: cool dusk for the blue hour, warm straw
   for the countryside, nothing for the library */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 80;
  mix-blend-mode: multiply;
  background: var(--room-tint, none);
  opacity: 0; transition: opacity .9s ease;
}
html[data-room="blue-hour"] body::after {
  --room-tint: linear-gradient(180deg, #46538C 0%, #8C93B5 55%, #7A87A8 100%);
  opacity: .13;
}
html[data-room="countryside"] body::after {
  --room-tint: linear-gradient(180deg, #E8C46A 0%, #DDAF5C 100%);
  opacity: .09;
}

/* the track title is long — let it use the room it has, and wrap on
   narrow screens rather than truncating to nothing */
.player__title { font-size: 16px; }

@media (max-width: 720px) {
  /* at this width the hinomaru lands either on the wordmark or in the
     middle of the body copy — park it in the corner beside the kicker,
     where nothing is set */
  .orn--hinomaru { right: -46px; top: 1% !important; width: 124px !important; }

  .player__title {
    white-space: normal; overflow: visible; text-overflow: clip;
    font-size: 15px; line-height: 1.2;
  }
  /* prev/next are gone with the single track, so the clock can stay */
  .player__side .player__time { display: block; }
  .rooms__lead { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   ONE SCREEN
   With the switcher gone the page is hero + footer, and both should
   land inside the first viewport on a laptop. The body becomes a flex
   column so the hero takes exactly the room that is left over —
   .hero's own min-height would otherwise hold it at 840px.
   ═══════════════════════════════════════════════════════════════ */
body { display: flex; flex-direction: column; min-height: 100svh; }
main { flex: 1 0 auto; display: flex; flex-direction: column; }
.hero {
  flex: 1 1 auto;
  min-height: 0;
  padding-top: 10px; padding-bottom: 26px;
}
/* the 110px bottom padding existed to clear the fixed switcher rail */
.foot { padding: 24px var(--pad) 26px; }

@media (max-width: 1180px) {
  /* stacked layout is taller than a screen by design — let it scroll */
  body { min-height: 0; }
  main { flex: 0 0 auto; }
  .hero { flex: 0 0 auto; padding-top: 34px; }
}
@media (max-width: 720px) {
  .foot { padding-bottom: 34px; }
}

/* ═══════════════════════════════════════════════════════════════
   THE NOTES, THE ROOMS YOU EARN, AND THE WAITLIST
   ═══════════════════════════════════════════════════════════════ */

/* ── tap counter in the header ──────────────────────────────── */
.taps {
  margin: 0; display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-faint);
}
.taps__n {
  font-family: var(--font-display); font-size: 15px; font-weight: 500;
  letter-spacing: .02em; color: var(--accent);
}
/* with no count yet, the words alone read as a stray caption */
.taps__n[hidden] ~ .taps__label, .taps__n[hidden] { display: none; }
.taps:has(.taps__n[hidden]) { visibility: hidden; }

/* ── the notes over the scene ───────────────────────────────── */
.notes { position: absolute; inset: 0; z-index: 6; perspective: 900px; }
.notes.is-clear { pointer-events: none; }

.note-sticky {
  position: absolute;
  left: var(--x); top: var(--y);
  width: 30%; min-height: 22%;
  padding: 5% 5% 6%;
  display: block; text-align: left;
  font-family: var(--font-text);
  font-size: clamp(9px, 1.05vw, 14px); line-height: 1.25;
  color: #3B3026;
  background: var(--sticky, #F2DE8A);
  box-shadow: 0 6px 14px rgba(40, 26, 12, .3), 0 1px 0 rgba(255,255,255,.5) inset;
  transform: rotate(var(--rot)) translateY(-6px);
  opacity: 0;
  animation: note-land .42s cubic-bezier(.2,.9,.3,1.2) var(--in-delay, 0ms) forwards;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.note-sticky--1 { --sticky: #F2DE8A; }
.note-sticky--2 { --sticky: #EFC1A0; }
.note-sticky--3 { --sticky: #CBDCA8; }
.note-sticky--4 { --sticky: #E8E2D2; }

/* One note beckons: every few seconds its glue gives and it lifts,
   the tell that these come off. The LAST one — it sits on top of the
   stack, so nothing covers the move (the first try animated the first
   note, which lies under its neighbours and read as nothing at all).
   Only one note does it — a whole board fidgeting is noise, one loose
   corner is an invitation. note-land has to stay in the list: its
   forwards fill is the only thing holding opacity at 1 (see the
   note-peel comment below). The beckon owns transform from its delay
   onward, so its rest frames repeat note-land's final pose exactly. */
.note-sticky:last-child {
  animation:
    note-land .42s cubic-bezier(.2,.9,.3,1.2) var(--in-delay, 0ms) forwards,
    note-beckon 3.6s ease-in-out 1.9s infinite;
}
@keyframes note-beckon {
  0%, 58%, 100% {
    transform: rotate(var(--rot));
    box-shadow: 0 6px 14px rgba(40, 26, 12, .3), 0 1px 0 rgba(255,255,255,.5) inset;
  }
  70% {
    transform: rotate(calc(var(--rot) + 3deg)) translateY(-12px) scale(1.04);
    box-shadow: 0 16px 26px rgba(40, 26, 12, .36), 0 1px 0 rgba(255,255,255,.5) inset;
  }
  84% {
    transform: rotate(calc(var(--rot) - 1deg)) translateY(-3px);
    box-shadow: 0 8px 16px rgba(40, 26, 12, .31), 0 1px 0 rgba(255,255,255,.5) inset;
  }
}

/* the curl where the glue stops holding */
.note-sticky::after {
  content: ""; position: absolute; right: 0; bottom: 0;
  border-width: 0 0 14px 14px; border-style: solid;
  border-color: transparent transparent rgba(255,255,255,.45) transparent;
  filter: drop-shadow(-2px -2px 2px rgba(40,26,12,.2));
}
.note-sticky:hover, .note-sticky:focus-visible {
  transform: rotate(var(--rot)) translateY(-3px) scale(1.03);
  box-shadow: 0 10px 20px rgba(40, 26, 12, .34);
}
/* Peeling, not vanishing. The first attempt set `animation: none` and
   leaned on a transition — but that drops the landing animation whose
   `forwards` fill was the only thing holding opacity at 1, so the base
   rule's opacity:0 snapped back in the same frame and there was nothing
   to transition from. A second animation replaces the first cleanly and
   starts from its own 0%, which is deterministic.

   The note is glued along its top edge, so it curls up from the bottom
   before it lets go — that is the whole tell that it was sticky. */
.note-sticky.is-gone {
  pointer-events: none;
  transform-origin: 50% 0;
  animation: note-peel .78s cubic-bezier(.34, 0, .7, .12) forwards;
  z-index: 3;
}
@keyframes note-peel {
  0% {
    opacity: 1;
    transform: rotate(var(--rot)) rotateX(0deg) translateY(0) scale(1);
  }
  /* the corner lifts and the sheet bows toward you, still stuck */
  42% {
    opacity: 1;
    transform: rotate(var(--rot)) rotateX(48deg) translateY(-2%) scale(1.03);
    box-shadow: 0 16px 26px rgba(40, 26, 12, .34);
  }
  /* and then it is off the glass */
  100% {
    opacity: 0;
    transform: rotate(var(--fly-r, 30deg)) rotateX(72deg)
               translate(var(--fly-x, 40px), 135%) scale(.86);
  }
}
@keyframes note-land {
  from { opacity: 0; transform: rotate(var(--rot)) translateY(-14px) scale(.94); }
  to   { opacity: 1; transform: rotate(var(--rot)) translateY(0) scale(1); }
}

/* ── the things worth poking ────────────────────────────────── */
.find {
  position: absolute;
  left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  z-index: 5;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  animation: find-breathe 2.8s ease-in-out infinite;
}
.find::after {
  content: ""; position: absolute; inset: 0;
  border: 1.5px solid rgba(255, 246, 225, .8);
  border-radius: 6px;
  box-shadow: 0 0 16px rgba(255, 240, 210, .55), 0 0 0 1px rgba(40,26,12,.18) inset;
}
.find:hover::after, .find:focus-visible::after {
  border-color: #FFF6E1;
  box-shadow: 0 0 26px rgba(255, 244, 216, .85), 0 0 0 1px rgba(40,26,12,.2) inset;
}
@keyframes find-breathe {
  0%, 100% { opacity: .5; }
  50% { opacity: 1; }
}

/* ── what Kapi says ─────────────────────────────────────────── */
.says {
  position: absolute; z-index: 7;
  right: 30%; bottom: 26%;
  max-width: 42%;
  margin: 0; padding: 9px 13px;
  background: var(--panel);
  border-radius: 12px 12px 3px 12px;
  box-shadow: 0 6px 18px rgba(40, 26, 12, .28);
  font-family: var(--font-text); font-size: clamp(11px, 1.1vw, 14px);
  line-height: 1.35; color: var(--ink);
  opacity: 0; transform: translateY(6px) scale(.96);
  transition: opacity .32s ease, transform .32s cubic-bezier(.2,.9,.3,1.3);
  pointer-events: none;
}
.says.is-on { opacity: 1; transform: none; }
.says::after {
  content: ""; position: absolute; right: -5px; bottom: 8px;
  width: 12px; height: 12px; background: var(--panel);
  clip-path: polygon(0 0, 0 100%, 100% 100%);
}

/* Kapi swaying to the record player. The sway starts and ends at rest:
   the first cut began every cycle at -2.5deg, so the class landing (and
   leaving) snapped him sideways for a frame. Two iterations are baked in
   here — 2 × 1.6s matches the 3.2s the scene holds the class for, so the
   animation is already back at zero when it is taken off. */
.plate__kapi.is-swaying { animation: kapi-sway 1.6s ease-in-out 2; }
@keyframes kapi-sway {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-2.4deg); }
  75% { transform: rotate(2.4deg); }
}

/* ── locked rooms ───────────────────────────────────────────── */
.rooms__chip.is-locked {
  opacity: .42;
  cursor: not-allowed;
  border-style: dashed;
}
.rooms__chip.is-locked::before {
  content: "· "; color: var(--ink-faint);
}
.rooms__chip.just-opened {
  animation: chip-open 1.1s ease 2;
}
@keyframes chip-open {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 58, 34, 0); }
  40% { box-shadow: 0 0 0 5px rgba(224, 58, 34, .25); }
}
.rooms__hint {
  margin: 8px 0 0;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint);
}

/* ── waitlist ───────────────────────────────────────────────── */
.waitlist { margin: 22px 0 0; max-width: 470px; }
.waitlist__label {
  display: block; margin-bottom: 8px;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-faint);
}
.waitlist__row { display: flex; gap: 8px; }
.waitlist__field {
  flex: 1; min-width: 0;
  padding: 11px 13px;
  font-family: var(--font-text); font-size: 15px; color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line); border-radius: 3px;
  transition: border-color .2s ease;
}
.waitlist__field::placeholder { color: var(--ink-faint); }
.waitlist__field:focus { outline: none; border-color: var(--accent); }
.waitlist__field:disabled { opacity: .6; }
.waitlist__go {
  flex: none; padding: 11px 22px;
  background: var(--ink); color: var(--paper);
  border-radius: 3px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase;
  transition: background .2s ease, transform .15s ease;
}
.waitlist__go:hover { background: var(--accent); transform: translateY(-1px); }
.waitlist__says {
  margin: 8px 0 0;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em;
  color: var(--ink-faint); line-height: 1.5;
}
.waitlist__says a { border-bottom: 1px solid var(--accent-line); }
.waitlist__says a:hover { color: var(--accent); }
.waitlist.is-bad .waitlist__field { border-color: var(--accent); }
.waitlist.is-bad .waitlist__says { color: var(--accent); }
.waitlist.is-done .waitlist__go { display: none; }
.waitlist.is-done .waitlist__says { color: var(--ink-soft); }

@media (max-width: 720px) {
  .taps { font-size: 8.5px; }
  .note-sticky { font-size: 10px; width: 30%; }
  /* clear of Kapi's face: he starts 29.5% in from the right, and on a
     phone-sized plate the 24% of the first cut pressed the bubble
     against his mouth */
  .says { max-width: 50%; right: 32%; }
}

/* Every Kapi frame ships on the shared 820×1080 canvas — the legacy-canvas
   poses (wave, scratch) are padded onto it by prepare-web-assets.sh — so no
   pose needs a size or offset correction here. */