/*** MP-INDEX.CSS v4
- Page module for the Diskofi homepage. Five vertical movements:
    1. HERO       — full-viewport masthead with oversized serif wordmark
    2. TICKER     — full-bleed marquee of recent post titles
    3. MANIFESTO  — drop-capped serif statement in a narrow centred column
    4. SHOWS      — full-bleed feature spread + roster (light-tinted band)
    5. CURRENTS   — Recent Ideas grid via cmp-postcard
- Reuses cmp-postcard for the Recent Ideas grid and `.empty-message`
  (mp-general.css) for the empty states. Section heads in Shows + Currents
  share `.home-section-head` / `-title` / `-cta`.
- Wordmark typewriter morph (folded in below at the foot) lives on this
  same page module — kept in one file so the homepage's complete chrome
  is in one place under static/css/_special/.
##########################
***/

/* #region # PAGE-MODULE BASELINE ########################## */
/* Hero sits flush against the global header (top), trailing whitespace
   keeps the standard #gb 2rem at the bottom. */

body:has(.mp-home) #gb { margin-top: 0; }

.mp-home,
.mp-home > .wrapper { overflow: visible; }

/* Layout's `.element { overflow: hidden }` clips the top of large serif
   titles (line-height: 1 leaves no breathing room above the cap line);
   cards opt back into hidden via their own rule. */
.mp-home .element { overflow: visible; }

.mp-home > .wrapper > .stack { margin-top: 0; row-gap: 0; }

/* Uniform 4rem padding to every divider on every section. */
.mp-home .row { padding-block: var(--space-lg); }
.mp-home .row + .row { border-top: 1px solid var(--color-black); }

/* Manifesto's top hairline mirrors the hero's 2px bottom border. The
   compound selector matches `.mp-home .row + .row`'s 3-class specificity,
   so source order wins. */
.mp-home .row.home-manifesto-row {
  border-top: 2px solid var(--color-black);
  padding-top: var(--space-xl);
  padding-bottom: var(--space-lg);
}

/* Ticker + Shows rows hand padding/border off to their inner band.
   Compound `.row.home-XYZ-row` matches the 3-class specificity of
   `.mp-home .row + .row` above, so source order wins — no `!important`. */
.mp-home .row.home-ticker-row,
.mp-home .row.home-shows-row {
  padding-block: 0;
  border-top: none;
}

/* Currents row: no border above (the shows-band's bottom hairline does
   that job); zero bottom so trailing whitespace = row 2rem + #gb 2rem. */
.mp-home .row.home-currents-row {
  padding-top: var(--space-md);
  padding-bottom: 0;
  border-top: none;
}

/* #endregion */

/* #region # SHARED ########################## */

/* Micro-eyebrow used on the hero, on each show card overlay, and on
   the roster's "Also" label. Each callsite layers its own colour /
   layout on top. */
.home-hero-eyebrow,
.home-show-eyebrow,
.home-shows-roster-label {
  font-family: var(--font-sans);
  font-size: var(--type-2xs);
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
}

/* Section heads on Shows + Currents — title left, CTA right, hairline
   beneath. Mirrors the cmp-content-identity rhythm (2rem padding-bottom,
   2px hairline) so the homepage reads like the archive pages. */
.home-section-head {
  display: flex;
  flex-flow: row wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem var(--space-md);
  margin: 0 0 var(--space-md) 0;
  padding-bottom: var(--space-md);
  border-bottom: 2px solid var(--color-black);
}

.home-section-title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.5em, 5vw, var(--type-3xl));
  line-height: 1;
  letter-spacing: var(--track-tight);
  color: var(--color-black);
}

/* Underline-link CTA pattern: the border-bottom *is* the underline.
   Used on the hero's "Currents" link and on each section's "All X →". */
.home-section-cta,
.home-hero-cta {
  font-family: var(--font-sans);
  font-size: var(--type-xs);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  white-space: nowrap;
}

.home-section-cta:hover { color: var(--color-accent); }

/* Suppress the global `a:hover { text-decoration: underline }` from
   typography.css for every interactive surface on this page — each
   already carries its own border-bottom underline (or none). */
.home-section-cta:hover,
.home-hero-cta:hover,
.home-show-card:hover,
.home-show-card:focus-visible,
a.home-ticker-item:hover,
.home-shows-roster-list a:hover { text-decoration: none; }

/* #endregion */

/* #region # HERO ########################## */
/* Full-viewport masthead: small "issue" eyebrow at top, oversized serif
   wordmark in the middle, italic tagline + CTA at the bottom. */

.mp-home .row.home-hero {
  min-height: calc(100vh - 6rem);
  padding-block: var(--space-lg) var(--space-xl);
  display: grid;
  /* Pin both grid tracks (here and on `.column` below) to 1fr so they
     don't auto-size to the wordmark's max-content. Without this, the
     typewriter morph's width changes drag the foot's CTA left/right. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  row-gap: 3rem;
  border-bottom: 2px solid var(--color-black);
}

.home-hero .column {
  display: grid;
  grid-template-rows: subgrid;
  grid-template-columns: minmax(0, 1fr);
  grid-row: 1 / -1;
  align-items: start;
}

.home-hero-eyebrow {
  display: flex;
  flex-flow: row wrap;
  gap: var(--space-xs) 1.5rem;
  align-items: baseline;
  color: var(--color-shade);
}

.home-hero-eyebrow .home-hero-issue {
  color: var(--color-black);
  font-variant-numeric: tabular-nums lining-nums;
}

.home-hero-eyebrow .home-hero-tag::before {
  content: "·";
  margin-right: 1.25rem;
  color: var(--color-shade);
}

.home-hero-wordmark {
  align-self: center;
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(5rem, 19vw, 22rem);
  line-height: 0.85;
  letter-spacing: var(--track-tighter);
  color: var(--color-black);
  word-spacing: -0.05em;
}

.home-hero-wordmark::after {
  content: ".";
  color: var(--color-accent);
}

.home-hero-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 3rem;
  row-gap: 1.5rem;
  align-items: end;
}

.home-hero-tagline {
  margin: 0;
  max-width: 36ch;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(var(--type-md), 2.4vw, var(--type-xl));
  line-height: 1.25;
  color: var(--color-night);
}

/* `justify-self: start` keeps the underline hugging the text in the
   single-column narrow layout where the cell would otherwise stretch. */
.home-hero-cta { justify-self: start; }

.home-hero-cta::after {
  content: " ↓";
  display: inline-block;
  margin-left: 0.4em;
  transition: transform 0.3s ease;
}

.home-hero-cta:hover::after { transform: translateY(0.2em); }

@media (max-width: 800px) {
  .home-hero-foot { grid-template-columns: minmax(0, 1fr); }
}

/* #endregion */

/* #region # TICKER ########################## */
/* Full-bleed marquee. The track contains the content twice and animates
   to translate -50%, so the join is invisible. */

.home-ticker {
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
  border-block: 1px solid var(--color-black);
  background: var(--color-theme-alpha, transparent);
  font-family: var(--font-sans);
  font-size: var(--type-xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  line-height: 1;
}

.home-ticker-track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding-block: var(--space-sm);
  animation: home-ticker-scroll 120s linear infinite;
  will-change: transform;
}

.home-ticker:hover .home-ticker-track { animation-play-state: paused; }

.home-ticker-item {
  padding: 0 2.5rem;
  color: var(--color-black);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}

/* Anchors get the dot-to-dot underline on hover; spans (the labels) don't. */
a.home-ticker-item:hover {
  border-bottom-color: currentColor;
  color: var(--color-accent);
}

.home-ticker-item--label {
  color: var(--color-accent);
  font-weight: 700;
}

.home-ticker-item + .home-ticker-item::before {
  content: "◆";
  display: inline-block;
  margin-right: 2.5rem;
  margin-left: -2.5rem;
  font-size: 0.6em;
  color: var(--color-shade);
  vertical-align: 0.15em;
}

@keyframes home-ticker-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .home-ticker-track { animation: none; transform: none; }
}

/* #endregion */

/* #region # MANIFESTO ########################## */
/* Centred narrow serif column with a drop-cap on the first paragraph. */

.home-manifesto {
  max-width: 56ch;
  margin-inline: auto;
  font-family: var(--font-serif);
  font-size: clamp(var(--type-md), 2vw, 1.6em);
  line-height: 1.45;
  color: var(--color-night);
  text-wrap: pretty;
}

.home-manifesto > p:first-of-type::first-letter {
  float: left;
  font-size: 4.5em;
  line-height: 0.85;
  padding: 0.25rem 0.75rem 0 0;
  font-weight: 700;
  color: var(--color-accent);
}

.home-manifesto p + p { margin-top: 1em; }

.home-manifesto em { font-style: italic; color: var(--color-black); }

.home-manifesto-rule {
  display: block;
  width: 3rem;
  margin: 2.5rem auto 0;
  border-top: 2px solid var(--color-black);
}

@media (max-width: 540px) {
  .home-manifesto > p:first-of-type::first-letter { font-size: 3.5em; }
}

/* #endregion */

/* #region # SHOWS ########################## */
/* Full-bleed soft-light band. Top + bottom hairlines sit at the colour
   change; the currents row's own .row+.row top border is suppressed so
   the bottom hairline is the only line above Recent Ideas. */

.home-shows-band {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-block: var(--space-lg);
  background: var(--color-light);
  border-block: 1px solid var(--color-black);
}

/* Restore the gutter so the column matches the rest of the page. */
.home-shows-band > .column {
  max-width: var(--width-row-hd);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

@media (min-width: 2560px) { .home-shows-band > .column { max-width: var(--width-row-2k); } }
@media (min-width: 3840px) { .home-shows-band > .column { max-width: var(--width-row-4k); } }

/* Featured panels — two side-by-side image-cards with overlaid title. */

.home-shows-featured {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-md);
}

@media (max-width: 800px) {
  .home-shows-featured { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
}

.home-show-card {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-black);
  color: var(--color-white);
  text-decoration: none;
  border: 1px solid var(--color-black);
}

.home-show-figure {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
}

