/* ============================================================
   WORTHY — "The Seam"
   Ink & absence, light & lock. One blade of brass.
   ============================================================ */

:root{
  /* palette */
  --ink:        #14131c;   /* deep violet-black: a bright room at the edge of night */
  --ink-2:      #1a1823;
  --panel:      #1d1b27;
  --panel-2:    #23212f;
  --line:       #322f40;
  --bone:       #ece7db;   /* the light */
  --bone-dim:   #b7b1a4;
  --bone-faint: #837e75;
  --brass:      #c9a24b;   /* the lock, the pen, the quarter-turned cup */
  --brass-dim:  #9a7c3b;
  --steel:      #7f8aa3;   /* cold counter-light */
  --danger:     #b8553f;

  /* type */
  --serif: "Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --sans:  ui-sans-serif,"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --mono:  ui-monospace,"SF Mono","JetBrains Mono","Cascadia Code",Menlo,Consolas,monospace;

  --measure: 34rem;
  --reader-size: 1.18rem;
}

/* light "reading lamp" mode — only affects the reader surface */
[data-lamp="on"]{
  --r-bg: #ece7db;
  --r-fg: #201d18;
  --r-dim: #5b554a;
  --r-line: #cdc5b3;
}
[data-lamp="off"]{
  --r-bg: var(--ink);
  --r-fg: var(--bone);
  --r-dim: var(--bone-faint);
  --r-line: var(--line);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--ink); color:var(--bone);
  font-family:var(--serif); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{ color:var(--brass); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }
:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; border-radius:2px; }
img{ max-width:100%; }
button{ font:inherit; color:inherit; cursor:pointer; }

/* ---------- utility type ---------- */
.eyebrow{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.32em;
  text-transform:uppercase; color:var(--brass); margin:0;
}
.engrave{
  font-family:var(--serif); font-weight:600; letter-spacing:.16em;
  text-transform:uppercase;
}

/* ============================================================
   COVER
   ============================================================ */
.view{ display:none; }
.view.active{ display:block; }

#view-cover{
  min-height:100svh; position:relative;
  display:flex; flex-direction:column;
  background:
    radial-gradient(120% 80% at 50% -10%, #201d2c 0%, var(--ink) 55%),
    var(--ink);
  overflow:hidden;
}
/* the seam: a hairline of light down the center */
#view-cover::before{
  content:""; position:absolute; top:0; bottom:0; left:50%;
  width:1px; transform:translateX(-.5px);
  background:linear-gradient(to bottom,
     transparent 0%, rgba(201,162,75,.0) 8%,
     rgba(201,162,75,.55) 30%, rgba(236,231,219,.25) 50%,
     rgba(201,162,75,.55) 70%, transparent 92%);
  opacity:.5; pointer-events:none;
}
.cover-top{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 1.4rem; position:relative; z-index:2;
}
.imprint{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--bone-faint);
}
.cover-top .lamp-hint{ font-family:var(--mono); font-size:.6rem; letter-spacing:.24em; color:var(--bone-faint); text-transform:uppercase;}

.cover-core{
  flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; padding:2rem 1.4rem 1rem;
  position:relative; z-index:2;
}
.wordmark{
  margin:0; cursor:pointer; user-select:none;
  font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  font-size:clamp(3.2rem,17vw,7.5rem); line-height:.92;
  color:var(--bone);
  text-shadow:0 1px 0 rgba(0,0,0,.4);
}
.wordmark .r{ color:var(--brass); }
.tagline{
  margin:.9rem 0 0; font-style:italic; color:var(--bone-dim);
  font-size:1.05rem; letter-spacing:.02em;
}
.byline{
  margin:1.8rem 0 0; font-family:var(--mono);
  font-size:.72rem; letter-spacing:.34em; text-transform:uppercase; color:var(--bone-dim);
}
.byline b{ color:var(--bone); font-weight:600; }

.epigraph{
  max-width:26rem; margin:2.4rem auto 0; position:relative; padding-top:1.6rem;
}
.epigraph::before{
  content:""; position:absolute; top:0; left:50%; width:74px; height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent, var(--brass) 20%, transparent 42%, transparent 58%, var(--brass) 80%, transparent);
}
.epigraph p{
  margin:0; font-style:italic; font-size:1.12rem; line-height:1.55; color:var(--bone);
}

