/* =========================================================================
   style-essay.css — winners/* reading experience
   Loaded alongside style-earth.css on /winners/ and /winners/{slug}.html
   ========================================================================= */

/* --- Mode variables: Earth (default) ------------------------------------- */
html.mode-earth, body.essay-body, body.toc-page {
  --bg: #FFFEFA;
  --fg: #111111;
  --muted: #6B6B6B;
  --accent: #FFE033;
  --accent-fg: #111111;
  --accent-border: rgba(255, 255, 255, 0.95);
  --rule: rgba(0, 0, 0, 0.12);
  --link: #2D3A1F;
  --link-underline: #FFE033;
  --blockquote-rule: #FFE033;
  --panel-bg: rgba(255, 224, 51, 0.08);
  --panel-border: rgba(0, 0, 0, 0.15);
  --grain-opacity: 0.035;
  --body-font: "Newsreader", Georgia, "Times New Roman", serif;
}

/* --- Mode: Space (dark / cosmic) ---------------------------------------- */
html.mode-space, html.mode-space body {
  --bg: #0A0A0F;
  --fg: #ECE7DA;
  --muted: #8A857A;
  --accent: #FFE033;
  --accent-fg: #0A0A0F;
  --accent-border: rgba(255, 224, 51, 0.4);
  --rule: rgba(255, 255, 255, 0.12);
  --link: #FFE033;
  --link-underline: rgba(255, 224, 51, 0.5);
  --blockquote-rule: #FFE033;
  --panel-bg: rgba(255, 255, 255, 0.04);
  --panel-border: rgba(255, 255, 255, 0.18);
  --grain-opacity: 0.06;
}

/* Space mode: same yellow starfield as the new homepage.
   Layered as fixed body backgrounds — no extra markup needed. */
html.mode-space body.essay-body,
html.mode-space body.toc-page {
  background-color: var(--bg);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><defs><filter id='gL' x='-300%25' y='-300%25' width='700%25' height='700%25'><feGaussianBlur stdDeviation='2.5'/></filter><filter id='gM' x='-300%25' y='-300%25' width='700%25' height='700%25'><feGaussianBlur stdDeviation='1.2'/></filter><filter id='gSp' x='-300%25' y='-300%25' width='700%25' height='700%25'><feGaussianBlur stdDeviation='0.35'/></filter></defs><g fill='%23FFE033'><circle cx='178' cy='90' r='2.6' filter='url(%23gL)' opacity='0.9'/><ellipse cx='178' cy='90' rx='11' ry='0.45' opacity='0.55' filter='url(%23gSp)'/><ellipse cx='178' cy='90' rx='0.45' ry='11' opacity='0.55' filter='url(%23gSp)'/><circle cx='178' cy='90' r='1.5'/><circle cx='200' cy='260' r='2.8' filter='url(%23gL)' opacity='0.9'/><ellipse cx='200' cy='260' rx='14' ry='0.5' opacity='0.6' filter='url(%23gSp)'/><ellipse cx='200' cy='260' rx='0.5' ry='14' opacity='0.6' filter='url(%23gSp)'/><circle cx='200' cy='260' r='1.6'/><circle cx='220' cy='170' r='2.6' filter='url(%23gL)' opacity='0.85'/><ellipse cx='220' cy='170' rx='10' ry='0.45' opacity='0.5' filter='url(%23gSp)'/><ellipse cx='220' cy='170' rx='0.45' ry='10' opacity='0.5' filter='url(%23gSp)'/><circle cx='220' cy='170' r='1.4'/><circle cx='168' cy='340' r='2.4' filter='url(%23gL)' opacity='0.8'/><ellipse cx='168' cy='340' rx='8' ry='0.4' opacity='0.45' filter='url(%23gSp)'/><ellipse cx='168' cy='340' rx='0.4' ry='8' opacity='0.45' filter='url(%23gSp)'/><circle cx='168' cy='340' r='1.3'/><circle cx='34' cy='52' r='2' filter='url(%23gM)' opacity='0.7'/><circle cx='34' cy='52' r='1.2'/><circle cx='62' cy='160' r='2.1' filter='url(%23gM)' opacity='0.7'/><circle cx='62' cy='160' r='1.3'/><circle cx='320' cy='110' r='2' filter='url(%23gM)' opacity='0.7'/><circle cx='320' cy='110' r='1.1'/><circle cx='20' cy='260' r='2' filter='url(%23gM)' opacity='0.7'/><circle cx='20' cy='260' r='1.2'/><circle cx='320' cy='360' r='2' filter='url(%23gM)' opacity='0.7'/><circle cx='320' cy='360' r='1.1'/><circle cx='246' cy='310' r='1.8' filter='url(%23gM)' opacity='0.7'/><circle cx='246' cy='310' r='0.9'/><circle cx='110' cy='28' r='0.8'/><circle cx='256' cy='40' r='0.9'/><circle cx='370' cy='60' r='0.7'/><circle cx='140' cy='200' r='0.8'/><circle cx='298' cy='230' r='1'/><circle cx='358' cy='180' r='0.9'/><circle cx='98' cy='300' r='0.7'/><circle cx='384' cy='320' r='0.8'/><circle cx='52' cy='380' r='1'/><circle cx='280' cy='130' r='0.7'/></g></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><defs><filter id='gS' x='-300%25' y='-300%25' width='700%25' height='700%25'><feGaussianBlur stdDeviation='1'/></filter></defs><g fill='%23FFE033' opacity='0.55'><circle cx='80' cy='66' r='1.5' filter='url(%23gS)' opacity='0.7'/><circle cx='80' cy='66' r='0.6'/><circle cx='196' cy='150' r='1.4' filter='url(%23gS)' opacity='0.7'/><circle cx='196' cy='150' r='0.6'/><circle cx='14' cy='22' r='0.6'/><circle cx='150' cy='38' r='0.7'/><circle cx='210' cy='100' r='0.5'/><circle cx='270' cy='52' r='0.6'/><circle cx='40' cy='140' r='0.7'/><circle cx='118' cy='180' r='0.5'/><circle cx='256' cy='200' r='0.5'/><circle cx='28' cy='240' r='0.7'/><circle cx='96' cy='278' r='0.5'/><circle cx='176' cy='254' r='0.6'/><circle cx='240' cy='284' r='0.7'/></g></svg>");
  background-attachment: fixed, fixed;
  background-size: 400px 400px, 300px 300px;
  background-repeat: repeat, repeat;
  background-position: 0 0, 0 0;
}

