/* Spread Light 358 — the website of the printed weekly.

   Direction: "the press room". Everything here is borrowed from the booklet,
   not invented alongside it — the same cream stock, the same indigo ink, the
   same gold rule, the same two typefaces. Structure is carried by hairlines and
   column gutters the way it is on the printed page, so nothing floats: no card
   shadows, no rounded boxes, no gradients. A reader who has the paper in hand
   should recognise the screen as the same publication. */

@font-face { font-family: 'Fraunces'; src: url('fonts/Fraunces.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('fonts/Fraunces-Italic.ttf') format('truetype'); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('fonts/Newsreader.ttf') format('truetype'); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('fonts/Newsreader-Italic.ttf') format('truetype'); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('fonts/InstrumentSans-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('fonts/InstrumentSans-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('fonts/InstrumentSans-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('fonts/InstrumentSans-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Instrument Cond'; src: url('fonts/InstrumentSans_Condensed-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Noto Serif Hebrew'; src: url('fonts/NotoSerifHebrew-VariableFont_wdth,wght.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }

:root {
  /* Sampled from the printed page, not chosen on screen. */
  --stock:      #FBF8F2;
  --stock-deep: #F4EFE3;   /* the one tint used to separate a band from the page */
  --indigo:     #191340;
  --indigo-far: #443A7C;
  --gold:       #E0B25A;
  --gold-deep:  #B8862F;   /* darkened from the print gold to clear 4.5:1 on stock */
  --ink:        #1B1633;
  --ink-soft:   #5D5675;   /* darkened from print's #6E6885 for the same reason */
  --rule:       #DED4C0;
  --rule-firm:  #C3B9A3;

  /* 1.333 from 1rem: 17, 22.7, 30.2, 40.3, 53.7, 71.6. Display sizes below are
     clamped off that scale rather than picked by eye. */
  --measure: 68ch;
  --gutter: 34px;
  --pad: clamp(20px, 5vw, 56px);
  --shell: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 86px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--stock);
  color: var(--ink);
  font-family: 'Newsreader', Georgia, serif;
  font-size: 17px;
  line-height: 1.7;
  font-variation-settings: 'wght' 400;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 var(--pad); }

/* ---------- ranks and rules ---------- */

/* The kicker above a headline. Same job, same setting as in the booklet:
   condensed-ish sans, wide tracking, deep gold, and it never grows. */
.rank {
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 10px;
}
.rank.ink { color: var(--indigo); }

.byline {
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}

hr.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }
hr.rule-firm { border: 0; border-top: 2px solid var(--indigo); margin: 0; }

/* ---------- masthead bar ---------- */

.topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(251, 248, 242, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.topbar .shell {
  display: flex; align-items: center; gap: 22px;
  height: 62px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.brand img { width: 26px; height: 26px; }
.brand span {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--indigo);
}
.nav { display: flex; gap: 26px; margin-left: auto; }
.nav a {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; color: var(--ink-soft);
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: color 180ms ease-out, border-color 180ms ease-out;
}
.nav a:hover, .nav a:focus-visible { color: var(--indigo); border-bottom-color: var(--gold); }
.nav a[aria-current='page'] { color: var(--indigo); border-bottom-color: var(--indigo); }

.btn {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 18px;
  min-height: 44px;
  border: 1.5px solid var(--indigo);
  color: var(--stock); background: var(--indigo);
  transition: background 180ms ease-out, color 180ms ease-out;
}
.btn:hover, .btn:focus-visible { background: var(--indigo-far); }
.btn.ghost { background: none; color: var(--indigo); }
.btn.ghost:hover, .btn.ghost:focus-visible { background: var(--indigo); color: var(--stock); }
.btn svg { width: 14px; height: 14px; flex: none; }

/* ---------- the flag ---------- */

/* The cover's own arrangement: sunburst and wordmark left, the week's standing
   data ruled off to the right. */
.flag { padding: clamp(30px, 6vw, 62px) 0 0; }
.flag-row {
  display: flex; align-items: flex-end; gap: 30px; flex-wrap: wrap;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--indigo);
}
.wordmark {
  display: flex; align-items: center; gap: 16px;
  flex: 1 1 340px; min-width: 0;
  text-decoration: none;
}
.wordmark img { width: clamp(44px, 6vw, 66px); height: auto; flex: none; }
.wordmark h1 {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'opsz' 120, 'wght' 640, 'SOFT' 30;
  font-size: clamp(2.4rem, 6.4vw, 4.1rem);
  line-height: 0.92;
  letter-spacing: -0.022em;
  color: var(--indigo);
}
.wordmark h1 em { font-style: normal; color: var(--gold-deep); }

.standing {
  flex: none;
  display: grid; grid-template-columns: auto auto; gap: 2px 18px;
  align-items: baseline;
  border-top: 2px solid var(--indigo);
  padding-top: 8px;
}
.standing dt {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-soft);
}
.standing dd {
  margin: 0; text-align: right;
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 40, 'wght' 620;
  font-size: 1.28rem; line-height: 1.3;
  color: var(--indigo);
}
.standing .place {
  grid-column: 1 / -1; text-align: right;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 4px;
}

.issueline {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding: 10px 0 0;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--indigo);
}
.issueline .soft { color: var(--ink-soft); font-weight: 600; }
/* Fraunces carries no Hebrew, so the parsha sets in the same Noto face the
   booklet uses for its own Hebrew rather than falling through to whatever the
   reader's system offers. */
.issueline .heb {
  margin-left: auto;
  font-family: 'Noto Serif Hebrew', serif;
  direction: rtl;
  font-size: 1.5rem; line-height: 1.35;
  letter-spacing: 0; text-transform: none;
  font-variation-settings: 'wght' 620;
  color: var(--indigo);
}

/* ---------- the plate ---------- */

.plate {
  margin-top: 22px;
  aspect-ratio: 3.07 / 1;
  overflow: hidden;
  background: var(--indigo);
}
.plate img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- the lead ---------- */

.lead { padding: clamp(26px, 4vw, 44px) 0 0; }
.lead-head { display: flex; align-items: center; gap: 24px; }
.lead-head .text { flex: 0 1 auto; min-width: 0; }
.lead-head img.shot {
  flex: none; width: 74px; height: 74px;
  border-radius: 50%; object-fit: cover;
  border: 1.5px solid var(--gold);
}
h2.display, h1.display {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'opsz' 96, 'wght' 620, 'SOFT' 30;
  font-size: clamp(2.1rem, 5.6vw, 3.6rem);
  line-height: 1.03;
  letter-spacing: -0.018em;
  color: var(--indigo);
}
h2.display a, h1.display a { text-decoration: none; }
h2.display a:hover, h2.display a:focus-visible { color: var(--indigo-far); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 5px; }
.lead-head .byline { margin-top: 12px; }

/* Two text columns under the lead, the way the cover runs. */
.cols2 {
  margin-top: 26px;
  columns: 2; column-gap: var(--gutter); column-rule: 1px solid var(--rule);
}
.cols2 p { margin: 0 0 1em; }
.cols2 p:first-child { margin-top: 0; }

/* The gold two-line drop cap, ported straight off the page. */
.dropcap::first-letter {
  float: left;
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 60, 'wght' 620;
  font-size: 3.55em;
  line-height: 0.86;
  padding: 0.06em 0.07em 0 0;
  color: var(--gold-deep);
}

.readon {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 8px;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--indigo); text-decoration: none;
  border-bottom: 2px solid var(--gold);
  padding-bottom: 3px;
  transition: gap 180ms ease-out, border-color 180ms ease-out;
}
.readon:hover, .readon:focus-visible { gap: 14px; border-bottom-color: var(--indigo); }

/* ---------- section headings ---------- */

.sect { margin-top: clamp(46px, 7vw, 78px); }
.sect-head {
  display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
  padding-bottom: 9px;
  border-bottom: 2px solid var(--indigo);
}
.sect-head h2 {
  margin: 0;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--indigo);
}
.sect-head .note {
  margin: 0 0 0 auto;
  font-size: 0.95rem; font-style: italic; color: var(--ink-soft);
}
.sect-head .note a { color: var(--gold-deep); }

