/* ============================================================
   site.css  -  Design J: the broadsheet, Apple-crafted.

   An old newspaper's identity (a serif nameplate on paper, a thick
   and thin double rule, roman numerals, drop caps, kickers) with
   every control built the way Apple builds one: grouped lists for
   fields, tiles and chips for choices, press feedback on pointer
   down, size-specific tracking, a spacing rhythm in rem.

   Three voices: Fraunces for the nameplate and headlines, Source
   Serif 4 for reading, the system sans for every label, field and
   button. One colour per group of subjects, saturated, carried
   through tiles, section accents, kickers and the tape.

   Mobile first. Hand set; no framework.
   ============================================================ */

:root {
  /* paper and card */
  --paper:   #f5f1ea;
  --paper-2: #ece6dc;
  --card:    #ffffff;

  /* ink */
  --ink:     #0e1b36;
  --ink-2:   #3b4766;
  --muted:   #5c6276;
  --hair:    rgba(14, 27, 54, .10);
  --hair-2:  rgba(14, 27, 54, .20);
  --tint:    rgba(14, 27, 54, .055);
  --tint-2:  rgba(14, 27, 54, .11);

  /* the five groups */
  --g-world:   #1d5bd8;
  --g-money:   #0b7446;
  --g-tech:    #6b3fe0;
  --g-culture: #b8470f;
  --g-sport:   #d81e2b;
  --up:   var(--g-money);
  --down: var(--g-sport);

  /* type */
  --serif:   "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans:    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI",
             Roboto, "Helvetica Neue", Arial, sans-serif;

  /* the scale, on a 17px root */
  --t-xs:  .765rem;   /* 13px   small caps, never under 12px */
  --t-sm:  .882rem;   /* 15px   UI secondary */
  --t-md:  1rem;      /* 17px   body */
  --t-lg:  1.176rem;  /* 20px   lede, standfirst */
  --t-xl:  1.412rem;  /* 24px   section heads */
  --t-2xl: 1.765rem;  /* 30px   headlines */
  --t-3xl: 2.353rem;  /* 40px   big headline */

  /* rhythm */
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem;
  --s5: 1.5rem; --s6: 2rem;  --s7: 3rem;   --s8: 4rem;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --tap: 2.75rem;      /* 44px */
  --measure: 40rem;
  --wide: 72rem;
  --gutter: 1rem;
  --ease: cubic-bezier(.2, .7, .2, 1);

  color-scheme: light;
}

/* ---------- base ---------- */

html {
  font-size: 17px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (min-width: 900px) { html { font-size: 18px; } }

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  padding-top: env(safe-area-inset-top);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--t-md);
  line-height: 1.55;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

::selection { background: var(--ink); color: #fff; }

p { margin: 0 0 var(--s3); }
h1, h2, h3 { margin: 0; font-size: inherit; font-weight: inherit; }
em { font-style: italic; }
table { border-collapse: collapse; }
svg { display: block; }

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--hair-2);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { text-decoration-color: currentColor; }

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ink) 38%, transparent);
  outline-offset: 2px;
  border-radius: 4px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* the small caps voice: every label on the site */
.kicker, .ears, .dateline, .tg-head, .brief-k, .key li, .line .who,
.card-h, .ed-group, .ed-at, .ed-attrib, .colophon, .ed-wx-week td.n {
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.3;
}

/* ---------- the masthead: nameplate on paper, double rule ---------- */

.spectrum { display: flex; height: 5px; }
.spectrum i { flex: 1 1 0; display: block; }
.spectrum .s-world   { background: var(--g-world); }
.spectrum .s-money   { background: var(--g-money); }
.spectrum .s-tech    { background: var(--g-tech); }
.spectrum .s-culture { background: var(--g-culture); }
.spectrum .s-sport   { background: var(--g-sport); }

.masthead-in {
  max-width: var(--wide);
  margin: 0 auto;
  padding-left:  max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
  text-align: center;
}

.ears {
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  margin: 0;
  padding: .8rem 0 .7rem;
  border-bottom: 1px solid var(--hair);
  color: var(--muted);
  font-weight: 500;
}