.cover-cta{
  display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center;
  margin:2.6rem 0 0;
}
.btn{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  padding:.9rem 1.5rem; border:1px solid var(--line); background:transparent; color:var(--bone);
  border-radius:1px; transition:border-color .2s, background .2s, color .2s;
}
.btn:hover{ border-color:var(--bone-dim); }
.btn-primary{ background:var(--brass); color:#1a150a; border-color:var(--brass); font-weight:600; }
.btn-primary:hover{ background:#d8b25c; border-color:#d8b25c; }
.btn-ghost{ border-color:transparent; color:var(--bone-dim); }
.btn-ghost:hover{ color:var(--bone); }

.founding{
  margin:2.2rem auto 0; max-width:30rem; position:relative; z-index:2;
  border:1px solid var(--line); background:rgba(29,27,39,.6);
  padding:1rem 1.2rem; border-radius:2px;
}
.founding .fh{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.founding .fh .lbl{ font-family:var(--mono); font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--brass); }
.founding .fh .count{ font-family:var(--mono); font-size:.72rem; color:var(--bone-dim); }
.meter{ height:3px; background:var(--panel-2); border-radius:2px; margin:.7rem 0 .6rem; overflow:hidden; }
.meter > i{ display:block; height:100%; background:linear-gradient(90deg,var(--brass-dim),var(--brass)); }
.founding p{ margin:0; font-size:.9rem; color:var(--bone-dim); }

.cover-foot{
  position:relative; z-index:2; text-align:center; padding:1.4rem;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--bone-faint);
}
.cover-foot a{ color:var(--bone-faint); }
.cover-foot a:hover{ color:var(--brass); }

/* ============================================================
   READER
   ============================================================ */
#view-read{ background:var(--r-bg); color:var(--r-fg); min-height:100svh; transition:background .3s,color .3s; }
.reader-bar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  padding:.7rem 1rem; background:color-mix(in srgb, var(--r-bg) 88%, transparent);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--r-line);
}
.reader-bar .rb-mark{
  font-family:var(--serif); font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  font-size:.9rem; color:var(--r-fg); cursor:pointer; background:none; border:none; padding:.2rem;
}
.reader-bar .rb-mark .r{ color:var(--brass); }
.rb-tools{ display:flex; align-items:center; gap:.35rem; }
.icon-btn{
  width:38px; height:34px; display:grid; place-items:center;
  background:transparent; border:1px solid transparent; border-radius:3px;
  color:var(--r-dim); font-family:var(--mono); font-size:.78rem; letter-spacing:.05em;
}
.icon-btn:hover{ color:var(--r-fg); border-color:var(--r-line); }
.icon-btn svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.6; }
.progress-line{ height:2px; background:transparent; }
.progress-line > i{ display:block; height:100%; width:0; background:var(--brass); transition:width .3s; }

.reader-wrap{ max-width:var(--measure); margin:0 auto; padding:3.2rem 1.4rem 8rem; }

.chapter-head{ text-align:center; margin:0 0 2.4rem; }
.chapter-head .part-lbl{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--brass); margin:0 0 1.1rem;
}
.chapter-head .ch-title{
  font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  font-size:1.5rem; margin:0; color:var(--r-fg);
}
.chapter-head .pov{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--r-dim); margin:1rem 0 0;
  display:inline-flex; align-items:center; gap:.7rem;
}
.chapter-head .pov::before,.chapter-head .pov::after{
  content:""; width:26px; height:1px; background:var(--r-line);
}

/* pov tints the ampersand of the two voices, subtly */
.pov[data-who="COLE"]{ color:var(--steel); }
.pov[data-who="VERA"]{ color:var(--brass); }

.chapter-body{ font-size:var(--reader-size); line-height:1.72; }
.chapter-body p{ margin:0 0 1.15rem; }
.chapter-body p:first-of-type{ }
/* drop cap on the first paragraph */
.chapter-body > p:first-of-type::first-letter{
  font-weight:600; float:left; font-size:3.4em; line-height:.78;
  padding:.06em .12em 0 0; color:var(--brass);
}
.chapter-body em{ font-style:italic; }
.chapter-body strong{ font-weight:600; }
.chapter-body .spacer{ height:1.4rem; }
.chapter-body blockquote{
  margin:1.6rem 0; padding-left:1.1rem; border-left:2px solid var(--brass);
  font-style:italic; color:var(--r-fg);
}
/* the signature: a brass rule with a door cut into it */
.door-rule{
  border:0; height:1px; margin:2.4rem auto; width:60%;
  background:linear-gradient(90deg,
    transparent, var(--brass-dim) 18%,
    var(--brass-dim) 42%, transparent 42%,
    transparent 58%, var(--brass-dim) 58%,
    var(--brass-dim) 82%, transparent);
}

.chapter-nav{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  max-width:var(--measure); margin:2.5rem auto 0; padding:0 1.4rem;
}
.nav-btn{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  padding:.8rem 1.1rem; border:1px solid var(--r-line); background:transparent; color:var(--r-fg);
  border-radius:2px; flex:1; max-width:48%;
}
.nav-btn:disabled{ opacity:.3; cursor:default; }
.nav-btn:hover:not(:disabled){ border-color:var(--brass); }
.nav-btn.next{ text-align:right; }