/* ---------- the week's contents ---------- */

.pieces {
  display: grid; gap: 0 var(--gutter);
  grid-template-columns: repeat(3, 1fr);
}
.piece {
  padding: 22px 0 24px;
  border-bottom: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 9px;
}
/* A hairline between columns, drawn on the item rather than the grid so it
   stops at the last row instead of running past the copy. */
.pieces .piece:not(:nth-child(3n+1)) {
  border-left: 1px solid var(--rule);
  padding-left: var(--gutter);
  margin-left: calc(var(--gutter) / -2 - 0.5px);
}
.piece h3 {
  margin: 0;
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 42, 'wght' 600, 'SOFT' 25;
  font-size: 1.42rem; line-height: 1.16;
  letter-spacing: -0.012em;
  color: var(--indigo);
}
.piece h3 a { text-decoration: none; }
.piece h3 a:hover, .piece h3 a:focus-visible { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.piece p { margin: 0; color: #342E4C; }
.piece .who { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 6px; }
.piece .who img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 1px solid var(--gold); flex: none; }

/* ---------- the sponsor wall ----------

   Every mark that has carried a week, set on the cream at one weight. No boxes
   and no tiering: a sponsor who took one issue sits the same size as one who
   took ten, which is how the back page treats them too. */
.wall {
  display: grid; gap: 10px 28px;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  margin-top: 30px;
  align-items: center;
}
.wall .mark {
  height: 74px;
  display: flex; align-items: center; justify-content: center;
  padding: 6px 4px;
}
.wall .mark img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  filter: saturate(0.92);
  transition: filter 200ms ease-out, transform 200ms ease-out;
}
.wall .mark:hover img { filter: none; transform: scale(1.03); }
.wall .m-anochi { max-height: 76%; }
.wall .m-innovara { max-width: 84%; }
.wall .m-wanderings { max-height: 92%; }

