/* =========================================================================
   RV Chitrika — comic + arc detail pages.
   Replaces the serif, dark-only styles.css treatment with the same design
   system the homepage and reader use (tokens come from base.css).
   ========================================================================= */

@import url('/css/base.css');

/* ---- Top bar ------------------------------------------------------------ */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 14px clamp(16px, 3vw, 40px);
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; flex-direction: column; line-height: 1.15; }
.brand .mark { font-family: var(--display); font-size: 25px; color: var(--gold); letter-spacing: .3px; }
.brand .sub { font-size: 11px; color: var(--muted); margin-top: 2px; }

.topnav { display: flex; align-items: center; gap: 22px; }
.topnav a {
  font-size: 14px; font-weight: 500; color: var(--text-dim);
  padding: 6px 2px; border-bottom: 2px solid transparent; transition: color .15s;
}
.topnav a:hover, .topnav a.active { color: var(--gold); }
.topnav a.active { border-bottom-color: var(--gold); }

.theme-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; font-size: 14px;
  background: transparent; border: 1px solid var(--border); color: var(--text-dim);
  cursor: pointer; transition: border-color .15s, color .15s, background .15s;
}
.theme-btn:hover { border-color: var(--gold); color: var(--gold); background: var(--bg-elevated); }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13.5px; font-weight: 700;
  padding: 13px 24px; margin-top: 22px;
  border-radius: var(--radius-sm);
  color: #1B1408; background: var(--gold); border: 1px solid var(--gold);
  cursor: pointer; transition: background .15s, transform .08s;
}
.btn:hover { background: var(--gold-soft); }
.btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--gold); border-color: var(--border); }
.btn--ghost:hover { background: var(--bg-elevated); }

/* =========================================================================
   DETAIL PAGES
   ========================================================================= */
/* padding-top/bottom, never the shorthand: these classes are always paired
   with .wrap in the markup, and .wrap's own left/right padding is what holds
   the content off the edge of the screen. A shorthand declared later wipes
   that to zero. On a desktop it goes unnoticed because max-width leaves slack
   either side anyway; on a phone every heading and card ends up flush against
   the glass. */
.detail { padding-top: clamp(28px, 5vh, 56px); padding-bottom: 80px; }
.detail__grid { display: grid; grid-template-columns: minmax(280px, 420px) 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }

/* Comic page: info column + arcs panel */
.comic-hero { display: grid; grid-template-columns: minmax(280px, 420px) 1fr; gap: clamp(24px, 4vw, 52px); align-items: start; }
.comic-info { min-width: 0; }

.cover-frame {
  position: relative; padding: 9px; border-radius: var(--radius);
  background: var(--bg-panel); border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
/* Every image box on the site is LANDSCAPE 16/9, never portrait.
   A COVER fills it — `cover`, anchored to the TOP.
   This used to be `contain`, on the reasoning that the whole artwork should
   be visible. In practice covers are drawn taller than 16/9, so every one of
   them arrived as a strip of art floating in a wide grey letterbox — the
   frame read as broken rather than deliberate. Filling it crops the bottom
   instead, and `top` is what decides WHICH end is lost: a cover puts its
   title and its faces at the top, so that is the end worth keeping. */
.cover-frame img {
  aspect-ratio: 16/9; object-fit: cover; object-position: top center; width: 100%;
  border-radius: var(--radius-sm); background: var(--bg-elevated);
}
.cover-frame .placeholder {
  aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 40px; color: var(--gold);
  background: var(--bg-elevated); border-radius: var(--radius-sm);
}
.cover-frame--sm { max-width: 400px; }

.detail__issue { font-size: 12px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gold); }
.detail__title { font-family: var(--display); font-size: clamp(32px, 5vw, 58px); line-height: 1.05; margin: 10px 0 16px; color: var(--text); }
.detail__desc { font-size: 15.5px; line-height: 1.7; color: var(--text-dim); max-width: 60ch; }
.detail__ack {
  margin-top: 24px; padding: 18px 20px; border-radius: var(--radius);
  background: var(--bg-panel); border: 1px solid var(--border); border-left: 2px solid var(--saffron);
}
.detail__ack h3 { margin: 0 0 7px; font-size: 11.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--saffron); }
.detail__ack p { margin: 0; color: var(--muted); line-height: 1.65; font-size: 14px; }

/* ---- Arcs panel (comic page) -------------------------------------------- */
.arcs-panel { min-width: 0; }
.arcs-panel h3 { font-size: 17px; margin: 0 0 16px; color: var(--text); }
.arc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.arc-card {
  display: block; border-radius: var(--radius); overflow: hidden;
  background: var(--bg-panel); border: 1px solid var(--border);
  box-shadow: var(--shadow);
  transition: transform .18s, border-color .18s;
}
.arc-card:hover { transform: translateY(-2px); border-color: var(--gold); }
/* Fills and anchors to the top, like every other cover — see .cover-frame. */
.arc-card__img {
  aspect-ratio: 16/9; background-size: cover; background-repeat: no-repeat; background-position: top center;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 30px; color: rgba(255,255,255,.85);
  background-color: var(--bg-elevated);
}
.arc-card__meta { padding: 12px 13px 14px; }
.arc-card__num { font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--gold); }
.arc-card__meta h4 { margin: 5px 0 0; font-size: 14.5px; font-weight: 600; color: var(--text); line-height: 1.35; }

/* ---- Chapter index ------------------------------------------------------ */
.chapter-index { margin-top: 44px; }
.chapter-index__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.chapter-index__head h3 { margin: 0; font-size: 17px; color: var(--text); order: -1; }
.chapter-index h3 { font-size: 17px; margin: 0 0 16px; color: var(--text); }

.arc-filter {
  font-size: 13px; padding: 9px 12px; border-radius: var(--radius-sm);
  background: var(--bg-elevated); color: var(--text-dim);
  border: 1px solid var(--border); cursor: pointer;
}
.arc-filter:hover { color: var(--gold); }
.arc-filter:focus { outline: 2px solid var(--gold); outline-offset: -1px; }

.chapters { display: flex; flex-direction: column; gap: 10px; }
.chapter-row {
  display: flex; align-items: center; gap: 18px;
  padding: 15px 18px; border-radius: var(--radius);
  background: var(--bg-panel);
  border: 1px solid var(--border); border-left: 2px solid var(--gold);
  transition: transform .18s, background .18s, border-color .18s;
}
.chapter-row:hover { transform: translateX(2px); background: var(--bg-elevated); border-left-color: var(--saffron); }
.chapter-row .num { font-family: var(--display); font-size: 27px; color: var(--gold); min-width: 44px; text-align: center; line-height: 1; }
.chapter-row .meta { flex: 1; min-width: 0; }
.chapter-row .meta h4 { margin: 0 0 3px; font-size: 15.5px; font-weight: 600; color: var(--text); }
.chapter-row .meta span { font-size: 12.5px; color: var(--muted); }
.chapter-row .go { font-size: 12px; font-weight: 600; color: var(--gold); white-space: nowrap; text-decoration: none; }

/* The row holds two separate links (read / details), so the big clickable
   area is its own anchor rather than the row itself — anchors can't nest. */
.chapter-row__main { display: flex; align-items: center; gap: 18px; flex: 1; min-width: 0; text-decoration: none; }
.chapter-row__info {
  font-size: 12px; color: var(--muted); text-decoration: none; white-space: nowrap;
  padding: 5px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  transition: color .15s, border-color .15s;
}
.chapter-row__info:hover { color: var(--gold); border-color: var(--gold); }

/* ---- Footer -------------------------------------------------------------- */
.sitefoot {
  border-top: 1px solid var(--border); background: var(--bg-panel);
  padding: 30px 0; text-align: center; color: var(--muted); font-size: 13px;
}
.sitefoot .mark { font-family: var(--display); color: var(--gold); font-size: 20px; margin-bottom: 4px; }

/* ---- Narrow windows ------------------------------------------------------ */
@media (max-width: 900px) {
  .comic-hero, .detail__grid { grid-template-columns: 1fr; }
  .topnav { gap: 14px; font-size: 13px; }
}

/* =========================================================================
   LIBRARY / CHAPTER / PLACEHOLDER PAGES
   Shared by comics.html, chapter.html, library.html and the content-less
   placeholder pages. Tokens only — nothing re-declared from base.css.
   ========================================================================= */
.page-title { font-family: var(--display); font-size: clamp(30px, 4.5vw, 52px); color: var(--text); margin: 0 0 6px; }
.page-lead { color: var(--muted); max-width: 62ch; margin: 0 0 26px; line-height: 1.65; }

