/* ==========================================================================
   FAGAS — system.css
   Styles for the design-system documentation page itself.
   ========================================================================== */

/* ============================================================
   RIBBON (top nav)
============================================================ */
.ribbon {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink);
  color: var(--bg);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.ribbon__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 14px var(--space-3);
}
.ribbon__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--bg);
  text-decoration: none;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 14px;
}
.ribbon__mark { width: 22px; height: 22px; color: var(--bg); }
.ribbon__nav {
  display: flex;
  gap: var(--space-3);
  margin-left: auto;
}
.ribbon__nav a {
  color: var(--bg);
  opacity: .72;
  text-decoration: none;
  transition: opacity var(--dur-base) var(--ease);
}
.ribbon__nav a:hover { opacity: 1; }
.ribbon__version {
  color: var(--bg);
  opacity: .55;
  padding-left: var(--space-3);
  border-left: 1px solid rgba(255,255,255,.12);
}
@media (max-width: 900px) {
  .ribbon__nav, .ribbon__version { display: none; }
}

/* ============================================================
   HERO
============================================================ */
.hero {
  position: relative;
  background: var(--ink);
  color: var(--bg);
  padding: 120px 0 140px;
  overflow: hidden;
}
.hero__bg {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(ellipse 800px 500px at 25% 20%, rgba(192, 74, 31, 0.18), transparent 60%),
    radial-gradient(ellipse 600px 400px at 80% 80%, rgba(192, 74, 31, 0.08), transparent 60%);
  pointer-events: none;
}
.hero__inner {
  position: relative;
  padding-top: var(--space-3);
}
.hero__eyebrow {
  color: var(--red-light);
  margin-bottom: var(--space-4);
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid rgba(216, 122, 85, .35);
  border-radius: 999px;
}
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(72px, 14vw, 196px);
  line-height: 0.9;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--bg);
  margin: 0 0 var(--space-5);
  text-wrap: balance;
}
.hero__lead {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.55;
  color: var(--bg);
  max-width: 56ch;
  margin: 0 0 var(--space-6);
}
.hero__row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255,255,255,.12);
  max-width: 760px;
}
.hero__meta { display: flex; flex-direction: column; gap: 6px; }
.hero__meta .meta { color: var(--ink-ghost); }
.hero__metaval {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bg);
}
.hero__corner {
  position: absolute;
  right: var(--space-4);
  top: var(--space-4);
  width: 80px;
  height: 80px;
  color: var(--bg);
  opacity: .5;
}
.hero__corner svg { width: 100%; height: 100%; }

@media (max-width: 700px) {
  .hero__row { grid-template-columns: repeat(2, 1fr); }
  .hero__corner { display: none; }
}

/* ============================================================
   SECTIONS
============================================================ */
.section {
  padding: var(--space-7) 0;
  background: var(--bg);
}
.section--alt { background: var(--bg-soft); }
.section--pages { padding-bottom: var(--space-8); }

.section__head {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--space-3);
  row-gap: 6px;
  align-items: end;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--rule);
}
.section__num {
  grid-row: 1;
  grid-column: 1;
  font-size: 11px;
  color: var(--ink-ghost);
  align-self: end;
  padding-bottom: 6px;
}
.section__title {
  grid-row: 1;
  grid-column: 2;
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 64px);
  margin: 0;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.section__sub {
  grid-row: 2;
  grid-column: 2;
  font-family: var(--font-body);
  font-style: italic;
  color: var(--ink-soft);
  margin: 0;
  font-size: var(--fs-lead);
}

/* ============================================================
   BRAND · manifest, logos, usage
============================================================ */
.manifest {
  max-width: 60ch;
  margin: 0 0 var(--space-6);
}
.manifest .lead { font-style: italic; font-size: var(--fs-lead); line-height: 1.55; }

.logos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.logo-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule);
  margin: 0;
}
.logo-card__art {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  padding: 12%;
}
.logo-card__svg { width: 60%; height: 60%; color: var(--ink); }
.logo-card--light .logo-card__art { background: var(--bg); }
.logo-card--dark  .logo-card__art { background: var(--ink); }
.logo-card--mark  .logo-card__art { background: var(--bg-soft); }
.logo-card__art img { max-width: 80%; height: auto; display: block; }
.logo-card figcaption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-2) var(--space-2) var(--space-2);
  border-top: 1px solid var(--rule);
  background: var(--bg);
  margin: 0;
}
.logo-card .muted {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 12px;
  color: var(--ink-soft);
  text-transform: none;
  letter-spacing: 0;
}
@media (max-width: 800px) {
  .logos { grid-template-columns: 1fr; }
}

