/* ============================================================
   Orion Veyr, books page
   Purchase-led layout: cover panel, buy rail, contents.
   ============================================================ */

.book-hero{
  display:grid;
  grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:clamp(28px,4.5vw,56px);
  align-items:start;
}
@media(max-width:860px){
  .book-hero{grid-template-columns:1fr}
}

/* ---- Cover ---- */
.cover{
  position:relative;
  aspect-ratio:5/7.4;
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:26px 22px;
  border:1px solid var(--border-hi);
  background:
    radial-gradient(120% 80% at 15% 0%,rgba(232,119,46,0.20) 0%,transparent 60%),
    linear-gradient(160deg,#1a1712 0%,#0d0d0d 55%,#080808 100%);
  box-shadow:0 24px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
}
.cover--gold{
  background:
    radial-gradient(120% 80% at 15% 0%,rgba(201,162,39,0.20) 0%,transparent 60%),
    linear-gradient(160deg,#191712 0%,#0d0d0d 55%,#080808 100%);
}
.cover::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 62%,rgba(255,255,255,.045) 78%,transparent 88%);
  pointer-events:none;
}
.cover-spine{
  position:absolute;left:0;top:0;bottom:0;width:9px;
  background:linear-gradient(180deg,rgba(232,119,46,.55),rgba(232,119,46,.12));
}
.cover--gold .cover-spine{background:linear-gradient(180deg,rgba(201,162,39,.55),rgba(201,162,39,.12))}

.cover-kicker{
  font-family:var(--mono);font-size:8.5px;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--orange);
}
.cover--gold .cover-kicker{color:var(--gold)}
.cover-title{
  font-family:var(--serif);
  font-size:clamp(24px,2.6vw,31px);
  font-weight:900;line-height:1.08;
  letter-spacing:-.01em;
}
.cover-title em{font-style:italic;color:var(--orange)}
.cover--gold .cover-title em{color:var(--gold)}
.cover-sub{
  font-family:var(--mono);font-size:9.5px;
  letter-spacing:.11em;text-transform:uppercase;
  color:var(--t3);margin-top:12px;line-height:1.6;
}
.cover-author{
  font-family:var(--mono);font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--t2);
}
.cover-rule{height:1px;background:rgba(255,255,255,.10);margin:16px 0}

/* ---- Buy rail ---- */
.buy-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.buy-title{
  font-family:var(--serif);
  font-size:clamp(22px,2.6vw,32px);
  font-weight:900;line-height:1.1;
}
.buy-title em{font-style:italic;color:var(--orange)}
.buy-lede{font-size:15px;color:var(--t2);line-height:1.7;margin-bottom:22px;max-width:60ch}

.buy-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.btn--buy{background:var(--orange);color:#fff}
.btn--buy:hover{background:var(--orange-hi)}
/* Stablecoin buy button: a distinct neutral rail next to Bitcoin (orange) and card (orange). */
.btn--stable{
  background:var(--bg3);color:var(--text);
  border:1px solid var(--border-hi);
}
.btn--stable:hover{border-color:var(--orange);color:var(--text)}
/* Stablecoin price for a book, with the original struck through when discounted. */
.book-price{
  display:flex;align-items:baseline;gap:9px;
  font-family:var(--mono);font-size:16px;color:var(--text);
}
.book-price s{color:var(--t4);font-size:13px}
.book-price b{color:var(--orange);font-weight:500}
.book-price .bp-hint{
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--t4);
}
.buy-meta{
  margin:0;
  font-family:var(--mono);font-size:10.5px;
  color:var(--t4);letter-spacing:.04em;line-height:1.7;
}

/* ---- Bitcoin buy, with ebook / paperback format choice ---- */
.btc-buy{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:14px;margin-bottom:16px;
}
.btc-fmt{display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap}
.btc-fmt-label{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--t3);
}
.btc-choice{
  display:inline-flex;gap:4px;padding:4px;
  background:var(--bg3);border:1px solid var(--border-hi);
  border-radius:10px;
}
.btc-opt{
  font-family:var(--mono);font-size:12px;letter-spacing:.02em;
  padding:8px 18px;border-radius:7px;
  color:var(--t3);background:transparent;border:1px solid transparent;
  cursor:pointer;
  transition:background .16s var(--ease),color .16s var(--ease);
}
.btc-opt:hover{color:var(--text)}
.btc-opt.is-on{background:#F7931A;color:#fff}
.btc-opt:focus-visible{outline:2px solid #F7931A;outline-offset:2px}
.btc-cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

@media(max-width:560px){
  .btc-buy{width:100%}
  .btc-fmt{width:100%}
  .btc-choice{width:100%}
  .btc-opt{flex:1;text-align:center}
  .btc-cta-row{width:100%;flex-direction:column;align-items:stretch}
  .btc-cta-row .btn{width:100%}
}

.buy-points{
  display:flex;flex-direction:column;gap:10px;
  margin:22px 0 0;padding-top:20px;
  border-top:1px solid var(--border2);
}
.buy-point{
  display:flex;gap:11px;align-items:flex-start;
  font-size:13.5px;color:var(--t2);line-height:1.6;
}
.buy-point::before{
  content:'';flex-shrink:0;width:5px;height:5px;border-radius:50%;
  background:var(--orange);margin-top:8px;
}
.buy-point--gold::before{background:var(--gold)}

/* ---- Coming soon state ---- */
.soon-note{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--orange-dim);
  border:1px solid var(--orange-line);
  border-radius:var(--radius-sm);
  padding:15px 17px;margin-bottom:18px;
}
.soon-note-icon{font-size:16px;line-height:1.3;flex-shrink:0}
.soon-note-body{font-size:13.5px;color:var(--t2);line-height:1.65}
.soon-note-body b{color:var(--orange);font-weight:700}

/* ---- Contents grid ---- */
.contents{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:12px;margin-top:26px;
}
.content-card{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:18px;
  transition:border-color .2s var(--ease);
}
.content-card:hover{border-color:var(--orange-line)}
.content-card-n{
  font-family:var(--mono);font-size:9px;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--orange);margin-bottom:9px;
}
.content-card--gold .content-card-n{color:var(--gold)}
.content-card-t{font-size:13.5px;font-weight:700;margin-bottom:6px}
.content-card-b{font-size:12.5px;color:var(--t3);line-height:1.6}

