/* Wax & Ash — dark candle-lit editorial */
:root{
  --ink:#0e0a07;
  --ink-2:#161008;
  --ink-3:#1f160c;
  --amber:#e8a33d;
  --amber-deep:#b9772a;
  --amber-glow:rgba(232,163,61,.28);
  --ash:#8d867b;
  --ash-dim:#5b544a;
  --parchment:#f3e8d2;
  --parchment-dim:#d9c9a8;
  --silver:#b8c7d9;
  --red:#c0392b;
  --serif:"Fraunces",Georgia,serif;
  --hand:"Caveat",cursive;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--ink);
  color:var(--parchment);
  font-family:var(--serif);
  min-height:100vh;
  display:flex;flex-direction:column;
  -webkit-font-smoothing:antialiased;
}
body::before{ /* faint candle glow */
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 90% 55% at 50% -8%, rgba(232,163,61,.10), transparent 60%);
}
main{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2.5rem 1.25rem}
a{color:var(--amber)}
.hidden{display:none!important}

/* ---------- type ---------- */
.brand{font-size:.8rem;letter-spacing:.42em;text-transform:uppercase;color:var(--ash);margin-bottom:1.25rem}
.brand b{color:var(--amber);font-weight:600}
h1.display{font-size:clamp(2.4rem,7vw,4.2rem);font-weight:600;line-height:1.05;text-align:center;margin-bottom:1rem}
h1.display .ash{color:var(--ash-dim)}
.tagline{font-style:italic;color:var(--parchment-dim);text-align:center;max-width:26rem;line-height:1.65;margin-bottom:2rem}
.lede{color:var(--ash);text-align:center;max-width:30rem;line-height:1.75;margin-bottom:1rem}
.lede em{color:var(--parchment);font-style:normal;border-bottom:1px dotted var(--amber-deep)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--serif);font-size:1rem;letter-spacing:.06em;
  background:var(--amber);color:#1a1006;border:none;border-radius:999px;
  padding:.9rem 2.2rem;cursor:pointer;text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  box-shadow:0 0 0 0 var(--amber-glow);
}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 28px var(--amber-glow)}
.btn:active{transform:translateY(0) scale(.98)}
.btn[disabled]{opacity:.5;cursor:wait;transform:none}
.btn.ghost{background:transparent;color:var(--ash);border:1px solid var(--ash-dim);box-shadow:none}
.btn.ghost:hover{color:var(--parchment);border-color:var(--amber);box-shadow:none}
.btn.danger{background:transparent;color:var(--ash-dim);border:1px solid #3a2a1c;font-size:.85rem;padding:.6rem 1.4rem}
.btn.danger:hover{color:#e06a5a;border-color:#e06a5a;box-shadow:none}
.btn.sm{padding:.55rem 1.3rem;font-size:.9rem}

/* ---------- landing ritual ---------- */
.ritual{display:flex;flex-direction:column;gap:1.4rem;max-width:32rem;margin:2.5rem auto 2.5rem;text-align:center}
.ritual .step .n{color:var(--amber-deep);font-size:.75rem;letter-spacing:.35em;margin-bottom:.4rem}
.ritual .step p{color:var(--ash);line-height:1.7}
.ritual .step p b{color:var(--parchment);font-weight:600}
.candle-divider{width:52px;height:1px;background:linear-gradient(90deg,transparent,var(--amber-deep),transparent);margin:2rem auto}

/* ---------- link card ---------- */
.linkcard{
  background:var(--ink-2);border:1px solid #2c2113;border-radius:14px;
  padding:1.5rem;max-width:34rem;width:100%;margin:1rem auto;text-align:center;
  box-shadow:0 10px 40px rgba(0,0,0,.45);
}
.linkcard h2{font-size:1.3rem;margin-bottom:.4rem}
.linkcard .sub{color:var(--ash);font-size:.92rem;line-height:1.6;margin-bottom:1.25rem}
.linkrow{display:flex;gap:.5rem;margin-bottom:.9rem;background:var(--ink);border:1px solid #2c2113;border-radius:10px;padding:.55rem .6rem .55rem .9rem;align-items:center}
.linkrow code{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.82rem;color:var(--parchment-dim);text-align:left}
.linkrow .who{display:block;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ash-dim);margin-bottom:.25rem}
.linklabel{text-align:left;margin-bottom:.15rem}
.warning{
  margin-top:1.1rem;padding:.8rem 1rem;border:1px dashed var(--amber-deep);border-radius:10px;
  color:var(--parchment-dim);font-size:.88rem;line-height:1.6;background:rgba(232,163,61,.05);
}

/* ---------- recent shelf ---------- */
.shelf{max-width:34rem;width:100%;margin:2.5rem auto 0;text-align:center}
.shelf h3{font-size:.78rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ash-dim);margin-bottom:1rem}
.shelf ul{list-style:none;display:flex;flex-direction:column;gap:.6rem}
.shelf a{display:flex;justify-content:space-between;align-items:center;text-decoration:none;background:var(--ink-2);border:1px solid #241b0f;border-radius:10px;padding:.75rem 1rem;color:var(--parchment-dim);transition:border-color .15s}
.shelf a:hover{border-color:var(--amber-deep)}
.shelf .role{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ash-dim)}
.shelf .ago{font-size:.8rem;color:var(--ash-dim)}

/* ---------- board states ---------- */
.state{max-width:34rem;width:100%;margin:0 auto;text-align:center}
.state h2{font-size:clamp(1.5rem,4.5vw,2.1rem);margin:1.2rem 0 .6rem;font-weight:600}
.state p{color:var(--ash);line-height:1.75;margin-bottom:1rem}
.state p b{color:var(--parchment);font-weight:600}
.spinner{width:34px;height:34px;border:2px solid #2c2113;border-top-color:var(--amber);border-radius:50%;margin:0 auto;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.countdown{margin-top:1.4rem;font-size:.85rem;color:var(--ash-dim);font-style:italic}
.countdown b{color:var(--amber);font-style:normal}
.notice{margin:1.2rem auto 0;max-width:30rem;font-size:.9rem;color:var(--parchment-dim);font-style:italic;line-height:1.6}

/* ---------- envelope ---------- */
.envelope{
  position:relative;width:min(20rem,80vw);aspect-ratio:4/2.7;margin:0 auto;
  background:linear-gradient(160deg,#241a0e,#17100a);
  border:1px solid #3a2a16;border-radius:8px;cursor:pointer;
  box-shadow:0 14px 44px rgba(0,0,0,.55);
  transition:transform .25s ease, box-shadow .25s ease;
}
.envelope:hover{transform:translateY(-3px) rotate(-.5deg);box-shadow:0 18px 54px rgba(232,163,61,.12)}
.envelope .flap{
  position:absolute;inset:0;border-radius:8px;
  background:linear-gradient(160deg,#2c2114,#1b130a);
  clip-path:polygon(0 0,100% 0,50% 58%);
  border-bottom:2px solid #3a2a16;
  transform-origin:top center;transition:transform .8s cubic-bezier(.6,0,.3,1), z-index 0s;
}
.envelope.open .flap{transform:rotateX(178deg);z-index:0}
.seal{
  position:absolute;left:50%;top:52%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:1.5rem;color:#1a1006;
  transition:transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .45s ease, opacity .4s;
  z-index:2;
}
.seal.ember{background:radial-gradient(circle at 35% 30%,#f4c877,var(--amber) 55%,var(--amber-deep));box-shadow:0 0 18px var(--amber-glow)}
.seal.midnight{background:radial-gradient(circle at 35% 30%,#dfe9f5,#9db4cc 55%,#5f7691);box-shadow:0 0 18px rgba(184,199,217,.3)}
.seal.parchment{background:radial-gradient(circle at 35% 30%,#fff6e3,#e8d5ac 55%,#b89b68);box-shadow:0 0 18px rgba(243,232,210,.25)}
.seal .wa{font-style:italic;font-weight:600}
.envelope.press .seal{transform:scale(.82);box-shadow:0 0 52px var(--amber-glow),0 0 18px var(--amber)}
.envelope.crack .seal{transform:scale(1.25) rotate(14deg);opacity:0}
/* letter sliding out */
.letter{
  position:absolute;left:6%;right:6%;top:8%;bottom:8%;border-radius:6px;z-index:1;
  transition:transform .9s cubic-bezier(.4,0,.2,1) .35s, box-shadow .9s .35s;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}
.envelope.open .letter{transform:translateY(-46%);box-shadow:0 16px 40px rgba(0,0,0,.5)}

/* ---------- note paper ---------- */
.paper{
  max-width:36rem;width:100%;margin:0 auto;border-radius:10px;padding:2.2rem 2rem 2rem;
  font-family:var(--hand);font-size:1.55rem;line-height:1.75;white-space:pre-wrap;
  box-shadow:0 18px 60px rgba(0,0,0,.55);position:relative;overflow:hidden;
  transform-origin:top center;
}
.paper.ember{background:linear-gradient(175deg,#221a10,#17110a);color:#f0ddb8;border:1px solid #3a2a16}
.paper.midnight{background:linear-gradient(175deg,#131b28,#0c1119);color:#dbe6f2;border:1px solid #2c3a4e}
.paper.parchment{background:linear-gradient(175deg,#f6ecd8,#e9dabb);color:#2a1f10;border:1px solid #c9b58e}
.paper .meta{display:block;font-family:var(--serif);font-size:.78rem;letter-spacing:.25em;text-transform:uppercase;opacity:.55;margin-bottom:1rem}
.paper img.doodle{display:block;max-width:100%;margin:1.2rem auto 0;border-radius:6px;opacity:.92}
.paper.ember img.doodle{filter:invert(1) hue-rotate(180deg)}

/* burn overlay */
#burnfx{position:fixed;inset:0;pointer-events:none;z-index:40}
.paper.burning{animation:curlash 2.6s ease-in forwards}
@keyframes curlash{
  0%{transform:scale(1) rotate(0);filter:none;opacity:1}
  35%{transform:scale(.99) rotate(-.6deg);filter:brightness(1.35) sepia(.6) saturate(1.6)}
  70%{transform:scale(.94) rotate(.8deg);filter:brightness(.55) contrast(1.3) sepia(1)}
  100%{transform:scale(.9) rotate(-1deg);filter:grayscale(1) brightness(.25);opacity:0}
}

/* ---------- composer ---------- */
.composer{max-width:36rem;width:100%;margin:0 auto}
.themes{display:flex;gap:.7rem;justify-content:center;margin-bottom:1.1rem}
.themes button{
  width:44px;height:44px;border-radius:50%;cursor:pointer;border:2px solid transparent;
  transition:transform .15s,border-color .15s;
}
.themes button[data-theme=ember]{background:radial-gradient(circle at 35% 30%,#f4c877,var(--amber) 60%,var(--amber-deep))}
.themes button[data-theme=midnight]{background:radial-gradient(circle at 35% 30%,#dfe9f5,#9db4cc 60%,#5f7691)}
.themes button[data-theme=parchment]{background:radial-gradient(circle at 35% 30%,#fff6e3,#e8d5ac 60%,#b89b68)}
.themes button.active{border-color:var(--parchment);transform:scale(1.12)}
.themes .tname{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ash-dim);align-self:center;margin-left:.2rem}
.composer textarea{
  width:100%;min-height:11rem;resize:vertical;border-radius:12px;padding:1.2rem 1.3rem;
  font-family:var(--hand);font-size:1.6rem;line-height:1.7;color:inherit;background:var(--ink-2);
  border:1px solid #2c2113;outline:none;transition:border-color .2s;
}
.composer textarea:focus{border-color:var(--amber-deep)}
.composer.ember textarea{color:#f0ddb8}
.composer.midnight textarea{color:#dbe6f2}
.composer.parchment textarea{background:#f6ecd8;color:#2a1f10;border-color:#c9b58e}
.composer .hint{font-size:.85rem;color:var(--ash-dim);margin:.7rem 0 1rem;text-align:center;font-style:italic}

/* doodle pad */
.doodlewrap{margin:1rem 0;border:1px dashed #3a2a16;border-radius:12px;padding:.8rem;background:rgba(0,0,0,.25)}
.doodlewrap canvas{display:block;width:100%;height:180px;border-radius:8px;background:rgba(255,255,255,.03);touch-action:none;cursor:crosshair}
.composer.parchment .doodlewrap canvas{background:rgba(255,255,255,.5)}
.doodlebar{display:flex;justify-content:flex-end;gap:.6rem;margin-top:.6rem}
.linkbtn{background:none;border:none;color:var(--ash);font-family:var(--serif);font-size:.85rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.linkbtn:hover{color:var(--amber)}

/* ---------- board footer ---------- */
.boardfoot{margin-top:3.5rem;display:flex;gap:1.4rem;justify-content:center}
.boardfoot .linkbtn{color:#4a4238;font-size:.78rem;text-decoration:none;letter-spacing:.04em}
.boardfoot .linkbtn:hover{color:#e06a5a}

/* ---------- misc ---------- */
.err{background:rgba(192,57,43,.08);border:1px solid rgba(192,57,43,.4);color:#e8a08f;border-radius:10px;padding:.9rem 1.1rem;margin:1rem auto;max-width:32rem;line-height:1.6;font-size:.93rem}
.okflash{color:var(--amber);font-style:italic}
.big-x{font-size:4rem;color:var(--ash-dim);margin-bottom:.5rem}
footer.site{position:relative;z-index:1;text-align:center;padding:1.6rem;color:#3f382d;font-size:.78rem;letter-spacing:.08em}
footer.site a{color:#5b544a;text-decoration:none}
footer.site a:hover{color:var(--amber)}

/* ---------- SPII card (hand-written, no Tailwind) ---------- */
#spii-card{
  position:fixed;bottom:1rem;right:1rem;z-index:30;
  display:flex;align-items:center;gap:.75rem;
  background:rgba(22,16,8,.92);border:1px solid #2c2113;border-radius:12px;
  padding:.6rem .8rem;backdrop-filter:blur(6px);
  box-shadow:0 8px 28px rgba(0,0,0,.5);
}
#spii-card a.spii-link{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:inherit}
#spii-card .spii-circle{
  width:32px;height:32px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 35% 30%,#f4c877,var(--amber) 60%,var(--amber-deep));
  color:#1a1006;font-family:var(--serif);font-weight:700;font-size:.85rem;
  display:flex;align-items:center;justify-content:center;font-style:italic;
}
#spii-card .spii-text{line-height:1.3}
#spii-card .spii-text b{display:block;font-size:.82rem;color:var(--parchment);font-weight:600;letter-spacing:.03em}
#spii-card .spii-text span{font-size:.72rem;color:var(--ash-dim)}
#spii-card .spii-x{
  background:none;border:none;color:var(--ash-dim);cursor:pointer;font-size:1rem;line-height:1;
  padding:.25rem;font-family:var(--serif);
}
#spii-card .spii-x:hover{color:var(--parchment)}

/* burn-gesture confirm */
.burnzone{margin-top:1.6rem}
#burnBtn{transition:all .2s}
#burnBtn.armed{background:#c0392b;color:#fff;border:none}
#burnBtn.armed:hover{box-shadow:0 6px 28px rgba(192,57,43,.4)}

@media (max-width:560px){
  main{padding:2rem 1rem}
  .paper{padding:1.6rem 1.3rem;font-size:1.35rem}
  .linkrow{flex-direction:column;align-items:stretch;gap:.5rem}
  .linkrow .btn{width:100%}
}