.nameplate {
  margin: 0;
  padding: var(--s5) 0 1.15rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.5rem, 10.6vw, 5.4rem);
  line-height: .98;
  letter-spacing: -.028em;
  color: var(--ink);
  text-wrap: balance;
  overflow-wrap: anywhere;
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 0, "WONK" 0;
}
@media (min-width: 900px) { .nameplate { padding: var(--s6) 0 1.4rem; } }

.rule-double {
  height: 6px;
  border-top: 3px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.rule-double.rev {
  border-top-width: 1px;
  border-bottom-width: 3px;
}

/* ---------- page shell ---------- */

.page {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 var(--gutter) var(--s7);
  padding-left:  max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

.dateline {
  margin: 0 0 var(--s6);
  padding: .8rem 0 .7rem;
  text-align: center;
  color: var(--muted);
  border-bottom: 1px solid var(--hair);
}
@media (min-width: 900px) { .dateline { margin-bottom: var(--s7); } }

.dateline .plain {
  font-family: var(--serif);
  font-size: .96rem;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
}
.dateline .place {
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 600;
  font-style: normal;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
}
.dateline .sep { color: var(--hair-2); font-style: normal; padding: 0 .25em; }
.dateline .addr { overflow-wrap: anywhere; }
.nowrap { white-space: nowrap; }

/* ---------- heads ---------- */

.h-sec {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-xl);
  line-height: 1.15;
  letter-spacing: -.018em;
  color: var(--ink);
  text-wrap: balance;
}
.h-sec .num {
  margin-right: .3em;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--c, var(--muted));
}
.sec-note {
  margin: var(--s2) 0 0;
  font-family: var(--sans);
  font-size: var(--t-sm);
  line-height: 1.45;
  letter-spacing: -.006em;
  color: var(--muted);
}

.kicker { margin: 0 0 var(--s2); color: var(--c, var(--ink)); }

/* ---------- the front cover ---------- */

.front { margin: 0 0 var(--s6); }
@media (min-width: 900px) {
  .front {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    column-gap: var(--s7);
    align-items: start;
    margin-bottom: var(--s7);
  }
}

.lede {
  margin: 0 0 var(--s4);
  max-width: var(--measure);
  font-size: var(--t-lg);
  line-height: 1.45;
  color: var(--ink);
}
.lede::first-letter {
  float: left;
  margin: .09em .12em 0 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 3.9em;
  line-height: .78;
  color: var(--ink);
}
.lede-sub {
  margin: 0 0 var(--s4);
  max-width: var(--measure);
  font-size: var(--t-md);
  line-height: 1.5;
  color: var(--ink-2);
}

/* the colour key: five swatches that match the sections */
.key {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  margin: 0 0 var(--s5);
  padding: 0;
  list-style: none;
}
.key li { display: inline-flex; align-items: center; gap: .45rem; color: var(--c, var(--ink)); }
.key li::before { content: ""; width: .625rem; height: .625rem; border-radius: 3px; background: var(--c, var(--ink)); }

.brief {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: 0 0 0 1px var(--hair), 0 1px 2px rgba(14, 27, 54, .04);
}
.brief li { padding: var(--s3) var(--s4); }
.brief li + li { border-top: 1px solid var(--hair); }
.brief-k { display: block; margin-bottom: .2rem; color: var(--ink); }
.brief-t { display: block; font-size: .96rem; line-height: 1.45; color: var(--ink-2); }
@media (min-width: 640px) and (max-width: 899px) {
  .brief { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brief li + li { border-top: 0; border-left: 1px solid var(--hair); }
}

/* ---------- group colours ---------- */

.tg-world, .g-world     { --c: var(--g-world); }
.tg-money, .g-money     { --c: var(--g-money); }
.tg-tech, .g-tech       { --c: var(--g-tech); }
.tg-culture, .g-culture { --c: var(--g-culture); }
.tg-sport, .g-sport     { --c: var(--g-sport); }
.g-ink                  { --c: var(--ink); }

/* ---------- notices: error, flash, paused ---------- */

.notice-card {
  --c: var(--ink);
  margin: 0 0 var(--s5);
  padding: var(--s4) var(--s4) var(--s4);
  background: color-mix(in srgb, var(--c) 7%, var(--card));
  border-radius: var(--r-lg);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 22%, transparent);
}
.notice-card.is-error  { --c: var(--g-sport); }
.notice-card.is-paused { --c: var(--g-sport); }
.notice-card.is-ok     { --c: var(--g-money); }
.notice-card p { margin-bottom: var(--s2); }
.notice-card p:last-child { margin-bottom: 0; }
.notice-card .kicker { color: var(--c); }
.notice-h {
  margin: 0 0 var(--s2);
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-xl);
  line-height: 1.15;
  letter-spacing: -.018em;
  color: var(--ink);
}
.notice-action { margin-top: var(--s4) !important; }
.notice-action .btn { width: auto; }

