/* Royal theme for Apostle Charles Mutuku Books (approved design board, 14 Oct 2026).
   Loads after app.css and only overrides: the template's file stays as it is, so this layer can be
   ported or removed on its own. Covenant teal and gold leaf from the covers, parchment for reading,
   wax seals for milestones, gilt hairlines instead of boxes.
   Night Teal #0d1f20 · Covenant Teal #1b3334 · Gold Leaf #c9a227 · Parchment #f3ead6 · Linen #f2f3ee · Seal Red #8f2d2a */

/* ================================================================== tokens */
:root {
  --paper-l: #f2f3ee;   --paper-d: #0d1f20;
  --surface-l: #fbfbf7; --surface-d: #13292a;
  --raised-l: #ffffff;  --raised-d: #1b3334;
  --sunken-l: #e9ece4;  --sunken-d: #0a1819;
  --ink-l: #1a2526;     --ink-d: #e8ebe3;
  --ink2-l: #33403f;    --ink2-d: #cfd8d1;
  --muted-l: #56625f;   --muted-d: #a9b8b4;
  --line-l: #d9ded5;    --line-d: #2c4646;
  --line2-l: #c4ccc3;   --line2-d: #3a5757;
  --control-l: #7d8a86; --control-d: #5d7774;
  --brand-l: #1b3334;   --brand-d: #c9a227;
  --on-brand-l: #ffffff; --on-brand-d: #0d1f20;
  --gold-l: #8a6a10;    --gold-d: #e6cf7f;
  --gold-deco-l: #c9a227; --gold-deco-d: #c9a227;
  --wash-l: #e6e9e0;    --wash-d: #1b3334;
  --seal: #8f2d2a;
  --parchment: #f3ead6;
  --night: #0d1f20;
  --teal: #1b3334;
  --teal-mid: #13292a;
  --gilt: #c9a227;
  --gilt-ink: #e6cf7f;
  --shadow-sm-l: 0 1px 2px rgba(13, 31, 32, .06), 0 2px 6px rgba(13, 31, 32, .05);
  --shadow-l: 0 1px 2px rgba(13, 31, 32, .05), 0 10px 28px rgba(13, 31, 32, .10);
  --shadow-lg-l: 0 2px 6px rgba(13, 31, 32, .07), 0 24px 56px rgba(13, 31, 32, .18);

  --display: "Marcellus", "Trajan Pro", Georgia, serif;
  --caps: "Marcellus SC", "Marcellus", Georgia, serif;
  --read: "EB Garamond", "Iowan Old Style", Georgia, serif;
  --sans: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 4px;
  --radius-sm: 3px;
  --radius-lg: 6px;
}

/* ================================================================== base type */
h1, h2, h3, h4 { font-family: var(--display); letter-spacing: .01em; }
.eyebrow { font-family: var(--caps); font-weight: 400; font-size: .86rem; letter-spacing: .2em; color: var(--gold); }
.lede, .prose, .pullquote, .section-head p, .book-sub, .pcard-sub, .card p, .author-card .lede, .band p, .quote blockquote {
  font-family: var(--read);
}
.lede { font-size: clamp(1.15rem, 1.05rem + .45vw, 1.4rem); line-height: 1.55; }
.prose p, .prose li { font-size: 1.16rem; line-height: 1.7; }
.section-head p { font-size: 1.12rem; }
.price { font-family: var(--sans); font-weight: 600; letter-spacing: 0; }

