/* Stage Rail — blog index.
   Only styles index.html. Articles under articles/<slug>/ carry their own CSS
   and inherit nothing from this file. */

/* Self-hosted so the page owes nothing to a third party and never flashes
   fallback type. Latin subsets only — 69KB for the whole set. */
@font-face {
  font-family: 'Bebas Neue';
  src: url('fonts/bebas-neue-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/space-grotesk-var.woff2') format('woff2-variations'),
       url('fonts/space-grotesk-var.woff2') format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('fonts/space-mono-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('fonts/space-mono-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --bg:      #121212;
  --ink:     #EDEDED;
  --lime:    #C8FF00;
  --rail:    #171717;
  --card:    #1B1B1B;
  --tile:    #232323;
  --line:    #262626;
  --line-2:  #2E2E2E;
  --mute:    #9A9A9A;
  --mute-2:  #8A8A8A;
  --mute-3:  #B4B4B4;

  --pad: clamp(20px, 4vw, 48px);

  --display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --body:    'Space Grotesk', system-ui, -apple-system, sans-serif;
  --mono:    'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

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

/* ------------------------------------------------------------------ folio */

.folio {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding: 18px var(--pad);
  border-bottom: 1px solid var(--line-2);
}

.folio-brand { display: flex; align-items: center; gap: 18px; }
.folio-logo img { width: clamp(140px, 18vw, 190px); height: auto; }

.folio-chip {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lime);
  border: 1px solid var(--lime);
  padding: 4px 8px;
  white-space: nowrap;
}

.folio-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute-2);
}

.folio-nav a { transition: color .15s ease; padding: 6px 0; }
.folio-nav a:hover { color: var(--ink); }

.btn-lime {
  color: #121212;
  background: var(--lime);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 14px;
  white-space: nowrap;
}
.folio-nav .btn-lime { padding: 8px 14px; }
.btn-lime:hover { color: #121212; filter: brightness(1.08); }

/* ------------------------------------------------------------------- hero */

.hero {
  display: grid;
  grid-template-columns: 1fr 340px;
  background: var(--lime);
  color: #121212;
}

/* Grid items default to min-width:auto, which lets a long word or an intrinsic
   image size push a track wider than its container. */
.hero > * { min-width: 0; }

.hero-text { padding: 34px var(--pad) 32px; }

.hero-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  font-weight: 700;
  margin-bottom: 14px;
}

.hero-title {
  font-family: var(--display);
  font-size: clamp(48px, 7.2vw, 76px);
  line-height: 0.86;
  letter-spacing: 0.005em;
  margin: 0;
}

.hero-dek {
  max-width: 620px;
  margin: 16px 0 0;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.45;
  font-weight: 500;
  text-wrap: pretty;
}

.hero-media { position: relative; background: #121212; min-height: 250px; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------------- rail */

.rail {
  display: grid;
  grid-template-columns: 104px 1fr;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 20px;
}

.rail-gutter {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 34px 0;
  border-right: 1px solid var(--line);
  background: var(--rail);
}

.rail-label {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: 44px;
  line-height: 1;
  letter-spacing: 0.06em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}


.rail-body { padding: 34px var(--pad) 40px; min-width: 0; }

.rail-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 26px;
}

.rail-blurb { font-size: 16px; color: var(--mute); max-width: 620px; }

.rail-all {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lime);
  font-weight: 700;
  white-space: nowrap;
}
.rail-all:hover { color: var(--lime); text-decoration: underline; text-underline-offset: 4px; }

.rail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

/* A thin rail should not stretch two cards across four columns. */
.rail-grid[data-count="1"] { grid-template-columns: minmax(0, 320px); }
.rail-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 320px)); }
.rail-grid[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ------------------------------------------------------------------- card */

.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--card);
  padding: 0 0 18px;
  transition: background .18s ease, transform .18s ease;
}

.card:hover { background: #212121; transform: translateY(-2px); }
.card:hover .card-title { color: var(--lime); }

.card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--tile);
  overflow: hidden;
}
/* Card art is pulled from eight publications with no shared visual language —
   documentary photography next to white-background stock illustration. Greyscale
   plus a neutral veil puts every source on the same footing, so the grid reads
   as one system and colour is spent on the lime accent alone. Hover lifts the
   treatment and returns the real image. */
.card-media {
  background: #1F1F1F;
}

.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06) brightness(0.88);
  transition: filter .25s ease;
}

.card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #2A2A2A;
  opacity: 0.3;
  mix-blend-mode: multiply;
  pointer-events: none;
  transition: opacity .25s ease;
}

.card:hover .card-media img { filter: none; }