.flash { display: flex; align-items: flex-start; gap: var(--s3); font-style: italic; }
.flash svg { flex: none; width: 10px; height: 10px; margin-top: .55em; fill: var(--c); }

/* ---------- form sections: head and body, side by side on a desk ---------- */

.form { margin: 0; }

.fs { margin: var(--s7) 0 0; }
.fs-head { margin: 0 0 var(--s4); }
.fs-body { min-width: 0; }
@media (min-width: 900px) {
  .fs {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    column-gap: var(--s7);
  }
  .fs-head { margin: 0; padding-right: var(--s4); }
}

/* ---------- the grouped list: a quiet label left, the value right ---------- */

.list {
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: 0 0 0 1px var(--hair), 0 1px 2px rgba(14, 27, 54, .04);
  overflow: hidden;
}

.row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s4);
  min-height: 3.25rem;
  padding: 0 var(--s4);
  cursor: text;
  transition: background .15s var(--ease), box-shadow .15s var(--ease);
}
.row + .row::before {
  content: "";
  position: absolute;
  left: var(--s4);
  right: 0;
  top: 0;
  height: 1px;
  background: var(--hair);
}

.row-k {
  flex: none;
  font-family: var(--sans);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: -.006em;
  line-height: 1.2;
  color: var(--ink-2);
  transition: color .15s var(--ease);
}

.row-v {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: .9rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--sans);
  font-size: var(--t-md);
  font-weight: 400;
  letter-spacing: -.012em;
  line-height: 1.3;
  color: var(--ink);
  text-align: right;
  outline: 0;
  -webkit-appearance: none;
  appearance: none;
}
.row-v:-webkit-autofill,
.row-v:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--card) inset;
  -webkit-text-fill-color: var(--ink);
}
.row-v:disabled { color: var(--muted); }

.row:focus-within { background: var(--tint); }
.row:focus-within .row-k { color: var(--ink); }
.row:has(.row-v:focus-visible) { box-shadow: inset 0 0 0 2px var(--ink); }
.form .row:has(.row-v:user-invalid) .row-k { color: var(--g-sport); }

/* a tall row for free text: label on top, the text below */
.row-area {
  flex-direction: column;
  align-items: stretch;
  gap: var(--s2);
  padding: var(--s3) var(--s4) var(--s3);
}
.row-area .row-v {
  min-height: 7rem;
  padding: 0;
  resize: none;
  text-align: left;
  font-family: var(--serif);
  letter-spacing: 0;
  line-height: 1.5;
}

.list-note {
  margin: var(--s2) var(--s4) 0;
  font-family: var(--sans);
  font-size: var(--t-xs);
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--muted);
}

/* ---------- the subjects: tiles in a grid, each group in its colour ---------- */

.tg { margin: 0 0 var(--s5); min-width: 0; }
.tg:last-child { margin-bottom: 0; }
.tg-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 var(--s2);
  color: var(--c);
}
.tg-head .swatch { width: .625rem; height: .625rem; border-radius: 3px; background: var(--c); }

.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: var(--s2);
}
/* a long label takes the whole row on a phone, so the grid stays even */
.tile-wide { grid-column: 1 / -1; }
@media (min-width: 640px) {
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row; }
  .tile-wide { grid-column: auto; }
}

.tile {
  position: relative;
  display: flex;
  align-items: flex-start;
  min-height: 3.5rem;
  padding: .7rem 2.6rem .7rem .9rem;
  background: var(--card);
  border-radius: var(--r-md);
  box-shadow: 0 0 0 1px var(--hair), 0 1px 2px rgba(14, 27, 54, .04);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: -.006em;
  line-height: 1.3;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s var(--ease), color .15s var(--ease),
              box-shadow .15s var(--ease), transform .1s ease-out;
}
.tile input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.tile-t { flex: 1 1 auto; min-width: 0; padding-top: .1rem; }

