:root {
    --paper: #E9E6DA; --tex: rgba(23,32,58,.30); --ink: #17203A; --ink-2: #4B5570;
    --pink: #E1246F; --blue: #1F4FD8; --rule: rgba(23,32,58,.22); --sink: rgba(23,32,58,.055);
    --display: "Archivo Black", "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
    --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  @media (prefers-color-scheme: dark) {
    :root { --paper:#12161F; --tex:rgba(233,230,218,.22); --ink:#EDEAE0; --ink-2:#A8AEBE;
      --pink:#FF5C97; --blue:#6E93FF; --rule:rgba(237,234,224,.22); --sink:rgba(237,234,224,.06); }
  }
  :root[data-theme="dark"] { --paper:#12161F; --tex:rgba(233,230,218,.22); --ink:#EDEAE0; --ink-2:#A8AEBE;
    --pink:#FF5C97; --blue:#6E93FF; --rule:rgba(237,234,224,.22); --sink:rgba(237,234,224,.06); }
  :root[data-theme="light"] { --paper:#E9E6DA; --tex:rgba(23,32,58,.30); --ink:#17203A; --ink-2:#4B5570;
    --pink:#E1246F; --blue:#1F4FD8; --rule:rgba(23,32,58,.22); --sink:rgba(23,32,58,.055); }

  body { background: var(--paper); color: var(--ink); font-family: var(--sans); line-height: 1.5; }
  body::after {
    content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none;
    background-image: radial-gradient(var(--tex) .5px, transparent .6px);
    background-size: 3px 3px; opacity: .45;
  }
  .wrap { max-width: 1080px; margin: 0 auto; padding: 30px 22px 0; position: relative; z-index: 1; }
  a { color: inherit; }
  button { font: inherit; }

  /* masthead + flow */
  .mast { border-bottom: 4px solid var(--ink); padding-bottom: 14px; }
  .mast__top { display: flex; align-items: flex-start; gap: 16px; }
  .mast__t {
    font-family: var(--display); font-weight: 900;
    font-size: clamp(34px, 8.2vw, 78px); line-height: .84; letter-spacing: -.035em;
    text-transform: uppercase; margin: 0; text-shadow: .09em .07em 0 var(--pink); flex: 1;
  }
  .acct { flex: 0 0 auto; text-align: right; font-size: 11.5px; color: var(--ink-2); line-height: 1.45; }
  .acct b { display: block; color: var(--ink); font-weight: 700; font-size: 12.5px; }
  .acct a { color: var(--pink); }
  .flow { margin-top: 18px; display: grid; gap: 10px 26px; grid-template-columns: 1fr; }
  @media (min-width: 820px) { .flow { grid-template-columns: 272px 1fr; } }
  .flow__n { font-family: var(--display); font-weight: 900; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; margin: 0; }
  .flow__n em { font-style: normal; color: var(--pink); }
  .flow__r { font-family: var(--serif); font-size: 14.5px; line-height: 1.45; color: var(--ink-2); margin: 4px 0 0; }
  .jrn__c { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 6px; }
  .jrn { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0; padding: 0; list-style: none; }
  .jrn li { font-size: 11.5px; letter-spacing: .03em; border: 1px solid var(--rule); padding: 2px 7px; color: var(--ink-2); display: flex; gap: 6px; }
  .jrn li b { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
  .jrn li.z { opacity: .5; }
  .jrn li.z b { color: var(--ink-2); }

  /* week bar */
  .weekbar { position: sticky; top: 0; z-index: 40; background: var(--paper); border-bottom: 2px solid var(--ink); margin-top: 26px; display: flex; align-items: center; gap: 12px; padding: 10px 0; }
  .nav { background: none; border: 1px solid var(--rule); color: var(--ink); width: 34px; height: 34px; cursor: pointer; font-size: 15px; line-height: 1; flex: 0 0 auto; }
  .nav:hover:not(:disabled) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .nav:disabled { opacity: .3; cursor: not-allowed; }
  .nav:focus-visible, .disc__b:focus-visible, .play:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
  .weekbar__c { flex: 1; min-width: 0; }
  .weekbar__k { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
  .weekbar__t { font-family: var(--display); font-weight: 900; font-size: clamp(14px,2.4vw,19px); letter-spacing: -.01em; margin: 1px 0 0; text-wrap: balance; }

  /* bands */
  .band { margin-top: 42px; }
  .band__h { display: flex; align-items: baseline; gap: 12px; border-bottom: 2px solid var(--ink); padding-bottom: 6px; margin-bottom: 20px; }
  .band__h h2 { font-family: var(--display); font-weight: 900; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; margin: 0; }
  .band__h em { font-style: normal; font-size: 12px; letter-spacing: .06em; color: var(--ink-2); margin-left: auto; text-transform: uppercase; }

  /* lead */
  .kicker { display: inline-block; background: var(--pink); color: var(--paper); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 4px 8px 3px; margin-bottom: 14px; }
  .hed-1 { font-family: var(--display); font-weight: 900; font-size: clamp(29px, 6vw, 50px); line-height: .97; letter-spacing: -.022em; text-wrap: balance; margin: 0; }
  .stand { font-family: var(--serif); font-size: 18.5px; line-height: 1.45; margin: 16px 0 0; border-left: 3px solid var(--blue); padding-left: 14px; }
  .byline { font-size: 12px; letter-spacing: .05em; color: var(--ink-2); margin: 15px 0 0; }
  .byline b { color: var(--ink); font-weight: 700; }
  .body { font-family: var(--serif); font-size: 17px; line-height: 1.62; margin-top: 20px; }
  .body p { margin: 0 0 16px; }
  .body > p:first-of-type::first-letter { float: left; font-family: var(--display); font-weight: 900; font-size: 3.1em; line-height: .82; padding: 4px 8px 0 0; color: var(--blue); }
  .leadgrid { display: grid; gap: 28px; grid-template-columns: 1fr; }
  @media (min-width: 900px) { .leadgrid { grid-template-columns: minmax(0,1fr) 208px; } }
  .margin { display: flex; flex-direction: column; gap: 18px; }
  .gloss { border-top: 2px solid var(--blue); padding-top: 10px; }
  .gloss h4 { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 6px; color: var(--blue); }
  .gloss p { font-size: 13.5px; line-height: 1.5; margin: 0; color: var(--ink-2); }
  .src { border-top: 2px solid var(--ink); padding-top: 10px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
  .src a { color: var(--pink); word-break: break-word; }

  /* secondary */
  .two { display: grid; gap: 26px; grid-template-columns: 1fr; }
  @media (min-width: 760px) { .two { grid-template-columns: 1fr 1fr 1fr; } }
  .hed-2 { font-family: var(--display); font-weight: 900; font-size: 20px; line-height: 1.08; letter-spacing: -.012em; text-wrap: balance; margin: 0 0 9px; }
  .dek { font-family: var(--serif); font-size: 15px; line-height: 1.5; margin: 0; }
  .tag { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); display: block; margin-bottom: 7px; }
  .rest { list-style: none; padding: 0; margin: 26px 0 0; border-top: 1px solid var(--rule); }
  .rest li { border-bottom: 1px solid var(--rule); padding: 10px 0; display: grid; gap: 2px 16px; grid-template-columns: 1fr; }
  @media (min-width: 700px) { .rest li { grid-template-columns: 1fr 190px; align-items: baseline; } }
  .rest h3 { font-size: 16px; font-weight: 700; line-height: 1.3; margin: 0; }
  .meta { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
  @media (min-width: 700px) { .rest .meta { text-align: right; grid-row: 1; grid-column: 2; } }
  .meta i { font-style: normal; color: var(--pink); }

  /* days */
  .day { margin-top: 24px; }
  .day__h { font-family: var(--display); font-weight: 900; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); border-bottom: 1px solid var(--rule); padding-bottom: 5px; margin: 0 0 4px; display: flex; }
  .day__h span { margin-left: auto; font-family: var(--sans); font-weight: 400; letter-spacing: .06em; }
  .notes { list-style: none; padding: 0; margin: 0; }
  .notes li { border-bottom: 1px solid var(--rule); padding: 11px 0; }
  .notes h3 { font-size: 15.5px; font-weight: 700; line-height: 1.3; margin: 0; }
  .notes p { font-family: var(--serif); font-size: 14px; line-height: 1.45; margin: 4px 0 0; color: var(--ink-2); }
  .notes .meta { margin-top: 5px; display: block; }
  .day--old { opacity: .76; }
  .day--old .notes h3 { font-weight: 400; font-size: 14.5px; }

  /* podcast */
  .pod { border: 2px solid var(--ink); padding: 18px 20px 20px; display: grid; gap: 18px; grid-template-columns: 1fr; }
  @media (min-width: 760px) { .pod { grid-template-columns: 1fr 300px; align-items: center; } }
  .pod__k { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pink); margin: 0 0 8px; }
  .pod__t { font-family: var(--display); font-weight: 900; font-size: 23px; line-height: 1.08; margin: 0; letter-spacing: -.014em; }
  .pod__s { font-family: var(--serif); font-size: 14.5px; line-height: 1.45; color: var(--ink-2); margin: 8px 0 0; }
  .player { display: flex; align-items: center; gap: 12px; }
  .play { width: 46px; height: 46px; flex: 0 0 auto; border: 0; border-radius: 50%; background: var(--pink); color: var(--paper); cursor: pointer; font-size: 15px; }
  .play:hover { background: var(--ink); }
  .bar { flex: 1; height: 4px; background: var(--sink); position: relative; }
  .bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--blue); }
  .time { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
  .links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
  .links a { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--rule); padding: 5px 9px; text-decoration: none; color: var(--ink-2); }
  .links a:hover { border-color: var(--pink); color: var(--pink); }

  /* the whole week */
  .whole { margin-top: 44px; border-top: 2px solid var(--ink); padding-top: 16px; display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
  .whole p { font-family: var(--serif); font-size: 15.5px; line-height: 1.5; color: var(--ink-2); margin: 0; flex: 1 1 340px; }
  .whole b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
  .disc__b { background: none; border: 2px solid var(--ink); color: var(--ink); cursor: pointer; font-family: var(--display); font-weight: 900; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; padding: 12px 16px; white-space: nowrap; }
  .disc__b:hover { background: var(--ink); color: var(--paper); }

  .all[hidden] { display: none; }
  .key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 22px 0 4px; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
  .key span { display: flex; align-items: center; gap: 5px; }
  .key .pt { margin: 0; }
  .pt { width: 11px; height: 11px; border: 1px solid var(--rule); display: inline-block; position: relative; flex: 0 0 auto; }
  .pt i { position: absolute; inset: 0; background: var(--pink); }
  .all__d { font-family: var(--display); font-weight: 900; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); border-bottom: 2px solid var(--rule); padding: 18px 0 4px; display: flex; }
  .all__d span { margin-left: auto; font-family: var(--sans); font-weight: 400; letter-spacing: .06em; }
  .all ul { list-style: none; margin: 0; padding: 0; }
  .all li { display: grid; grid-template-columns: 18px 1fr; gap: 2px 10px; padding: 7px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
  @media (min-width: 760px) { .all li { grid-template-columns: 18px 1fr 200px; } }
  .all li > .pt { grid-row: 1; }
  .ttl { font-size: 14.5px; line-height: 1.35; }
  .ttl--raw { font-family: var(--serif); color: var(--ink-2); }
  .flag { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); border: 1px solid var(--blue); padding: 1px 4px; margin-left: 7px; white-space: nowrap; }
  .flag--w { color: var(--paper); background: var(--pink); border-color: var(--pink); }
  .all .meta { grid-column: 2; }
  @media (min-width: 760px) { .all .meta { grid-column: 3; grid-row: 1; text-align: right; } }

  /* footer */
  .foot { margin-top: 56px; border-top: 4px solid var(--ink); background: var(--sink); }
  .foot__in { max-width: 1080px; margin: 0 auto; padding: 26px 22px 34px; display: grid; gap: 26px; grid-template-columns: 1fr; }
  @media (min-width: 820px) { .foot__in { grid-template-columns: 1.6fr 1fr 1fr; } }
  .foot__b { font-family: var(--display); font-weight: 900; font-size: 20px; letter-spacing: -.02em; text-transform: uppercase; margin: 0; }
  .foot__tag { font-family: var(--serif); font-size: 15px; color: var(--ink-2); margin: 4px 0 14px; }
  .foot__note { font-family: var(--serif); font-size: 14px; line-height: 1.55; margin: 0; max-width: 48ch; }
  .foot__note b { font-weight: 700; }
  .foot h5 { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 9px; color: var(--pink); }
  .foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; }
  .foot ul a { color: var(--ink-2); text-decoration: none; }
  .foot ul a:hover { color: var(--pink); }
  .foot__law { max-width: 1080px; margin: 0 auto; padding: 0 22px 30px; font-size: 12px; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 6px 18px; border-top: 1px solid var(--rule); padding-top: 14px; }

/* ==========================================================================
   Additions beyond the design prototype: real navigation, auth, art, landing.
   Same variables and voice as everything above.
   ========================================================================== */

/* links that have to behave like the prototype's buttons */
a.nav { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.nav[aria-disabled="true"] { opacity: .3; pointer-events: none; }
.linkish { background: none; border: 0; padding: 0; color: var(--pink); cursor: pointer;
  font-size: inherit; text-decoration: underline; }
.linkish:hover { color: var(--ink); }
.mast__t a { color: inherit; text-decoration: none; }

/* article artwork. The <figure> is removed outright when the image 404s,
   so a week without art looks intentional rather than broken. */
.art { margin: 18px 0 0; }
.art img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); }
.two .art { margin: 0 0 12px; }

audio.player-native { width: 100%; height: 40px; }

.all__err { font-family: var(--serif); font-size: 14px; color: var(--ink-2); padding: 14px 0; }

/* ---- landing: this week's five ---- */
.top5 { list-style: none; margin: 0; padding: 0; }
.top5 > li { display: grid; gap: 4px 18px; grid-template-columns: 1fr;
  border-bottom: 1px solid var(--rule); padding: 22px 0; }
@media (min-width: 700px) { .top5 > li { grid-template-columns: 54px 1fr; } }
.top5 > li:first-child { padding-top: 4px; }
.top5__n { font-family: var(--display); font-weight: 900; font-size: 26px; line-height: 1;
  color: var(--pink); font-variant-numeric: tabular-nums; }
.top5__c .dek { margin-top: 10px; }
.top5__c .byline { margin-top: 10px; }
.top5__c .byline a { color: var(--pink); }

/* ---- landing: the sign-in gate ---- */
.gate { margin-top: 44px; border-top: 4px solid var(--ink); border-bottom: 4px solid var(--ink);
  background: var(--sink); padding: 28px 22px; display: grid; gap: 26px;
  grid-template-columns: 1fr; }
@media (min-width: 820px) { .gate { grid-template-columns: 1.35fr 1fr; gap: 44px; align-items: start; } }
.gate__k { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--pink); margin: 0 0 9px; }
.gate__t { font-family: var(--display); font-weight: 900; font-size: clamp(22px, 3.6vw, 31px);
  line-height: 1.05; letter-spacing: -.018em; margin: 0; text-wrap: balance; }
