/* The shelf's article system: every page the app publishes under justify.app
   (blog/, news/, case-studies/ and their indexes) wears these, inside the
   shell (shell.html). An article holds content only, marked up with the
   classes below; the look, the widths and the type live here, so a super-admin
   writes words and every page reads like the rest of the site at 390, 1440
   and 1920, and a restyle reaches every article without republishing one.

   PAGE        .sa-page (the article's root; switches the shell to full width)
               .sa-post · .sa-index · .sa-issue (what kind of page)
   HEADER      .sa-hero (the homepage hero card) > .sa-hero-in >
               .sa-kicker · h1 (one <em> accent) · .sa-lede · .sa-byline
               .sa-hero--photo: a post crowned by its photograph, the <img>
               the header's first child, then .sa-photo-note ("Illustration")
               .sa-cover (a picture under the header, 1200×630 or larger)
   MASTHEAD    .sa-paper (the weekly brief's front page): .sa-paper-top ·
               .sa-nameplate > .sa-seal + h1 · .sa-rules · .sa-dateline
   BODY        .sa-body: prose in a reading column of about 68 characters;
               children take .sa-wide (1180px) or .sa-full (edge to edge)
               .sa-figure (+ figcaption) · .sa-table (scrolls on a phone) ·
               .sa-callout · .sa-stats (> div > b + span) · .sa-steps (ol)
   INDEX       .sa-list around the app's <!-- shelf:list <area>/ --> cards
               (.shelf-card > a > img · .shelf-card-meta · h2 · p · time ·
               .shelf-card-foot); the first card with a picture is the
               feature; .sa-list--issues dresses them as the brief's issues
   FRONT PAGE  .sa-front > .sa-ticker · .sa-lead (figure + .sa-lead-text >
               .sa-big) · .sa-section-h · .sa-stories > .sa-story (.sa-src ·
               .sa-plat · h3 · .sa-key · details) · .sa-fold-note · .sa-pager
   ISSUE       .sa-items > .sa-item (time · h2 · p · .sa-source) · .sa-pager
               (an issue published before the front page)
   CLOSE       .sa-cta.sp-cta-strip > .sa-cta-in > h2 + .actions: partials.js
               puts the site's sign-up unit (and its trial line) in .actions;
               .sa-cta--brief carries the weekly brief's [data-brief-form].

   An article never carries its own <style>, fonts, widths or padding, and
   never states trial terms or prices: those come from here and partials.js. */

/* ── Page ─────────────────────────────────────────────────────────── */
.shelf-article:has(> .sa-page){ max-width: none; margin: 0; padding: 0; }
.sa-page{ --sa-inset: clamp(12px, 2vw, 24px); --sa-prose: 700px; --sa-wide: 1180px; padding-bottom: clamp(24px, 4vh, 48px); }
/* The site paints every <section> white: here that box would cut the header card's shadow off square. */
.sa-page > section:not(.sa-cta){ background: transparent; }

/* ── Header: the homepage hero card ───────────────────────────────── */
.sa-hero{
  position: relative; overflow: hidden; margin: var(--sa-inset) var(--sa-inset) 0;
  background: var(--d-bg); color: var(--d-ink); border-radius: 20px;
  box-shadow: 0 20px 60px -30px rgba(11,12,14,.25);
  padding: clamp(56px, 8vh, 92px) clamp(22px, 5vw, 72px) clamp(44px, 6vh, 64px);
}
.sa-hero > .grid-bg, .sa-cta > .grid-bg{ background-image: linear-gradient(to right, var(--d-hair) 1px, transparent 1px), linear-gradient(to bottom, var(--d-hair) 1px, transparent 1px); }
.sa-hero > .grid-bg{ z-index: 1; opacity: .55; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 35%, transparent 100%); mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 35%, transparent 100%); }
.sa-hero-in{ position: relative; z-index: 2; max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
.sa-kicker{
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--d-ink-mid); display: inline-flex; align-items: center; gap: 8px; margin: 0 0 22px;
}
.sa-kicker::before{ content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--d-accent); box-shadow: 0 0 8px var(--d-accent); flex: none; }
.sa-hero h1{
  font-family: var(--serif); font-weight: 700; font-size: clamp(36px, 4.6vw, 68px);
  line-height: 1; letter-spacing: -.035em; margin: 0 0 18px; color: #fff; max-width: 20ch; text-wrap: balance;
}
.sa-hero h1 em{ font-style: normal; color: var(--d-accent); }
.sa-lede{
  font-family: var(--sans); font-size: clamp(16px, 1.5vw, 19px); line-height: 1.5; letter-spacing: -.005em;
  color: var(--d-ink-soft); max-width: 54ch; margin: 0; text-wrap: pretty;
}
.sa-byline{
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 28px 0 0; padding: 16px 0 0;
  border-top: 1px solid rgba(255,255,255,.08); width: 100%; max-width: 520px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--d-ink-mid);
}
.sa-byline b{ font-weight: 600; color: var(--d-ink); }
.sa-cover{ max-width: var(--sa-wide); margin: calc(var(--sa-inset) * -0.5 + 24px) auto 0; padding: 0 var(--rail); }
.sa-cover img{ display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: 16px; border: 1px solid var(--hair); }