.usage h3 { font-size: 22px; letter-spacing: 0.06em; margin-bottom: var(--space-3); }
.usage__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-4);
}
.usage__list li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--rule);
  align-items: start;
}
.usage__num {
  font-family: var(--font-display);
  color: var(--red);
  font-size: 14px;
  letter-spacing: 0.2em;
  padding-top: 2px;
}
.usage__list strong { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 400; }
@media (max-width: 700px) { .usage__list { grid-template-columns: 1fr; } }

/* ============================================================
   COLOR
============================================================ */
.palette {
  display: grid;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}
.palette__group h4 {
  font-size: 13px;
  letter-spacing: 0.22em;
  color: var(--ink-soft);
  margin-bottom: var(--space-2);
}
.swatch-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
.swatch {
  background: var(--bg);
  border: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 0;
}
.swatch__chip {
  background: var(--c);
  height: 100%;
  min-height: 110px;
}
.swatch__name, .swatch__token, .swatch__hex {
  padding-left: var(--space-2);
}
.swatch__name {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-top: var(--space-2);
}
.swatch__token { padding-top: 2px; padding-bottom: 2px; }
.swatch__hex {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
  padding-bottom: var(--space-2);
}
@media (max-width: 800px) { .swatch-row { grid-template-columns: 1fr; } }

.color-rules {
  margin-top: var(--space-5);
  padding: var(--space-4);
  background: var(--bg);
  border-left: 4px solid var(--red);
  max-width: 65ch;
}
.color-rules .lead { margin: 0; font-style: italic; }

/* ============================================================
   TYPE
============================================================ */
.type-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.type-card {
  border: 1px solid var(--rule);
  background: var(--bg);
  padding: var(--space-4);
}
.type-card__head { margin-bottom: var(--space-3); }
.type-card__head .meta { margin-bottom: 8px; display: block; }
.type-card__head h3 { font-size: 26px; margin: 0; }
.type-card__big {
  font-size: 88px;
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
  color: var(--ink);
}
.type-card__alpha {
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule);
  text-transform: uppercase;
}
.type-card__notes { padding-top: var(--space-3); margin-top: var(--space-3); border-top: 1px solid var(--rule); }
.type-card__notes p { font-size: 14px; margin: 0; }
.type-card__notes code { background: var(--bg-soft); padding: 2px 6px; border-radius: 2px; font-size: 12px; }

@media (max-width: 900px) { .type-stack { grid-template-columns: 1fr; } .type-card__big { font-size: 64px; } }

.type-scale h3 { font-size: 22px; letter-spacing: 0.06em; margin-bottom: var(--space-3); }
.scale {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg);
}
.scale th, .scale td {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
}
.scale thead th {
  font-family: var(--font-display);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--ink-soft);
  font-weight: 400;
  border-bottom: 1px solid var(--rule-strong);
}
.scale tbody td:first-child {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  width: 16%;
  white-space: nowrap;
}
.scale tbody td:nth-child(2) {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  width: 12%;
  white-space: nowrap;
}
.type-display { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; line-height: 1; }
.type-body { font-family: var(--font-body); font-weight: 300; }

/* ============================================================
   COMPONENTS
============================================================ */
.comp {
  border: 1px solid var(--rule);
  background: var(--bg);
  margin-bottom: var(--space-4);
}
.comp__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--rule);
  background: var(--bg-soft);
  gap: var(--space-3);
}
.comp__head h3 { font-size: 18px; margin: 0; letter-spacing: 0.06em; }
.comp__demo { padding: var(--space-4); }
.comp__demo--row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

.newsletter { display: flex; flex-direction: column; gap: 10px; max-width: 520px; }
.newsletter__row { display: flex; gap: var(--space-1); }
.newsletter__row input { flex: 1; }
.newsletter--inline { flex-direction: row; align-items: center; max-width: none; min-width: 400px; }
.newsletter--inline input { flex: 1; }