.home-show-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(0.2) brightness(0.78);
  transition: transform 0.6s ease, filter 0.6s ease;
  will-change: transform;
}

.home-show-card:hover .home-show-image,
.home-show-card:focus-visible .home-show-image {
  transform: scale(1.04);
  filter: grayscale(0) brightness(0.88);
}

/* Bottom-anchored content with a soft gradient scrim for legibility. */
.home-show-meta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  height: 100%;
  padding: var(--space-md) 2.5rem;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.35) 35%,
    transparent 65%
  );
}

.home-show-eyebrow { color: var(--color-white); opacity: 0.85; }

.home-show-title {
  margin: 1.25rem 0 var(--space-xs) 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(var(--type-xl), 4vw, 3.5em);
  line-height: 0.95;
  letter-spacing: var(--track-tight);
  color: var(--color-white);
  transition: transform 0.4s ease;
  text-wrap: balance;
}

.home-show-card:hover .home-show-title,
.home-show-card:focus-visible .home-show-title {
  transform: translateX(0.4rem);
}

.home-show-desc {
  margin: 0;
  max-width: 36ch;
  font-family: var(--font-serif);
  font-size: var(--type-sm);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.85);
  text-wrap: pretty;
}

/* Roster: a small "Also" label followed by a comma-spaced list of links. */

.home-shows-roster {
  display: flex;
  flex-flow: row wrap;
  align-items: baseline;
  gap: var(--space-sm) var(--space-md);
  margin-top: var(--space-md);
}

.home-shows-roster-label { flex: 0 0 auto; color: var(--color-shade); }

.home-shows-roster-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-flow: row wrap;
  gap: var(--space-xs) 1.75rem;
  font-family: var(--font-sans);
  font-size: 0.95em;
  color: var(--color-night);
}

.home-shows-roster-list a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.home-shows-roster-list a:hover {
  border-bottom-color: currentColor;
  color: var(--color-black);
}

/* #endregion */

/* #region # CURRENTS ########################## */
/* Plain row at the standard width. Recent Ideas grid + empty-state
   are delegated to cmp-postcard (its grid-context typography and the
   `.cmp-posts-grid--featured-first` masthead modifier handle layout). */

/* #endregion */




/* ##########################################################################
   ##########################################################################
   #                                                                        #
   #                       HERO WORDMARK — TYPEWRITER MORPH                 #
   #                                                                        #
   #   Originally a separate file (index-wordmark.css) — folded in here so  #
   #   the homepage's full chrome lives in one place.                       #
   #                                                                        #
   ##########################################################################
   ########################################################################## */




/*** WORDMARK MORPH
- Hero-wordmark typewriter morph: "discover" ⇄ "diskofi", looping.
- Forward : discover → discove → discov → disco → disko → diskof → diskofi.
  Reverse : same path back. Each transition gets 3% of the cycle.
- `::before` carries the visible word via the animatable `content`
  property; @keyframes snap it through each step. The accent dot from
  `.home-hero-wordmark::after` sits in flow and follows the word.
- The h1 text is wrapped in `.wm-sr` (visually-hidden) so the word stays
  in the accessibility tree and as a CSS-off fallback.
- Honours prefers-reduced-motion.
##########################
***/

/* #region # WORDMARK MORPH ########################## */

/* Visually-hidden fallback text (a11y + CSS-off). */
.home-hero-wordmark--morph .wm-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Italic-serif kerning hacks via U+200A HAIR SPACE: a small gap after
   the leading `d` (the initial `i` would otherwise crowd it), and a
   larger gap before the trailing `i` so its dot clears the bar of `f`. */
.home-hero-wordmark--morph {
  --kern-di: "\200a ";
  --kern-fi: "\200a \200a \200a \200a";
}

.home-hero-wordmark--morph::before {
  content: "d" var(--kern-di) "iscover";
  animation: wordmark-typewrite 8s steps(1, end) infinite;
}

@keyframes wordmark-typewrite {
  0%, 8%    { content: "d" var(--kern-di) "iscover"; }
  11%       { content: "d" var(--kern-di) "iscove"; }
  14%       { content: "d" var(--kern-di) "iscov"; }
  17%       { content: "d" var(--kern-di) "isco"; }
  20%       { content: "d" var(--kern-di) "isko"; }
  23%       { content: "d" var(--kern-di) "iskof"; }
  26%, 56%  { content: "d" var(--kern-di) "iskof" var(--kern-fi) "i"; }
  59%       { content: "d" var(--kern-di) "iskof"; }
  62%       { content: "d" var(--kern-di) "isko"; }
  65%       { content: "d" var(--kern-di) "isco"; }
  68%       { content: "d" var(--kern-di) "iscov"; }
  71%       { content: "d" var(--kern-di) "iscove"; }
  74%, 100% { content: "d" var(--kern-di) "iscover"; }
}

/* #endregion */

/* #region # REDUCED MOTION ########################## */

@media (prefers-reduced-motion: reduce) {
  .home-hero-wordmark--morph::before {
    animation: none;
    content: "d" var(--kern-di) "iscover";
  }
}

/* #endregion */