/* Theme A · Night sky: full-width sunset skyline behind the name.
   Serif headings (Fraunces), sans body (Inter), warm paper, amber accent. */
:root {
  --color-background: #fbf8f2;      /* warm paper */
  --color-card: #ffffff;
  --color-text: #1d2433;            /* deep navy-black */
  --color-muted: #5b6272;
  --color-rule: #e6e0d4;
  --color-link: #1f4e8c;
  --color-accent: #e0a238;          /* starlight amber */
  --color-on-accent: #1d2433;
  --color-heading-accent: #1d2433;
  --color-band: #141b2d;            /* night sky */
  --color-on-band: #f3efe6;
  --font-heading: "Fraunces", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-ui: "Inter", system-ui, sans-serif;
  --heading-weight: 600;
  --tagline-style: italic;
}
/* Banner height. Luke (session 3): the session-2 banner, min(78vh, 720px), was too tall.
   Between 260px and 460px, aiming for 46% of the window height. */
:root { --banner-height: clamp(260px, 46vh, 460px); }
/* Where the photo is anchored when cropped: 50% across, 60% down (keeps the skyline, trims sky). */
:root { --banner-focus: 50% 60%; }
/* Hero: photo fills the band, text sits on a dark gradient at the bottom. */
.theme-a-night-sky .hero { min-height: var(--banner-height); display: flex; align-items: flex-end; color: #fff; background: #141b2d; overflow: hidden; }
.theme-a-night-sky .hero-photo { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--banner-focus); }
.theme-a-night-sky .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,14,28,.85) 0%, rgba(10,14,28,.45) 45%, rgba(10,14,28,0) 75%); }
.theme-a-night-sky .hero-text { position: relative; z-index: 1; padding-bottom: var(--space-5); width: 100%; }
.theme-a-night-sky .byline { color: #f0c26a; }