/* ---------- signing up ---------- */

.signup { flex: 0 1 380px; }
.signup label {
  display: block; margin-bottom: 8px;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold);
}
.signup .row { display: flex; gap: 10px; flex-wrap: wrap; }
.signup input {
  flex: 1 1 200px; min-width: 0;
  font-family: 'Newsreader', serif; font-size: 1rem;
  padding: 12px 14px; min-height: 44px;
  color: var(--stock);
  background: rgba(251, 248, 242, 0.06);
  border: 1.5px solid rgba(207, 199, 219, 0.5);
}
.signup input::placeholder { color: #8F88A8; }
.signup input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.signup .fineprint {
  margin: 10px 0 0;
  font-size: 0.84rem; color: #A9A2BE;
}

/* ---------- the partnership close ---------- */

/* Following the sign-up band directly, the gap between two indigo blocks reads
   as a mistake rather than a division — the gold rule is the divider. */
.band + .partnership { margin-top: 0; }
.partnership {
  margin-top: clamp(52px, 8vw, 88px);
  background: var(--indigo);
  color: var(--stock);
  border-top: 4px solid var(--gold);
}
.partnership .shell {
  padding-top: clamp(48px, 7vw, 82px);
  padding-bottom: clamp(48px, 7vw, 82px);
  max-width: 860px;
}
.partnership .rank { color: var(--gold); }
.partnership h2 {
  margin: 0 0 16px;
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 96, 'wght' 600, 'SOFT' 30;
  font-size: clamp(1.9rem, 4.6vw, 3rem); line-height: 1.06;
  letter-spacing: -0.018em;
}
.partnership p { margin: 0; max-width: 56ch; color: #CFC7DB; font-size: 1.06rem; }
.partnership .acts { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.partnership .btn { background: var(--gold); border-color: var(--gold); color: var(--indigo); }
.partnership .btn:hover { background: var(--stock); border-color: var(--stock); }
.btn.ghost.light { background: none; color: var(--stock); border-color: rgba(251, 248, 242, 0.55); }
.btn.ghost.light:hover, .btn.ghost.light:focus-visible { background: var(--stock); color: var(--indigo); border-color: var(--stock); }

/* ---------- how a piece becomes a page ----------

   The four steps follow the booklet's own week: written, sent, set, printed.
   The numeral is the furniture — oversized, gold, and hanging in the margin the
   way a drop cap hangs in a column. */
.steps {
  display: grid; gap: 0 var(--gutter);
  grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(38px, 5vw, 56px);
}
.step {
  padding: 20px 0 26px;
  border-top: 2px solid var(--indigo);
}
.step + .step { border-left: 1px solid var(--rule); padding-left: var(--gutter); margin-left: calc(var(--gutter) / -2 - 0.5px); }
.step .n {
  display: block;
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 96, 'wght' 620, 'SOFT' 30;
  font-size: 3.2rem; line-height: 0.9;
  color: var(--gold);
}
.step h2 {
  margin: 12px 0 8px;
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 42, 'wght' 600, 'SOFT' 25;
  font-size: 1.32rem; line-height: 1.14; color: var(--indigo);
}
.step p { margin: 0; color: #342E4C; font-size: 0.99rem; }

.needs {
  display: grid; gap: 0 var(--gutter);
  grid-template-columns: repeat(3, 1fr);
  margin-top: 26px;
}
.need { padding: 20px 0 22px; border-bottom: 1px solid var(--rule); }
.needs .need:not(:nth-child(3n+1)) {
  border-left: 1px solid var(--rule);
  padding-left: var(--gutter);
  margin-left: calc(var(--gutter) / -2 - 0.5px);
}
.need h3 {
  margin: 0 0 7px;
  font-family: 'Instrument Cond', 'Instrument Sans', sans-serif;
  font-weight: 700; font-size: 1.02rem;
  letter-spacing: 0.01em; text-transform: uppercase;
  color: #3A2E8E;
}
.need p { margin: 0; color: #342E4C; font-size: 0.99rem; }

/* ---------- the submission form ---------- */

.submitform { margin-top: 30px; max-width: 780px; }
.submitform .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px var(--gutter); }
.submitform label { display: block; margin-bottom: 18px; }
.submitform label > span {
  display: block; margin-bottom: 7px;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-deep);
}
.submitform label > span em { font-style: normal; color: var(--ink-soft); letter-spacing: 0.12em; }
.submitform input, .submitform select, .submitform textarea {
  width: 100%; min-height: 48px;
  font-family: 'Newsreader', Georgia, serif; font-size: 1rem;
  color: var(--ink); background: #fff;
  border: 1.5px solid var(--rule-firm);
  padding: 12px 14px;
}
.submitform textarea {
  font-size: 1.02rem; line-height: 1.6; resize: vertical; min-height: 240px;
}
.submitform input::placeholder, .submitform textarea::placeholder { color: #9C93AE; }
.submitform :focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.submitform .send { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.submitform .fineprint { flex: 1 1 260px; margin: 0; font-size: 0.9rem; color: var(--ink-soft); }

/* ---------- sponsorship tiers ---------- */

.tiers {
  display: grid; gap: 0 var(--gutter);
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(38px, 5vw, 56px);
}
.tier {
  padding: 24px 0 26px;
  border-top: 2px solid var(--indigo);
  display: flex; flex-direction: column; gap: 10px;
}
.tier + .tier { border-left: 1px solid var(--rule); padding-left: var(--gutter); margin-left: calc(var(--gutter) / -2 - 0.5px); }
.tier h2 {
  margin: 0;
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 48, 'wght' 600, 'SOFT' 25;
  font-size: 1.62rem; line-height: 1.12; color: var(--indigo);
}
.tier p { margin: 0; color: #342E4C; }
.tier .btn { margin-top: auto; align-self: flex-start; }

/* ---------- the channel ----------

   Nothing is requested from YouTube until a reader asks for it: the thumbnails
   are served from this site and the player is only inserted on the click. */

.videos { margin-top: 28px; }
.video-lead {
  display: grid; gap: 28px var(--gutter);
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: center;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--rule);
}
.video-play {
  appearance: none; border: 0; padding: 0; margin: 0;
  background: var(--indigo);
  font: inherit; color: inherit; text-align: left;
  cursor: pointer; display: block; width: 100%;
  position: relative; overflow: hidden;
}
.video-play img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  transition: opacity 200ms ease-out, transform 320ms ease-out;
}
.video-play:hover img, .video-play:focus-visible img { opacity: 0.82; transform: scale(1.02); }
.video-play .cue {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  pointer-events: none;
}
.video-play .cue svg { width: 62px; height: 62px; }
.video-play .cue circle { fill: rgba(25, 19, 64, 0.72); }
.video-play .cue path { fill: var(--gold); }
.video-play:hover .cue circle { fill: var(--indigo); }
.video-lead iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }

.video-say h3 {
  margin: 8px 0 0;
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 48, 'wght' 600, 'SOFT' 25;
  font-size: clamp(1.4rem, 2.6vw, 1.85rem); line-height: 1.14;
  letter-spacing: -0.012em; color: var(--indigo);
}
.video-say .when {
  margin: 8px 0 12px;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft);
}
.video-say p { margin: 0 0 14px; color: #342E4C; }

.video-more {
  display: grid; gap: 24px var(--gutter);
  grid-template-columns: repeat(3, 1fr);
  margin-top: 26px;
}
.video-play.small { background: none; }
.video-play.small .shot { display: block; position: relative; background: var(--indigo); }
.video-play.small .cue svg { width: 38px; height: 38px; }
.video-play.small .t {
  display: block; margin-top: 12px;
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 36, 'wght' 600;
  font-size: 1.05rem; line-height: 1.24; color: var(--indigo);
}
.video-play.small:hover .t { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.video-play.small .when {
  display: block; margin-top: 6px;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- issue archive ---------- */

.issues { display: grid; gap: 30px var(--gutter); grid-template-columns: repeat(4, 1fr); margin-top: 30px; }
.issue { display: flex; flex-direction: column; gap: 12px; text-decoration: none; }
.issue .sheet {
  border: 1px solid var(--rule-firm);
  background: #fff;
  overflow: hidden;
  aspect-ratio: 17 / 22;
  transition: border-color 200ms ease-out, transform 200ms ease-out;
}
.issue .sheet img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.issue:hover .sheet, .issue:focus-visible .sheet { border-color: var(--indigo); transform: translateY(-3px); }
.issue .no {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-deep);
}
.issue h3 {
  margin: 0;
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 36, 'wght' 600;
  font-size: 1.14rem; line-height: 1.2; color: var(--indigo);
}
.issue .date { font-size: 0.9rem; color: var(--ink-soft); }

/* The archive's last tile is not a cover but the count itself, set at a size
   nothing else on the page comes near. It spans the columns left over by the
   issues actually posted, so the row always reads as a full shelf. */
.issue.allissues { grid-column: span 2; }
.issue.allissues .sheet {
  aspect-ratio: auto;
  background: var(--indigo);
  border-color: var(--indigo);
  color: var(--stock);
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(20px, 3vw, 34px);
  height: 100%;
}
.issue.allissues .count {
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 144, 'wght' 600, 'SOFT' 30;
  font-size: clamp(4.2rem, 10vw, 8rem);
  line-height: 0.82;
  letter-spacing: -0.03em;
  color: var(--gold);
}
.issue.allissues .cap {
  margin-top: 12px;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: #CFC7DB;
}
.issue.allissues .go {
  margin-top: auto; padding-top: 26px;
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--stock);
  transition: gap 180ms ease-out;
}
.issue.allissues:hover .sheet, .issue.allissues:focus-visible .sheet { transform: none; background: var(--indigo-far); }
.issue.allissues:hover .go { gap: 16px; }

/* ---------- long-form reading page ---------- */

.article { padding: clamp(30px, 5vw, 56px) 0 0; }
/* A single measure of text leaves half a wide screen empty, so the reading page
   runs as text plus a rail: the issue it came out of, ruled off to the right and
   held in view while you read. */
.article.railed {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: 0 calc(var(--gutter) * 1.6);
  align-items: start;
}
.article.railed > .article-head,
.article.railed > .prose,
.article.railed > .closer { grid-column: 1; }
.rail {
  grid-column: 2; grid-row: 1 / span 3;
  position: sticky; top: 92px;
  border-top: 2px solid var(--indigo);
  padding-top: 16px;
}
.rail .sheet { border: 1px solid var(--rule-firm); background: #fff; margin-bottom: 16px; }
.rail h3 {
  margin: 0 0 4px;
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 36, 'wght' 600;
  font-size: 1.2rem; line-height: 1.2; color: var(--indigo);
}
.rail .date { display: block; font-size: 0.9rem; color: var(--ink-soft); margin-bottom: 16px; }
.rail .btn { width: 100%; justify-content: center; }
.rail ol {
  list-style: none; margin: 22px 0 0; padding: 16px 0 0;
  border-top: 1px solid var(--rule);
  counter-reset: piece;
}
.rail ol li { padding: 8px 0; border-bottom: 1px solid var(--rule); }
.rail ol li:last-child { border-bottom: 0; }
.rail ol a {
  display: flex; gap: 10px; text-decoration: none;
  font-size: 0.97rem; line-height: 1.35; color: var(--ink);
  transition: color 180ms ease-out;
}
.rail ol a::before {
  counter-increment: piece; content: counter(piece);
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.68rem; font-weight: 700; color: var(--gold-deep);
  padding-top: 3px; flex: none;
}
.rail ol a:hover, .rail ol a:focus-visible { color: var(--indigo-far); }
/* The piece currently under the reader's eye. The gold bar is drawn in the
   counter's own gutter so nothing shifts sideways as the mark moves down. */
.rail ol a[aria-current] { color: var(--indigo); font-variation-settings: 'wght' 600; }
.rail ol a[aria-current]::before { color: var(--stock); background: var(--gold-deep); }
.rail ol a::before {
  width: 17px; text-align: center; padding: 3px 0 2px;
  transition: background 180ms ease-out, color 180ms ease-out;
}
.article-head { max-width: 46rem; }
.article-head h1 { margin: 10px 0 0; }
.article-meta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--rule);
}
.article-meta img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--gold); }
.article-meta .sep { color: var(--rule-firm); }
.prose { max-width: var(--measure); margin-top: 34px; font-size: 1.075rem; }
.prose p { margin: 0 0 1.15em; }
.prose h2 {
  margin: 1.9em 0 0.55em;
  font-family: 'Instrument Cond', 'Instrument Sans', sans-serif;
  font-weight: 700; font-size: 1.06rem;
  letter-spacing: 0.01em; text-transform: uppercase;
  color: #3A2E8E;
}
.prose .he {
  font-family: 'Noto Serif Hebrew', 'Frank Ruhl Libre', serif;
  direction: rtl; text-align: right;
  font-size: 1.1rem; line-height: 1.95;
  color: var(--indigo);
}
.prose blockquote {
  margin: 1.6em 0; padding: 0.9em 0;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  font-family: 'Fraunces', serif; font-style: italic;
  font-variation-settings: 'opsz' 30, 'wght' 600, 'SOFT' 40;
  font-size: 1.35rem; line-height: 1.36; color: #453B8E;
}