/* Streaming card */
.stream-card {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-4);
  background: var(--ink);
  color: var(--bg);
  padding: var(--space-3);
  align-items: center;
  border-radius: var(--radius-card);
}
.stream-card__cover {
  position: relative;
  aspect-ratio: 1 / 1;
}
.stream-card__cover img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.stream-card__body { padding: var(--space-2) var(--space-2) var(--space-2) 0; }
.stream-card__body .meta { color: var(--red-light); }
.stream-card__body h3 {
  color: var(--bg);
  font-size: 32px;
  margin: 6px 0 var(--space-2);
}
.stream-card__body p { color: var(--ink-ghost); margin-bottom: var(--space-3); }
.stream-card__actions { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.stream-card__actions .btn { background: var(--red); color: #fff; }
.stream-card__actions .btn--ghost {
  background: transparent;
  border-color: rgba(255,255,255,.4);
  color: var(--bg);
}
.stream-card__actions .btn--ghost:hover { background: var(--bg); color: var(--ink); border-color: var(--bg); }
@media (max-width: 700px) { .stream-card { grid-template-columns: 1fr; } }

/* Gigs */
.gigs { display: flex; flex-direction: column; }
.gig {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--rule);
}
.gig:last-child { border-bottom: 1px solid var(--rule); }
.gig__date {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}
.gig__day {
  font-family: var(--font-display);
  font-size: 56px;
  letter-spacing: 0.02em;
  color: var(--ink);
  line-height: 0.9;
}
.gig__mon {
  font-family: var(--font-display);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--red);
  margin-top: 4px;
}
.gig__date .meta { color: var(--ink-ghost); margin-top: 2px; font-size: 11px; }
.gig__body h3 { font-size: 22px; margin: 0 0 4px; letter-spacing: 0.04em; }
.gig__body .meta { display: block; }
.gig__desc { font-size: 14px; color: var(--ink-soft); margin: 6px 0 0; max-width: 56ch; }
.gig__cta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.gig__tickets { font-size: 10px; }
.gig--past .gig__day { color: var(--ink-ghost); }
.gig--past .gig__mon { color: var(--ink-ghost); }
.gig--past .gig__body h3 { color: var(--ink-soft); }
@media (max-width: 700px) {
  .gig { grid-template-columns: 72px 1fr; }
  .gig__cta { grid-column: span 2; align-items: flex-start; }
  .gig__day { font-size: 44px; }
}

/* ============================================================
   COVERS
============================================================ */
.cover-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-3);
}
.cover-grid--4 { grid-template-columns: repeat(auto-fill, 256px); }
@media (max-width: 1000px) {
  .cover-grid, .cover-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .cover-grid, .cover-grid--4 { grid-template-columns: 1fr; }
}
.cover-figure { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.cover-figure .cover img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.cover-figure .cover::after { display: none; }
.cover-figure .cover { box-shadow: 0 4px 20px rgba(14, 14, 14, .14); }
.cover-figure figcaption {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-style: normal;
}
.cover-figure figcaption p {
  font-family: var(--font-display);
  font-style: normal;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
}

/* ============================================================
   PAGE MOCKUPS (browser window frames)
============================================================ */
.mockup-wrap { margin-bottom: var(--space-6); }
.mockup {
  background: var(--ink);
  border-radius: 10px;
  box-shadow: var(--shadow-deep);
  overflow: hidden;
  border: 1px solid rgba(14,14,14,.2);
}
.mockup__chrome {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px 16px;
  background: #15110D;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.mockup__lights { display: flex; gap: 6px; }
.mockup__lights i {
  width: 11px; height: 11px; border-radius: 50%;
  background: #3D3527;
  display: inline-block;
}
.mockup__lights i:nth-child(1) { background: #C04A1F; }
.mockup__lights i:nth-child(2) { background: #C9B997; }
.mockup__lights i:nth-child(3) { background: #5A544A; }
.mockup__url {
  color: var(--ink-ghost);
  margin-left: auto;
  margin-right: auto;
  padding: 4px 14px;
  background: rgba(255,255,255,.04);
  border-radius: 999px;
  letter-spacing: 0.1em;
  font-size: 11px;
}
.mockup__screen {
  background: var(--bg);
  min-height: 600px;
  position: relative;
}

/* mast inside mock */
.site-mast {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
}
.site-mast--hero {
  position: absolute;
  top: 0; left: 0; right: 0;
  color: var(--bg);
}
.site-mast--solid {
  background: var(--ink);
  color: var(--bg);
}
.site-mast__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 16px;
}
.site-mast__mark { width: 24px; height: 24px; color: inherit; }
.site-mast__nav {
  display: flex;
  gap: var(--space-3);
  margin-left: auto;
  align-items: center;
}
.site-mast__nav a {
  color: inherit;
  opacity: .78;
  text-decoration: none;
  transition: opacity var(--dur-base) var(--ease);
  padding: 4px 0;
}
.site-mast__nav a:hover { opacity: 1; }
.site-mast__nav a[aria-current="page"] {
  opacity: 1;
  border-bottom: 2px solid var(--red);
  padding-bottom: 2px;
}

/* page hero (home) */
.page-hero {
  position: relative;
  height: 640px;
  background: var(--ink);
  overflow: hidden;
  display: flex;
  align-items: center;
}
.page-hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.page-hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(14,14,14,.55) 0%, rgba(14,14,14,.85) 100%),
    var(--hero-overlay);
}
.page-hero__content {
  position: relative;
  z-index: 2;
  padding: var(--space-7) var(--space-5) var(--space-5);
  max-width: var(--col-wide);
  margin: 0 auto;
  width: 100%;
  color: var(--bg);
}
.page-hero__content .meta { color: var(--red-light); display: block; margin-bottom: var(--space-3); }
.page-hero__content .hero-title {
  font-size: clamp(64px, 9vw, 144px);
  line-height: 0.9;
  margin: 0 0 var(--space-3);
}
.page-hero__lead {
  font-style: italic;
  color: var(--bg);
  font-size: 19px;
  max-width: 50ch;
  margin: 0 0 var(--space-4);
  opacity: .92;
}
.page-hero__cta { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.btn--ghost-on-dark {
  border-color: rgba(255,255,255,.4);
  color: #fff;
}
.btn--ghost-on-dark:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* page-block (home sections) */
.page-block {
  padding: var(--space-7) var(--space-5);
  max-width: var(--col-wide);
  margin: 0 auto;
}
.page-block__head {
  margin-bottom: var(--space-4);
}
.page-block__head .meta { color: var(--red); display: block; margin-bottom: 6px; }
.page-block__head h2 {
  font-size: 48px;
  margin: 0;
  letter-spacing: 0.02em;
}

/* page-section (inner pages) */
.page-section {
  padding: var(--space-5) var(--space-5);
  max-width: var(--col-wide);
  margin: 0 auto;
}
.page-section--first { padding-top: var(--space-7); }
.page-section h2 {
  font-size: 32px;
  letter-spacing: 0.04em;
  margin: var(--space-4) 0 var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule);
}
.page-section--first h2:first-of-type { border-top: 0; padding-top: 0; margin-top: var(--space-3); }
.page-head { margin-bottom: var(--space-5); }
.page-head .meta { color: var(--red); display: block; margin-bottom: var(--space-2); }
.page-head h1 {
  font-family: var(--font-display);
  font-size: clamp(56px, 7vw, 96px);
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 var(--space-3);
}

/* footer in mockup */
.site-foot {
  background: var(--ink);
  color: var(--bg);
  padding: var(--space-5);
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto;
  gap: var(--space-4);
  align-items: start;
}
.site-foot__col { display: flex; flex-direction: column; gap: 8px; }
.site-foot__col .meta { color: var(--red-light); margin-bottom: 4px; }
.site-foot__col a { color: var(--bg); opacity: .78; text-decoration: none; font-family: var(--font-body); font-style: italic; font-size: 14px; }
.site-foot__col a:hover { opacity: 1; color: var(--red-light); }
.site-foot__sig {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  color: var(--bg);
}
.site-foot__sig svg { width: 36px; height: 36px; color: var(--bg); opacity: .6; }
.site-foot__sig .meta { color: var(--ink-ghost); font-size: 10px; }
@media (max-width: 800px) {
  .site-foot { grid-template-columns: 1fr 1fr; }
}

/* bio grid */
.bio-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}
.bio { margin: 0; display: flex; flex-direction: column; }
.bio__portrait {
  aspect-ratio: 3 / 4;
  margin-bottom: var(--space-2);
}
.bio h3 { font-size: 18px; margin: 0 0 4px; letter-spacing: 0.04em; }
.bio .meta { color: var(--red); margin-bottom: 8px; display: block; }
.bio p { font-size: 14px; margin: 0; }
@media (max-width: 900px) { .bio-grid { grid-template-columns: repeat(2, 1fr); } }

/* CTA band */
.page-section--cta { padding-bottom: var(--space-7); }
.cta-band {
  background: var(--ink);
  color: var(--bg);
  padding: var(--space-5);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-4);
  align-items: center;
}
.cta-band h2 { color: var(--bg); margin: 8px 0; font-size: 32px; }
.cta-band p { color: var(--ink-ghost); margin: 0; font-style: italic; }
.cta-band .meta { color: var(--red-light); }
.cta-band .newsletter--inline input {
  background: rgba(255,255,255,.08);
  color: var(--bg);
  min-width: 280px;
}
.cta-band .newsletter--inline input::placeholder { color: var(--ink-ghost); }
@media (max-width: 800px) {
  .cta-band { grid-template-columns: 1fr; }
  .newsletter--inline { min-width: 0; }
}

