/* ============================================================
   EL PROGRAMA — BetWarrior Argentina
   Foundation. Editorial matchday-program system.
   Token vocabulary is intentionally bespoke (ink / paper / blood
   / ember / rule) — no shared skeleton with prior builds.
   ============================================================ */

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

html {
  /* bespoke fluid root — NOT the vw+vh+vmin formula */
  font-size: clamp(15px, 0.55vw + 0.62rem, 18.5px);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

:root {
  /* — surface, ink-on-night — */
  --night:      #150807;
  --night-2:    #1d0b09;
  --night-3:    #270f0b;
  --blood:      #6d1109;
  --ember:      #ef5a27;
  --ember-hi:   #ff7d49;
  --stamp:      #e0a368;

  --ink:        #f3e7db;
  --ink-soft:   #cdb2a4;
  --ink-faint:  #8c6a5e;

  /* — hairline rules (broadsheet) — */
  --rule:        rgba(243, 231, 219, 0.14);
  --rule-soft:   rgba(243, 231, 219, 0.07);
  --rule-strong: rgba(243, 231, 219, 0.30);
  --ember-veil:  rgba(239, 90, 39, 0.14);
  --ember-line:  rgba(239, 90, 39, 0.40);

  /* — measure / spacing — */
  --measure: 64ch;
  --gutter: clamp(18px, 4vw, 64px);
  --rhythm: clamp(56px, 7vw, 120px);

  --shadow-plate: 0 30px 70px -30px rgba(0, 0, 0, 0.85);

  --display: "Oswald", "Arial Narrow", sans-serif;
  --body: "Schibsted Grotesk", system-ui, -apple-system, sans-serif;
}

body {
  margin: 0;
  background-color: var(--night);
  background-image:
    radial-gradient(120% 80% at 85% -5%, rgba(109, 17, 9, 0.55) 0%, transparent 60%),
    radial-gradient(90% 60% at -10% 110%, rgba(239, 90, 39, 0.10) 0%, transparent 55%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--ember); color: var(--night); }

/* ---- editorial column wrapper (replaces the old _inner/base_position) ---- */
.sheet {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ============================================================
   TYPE
   ============================================================ */
.display {
  font-family: var(--display);
  font-weight: 700;
  line-height: 0.96;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0;
}

h1.display { font-size: clamp(2.9rem, 6.4vw, 6.1rem); }
h2.display { font-size: clamp(2.1rem, 4.2vw, 3.6rem); }

.accent { color: var(--ember); }

/* dateline / kicker — replaces the section_tag pill */
.dateline {
  display: inline-flex;
  align-items: baseline;
  gap: 0.7ch;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ember);
  margin: 0;
}
.dateline::before {
  content: "";
  width: 2.4ch;
  border-top: 2px solid var(--ember);
  transform: translateY(-0.28em);
}

/* ---- hand-set humanizing touches ---- */
/* section headings hang a touch into the gutter, like the hero */
h2.display { margin-left: -0.045em; }

/* edition folios — an editor's slug, auto-numbered per section kicker */
main { counter-reset: folio; }
.dateline { counter-increment: folio; }
.dateline::after {
  content: "Nº " counter(folio, decimal-leading-zero);
  margin-left: 0.4ch;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--ink-faint);
}

/* standfirst — lead paragraph block */
.standfirst {
  font-size: clamp(1.06rem, 1.4vw, 1.28rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 54ch;
  margin: 0;
}

/* drop-cap on opening paragraph (editorial, hand-set) */
.lede::first-letter {
  float: left;
  font-family: var(--display);
  font-weight: 700;
  color: var(--ember);
  font-size: 3.4em;
  line-height: 0.72;
  padding: 0.06em 0.14em 0 0;
  text-transform: uppercase;
}

/* ============================================================
   TICKET — primary call to action (entrada / stub motif)
   ============================================================ */
.ticket {
  --notch: 9px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.8ch;
  padding: 0.95rem 1.7rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--night);
  background: var(--ember);
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.12s ease;
  /* torn-stub silhouette via notched corners */
  clip-path: polygon(
    0 0, calc(100% - var(--notch)) 0, 100% var(--notch),
    100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch)));
}
.ticket:hover { background: var(--ember-hi); transform: translateY(-1px); }
.ticket:active { transform: translateY(0); }

/* ghost variant — outline stub for secondary action */
.ticket--ghost {
  color: var(--ink);
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--ember-line);
}
.ticket--ghost:hover { background: var(--ember-veil); transform: translateY(-1px); }

/* ============================================================
   PLATE — framed photograph with caption (news photo)
   ============================================================ */
.plate { margin: 0; position: relative; }
.plate img {
  width: 100%;
  object-fit: cover;
  filter: saturate(1.04) contrast(1.03);
}
.plate figcaption {
  margin-top: 0.7rem;
  font-style: italic;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
}
.plate figcaption::before { content: "— "; font-style: normal; color: var(--ember); }

/* hairline section rule */
.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }