/* ==========================================================================
   COPPERPOT — Library app
   A shelf-and-row reading app. Rows are products; cards are volumes.
   ========================================================================== */

/* ---------- top bar ---------- */
.top {
  position: sticky; top: 0; z-index: 400;
  background: linear-gradient(var(--pot) 55%, rgba(12,10,9,0));
  transition: background var(--t), border-color var(--t);
  border-bottom: 1px solid transparent;
}
.top.is-stuck { background: rgba(12,10,9,.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom-color: var(--hair); }
.top__in { display: flex; align-items: center; gap: 1.6rem; height: 66px; }
.top__nav { display: flex; align-items: center; gap: 1.4rem; margin-left: .8rem; font-size: .85rem; }
.top__nav a { color: var(--fg-3); transition: color var(--t); }
.top__nav a:hover, .top__nav a.is-on { color: var(--fg); }
.top__end { margin-left: auto; display: flex; align-items: center; gap: .7rem; }

.who {
  display: flex; align-items: center; gap: .55rem;
  padding: .38rem .7rem .38rem .4rem;
  border: 1px solid var(--hair); border-radius: var(--r);
  font-size: .78rem; color: var(--fg-3);
  max-width: 15rem;
}
.who__dot { width: 22px; height: 22px; flex: none; border-radius: 3px; background: var(--pot-3); color: var(--copper);
  display: grid; place-items: center; font-size: .7rem; font-weight: 600; text-transform: uppercase; }
.who__mail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- billboard ---------- */
.bill { position: relative; padding: clamp(3rem, 9vw, 7rem) 0 clamp(2.5rem, 6vw, 4.5rem); overflow: hidden; }
.bill::before {
  content: ''; position: absolute; inset: -30% -10% auto -10%; height: 130%;
  background:
    radial-gradient(48% 52% at 12% 8%, rgba(224,144,77,.13), transparent 68%),
    radial-gradient(40% 45% at 82% 62%, rgba(224,144,77,.05), transparent 70%);
  pointer-events: none;
}
.bill__in { position: relative; }
.bill__title { margin: 1rem 0 0; max-width: 46rem; }
.bill__sub { margin-top: 1.15rem; max-width: 44rem; }
.bill__meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.6rem; }
.bill__cta { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.9rem; }

/* the counter strip under the billboard */
.counts { display: flex; flex-wrap: wrap; gap: 2.4rem; margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--hair); }
.counts b { display: block; font-size: 1.7rem; font-weight: 500; letter-spacing: -.04em; color: var(--fg); line-height: 1; }
.counts span { display: block; margin-top: .4rem; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-4); }

/* ---------- rows ---------- */
.row { margin-top: clamp(2.4rem, 5vw, 3.6rem); }
.row__head { display: flex; align-items: flex-end; gap: 1rem; padding-bottom: 1rem; }
.row__title { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.row__title h2 { font-size: clamp(1.15rem, 2.2vw, 1.45rem); font-weight: 500; letter-spacing: -.025em; color: var(--fg); }
.row__blurb { margin-top: .5rem; font-size: .88rem; color: var(--fg-3); max-width: 46rem; }
.row__end { margin-left: auto; display: flex; gap: .4rem; flex: none; }
.row__arrow {
  width: 32px; height: 32px; border: 1px solid var(--hair); border-radius: var(--r);
  display: grid; place-items: center; color: var(--fg-2); transition: all var(--t);
}
.row__arrow:hover { border-color: var(--fg-3); color: var(--fg); }
.row__arrow[disabled] { opacity: .3; pointer-events: none; }
.row__arrow svg { width: 15px; height: 15px; }

.row--locked .row__title h2 { color: var(--fg-2); }

/* the horizontal rail */
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(178px, 21vw, 224px);
  gap: .85rem;
  width: min(1320px, 100%);
  margin-inline: auto;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-left: var(--gutter);
  padding: .2rem var(--gutter) 1.2rem;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }

/* ---------- volume card ---------- */
.vol {
  position: relative;
  display: flex; flex-direction: column;
  text-align: left;
  transition: transform var(--t);
}
.vol:hover { transform: translateY(-3px); }

.vol__cover {
  position: relative;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(160deg, var(--pot-2), var(--pot-1) 55%, var(--pot));
  padding: 1.05rem 1.05rem 1.1rem;
  display: flex; flex-direction: column;
  transition: border-color var(--t);
}
.vol:hover .vol__cover { border-color: var(--hair-2); }

/* the oversized roman numeral sunk into the cover */
.vol__ghost {
  position: absolute; right: -.16em; bottom: -.34em;
  font-size: 8.4rem; font-weight: 600; line-height: .72;
  letter-spacing: -.06em;
  color: rgba(246,242,236,.045);
  pointer-events: none; user-select: none;
}
.vol__cover::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--copper), rgba(224,144,77,0));
  opacity: .55; transition: opacity var(--t);
}
.vol:hover .vol__cover::after { opacity: 1; }

.vol__top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; position: relative; }
.vol__num { font-size: .66rem; font-weight: 600; letter-spacing: .2em; color: var(--copper); }
.vol__title {
  position: relative;
  margin-top: auto;
  font-size: 1.02rem; font-weight: 500; letter-spacing: -.028em; line-height: 1.14;
  color: var(--fg);
  text-wrap: balance;
}
.vol__sub {
  position: relative;
  margin-top: .5rem; padding-top: .55rem;
  border-top: 1px solid var(--hair);
  font-size: .73rem; line-height: 1.42; color: var(--fg-3);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.vol__foot { margin-top: .7rem; display: flex; align-items: center; gap: .5rem; font-size: .76rem; color: var(--fg-3); }
.vol__pages { color: var(--fg-4); }
.vol__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--fg-4); flex: none; }

/* locked state */
.vol--locked .vol__cover { background: var(--pot-1); }
.vol--locked .vol__title, .vol--locked .vol__num { color: var(--fg-3); }
.vol--locked .vol__cover::after { background: var(--fg-4); opacity: .3; }
.vol__lock {
  width: 24px; height: 24px; border-radius: 3px;
  background: var(--pot-3); color: var(--fg-3);
  display: grid; place-items: center; flex: none;
}
.vol__lock svg { width: 12px; height: 12px; }

/* progress hairline */
.vol__bar { position: relative; height: 2px; margin-top: .6rem; background: var(--pot-3); border-radius: 2px; overflow: hidden; }
.vol__bar i { position: absolute; inset: 0 auto 0 0; background: var(--copper); border-radius: 2px; }

/* ---------- locked shelf banner ---------- */
.gatecard {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem;
  margin-top: .2rem;
  padding: 1.15rem 1.3rem;
  border: 1px dashed var(--hair-2); border-radius: var(--r-lg);
  background: rgba(246,242,236,.02);
}
.gatecard p { font-size: .87rem; color: var(--fg-3); max-width: 40rem; }
.gatecard strong { color: var(--fg-2); font-weight: 500; }
.gatecard .btn { margin-left: auto; }

/* ---------- detail sheet ---------- */
.sheet { position: fixed; inset: 0; z-index: 700; display: none; }
.sheet.open { display: block; }
.sheet__scrim { position: absolute; inset: 0; background: rgba(12,10,9,.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.sheet__box {
  position: relative;
  width: min(880px, calc(100% - 2rem));
  max-height: min(88vh, 900px);
  margin: 5vh auto 0;
  overflow-y: auto;
  background: var(--pot-1);
  border: 1px solid var(--hair);
  border-radius: 12px;
}
.sheet__close {
  position: absolute; top: 1rem; right: 1rem; z-index: 2;
  width: 34px; height: 34px; border-radius: var(--r);
  background: rgba(12,10,9,.7); border: 1px solid var(--hair);
  color: var(--fg-2); display: grid; place-items: center;
}
.sheet__close:hover { color: var(--fg); background: var(--pot-3); }
.sheet__close svg { width: 15px; height: 15px; }

.sheet__hero { position: relative; padding: 2.6rem var(--gutter) 1.9rem; border-bottom: 1px solid var(--hair); overflow: hidden; }
.sheet__hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(60% 90% at 8% 0%, rgba(224,144,77,.11), transparent 66%);
  pointer-events: none;
}
.sheet__hero > * { position: relative; }
.sheet__title { margin: .9rem 0 0; font-size: clamp(1.7rem, 3.6vw, 2.4rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.04; color: var(--fg); }
.sheet__sub { margin-top: .8rem; font-size: 1rem; color: var(--fg-2); max-width: 40rem; }
.sheet__meta { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.3rem; }
.sheet__cta { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.6rem; }

.sheet__body { padding: 1.9rem var(--gutter) 2.4rem; }
.sheet__body .label { margin-bottom: .9rem; }

.toc { border-top: 1px solid var(--hair); }
.toc__item { display: flex; gap: 1rem; padding: .72rem .2rem; border-bottom: 1px solid var(--hair); font-size: .9rem; }
.toc__n { flex: none; width: 1.9rem; color: var(--fg-4); font-variant-numeric: tabular-nums; font-size: .8rem; padding-top: .12rem; }
.toc__t { color: var(--fg-2); }

/* ---------- reader ---------- */
.reader { display: flex; flex-direction: column; height: 100dvh; }
.reader__bar { display: flex; align-items: center; gap: 1rem; padding: 0 var(--gutter); height: 56px; border-bottom: 1px solid var(--hair); flex: none; }
.reader__title { font-size: .9rem; font-weight: 500; color: var(--fg); letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reader__title span { color: var(--fg-4); font-weight: 400; }
.reader__end { margin-left: auto; display: flex; gap: .45rem; flex: none; }
.reader__frame { flex: 1; min-height: 0; background: var(--pot-2); }
.reader__frame iframe, .reader__frame embed, .reader__frame object { width: 100%; height: 100%; border: 0; display: block; }
.reader__fallback { display: grid; place-items: center; height: 100%; text-align: center; padding: 2rem; }

/* ---------- empty / error ---------- */
.notice { margin: 4rem auto; max-width: 34rem; text-align: center; }
.notice p { margin-top: .7rem; font-size: .92rem; color: var(--fg-3); }

@media (max-width: 720px) {
  .top__nav { display: none; }
  .who { max-width: 9rem; }
  .counts { gap: 1.6rem; }
  .gatecard .btn { margin-left: 0; width: 100%; }
}