/* A post crowned by its photograph: the picture fills the hero card, the words
   sit on its darkest corner. Ed, 24 Oct 2026: every post opens on one. */
.sa-page .sa-hero--photo{ padding: 0; min-height: clamp(520px, 78vh, 820px); display: flex; align-items: flex-end; background: #0a0a0b; }
.sa-hero--photo > img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; z-index: 0; }
.sa-hero--photo::after{ content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(10,10,11,.72) 0%, rgba(10,10,11,.38) 42%, rgba(10,10,11,0) 68%), linear-gradient(180deg, rgba(10,10,11,0) 28%, rgba(10,10,11,.5) 58%, rgba(10,10,11,.93) 100%); }
.sa-page .sa-hero--photo .sa-hero-in{ z-index: 2; align-items: flex-start; text-align: left; width: 100%; max-width: 1180px; padding: clamp(28px, 5vw, 64px); margin: 0 auto; }
.sa-page .sa-hero--photo h1{ max-width: 17ch; font-size: clamp(36px, 4.8vw, 72px); }
.sa-page .sa-hero--photo .sa-lede{ color: rgba(255,255,255,.82); max-width: 52ch; }
.sa-page .sa-hero--photo .sa-byline{ justify-content: flex-start; max-width: none; width: auto; border-top-color: rgba(255,255,255,.2); color: rgba(255,255,255,.7); }
.sa-page .sa-hero--photo .sa-kicker{ color: rgba(255,255,255,.75); }
.sa-photo-note{ position: absolute; z-index: 2; bottom: 20px; right: 22px; padding: 6px 11px; border-radius: 999px; background: rgba(10,10,11,.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.78); }