/* ================================================================== app bar: always night teal */
.appbar { background: var(--night); border-bottom: 1px solid #2c4646; -webkit-backdrop-filter: none; backdrop-filter: none; color: #e8ebe3; }
.appbar::before { background: var(--night); }
.brandmark, .appbar .brandmark { color: #e8ebe3; }
/* The ACM seal (brand/ kit), drawn from one SVG as a mask so each place can colour it:
   gold on the night-teal bars, covenant teal on light pages (gold again in dark mode, through --brand). */
.brandmark-logo { width: 42px; height: 42px; border-radius: 0; background: var(--brand);
  -webkit-mask: url("../img/acm-mark.svg") center / contain no-repeat; mask: url("../img/acm-mark.svg") center / contain no-repeat; }
.appbar .brandmark-logo, .colophon .brandmark-logo { background: var(--gilt); }
.colophon .brandmark-icon.brandmark-logo { background: var(--gilt); }
.monogram.monogram-seal { width: 150px; height: 150px; border: 0; box-shadow: none; border-radius: 0; background: var(--brand);
  -webkit-mask: url("../img/acm-seal.svg") center / contain no-repeat; mask: url("../img/acm-seal.svg") center / contain no-repeat; }
.brandmark-name { font-family: var(--caps); font-size: 1.04rem; letter-spacing: .12em; }
.brandmark-tag { font-family: var(--sans); font-size: .66rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: #a9b8b4; }
.appbar-title { color: #e8ebe3; }
.topnav a { color: #d6ddd7; border-radius: 0; font-family: var(--sans); font-weight: 500; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; padding: 8px 12px; border-bottom: 1px solid transparent; }
.topnav a:hover { background: transparent; color: #fff; border-bottom-color: rgba(201, 162, 39, .5); }
.topnav a[aria-current="page"] { background: transparent; color: var(--gilt-ink); border-bottom-color: var(--gilt); }
.appbar .icon-btn { color: #e8ebe3; }
.appbar .icon-btn:hover { background: rgba(255, 255, 255, .07); }
.appbar .icon-btn .dot-count { background: var(--gilt); color: var(--night); border-color: var(--night); }
.appbar .avatar-btn { background: var(--gilt); color: var(--night); }

@media (max-width: 899px) {
  .tabbar { background: var(--night); border-top: 1px solid #2c4646; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .tabbar a { color: #a9b8b4; font-family: var(--sans); font-weight: 500; letter-spacing: .04em; }
  .tabbar a[aria-current="page"] { color: var(--gilt-ink); }
  .tabbar a[aria-current="page"] .tab-ico { background: rgba(201, 162, 39, .16); }
  .tabbar .dot-count { background: var(--gilt); color: var(--night); border-color: var(--night); }
}

/* ================================================================== buttons and controls */
.btn { border-radius: 2px; font-family: var(--sans); font-weight: 600; font-size: .86rem; letter-spacing: .12em; text-transform: uppercase; }
.btn-sm { font-size: .76rem; letter-spacing: .1em; }
.btn-lg { font-size: .92rem; }
.btn-primary { background: var(--brand); }
.btn-accent, .btn-gilt { background: var(--gilt); color: var(--night); border-color: var(--gilt); }
.btn-accent:hover, .btn-gilt:hover { background: #d8b545; }
.btn-gilt-outline { background: transparent; border-color: var(--gilt); color: var(--gilt-ink); }
.btn-gilt-outline:hover { background: rgba(201, 162, 39, .1); }
.btn-quiet { background: transparent; border-color: currentColor; }
.chip { border-radius: 2px; font-family: var(--sans); font-weight: 500; letter-spacing: .04em; }
.segmented { border-radius: 4px; }
.segmented label { border-radius: 3px; }
.qty, .qty button { border-radius: 2px; }
.badge { border-radius: 2px; font-family: var(--sans); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; font-size: .66rem; }
.badge-book { background: var(--gilt); color: var(--night); }
.link-more { font-family: var(--sans); font-weight: 500; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.book-world .link-more { color: var(--gold); }

/* gilt hairline used between parts of a page */
.gilt-rule { height: 1px; border: 0; margin: 0; background: linear-gradient(90deg, transparent, var(--gilt) 14%, var(--gilt) 86%, transparent); opacity: .6; }

/* ================================================================== home: the royal hero */
.royal-hero { position: relative; overflow: hidden; background: var(--teal-mid); color: #e8ebe3; }
.royal-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(700px 420px at 78% 30%, rgba(201, 162, 39, .12), transparent 70%); }
.royal-hero-inner { position: relative; max-width: var(--wrap); margin-inline: auto; padding: clamp(36px, 7vw, 84px) var(--gutter) clamp(44px, 7vw, 92px);
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
.royal-hero h1 { color: #e8ebe3; font-size: clamp(2.3rem, 1.4rem + 3.6vw, 4rem); line-height: 1.04; margin-bottom: 18px; }
.royal-hero h1 em { font-style: normal; color: var(--gilt-ink); }
.royal-hero .eyebrow { color: var(--gilt-ink); }
.royal-hero .lede { color: #cfd8d1; margin-bottom: 26px; }
.royal-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.royal-arch { position: relative; width: min(100%, 460px); height: clamp(300px, 34vw, 440px); margin-inline: auto; }
.royal-arch::before, .royal-arch::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); border: 1px solid var(--gilt); border-bottom: 0; }
.royal-arch::before { top: 0; width: 78%; height: 98%; border-radius: 999px 999px 0 0; opacity: .7; }
.royal-arch::after { top: 3.4%; width: 72%; height: 94.6%; border-radius: 999px 999px 0 0; opacity: .3; }
.royal-arch .arch-floor { position: absolute; left: 9%; right: 9%; bottom: 0; height: 2px; background: var(--gilt); }
.royal-arch .cover { position: absolute; z-index: 2; }
.royal-arch .cover img { box-shadow: 0 22px 48px rgba(0, 0, 0, .5); }
.royal-arch .arch-left { width: 37%; left: 5%; bottom: 12%; transform: rotate(-8deg); }
.royal-arch .arch-right { width: 37%; right: 5%; bottom: 12%; transform: rotate(8deg); }
.royal-arch .arch-centre { width: 44%; left: 28%; bottom: 8%; z-index: 3; }
.royal-arch .arch-centre img { outline: 1px solid var(--gilt); outline-offset: 6px; }
@media (max-width: 760px) {
  .royal-hero-inner { grid-template-columns: minmax(0, 1fr); }
  .royal-arch { order: -1; height: 280px; max-width: 340px; }
}

/* ================================================================== trust strip */
.trust { border-bottom: 1px solid var(--line); }
.trust .ti { border-radius: 50%; background: transparent; border: 1px solid var(--gilt); }
.trust .icon { color: var(--gold); }
.trust strong { font-family: var(--sans); font-weight: 600; }

/* ================================================================== the shelf: covers standing on a gilt line */
.products { gap: clamp(26px, 4vw, 44px) clamp(18px, 3vw, 32px); }
.pcard { background: transparent; border: 0; border-radius: 0; overflow: visible; }
.pcard:hover { border-color: transparent; }
.pcard-art { background: transparent; height: 300px; padding: 10px 8px 0; border-bottom: 1px solid var(--gilt); }
.pcard-art::before { display: none; }
.pcard-art .cover img { box-shadow: 0 10px 24px rgba(13, 31, 32, .22); transition: transform .25s var(--ease); }
.pcard:hover .pcard-art .cover img { transform: translateY(-4px); }
.pcard-body { padding: 16px 2px 4px; }
.pcard-body h3 { font-size: 1.3rem; line-height: 1.2; }
.pcard-sub { font-size: 1.02rem; }
.pcard .badge { top: 10px; left: 0; }
.pcard-fav { top: 4px; right: 0; border-radius: 50%; }

/* ================================================================== challenge and insight panels */
.royal-pair { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 32px); }
@media (max-width: 860px) { .royal-pair { grid-template-columns: minmax(0, 1fr); } }
.royal-panel { background: var(--teal); color: #e8ebe3; padding: clamp(26px, 4vw, 44px); display: flex; flex-wrap: wrap; gap: clamp(18px, 3vw, 32px); align-items: center; }
.royal-panel h2, .royal-panel h3 { color: #e8ebe3; }
.royal-panel .eyebrow { color: var(--gilt-ink); }
.royal-panel p { font-family: var(--read); font-size: 1.16rem; line-height: 1.55; color: #cfd8d1; margin: 0; }
.royal-panel .lamp { flex: none; width: 110px; height: auto; }
.royal-panel > div { flex: 1 1 260px; min-width: 0; display: grid; gap: 12px; }
.insight { border: 1px solid var(--gilt); background: var(--surface); padding: clamp(24px, 4vw, 40px); display: flex; flex-direction: column; gap: 14px; }
.insight .eyebrow { margin: 0; }
.insight blockquote { margin: 0; font-family: var(--read); font-style: italic; font-size: clamp(1.35rem, 1.15rem + .6vw, 1.7rem); line-height: 1.35; color: var(--ink); }
.insight blockquote::before { content: "\201C"; display: block; font-family: var(--display); font-style: normal; font-size: 3rem; line-height: .6; color: var(--gilt); margin-bottom: 8px; }
.insight cite { font-style: normal; font-family: var(--sans); font-size: .86rem; color: var(--muted); }
.insight .link-more { margin-top: auto; }

/* ================================================================== book page: the top in teal and gold */
.book-top {
  --paper: #13292a; --surface: #1b3334; --raised: #1b3334; --sunken: #0d1f20;
  --ink: #e8ebe3; --ink2: #cfd8d1; --muted: #a9b8b4; --line: #2c4646; --line2: #3a5757; --control: #5d7774;
  --brand: #c9a227; --on-brand: #0d1f20; --gold: #e6cf7f; --wash: #1b3334;
  --book: #e6cf7f; --book2: #c9a227; --on-book: #0d1f20; --book-tint: #1b3334;
  background: var(--teal-mid); color: var(--ink); padding-bottom: clamp(36px, 6vw, 64px);
}
.book-top .crumbs, .book-top .crumbs a { color: #a9b8b4; }
.book-top .btn-book, .book-top .btn-primary { background: var(--gilt); color: var(--night); box-shadow: none; }
.book-top .btn-book:hover, .book-top .btn-primary:hover { background: #d8b545; }
.book-top .btn-quiet, .book-top .btn-soft { background: transparent; border-color: var(--gilt); color: var(--gilt-ink); }
.book-top .gallery-main { background: transparent; border-color: transparent; }
.book-top .gallery-main .cover img { outline: 1px solid var(--gilt); outline-offset: 7px; box-shadow: 0 24px 56px rgba(0, 0, 0, .5); }
.book-top .buybox { background: transparent; border-color: #2c4646; box-shadow: none; }
.book-top .segmented { background: #0d1f20; }
.book-top .segmented label:has(input:checked) { background: #1b3334; outline-color: var(--gilt); box-shadow: none; }
.book-top .badge-success { background: rgba(111, 179, 138, .16); color: #8fd1a8; }
.book-info h1 { font-size: clamp(2.2rem, 1.4rem + 3vw, 3.8rem); line-height: 1.02; }
.book-tagline { font-family: var(--caps); font-style: normal; font-size: .86rem; letter-spacing: .2em; color: var(--gilt-ink); }
.book-sub { font-style: italic; font-size: 1.3rem; }
.book-tabs { background: var(--paper); }
.book-tabs a { font-family: var(--sans); font-weight: 500; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }
.book-tabs a[aria-current="true"] { border-bottom-color: var(--gilt); }
.pullquote { border-radius: 0; background: transparent; border-left: 2px solid var(--gilt); padding: 6px 0 6px 22px; font-size: 1.45rem; }
.outline details { border-radius: 2px; }
.part-no { border-radius: 50%; background: transparent; border: 1px solid var(--gilt); color: var(--gold); }
.ticks li::before { border-radius: 0; transform: rotate(45deg); width: 7px; height: 7px; background: var(--gilt); }
.promise li::before { border-radius: 50%; }
.sticky-buy { border-radius: 4px; }
.cover img { border-radius: 1px 3px 3px 1px; }
.cover::after { border-radius: 1px 0 0 1px; }

/* ================================================================== generic blocks */
.card, .author-card, .quote, .fbt, .tool, .ways > div, .thread-card { border-radius: 4px; }
.band { border-radius: 0; background: var(--teal); color: #e8ebe3; }
.band::after { border-color: rgba(201, 162, 39, .28); border-width: 1px; width: 300px; height: 300px; right: -90px; top: -90px; box-shadow: 0 0 0 18px rgba(201, 162, 39, .06); }
.band h2 { color: #e8ebe3; }
.band .btn { background: var(--gilt); color: var(--night); }
.band .btn:hover { background: #d8b545; }
.monogram { background: transparent; border: 1px solid var(--gilt); color: var(--gold); font-family: var(--display); letter-spacing: .06em;
  box-shadow: inset 0 0 0 6px var(--paper), inset 0 0 0 7px var(--gilt); }
.portrait { border-radius: 4px; }
.facts > div { border-radius: 0; background: transparent; border-top: 2px solid var(--gilt); padding: 10px 0 0; }
.facts strong { font-family: var(--display); font-weight: 400; font-size: 1.4rem; }
.hero { background: var(--teal-mid); color: #e8ebe3; }
.hero h1, .hero h2 { color: #e8ebe3; }
.hero .lede, .hero p { color: #cfd8d1; }
.hero .eyebrow { color: var(--gilt-ink); }
.hero::before { background: radial-gradient(800px 380px at 88% 12%, rgba(201, 162, 39, .14), transparent 65%); }
.hero .btn-quiet { color: var(--gilt-ink); border-color: var(--gilt); }
.parts li::before { border-radius: 50%; background: transparent; border: 1px solid var(--gilt); font-family: var(--display); font-weight: 400; }
.initials { background: transparent; border: 1px solid var(--gilt); color: var(--gold); }
.toast { border-radius: 4px; }

/* ================================================================== footer */
.colophon { background: var(--night); color: #cfd8d1; }
:root[data-scheme="dark"] .colophon { background: #081415; }
@media (prefers-color-scheme: dark) { :root:not([data-scheme="light"]) .colophon { background: #081415; } }
.colophon a { color: #e8ebe3; }
.colophon .brandmark-icon:not(.brandmark-logo) { background: transparent; color: var(--gilt-ink); }
.colophon .brandmark-tag { color: #a9b8b4; }
.colophon p { color: #a9b8b4; font-family: var(--read); font-size: 1.05rem; }
.colophon h2 { font-family: var(--sans); font-size: .74rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--gilt-ink); }
.colophon-base { color: #8ea19c; border-top-color: #2c4646; }
.install-slot { border-color: #2c4646; border-radius: 2px; }

/* ================================================================== motion */
@media (prefers-reduced-motion: reduce) { .pcard:hover .pcard-art .cover img { transform: none; } }

/* ================================================================== shelf details */
/* One quiet button colour on the shelf, whatever the book's own colours are. */
.pcard .btn-book { background: var(--brand); color: var(--on-brand); box-shadow: none; }
.pcard .btn-book:hover { background: color-mix(in srgb, var(--brand) 86%, var(--ink)); }
/* Two books a row on phones, so the shelf reads as a shelf. */
@media (max-width: 600px) {
  .products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  .pcard-art { height: 230px; padding: 6px 4px 0; }
  .pcard-body h3 { font-size: 1.08rem; }
  .pcard-sub { font-size: .92rem; }
  .pcard-buy { flex-wrap: wrap; gap: 8px; }
  .pcard-buy .price { font-size: 1.05rem; }
}

/* ================================================================== header fit */
/* Seal, name, five links and the tools share one line; keep every label whole and make room on laptops. */
.topnav a { white-space: nowrap; padding: 8px 10px; letter-spacing: .12em; }
.brandmark { flex: none; }
@media (max-width: 1240px) and (min-width: 900px) {
  .topnav a { font-size: .72rem; padding: 6px 7px; letter-spacing: .1em; }
  .brandmark-tag { display: none; }
}
@media (max-width: 1040px) and (min-width: 900px) {
  .brandmark-name { font-size: .92rem; letter-spacing: .08em; }
  .topnav a { letter-spacing: .06em; padding: 6px 5px; }
}

/* The shelf's section headings in the royal look: gilt rule under the heading. */
.shelf-head { border-bottom-color: color-mix(in srgb, var(--gilt, #c9a227) 55%, transparent); }