.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.crumbs a { color: var(--gold); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* A smaller button for card actions — .btn carries margin-top for prose
   layouts, which is wrong inside a card footer. */
.btn--sm { font-size: 12.5px; padding: 9px 16px; margin-top: 0; }

/* ---- Toolbar (filter / sort / view) ------------------------------------ */
.toolbar {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding: 14px 16px; margin-bottom: 24px;
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius);
}
.toolbar__group { display: flex; align-items: center; gap: 9px; }
.toolbar__group--end { margin-left: auto; }
.toolbar label, .toolbar__label {
  font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--muted); margin: 0;
}

.view-switch { display: flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.view-switch button {
  background: transparent; border: 0; color: var(--muted);
  padding: 7px 12px; font-size: 15px; line-height: 1; cursor: pointer;
  transition: background .15s, color .15s;
}
.view-switch button:hover { color: var(--text); background: var(--bg-elevated); }
.view-switch button.active { background: var(--gold); color: #1B1408; }

/* ---- Comic cards ------------------------------------------------------- */
.cx-grid { display: grid; gap: 20px; }
.cx-grid--grid    { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.cx-grid--compact { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.cx-grid--list    { grid-template-columns: 1fr; }

.cx-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius);
  transition: border-color .15s, transform .15s;
}
.cx-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.cx-card--gone { opacity: .6; }
.cx-card__media { display: block; text-decoration: none; }

/* Fills the card and anchors to the top — see .cover-frame for why, and the
   UI rules in AI_PROGRESS.md. Never portrait: the grid owns the shape. */
.cx-thumb {
  aspect-ratio: 16 / 9; width: 100%;
  background-color: var(--stage-bg);
  background-size: cover; background-repeat: no-repeat; background-position: top center;
  border-bottom: 1px solid var(--border);
}
.cx-thumb--empty {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 34px; color: var(--gold);
}

.cx-card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.cx-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.cx-card__head h3 { margin: 0; font-family: var(--head); font-size: 17px; color: var(--text); }
.cx-card__head h3 a { color: inherit; text-decoration: none; }
.cx-card__head h3 a:hover { color: var(--gold); }

.cx-meta { margin: 0; font-size: 12.5px; color: var(--muted); }
.cx-desc { margin: 0; font-size: 13.5px; color: var(--text-dim); line-height: 1.6; }

.cx-badge {
  flex: none; font-size: 10.5px; letter-spacing: .8px; text-transform: uppercase;
  padding: 4px 9px; border-radius: var(--radius-pill);
  background: var(--bg-elevated); color: var(--muted); border: 1px solid var(--border);
}
.cx-badge--reading { color: var(--saffron); border-color: var(--saffron); }
.cx-badge--done { color: var(--gold); border-color: var(--gold); }

.cx-progress { height: 5px; border-radius: var(--radius-pill); background: var(--bg-elevated); overflow: hidden; }
.cx-progress span { display: block; height: 100%; background: var(--gold); border-radius: var(--radius-pill); }
.cx-progress-label { font-size: 11.5px; color: var(--muted); }

.cx-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }

/* List view lays each card out sideways. */
.cx-grid--list .cx-card { flex-direction: row; }
.cx-grid--list .cx-card__media { flex: none; width: 260px; }
.cx-grid--list .cx-thumb { border-bottom: 0; border-right: 1px solid var(--border); }

/* Compact view drops the blurb. */
.cx-grid--compact .cx-desc { display: none; }

/* ---- Chapter detail facts --------------------------------------------- */
.facts { display: grid; gap: 12px; margin: 22px 0 0; }
.fact { display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-items: baseline; }
.fact dt { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); }
.fact dd { margin: 0; color: var(--text); font-size: 14px; display: flex; gap: 6px; flex-wrap: wrap; }

.chip {
  font-size: 11.5px; padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text);
}
.chip--muted { color: var(--muted); }

/* ---- Placeholder sections --------------------------------------------- */
.placeholder-panel {
  text-align: center; padding: clamp(36px, 7vh, 72px) 24px;
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius);
}
.placeholder-panel__glyph { font-family: var(--display); font-size: 40px; color: var(--gold); opacity: .7; margin-bottom: 10px; }
.placeholder-panel p { margin: 0 0 8px; color: var(--text); }
.placeholder-panel__note { color: var(--muted); font-size: 13.5px; max-width: 60ch; margin: 0 auto 6px; line-height: 1.6; }
.placeholder-panel .cx-actions { justify-content: center; margin-top: 18px; }

@media (max-width: 820px) {
  .cx-grid--list .cx-card { flex-direction: column; }
  .cx-grid--list .cx-card__media { width: 100%; }
  .cx-grid--list .cx-thumb { border-right: 0; border-bottom: 1px solid var(--border); }
  .fact { grid-template-columns: 1fr; gap: 4px; }
}

/* =========================================================================
   PHONE LAYOUT
   These pages are no longer gated behind the landscape overlay (only the
   reader is), so portrait phones reach them for real and the layout has to
   hold up at ~360px.
   ========================================================================= */
@media (max-width: 600px) {
  .topbar { flex-wrap: wrap; gap: 10px; padding: 10px 14px; }
  .brand .sub { display: none; }
  .topnav { gap: 12px; font-size: 12.5px; flex-wrap: wrap; }

  /* Longhand, deliberately. `padding: 20px 0 56px` is shorthand, so it also
     set left and right to 0 — wiping out the side gutter .wrap provides and
     letting every heading, paragraph and card sit flush against both edges of
     the phone. Nothing overflowed, so no overflow check could see it. */
  .detail { padding-top: 20px; padding-bottom: 56px; }
  .page-title { font-size: 28px; }

  /* minmax(300px, …) overflows a 360px viewport once padding is taken out. */
  .cx-grid--grid,
  .cx-grid--compact { grid-template-columns: 1fr; }
  .cx-grid { gap: 14px; }

  /* The toolbar's three groups stack rather than squeezing onto one line. */
  .toolbar { gap: 12px; padding: 12px; }
  .toolbar__group { width: 100%; justify-content: space-between; }
  .toolbar__group--end { margin-left: 0; }
  .arc-filter { flex: 1; min-width: 0; }

  /* A chapter row on a phone: title on one line, actions beneath it. */
  .chapter-row { flex-wrap: wrap; gap: 10px; padding: 12px 14px; }
  .chapter-row__main { width: 100%; gap: 12px; }
  .chapter-row .num { font-size: 22px; min-width: 32px; }
  .chapter-row .go { margin-left: auto; }

  .arc-cards { grid-template-columns: 1fr 1fr; gap: 12px; }
  .cx-actions { gap: 8px; }
  .btn { padding: 11px 18px; }
}

@media (max-width: 380px) {
  .arc-cards { grid-template-columns: 1fr; }
}

/* =========================================================================
   SEARCH
   ========================================================================= */
.search-page-field {
  display: flex; align-items: center; gap: 10px; max-width: 640px;
  padding: 12px 16px; margin-bottom: 26px;
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius);
}
.search-page-field:focus-within { border-color: var(--gold); }
.search-page-field svg { width: 17px; height: 17px; color: var(--gold); flex: none; }
.search-page-field input {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: none;
  color: var(--text); font-family: var(--ui); font-size: 15px;
}
.search-page-field input::placeholder { color: var(--muted); }

.search-group { margin-bottom: 30px; }
.search-group__head {
  font-family: var(--ui); font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--muted); margin: 0 0 12px; display: flex; align-items: center; gap: 8px;
}
.search-group__head span {
  font-size: 11px; padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-dim);
}

.search-hit {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px;
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius);
  text-decoration: none; transition: border-color .15s, transform .15s;
}
.search-hit:hover { border-color: var(--gold); transform: translateX(2px); }
.search-hit__thumb { width: 92px; flex: none; border: 0; border-radius: var(--radius-sm); }
.search-hit__body { min-width: 0; }
.search-hit__body h3 { margin: 0 0 3px; font-size: 15px; font-weight: 600; color: var(--text); }
.search-hit__body p {
  margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.search-hit mark, .search-suggest mark { background: transparent; color: var(--gold); font-weight: 700; }

/* Suggestion panel under a header field. */
.search-suggest {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 80;
  max-height: 60vh; overflow-y: auto; padding: 6px;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.search-suggest__item {
  display: flex; align-items: baseline; gap: 10px; padding: 9px 10px;
  border-radius: var(--radius-sm); text-decoration: none;
}
.search-suggest__item:hover { background: var(--bg-elevated-2); }
.search-suggest__kind {
  flex: none; font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted); min-width: 52px;
}
.search-suggest__text { min-width: 0; }
.search-suggest__text b { display: block; font-size: 13.5px; font-weight: 600; color: var(--text); }
.search-suggest__text em { font-style: normal; font-size: 12px; color: var(--muted); }
.search-suggest__all {
  display: block; padding: 9px 10px; margin-top: 4px;
  border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--gold); text-decoration: none;
}
.search-suggest__empty { padding: 12px 10px; font-size: 13px; color: var(--muted); }