.tile .tick {
  position: absolute;
  right: .7rem;
  top: .8rem;
  width: 22px;
  height: 22px;
}
.tile .tick circle { fill: none; stroke: var(--hair-2); stroke-width: 1.5; transition: fill .15s var(--ease), stroke .15s var(--ease); }
.tile .tick path {
  fill: none;
  stroke: var(--c);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 14;
  stroke-dashoffset: 14;
  transition: stroke-dashoffset .22s var(--ease);
}

@media (hover: hover) {
  .tile:hover { box-shadow: 0 0 0 1px var(--c), 0 1px 2px rgba(14, 27, 54, .04); }
}
.tile:active { transform: scale(.97); }

.tile:has(input:checked) {
  background: var(--c);
  color: #fff;
  box-shadow: 0 0 0 1px var(--c), 0 8px 18px -10px color-mix(in srgb, var(--c) 70%, transparent);
}
.tile:has(input:checked) .tick circle { fill: #fff; stroke: #fff; }
.tile:has(input:checked) .tick path { stroke-dashoffset: 0; }
.tile:has(input:focus-visible) {
  box-shadow: 0 0 0 1px var(--c), 0 0 0 4px color-mix(in srgb, var(--c) 32%, transparent);
}

/* ---------- chips: leagues and US sports ---------- */

.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }

.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 1.05rem;
  background: var(--card);
  border-radius: 999px;
  box-shadow: 0 0 0 1px var(--hair), 0 1px 2px rgba(14, 27, 54, .04);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: -.006em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s var(--ease), color .15s var(--ease),
              box-shadow .15s var(--ease), transform .1s ease-out;
}
.chip input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
@media (hover: hover) {
  .chip:hover { box-shadow: 0 0 0 1px var(--c), 0 1px 2px rgba(14, 27, 54, .04); }
}
.chip:active { transform: scale(.96); }
.chip:has(input:checked) { background: var(--c); color: #fff; box-shadow: 0 0 0 1px var(--c); }
.chip:has(input:focus-visible) {
  box-shadow: 0 0 0 1px var(--c), 0 0 0 4px color-mix(in srgb, var(--c) 32%, transparent);
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3.125rem;
  padding: 0 1.4rem;
  border: 0;
  border-radius: var(--r-md);
  background: var(--ink);
  color: #fff;
  font-family: var(--sans);
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: -.012em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s var(--ease), color .15s var(--ease),
              opacity .15s var(--ease), transform .1s ease-out;
}
@media (min-width: 640px) { .btn { width: auto; min-width: 11rem; } }
@media (hover: hover) { .btn:hover { background: color-mix(in srgb, var(--ink) 86%, #fff); } }
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--ink) 38%, transparent); outline-offset: 3px; }
.btn:disabled { opacity: .5; cursor: progress; transform: none; }

.btn-quiet { background: var(--tint); color: var(--ink); }
@media (hover: hover) { .btn-quiet:hover { background: var(--tint-2); } }

.btn-paper { background: #fff; color: var(--ink); }
@media (hover: hover) { .btn-paper:hover { background: var(--paper); } }

.actions { margin-top: var(--s5); }
.actions .aside {
  margin: var(--s3) 0 0;
  font-family: var(--sans);
  font-size: var(--t-sm);
  letter-spacing: -.006em;
  color: var(--muted);
}

/* ---------- today's paper: the ink card ---------- */

.today {
  margin: 0 0 var(--s7);
  padding: var(--s5) var(--s4);
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-lg);
}
.today .kicker { color: rgba(255, 255, 255, .68); }
.today-h {
  margin: 0 0 var(--s2);
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.5rem, 5.8vw, 2rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: #fff;
  text-wrap: balance;
}
.today-sub {
  margin: 0 0 var(--s4);
  font-family: var(--sans);
  font-size: var(--t-sm);
  letter-spacing: -.006em;
  line-height: 1.45;
  color: rgba(255, 255, 255, .74);
}
.today .actions { margin: 0; }
@media (min-width: 640px) {
  .today {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--s6);
    padding: var(--s5) var(--s6);
  }
  .today-sub { margin-bottom: 0; }
}

/* ---------- the editor: a calm conversation ---------- */

.chat {
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: 0 0 0 1px var(--hair), 0 1px 2px rgba(14, 27, 54, .04);
  overflow: hidden;
}