/* Space mode: header UFOs glow against cosmic bg, matching the homepage */
html.mode-space .header-ufo {
  filter: drop-shadow(0 0 8px rgba(255, 224, 51, 0.25));
}

/* --- Body background/foreground driven by variables --------------------- */
body.essay-body, body.toc-page {
  background: var(--bg);
  color: var(--fg);
  transition: background 0.4s ease, color 0.4s ease;
}

/* Override the grain overlay opacity from style-earth.css line 34 */
body.essay-body::after, body.toc-page::after {
  opacity: var(--grain-opacity);
  transition: opacity 0.4s ease;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  body.essay-body, body.toc-page,
  body.essay-body::after, body.toc-page::after {
    transition: none;
  }
}

/* --- Masthead in dark modes: keep yellow chip, soften the subtitle ------ */
html.mode-space .site-sub {
  color: var(--muted);
}

/* --- Breadcrumb: quiet "Contents" link, left-aligned to the reading column,
   kept off the centre axis so it doesn't compete with the title ----------- */
.essay-breadcrumb {
  width: 92%;
  max-width: var(--essay-max-width, 640px);
  margin: 1.5rem auto 0.75rem;
  text-align: left;
  font-family: "Figtree", sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.01em;
  text-transform: none;
}

.essay-breadcrumb a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 0.2s, border-color 0.2s;
}

.essay-breadcrumb a:hover {
  color: var(--fg);
  border-bottom-color: var(--accent);
}

/* --- Control panel ------------------------------------------------------ */
.mode-panel {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  width: 100%;
  margin: 1.5rem 0 0;
  padding: 0.55rem 0.85rem;
  border: 1.5px solid var(--panel-border);
  border-radius: 999px;
  background: var(--panel-bg);
  font-family: "Figtree", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 0.4s ease, border-color 0.4s ease;
}

.mode-panel-label {
  color: var(--muted);
  margin-right: auto;
  padding-left: 0.25rem;
  font-weight: 700;
  transition: color 0.4s ease;
}

.mode-btn {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  padding: 0.4rem 0.85rem;
  border: 1.5px solid var(--panel-border);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.mode-btn:hover {
  color: var(--fg);
  border-color: var(--accent-border);
}

.mode-btn[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent-border);
  font-weight: 700;
}

.mode-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --- Essay article ------------------------------------------------------ */
.essay {
  width: 92%;
  max-width: var(--essay-max-width, 640px);
  margin: 0 auto;
  --essay-body-size: 1.18rem;
  --essay-line-height: 1.65;
  --essay-max-width: 640px;
  --essay-title-size: clamp(2rem, 5vw, 3rem);
}

.essay-head {
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--rule);
}

.essay-place {
  font-family: "Anybody", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.25rem;
}

.essay-title {
  font-family: var(--body-font);
  font-weight: 400;
  font-size: var(--essay-title-size);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin-bottom: 1rem;
  font-variation-settings: "opsz" 60;
}

.essay-byline {
  font-family: "Figtree", sans-serif;
  font-size: 0.95rem;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin-bottom: 0.35rem;
}