.gate__s { font-family: var(--serif); font-size: 16px; line-height: 1.5; color: var(--ink-2);
  margin: 13px 0 0; }
.gate__a { display: flex; flex-direction: column; gap: 10px; }
.gate__alt, .gate__fine { font-size: 13px; color: var(--ink-2); margin: 4px 0 0; }
.gate__alt a { color: var(--pink); }
.gate__fine { font-size: 11.5px; letter-spacing: .02em; margin-top: 8px; }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 16px; border: 2px solid var(--ink); cursor: pointer; text-decoration: none;
  font-family: var(--display); font-weight: 900; font-size: 12px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink); background: none; text-align: center; }
.btn:hover { background: var(--ink); color: var(--paper); }
.btn--p { background: var(--pink); border-color: var(--pink); color: var(--paper); }
.btn--p:hover { background: var(--ink); border-color: var(--ink); }
.btn--g { background: var(--paper); }
.btn--g svg { flex: 0 0 auto; }
.btn:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }

/* ---- sign in / create account ---- */
.auth { display: flex; justify-content: center; padding: 44px 0 20px; }
.auth__box { width: 100%; max-width: 430px; border: 2px solid var(--ink); padding: 26px 24px 28px;
  background: var(--sink); }
.auth__t { font-family: var(--display); font-weight: 900; font-size: 25px; line-height: 1.06;
  letter-spacing: -.018em; margin: 0; }