/* ============================================================
   GATE / LOCK PANEL (inside reader)
   ============================================================ */
.gate{
  max-width:var(--measure); margin:2rem auto; text-align:center;
  border:1px solid var(--r-line); border-radius:3px; padding:2.6rem 1.6rem;
  background:color-mix(in srgb, var(--r-bg) 94%, var(--brass) 6%);
}
.gate .lock-mark{ font-size:1.6rem; color:var(--brass); }
.gate h3{ font-weight:600; letter-spacing:.14em; text-transform:uppercase; font-size:1.15rem; margin:.6rem 0 .3rem; }
.gate p{ color:var(--r-dim); margin:.2rem auto 1.4rem; max-width:26rem; }
.gate .gate-cta{ display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; }

/* ============================================================
   CONTENTS DRAWER
   ============================================================ */
.scrim{
  position:fixed; inset:0; background:rgba(6,5,10,.66); backdrop-filter:blur(2px);
  opacity:0; visibility:hidden; transition:opacity .25s,visibility .25s; z-index:40;
}
.scrim.open{ opacity:1; visibility:visible; }

.drawer{
  position:fixed; top:0; bottom:0; left:0; width:min(88vw,23rem); z-index:50;
  background:var(--panel); border-right:1px solid var(--line);
  transform:translateX(-100%); transition:transform .3s cubic-bezier(.2,.7,.2,1);
  display:flex; flex-direction:column;
}
.drawer.open{ transform:none; }
.drawer-head{ padding:1.2rem 1.3rem; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
.drawer-head .t{ font-family:var(--mono); font-size:.66rem; letter-spacing:.28em; text-transform:uppercase; color:var(--brass); }
.drawer-body{ overflow-y:auto; padding:.6rem 0 2rem; }
.toc-part{ padding:1.3rem 1.3rem .4rem; font-family:var(--mono); font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--bone-faint); }
.toc-item{
  display:flex; align-items:center; gap:.7rem; width:100%;
  padding:.6rem 1.3rem; background:none; border:0; text-align:left; color:var(--bone-dim);
  border-left:2px solid transparent;
}
.toc-item:hover{ color:var(--bone); background:rgba(255,255,255,.02); }
.toc-item.current{ color:var(--bone); border-left-color:var(--brass); }
.toc-item .n{ font-family:var(--mono); font-size:.66rem; color:var(--bone-faint); width:1.6rem; }
.toc-item .ttl{ flex:1; font-size:.94rem; }
.toc-item .pv{ font-family:var(--mono); font-size:.56rem; letter-spacing:.18em; color:var(--bone-faint); }
.toc-item .lk{ color:var(--brass-dim); }
.drawer-foot{ margin-top:auto; padding:1rem 1.3rem; border-top:1px solid var(--line); }
.drawer-foot button{ width:100%; }

/* ============================================================
   MODALS (tiers, unlock, decoder, colophon)
   ============================================================ */
.modal{
  position:fixed; inset:0; z-index:60; display:none;
  align-items:center; justify-content:center; padding:1.2rem;
}
.modal.open{ display:flex; }
.modal-card{
  background:var(--panel); border:1px solid var(--line); border-radius:4px;
  width:min(100%,40rem); max-height:88svh; overflow-y:auto; position:relative;
}
.modal-card.narrow{ width:min(100%,26rem); }
.modal-x{ position:absolute; top:.7rem; right:.7rem; width:34px; height:34px; border-radius:3px; border:1px solid transparent; background:none; color:var(--bone-dim); font-size:1.1rem; }
.modal-x:hover{ border-color:var(--line); color:var(--bone); }
.modal-pad{ padding:2rem 1.8rem; }
.modal-pad h2{ font-weight:600; letter-spacing:.12em; text-transform:uppercase; font-size:1.2rem; margin:.2rem 0 .2rem; }
.modal-pad .sub{ color:var(--bone-dim); margin:.2rem 0 1.6rem; font-size:.95rem; }