/* ── Masthead: the weekly brief's front page ──────────────────────── */
.sa-paper{ position: relative; margin: var(--sa-inset) var(--sa-inset) 0; background: #fff; border: 1px solid var(--hair-2); border-radius: 20px; padding: clamp(26px, 4vw, 48px) clamp(20px, 5vw, 64px) clamp(22px, 3vw, 36px); box-shadow: 0 20px 60px -34px rgba(11,12,14,.25); }
.sa-paper-top{ display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mid); }
.sa-nameplate{ display: flex; align-items: center; justify-content: center; gap: clamp(14px, 2.2vw, 30px); margin: clamp(18px, 3vw, 30px) 0 clamp(14px, 2vw, 22px); }
.sa-nameplate h1{ margin: 0; font-family: var(--serif); font-weight: 800; font-size: clamp(40px, 7.4vw, 112px); line-height: .9; letter-spacing: -.055em; color: var(--ink); text-align: center; }
.sa-nameplate h1 em{ font-style: normal; color: var(--accent); }
.sa-seal{ flex: none; width: clamp(64px, 8vw, 112px); height: auto; }
.sa-rules{ height: 7px; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink); }
.sa-dateline{ display: flex; justify-content: space-between; gap: 10px 18px; flex-wrap: wrap; padding: 12px 0 0; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.sa-dateline span:nth-child(2){ color: var(--ink-mid); }
.sa-paper .sa-lede{ color: var(--ink-soft); text-align: center; margin: 18px auto 0; max-width: 62ch; font-size: clamp(15px, 1.3vw, 17px); }

/* ── Body: a reading column, with wide and full lanes ─────────────── */
.sa-body{
  display: grid; padding: clamp(44px, 7vh, 80px) 0 0;
  grid-template-columns:
    [full-start] minmax(var(--rail), 1fr)
    [wide-start] minmax(0, calc((var(--sa-wide) - var(--sa-prose)) / 2))
    [prose-start] min(var(--sa-prose), calc(100% - 2 * var(--rail)))
    [prose-end] minmax(0, calc((var(--sa-wide) - var(--sa-prose)) / 2))
    [wide-end] minmax(var(--rail), 1fr) [full-end];
  font-family: var(--sans); font-size: 17px; line-height: 1.7; color: var(--ink-soft);
}
@media (min-width: 1200px){ .sa-body{ font-size: 18px; } }
.sa-body > *{ grid-column: prose; min-width: 0; }
.sa-body > .sa-wide{ grid-column: wide; }
.sa-body > .sa-full{ grid-column: full; }
.sa-body p{ margin: 0 0 1.15em; text-wrap: pretty; }
.sa-body h2{
  font-family: var(--serif); font-weight: 700; font-size: clamp(26px, 2.4vw, 36px); line-height: 1.12;
  letter-spacing: -.025em; color: var(--ink); margin: 1.7em 0 .5em; text-wrap: balance;
}
.sa-body h2 em, .sa-body h3 em{ font-style: normal; color: var(--accent-ink); }
.sa-body h3{ font-family: var(--serif); font-weight: 600; font-size: clamp(19px, 1.5vw, 22px); line-height: 1.25; letter-spacing: -.015em; color: var(--ink); margin: 1.6em 0 .45em; }
.sa-body > :first-child{ margin-top: 0; }
.sa-body a{ color: var(--accent-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sa-body a:hover{ text-decoration-thickness: 2px; }
.sa-body strong{ color: var(--ink); font-weight: 600; }
.sa-body ul, .sa-body ol{ margin: 0 0 1.2em; padding-left: 1.25em; }
.sa-body li{ margin: 0 0 .45em; padding-left: .2em; }
.sa-body li::marker{ color: var(--ink-mid); }
.sa-body blockquote{
  margin: 1.6em 0; padding: 0 0 0 22px; border-left: 3px solid var(--accent);
  font-family: var(--serif); font-size: clamp(20px, 1.8vw, 24px); line-height: 1.35; letter-spacing: -.015em; color: var(--ink);
}
.sa-body blockquote p{ margin: 0 0 .5em; }
.sa-body blockquote cite{ display: block; font-family: var(--mono); font-style: normal; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mid); }
.sa-body hr{ border: 0; border-top: 1px solid var(--hair-2); margin: 2.4em 0; }

/* Pictures: a real file at twice the width it shows, with width and height. */
.sa-figure{ margin: 1.8em 0 2em; }
.sa-figure img, .sa-figure video{ display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--hair); background: var(--bg-1); }
.sa-figure figcaption{ margin: 12px 0 0; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; line-height: 1.5; color: var(--ink-mid); text-align: center; }

/* Tables: full width on a desktop, a sideways scroll on a phone. */
.sa-table{ margin: 1.8em 0 2em; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--hair-2); border-radius: 14px; background: var(--bg); }
.sa-table table{ width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.sa-table th{ text-align: left; font-family: var(--mono); font-weight: 500; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mid); background: var(--bg-1); padding: 12px 16px; border-bottom: 1px solid var(--hair-2); }
.sa-table td{ padding: 14px 16px; border-bottom: 1px solid var(--hair); vertical-align: top; color: var(--ink-soft); }
.sa-table tr:last-child td{ border-bottom: 0; }
.sa-table td:first-child{ color: var(--ink); font-weight: 600; }

.sa-callout{ margin: 1.8em 0 2em; padding: 20px 24px; background: var(--bg-1); border: 1px solid var(--hair); border-left: 3px solid var(--accent); border-radius: 12px; }
.sa-callout > :last-child{ margin-bottom: 0; }
.sa-callout h3{ margin-top: 0; }