.lines {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s4);
  max-height: min(60vh, 34rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.chat-empty {
  margin: var(--s2) 0;
  font-style: italic;
  color: var(--muted);
}

.line { display: flex; flex-direction: column; max-width: 100%; }
.line .who { margin: 0 0 .3rem; color: var(--muted); }
.line p {
  margin: 0;
  padding: .65rem .9rem;
  border-radius: 18px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.line.you { align-items: flex-end; }
.line.you p {
  max-width: min(85%, 30rem);
  background: var(--ink);
  color: #fff;
  border-bottom-right-radius: 4px;
  font-family: var(--sans);
  letter-spacing: -.01em;
}
.line.editor { align-items: flex-start; }
.line.editor p {
  max-width: min(92%, 34rem);
  background: var(--paper);
  color: var(--ink);
  border-bottom-left-radius: 4px;
}

.dots { display: inline-block; margin-left: 2px; }
.dots i {
  display: inline-block;
  width: 4px; height: 4px;
  margin-left: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: .25;
  animation: blink 1.2s infinite ease-in-out;
}
.dots i:nth-child(2) { animation-delay: .2s; }
.dots i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

.chat-form {
  display: flex;
  gap: var(--s2);
  padding: var(--s2);
  border-top: 1px solid var(--hair);
  background: var(--card);
}
.chat-form input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--tap);
  margin: 0;
  padding: 0 1rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--paper);
  font-family: var(--sans);
  font-size: var(--t-md);
  letter-spacing: -.012em;
  color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.chat-form input:focus { outline: 0; background: var(--card); border-color: var(--ink); }
.chat-form input:disabled { color: var(--muted); }
.chat-form .btn { width: auto; min-width: 0; min-height: var(--tap); padding: 0 1.15rem; border-radius: 999px; }

/* ---------- standing instructions ---------- */

.memo {
  padding: var(--s4);
  background: color-mix(in srgb, var(--g-tech) 6%, var(--card));
  border-radius: var(--r-lg);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--g-tech) 20%, transparent);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.55;
}

/* ---------- message and text pages ---------- */

.notice { max-width: var(--measure); padding: var(--s4) 0; }
.ornament {
  width: 3rem;
  height: 4px;
  margin: 0 0 var(--s4);
  border-radius: 2px;
  background: linear-gradient(90deg,
    var(--g-world) 0 20%, var(--g-money) 20% 40%, var(--g-tech) 40% 60%,
    var(--g-culture) 60% 80%, var(--g-sport) 80% 100%);
}
.headline {
  margin: 0 0 var(--s3);
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.8rem, 6.4vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: -.022em;
  color: var(--ink);
  text-wrap: balance;
}
.standfirst { margin: 0 0 var(--s5); font-size: var(--t-lg); line-height: 1.45; color: var(--ink-2); }
.notice-body p { margin-bottom: var(--s4); font-size: 1.03rem; line-height: 1.6; }
.notice-body p:first-child::first-letter {
  float: left;
  margin: .09em .12em 0 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 3.6em;
  line-height: .78;
}

/* ---------- colophon ---------- */

.colophon { margin: var(--s8) 0 0; text-align: center; color: var(--muted); }
.colophon .rule-double { margin-bottom: var(--s4); }
.colophon p { margin: 0 0 var(--s2); }
.colophon-sub { font-weight: 500; }
.colophon a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 .3rem;
  color: var(--ink);
}
.colophon .stop {
  margin-top: var(--s2);
  font-family: var(--serif);
  font-size: .96rem;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
}

/* ============================================================
   the edition: a phone first, two columns on a desk
   ============================================================ */

.ed { display: flex; flex-direction: column; }
.ed-main, .ed-side { display: contents; }

.ed-whisper { order: 0; }
.ed-lead    { order: 1; }
.ed-weather { order: 2; }
.ed-world   { order: 3; }
.ed-tape    { order: 4; }
.ed-diary   { order: 5; }
.ed-market  { order: 6; }
.ed-sec     { order: 7; }
.ed-closer  { order: 8; }
.ed-back    { order: 9; }

.ed section { margin: var(--s7) 0 0; }

.ed-whisper {
  margin: 0 0 var(--s4);
  padding: 0 0 var(--s3);
  text-align: center;
  font-style: italic;
  font-size: 1.02rem;
  color: var(--muted);
  border-bottom: 1px solid var(--hair);
}