.auth__s { font-family: var(--serif); font-size: 15px; line-height: 1.5; color: var(--ink-2);
  margin: 10px 0 20px; }
.auth__err { border-left: 3px solid var(--pink); background: var(--paper); padding: 10px 12px;
  font-size: 13.5px; margin: 0 0 16px; }
.auth__or { display: flex; align-items: center; gap: 12px; margin: 16px 0;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.auth__or::before, .auth__or::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.auth__f { display: flex; flex-direction: column; gap: 14px; }
.auth__f label { display: flex; flex-direction: column; gap: 5px; font-size: 11px;
  letter-spacing: .11em; text-transform: uppercase; color: var(--ink-2); }
.auth__f label span { text-transform: none; letter-spacing: .02em; opacity: .7; }
.auth__f input { font: inherit; font-size: 15px; padding: 10px 11px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--bord, var(--rule)); }
.auth__f input:focus-visible { outline: 2px solid var(--pink); outline-offset: 1px; }
.auth__f small { text-transform: none; letter-spacing: .01em; font-size: 11.5px; opacity: .75; }
.auth__f .btn { margin-top: 4px; }
.auth__alt { font-size: 13.5px; color: var(--ink-2); margin: 18px 0 0; text-align: center; }
.auth__alt a { color: var(--pink); }
.auth__pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
  background: var(--paper); border: 1px solid var(--rule); padding: 11px 12px; overflow-x: auto; }