.sa-stats{ margin: 1.8em 0 2em; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.sa-stats > div{ border: 1px solid var(--hair-2); border-radius: 14px; padding: 18px 20px; background: var(--bg); }
.sa-stats b{ display: block; font-family: var(--serif); font-weight: 700; font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -.03em; line-height: 1.05; color: var(--ink); margin: 0 0 6px; }
.sa-stats span{ display: block; font-size: 14.5px; line-height: 1.45; color: var(--ink-mid); }
.sa-stats small{ display: block; margin-top: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mid); }

.sa-steps{ list-style: none; counter-reset: sa-step; padding: 0 !important; margin: 1.6em 0 2em; display: grid; gap: 12px; }
.sa-steps > li{ counter-increment: sa-step; position: relative; padding: 18px 20px 18px 64px !important; margin: 0 !important; border: 1px solid var(--hair-2); border-radius: 14px; }
.sa-steps > li::before{ content: counter(sa-step, decimal-leading-zero); position: absolute; left: 20px; top: 18px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--accent-ink); }
.sa-steps > li > :first-child{ margin-top: 0; }
.sa-steps > li > :last-child{ margin-bottom: 0; }

/* ── Index pages: the app's cards as a grid ───────────────────────── */
.sa-list{ max-width: calc(var(--sa-wide) + 2 * var(--rail)); margin: 0 auto; padding: clamp(40px, 6vh, 72px) var(--rail) 0; }
.sa-list .shelf-list{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 24px; }
.sa-list .shelf-list:empty::before{ content: 'The first piece is on its way.'; display: block; padding: 40px 24px; border: 1px dashed var(--hair-3); border-radius: 16px; text-align: center; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mid); }
.sa-list .shelf-card a{
  display: flex; flex-direction: column; height: 100%; overflow: hidden; color: inherit; text-decoration: none;
  border: 1px solid var(--hair-2); border-radius: 16px; background: var(--bg);
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.sa-list .shelf-card a:hover{ border-color: var(--hair-3); box-shadow: 0 18px 40px -26px rgba(11,12,14,.35); transform: translateY(-2px); }
.sa-list .shelf-card a:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }
.sa-list .shelf-card img{ display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: 1px solid var(--hair); }
/* The site's square logo was the default share picture: no card shows it. */
.sa-list .shelf-card img[src$="/assets/justify-logo.png"]{ display: none; }
.sa-list .shelf-card h2{ order: 2; margin: 0; padding: 18px 22px 8px; font-family: var(--serif); font-weight: 700; font-size: 20px; line-height: 1.2; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.sa-list .shelf-card p{ order: 3; margin: 0; padding: 0 22px; font-size: 15px; line-height: 1.55; color: var(--ink-mid); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sa-list .shelf-card time{ order: 1; display: block; padding: 20px 22px 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mid); }
.sa-list .shelf-card a::after{ content: 'Read →'; order: 4; margin-top: auto; padding: 16px 22px 20px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); }
/* What the card is: a post's topic, author and reading time, an issue's week. */
.sa-list .shelf-card-meta{ order: 1; display: flex; flex-wrap: wrap; gap: 6px 10px; padding: 20px 22px 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mid); }
.sa-list .shelf-card-meta b{ color: var(--accent-ink); font-weight: 500; }
.sa-list .shelf-card a:has(> .shelf-card-meta) > time{ display: none; }
/* The newest piece with a picture leads the index, its picture beside its words. */
@media (min-width: 900px){
  .sa-list:not(.sa-list--issues) .shelf-card:first-child:has(> a > img){ grid-column: 1 / -1; }
  .sa-list:not(.sa-list--issues) .shelf-card:first-child > a:has(> img){ display: grid; grid-template-columns: 1.45fr 1fr; grid-template-rows: auto auto auto 1fr; }
  .sa-list:not(.sa-list--issues) .shelf-card:first-child > a > img{ grid-row: 1 / span 5; grid-column: 1; height: 100%; aspect-ratio: auto; min-height: 420px; border-bottom: 0; border-right: 1px solid var(--hair); }
  .sa-list:not(.sa-list--issues) .shelf-card:first-child > a:has(> img) > :not(img), .sa-list:not(.sa-list--issues) .shelf-card:first-child > a:has(> img)::after{ grid-column: 2; }
  .sa-list:not(.sa-list--issues) .shelf-card:first-child > a:has(> img) > .shelf-card-meta, .sa-list:not(.sa-list--issues) .shelf-card:first-child > a:has(> img) > time{ padding: 40px 40px 0; }
  .sa-list:not(.sa-list--issues) .shelf-card:first-child > a:has(> img) > h2{ padding: 16px 40px 12px; font-size: clamp(28px, 2.6vw, 40px); line-height: 1.08; letter-spacing: -.03em; }
  .sa-list:not(.sa-list--issues) .shelf-card:first-child > a:has(> img) > p{ padding: 0 40px; font-size: 16.5px; -webkit-line-clamp: 4; }
  .sa-list:not(.sa-list--issues) .shelf-card:first-child > a:has(> img)::after{ padding: 24px 40px 40px; align-self: end; }
}

