/* The homepage: Round 9 of the mockup (design-canvas/PaperRays.dc.html).
 * Its type and colour are the site's now, in styles.css; what is here is the
 * homepage's own layout. */

.home main { font-family: var(--font-body); color: var(--ink); font-size: 1.05rem; }
.home main h1, .home main h2 {
  font-family: var(--font-head);
  font-weight: 400;
  text-align: center;
  text-wrap: balance;
  margin: 0;
}
.home main p { text-wrap: pretty; }
.home main section { padding: 0; }

.home-wrap { max-width: 1312px; margin: 0 auto; padding: 0 clamp(16px, 4.4vw, 64px); }

.journey-form button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ---- hero ---- */
.home-hero .home-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 26px;
  padding-top: clamp(56px, 7vw, 96px);
  padding-bottom: clamp(64px, 8vw, 120px);
}
.home-hero h1 {
  font-size: clamp(3rem, 9.2vw, 8.25rem);
  line-height: .92;
  letter-spacing: -.01em;
  max-width: 1100px;
}
.home-hero h1 em { color: var(--gold-dark); }
.hero-lede {
  max-width: 640px;
  margin: 0;
  font-size: clamp(1.1rem, 1.6vw, 1.32rem);
  line-height: 1.6;
  font-weight: 300;
  color: var(--ink-soft);
}
.hero-lede strong { font-weight: 600; color: var(--ink); }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* The seasons film behind the hero, under an ink scrim so the headline reads.
   The poster is also the section's background, so the frame is there before
   the film loads and stays when it does not play. */
