/* D. Bohica site styles.
   Palette drawn from the dragon storm painting (slate) and the
   Breach of Balance cover lettering (gold). Type: Cinzel for display,
   echoing the cover title; Alegreya for reading. */

@font-face { font-family: "Cinzel"; font-weight: 600; font-display: swap; src: url("/assets/fonts/cinzel-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Cinzel"; font-weight: 700; font-display: swap; src: url("/assets/fonts/cinzel-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Alegreya"; font-weight: 400; font-display: swap; src: url("/assets/fonts/alegreya-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Alegreya"; font-weight: 400; font-style: italic; font-display: swap; src: url("/assets/fonts/alegreya-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Alegreya"; font-weight: 600; font-display: swap; src: url("/assets/fonts/alegreya-latin-600-normal.woff2") format("woff2"); }

:root {
  --storm-900: #161c22;   /* page */
  --storm-800: #1f262e;   /* raised surfaces */
  --storm-700: #2b333d;   /* borders, rules */
  --storm-500: #687483;   /* quiet text on dark */
  --bone: #eae4d7;        /* body text */
  --bone-dim: #b8b2a5;    /* secondary text */
  --gold: #d8a54b;        /* actions, cover lettering */
  --gold-deep: #b9862f;
  --ember: #b5402f;       /* cover dragon red, used once or twice */
  --display: "Cinzel", "Trajan Pro", Georgia, serif;
  --text: "Alegreya", Georgia, "Times New Roman", serif;
  --measure: 66ch;
  --gutter: clamp(16px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--storm-900);
  color: var(--bone);
  font: 400 1.125rem/1.6 var(--text);
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: #f0c470; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.15; letter-spacing: 0.01em; margin: 0 0 0.5em; }
h1 { font-size: clamp(2.2rem, 5.5vw, 4rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }

.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 16px; z-index: 10; background: var(--gold); color: var(--storm-900); padding: 8px 12px; }

.wrap { width: min(1180px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.prose { max-width: var(--measure); }
.muted { color: var(--bone-dim); }

/* Header ------------------------------------------------------------ */
.site-header { border-bottom: 1px solid var(--storm-700); background: rgba(22, 28, 34, 0.92); position: sticky; top: 0; z-index: 5; backdrop-filter: blur(6px); }
.site-header .wrap { display: flex; align-items: center; gap: 24px; min-height: 64px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--bone); text-decoration: none; font-family: var(--display); font-size: 1.25rem; font-weight: 700; }
.brand img { width: 41px; height: 52px; }
.nav { display: flex; gap: 4px 20px; flex-wrap: wrap; margin-left: auto; }
.nav a { color: var(--bone-dim); text-decoration: none; font-size: 1.02rem; padding: 6px 0; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--bone); border-bottom-color: var(--gold); }
@media (max-width: 720px) {
  .site-header { position: static; }
  .site-header .wrap { padding-block: 10px; gap: 6px; }
  .nav { margin-left: 0; width: 100%; gap: 2px 16px; }
}

/* Buttons ----------------------------------------------------------- */
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.5em; }
.btn { display: inline-block; font: 600 1rem/1 var(--display); letter-spacing: 0.04em; padding: 15px 22px; border-radius: 3px; text-decoration: none; border: 1px solid var(--gold); }
.btn-primary { background: var(--gold); color: var(--storm-900); }
.btn-primary:hover { background: #e7b65c; color: var(--storm-900); }
.btn-quiet { color: var(--bone); border-color: var(--storm-500); }
.btn-quiet:hover { color: var(--bone); border-color: var(--bone); }

/* Hero: the one bold moment. The storm painting, the cover, the ask. */
.hero { position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid var(--storm-700); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("/assets/img/site/dragon-background.webp") center 30% / cover no-repeat; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(22,28,34,0.96) 0%, rgba(22,28,34,0.82) 45%, rgba(22,28,34,0.35) 100%), linear-gradient(0deg, var(--storm-900) 0%, transparent 30%); }
.hero .wrap { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(24px, 5vw, 72px); align-items: center; padding-block: clamp(48px, 9vw, 112px); }
.hero .series { color: var(--gold); font-family: var(--display); font-size: 1.05rem; margin-bottom: 0.6em; }
.hero h1 { font-size: clamp(2.8rem, 8vw, 6rem); line-height: 0.95; margin-bottom: 0.35em; text-shadow: 0 2px 24px rgba(0,0,0,0.6); }
.hero .pitch { font-size: clamp(1.15rem, 1.6vw, 1.3rem); max-width: 34em; }
.hero .cover { justify-self: center; width: min(330px, 100%); box-shadow: 0 30px 60px rgba(0,0,0,0.55); border: 1px solid rgba(234,228,215,0.15); }
.hero .note { color: var(--bone-dim); font-size: 0.98rem; margin-top: 1.2em; }
@media (max-width: 760px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero .cover { width: 220px; grid-row: 1; justify-self: start; }
}

/* Sections ------------------------------------------------------------ */
.section { padding-block: clamp(48px, 8vw, 96px); }
.section + .section { border-top: 1px solid var(--storm-700); }
.section-head { max-width: var(--measure); margin-bottom: 2rem; }
.section-head p { color: var(--bone-dim); }

/* Continue reading: Books 2 and 3 on Royal Road */
.next-books { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0; border-top: 1px solid var(--storm-700); }
.next-book { padding: 24px 24px 24px 0; border-bottom: 1px solid var(--storm-700); }
.next-book .num { color: var(--gold); font-family: var(--display); }
.next-book h3 { margin: 0.2em 0 0.4em; }

/* World: the map is the centerpiece */
.world { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.world .map { border: 1px solid var(--storm-700); }
.nations { list-style: none; margin: 0; padding: 0; }
.nations li { padding: 14px 0; border-bottom: 1px solid var(--storm-700); }
.nations li:first-child { padding-top: 0; }
.nations .n-name { font-family: var(--display); font-size: 1.2rem; color: var(--bone); }
.nations .n-meta { color: var(--gold); font-size: 0.98rem; }
.nations .n-blurb { color: var(--bone-dim); margin: 0.25em 0 0; font-size: 1.02rem; }
.nations .now .n-name::after { content: " (reading now)"; font-family: var(--text); font-size: 0.95rem; color: var(--gold); }
@media (max-width: 860px) { .world { grid-template-columns: 1fr; } }

/* Portrait rows (characters) */
.portraits { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px; }
.portrait { text-decoration: none; color: var(--bone); }
.portrait img { aspect-ratio: 2 / 3; object-fit: cover; width: 100%; border: 1px solid var(--storm-700); transition: border-color 0.15s; }
.portrait:hover img { border-color: var(--gold); }
.portrait .p-name { font-family: var(--display); font-size: 1.1rem; margin-top: 10px; display: block; }
.portrait .p-role { color: var(--bone-dim); font-size: 0.98rem; }

/* Entry lists (blog, stories) */
.entries { display: grid; gap: 40px; }
.entry { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; align-items: start; }
.entry img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; border: 1px solid var(--storm-700); }
.entry h3 { font-size: 1.35rem; margin-bottom: 0.3em; }
.entry h3 a { color: var(--bone); text-decoration: none; }
.entry h3 a:hover { color: var(--gold); }
.entry .meta { color: var(--storm-500); font-size: 0.95rem; margin-bottom: 0.5em; }
.entry p { color: var(--bone-dim); margin: 0; }
@media (max-width: 640px) { .entry { grid-template-columns: 1fr; gap: 14px; } }

.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
@media (max-width: 760px) { .pair { grid-template-columns: 1fr; } }

/* Long-form reading ----------------------------------------------------- */
.page-head { padding-block: clamp(40px, 7vw, 80px) 24px; }
.page-head .kicker { color: var(--gold); font-family: var(--display); margin-bottom: 0.5em; }
.page-head .meta { color: var(--storm-500); }
.reading { font-size: 1.2rem; line-height: 1.7; }
.reading h2 { font-size: 1.6rem; margin-top: 1.6em; }
.reading h3 { font-size: 1.3rem; margin-top: 1.4em; }
.reading blockquote { margin: 1.5em 0; padding-left: 1.2em; border-left: 2px solid var(--gold); color: var(--bone); font-style: italic; }
.reading hr { border: 0; text-align: center; margin: 2em 0; }
.reading hr::after { content: "\2726  \2726  \2726"; color: var(--storm-500); letter-spacing: 0.4em; }
.reading ul { padding-left: 1.2em; }
.reading li { margin-bottom: 0.4em; }
.feature-img { margin: 0 0 2rem; border: 1px solid var(--storm-700); }

/* Book page */
.book { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.book .cover { border: 1px solid var(--storm-700); box-shadow: 0 20px 40px rgba(0,0,0,0.4); }
.book .facts { margin: 1.5rem 0 0; padding: 0; list-style: none; color: var(--bone-dim); font-size: 1rem; }
.book .facts li { padding: 8px 0; border-bottom: 1px solid var(--storm-700); }
.book .facts b { color: var(--bone); font-weight: 600; }
@media (max-width: 760px) { .book { grid-template-columns: 1fr; } .book .cover { width: 220px; } }

.chapter-nav { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 16px 0; border-block: 1px solid var(--storm-700); margin-bottom: 2rem; }
.chapter-nav a { text-decoration: none; }
.chapter { padding-top: 1rem; margin-bottom: 3rem; scroll-margin-top: 80px; }
.chapter + .chapter { border-top: 1px solid var(--storm-700); padding-top: 3rem; }
.listen { background: var(--storm-800); border: 1px solid var(--storm-700); padding: 14px 16px; margin: 0 0 1.5rem; }
.listen p { margin: 0 0 8px; font-size: 1rem; color: var(--bone-dim); }
.listen audio { width: 100%; }

/* Character page */
.character { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.character img { border: 1px solid var(--storm-700); }
@media (max-width: 760px) { .character { grid-template-columns: 1fr; } .character img { width: 240px; } }

/* Glossary */
.glossary { margin: 0; }
.glossary dt { font-family: var(--display); font-size: 1.15rem; margin-top: 1.4em; }
.glossary dt .say { font-family: var(--text); color: var(--storm-500); font-size: 1rem; margin-left: 8px; }
.glossary dd { margin: 0.3em 0 0; color: var(--bone-dim); max-width: var(--measure); }
.glossary details summary { cursor: pointer; color: var(--ember); }
.glossary details[open] summary { margin-bottom: 0.3em; }

/* Sign-up */
.signup { background: var(--storm-800); border: 1px solid var(--storm-700); padding: clamp(24px, 4vw, 40px); }
.signup form { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1rem; }
.signup input { flex: 1 1 220px; font: inherit; color: var(--bone); background: var(--storm-900); border: 1px solid var(--storm-500); border-radius: 3px; padding: 13px 14px; }
.signup input::placeholder { color: var(--storm-500); }
.signup .status { width: 100%; margin: 0; min-height: 1.6em; color: var(--bone-dim); }
.signup button { cursor: pointer; }

/* Footer */
.site-footer { border-top: 1px solid var(--storm-700); padding-block: 40px 56px; color: var(--bone-dim); font-size: 1rem; }
.site-footer .cols { display: flex; flex-wrap: wrap; gap: 20px 56px; justify-content: space-between; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.site-footer a { color: var(--bone-dim); }
.site-footer a:hover { color: var(--bone); }
.site-footer .fine { margin-top: 32px; color: var(--storm-500); font-size: 0.92rem; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
.pair .entry { grid-template-columns: 1fr; gap: 14px; }
.book-row { grid-template-columns: 160px minmax(0, 1fr); }
.book-row img { aspect-ratio: 2 / 3; }
.cover-ph { aspect-ratio: 2 / 3; border: 1px solid var(--storm-700); background: linear-gradient(160deg, var(--storm-800), var(--storm-900)); display: grid; place-items: center; padding: 12px; text-align: center; font-family: var(--display); color: var(--gold); font-size: 1.05rem; line-height: 1.2; }
@media (max-width: 640px) { .book-row { grid-template-columns: 120px minmax(0, 1fr); } }

/* Thank-you pop-up after sign-up */
.welcome { max-width: min(480px, calc(100% - 32px)); padding: clamp(24px, 5vw, 40px); background: var(--storm-800); color: var(--bone); border: 1px solid var(--gold); border-radius: 4px; text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,0.6); }
.welcome::backdrop { background: rgba(10, 13, 17, 0.75); }
.welcome img { margin: 0 auto 16px; }
.welcome h2 { font-size: clamp(1.4rem, 4vw, 1.8rem); }
.welcome p { color: var(--bone-dim); }
.welcome .actions { justify-content: center; margin-top: 1.2em; }
.welcome button { cursor: pointer; background: none; font: 600 1rem/1 var(--display); }

/* Support page */
.support-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.support-card { background: var(--storm-800); border: 1px solid var(--storm-700); padding: 28px; display: flex; flex-direction: column; align-items: flex-start; }
.support-card h3 { margin: 0 0 0.4em; }
.support-card p { flex: 1; margin: 0 0 1.4em; }
.support .note { margin: 1rem 0 0; }

/* Start here covers */
.start-card .start-cover { display: block; width: 150px; margin-bottom: 1.2rem; }
.start-card .start-cover img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border: 1px solid var(--storm-700); box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.start-card .genre-tag { flex: 0 0 auto; align-self: stretch; width: 100%; margin: 0 0 1rem; text-align: center; font: 600 1.35rem/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }

/* BIFROST cast */
.bf-cast { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 24px; }
.bf-char { margin: 0; }
.bf-char img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border: 1px solid var(--storm-700); }
.bf-char figcaption { display: grid; gap: 4px; margin-top: 10px; font-size: 0.98rem; }
.bf-char figcaption b { font-family: var(--display); color: var(--bone); font-size: 1.1rem; }
.bf-char.teaser img { filter: saturate(.85) brightness(.9); }

/* Start here: three covers in series order */
.cover-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 1.3rem; }
.cover-cell { display: grid; gap: 6px; text-decoration: none; color: var(--bone-dim); position: relative; }
.cover-cell img, .cover-cell .cover-ph { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: contain; background: var(--storm-900); border: 1px solid var(--storm-700); box-shadow: 0 8px 22px rgba(0,0,0,.4); transition: transform .15s ease; }
.cover-cell:hover img { transform: translateY(-3px); }
.cover-cell .num { font: 600 .78rem/1 var(--display); letter-spacing: .06em; text-align: center; color: var(--gold); }
.cover-cell .tag { position: absolute; top: 6px; left: 6px; background: var(--storm-900); color: var(--bone); border: 1px solid var(--gold); font-size: .72rem; padding: 2px 6px; border-radius: 2px; }

/* Book trailer under the cover */
.book-media { display: grid; gap: 18px; align-content: start; }
.trailer { margin: 0; }
.trailer .frame { position: relative; aspect-ratio: 16 / 9; border: 1px solid var(--storm-700); background: var(--storm-900); }
.trailer iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.trailer figcaption { margin-top: 8px; font-size: .92rem; color: var(--bone-dim); text-align: center; }
@media (max-width: 760px) { .book-media { max-width: 100%; } }
.listen-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-top: 1rem; }
.listen-grid .listen { margin: 0; }

/* Cal's age gallery */
.gal-open { all: unset; cursor: zoom-in; display: block; position: relative; }
.gal-open:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.gal-hint { position: absolute; left: 8px; bottom: 8px; background: rgba(22,28,34,.85); color: var(--gold); border: 1px solid var(--gold); font: 600 .74rem/1 var(--display); letter-spacing: .05em; padding: 6px 8px; border-radius: 2px; }
dialog.gallery { width: min(720px, 94vw); padding: 0; border: 1px solid var(--storm-700); background: var(--storm-800); color: var(--bone); }
dialog.gallery::backdrop { background: rgba(0,0,0,.75); }
.gal-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--storm-700); font-family: var(--display); }
.gal-x { background: none; border: 0; color: var(--bone); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.gal-body { padding: 16px; }
.gal-body .slide { margin: 0; }
.gal-body img { width: 100%; height: min(60vh, 500px); object-fit: contain; background: var(--storm-900); }
.gal-body figcaption { margin-top: 10px; text-align: center; font-family: var(--display); color: var(--gold); }
.gal-nav { display: flex; justify-content: space-between; padding: 0 16px 16px; }
.gal-nav .btn { cursor: pointer; background: none; }