/* ---------- the whole issue, read straight through ---------- */

/* An issue page opens the way the paper does: the week's line of record, then
   the picture, full width across both columns, before any reading starts. */
.issue-open { padding-top: clamp(26px, 5vw, 50px); }
.issue-open .issueline {
  border-top: 2px solid var(--indigo);
  padding-top: 11px;
}
.issue-open .plate { margin-top: 18px; }

.reader { grid-column: 1; min-width: 0; }
.reader-head { padding-bottom: 26px; border-bottom: 2px solid var(--indigo); }
.reader-head h1 { margin: 8px 0 0; }
.reader-sub { max-width: 54ch; margin: 16px 0 0; color: var(--ink-soft); font-size: 1.05rem; }

/* Each piece opens with the same furniture the printed page gives it. The gold
   rule above the kicker is what tells a scrolling reader that one contributor
   has finished and the next has started. */
.piece-full { padding-top: clamp(46px, 6vw, 74px); scroll-margin-top: 86px; }
.piece-full + .piece-full { border-top: 1px solid var(--rule); }
.piece-full .article-head h2 { margin: 10px 0 0; font-size: clamp(1.9rem, 4.4vw, 2.85rem); }
.piece-full .standfirst {
  max-width: var(--measure);
  margin: 22px 0 0;
  font-size: 1.12rem; font-style: italic; color: var(--ink-soft);
}