.essay-author {
  color: var(--fg);
  font-weight: 700;
}

.essay-bio {
  font-family: var(--body-font);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.5;
}

/* --- Essay body --------------------------------------------------------- */
.essay-body-text {
  font-family: var(--body-font);
  font-size: var(--essay-body-size);
  line-height: var(--essay-line-height);
  color: var(--fg);
  font-variation-settings: "opsz" 16;
}

.essay-body-text p {
  margin-bottom: 1.1rem;
}

.essay-body-text em, .essay-body-text i {
  font-style: italic;
}

.essay-body-text strong {
  font-weight: 700;
}

.essay-body-text a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: var(--link-underline);
  text-underline-offset: 3px;
}

/* Opening lead-in: first few words of the first paragraph set in spaced
   caps. Consistent across every essay regardless of starting letter, and
   free of the alignment quirks a floated drop cap has. */
.essay-opener {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.86em;
  font-weight: 600;
  color: var(--fg);
}

/* Section break ornament */
.essay-break {
  text-align: center;
  margin: 2rem 0 1.8rem;
  color: var(--muted);
  font-size: 1rem;
  letter-spacing: 1.2em;
  padding-left: 1.2em; /* compensate for letter-spacing */
}

/* Blockquote */
.essay-body-text blockquote {
  border-left: 3px solid var(--blockquote-rule);
  padding: 0.2rem 0 0.2rem 1.25rem;
  margin: 1.5rem 0 1.8rem;
  font-style: italic;
  color: var(--fg);
}

.essay-body-text blockquote p {
  margin-bottom: 0.5rem;
}

.essay-body-text blockquote p:last-child {
  margin-bottom: 0;
}

/* --- Essay footer nav (prev/next/toc) ----------------------------------- */
.essay-nav {
  width: 92%;
  max-width: var(--essay-max-width, 640px);
  margin: 3.5rem auto 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  font-family: "Figtree", sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
}

.essay-nav a {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
}

.essay-nav a:hover {
  color: var(--fg);
}

.essay-nav-prev { text-align: left; }
.essay-nav-toc { text-align: center; text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.72rem; font-weight: 700; }
.essay-nav-next { text-align: right; }

/* --- Footer (override for dark modes) ----------------------------------- */
body.essay-body footer, body.toc-page footer {
  color: var(--muted);
}
body.essay-body footer a, body.toc-page footer a {
  color: var(--muted);
}
body.essay-body footer a:hover, body.toc-page footer a:hover {
  color: var(--fg);
}

/* --- TOC (winners/index.html) ------------------------------------------- */
.toc {
  width: 92%;
  max-width: 720px;
  margin: 2rem auto 0;
  --essay-max-width: 720px;
}

.toc-eyebrow {
  font-family: "Anybody", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  margin-bottom: 1rem;
}