/* tiers */
.tiers{ display:grid; gap:1rem; }
@media(min-width:34rem){ .tiers{ grid-template-columns:1fr 1fr; } }
.tier{ border:1px solid var(--line); border-radius:3px; padding:1.3rem; background:var(--panel-2); display:flex; flex-direction:column; }
.tier.feature{ border-color:var(--brass-dim); box-shadow:inset 0 0 0 1px rgba(201,162,75,.12); }
.tier .badge{ font-family:var(--mono); font-size:.58rem; letter-spacing:.24em; text-transform:uppercase; color:var(--brass); }
.tier .name{ font-weight:600; letter-spacing:.1em; text-transform:uppercase; font-size:1rem; margin:.5rem 0 .1rem; }
.tier .price{ font-size:2rem; font-weight:600; margin:.3rem 0 .1rem; }
.tier .price s{ color:var(--bone-faint); font-size:1rem; font-weight:400; margin-right:.5rem; }
.tier .price .cur{ color:var(--bone-faint); font-size:1rem; vertical-align:super; }
.tier ul{ list-style:none; padding:0; margin:.9rem 0 1.2rem; font-size:.9rem; color:var(--bone-dim); flex:1; }
.tier ul li{ padding:.28rem 0 .28rem 1.2rem; position:relative; }
.tier ul li::before{ content:""; position:absolute; left:0; top:.85em; width:8px; height:1px; background:var(--brass); }
.tier .btn{ width:100%; text-align:center; }

.pay-note{ margin:1.4rem 0 0; font-size:.82rem; color:var(--bone-faint); line-height:1.6; }
.pay-row{ display:flex; flex-wrap:wrap; gap:.5rem; margin:.7rem 0 0; }
.pay-chip{ font-family:var(--mono); font-size:.64rem; letter-spacing:.06em; padding:.45rem .7rem; border:1px solid var(--line); border-radius:2px; color:var(--bone-dim); }
.pay-chip b{ color:var(--bone); }

/* unlock */
.unlock-form{ display:flex; gap:.5rem; margin:1.2rem 0 .4rem; }
.unlock-form input{
  flex:1; background:var(--ink); border:1px solid var(--line); color:var(--bone);
  font-family:var(--mono); letter-spacing:.3em; font-size:1.1rem; text-align:center;
  padding:.9rem; border-radius:2px;
}
.unlock-form input:focus{ border-color:var(--brass); outline:none; }
.unlock-msg{ min-height:1.2rem; font-family:var(--mono); font-size:.72rem; letter-spacing:.05em; margin:.3rem 0 0; }
.unlock-msg.ok{ color:var(--brass); }
.unlock-msg.err{ color:var(--danger); }

/* decoder */
.decoder-lever{ border-top:1px solid var(--line); padding:1.1rem 0; }
.decoder-lever:first-of-type{ border-top:0; }
.decoder-lever .lv-h{ display:flex; align-items:baseline; gap:.8rem; }
.decoder-lever .lv-n{ font-family:var(--mono); font-size:.8rem; color:var(--brass); }
.decoder-lever .lv-name{ font-weight:600; letter-spacing:.08em; text-transform:uppercase; font-size:.95rem; }
.decoder-lever p{ margin:.5rem 0 0; color:var(--bone-dim); font-size:.92rem; }
.decoder-lever .where{ font-family:var(--mono); font-size:.66rem; letter-spacing:.05em; color:var(--bone-faint); margin-top:.4rem; }

/* colophon */
.colophon p{ color:var(--bone-dim); font-size:.92rem; }
.quotes{ margin:1.4rem 0; }
.quotes blockquote{ margin:.9rem 0; padding-left:1rem; border-left:2px solid var(--brass-dim); font-style:italic; color:var(--bone); }
.quotes blockquote cite{ display:block; font-style:normal; font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--bone-faint); margin-top:.3rem; }
.blessing{ text-align:center; margin:1.8rem 0 0; }
.blessing p{ font-style:italic; color:var(--bone); margin:.2rem 0; }
.blessing .karma{ font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; color:var(--brass); font-style:normal; text-transform:uppercase; }
.world{ margin:1.6rem 0 0; display:grid; gap:.5rem; }
.world a{ display:flex; align-items:center; justify-content:space-between; gap:1rem; border:1px solid var(--line); border-radius:2px; padding:.8rem 1rem; color:var(--bone-dim); }
.world a:hover{ border-color:var(--brass-dim); color:var(--bone); text-decoration:none; }
.world a .lbl{ font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; }
.world a .go{ color:var(--brass); }
.imprint-line{ text-align:center; font-family:var(--mono); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-faint); margin:1.8rem 0 0; }

/* toast */
.toast{
  position:fixed; left:50%; bottom:1.4rem; transform:translateX(-50%) translateY(1rem);
  background:var(--brass); color:#1a150a; font-family:var(--mono); font-size:.72rem;
  letter-spacing:.1em; text-transform:uppercase; padding:.8rem 1.2rem; border-radius:2px;
  opacity:0; visibility:hidden; transition:.3s; z-index:80; font-weight:600;
}
.toast.show{ opacity:1; visibility:visible; transform:translateX(-50%); }

/* install hint */
.install{ position:fixed; right:1rem; bottom:1rem; z-index:70; display:none; }
.install.show{ display:block; }

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}
@media (max-width:30rem){
  .cover-cta{ flex-direction:column; }
  .cover-cta .btn{ width:100%; }
}