/* Gematria rows, carried over from the booklet: gold rule at the left, the
   Hebrew word, its gloss, and the number hard right. */
.gem {
  margin: 1.6em 0;
  background: rgba(25, 19, 64, 0.045);
  border-left: 3px solid var(--gold);
  padding: 14px 18px;
}
.gem-head {
  margin: 0 0 8px;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-deep);
}
.gem-row {
  display: flex; align-items: baseline; gap: 12px;
  padding: 5px 0; border-top: 1px solid rgba(25, 19, 64, 0.1);
}
.gem-row:first-of-type { border-top: 0; }
.gem-row .w { font-family: 'Noto Serif Hebrew', serif; font-size: 1.05rem; color: var(--indigo); }
.gem-row .g { flex: 1; font-size: 0.95rem; color: var(--ink-soft); }
.gem-row .v {
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 36, 'wght' 620;
  font-size: 1.1rem; color: var(--indigo);
}

/* The sponsor band closes the page the way it closes the back cover. */
.sponsors-web {
  margin-top: clamp(52px, 7vw, 84px);
  padding-top: 22px;
  border-top: 2px solid var(--indigo);
}
.sponsor-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 26px 30px;
  margin: 24px 0 0;
  align-items: center;
}
.sponsor-grid .slot {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  height: 66px;
}
.sponsor-grid .slot img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sponsor-grid .slot.pair img { max-width: 44%; }
.sponsor-grid .m-anochi { max-height: 74%; }
.sponsor-grid .m-innovara { max-width: 78%; }
.sponsor-grid .m-wanderings { max-height: 90%; }
.sponsor-grid .m-csp { max-height: 94%; }