.toc-title {
  font-family: var(--body-font, "Newsreader", Georgia, serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  line-height: 1.1;
  text-align: center;
  color: var(--fg);
  margin-bottom: 1rem;
  font-variation-settings: "opsz" 72;
}

.toc-deck {
  font-family: var(--body-font, "Newsreader", Georgia, serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--muted);
  text-align: center;
  margin-bottom: 3rem;
  line-height: 1.5;
}

.toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.toc-item {
  border-top: 1px solid var(--rule);
  padding: 1.75rem 0;
}

.toc-item:last-child {
  border-bottom: 1px solid var(--rule);
}

.toc-place {
  display: block;
  font-family: "Anybody", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.6rem;
}

.toc-link {
  display: block;
  color: var(--fg);
  text-decoration: none;
  transition: opacity 0.2s;
}

.toc-link:hover {
  opacity: 0.7;
}

.toc-essay-title {
  font-family: var(--body-font, "Newsreader", Georgia, serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  line-height: 1.2;
  margin-bottom: 0.4rem;
  font-variation-settings: "opsz" 36;
}

.toc-byline {
  font-family: "Figtree", sans-serif;
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 0.5rem;
  letter-spacing: 0.04em;
}

.toc-blurb {
  font-family: var(--body-font, "Newsreader", Georgia, serif);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--fg);
  opacity: 0.85;
}

/* --- Inline email capture (bottom of essay) ----------------------------- */
.essay-email {
  width: 92%;
  max-width: var(--essay-max-width, 640px);
  margin: 2rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  text-align: center;
  font-family: "Figtree", sans-serif;
}

.essay-email .email-form {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 0.85rem;
}
.essay-email .email-form label {
  color: var(--muted);
  letter-spacing: 0.02em;
}
.essay-email .email-form input[type="email"] {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule);
  color: var(--fg);
  font-family: inherit;
  font-size: 16px; /* prevent iOS zoom */
  padding: 0.3rem 0.1rem;
  width: 220px;
  outline: none;
  transition: border-color 0.2s ease;
}
.essay-email .email-form input[type="email"]::placeholder {
  color: var(--muted);
  opacity: 0.6;
}
.essay-email .email-form input[type="email"]:focus {
  border-bottom-color: var(--accent);
}
.essay-email .email-form button {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.4rem 1rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.essay-email .email-form button:hover {
  background: var(--accent);
  color: var(--accent-fg);
}
.essay-email .form-msg {
  width: 100%;
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  color: #c66;
}
.essay-email .form-msg-success {
  color: var(--accent);
}

/* --- Poems (sestina, sectioned verse) ----------------------------------- */
.essay-poem {
  /* Same body type size as the rest of the essay — no shrinking. The verse
     keeps its LEFT edge aligned with the normal prose column (so it lines up
     with every other essay) and simply extends rightward into the margin so
     each long sestina line fits on a single physical line, as in the original.
     The right edge is capped to ~3vw from the viewport so the page never
     gains a horizontal scrollbar. */
  width: min(56rem, calc(47vw + 50%));
  margin: 0 0 1.1rem;
  text-indent: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.essay-poem .stanza {
  margin: 0 0 1.4rem;
  padding-left: 0;
  text-indent: 0;
  white-space: nowrap;
}
.essay-poem .stanza:last-child { margin-bottom: 0; }

/* Below the width where a full verse line fits, wrap within the normal
   column instead — no sideways scrolling. */
@media (max-width: 1100px) {
  .essay-poem {
    width: auto;
    overflow-x: visible;
  }
  .essay-poem .stanza {
    white-space: normal;
  }
}

/* --- "Powered by Writing Club" — quiet credit under the masthead -------- */
.site-badge {
  display: block;
  text-align: center;
  margin: 0.4rem auto 0;
  font-family: "Figtree", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.site-badge span {
  color: var(--fg);
  font-weight: 700;
}
.site-badge:hover {
  opacity: 1;
}
.site-badge:hover span {
  color: var(--accent);
}

/* Epigraph / dedication set above a piece */
.essay-epigraph {
  font-style: italic;
  color: var(--muted);
  border-left: 3px solid var(--blockquote-rule);
  padding: 0.1rem 0 0.1rem 1.25rem;
  margin: 0 0 2rem;
  line-height: 1.5;
}

/* Roman-numeral section markers (e.g. Entry 16) */
.essay-section {
  font-family: "Anybody", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--accent);
  margin: 2rem 0 0.9rem;
}
html.mode-earth .essay-section { color: var(--muted); }

/* A quieter, hand-noted aside dropped into a piece (a child's add-on, etc.) */
.essay-note {
  font-family: "Figtree", sans-serif;
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--muted);
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  margin: 1.4rem 0;
}

/* Terminal-style two-line exchange (Entry 16, §VI) */
.essay-exchange {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.98rem;
  line-height: 1.7;
  margin: 1.2rem 0 1.4rem;
  color: var(--fg);
}

/* --- Inline figures / photographs --------------------------------------- */
.essay-figure {
  margin: 1.8rem 0;
  text-align: center;
}
.essay-figure img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 2px 18px rgba(0,0,0,0.12);
}
.essay-figure.figure-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
  align-items: end;
}
.essay-figure figcaption {
  font-family: "Figtree", sans-serif;
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 0.5rem;
  font-style: italic;
}

/* --- Original-document display (Entry 10 concrete poem) ----------------- */
.essay-original {
  margin: 1.5rem 0;
}
.essay-original img {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  margin: 0 auto 1.5rem;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 22px rgba(0,0,0,0.16);
}
.essay-original-note {
  font-family: "Figtree", sans-serif;
  font-size: 0.9rem;
  color: var(--muted);
  text-align: center;
  margin: 0 0 1.5rem;
}
.essay-original-note a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: var(--link-underline);
  text-underline-offset: 3px;
}

/* --- Narrow viewport tweaks --------------------------------------------- */
@media (max-width: 480px) {
  .essay-figure.figure-pair {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
  .mode-panel {
    font-size: 0.68rem;
    padding: 0.5rem 0.7rem;
    gap: 0.3rem;
  }
  .mode-panel-label {
    width: 100%;
    text-align: center;
    margin: 0 0 0.25rem;
    padding-left: 0;
  }
  .mode-btn {
    padding: 0.35rem 0.65rem;
  }
  .essay-nav {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 0.6rem;
  }
  .essay-nav-prev, .essay-nav-next, .essay-nav-toc {
    text-align: center;
  }
  .essay-email .email-form {
    flex-direction: column;
    gap: 0.6rem;
  }
  .essay-email .email-form label { width: 100%; }
  .essay-email .email-form input[type="email"] {
    width: min(280px, 80vw);
    text-align: center;
  }
  .essay-email .email-form button {
    padding: 0.7rem 1.6rem;
    min-height: 44px;
  }
}