/* the lead */
.ed-lead { margin: 0; }
.ed-lead .kicker { color: var(--ink); }
.ed-headline {
  margin: 0 0 var(--s3);
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2rem, 7.6vw, 3.1rem);
  line-height: 1.04;
  letter-spacing: -.024em;
  color: var(--ink);
  text-wrap: balance;
}
.ed-standfirst {
  margin: 0 0 var(--s4);
  font-size: var(--t-lg);
  line-height: 1.4;
  font-style: italic;
  color: var(--ink-2);
}
.ed-body p { margin: 0 0 var(--s3); font-size: 1.03rem; line-height: 1.6; }
.ed-body p:last-child { margin-bottom: 0; }
.ed-dropcap > p:first-child::first-letter {
  float: left;
  padding: .08em .12em 0 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 3.9em;
  line-height: .78;
  color: var(--ink);
}

/* section heads in the news columns: a hairline, a coloured tab, the title */
.ed-h {
  position: relative;
  margin: 0 0 var(--s2);
  padding-top: .9rem;
  border-top: 1px solid var(--hair-2);
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-xl);
  line-height: 1.15;
  letter-spacing: -.018em;
  color: var(--ink);
}
.ed-h::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 2.75rem;
  height: 4px;
  border-radius: 0 0 3px 3px;
  background: var(--c, var(--ink));
}

/* the cards on the side: weather, the tape, the diary */
.card {
  padding: var(--s4) var(--s4) var(--s4);
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: 0 0 0 1px var(--hair), 0 1px 2px rgba(14, 27, 54, .04);
}
.card-h { margin: 0 0 var(--s3); color: var(--c, var(--ink)); }

.ed-wx-now { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s3); margin: 0 0 var(--s2); }
.ed-wx-temps {
  font-family: var(--display);
  font-weight: 600;
  font-size: 2.8rem;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.ed-wx-temps small { font-size: 1.25rem; font-weight: 400; letter-spacing: -.01em; color: var(--muted); }
.ed-wx-cond { display: inline-block; font-style: italic; color: var(--ink-2); }
.ed-wx-cond::first-letter { text-transform: uppercase; }
.ed-wx-note { margin: 0 0 var(--s3); font-size: .96rem; line-height: 1.5; color: var(--ink-2); }

/* tables: tight, hairlines, numbers aligned */
.ed-table { width: 100%; font-size: .96rem; }
.ed-table td { padding: .45rem 0; border-top: 1px solid var(--hair); vertical-align: top; }
.ed-table tr:first-child td { border-top: 0; }
.ed-table td.n { color: var(--ink); padding-right: var(--s3); }
.ed-table td.t { color: var(--ink-2); }
.ed-table td.v {
  padding-left: var(--s3);
  text-align: right;
  font-family: var(--sans);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: -.006em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ink);
}
.ed-table td.c {
  width: 5.4em;
  padding-left: var(--s2);
  text-align: right;
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--muted);
}
/* the move, as a filled badge: green up, red down, quiet when there is none */
.ed-table td.c .chg {
  display: inline-block;
  min-width: 4.7em;
  padding: .22rem .45rem;
  border-radius: 6px;
  text-align: right;
}
.ed-table td.c.up .chg   { background: var(--up);   color: #fff; }
.ed-table td.c.down .chg { background: var(--down); color: #fff; }

/* the weather week */
.ed-wx-week { border-top: 1px solid var(--hair-2); }
.ed-wx-week td { padding: .4rem 0; }
.ed-wx-week tr:first-child td { border-top: 0; }
.ed-wx-week td.n { width: 3.4em; padding-top: .55rem; color: var(--muted); }
.ed-wx-week td.t::first-letter { text-transform: uppercase; }
.ed-wx-week td.v { font-weight: 500; }

/* the tape */
.ed-group { margin: var(--s4) 0 .15rem; color: var(--c, var(--g-money)); }
.ed-group:first-of-type { margin-top: 0; }
.ed-tape .ed-table { border-top: 1px solid var(--hair-2); }
.ed-tape .ed-table tr:first-child td { border-top: 0; }
.ed-srcnote { margin: var(--s3) 0 0; font-size: .84rem; font-style: italic; color: var(--muted); }

/* the diary */
.ed-diary td.n {
  width: 7.6em;
  padding-top: .55rem;
  font-family: var(--sans);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: -.006em;
  color: var(--ink);
}
.ed-at { display: block; margin-top: .15rem; font-weight: 500; letter-spacing: .06em; color: var(--muted); }
.ed-why { display: block; font-size: .88rem; color: var(--muted); }

/* stories */
.ed-story { padding: var(--s4) 0; border-top: 1px solid var(--hair); }
.ed-story:first-of-type { border-top: 0; padding-top: var(--s2); }
.ed-story .kicker { margin: 0 0 .35rem; }
.ed-story h3 {
  margin: 0 0 var(--s2);
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.32rem;
  line-height: 1.2;
  letter-spacing: -.014em;
  text-wrap: balance;
}
.ed-story > p { margin: 0 0 var(--s3); line-height: 1.58; }

/* tell me more: the story continues in the same voice */
.ed-more { margin-top: var(--s2); }
.ed-more .btn-more {
  width: auto;
  min-width: 0;
  min-height: var(--tap);
  padding: 0 1.1rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c, var(--ink)) 10%, transparent);
  color: var(--c, var(--ink));
  font-size: var(--t-sm);
}
@media (hover: hover) { .ed-more .btn-more:hover { background: color-mix(in srgb, var(--c, var(--ink)) 17%, transparent); } }
.ed-more .btn-more:focus-visible { outline-color: color-mix(in srgb, var(--c, var(--ink)) 40%, transparent); }
.ed-more .btn-more::after { content: "\00a0\2192"; }
.ed-more .btn-more:disabled::after { content: ""; }

