/*
  Homepage-specific rules only. Shared tokens, reset, skip-link,
  woven-wordmark component, footer, and (as of the edit above)
  about-blurb all live in base.css, loaded before this file.
*/

/* Homepage suppresses the header wordmark (see home.html.j2) --
   the hero below is the identity moment instead. This overrides
   base.css's .header-inner justify-content for this page only. */
.header-inner {
  justify-content: flex-end;
}

/* ---------- Hero ---------- */

.hero {
  text-align: center;
  margin-bottom: var(--space-6);
}

h1.hero-wordmark { margin: 0 0 var(--space-3); }

/* Scales the shared .wordmark-woven component up for hero use --
   the thread/bead SVGs inside it are em/%-sized, so they scale
   proportionally for free with no new artwork needed. */
.wordmark-woven--hero .wordmark-text {
  font-size: clamp(2.25rem, 7vw, 3.5rem);
}

.hero-tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--color-thread);
  margin: 0 0 var(--space-4);
}

.hero-framing {
  font-size: 0.95rem;
  color: var(--color-ink-soft);
  max-width: 50ch;
  margin: 0 auto;
}

/* ---------- Featured thread ---------- */

.featured-thread { margin-bottom: var(--space-6); }

.featured-eyebrow {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ink-soft);
  text-align: center;
  margin: 0 0 var(--space-2);
}

.featured-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.5rem;
  text-align: center;
  margin: 0 0 var(--space-1);
}
.featured-title a { color: var(--color-ink); text-decoration: none; }
.featured-title a:hover { color: var(--color-thread); }

.featured-location {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--color-ink-soft);
  text-align: center;
  margin: 0 0 var(--space-5);
}

.featured-statements-wrap {
  position: relative;
  margin: 0 auto;
  max-width: 520px;
  padding: 10px 4px 16px;

  /* How far the thread extends (and fades) above the first bead and
     below the last -- single source of truth, read at runtime by
     home.js via getComputedStyle, same pattern as the entry page's
     --spool-margin/--needle-margin. */
  --thread-fade-extend: 40px; /* 2.5rem */
}

.featured-thread-svg,
.featured-beads-svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.featured-thread-svg { z-index: -1; }
.featured-beads-svg  { z-index: 1; }

.featured-bead {
  fill: var(--color-bead-gold);
  stroke: var(--color-thread);
  stroke-width: 1.4;
}

ol.featured-statements {
  list-style: none;
  margin: 0;
  /*
    30px base text indent. --bead-x values baked in Python (see
    thread_visuals.compute_featured_thread_styles) assume this same
    constant when choosing a range that stays left of the text --
    if this padding value ever changes, that function's bead_x_max
    should be reconsidered too.
  */
  padding: 0 0 0 30px;
}

.featured-statement {
  margin: 0 0 14px var(--indent, 0px);
  font-family: var(--font-serif);
  font-size: 0.95rem;
  line-height: 1.3;
  color: color-mix(
    in srgb,
    var(--color-ink) calc(100% - var(--tint, 0%)),
    var(--color-thread) var(--tint, 0%)
  );
}
.featured-statement:last-child { margin-bottom: 0; }

/* ---------- No-JS fallback ---------- */

.no-js .featured-thread-svg,
.no-js .featured-beads-svg { display: none; }

.no-js .featured-statements-wrap::before {
  content: "";
  position: absolute;
  top: 4px; bottom: 4px;
  left: 8px;
  width: 2px;
  background: var(--color-thread);
  opacity: 0.5;
}

.no-js .featured-statement { position: relative; }
.no-js .featured-statement::before {
  content: "";
  position: absolute;
  left: calc(var(--bead-x, 8px) - 30px - var(--indent, 0px));
  top: calc((1.3em - 8px) / 2);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-bead-gold);
  border: 1.5px solid var(--color-thread);
  box-sizing: content-box;
}

/* ---------- Calls to action ---------- */

.homepage-ctas {
  text-align: center;
  font-size: 0.95rem;
  margin: 0 0 var(--space-6);
}
.homepage-ctas .cta-sep { margin: 0 var(--space-3); color: var(--color-line); }

/* ---------- Desktop ---------- */
/*
  Overrides base.css's 780px --content-width for this page only --
  the homepage can afford a bit more width since it isn't dense
  reading text the way entry pages are.
*/
@media (min-width: 720px) {
  :root { --content-width: 860px; }

  .hero-tagline { font-size: 1.25rem; }
  .hero-framing { font-size: 1.02rem; max-width: 58ch; }

  .featured-title { font-size: 1.75rem; }
  .featured-statements-wrap { max-width: 620px; }
  .featured-statement { font-size: 1.05rem; }
}