.video-hero {
  position: relative;
  overflow: hidden;
  background: #1f2b24 url('../images/seasons-poster.webp') center / cover no-repeat;
}
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(rgba(21, 29, 24, .55), rgba(21, 29, 24, .7)); }
.video-hero .home-wrap { position: relative; z-index: 2; }
.video-hero h1 { color: #fcfaf4; }
.video-hero h1 em { color: #e0b43a; }
.video-hero .eyebrow { color: #e0b43a; }
.video-hero .hero-lede { color: #efe8d6; }
.video-hero .hero-lede strong { color: #fcfaf4; }
.video-hero .pill-btn { background: #c79806; border-color: #c79806; color: #1f2b24; }
.video-hero .pill-btn:hover { background: #d9ab1f; border-color: #d9ab1f; color: #1f2b24; }
.video-hero .pill-btn.outline { background: transparent; border-color: #f3e3bd; color: #f3e3bd; }
.video-hero .pill-btn.outline:hover { background: #f3e3bd; color: #1f2b24; }

/* ---- tracker ----
 * Laid paper: grain, laid and chain lines, faint radiating compass lines, a
 * double gold rule inset from the edge, and a warm vignette. All decoration,
 * behind the content and hidden from assistive tech. */
.home main .tracker {
  position: relative;
  overflow: hidden;
  background: #f7efdb;
  padding: clamp(56px, 6vw, 88px) 0;
}
.tracker-paper, .tracker-paper::before, .tracker-paper::after { position: absolute; inset: 0; }
.tracker-paper {
  background:
    radial-gradient(closest-side at 50% 50%, rgba(247,239,219,0) 55%, rgba(146,116,58,.2) 100%),
    repeating-linear-gradient(90deg, rgba(150,125,78,.07) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(0deg, rgba(150,125,78,.1) 0 1px, transparent 1px 38px);
}
.tracker-paper::before { content: ""; inset: 26px; border: 1px solid rgba(148,113,4,.35); }
.tracker-paper::after { content: ""; inset: 32px; border: 1px solid rgba(148,113,4,.18); }
.tracker-grain { position: absolute; inset: 0; width: 100%; height: 100%; }
.tracker-rays {
  position: absolute;
  left: 26%;
  top: 50%;
  width: 1100px;
  height: 1100px;
  transform: translate(-50%, -50%);
}

.tracker-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
}
.tracker-wheel { width: 100%; }
.tracker-svg { display: block; width: 100%; height: auto; overflow: visible; }
.tracker-label { font-family: var(--font-body); }
.tl-stage { font-family: var(--font-head); font-size: 23px; }
.tl-meta { font-size: 14px; letter-spacing: .04em; fill: var(--muted); }
.tracker-wheel.is-bare .tracker-label { display: none; }
.tracker-wheel:not(.is-bare) .tl-phone, .tracker-wheel:not(.is-bare) .tracker-legend { display: none; }
.tl-num { font-family: var(--font-head); font-size: 28px; }
.tracker-legend {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); grid-auto-flow: column; gap: 12px 16px;
}
.tracker-legend li { display: flex; gap: 8px; align-items: baseline; color: #6d6450; }
.tracker-legend li.is-past { color: var(--ink); }
.tracker-legend li.is-now { color: var(--rust); }
.tracker-legend .n { font-family: var(--font-head); font-size: 1.1rem; min-width: .7em; }
.tracker-legend b { display: block; font-family: var(--font-head); font-weight: 400; font-size: 1.02rem; line-height: 1.2; }
.tracker-legend small { display: block; font-size: .74rem; letter-spacing: .03em; color: var(--muted); }

.tracker-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.tracker-copy h2 {
  font-size: clamp(2.6rem, 4.4vw, 3.75rem);
  line-height: 1.02;
  color: var(--rust);
  text-align: left;
}
.tracker-copy p { margin: 0; font-size: 1.1rem; line-height: 1.65; color: #3b443e; }
.tracker-copy .pill-btn { margin-top: 6px; }

@media (max-width: 900px) {
  .tracker-grid { grid-template-columns: 1fr; }
  .tracker-wheel { max-width: 640px; justify-self: center; }
  .tracker-rays { left: 50%; top: 30%; }
}
/* Phone: name the section before the wheel, so the wheel arrives with its context. */
@media (max-width: 600px) {
  .tracker-grid { display: flex; flex-direction: column; align-items: stretch; gap: 20px; }
  .tracker-copy { display: contents; }
  .tracker-copy h2 { order: -2; }
  .tracker-copy > .eyebrow { order: -1; margin-top: -10px; }
  .tracker-copy p, .tracker-copy .pill-btn { order: 1; }
  .tracker-copy .pill-btn { align-self: flex-start; }
}

/* ---- arches ---- */
.arches .home-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(36px, 4vw, 56px);
  padding-top: clamp(72px, 8vw, 110px);
}
.arches-head { max-width: 780px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; }
.arches-head h2 { font-size: clamp(2.6rem, 5.6vw, 5rem); line-height: 1; }
.arches-head p { margin: 0; font-size: 1.18rem; line-height: 1.65; font-weight: 300; color: var(--ink-soft); }

.arch-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; width: 100%; }
.arch { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.arch-img {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 5 / 8;
  border-radius: 999px 999px 24px 24px;
  overflow: hidden;
  border: 1.5px solid var(--ink);
}
.arch-img img { width: 100%; height: 100%; object-fit: cover; transition: filter .8s ease; }

/* The season we are in stays in full light; the other three sit behind an ink
   veil, a little desaturated, and hold still. .is-live comes from
   arch-weather.js once the tracker has marked an arch, so all four stay lit
   without script. The weather canvas and summer's rippling sea are added by
   the same script, over the lit arch only. */
.arch-img::after { content: ""; position: absolute; inset: 0; z-index: 3; background: rgba(21, 29, 24, .55); opacity: 0; transition: opacity .8s ease; pointer-events: none; }
.arch-row.is-live .arch:not(.is-here) .arch-img::after { opacity: 1; }
.arch-row.is-live .arch:not(.is-here) .arch-img img { filter: saturate(.6); }
.arch-row.is-live .arch:not(.is-here) figcaption { opacity: .55; }
.arch figcaption { transition: opacity .8s ease; }
.arch-weather, .arch-sea { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.arch-sea { object-fit: cover; filter: url(#arch-water); mask-image: linear-gradient(transparent 0, transparent 63%, black 70%); -webkit-mask-image: linear-gradient(transparent 0, transparent 63%, black 70%); }
@media (prefers-reduced-motion: reduce) {
  .arch-img::after, .arch-img img, .arch figcaption { transition: none; }
}
.arch figcaption { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.arch-here { display: none; color: var(--rust); }
.arch.is-here .arch-here { display: inline; }
.arch-stages { font-family: var(--font-head); font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.2; }

@media (max-width: 900px) {
  .arch-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
}

/* ---- where to begin: the newsletter ---- */
.journey .home-wrap { padding-top: clamp(72px, 8vw, 120px); }
.journey-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
  padding: clamp(56px, 6vw, 80px) clamp(0px, 4vw, 64px);
  border-top: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
}
.journey-box h2 { font-size: clamp(2.6rem, 5.4vw, 4.75rem); line-height: 1; }
.journey-tag { margin: 0; font-family: var(--font-head); font-style: italic; font-size: clamp(1.4rem, 2.2vw, 1.9rem); color: var(--gold-dark); }
/* The copy sits left in one 620px column, so its edges line up under the centred heading. */
.journey-body, .journey-includes, .journey-step { width: min(620px, 100%); text-align: left; }
/* The lines under the form are left-set in a column narrower than the form and
   centred under it, so their left edge stays to the right of the horned owl at
   every width it shows (861px up). The membership link takes its own line
   rather than breaking mid-phrase. */
.journey-more, .journey-between { width: min(440px, 100%); text-align: left; }
.journey-body { margin: 0; font-size: 1.1rem; line-height: 1.65; font-weight: 300; color: var(--ink-soft); }
.journey-body p { margin: 0 0 1em; }
.journey-body p:last-child { margin-bottom: 0; }

/* What a letter holds: a short ruled list. */
.journey-includes { margin-top: 6px; }
.journey-includes h3 {
  margin: 0 0 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
  font-size: 1.45rem;
  font-weight: 400;
}
.journey-includes ul { margin: 0; padding: 0; list-style: none; }
.journey-includes li { padding: 8px 0 8px 26px; position: relative; font-weight: 300; line-height: 1.55; color: var(--ink-soft); }
.journey-includes li::before { content: "\2726"; position: absolute; left: 0; top: 9px; color: var(--gold); font-size: .85rem; }
.journey-includes strong { font-weight: 600; color: var(--ink); }
.journey-step { margin: 6px 0 0; font-size: 1.05rem; line-height: 1.6; font-weight: 300; color: var(--ink-soft); }
.journey-between { margin: -8px 0 0; font-size: .88rem; line-height: 1.55; color: var(--muted); }
.journey-step strong, .journey-more strong { font-weight: 600; color: var(--ink); }
.journey-more { margin: 4px 0 0; font-size: .95rem; line-height: 1.6; color: var(--muted); }
.journey-more a { display: block; margin-top: 4px; color: var(--ink); font-weight: 600; text-underline-offset: 3px; }

.journey-form {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(520px, 100%);
  margin-top: 8px;
  padding: 7px 7px 7px 24px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: #fffdf7;
}
.journey-form input[type="email"] {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  outline: none;
}
.journey-form:focus-within { box-shadow: 0 0 0 3px rgba(199,152,6,.35); }
.journey-form button {
  flex: none;
  border: 0;
  border-radius: 999px;
  padding: 13px 22px;
  background: var(--ink);
  color: #fcfaf4;
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
}
.journey-form button:hover { background: #33443a; }

/* The Solar Story Post owls: the barn owl arrives over the top rule with its letter,
   the horned owl waits on the bottom one. Decoration only. On a phone the
   horned owl steps out and the barn owl leads the block. */
.journey-box.has-owls { position: relative; }
.owl { position: absolute; pointer-events: none; height: auto; max-width: none; }
/* A soft shadow under each owl, following its outline: the flier's falls
   further and softer, since it is in the air; the percher's sits close. */
.owl-fly { filter: drop-shadow(0 18px 16px rgba(31, 43, 36, .22)); }
.owl-perch { filter: drop-shadow(0 6px 8px rgba(31, 43, 36, .26)); }
.owl-fly {
  width: clamp(200px, 24vw, 330px);
  top: clamp(-90px, -6vw, -50px);  /* clear of the autumn arch's label above */
  right: clamp(0px, 5vw, 80px);
  rotate: -8deg;
  animation: owl-glide 7s ease-in-out infinite;
}
.owl-perch { width: clamp(130px, 14vw, 200px); bottom: 0; left: clamp(0px, 5vw, 80px); }
@keyframes owl-glide { 0%, 100% { translate: 0 0; } 50% { translate: -12px 10px; } }
@media (prefers-reduced-motion: reduce) { .owl-fly { animation: none; } }
@media (max-width: 860px) {
  .owl-perch { display: none; }
  .owl-fly { position: static; width: 170px; margin: -8px auto -6px; rotate: none; }
}

@media (max-width: 480px) {
  .journey-form { flex-direction: column; align-items: stretch; border-radius: 28px; padding: 8px; }
  .journey-form input[type="email"] { padding: 12px 14px; text-align: center; }
}

/* ---- the show ----
   On the stage (Cassidy's pick "D", 2026-11-10): the closed red curtain under
   its spotlight, the copy standing in the light, and a whiteboard still from a
   real show hung either side. Curtain from Canva's redcurtain.svg, cut centred
   by compress.py; stills from liveshowstills.zip. On a phone the stills stack
   under the button. */
.show-line {
  background: #120203 url("../images/red-curtain.webp") center / cover no-repeat;
  margin-top: clamp(24px, 3vw, 48px);
}
.show-line .home-wrap { padding-top: clamp(72px, 9vw, 128px); padding-bottom: clamp(72px, 9vw, 128px); }
.show-box { max-width: 600px; margin: 0 auto; padding: 0 8px; text-align: center; }
.show-box .eyebrow { color: #e8c35a; }
.show-box h2 { margin: 10px 0 16px; font-size: clamp(1.7rem, 3.4vw, 2.3rem); color: #fcfaf4; }
.show-box p { margin: 0 auto 14px; max-width: 620px; font-size: 1.04rem; line-height: 1.6; color: #f6e9cf; text-shadow: 0 1px 12px rgba(30, 0, 0, .55); }
.show-box .show-facts { margin-bottom: 24px; font-size: .9rem; color: #e9cfa8; text-wrap: balance; }
.show-box .pill-btn { background: #c79806; border-color: #c79806; color: #1f2b24; }
.show-box .pill-btn:hover { background: #d9ab1f; border-color: #d9ab1f; }
.show-box p.show-credit { margin: 28px auto 0; font-size: .74rem; line-height: 1.5; color: #c9a98a; text-shadow: none; }

.show-stills { margin-top: 36px; }
.show-stills img { display: block; width: 82%; height: auto; border-radius: 6px; background: #fff; box-shadow: 0 18px 44px rgba(0, 0, 0, .6); }
.show-stills img:first-child { rotate: -1.8deg; }
.show-stills img:last-child { margin: -22% 0 0 auto; position: relative; rotate: 1.6deg; }

@media (min-width: 861px) {
  .show-box {
    max-width: 1280px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px) minmax(0, 1fr);
    gap: 40px; align-items: center;
  }
  .show-copy { grid-column: 2; grid-row: 1; }
  .show-stills { display: contents; }
  .show-stills img { grid-row: 1; width: 100%; margin: 0; position: static; }
  .show-stills img:first-child { grid-column: 1; rotate: -3deg; }
  .show-stills img:last-child { grid-column: 3; rotate: 2.5deg; margin: 0; }
  .show-box p.show-credit { grid-column: 1 / -1; grid-row: 2; margin-top: 0; }
}