/* ═══════════════════════════════════════════════════════════════
   oh Pen — Dylan Reed Hanks — the theme
   Cloth, paper, rail and the order card. The engine is bindery.css.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --canvas:#f2efe7;
  --canvas-deep:#dcd7cb;
  --pageedge:#e6e2d8;
  --paper:#f6f3ea;
  --endpaper:#ece7dc;
}

/* ── the cloth ─────────────────────────────────────────────── */
/* the weave, hinges, endpapers and edges live in hardcover.css; this book only picks colours */
.cover .colophon{color:#6c665b}

/* ── the companion leaf — paper, perforated at the gutter ──── */
.page.paper{
  background:var(--paper); color:#1b1a17;
  box-shadow: inset 0 0 0 1px #d9d3c4;
}
.page.paper::before{
  width:0; left:14px; right:auto;
  border-left:2px dashed #b9b1a0;
  background:none;
}
.page.paper.left::before{left:auto; right:14px}
.page.paper .folio{color:#9b9384}
.page.paper .cursor{background:#1b1a17}
.page.paper::after{background:linear-gradient(to right, rgba(0,0,0,.35), rgba(0,0,0,0) 45%)}

/* ── side rail ─────────────────────────────────────────────── */
.rail{
  display:flex; flex-direction:column; gap:22px;
  color:var(--ink-dim); font-size:12px; letter-spacing:.02em;
  padding:14px 18px 0;
}
.rail-title{display:flex; flex-direction:column; gap:2px}
.rail-name{appearance:none; background:none; border:0; padding:0; margin:0; text-align:left; cursor:pointer; color:var(--ink); font:700 14px/1.2 var(--mono); letter-spacing:0}
.rail-name:hover{text-decoration:underline; text-underline-offset:3px}
.rail-by{color:var(--ink-dim)}
.rail-order{
  appearance:none; background:none; border:0; padding:0; margin:0;
  text-align:left; color:var(--ink-dim); font:inherit; cursor:pointer;
  display:flex; flex-direction:column; gap:2px;
}
.rail-order:hover .rail-cta, .rail-order:focus-visible .rail-cta{color:var(--ink)}
.rail-edition{color:var(--ink); font-weight:600}
.rail-cta{margin-top:6px; text-decoration:underline; text-underline-offset:3px; text-decoration-color:#3a3d42}
@media (max-width:899px), (orientation:portrait){
  .rail{flex-direction:row; align-items:flex-end; justify-content:space-between; width:100%; padding:12px 16px 0}
  .rail-order{align-items:flex-end; text-align:right}
  .rail-detail{display:none}
}

/* ── the order card beneath the showcase ───────────────────── */
.shop{
  position:absolute; left:50%; top:50%; transform:translateX(-50%);
  width:min(560px, calc(100% - 32px)); max-height:calc(50% - 8px);
  overflow:auto; touch-action:pan-y; -webkit-overflow-scrolling:touch;
  opacity:0; transition:opacity .5s .3s;
}
.shop[hidden]{display:none}
.scene.showcase .shop{opacity:1}
.shop-card{color:var(--ink); font-family:var(--sans); padding:18px 0 0; border-top:1px solid #26292e}
.shop-title{margin:0 0 4px; font:700 15px/1.3 var(--mono); letter-spacing:0}
.shop-lead{margin:0 0 14px; color:var(--ink-dim); font-size:13px}
.shop-grid{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px 12px; margin:0 0 16px}
.f{display:flex; flex-direction:column; gap:4px; min-width:0}
.f-2{grid-column:span 2}
.f-4{grid-column:span 4}
.f span{font:11px/1 var(--mono); color:var(--ink-dim); letter-spacing:.02em}
.f input{
  width:100%; height:34px; padding:0 10px; box-sizing:border-box;
  background:#131518; border:1px solid #2a2d32; border-radius:4px; color:var(--ink);
  font:13px/1 var(--mono); outline:none;
}
.f input:focus{border-color:#6f747b}
.f input.bad{border-color:#b05a5a}
.shop-row{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.shop-buy{appearance:none; border:0; cursor:pointer; background:var(--canvas); color:#141311; font:700 14px/1 var(--mono); padding:14px 20px; letter-spacing:0}
.shop-buy:hover{background:#fff}
.shop-buy[disabled]{opacity:.6; cursor:wait}
.shop-back{appearance:none; border:0; background:none; cursor:pointer; color:var(--ink-dim); font:12px/1 var(--mono); text-decoration:underline; text-underline-offset:3px}
.shop-back:hover{color:var(--ink)}
.shop-note{margin:12px 0 0; font:11px/1.5 var(--mono); color:var(--ink-dim)}
.shop-note.err{color:#e0a3a3}
@media (max-width:899px), (orientation:portrait){
  .shop{top:auto; bottom:0; max-height:calc(100% - var(--ph) * .8 - 24px)}
  .shop-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
  .f-4{grid-column:span 2}
}