/* Lost Renascence: the series' own page (12 Nov 2026). Self-contained: its own picture, fonts and styles in this folder,
   so it can move to the series' own website as it is. Amber, antique gold and charcoal over Daz's artwork. */
@font-face { font-family: "Cinzel"; src: url("fonts/cinzel-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Cinzel"; src: url("fonts/cinzel-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("fonts/eb-garamond-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("fonts/eb-garamond-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("fonts/eb-garamond-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --charcoal: #120f0c; --charcoal2: #1c1712; --ink: #efe3cc; --muted: #cdb995;
  --gold-hi: #f6dc9a; --gold: #d4a64a; --gold-lo: #8a5f1e; --amber: #e8892c;
  --display: "Cinzel", "Trajan Pro", "Times New Roman", Georgia, serif;
  --serif: "EB Garamond", Garamond, "Times New Roman", Georgia, serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--charcoal); color: var(--ink); font-family: var(--serif); font-size: 20px; line-height: 1.65; }
img { max-width: 100%; height: auto; }
a { color: var(--gold-hi); }

/* the artwork, fixed behind the whole page (a fixed layer rather than background-attachment, which phones ignore) */
.backdrop { position: fixed; inset: 0; z-index: -2; background: #1a120c url("img/lr_background_1920.jpg") center 35% / cover no-repeat; }
.backdrop::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 120% 90% at 50% 40%, transparent 45%, rgba(10,8,6,.55) 100%); }
@media (max-width: 900px) { .backdrop { background-position: 38% 35%; } }      /* a phone: the same picture (a portrait crop of it needs the detail) */

/* the opening: the artwork almost untouched, the title low on the page */
.hero { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  padding: 0 max(16px, env(safe-area-inset-right, 0px)) 9vh max(16px, env(safe-area-inset-left, 0px)); text-align: center;
  background: linear-gradient(180deg, transparent 45%, rgba(12,9,7,.55) 75%, rgba(12,9,7,.8) 100%); }
.hero-inner { max-width: 60rem; }
.series { font-family: var(--serif); font-style: italic; font-size: clamp(17px, 2vw, 22px); color: var(--muted); margin: 0 0 .4em; letter-spacing: .04em;
  text-shadow: 0 1px 8px rgba(0,0,0,.9); }
.title { font-family: var(--display); font-weight: 600; text-transform: uppercase; margin: 0; line-height: 1.05;
  font-size: clamp(38px, 8.4vw, 112px); letter-spacing: .08em;
  background: linear-gradient(180deg, #fff3cf 0%, var(--gold-hi) 28%, var(--gold) 58%, var(--gold-lo) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(40,22,6,.9)) drop-shadow(0 0 22px rgba(232,137,44,.45)); text-wrap: balance; }
.subtitle { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .22em; color: var(--ink);
  font-size: clamp(12px, 1.55vw, 18px); margin: 0; text-shadow: 0 1px 10px rgba(0,0,0,.95); text-wrap: balance; }
.scroll { margin-top: 5vh; color: var(--gold); text-decoration: none; font-size: 30px; line-height: 1; opacity: .8; }
.scroll:hover { color: var(--gold-hi); opacity: 1; }

/* the ornament: a thin gold line with a small diamond */
.rule { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 18px auto 22px; max-width: 26rem; }
.rule::before, .rule::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.rule::after { background: linear-gradient(90deg, var(--gold), transparent); }
.rule span { width: 9px; height: 9px; transform: rotate(45deg); border: 1px solid var(--gold); background: var(--charcoal); }

/* the chapters: a charcoal page over the artwork, the picture showing between them */
main { padding: 12vh max(16px, env(safe-area-inset-right, 0px)) 4vh max(16px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; gap: 18vh; align-items: center; }
.chapter { width: 100%; max-width: 44rem; padding: clamp(28px, 5vw, 56px) clamp(22px, 5vw, 60px);
  background: linear-gradient(180deg, rgba(20,16,12,.86), rgba(14,11,8,.9)); border: 1px solid rgba(212,166,74,.35);
  box-shadow: 0 0 0 6px rgba(14,11,8,.35), 0 0 0 7px rgba(212,166,74,.18), 0 24px 70px rgba(0,0,0,.6);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.chapter h2 { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; text-align: center; margin: 0;
  font-size: clamp(20px, 3vw, 30px); line-height: 1.3; color: var(--gold-hi); text-wrap: balance; }
.chapter p { margin: 0 0 1em; max-width: 65ch; }
.drop { display: flow-root; }                 /* the dropped capital stays inside its own paragraph */
.drop::first-letter { font-family: var(--display); font-weight: 600; float: left; font-size: 3.4em; line-height: .82; margin: .06em .1em 0 0; color: var(--gold); }
.verse { margin: 1.6em 0 .2em; text-align: center; font-style: italic; color: var(--muted); }
.verse p { margin: 0 auto .35em; }
.beat { text-align: center; font-style: italic; color: var(--gold-hi); font-size: 1.08em; }
.plaque { display: table; margin: 1.6em auto 0 !important; padding: .55em 1.6em .5em; font-family: var(--display); font-weight: 600; text-transform: uppercase;
  letter-spacing: .3em; font-size: 15px; color: #2a1806; background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-lo));
  border: 1px solid #f9e6b4; box-shadow: 0 0 22px rgba(232,137,44,.4), inset 0 1px 0 rgba(255,255,255,.5); }

/* the footer */
.foot { text-align: center; padding: 10vh max(16px, env(safe-area-inset-right, 0px)) calc(48px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: linear-gradient(180deg, transparent, rgba(10,8,6,.92) 40%); color: var(--muted); font-size: 17px; }
.foot p { margin: 0 0 .4em; }
.foot-title { font-family: var(--display); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); font-size: 18px; }
.foot .disclosure { max-width: 46rem; margin: 14px auto 0; font-size: 15px; font-style: italic; opacity: .85; }
.maker { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 18px; text-decoration: none; color: var(--muted); font-size: 14px; opacity: .8; }
.maker:hover { opacity: 1; color: var(--gold-hi); }
.maker img { width: 72px; height: 72px; }

@media (max-width: 600px) {
  body { font-size: 18px; }
  main { gap: 12vh; }
  .subtitle { letter-spacing: .14em; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }