/* ---------- tokens ---------- */
:root{
  --ink:        #0A0C10;
  --ink-2:      #12151C;
  --ink-3:      #191D26;
  --line:       #262B36;
  --text:       #E9EDF3;
  --text-muted: #8891A0;
  --flame:      #C280BB;   /* kitsunebi — spirit fire, cool */
  --flame-dim:  #6D4869;
  --ember:      #FF7A45;   /* torii red-orange — status/warmth */
  --ember-dim:  #6E4232;
  --paper:      #EFE6D6;   /* ema plaque wood/paper tone */
  --paper-ink:  #2B241A;

  --display: "Shippori Mincho", serif;
  --body: "Work Sans", system-ui, sans-serif;
  --mono: "JetBrains Mono", monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--flame);}
h1,h2,h3{font-family:var(--display); margin:0;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
  html{scroll-behavior:auto;}
}

/* ---------- ambient wisp (signature element) ---------- */
.wisp{
  position:fixed;
  top:14%;
  left:70%;
  width:220px;
  height:220px;
  pointer-events:none;
  z-index:0;
  background:radial-gradient(circle at 50% 50%, rgba(194,128,187,0.22), rgba(194,128,187,0.06) 45%, transparent 70%);
  filter:blur(2px);
  animation:drift 16s ease-in-out infinite;
}
@keyframes drift{
  0%,100%{ transform:translate(0,0) scale(1); opacity:.75; }
  25%{ transform:translate(-40px, 30px) scale(1.08); opacity:1; }
  50%{ transform:translate(20px, 70px) scale(0.94); opacity:.6; }
  75%{ transform:translate(-20px, 20px) scale(1.05); opacity:.9; }
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  max-width:760px;
  margin:0 auto;
  padding:96px 24px 56px;
  text-align:center;
  z-index:1;
}
.hero-gate{
  width:180px;
  margin:0 auto 8px;
  opacity:0.9;
}
.torii rect{ fill:var(--flame); opacity:0.85; }
.torii{ filter:drop-shadow(0 0 14px rgba(194,128,187,0.35)); }

.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--flame);
  margin:0 0 18px;
}
.hero-title{
  font-size:clamp(48px, 9vw, 88px);
  font-weight:800;
  letter-spacing:0.01em;
  line-height:1;
  color:var(--text);
}
.hero-title-sub{
  display:block;
  font-size:0.42em;
  font-weight:500;
  color:var(--flame);
  letter-spacing:0.3em;
  margin-top:10px;
  text-transform:uppercase;
}
.hero-lede{
  max-width:520px;
  margin:26px auto 0;
  color:var(--text-muted);
  font-size:16.5px;
}
.hero-actions{
  display:flex;
  gap:14px;
  justify-content:center;
  margin-top:34px;
  flex-wrap:wrap;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:13px 26px;
  border-radius:3px;
  font-family:var(--body);
  font-weight:600;
  font-size:14.5px;
  text-decoration:none;
  cursor:pointer;
  border:1px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn:focus-visible{ outline:2px solid var(--flame); outline-offset:3px; }
.btn-primary{
  background:var(--flame);
  color:var(--ink);
  box-shadow:0 0 0 rgba(194,128,187,0);
}
.btn-primary:hover{ box-shadow:0 6px 24px rgba(194,128,187,0.28); }
.btn-ghost{
  background:transparent;
  border-color:var(--line);
  color:var(--text);
}
.btn-ghost:hover{ border-color:var(--flame); color:var(--flame); }
.btn:disabled{ opacity:0.5; cursor:not-allowed; transform:none; }

/* ---------- dividers ---------- */
.gate-divider{
  text-align:center;
  color:var(--line);
  font-size:20px;
  margin:8px 0;
  position:relative;
  z-index:1;
}
.gate-divider span{
  display:inline-block;
  color:var(--flame-dim);
  background:var(--ink);
  padding:0 16px;
}
.gate-divider::before{
  content:"";
  display:block;
  height:1px;
  background:var(--line);
  margin:0 auto;
  max-width:900px;
  transform:translateY(12px);
}

/* ---------- sections ---------- */
.section{
  max-width:720px;
  margin:0 auto;
  padding:64px 24px;
  position:relative;
  z-index:1;
}
.section-eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--text-muted);
  margin:0 0 10px;
}
.section-title{
  font-size:clamp(26px, 4vw, 34px);
  font-weight:700;
  margin-bottom:14px;
}
.section-body{
  color:var(--text-muted);
  font-size:15.5px;
  max-width:560px;
}

.embed-frame{
  margin-top:28px;
  border-radius:8px;
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--ink-2);
}
.embed-frame iframe{ display:block; }