/* White- and yellow-ground art averages 0.65–0.84 luminance after greyscale and
   reads as a pale slab beside photography (0.17–0.54). Pull it into that range. */
.card-media--light img { filter: grayscale(1) contrast(1.12) brightness(0.6); }
.card:hover .card-media::after { opacity: 0; }

/* The generated year tile is already on-palette and must not be duotoned. */
.card-media--tile { background: var(--tile); }
.card-media--tile::after { content: none; }

/* ------------------------------------------------------------ external tag */

.card-mediawrap { position: relative; }

.card-ext {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lime);
  background: rgba(18, 18, 18, 0.86);
  border: 1px solid var(--lime);
  padding: 4px 7px;
  white-space: nowrap;
  backdrop-filter: blur(2px);
}

.card:hover .card-ext { color: #121212; background: var(--lime); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Fallback tile — no image is a deliberate look, not a gap. */
.card-media--tile {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(
      var(--tile-angle, 0deg),
      #1F1F1F 0 8px,
      var(--tile) 8px 16px
    );
}

.tile-mark {
  font-family: var(--display);
  font-size: clamp(44px, 5vw, 64px);
  line-height: 0.95;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
  color: var(--lime);
  opacity: 0.4;
  text-align: center;
  padding: 0 16px;
  max-width: 100%;
  text-wrap: balance;
  /* A placeholder must never be the loudest thing on the card, and must never
     clip — it stands in for art, it is not art. */
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 16px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--mute-2);
}
.card-tag { color: var(--lime); }

.card-title {
  margin: 0;
  padding: 0 16px;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: pretty;
  transition: color .15s ease;
}

.card-excerpt {
  margin: 0;
  padding: 0 16px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--mute);
  text-wrap: pretty;
}

/* A piece you are quoted in is not yours — lead with your words, not a summary
   of someone else's article. */
.card-quote {
  margin: 0 16px;
  padding-left: 12px;
  border-left: 2px solid var(--lime);
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ink);
  font-style: italic;
  text-wrap: pretty;
}

/* On a quoted card the pull-quote is the payload, so the host publication's
   headline steps back. On a press card the headline is the payload — it stays
   at full weight, and the tag plus the "by" credit carry the distinction. */
.card--quoted .card-title {
  font-size: 17px;
  font-weight: 500;
  color: var(--mute-3);
}
.card--quoted:hover .card-title { color: var(--ink); }

.card-foot {
  margin-top: auto;
  padding: 0 16px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute-3);
}
.card-arrow { color: var(--lime); }

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

.site-foot {
  margin: 56px var(--pad) 0;
  padding: 32px 0 40px;
  border-top: 1px solid var(--line-2);
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.foot-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  flex-wrap: wrap;
}

.foot-logo img { width: 150px; opacity: 0.85; }

.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.social {
  border-bottom: 2px solid var(--lime);
  padding: 4px 0 3px;
}
.social:hover { color: var(--lime); }

.foot-bottom {
  border-top: 1px solid var(--line-2);
  padding-top: 16px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute-2);
}
.foot-strap { opacity: 0.7; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 1180px) {
  .rail-grid,
  .rail-grid[data-count="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rail-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  /* min-height together with aspect-ratio makes the ratio derive width from
     height — 220px x 16/9 = 391px, wider than a 360px phone. Let width lead. */
  .hero-media { min-height: 0; aspect-ratio: 16 / 9; }
}

@media (max-width: 860px) {
  /* The vertical gutter label stops earning its 104px — lay the rail out as a
     stacked block with a horizontal header instead. */
  .rail { grid-template-columns: 1fr; }

  .rail-gutter {
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 14px;
    padding: 20px var(--pad);
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .rail-label {
    writing-mode: horizontal-tb;
    transform: none;
    font-size: 34px;
  }

  .rail-body { padding: 24px var(--pad) 32px; }

  .rail-head { flex-direction: column; align-items: flex-start; gap: 10px; }
}

@media (max-width: 620px) {
  .rail-grid,
  .rail-grid[data-count="1"],
  .rail-grid[data-count="2"],
  .rail-grid[data-count="3"] { grid-template-columns: minmax(0, 1fr); }

  .folio { gap: 16px; }
  .folio-nav { gap: 18px; }
  /* Section links wrap to three rows on a phone and take ~380px before any
     content. The section chips and rail headers already do that job, so the
     header keeps only the page switch and the way back to the main site. */
  .folio-nav a:not(.nav-key):not(.btn-lime) { display: none; }

  /* Full-width at 16:9 the illustration fills a whole screen on its own. */
  .hero-media { aspect-ratio: 3 / 1; }
  .hero-media img { object-position: center 38%; }
  .foot-bottom { flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .card:hover { transform: none; }
}