.book-divider{
  height:1px;
  background:linear-gradient(90deg,transparent,var(--border-hi),transparent);
  margin-block:clamp(48px,7vw,86px);
}


/* ============================================================
   MOBILE
   ============================================================ */
@media(max-width:620px){
  /* full width made the cover 474px tall, taller than the fold */
  .cover{max-width:196px;margin-inline:auto;padding:20px 17px}
  .cover-title{font-size:21px}
  .cover-kicker{font-size:10px;letter-spacing:.2em}
  .cover-sub{font-size:10px}
  .cover-author{font-size:10px}

  .buy-head{gap:8px;margin-bottom:12px}
  .buy-lede{font-size:14.5px;margin-bottom:20px}
  .buy-actions{flex-direction:column;align-items:stretch;gap:10px}
  .buy-actions .btn{width:100%}
  .buy-meta{text-align:center;font-size:11px}
  .buy-point{font-size:14px}

  .soon-note{padding:14px 15px}
  .soon-note-body{font-size:13.5px}

  .contents{grid-template-columns:1fr;gap:10px;margin-top:22px}
  .content-card{padding:16px}
  .content-card-n{font-size:10px}
  .content-card-b{font-size:13px}

  .book-divider{margin-block:40px}
}

/* ============================================================
   Stablecoin book checkout modal (mirrors the subscribe modal)
   ============================================================ */
.pay-modal{
  position:fixed;inset:0;z-index:200;
  background:rgba(6,6,6,0.82);backdrop-filter:blur(4px);
  display:flex;align-items:flex-start;justify-content:center;
  padding:40px 16px;overflow-y:auto;
}
.pay-modal[hidden]{display:none}
.pay-box{
  position:relative;width:100%;max-width:440px;
  background:var(--bg2);border:1px solid var(--border-hi);
  border-radius:var(--radius);padding:30px 26px;
}
.pay-close{
  position:absolute;top:12px;right:14px;
  background:none;border:0;color:var(--t3);font-size:18px;cursor:pointer;line-height:1;
}
.pay-close:hover{color:var(--text)}
.pay-eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--orange);margin-bottom:22px;
}
.pay-label{
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--t3);margin:16px 0 8px;
}
.pay-input{
  width:100%;background:var(--bg);border:1px solid var(--border-hi);
  border-radius:var(--radius-sm);padding:12px 14px;color:var(--text);
  font-family:var(--mono);font-size:14px;
}
.pay-input:focus{outline:2px solid var(--orange);outline-offset:1px}
.chip-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px}
.chip{
  padding:11px 10px;border:1px solid var(--border-hi);background:var(--bg);
  border-radius:var(--radius-sm);color:var(--t3);cursor:pointer;
  font-family:var(--mono);font-size:12px;letter-spacing:.03em;line-height:1.35;
  transition:border-color .15s var(--ease),color .15s var(--ease),background .15s var(--ease);
}
.chip:hover{color:var(--text)}
.chip.is-on{border-color:var(--orange);color:var(--text);background:var(--orange-dim)}
.pay-error{
  margin-top:14px;color:var(--red);font-size:12.5px;font-family:var(--mono);
  border:1px solid rgba(214,72,59,.3);background:var(--red-dim);
  border-radius:var(--radius-sm);padding:10px 12px;
}
#bp-step1 .btn{margin-top:20px;width:100%}
.pay-send{font-size:15px;color:var(--t2);text-align:center;line-height:1.7;margin-bottom:16px}
.pay-send b{color:var(--text);font-family:var(--mono)}
.pay-qr{display:block;margin:0 auto 16px;border:6px solid #fff;border-radius:4px;width:200px;height:200px}
.pay-addr-row{display:flex;gap:8px;align-items:stretch;margin-bottom:14px}
.pay-addr{
  flex:1;min-width:0;word-break:break-all;font-family:var(--mono);font-size:11.5px;
  color:var(--t2);background:var(--bg);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:10px 12px;
}
.pay-copy{
  flex:0 0 auto;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  border:1px solid var(--border-hi);background:var(--bg);color:var(--t2);
  border-radius:var(--radius-sm);padding:0 14px;cursor:pointer;
}
.pay-copy:hover{border-color:var(--orange-line);color:var(--text)}
.pay-warn{
  font-size:12px;color:#E89080;line-height:1.6;
  border:1px solid rgba(214,72,59,.4);background:var(--red-dim);
  border-radius:var(--radius-sm);padding:11px 13px;margin-bottom:14px;
}
.pay-note{font-size:12px;color:var(--t3);line-height:1.65;margin-bottom:10px}
.pay-ok{
  width:52px;height:52px;margin:0 auto 16px;display:grid;place-items:center;
  border:2px solid var(--green);color:var(--green);border-radius:50%;font-size:26px;
}
#bp-step3{text-align:center}
#bp-step3 h3{font-family:var(--serif);font-size:22px;margin-bottom:12px}
#bp-step3 .btn{margin-top:18px}

@media(max-width:560px){
  .btc-cta-row .btn--stable{width:100%}
}