/* --- Landing -------------------------------------------------------------
   The signed-out front: one sentence saying what we did this week, the way in,
   the lead story with its picture, and five more as lines. Nothing else. */
.lp-hero { padding: 26px 0 30px; }
.lp-hero__s {
    font-family: var(--serif); font-size: clamp(18px, 2.6vw, 22px);
    line-height: 1.45; color: var(--ink); max-width: 54ch; margin: 0;
}
.lp-hero__s b { font-weight: 700; }
.lp-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

.lp-week { border-top: 4px solid var(--ink); padding-top: 22px; }
.lp-lead__img {
    width: 100%; height: 4.4cm; object-fit: cover; display: block;
    margin: 0 0 16px; background: var(--sink);
}
.lp-lead .dek { margin-top: 10px; max-width: 62ch; }
.lp-lead .byline { margin-top: 8px; }

.lp-list { list-style: none; margin: 26px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.lp-list li {
    border-bottom: 1px solid var(--rule); padding: 11px 0;
    display: grid; gap: 2px 16px; grid-template-columns: 1fr;
}
@media (min-width: 700px) {
    .lp-list li { grid-template-columns: 1fr 190px; align-items: baseline; }
    .lp-list .meta { text-align: right; }
}
.lp-list h3 { font-size: 16.5px; font-weight: 700; line-height: 1.3; margin: 0; }

.lp-more {
    font-family: var(--serif); font-size: 15.5px; line-height: 1.55;
    color: var(--ink-2); margin: 22px 0 0; max-width: 62ch;
}
.lp-more a { color: var(--pink); font-weight: 700; }

/* --- Providers, notices, settings, prose --------------------------------- */
.prov { display: flex; flex-direction: column; gap: 8px; }
.btn--off {
    opacity: .55; cursor: not-allowed; gap: 9px;
    border-style: dashed;
}
.btn--off em {
    font-style: normal; font-size: 10.5px; letter-spacing: .08em;
    text-transform: uppercase; margin-left: auto; opacity: .8;
}
.auth__ok {
    font-size: 14px; border-left: 3px solid var(--blue);
    padding: 8px 0 8px 12px; margin: 0 0 16px; color: var(--ink);
}
.warn {
    border: 2px solid var(--pink); padding: 14px 16px; margin: 0 0 24px;
    display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
}
.warn p { margin: 0; flex: 1 1 320px; font-size: 14.5px; line-height: 1.5; }

.setform { display: flex; flex-direction: column; gap: 16px; max-width: 46ch; margin-top: 6px; }
.setform__row { display: flex; flex-direction: column; gap: 5px; font-size: 13px;
                letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.setform__row input {
    font: inherit; font-size: 15px; text-transform: none; letter-spacing: 0;
    color: var(--ink); background: var(--paper);
    border: 1px solid var(--rule); padding: 9px 11px;
}
.setform__row input:focus { outline: 2px solid var(--pink); outline-offset: 1px; }
.setform__check { display: flex; gap: 11px; align-items: flex-start; }
.setform__check input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--pink); }
.setform__check b { display: block; font-size: 15px; }
.setform__check small { display: block; font-size: 13px; line-height: 1.45; color: var(--ink-2); margin-top: 3px; }
.setform .btn { align-self: flex-start; }

