/* The Ark — royalty: GOLD AND BLACK WITH WHITE TRIMMING (his word,
   2026-11-13 19:47 EST, corrected 23:12 EST: "it's supposed to be gold
   with black and white trimming"). GOLD IS THE GROUND — the field of
   the whole app. Black and white are the TRIMMING: black carries the
   text and the edges, white trims the lines. Nothing sits black-
   dominant, and white never carries body text on the gold. */
:root {
  color-scheme: light;
  --ground: #d4af37;
  --ground-deep: #b8912c;
  --panel: rgb(240 205 106 / 0.55);
  --panel-line: #000000;
  --gold: #d4af37;
  --gold-bright: #f0cd6a;
  --gold-deep: #8a6d1c;
  --ink: #000000;
  --ink-dim: #2e2408;
  --trim: #ffffff;
  --radius: 14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  background:
    radial-gradient(1200px 600px at 50% -10%, #f0cd6a 0%, var(--ground) 55%, var(--ground-deep) 100%);
  color: var(--ink);
  min-height: 100vh;
  /* The gate's face breaks out to the full viewport width (100vw);
     this keeps the desktop scrollbar's width from opening a
     horizontal scroll on that one view. */
  overflow-x: hidden;
}

/* The header stands on the same gold ground as the page — gold is
   the field everywhere, the header included (his ruling, pressed
   home 2026-11-14: a solid black band still acts as a field). Black
   and white appear here only as trimming: the bottom rule is a
   black line with a thin white line beneath it. */
.brand-lockup {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0.9rem 1.1rem;
  background: linear-gradient(180deg, var(--gold-bright), var(--ground));
  border-bottom: 2px solid #000000;
  box-shadow: 0 2px 0 0 var(--trim);
}
.brand-icon { border-radius: 8px; }
.brand-name { margin: 0; font-size: 1.15rem; color: var(--ink); letter-spacing: 0.02em; }
.brand-tag { margin: 0.1rem 0 0; font-size: 0.85rem; color: var(--ink-dim); font-style: italic; }

main { max-width: 880px; margin: 0 auto; padding: 1.2rem 1.1rem 2.5rem; }

h1 { font-size: 1.7rem; color: var(--ink); margin: 0.4rem 0 0.8rem; }
h2 { font-size: 1.2rem; color: var(--ink); margin: 1.4rem 0 0.6rem; }
p { line-height: 1.55; }
.lede { font-size: 1.05rem; }
.note { color: var(--ink-dim); font-style: italic; }
.message { color: var(--ink); font-weight: bold; min-height: 1.4em; }

.card {
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-top: 3px solid var(--trim);
  border-radius: var(--radius);
  padding: 1.3rem 1.3rem 1.5rem;
  margin-top: 1rem;
}

.price { font-size: 1.5rem; font-weight: bold; color: var(--ink); margin: 1rem 0 0.2rem; }
.price-note { color: var(--ink-dim); margin: 0.2rem 0 0.8rem; }
.door-closed {
  border: 1px dashed var(--panel-line);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  color: var(--ink);
}
.rule {
  border: none;
  border-top: 1px solid #000000;
  box-shadow: 0 1px 0 0 var(--trim);
  margin: 1.6rem 0;
}

.field-label { display: block; margin: 0.9rem 0 0.35rem; color: var(--ink-dim); font-size: 0.95rem; }
input[type='email'], input[type='search'], select {
  width: 100%;
  padding: 0.7rem 0.8rem;
  border-radius: 10px;
  border: 1px solid var(--panel-line);
  background: var(--trim);
  color: var(--ink);
  font: inherit;
  margin-bottom: 0.7rem;
}

button, .as-button {
  font: inherit;
  cursor: pointer;
  border-radius: 10px;
  border: 1px solid var(--panel-line);
  padding: 0.65rem 1.1rem;
  background: var(--ground-deep);
  color: var(--ink);
  text-decoration: none;
  display: inline-block;
}
button.primary, .as-button.primary {
  background: #000000;
  color: var(--gold-bright);
  font-weight: bold;
  border-color: #000000;
  box-shadow: inset 0 0 0 1px var(--trim);
}
button.ghost { background: transparent; color: var(--ink); border-color: #000000; }
button:disabled { opacity: 0.4; cursor: default; }

.listen-bar {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #000000;
  border: 1px solid var(--trim);
  color: var(--gold-bright);
  padding: 0.45rem 0.9rem;
  margin: 0.4rem 0 0.8rem;
}
.listen-bar.is-speaking { background: var(--trim); border-color: #000000; color: var(--ink); }
.listen-bar.is-unavailable { background: rgb(0 0 0 / 0.45); border-color: #000000; color: var(--trim); font-style: italic; }

/* The reading view's one Listen bar rides the bottom of the screen —
   fixed, always within thumb's reach while the chapter scrolls, and
   the only bar that view shows (the footer's bar steps aside there). */
.listen-slot-fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  justify-content: center;
  background: #000000;
  border-top: 2px solid var(--trim);
  padding: 0.45rem 0.6rem calc(0.45rem + env(safe-area-inset-bottom));
}
.listen-slot-fixed .listen-bar { margin: 0; }
#view-chapter { padding-bottom: 4.5rem; }

.shelf-note { color: var(--ink-dim); }
.voice-row { display: block; margin: 1rem 0 0.4rem; color: var(--ink-dim); }
.voice-row select { margin-top: 0.35rem; }
.shelf-group { margin-top: 1.8rem; }
.shelf-card {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  width: 100%;
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-left: 3px solid #000000;
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin: 0.55rem 0;
}
.shelf-card-body { display: block; flex: 1 1 auto; min-width: 0; }
.shelf-card-top { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.shelf-title { font-size: 1.12rem; color: var(--ink); }
.badges { display: flex; gap: 0.35rem; flex-wrap: wrap; justify-content: flex-end; }
.badge {
  background: #000000;
  color: var(--gold-bright);
  font-size: 0.75rem;
  font-weight: bold;
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  white-space: nowrap;
}
.shelf-meta { display: block; color: var(--ink-dim); margin-top: 0.3rem; font-size: 0.92rem; }
.shelf-progress { display: block; color: var(--ink); margin-top: 0.25rem; font-size: 0.9rem; }
.shelf-foot { margin-top: 2rem; }

/* The supplied gate art (his own artwork, used as given): set in a
   black trim panel on the gold field — a black frame carrying a
   white inset line — so the golden doorway reads as a doorway. One
   web copy stands in three places: the FACE of the front gate (the
   art consumes the whole gate page, below), the banner over the
   Digital Ark shelf group, and the header of the four Golden
   Covenant Record volumes. The banner and header panels are frames,
   never fields: the gold ground still rules the page around them. */
.ark-art {
  margin: 0;
  background: #000000;
  border: 2px solid #000000;
  box-shadow: inset 0 0 0 2px var(--trim);
  border-radius: var(--radius);
  padding: 0.55rem;
}
.ark-art img { display: block; width: 100%; height: auto; border-radius: 6px; }
.shelf-art { max-width: 560px; margin: 0.4rem 0 1rem; }
#record-art .ark-art { max-width: 460px; margin: 0.2rem 0 1rem; }

/* The gate's FACE (his word, 2026-11-14: what was done with the
   Wheels face — the art consumes the whole page). The figure breaks
   out of the reading column to the viewport's full width, edge to
   edge, and stands tall — the art is portrait, and the phone is the
   primary canvas: at phone width the whole doorway shows; only on
   wide screens does the height cap crop it, from the lower third.
   The black trim panel at the art's base carries the app's name and
   brand line in gold lettering; the sign-in door stands in the card
   directly under the face. */
.gate-face {
  position: relative;
  width: 100vw;
  margin: -1.2rem 0 0 calc(50% - 50vw);
  border-left: none;
  border-right: none;
  border-radius: 0;
}
.gate-face img {
  width: 100%;
  height: auto;
  max-height: 86vh;
  object-fit: cover;
  object-position: 50% 35%;
  border-radius: 0;
}
.gate-face-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000000;
  border-top: 2px solid var(--trim);
  text-align: center;
  padding: 0.85rem 1rem 1rem;
}
.gate-face-panel h1 {
  color: var(--gold-bright);
  font-size: 2.1rem;
  letter-spacing: 0.03em;
  margin: 0;
}
.gate-face-tag {
  color: var(--gold);
  font-style: italic;
  margin: 0.25rem 0 0;
}

/* A face beside every record's title (his word, 2026-11-14). Where
   the house holds real artwork, the record wears it — on the shelf
   as a small thumb beside the title, at the head of its page
   larger. Where it does not, the app renders its HOUSE TILE: gold
   field, black frame with a white inset line, the title's initials
   in black serif capitals — a designed tile, never a fake cover. */
.record-face { margin: 0; flex: none; }
.record-face img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #000000;
  border-radius: 6px;
}
.face-shelf { width: 48px; }
.face-page { max-width: 200px; margin: 0.2rem 0 1rem; }
.house-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  background: linear-gradient(180deg, var(--gold-bright), var(--ground));
  border: 2px solid #000000;
  box-shadow: inset 0 0 0 2px var(--trim);
  border-radius: 8px;
  color: #000000;
  font-weight: bold;
  letter-spacing: 0.08em;
}
.house-tile.face-shelf { width: 48px; height: 64px; font-size: 0.95rem; }
.house-tile.face-page { width: 150px; height: 200px; font-size: 2rem; margin: 0.2rem 0 1rem; }

.audio-card audio { width: 100%; margin-top: 0.6rem; }

.chapter-row {
  display: block;
  width: 100%;
  text-align: left;
  background: rgb(184 145 44 / 0.35);
  border: 1px solid #000000;
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  margin: 0.4rem 0;
}
.chapter-row-title { display: block; color: var(--ink); }
/* The locked door's drawn mark (app.mjs lockMark): black padlock,
   white-trim keyhole, sized to the title line it stands in. */
.lock-mark { width: 0.95em; height: 0.95em; vertical-align: -0.1em; margin-right: 0.4em; }
.chapter-row-meta { display: block; color: var(--ink-dim); font-size: 0.85rem; margin-top: 0.2rem; }
.chapter-row-meta.taste-invite { color: var(--ink); font-weight: bold; font-size: 0.95rem; }

.reading { font-size: 1.13rem; line-height: 1.75; max-width: 42em; }
.reading p { margin: 0 0 1.1em; }
.chapter-nav { display: flex; justify-content: space-between; margin-top: 2rem; }
.back { margin-bottom: 0.6rem; }

.app-footer {
  border-top: 1px solid #000000;
  padding: 1rem 1.1rem 2rem;
  color: var(--ink-dim);
  font-size: 0.9rem;
  max-width: 880px;
  margin: 0 auto;
}

.door-note {
  border: 1px dashed var(--panel-line);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
  color: var(--ink);
  background: rgb(0 0 0 / 0.08);
}
.download-card .as-button { margin: 0.3rem 0.4rem 0.3rem 0; }

/* The branding scripture (his ruling, 2026-11-14): Matthew 13:52 in
   full — the largest scripture treatment on the shelf and on the
   Sealing page. Black band, gold lettering, white inset ring: the
   house door form. */
.brand-verse {
  background: #000000;
  color: #f5eeda;
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 2px #ffffff, inset 0 0 0 4px #000000, inset 0 0 0 5px var(--gold);
  padding: 1.5rem 1.4rem 1.2rem;
  margin: 1rem 0;
  text-align: center;
}
.brand-verse-cite {
  margin: 0 0 0.6rem;
  color: var(--gold-bright);
  font-size: 1.05rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.brand-verse-text {
  margin: 0 auto 0.7rem;
  max-width: 44rem;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.35rem, 3.2vw, 1.9rem);
  line-height: 1.5;
}
.brand-verse-note {
  margin: 0;
  color: var(--gold);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.brand-verse .listen-slot { margin-top: 0.8rem; }

/* The Sealing door on the shelf's front. */
.sealing-door {
  display: block;
  width: 100%;
  margin: 0.4rem 0 1rem;
  padding: 0.95rem 1.1rem;
  background: #000000;
  color: var(--gold-bright);
  border: 1px solid var(--gold-deep);
  border-radius: var(--radius);
  font-size: 1.02rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-align: center;
}
.sealing-door:hover { border-color: var(--gold-bright); }

/* The Sealing page. */
.sealing-title { text-align: center; letter-spacing: 0.06em; margin-bottom: 0.3rem; }
.sealing-strap { text-align: center; color: var(--ink-dim); letter-spacing: 0.18em; font-size: 0.85rem; margin: 0 0 0.6rem; }
.sealing-intro { text-align: center; font-style: italic; }
.sealing-part h2 { border-bottom: 2px solid var(--gold-deep); padding-bottom: 0.25rem; letter-spacing: 0.12em; }
.sealing-cite { margin: 1.1rem 0 0.35rem; font-size: 1.05rem; }
.sealing-text { font-family: Georgia, 'Times New Roman', serif; font-size: 1.12rem; line-height: 1.65; margin: 0 0 0.5rem; }
.sealing-center {
  text-align: center;
  font-size: 1.25rem;
  letter-spacing: 0.1em;
  margin: 2rem 0 1.2rem;
  color: var(--ink);
}
.sealing-pillars p { margin: 0.35rem 0; font-size: 1.05rem; }
.sealing-closing { font-family: Georgia, 'Times New Roman', serif; font-size: 1.12rem; line-height: 1.65; margin-top: 1.4rem; }
.sealing-publisher { text-align: center; color: var(--ink-dim); margin-top: 1.6rem; letter-spacing: 0.05em; }

/* The Covenant Deck (his ruling, 2026-11-14): the deck stands on
   the shelf and opens card by card, front and back. */
.deck-face { width: 48px; height: 64px; object-fit: cover; border-radius: 4px; flex: none; }
.deck-position { color: var(--ink-dim); letter-spacing: 0.08em; margin: 0.4rem 0 0.8rem; }
.deck-card-face {
  background: #000000;
  color: #f5eeda;
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 2px #ffffff, inset 0 0 0 4px #000000, inset 0 0 0 5px var(--gold);
  padding: 1.3rem 1.3rem 1rem;
  margin: 0.9rem 0;
}
.deck-card-face h2 { color: var(--gold-bright); margin: 0 0 0.4rem; font-size: 1.35rem; }
.deck-side-label {
  margin: 0.2rem 0 0.5rem;
  color: var(--gold);
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.deck-card-img { display: block; width: 100%; height: auto; border: 1px solid var(--gold-deep); border-radius: 6px; margin: 0 0 0.9rem; background: #000000; }
.deck-text { font-family: Georgia, 'Times New Roman', serif; font-size: 1.08rem; line-height: 1.65; margin: 0 0 0.6rem; white-space: pre-wrap; }
.deck-doors { margin-top: 2rem; }
.deck-door-button {
  display: block;
  text-align: center;
  margin: 0.5rem 0 1.1rem;
  padding: 0.95rem 1.1rem;
  background: #000000;
  color: var(--gold-bright);
  border: 1px solid var(--gold-deep);
  border-radius: var(--radius);
  font-size: 1.02rem;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.deck-door-button:hover { border-color: var(--gold-bright); }