/**
 * Sideline.Docs – shared editorial typography.
 *
 * Tokens + wrap utilities + story prose hooks.
 * Story CSS keeps typeface, colour and image layout.
 */

:root {
  /* Measure & prose (Block M / matchday reference) */
  --type-measure: 760px;
  --type-body-size: clamp(1.05rem, 1.6vw, 1.28rem);
  --type-body-lh: 1.62;
  --type-standfirst-size: clamp(1.55rem, 3.2vw, 2.7rem);
  --type-standfirst-lh: 1.12;
  --type-standfirst-tracking: -.03em;

  /* Micro type */
  --type-kicker-size: .7rem;
  --type-kicker-tracking: .18em;
  --type-meta-size: .67rem;
  --type-meta-tracking: .1em;
  --type-caption-size: .66rem;
  --type-caption-tracking: .07em;

  /* Display hierarchy – matchday (Block M reference) */
  --type-display-lh: .84;
  --type-display-tracking: -.035em;
  --type-display-size: clamp(2.85rem, 8.2vw, 6.8rem);
  --type-display-size-sm: clamp(2.7rem, 12.2vw, 4.1rem);
  --type-display-size-xs: clamp(2.55rem, 11.5vw, 3.35rem);
  --type-display-size-wide: min(6.8rem, 6.2vw);

  /* Magazine cover – same family, slightly larger, not a separate scale */
  --type-display-size-magazine: clamp(3.1rem, 9vw, 7.6rem);
  --type-display-size-magazine-sm: clamp(2.9rem, 13.5vw, 5rem);
  --type-display-lh-magazine: .78;

  /* In-story section heads */
  --type-section-size: clamp(2.2rem, 5vw, 4.4rem);
  --type-section-lh: .9;
  --type-section-tracking: -.03em;

  /* Magazine / reportage subheads (below cover H1) */
  --type-subhead-size: clamp(2.6rem, 5.5vw, 5.2rem);
}

/* -------------------------------------------------------------------------
   Wrap utilities
   ------------------------------------------------------------------------- */

.typo-display {
  max-width: 100%;
  text-wrap: balance;
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
  line-height: var(--type-display-lh);
  letter-spacing: var(--type-display-tracking);
}

.typo-display--matchday {
  font-size: var(--type-display-size);
}

.typo-display--magazine {
  font-size: var(--type-display-size-magazine);
  line-height: var(--type-display-lh-magazine);
}

@media (max-width: 700px) {
  .typo-display--matchday {
    font-size: var(--type-display-size-sm);
  }
}

@media (max-width: 430px) {
  .typo-display--matchday {
    font-size: var(--type-display-size-xs);
  }
}

@media (max-width: 760px) {
  .typo-display--magazine {
    font-size: var(--type-display-size-magazine-sm);
  }
}

/*
 * Opt-in single line from 1440px.
 * Only when the title is known to fit at the story’s wide scale.
 */
@media (min-width: 1440px) {
  .typo-display--single-wide {
    font-size: var(--type-display-size-wide);
    white-space: nowrap;
  }
}

.typo-prose {
  text-wrap: pretty;
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}

.typo-keep,
.nb {
  white-space: nowrap;
}

.typo-phrase {
  white-space: normal;
}

@media (min-width: 600px) {
  .typo-phrase {
    white-space: nowrap;
  }
}

.typo-lock {
  white-space: normal;
  text-wrap: balance;
}

@media (min-width: 700px) {
  .typo-lock {
    white-space: nowrap;
  }
}

/* -------------------------------------------------------------------------
   Shared story components (size/measure only)
   ------------------------------------------------------------------------- */

.story-copy {
  width: min(var(--type-measure), calc(100% - 2 * var(--side)));
  margin-inline: auto;
}

.story-standfirst {
  font-size: var(--type-standfirst-size);
  line-height: var(--type-standfirst-lh);
  letter-spacing: var(--type-standfirst-tracking);
  font-weight: 700;
  text-wrap: pretty;
  hyphens: none;
}

.story-kicker {
  font-size: var(--type-kicker-size);
  font-weight: 800;
  letter-spacing: var(--type-kicker-tracking);
  text-transform: uppercase;
}

.story-meta {
  font-size: var(--type-meta-size);
  font-weight: 700;
  letter-spacing: var(--type-meta-tracking);
  text-transform: uppercase;
}

.story-caption {
  font-size: var(--type-caption-size);
  letter-spacing: var(--type-caption-tracking);
  text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   Story hooks – unified prose without changing layouts
   ------------------------------------------------------------------------- */

.blockm-copy,
.tlhg-copy {
  width: min(var(--type-measure), calc(100% - 2 * var(--side)));
}

.blockm-copy p:not(.blockm-standfirst),
.tlhg-copy p:not(.tlhg-standfirst),
.report-lead p,
.report-statement p:not(.report-index),
.africa-intro-copy p,
.africa-note p:not(.kicker),
.article-content p,
.article-content li {
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  text-wrap: pretty;
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}

.blockm-copy p.blockm-standfirst,
.tlhg-copy p.tlhg-standfirst,
.blockm-standfirst,
.tlhg-standfirst {
  font-size: var(--type-standfirst-size);
  line-height: var(--type-standfirst-lh);
  letter-spacing: var(--type-standfirst-tracking);
  text-wrap: pretty;
  hyphens: none;
}

.blockm-hero .kicker,
.tlhg-hero .kicker {
  font-size: var(--type-kicker-size);
  letter-spacing: var(--type-kicker-tracking);
}

.blockm-meta,
.tlhg-meta {
  font-size: var(--type-meta-size);
  letter-spacing: var(--type-meta-tracking);
}

.blockm-shot figcaption,
.tlhg-shot figcaption,
.report-shot figcaption,
.article-content figcaption {
  font-size: var(--type-caption-size);
  letter-spacing: var(--type-caption-tracking);
}

.report-lead p,
.report-statement p:not(.report-index),
.africa-intro-copy p {
  max-width: var(--type-measure);
}

.tlhg-section h2 {
  font-size: var(--type-section-size);
  line-height: var(--type-section-lh);
  letter-spacing: var(--type-section-tracking);
}

/* Standard article template */
.article-hero h1 {
  max-width: 100%;
  font-size: var(--type-display-size);
  line-height: var(--type-display-lh);
  letter-spacing: var(--type-display-tracking);
  text-wrap: balance;
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}

.article-content {
  max-width: var(--type-measure);
}

.article-content > p:first-child {
  font-size: var(--type-standfirst-size);
  line-height: var(--type-standfirst-lh);
  letter-spacing: var(--type-standfirst-tracking);
  text-wrap: pretty;
}

.report-cover h1 {
  max-width: 100%;
  font-size: var(--type-display-size-magazine);
  line-height: var(--type-display-lh-magazine);
  letter-spacing: var(--type-display-tracking);
  text-wrap: balance;
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}

@media (max-width: 700px) {
  .article-hero h1 {
    font-size: var(--type-display-size-sm);
  }
}

@media (max-width: 430px) {
  .article-hero h1 {
    font-size: var(--type-display-size-xs);
  }
}

@media (max-width: 760px) {
  .report-cover h1 {
    font-size: var(--type-display-size-magazine-sm);
  }
}

@media (min-width: 1440px) {
  .article-hero h1.typo-display--single-wide {
    font-size: var(--type-display-size-wide);
    white-space: nowrap;
  }
}