.setblock { margin-top: 38px; border-top: 1px solid var(--rule); padding-top: 18px; }
.setblock h3 { font-family: var(--display); font-weight: 900; font-size: 14px;
               letter-spacing: .08em; text-transform: uppercase; margin: 0 0 8px; }
.setblock__s { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); margin: 0 0 14px; max-width: 56ch; }
.setlist { list-style: none; margin: 0; padding: 0; font-size: 14.5px; }
.setlist li { padding: 7px 0; border-bottom: 1px solid var(--rule); }
.setlist .ok { color: var(--blue); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin-left: 6px; }
.setlist .no { color: var(--pink); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin-left: 6px; }

.prose { max-width: 68ch; }
.prose__lede { font-family: var(--serif); font-size: 18px; line-height: 1.5; margin: 0 0 26px; }
.prose h3 { font-family: var(--display); font-weight: 900; font-size: 17px;
            letter-spacing: -.01em; margin: 34px 0 10px; scroll-margin-top: 20px; }
.prose p { font-family: var(--serif); font-size: 16px; line-height: 1.6; margin: 0 0 13px; color: var(--ink-2); }
.prose p b { color: var(--ink); }
.prose a { color: var(--pink); }
.prose code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; color: var(--ink); }

/* The About column sits right, against the edge of the measure. */
.foot__in { grid-template-columns: 1fr; }
@media (min-width: 820px) { .foot__in { grid-template-columns: 1.9fr auto; } }
.foot__in > div:last-child { text-align: right; }
.foot__in > div:last-child ul { align-items: flex-end; }