.reflective {
  margin: 34px 0 0;
  background: var(--indigo); color: var(--stock);
  padding: 22px clamp(20px, 3vw, 30px);
  font-family: 'Fraunces', serif; font-style: italic;
  font-variation-settings: 'opsz' 48, 'wght' 600, 'SOFT' 40;
  font-size: clamp(1.2rem, 2.4vw, 1.65rem); line-height: 1.3;
}
.reflective span {
  display: block; margin-bottom: 8px;
  font-family: 'Instrument Sans', sans-serif; font-style: normal;
  font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold);
}

/* An archive week has no contents rail to hang beside it — there is one sheet,
   not six pieces — so the reader runs the full width of the shell. */
.article.sheeted { display: block; }
.article.sheeted .reader { max-width: 900px; }
.viewer {
  margin-top: 30px;
  border: 1px solid var(--rule-firm);
  background: var(--stock-deep);
  /* The browser's own PDF viewer fills whatever box it is given, so the box is
     sized to the screen rather than to the sheet: a page-shaped frame leaves a
     dead band under the paper once the viewer's own chrome is accounted for. */
  height: min(1000px, 86vh);
}
.viewer object { width: 100%; height: 100%; display: block; }
.viewer-fallback { padding: 26px; text-align: center; }
.viewer-fallback img { margin: 0 auto 16px; max-width: 420px; border: 1px solid var(--rule-firm); }
.viewer-fallback p { margin: 0; color: var(--ink-soft); }
.viewer-take { margin: 22px 0 0; }

/* Walking from one week to the next. Older runs right, newer left, the way a
   pile of back issues is thumbed through. */
.issue-walk {
  display: flex; justify-content: space-between; gap: 20px;
  margin-top: clamp(40px, 6vw, 64px);
  padding-top: 20px;
  border-top: 2px solid var(--indigo);
}
.issue-walk a {
  display: flex; flex-direction: column; gap: 4px;
  text-decoration: none;
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 36, 'wght' 600;
  font-size: 1.12rem; line-height: 1.25; color: var(--indigo);
  max-width: 46%;
}
.issue-walk a.next { text-align: right; align-items: flex-end; }
.issue-walk a span {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-deep);
}
.issue-walk a:hover, .issue-walk a:focus-visible { color: var(--indigo-far); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 5px; }

/* ---------- sign-up band ---------- */

