:root {
  --stories-black: #080909;
  --stories-ink: #171614;
  --stories-paper: #f0ece2;
  --stories-paper-deep: #ddd5c7;
  --stories-red: #d81f16;
  --stories-muted: #78746c;
  --stories-red-text: #c01812;
  --stories-muted-text: #6c6860;
  --stories-rule: rgba(23, 22, 20, .2);
  --stories-reading: 46rem;
  --stories-wide: 76rem;
}

* { box-sizing: border-box; }

html { background: var(--stories-black); }

body.stories-page {
  min-width: 320px;
  margin: 0;
  color: var(--stories-ink);
  background: var(--stories-black);
  font-family: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.stories-main {
  position: relative;
  width: min(100% - 32px, var(--stories-wide));
  margin: 32px auto 0;
  padding: clamp(28px, 5vw, 80px) clamp(20px, 5vw, 72px) clamp(52px, 7vw, 104px);
  overflow: hidden;
  background:
    linear-gradient(102deg, transparent 0 6%, rgba(216, 31, 22, .055) 6.3% 6.7%, transparent 7% 100%),
    var(--stories-paper);
  clip-path: polygon(0 .3%, 2% 0, 7% .45%, 13% .1%, 22% .42%, 31% 0, 43% .32%, 58% .05%, 71% .42%, 83% 0, 94% .37%, 100% .1%, 99.7% 99.55%, 92% 100%, 80% 99.6%, 66% 100%, 55% 99.55%, 42% 100%, 28% 99.6%, 15% 100%, 4% 99.55%, 0 100%);
}

.stories-main::before,
.stories-main::after {
  position: absolute;
  right: 0;
  left: 0;
  height: 8px;
  content: "";
  pointer-events: none;
  background: repeating-linear-gradient(100deg, var(--stories-red) 0 22px, #b81610 22px 26px, var(--stories-red) 26px 48px);
  clip-path: polygon(0 22%, 8% 0, 18% 24%, 29% 4%, 40% 28%, 52% 0, 64% 21%, 75% 3%, 87% 26%, 100% 0, 100% 76%, 91% 100%, 80% 76%, 68% 98%, 57% 73%, 45% 100%, 32% 76%, 20% 99%, 8% 73%, 0 100%);
}

.stories-main::before { top: 0; }
.stories-main::after { bottom: 0; }

.stories-masthead {
  max-width: var(--stories-reading);
  padding-bottom: clamp(28px, 4vw, 52px);
  border-bottom: 1px solid var(--stories-rule);
}

.stories-kicker,
.stories-label,
.stories-meta,
.stories-read-link {
  margin: 0;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .11em;
  line-height: 1.25;
  text-transform: uppercase;
}

.stories-kicker,
.stories-label { color: var(--stories-red-text); }

.stories-masthead h1,
.stories-featured h2,
.stories-statement h2,
.story-article h1,
.story-article h2,
.story-article h3 {
  margin: 0;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.stories-masthead h1 {
  max-width: 12ch;
  margin-top: 8px;
  font-size: clamp(3.25rem, 10vw, 7.5rem);
  line-height: .82;
  text-transform: uppercase;
}

.stories-masthead > p:last-child {
  max-width: 39rem;
  margin: 18px 0 0;
  color: var(--stories-muted-text);
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.55;
}

.stories-featured {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(18rem, .92fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: center;
  padding: clamp(30px, 5vw, 72px) 0;
  border-bottom: 1px solid var(--stories-rule);
}

.stories-featured-media {
  display: block;
  min-height: 44px;
  overflow: hidden;
  background: var(--stories-ink);
  clip-path: polygon(.6% 1.5%, 7% .3%, 15% 1.1%, 23% 0, 35% .8%, 48% .2%, 62% 1%, 74% 0, 88% .7%, 99.4% 0, 100% 97.8%, 91% 99.7%, 78% 98.9%, 66% 100%, 53% 99%, 40% 99.8%, 29% 99%, 14% 100%, 0 99.1%);
}

.stories-featured-media img,
.stories-featured-media picture,
.story-article figure picture,
.story-cover,
.story-article figure img {
  display: block;
}

.stories-featured-media img,
.story-cover,
.story-article figure img {
  width: 100%;
  height: auto;
}

.stories-featured-media img {
  transition: transform .32s ease;
}

.stories-featured-media:hover img { transform: scale(1.025); }

.stories-featured-copy { max-width: 33rem; }

.stories-featured h2 {
  margin-top: 12px;
  font-size: clamp(2.8rem, 5.8vw, 5.4rem);
  line-height: .88;
  text-transform: uppercase;
}

.stories-featured h2 a,
.stories-read-link { color: inherit; }

.stories-featured h2 a {
  text-decoration-color: transparent;
  text-decoration-thickness: .08em;
  text-underline-offset: .08em;
  transition: text-decoration-color .18s ease;
}

.stories-featured h2 a:hover { text-decoration-color: var(--stories-red); }

.stories-dek {
  margin: 24px 0;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  line-height: 1.55;
}

.stories-meta { color: var(--stories-muted-text); }
.stories-meta span { padding: 0 .3em; }

.stories-read-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 22px;
  color: var(--stories-red-text);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.stories-read-link:hover { color: #9f140e; }

.stories-statement {
  width: min(100%, var(--stories-reading));
  padding-top: clamp(30px, 5vw, 64px);
}

.stories-statement h2 {
  margin-top: 10px;
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: .88;
  text-transform: uppercase;
}

.stories-statement > p:last-child {
  max-width: 40rem;
  margin: 20px 0 0;
  color: var(--stories-muted-text);
  font-size: 1rem;
  line-height: 1.6;
}

/* Shared story-article primitives, used by individual editorial pages. */
.story-article {
  width: min(100% - 32px, var(--stories-wide));
  margin: 32px auto 0;
  padding: clamp(28px, 5vw, 80px) clamp(20px, 5vw, 72px) clamp(52px, 7vw, 104px);
  overflow: hidden;
  color: var(--stories-ink);
  background:
    linear-gradient(102deg, transparent 0 9%, rgba(216, 31, 22, .04) 9.2% 9.5%, transparent 9.8% 100%),
    var(--stories-paper);
}

.story-article-header,
.story-article-body {
  width: min(100%, var(--stories-reading));
  margin-right: auto;
  margin-left: auto;
}

.story-article-header {
  margin: 0 auto clamp(28px, 5vw, 56px);
}

.story-article h1 {
  margin-top: 12px;
  font-size: clamp(3.4rem, 10vw, 7.75rem);
  line-height: .82;
  text-transform: uppercase;
}

.story-article h2 {
  margin-top: 2.25rem;
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  line-height: .92;
}

.story-article h3 {
  margin-top: 1.75rem;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  line-height: .98;
}

.story-article-body > * + * { margin-top: 1.25rem; }
.story-article-body p,
.story-article-body li { font-size: clamp(1.05rem, 2vw, 1.2rem); line-height: 1.7; }
.story-article-body a { color: var(--stories-red-text); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.story-article figure { margin: clamp(28px, 5vw, 56px) 0; }
.story-article figcaption { margin-top: 9px; color: var(--stories-muted-text); font-size: .82rem; line-height: 1.45; }

.story-breadcrumb {
  display: flex;
  gap: .55rem;
  align-items: center;
  margin-bottom: clamp(32px, 5vw, 64px);
  color: var(--stories-muted-text);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.4;
  text-transform: uppercase;
}

.story-breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--stories-red-text);
  text-underline-offset: 4px;
}

.story-dek {
  max-width: 40rem;
  margin: 24px 0 0;
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  line-height: 1.6;
}

.story-byline {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  align-items: center;
  margin: 26px 0 0;
  color: var(--stories-muted-text);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .07em;
  line-height: 1.4;
  text-transform: uppercase;
}

.story-cover-figure {
  width: min(100%, 40rem);
  margin: 0 auto clamp(52px, 8vw, 96px) !important;
  background: var(--stories-black);
}

.story-cover {
  width: 100%;
  height: auto;
  max-height: 82rem;
  object-fit: contain;
}

.story-intro > * + *,
.story-section > * + * { margin-top: 1.25rem; }

.story-section { margin-top: clamp(52px, 8vw, 96px) !important; }

.story-section h2 {
  padding-top: clamp(18px, 3vw, 28px);
  border-top: 7px solid var(--stories-red);
}

.story-wide-figure {
  position: relative;
  left: 50%;
  width: min(var(--stories-wide), calc(100vw - 32px));
  margin-top: clamp(36px, 6vw, 72px) !important;
  margin-bottom: clamp(36px, 6vw, 72px) !important;
  transform: translateX(-50%);
}

.story-wide-figure img {
  aspect-ratio: 5 / 2;
  object-fit: cover;
}

.story-wide-figure figcaption {
  width: min(100% - 32px, var(--stories-reading));
  margin-right: auto;
  margin-left: auto;
}

.story-source-links {
  display: grid;
  gap: 0;
  margin: 2rem 0;
  border-top: 1px solid var(--stories-rule);
}

.story-source-links > div {
  display: grid;
  grid-template-columns: minmax(9rem, .7fr) minmax(0, 1.3fr);
  gap: 1rem;
  padding: 14px 0;
  border-bottom: 1px solid var(--stories-rule);
}

.story-source-links dt {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1.5;
  text-transform: uppercase;
}

.story-source-links dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 1rem;
  line-height: 1.5;
}

.story-source-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.story-author {
  margin-top: clamp(40px, 6vw, 64px) !important;
  padding-top: 20px;
  border-top: 1px solid var(--stories-rule);
}

.story-ending,
.story-article-footer {
  width: min(100%, var(--stories-reading));
  margin-right: auto;
  margin-left: auto;
}

.story-ending {
  margin-top: clamp(56px, 9vw, 112px);
  padding: clamp(26px, 5vw, 48px);
  color: var(--stories-paper);
  background: var(--stories-ink);
  border-left: 8px solid var(--stories-red);
}

.story-ending p {
  margin: 0;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: clamp(2.25rem, 6vw, 4.75rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: .92;
  text-transform: uppercase;
  text-wrap: balance;
}

.story-article-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: clamp(28px, 5vw, 52px);
  padding-top: 28px;
  border-top: 1px solid var(--stories-rule);
}

.story-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.story-action,
.story-share button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  border: 2px solid var(--stories-ink);
  border-radius: 0;
  color: var(--stories-ink);
  background: transparent;
  font: inherit;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}

.story-action-primary {
  color: var(--stories-paper);
  background: var(--stories-ink);
}

.story-action:hover,
.story-share button:hover {
  color: var(--stories-paper);
  background: var(--stories-red-text);
  border-color: var(--stories-red-text);
}

.story-share {
  display: grid;
  gap: 8px;
  justify-items: end;
}

.story-copy-status {
  min-height: 1.25rem;
  max-width: 22rem;
  color: var(--stories-muted-text);
  font-size: .78rem;
  line-height: 1.4;
  text-align: right;
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--stories-red);
  outline-offset: 4px;
}

@media (max-width: 800px) {
  .stories-main,
  .story-article { width: min(100% - 20px, var(--stories-wide)); margin-top: 10px; }
  .stories-featured { grid-template-columns: 1fr; }
  .stories-featured-copy { max-width: none; }
  .story-wide-figure { width: calc(100vw - 20px); }
}

@media (max-width: 480px) {
  .story-article { padding: 28px 16px 56px; }
  .story-article h1 { font-size: clamp(3rem, 17vw, 4.6rem); }
  .story-breadcrumb { align-items: flex-start; font-size: .68rem; }
  .story-source-links > div { grid-template-columns: 1fr; gap: .3rem; }
  .story-ending { padding: 24px 20px; }
  .story-article-footer,
  .story-actions,
  .story-action,
  .story-share,
  .story-share button { width: 100%; }
  .story-share { justify-items: stretch; }
  .story-copy-status { max-width: none; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }

  .stories-featured-media:hover img { transform: none; }
}

@media print {
  @page { margin: .65in; }

  html,
  body.stories-page {
    min-width: 0;
    color: #000;
    background: #fff !important;
  }

  .universal-header,
  .universal-footer,
  .story-breadcrumb,
  .story-actions,
  .story-share { display: none !important; }

  .story-article {
    width: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    color: #000;
    background: #fff !important;
  }

  .story-wide-figure {
    left: auto;
    width: 100%;
    transform: none;
    break-inside: avoid;
  }

  .story-cover-figure,
  .story-ending { break-inside: avoid; }

  .story-ending {
    color: #000;
    background: #fff;
    border: 3px solid #000;
  }

  a { color: #000 !important; }
}