@media (max-width: 600px) {
  .search-hit__thumb { width: 64px; }
}

/* =========================================================================
   WRITTEN CONTENT (Lore, About, Terms, Privacy, Support, Explore)
   Long-form prose rendered from the database by js/content-page.js.
   ========================================================================= */
.content-hero {
  aspect-ratio: 16 / 9; width: 100%; max-width: 720px;
  margin: 0 0 26px; border-radius: var(--radius);
  background-color: var(--stage-bg); background-position: center;
  background-size: contain; background-repeat: no-repeat;
  border: 1px solid var(--border);
}

.prose { max-width: 68ch; color: var(--text-dim); font-size: 15.5px; line-height: 1.75; }
.prose h2 { font-family: var(--ui); font-size: 20px; font-weight: 700; color: var(--text); margin: 30px 0 10px; }
.prose h3 { font-family: var(--ui); font-size: 16.5px; font-weight: 700; color: var(--text); margin: 24px 0 8px; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose p { margin: 0 0 15px; }
.prose ul, .prose ol { margin: 0 0 15px; padding-left: 22px; }
.prose li { margin-bottom: 6px; }
.prose strong { color: var(--text); font-weight: 700; }
.prose a { color: var(--gold); }
.prose a:hover { text-decoration: underline; }

/* =========================================================================
   PREMIUM  (plans, checkout, subscription state)

   `.notice` and `.card` are declared here rather than in base.css because
   this is the first public page that needs them; move them down if a second
   one does, so there is still exactly one definition.
   ========================================================================= */
.notice {
  margin: 0 0 18px; padding: 13px 16px; font-size: 13.5px; line-height: 1.6;
  color: var(--text-dim); background: var(--bg-panel);
  border: 1px solid var(--border); border-left: 3px solid var(--border);
  border-radius: var(--radius-sm);
}
.notice b { color: var(--text); }
.notice--good { border-left-color: var(--gold); }
.notice--warn { border-left-color: #E2A03F; }
.notice--bad { border-left-color: #E5484D; color: #E5484D; }
.notice--bad b { color: #E5484D; }
.notice .btn { margin-left: 10px; }

.plan-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px; margin: 24px 0 8px;
}
.plan {
  position: relative; padding: 22px 20px 20px;
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--radius); display: flex; flex-direction: column;
}
.plan--pick { border-color: var(--gold); }
.plan__flag {
  position: absolute; top: -10px; left: 20px;
  font-size: 10px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--gold); color: #1B1408;
}
.plan h3 { margin: 0 0 6px; font-size: 15px; color: var(--text); }
.plan__price { font-family: var(--display); font-size: 30px; color: var(--gold); line-height: 1.1; }
.plan__price span { font-family: var(--ui); font-size: 12.5px; color: var(--muted); margin-left: 6px; }
.plan__blurb { flex: 1; margin: 10px 0 18px; font-size: 13.5px; color: var(--text-dim); line-height: 1.6; }
.plan__btn { width: 100%; margin: 0; }

.card {
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px; margin-bottom: 18px;
}
.checkout { max-width: 460px; }
.checkout h2 { margin: 0 0 14px; font-size: 16px; color: var(--gold); }
.checkout label {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.checkout input {
  width: 100%; padding: 11px 13px; margin-bottom: 6px;
  background: var(--bg); color: var(--text); font-family: var(--ui); font-size: 14px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.checkout input:focus { outline: none; border-color: var(--gold); }
.hint { font-size: 12px; color: var(--muted); line-height: 1.55; margin: 0 0 16px; }
.checkout__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.checkout__actions .btn { margin-top: 0; }

/* =========================================================================
   AUTHORS  —  the directory at /author and one author at /author/<name>
   ========================================================================= */

/* The empty state carries real weight here, because it is the state the
   page is in until the first writer is approved. Given room and centred,
   so it reads as a deliberate answer rather than a list that failed. */
.author-empty {
  margin: 48px auto; max-width: 46ch; text-align: center;
  padding: 40px 28px;
  border: 1px dashed var(--border); border-radius: var(--radius);
}
.author-empty__lead { margin: 0 0 10px; font-size: 18px; color: var(--text); }
.author-empty__note { margin: 0; font-size: 14px; line-height: 1.65; color: var(--text-dim); }

.author-grid {
  display: grid; gap: 14px; margin-top: 22px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.author-card {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px; text-decoration: none;
  background: var(--bg-panel);
  border: 1px solid var(--border); border-radius: var(--radius);
  transition: border-color .15s, transform .15s;
}
.author-card:hover { border-color: var(--gold); transform: translateY(-2px); }

/* Shared by the card and the header, so an author looks like themselves in
   both places. No avatar exists yet — nothing sets that column — so the
   fallback is the one that has to look deliberate. */
.author-card__face {
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  object-fit: cover; background: var(--bg-elevated);
}
.author-card__face--letter {
  display: flex; align-items: center; justify-content: center;
  font-size: 21px; font-weight: 600; color: var(--gold);
  border: 1px solid var(--border);
}
.author-card__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.author-card__name { font-size: 15.5px; font-weight: 600; color: var(--text); }
/* Two lines of biography and no more. A card is a way in, not the page. */
.author-card__bio {
  font-size: 13px; line-height: 1.55; color: var(--text-dim);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.author-card__kinds { font-size: 12px; color: var(--muted); }

.author-head { display: flex; gap: 20px; align-items: flex-start; margin: 18px 0 34px; }
.author-head .author-card__face { width: 84px; height: 84px; }
.author-head .author-card__face--letter { font-size: 34px; }
.author-head__text { min-width: 0; }
.author-head__bio { margin: 6px 0 4px; font-size: 14.5px; line-height: 1.65; color: var(--text-dim); max-width: 62ch; }
.author-head__kinds { margin: 0; font-size: 13px; color: var(--muted); }

.author-works { display: grid; gap: 12px; margin-top: 16px; }
.author-work {
  display: flex; gap: 14px; align-items: center;
  padding: 12px; text-decoration: none;
  background: var(--bg-panel);
  border: 1px solid var(--border); border-radius: var(--radius);
  transition: border-color .15s;
}
.author-work:hover { border-color: var(--gold); }
.author-work__cover {
  flex: none; width: 56px; height: 76px; border-radius: var(--radius-sm);
  background: var(--bg-elevated) center/cover no-repeat;
}
.author-work__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.author-work__title { font-size: 15px; font-weight: 600; color: var(--text); }
/* The kind, said plainly. A novel and a comic sit in the same list and the
   reader is about to open one of two very different things. */
.author-work__kind {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--gold);
}
.author-work__desc {
  font-size: 13px; color: var(--text-dim); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

@media (max-width: 640px) {
  .author-head { gap: 14px; }
  .author-head .author-card__face { width: 60px; height: 60px; }
  .author-head .author-card__face--letter { font-size: 24px; }
}


/* ---- Lore, on a work's own page ----------------------------------------
   Present only when the author wrote some, so it never appears as an empty
   heading. Given reading measure rather than layout measure: it is prose,
   and the rest of this page is cards. */
.lore {
  margin: 48px 0 8px; padding-top: 32px;
  border-top: 1px solid var(--border);
}
.lore__head {
  margin: 0 0 18px; font-size: 22px; letter-spacing: .01em;
}
.prose-body {
  max-width: 68ch;
  font-family: Literata, Georgia, serif;
  font-size: 16px; line-height: 1.75;
  color: color-mix(in srgb, var(--text) 92%, var(--bg));
}
.prose-body p { margin: 0 0 1.25em; }
.prose-body h2 { font-size: 1.3em; margin: 1.5em 0 .5em; }
.prose-body h3 { font-size: 1.1em; margin: 1.4em 0 .5em; }
.prose-body blockquote {
  margin: 1.3em 0; padding: 2px 0 2px 16px;
  border-left: 3px solid var(--border); color: var(--text-dim); font-style: italic;
}
.prose-body ul, .prose-body ol { margin: 0 0 1.25em; padding-left: 1.6em; }
.prose-body li { margin-bottom: .35em; }
.prose-body hr { border: none; border-top: 1px solid var(--border); margin: 2em auto; width: 40%; }
.prose-body figure { margin: 1.6em 0; }
.prose-body img { max-width: 100%; height: auto; border-radius: var(--radius-sm); display: block; }
.prose-body figcaption { margin-top: 8px; font-size: .82em; color: var(--text-dim); font-style: italic; }