.band {
  margin-top: clamp(52px, 8vw, 88px);
  background: var(--indigo);
  color: var(--stock);
}
.band .shell { padding-top: clamp(34px, 5vw, 54px); padding-bottom: clamp(34px, 5vw, 54px); }
.band h2 {
  margin: 0 0 10px;
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 72, 'wght' 600, 'SOFT' 30;
  font-size: clamp(1.7rem, 3.6vw, 2.5rem); line-height: 1.1;
  letter-spacing: -0.015em;
}
.band p { margin: 0; max-width: 46ch; color: #CFC7DB; }
.band .row { display: flex; gap: 28px; align-items: flex-end; flex-wrap: wrap; }
.band .row > div { flex: 1 1 380px; }
.band .btn { border-color: var(--gold); background: var(--gold); color: var(--indigo); }
.band .btn:hover, .band .btn:focus-visible { background: var(--stock); border-color: var(--stock); }

/* ---------- foot ---------- */

.foot { padding: clamp(34px, 5vw, 54px) 0 0; border-top: 1px solid var(--rule); }
.foot > .shell:not(.foot-rule) {
  display: grid; gap: 32px var(--gutter);
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  align-items: start;
}
.foot p { margin: 0; font-size: 0.92rem; color: var(--ink-soft); }
.foot-brand .brand { margin-bottom: 12px; }
.foot-brand p { max-width: 34ch; }
.foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.foot-col h2 {
  margin: 0 0 3px;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--indigo);
}
.foot-col a {
  min-height: 26px;
  font-size: 0.95rem; color: var(--ink-soft); text-decoration: none;
  padding: 3px 0;
  border-bottom: 1px solid transparent;
  transition: color 180ms ease-out, border-color 180ms ease-out;
}
.foot-col a:hover, .foot-col a:focus-visible { color: var(--indigo); border-bottom-color: var(--gold); }
.foot-rule {
  display: flex; gap: 10px 26px; flex-wrap: wrap;
  margin-top: clamp(30px, 4vw, 46px);
  padding-top: 18px; padding-bottom: 34px;
  border-top: 1px solid var(--rule);
}
.foot-rule p:last-child { margin-left: auto; }
.foot a { color: var(--gold-deep); }

:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; }

/* ---------- narrower ---------- */

@media (max-width: 1000px) {
  .pieces { grid-template-columns: repeat(2, 1fr); }
  .pieces .piece:not(:nth-child(3n+1)) { border-left: 0; padding-left: 0; margin-left: 0; }
  .pieces .piece:nth-child(even) {
    border-left: 1px solid var(--rule);
    padding-left: var(--gutter);
    margin-left: calc(var(--gutter) / -2 - 0.5px);
  }
  .issues { grid-template-columns: repeat(3, 1fr); }
}
/* Six nav items, a wordmark and a button will not hold one line below about 900,
   so the nav drops to its own row and scrolls sideways rather than disappearing
   — a tablet reader still needs to reach the archive. This has to happen well
   above phone width or the bar pushes the page wider than the screen. */
@media (max-width: 900px) {
  .topbar .shell { height: auto; flex-wrap: wrap; gap: 10px 16px; padding-top: 10px; padding-bottom: 6px; }
  .nav {
    order: 3; width: 100%; margin-left: 0; gap: 20px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; font-size: 0.72rem; padding: 8px 0; }
  .topbar .btn { margin-left: auto; padding: 9px 12px; font-size: 0.66rem; letter-spacing: 0.08em; }
}