/* ---------- form (ema) ---------- */
.ema-form{
  margin-top:32px;
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:8px;
  padding:32px;
}
.form-row{
  margin-bottom:20px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.form-row label{
  font-size:13px;
  font-weight:600;
  color:var(--text);
  letter-spacing:0.01em;
}
.form-row .req{ color:var(--ember); }
.form-row .optional{ color:var(--text-muted); font-weight:400; }
.field-hint{
  margin:2px 0 0;
  font-size:12.5px;
  color:var(--text-muted);
  line-height:1.5;
}
.field-hint code{
  font-family:var(--mono);
  background:var(--ink-3);
  border:1px solid var(--line);
  border-radius:3px;
  padding:1px 5px;
  color:var(--flame);
}
.form-row input,
.form-row textarea{
  background:var(--ink);
  border:1px solid var(--line);
  border-radius:4px;
  padding:11px 13px;
  color:var(--text);
  font-family:var(--body);
  font-size:14.5px;
  resize:vertical;
}
.form-row input:focus,
.form-row textarea:focus{
  outline:none;
  border-color:var(--flame);
  box-shadow:0 0 0 3px rgba(194,128,187,0.15);
}
.btn-submit{ width:100%; justify-content:center; margin-top:4px; }
.form-status{
  margin:14px 0 0;
  font-size:13.5px;
  color:var(--text-muted);
  min-height:1.4em;
}
.form-status.is-error{ color:var(--ember); }
.form-status.is-ok{ color:var(--flame); }

/* ---------- rack / list ---------- */
.lantern-dot{
  display:inline-block;
  width:9px; height:9px;
  border-radius:50%;
  background:var(--ink-3);
  border:1px solid var(--line);
  margin-right:4px;
  vertical-align:middle;
}
.lantern-dot.lit{
  background:var(--flame);
  border-color:var(--flame);
  box-shadow:0 0 8px rgba(194,128,187,0.7);
}

.filter-row{
  display:flex;
  gap:8px;
  margin:22px 0 28px;
}
.chip{
  background:transparent;
  border:1px solid var(--line);
  color:var(--text-muted);
  padding:8px 16px;
  border-radius:20px;
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:0.03em;
  cursor:pointer;
  transition:all .15s ease;
}
.chip:hover{ border-color:var(--flame); color:var(--text); }
.chip.is-active{
  background:var(--flame);
  border-color:var(--flame);
  color:var(--ink);
}

.ema-rack{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:18px;
}
.rack-empty{
  color:var(--text-muted);
  font-size:14px;
  grid-column:1/-1;
}

.ema-card{
  background:var(--paper);
  color:var(--paper-ink);
  border-radius:3px;
  padding:20px 18px 18px;
  position:relative;
  box-shadow:0 10px 24px rgba(0,0,0,0.35);
  transform:rotate(var(--tilt, 0deg));
}
.ema-card::before{
  content:"";
  position:absolute;
  top:-9px;
  left:50%;
  transform:translateX(-50%);
  width:14px; height:14px;
  border-radius:50%;
  background:var(--ink);
  border:2px solid var(--line);
}
.ema-song{
  font-family:var(--display);
  font-weight:700;
  font-size:17px;
  line-height:1.3;
  margin-bottom:4px;
  word-break:break-word;
}
.ema-artist{
  font-family:var(--mono);
  font-size:11.5px;
  color:#5B5240;
  margin-bottom:10px;
}
.ema-note{
  font-size:13px;
  color:#463D2C;
  margin-bottom:12px;
  line-height:1.5;
}
.ema-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px dashed #C9BB9E;
  padding-top:10px;
  font-family:var(--mono);
  font-size:11px;
  color:#5B5240;
}
.ema-status{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.04em;
}
.ema-status .lantern-dot{ margin-right:0; }
.ema-status.is-added{ color:#0F5F68; }
.ema-status.is-pending{ color:#8A6A3A; }

/* ---------- footer ---------- */
.site-footer{
  max-width:720px;
  margin:0 auto;
  padding:48px 24px 80px;
  text-align:center;
  color:var(--text-muted);
  font-size:12.5px;
  position:relative;
  z-index:1;
}
.site-footer p{ margin:4px 0; }
.site-footer a{ color:var(--text-muted); }
.site-footer a:hover{ color:var(--flame); }

/* ---------- responsive ---------- */
@media (max-width:640px){
  .hero{ padding:72px 20px 40px; }
  .section{ padding:48px 20px; }
  .ema-form{ padding:22px; }
  .wisp{ width:140px; height:140px; left:60%; }
}