/* --- One story at a time -------------------------------------------------
   The rest of the week, paged. Full width, same weight as the lead: a whole
   article rather than a card that gestures at one.

   `.is-paged` is added by JavaScript before anything is hidden, so a browser
   without it renders all the stories in sequence — which reads fine and is the
   whole no-JS story. Nothing here hides content on its own. */
.pager { margin-top: 44px; }
.pager__bar {
    display: flex; align-items: center; gap: 12px;
    border-top: 2px solid var(--ink);
    padding: 14px 0; margin-top: 34px;
    /* Stuck to the bottom of the viewport for as long as the story is on
       screen. A 500-word article is several screens on a phone and no layout
       changes that — but "the controls are always one tap away" is the part of
       "all on one screen" that actually matters, and that is reachable.
       It stops being sticky once the article ends, so it never covers the
       glossary or the podcast below. */
    position: sticky;
    bottom: 0;
    background: var(--paper);
    z-index: 30;
}
.pager__n {
    margin-right: auto;
    font-family: var(--display); font-weight: 900; font-size: 12px;
    letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}
.pager__b {
    width: 38px; height: 38px; flex: 0 0 auto; cursor: pointer;
    background: none; border: 1px solid var(--rule); color: var(--ink);
    font: inherit; font-size: 17px; line-height: 1;
}
.pager__b:hover:not(:disabled) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pager__b:disabled { opacity: .3; cursor: not-allowed; }
.pager__b:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }

/* Sequence by default; one at a time only once the script is running. */
.pager__item + .pager__item { margin-top: 44px; padding-top: 40px; border-top: 1px solid var(--rule); }
.pager.is-paged .pager__item { display: none; }
.pager.is-paged .pager__item.is-on { display: block; }
.pager.is-paged .pager__item { margin-top: 0; padding-top: 0; border-top: 0; }

/* One measure for the whole story: kicker, headline, byline, picture and text
   all start and end where the week bar and the section rules do. Anything
   narrower reads as a misalignment rather than as a column.

   Single column, not two — multicol and a float do not co-operate, the picture
   gets trapped inside whichever column it starts in. Wrapping the text around
   the artwork recovers the vertical space the columns were there to save. */
.pager__item .body { max-width: none; }
/* The float is out of flow, so without this the article's bottom edge can sit
   above the picture and the next section rides up beside it. */
.pager__item .body::after { content: ""; display: block; clear: both; }

/* Artwork at its true 3:2, scaled and set into the text rather than stacked
   above it. Sitting on its own it cost ~320px of vertical space before a word
   of the article; floated, the text that would have been pushed down runs
   beside it instead and the story gets materially shorter.

   It lives inside .body so the float has something to wrap: a float only
   affects content after it in the same flow, so as a sibling above the body it
   pushed the whole block down and wrapped nothing. */
.art--story { margin: 0 0 16px; }
.art--story img { width: 100%; height: auto; display: block; border: 0; }

/* Phone: full width, above the text. A 40% float on a 380px screen leaves two
   words a line, which is worse than no wrap at all. */
@media (max-width: 699px) {
    .art--story { float: none; width: 100%; margin: 0 0 18px; }
}
/* Everything wider: top right, text around it. */
@media (min-width: 700px) {
    .art--story {
        float: right;
        width: 44%;
        max-width: 26rem;
        margin: 4px 0 16px 24px;
    }
}

/* The week's glossary, now that the lead has no margin column to carry it. */
.concepts__g { display: grid; gap: 18px 26px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .concepts__g { grid-template-columns: 1fr 1fr; } }
.src--inline { border: 0; padding: 0; margin-top: 18px; font-size: 12.5px; }
.src--inline a { color: var(--pink); }

/* The PDF block reuses the podcast layout — same shape, same weight: two ways
   to take the edition away with you, presented as a pair rather than one
   feature and one footnote. */
.links--pdf { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 0; }
.links--pdf a:not(.btn) {
    font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--ink-2); border: 0; padding: 0; text-decoration: underline;
}
.links--pdf a:not(.btn):hover { color: var(--pink); }