@media (max-width: 860px) {
  .foot > .shell:not(.foot-rule) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  body { font-size: 16.5px; }

  /* A section's note is a second line on a phone, not a right-aligned tail —
     ragged-right under a left-aligned heading is the only setting that does not
     read as a collision. */
  .sect-head { gap: 4px; }
  .sect-head .note { margin: 2px 0 0; width: 100%; text-align: left; }

  /* One column of links beats two cramped ones, and nothing is pushed right. */
  .foot > .shell:not(.foot-rule) { grid-template-columns: 1fr; gap: 26px; }
  .foot-rule { gap: 6px; }
  .foot-rule p:last-child { margin-left: 0; }

  /* Field above button, both full width and comfortably tappable. */
  .signup { flex: 1 1 100%; }
  .signup .row { flex-direction: column; gap: 12px; }
  .signup input, .signup .btn { width: 100%; min-height: 48px; }
  .signup .btn { justify-content: center; }

  .partnership .acts { gap: 12px; }
  .partnership .acts .btn { flex: 1 1 100%; justify-content: center; }

  .video-more { grid-template-columns: 1fr; }
  .band .row > div { flex: 1 1 100%; }
  .band .btn { width: 100%; justify-content: center; }
  .issue-walk { flex-direction: column; gap: 22px; }
  .issue-walk a, .issue-walk a.next { max-width: 100%; text-align: left; align-items: flex-start; }
  .article-meta { gap: 8px 12px; }
  .viewer { height: 74vh; }

  .steps, .needs { grid-template-columns: 1fr; }
  .steps .step:nth-child(even), .needs .need:nth-child(even) {
    border-left: 0; padding-left: 0; margin-left: 0;
  }
  .submitform .pair { grid-template-columns: 1fr; gap: 0; }
  .submitform .send .btn { width: 100%; justify-content: center; }
  .brand span { font-size: 0.7rem; letter-spacing: 0.12em; }
  .brand img { width: 22px; height: 22px; }
  .cols2 { columns: 1; }
  .pieces { grid-template-columns: 1fr; }
  .pieces .piece:nth-child(even) { border-left: 0; padding-left: 0; margin-left: 0; }
  .issues { grid-template-columns: repeat(2, 1fr); }
  .video-lead { grid-template-columns: 1fr; }
  .video-more { grid-template-columns: 1fr 1fr; }
  .tiers { grid-template-columns: 1fr; }
  .tier + .tier { border-left: 0; padding-left: 0; margin-left: 0; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step + .step { border-left: 0; padding-left: 0; margin-left: 0; }
  .steps .step:nth-child(even) {
    border-left: 1px solid var(--rule);
    padding-left: var(--gutter);
    margin-left: calc(var(--gutter) / -2 - 0.5px);
  }
  .needs { grid-template-columns: repeat(2, 1fr); }
  .needs .need:not(:nth-child(3n+1)) { border-left: 0; padding-left: 0; margin-left: 0; }
  .needs .need:nth-child(even) {
    border-left: 1px solid var(--rule);
    padding-left: var(--gutter);
    margin-left: calc(var(--gutter) / -2 - 0.5px);
  }
  .wall { grid-template-columns: repeat(2, 1fr); }
  .wall .mark { height: 62px; }
  .flag-row { align-items: flex-start; }
  .standing { width: 100%; grid-template-columns: 1fr auto; }
  .issueline .heb { margin-left: 0; width: 100%; }
  .plate { aspect-ratio: 16 / 10; }
  .lead-head { gap: 16px; }
  .lead-head img.shot { width: 58px; height: 58px; }
}
@media (max-width: 900px) {
  .article.railed { display: block; }
  .rail { position: static; margin-top: 40px; }
  .rail .sheet { max-width: 240px; }
  .issue.allissues { grid-column: span 2; }
}

/* ---------- the jump bar ----------

   The contents rail only works where it can sit beside the text and stay in
   view. On a phone it collapses to a list at the top of the page and is gone the
   moment reading starts, so a reader four thousand words into an issue has no
   way back to the other pieces. This bar is pinned to the foot of the screen,
   names the piece being read, and opens the same list upward. Wide screens keep
   the rail and never see it. */

.jumpbar { display: none; }

@media (max-width: 900px) {
  .jumpbar {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    background: var(--indigo);
    border-top: 3px solid var(--gold);
  }

  .jumpbar button {
    appearance: none; border: 0; margin: 0;
    width: 100%;
    display: flex; align-items: center; gap: 12px;
    padding: 11px var(--pad);
    min-height: 56px;
    background: none; color: var(--stock);
    font: inherit; text-align: left;
    cursor: pointer;
  }
  .jumpbar .what {
    flex: none;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 0.6rem; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--gold);
  }
  /* The title of the piece being read. One line only — a five-word title and a
     nine-word one have to leave the bar the same height. */
  .jumpbar .now {
    flex: 1; min-width: 0;
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 36, 'wght' 600;
    font-size: 1rem; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .jumpbar svg {
    flex: none; width: 18px; height: 18px;
    transition: transform 200ms ease-out;
  }
  .jumpbar.open svg { transform: rotate(180deg); }

  /* The list grows upward out of the bar. Height rather than transform so it
     never covers the page when shut and needs no separate hit-testing. */
  .jumpbar ul {
    list-style: none; margin: 0; padding: 0;
    max-height: 0; overflow-y: auto;
    transition: max-height 240ms ease-out;
    border-bottom: 1px solid rgba(224, 178, 90, 0.28);
  }
  .jumpbar.open ul { max-height: min(58vh, 420px); }
  .jumpbar li + li { border-top: 1px solid rgba(224, 178, 90, 0.18); }
  .jumpbar ul a {
    display: block;
    padding: 13px var(--pad);
    min-height: 48px;
    color: var(--stock); text-decoration: none;
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 36, 'wght' 500;
    font-size: 1.02rem; line-height: 1.25;
  }
  .jumpbar ul a[aria-current] {
    color: var(--gold);
    font-variation-settings: 'opsz' 36, 'wght' 620;
  }

  /* Room for the bar so it never sits on top of the last line or the footer. */
  body:has(.jumpbar) { padding-bottom: 62px; }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .jumpbar ul, .jumpbar svg { transition: none; }
}