/* ============================================================
   LIVE PAGES — cards linking to standalone HTML files
============================================================ */
.live-pages {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
@media (max-width: 800px) {
  .live-pages { grid-template-columns: 1fr; }
}
.live-page {
  display: flex;
  flex-direction: column;
  background: var(--ink);
  color: var(--bg);
  text-decoration: none;
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
  box-shadow: var(--shadow-card);
}
.live-page:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-deep);
  color: var(--bg);
}
.live-page__art {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #1A1430;
}
.live-page__art img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.live-page__art--promo img {
  transform: scale(1.6);
  filter: blur(40px);
}
.live-page__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,8,4,.3) 0%, rgba(14,8,4,.85) 100%);
}
.live-page__title {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--space-3);
  color: #F2EDE2;
}
.live-page__title .meta { color: var(--red-light); display: block; margin-bottom: 8px; }
.live-page__title h3 {
  color: #F2EDE2;
  font-size: 40px;
  margin: 0 0 8px;
  letter-spacing: 0.04em;
}
.live-page__title p {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
  font-size: 14px;
  margin: 0;
  color: #F2EDE2;
  opacity: .85;
  max-width: 42ch;
}
.live-page__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  background: var(--ink);
  border-top: 1px solid rgba(255,255,255,.06);
}
.live-page__foot .meta { color: var(--ink-ghost); font-size: 11px; }
.live-page__open { color: var(--red-light) !important; }

/* ============================================================
   VOICE
============================================================ */
.voice {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.voice__card {
  border: 1px solid var(--rule);
  background: var(--bg);
  padding: var(--space-3);
}
.voice__card h3 { font-size: 18px; margin: 0 0 6px; letter-spacing: 0.06em; }
.voice__card .meta { display: block; margin-bottom: var(--space-2); }
.voice__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.voice__list li {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  padding: 8px 0;
  border-top: 1px solid var(--rule);
  color: var(--ink);
}
.voice__card--dont .voice__list li { color: var(--ink-soft); }
.voice__card--dont s { color: var(--ink-soft); }
@media (max-width: 900px) { .voice { grid-template-columns: 1fr; } }

.vocab h3 { font-size: 22px; letter-spacing: 0.06em; margin-bottom: var(--space-3); }
.vocab dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-4);
  margin: 0;
}
.vocab dl > div {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--rule);
  align-items: baseline;
}
.vocab dt {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.vocab dd { margin: 0; font-family: var(--font-body); font-size: 14px; font-style: italic; }
@media (max-width: 800px) { .vocab dl { grid-template-columns: 1fr; } }

/* ============================================================
   FOOTER
============================================================ */
.ds-foot {
  background: var(--ink);
  color: var(--bg);
  padding: var(--space-5) 0;
}
.ds-foot__inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-4);
  align-items: start;
}
.ds-foot__mark { width: 48px; height: 48px; color: var(--bg); margin-bottom: var(--space-2); display: block; }
.ds-foot__col { display: flex; flex-direction: column; gap: 8px; }
.ds-foot__col .meta { color: var(--red-light); margin-bottom: 4px; }
.ds-foot__col code {
  font-family: 'SF Mono', 'Monaco', monospace;
  font-size: 12px;
  color: var(--bg);
  opacity: .72;
}
.ds-foot__col a { color: var(--bg); opacity: .78; text-decoration: none; font-style: italic; font-size: 14px; }
.ds-foot__col a:hover { opacity: 1; color: var(--red-light); }
.ds-foot .meta { color: var(--ink-ghost); }
@media (max-width: 700px) { .ds-foot__inner { grid-template-columns: 1fr; } }