/* Harnessing the Modern Prometheus - projects.jjg.dev/frankenclaude
   Palette drawn from the background painting:
   - page ground:   #0a0f0e (deep teal-black)
   - body text:     #e6e2d8 (warm off-white, candlelight paper)
   - quiet text:    #c9c4b8 (headings, datelines, epigraph)
   - fire green:    #4a9e82 (used once - the creature's border)
   - link teal:     #a3d4c0
   - chrome text:   #8a877e (footer, header) */

:root {
  --ground: #0a0f0e;
  --ink: #e6e2d8;
  --ink-quiet: #c9c4b8;
  --fire: #4a9e82;
  --link: #a3d4c0; /* the flame's brightest tint - 4.9:1 over the worst-case pixel; #7bbfaa was 3.8:1, below AA */
  --chrome: #8a877e;
  --overlay: rgba(8, 14, 13, 0.72); /* Derived, not eyeballed: the sky glow and the fire core both contain pure-white
     pixels, and the parallax slip (~10x) puts nearly the whole painting behind prose
     at some scroll position. 0.72 is the minimum alpha where both inks clear WCAG AA
     over white: body ink 6.2:1, quiet ink 4.6:1. Re-derive if the image changes. */
  --measure: 41rem;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-size: 1.1875rem; /* 19px - Garamond runs small */
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Backdrop and parallax ---------- */

.backdrop {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: -1;
}

.backdrop img {
  display: block;
  width: 100vw;
  height: auto;
  will-change: transform;
}

/* Legibility overlay: teal-black scrim, slightly thinner in the center
   column where the campfire light falls */
.backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      rgba(8, 14, 13, 0.88) 0%,
      var(--overlay) 30%,
      var(--overlay) 70%,
      rgba(8, 14, 13, 0.88) 100%);
}

/* ---------- Minimal chrome ---------- */

.site-header {
  padding: 1.25rem 1.5rem;
}

.site-header a {
  color: var(--chrome);
  text-decoration: none;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
}

.site-header a:hover,
.site-header a:focus-visible {
  color: var(--ink-quiet);
  text-decoration: underline;
}

/* ---------- Article column ---------- */

main {
  display: block;
}

article {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 1.5rem 4rem;
}

/* ---------- Title block ---------- */

.title-block {
  text-align: center;
  padding: 16vh 0 4rem;
}

.title-block h1 {
  font-size: 2.6rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin: 0 0 1rem;
  color: var(--ink);
}

.byline {
  color: var(--ink-quiet);
  font-size: 1rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin: 0;
}

/* ---------- Epigraph ---------- */

.epigraph {
  margin: 0 auto 6rem;
  max-width: 34rem;
  text-align: center;
  color: var(--ink-quiet);
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.7;
}

.epigraph p { margin: 0 0 0.9rem; }

.epigraph .attribution {
  font-style: normal;
  font-size: 0.875rem;
  letter-spacing: 0.12em;
}

.epigraph .attribution cite { font-style: italic; }

.attribution a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(201, 196, 184, 0.45);
  text-underline-offset: 0.18em;
}

.attribution a:hover,
.attribution a:focus-visible {
  color: var(--link);
  text-decoration-color: var(--link);
}

/* ---------- Part headers ---------- */

.part-header {
  text-align: center;
  margin: 5rem 0 3.5rem;
}

.part-number {
  color: var(--ink-quiet);
  font-size: 0.875rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
}

.part-header h2 {
  font-size: 1.9rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  margin: 0;
  color: var(--ink);
}

/* ---------- Body prose ---------- */

article p {
  margin: 0 0 1.4rem;
}

.dateline {
  margin: 3rem 0 1.4rem;
  color: var(--ink-quiet);
  letter-spacing: 0.04em;
}

.dateline strong { font-weight: 600; }

.valediction {
  margin-top: 2.5rem;
  line-height: 2;
}

/* Section ornament between parts */
.asterism {
  text-align: center;
  color: var(--ink-quiet);
  letter-spacing: 0.4em;
  margin: 5rem 0;
  font-size: 1.1rem;
}

/* ---------- The creature's monologue ----------
   A document within the document. The one place the
   fire's green enters the typography. */

.creature {
  margin: 2.5rem 0 2.5rem;
  padding-left: 1.75rem;
  border-left: 2px solid var(--fire);
}

.creature p { margin-bottom: 1.4rem; }

/* ---------- Colophon ---------- */

.colophon {
  margin-top: 7rem;
  text-align: center;
  color: var(--ink-quiet);
  font-variant: small-caps;
  letter-spacing: 0.14em;
  font-size: 0.9375rem;
  line-height: 2.1;
}

.colophon-rule {
  width: 6rem;
  height: 1px;
  background: var(--ink-quiet);
  opacity: 0.45;
  margin: 0 auto 2.5rem;
}

.colophon a {
  color: var(--link);
  text-decoration: none;
}

.colophon a:hover,
.colophon a:focus-visible {
  text-decoration: underline;
}

.colophon-year {
  display: inline-block;
  margin-top: 0.6rem;
}

/* ---------- Site footer ---------- */

.site-footer {
  text-align: center;
  padding: 3rem 1.5rem 4rem;
  font-size: 0.875rem;
  color: var(--chrome);
  /* Solid ground: chrome is 2.2:1 over the fire core, and the footer crosses
     the fire while scrolling into view. Structural fix - the text never sits
     over the image. The soft top edge hides the block boundary during entry;
     it reaches full opacity before the 3rem padding ends, so no text ever
     sits on the translucent part. */
  background: linear-gradient(to bottom, rgba(10, 15, 14, 0), var(--ground) 2.5rem);
}

.site-footer a {
  color: var(--chrome);
  text-decoration: none;
  letter-spacing: 0.06em;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--ink-quiet);
  text-decoration: underline;
}

.back-to-top {
  display: inline-block;
  margin-bottom: 1.5rem;
}

.footer-links a {
  margin: 0 0.9rem;
}

/* ---------- Focus visibility ---------- */

a:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 3px;
}

/* ---------- Mobile: static hero, solid dark body ---------- */

@media (max-width: 768px) {
  .backdrop {
    position: relative;
    height: 62vh;
    z-index: auto;
  }

  .backdrop img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 70%; /* keep the campfire and figures in frame */
    transform: none !important;
    will-change: auto;
  }

  /* Fade the hero's lower edge into the page ground instead of
     the side-scrim used on desktop */
  .backdrop::after {
    background: linear-gradient(to bottom,
      rgba(8, 14, 13, 0.15) 0%,
      rgba(8, 14, 13, 0.15) 55%,
      var(--ground) 100%);
  }

  .site-header {
    position: absolute;
    top: 0;
    left: 0;
  }

  /* Chrome is 2.4:1 over the barely-scrimmed hero corner; quiet ink is 4.9:1 */
  .site-header a {
    color: var(--ink-quiet);
  }

  .title-block {
    padding-top: 3rem;
  }

  body {
    font-size: 1.125rem;
  }

  .title-block h1 { font-size: 1.9rem; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .backdrop img { transform: none !important; }
}