/* The weekly brief's issues: its lead picture under the brief's seal, the
   week, the lead story, its sources' logos and how many stories it holds. */
.sa-list--issues .shelf-list{ grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); }
.sa-list--issues .shelf-card a{ position: relative; container-type: inline-size; }
.sa-list--issues .shelf-card img{ aspect-ratio: 16 / 8; }
.sa-list--issues .shelf-card a::before{ content: ''; order: 0; flex: none; background: url(/assets/brief-seal.svg) center / 128px no-repeat, radial-gradient(ellipse at 30% 20%, #1b1e23, #0a0a0b 70%); aspect-ratio: 16 / 8; border-bottom: 1px solid var(--hair); }
.sa-list--issues .shelf-card a:has(> img)::before{ position: absolute; z-index: 1; top: calc(50cqi - 92px); right: 16px; width: 76px; height: 76px; aspect-ratio: auto; border: 0; background: url(/assets/brief-seal.svg) center / contain no-repeat; filter: drop-shadow(0 6px 18px rgba(0,0,0,.35)); }
.sa-list--issues .shelf-card h2{ padding: 10px 24px 0; font-size: clamp(21px, 1.9vw, 26px); line-height: 1.15; letter-spacing: -.025em; }
.sa-list--issues .shelf-card-meta{ padding: 20px 24px 0; }
.sa-list--issues .shelf-card a:has(> .shelf-card-foot)::after{ display: none; }
.sa-list .shelf-card-foot{ order: 4; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding: 16px 24px 22px; }
.shelf-logos{ display: flex; align-items: center; }
.shelf-logos img, .sa-list .shelf-card .shelf-logos img{ width: 26px; height: 26px; aspect-ratio: auto; border-radius: 50%; border: 2px solid #fff; background: #fff; box-shadow: 0 0 0 1px var(--hair-2); object-fit: contain; padding: 3px; margin-left: -6px; }
.shelf-logos img:first-child, .sa-list .shelf-card .shelf-logos img:first-child{ margin-left: 0; }
.shelf-card-count{ font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); }

/* ── An issue as a front page ─────────────────────────────────────── */
.sa-front{ max-width: calc(var(--sa-wide) + 2 * var(--rail)); margin: 0 auto; padding: clamp(28px, 4vh, 48px) var(--rail) 0; }
.sa-ticker{ display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; padding: 0 0 22px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mid); }
.sa-ticker b{ color: var(--ink); font-weight: 600; }
.sa-lead{ display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(20px, 3vw, 44px); align-items: stretch; padding-bottom: clamp(28px, 4vw, 44px); border-bottom: 3px solid var(--ink); }
.sa-lead:not(:has(> figure)){ grid-template-columns: minmax(0, 860px); justify-content: center; }
.sa-lead figure{ margin: 0; display: flex; flex-direction: column; gap: 10px; }
.sa-lead figure img{ width: 100%; height: 100%; min-height: 320px; object-fit: cover; border-radius: 14px; display: block; }
.sa-lead figcaption{ font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mid); }
.sa-lead-text{ display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.sa-lead h2{ margin: 0; font-family: var(--serif); font-weight: 800; font-size: clamp(32px, 3.4vw, 52px); line-height: 1; letter-spacing: -.04em; color: var(--ink); text-wrap: balance; }
.sa-big{ display: flex; align-items: baseline; gap: 14px; padding: 14px 0; border-top: 1px solid var(--hair-2); border-bottom: 1px solid var(--hair-2); }
.sa-big b{ font-family: var(--serif); font-weight: 800; font-size: clamp(56px, 6vw, 92px); line-height: .85; letter-spacing: -.05em; color: var(--accent); }
.sa-big span{ font-size: 15px; line-height: 1.35; color: var(--ink-soft); max-width: 22ch; }
.sa-story-line{ font-size: 17px; line-height: 1.55; color: var(--ink-soft); margin: 0; }
.sa-src{ display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.sa-src img{ width: 20px; height: 20px; border-radius: 5px; box-shadow: 0 0 0 1px var(--hair-2); background: #fff; padding: 2px; }
.sa-src:hover{ color: var(--accent-ink); }
.sa-row{ display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sa-when{ font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mid); }
/* A story's platforms, as the brand marks in /icons/brands. */
.sa-plat{ display: inline-flex; gap: 6px; }
.sa-plat > span{ width: 26px; height: 26px; border-radius: 7px; background: var(--ink); display: inline-block; position: relative; }
.sa-plat > span::before{ content: ''; position: absolute; inset: 5px; background: #fff; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.sa-p-instagram{ --icon: url(/icons/brands/brandsInstagram.svg); }
.sa-p-tiktok{ --icon: url(/icons/brands/brandsTiktok.svg); }
.sa-p-youtube{ --icon: url(/icons/brands/brandsYoutube.svg); }
.sa-p-twitch{ --icon: url(/icons/brands/brandsTwitch.svg); }
.sa-p-amazon{ --icon: url(/icons/brands/brandsAmazon.svg); }
.sa-p-facebook{ --icon: url(/icons/brands/brandsFacebook.svg); }
.sa-p-snapchat{ --icon: url(/icons/brands/brandsSnapchat.svg); }
.sa-p-pinterest{ --icon: url(/icons/brands/brandsPinterest.svg); }
.sa-p-linkedin{ --icon: url(/icons/brands/brandsLinkedin.svg); }
.sa-p-x{ --icon: url(/icons/brands/brandsXTwitter.svg); }
.sa-p-threads{ --icon: url(/icons/brands/brandsThreads.svg); }
.sa-p-reddit{ --icon: url(/icons/brands/brandsReddit.svg); }
.sa-p-spotify{ --icon: url(/icons/brands/brandsSpotify.svg); }
.sa-p-whatsapp{ --icon: url(/icons/brands/brandsWhatsapp.svg); }
.sa-p-shopify{ --icon: url(/icons/brands/brandsShopify.svg); }
.sa-section-h{ display: flex; align-items: center; gap: 14px; margin: clamp(28px, 4vw, 40px) 0 18px; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.sa-section-h::after{ content: ''; flex: 1; border-top: 1px solid var(--ink); }
.sa-stories{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--hair-2); }
.sa-story{ padding: 24px 26px 26px 0; border-bottom: 1px solid var(--hair-2); display: flex; flex-direction: column; gap: 12px; }
.sa-story:nth-child(odd){ border-right: 1px solid var(--hair-2); }
.sa-story:nth-child(even){ padding-left: 26px; padding-right: 0; }
.sa-story h3{ margin: 0; font-family: var(--serif); font-weight: 700; font-size: clamp(21px, 1.8vw, 26px); line-height: 1.15; letter-spacing: -.025em; color: var(--ink); text-wrap: balance; }
.sa-key{ display: flex; align-items: center; gap: 12px; }
.sa-key b{ font-family: var(--serif); font-weight: 800; font-size: 34px; letter-spacing: -.04em; line-height: 1; color: var(--accent-ink); }
.sa-key span{ font-size: 14.5px; line-height: 1.35; color: var(--ink-soft); }
.sa-story details{ font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.sa-story summary{ cursor: pointer; list-style: none; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mid); }
.sa-story summary::-webkit-details-marker{ display: none; }
.sa-story summary::after{ content: ' +'; }
.sa-story details[open] summary::after{ content: ' −'; }
.sa-story details p{ margin: 10px 0 0; }
.sa-fold-note{ text-align: center; margin: 26px 0 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mid); }
.sa-front .sa-pager{ justify-content: center; margin: 18px 0 0; }
.sa-front .sa-pager a{ color: var(--ink); text-decoration: none; }
.sa-front .sa-pager a:hover{ color: var(--accent-ink); }
@media (max-width: 860px){
  .sa-lead{ grid-template-columns: 1fr; }
  .sa-lead figure img{ min-height: 0; aspect-ratio: 16 / 10; }
  .sa-stories{ grid-template-columns: 1fr; }
  .sa-story, .sa-story:nth-child(even){ padding: 22px 0; border-right: 0; }
}

/* ── A weekly issue ───────────────────────────────────────────────── */
.sa-body .sa-items{ list-style: none; counter-reset: sa-item; padding: 0; margin: 0; }
.sa-body .sa-item{ counter-increment: sa-item; position: relative; margin: 0; padding: 28px 0 30px; border-top: 1px solid var(--hair-2); }
.sa-body .sa-item:last-child{ border-bottom: 1px solid var(--hair-2); }
.sa-item::before{ content: counter(sa-item, decimal-leading-zero); display: block; margin: 0 0 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--accent-ink); }
.sa-item time{ display: block; margin: 0 0 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mid); }
.sa-body .sa-item h2{ margin: 0 0 .45em; font-size: clamp(21px, 1.8vw, 26px); }
.sa-item p{ margin: 0 0 .8em; }
.sa-source{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 14px 0 0 !important; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.sa-body .sa-source a{ color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hair-3); padding-bottom: 1px; }
.sa-body .sa-source a:hover{ border-bottom-color: var(--ink); }
.sa-pager{ display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin: 32px 0 0; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.sa-body .sa-pager a{ color: var(--ink); text-decoration: none; }
.sa-body .sa-pager a:hover{ color: var(--accent-ink); }

/* ── Close: the site's sign-up band ───────────────────────────────── */
.sa-cta{
  position: relative; overflow: hidden; margin: clamp(56px, 9vh, 110px) var(--sa-inset) 0;
  background: var(--d-bg); color: var(--d-ink); border-radius: 20px;
  padding: clamp(56px, 9vh, 96px) clamp(22px, 5vw, 72px);
}
.sa-cta > .grid-bg{ z-index: 1; opacity: .5; }
.sa-cta-in{ position: relative; z-index: 2; max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
.sa-cta h2{ font-family: var(--serif); font-weight: 700; font-size: clamp(32px, 3.6vw, 56px); line-height: 1; letter-spacing: -.035em; color: #fff; margin: 0 0 14px; text-wrap: balance; }
.sa-cta h2 em{ font-style: normal; color: var(--d-accent); }
.sa-cta p{ color: var(--d-ink-soft); font-size: clamp(15px, 1.3vw, 17px); line-height: 1.5; max-width: 46ch; margin: 0 0 28px; }
.sa-cta .actions{ width: 100%; display: flex; justify-content: center; }
.sa-cta .jv-signup{ margin: 0 auto; }

/* The weekly brief's subscribe form, in the sign-up unit's shape. */
.sa-cta--brief form{ display: flex; width: 100%; max-width: 440px; margin: 0 auto; padding: 5px; border: 1px solid var(--d-hair-3); border-radius: 999px; background: rgba(255,255,255,.04); }
.sa-cta--brief input[type="email"]{ flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--d-ink); font: inherit; font-size: 15px; padding: 0 16px; }
.sa-cta--brief input[type="email"]::placeholder{ color: var(--d-ink-mid); }
.sa-cta--brief button{ display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; background: var(--d-ink); color: var(--d-bg); font: inherit; font-size: 14px; font-weight: 600; padding: 11px 20px; cursor: pointer; transition: background .18s; }
.sa-cta--brief button:hover{ background: var(--d-accent); }
.sa-cta--brief button svg{ width: 16px; height: 12px; }

/* ── Phones ───────────────────────────────────────────────────────── */
@media (max-width: 640px){
  .sa-hero{ padding: 44px 22px 40px; }
  .sa-hero h1{ font-size: clamp(32px, 9.6vw, 42px); }
  .sa-lede{ font-size: 15.5px; }
  .sa-body{ font-size: 16.5px; }
  .sa-cta{ padding: 48px 22px; }
  .sa-nameplate{ flex-direction: column; gap: 10px; }
  .sa-dateline, .sa-paper-top{ justify-content: center; text-align: center; }
  .sa-paper-top span:nth-child(2){ display: none; }
  .sa-photo-note{ display: none; }
}