.ed-more-text { display: none; }
.ed-more-text.open {
  display: block;
  margin-top: var(--s3);
  animation: rise .36s var(--ease) both;
}
.ed-more-text.open::before {
  content: "The story continues";
  display: block;
  margin: 0 0 var(--s3);
  padding-top: var(--s3);
  border-top: 2px solid var(--c, var(--ink));
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c, var(--ink));
}
.ed-more-text p { margin: 0 0 var(--s3); font-size: 1.03rem; line-height: 1.6; }
.ed-more-text p:last-child { margin-bottom: 0; }
@keyframes rise {
  from { opacity: 0; transform: translateY(.5rem); }
  to   { opacity: 1; transform: none; }
}

.ed-closer {
  margin: var(--s7) 0 0;
  padding-top: var(--s4);
  border-top: 1px solid var(--ink);
  position: relative;
  text-align: center;
  font-style: italic;
  font-size: 1.08rem;
}
.ed-closer::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 2px;
  border-top: 3px solid var(--ink);
}
.ed-attrib { display: block; margin-top: var(--s1); font-style: normal; color: var(--muted); }
.ed-back { margin-top: var(--s5); text-align: center; }
.ed-back .btn { width: auto; }

/* two columns on a desk: the news on the left, the furniture on the right */
@media (min-width: 1000px) {
  .ed {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 21rem;
    column-gap: var(--s8);
    align-items: start;
  }
  .ed-main, .ed-side { display: block; min-width: 0; }
  .ed-main { grid-column: 1; grid-row: 2; max-width: var(--measure); }
  .ed-side { grid-column: 2; grid-row: 2; }
  .ed-whisper { grid-column: 1 / -1; grid-row: 1; }
  .ed-closer, .ed-back { grid-column: 1 / -1; max-width: var(--measure); justify-self: center; width: 100%; }
  .ed-closer { grid-row: 3; }
  .ed-back { grid-row: 4; }
  .ed-side section { margin-top: var(--s5); }
  .ed-side .ed-weather { margin-top: 0; }
  .ed-main section:first-child { margin-top: 0; }
}

/* ---------- motion: press feedback stays, movement goes ---------- */

@media (prefers-reduced-motion: reduce) {
  .btn:active, .tile:active, .chip:active { transform: none; opacity: .72; }
  .ed-more-text.open { animation: fade .2s ease-out both; }
  .dots i { animation: none; opacity: .6; }
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* fixes after review */
@supports not selector(:has(a)) {
  .tile input[type=checkbox], .chip input[type=checkbox] { opacity: 1; position: static; width: 18px; height: 18px; margin-right: 8px; }
}