/* The Delta Dispatch — Press Run
   Scene: a proof sheet pulled off the press, still flat on the desk, with an
   editor's red pen already on it. The red is not decoration — it only ever
   appears as a mark a human made: a circled word, a caret, a margin tick,
   the rule that tracks how far you've read.
   Rules: nothing rounded, nothing raised, no grey filler. The masthead is
   set enormous because on a real front page it is. */

:root{
  --paper:#FBFAF7;
  --paper-2:#F0EDE5;
  --ink:#101418;
  --ink-72:rgba(16,20,24,.74);
  --ink-45:rgba(16,20,24,.48);
  --red:#C8352A;          /* the pen. nothing else is this colour. */

  --display:'Newsreader',Georgia,serif;
  --body:'Public Sans',system-ui,sans-serif;
  --page:1240px;
  --measure:34em;
  --pad:clamp(18px,4.5vw,64px);
}

*,*::before,*::after{ box-sizing:border-box; }
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:clamp(16px,1.05vw,17.5px); line-height:1.66;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-family:var(--display); font-weight:600; margin:0; line-height:1.02; letter-spacing:-.032em; }
a{ color:inherit; }
/* height:auto is required: the width/height attributes on every <img> would
   otherwise beat aspect-ratio and render images at their intrinsic height. */
img,svg{ max-width:100%; height:auto; }
:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

.tag{
  font-family:var(--body); font-weight:700; font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--red); margin:0 0 14px;
}
.byline{ font-family:var(--body); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-45); margin:0; }

/* the read-so-far rule, in the pen's colour */
.progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:70; background:var(--red); transform:scaleX(0); transform-origin:0 50%; }

/* ================= MASTHEAD =================
   Full-bleed, flush left, and big enough to be uncomfortable. */
.masthead{ max-width:var(--page); margin:0 auto; padding:14px var(--pad) 0; }
.mast-top{
  display:flex; justify-content:space-between; align-items:baseline; gap:20px;
  padding-bottom:12px; border-bottom:2px solid var(--ink);
}
.dateline{ font-family:var(--body); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-45); margin:0; }
.sub-link{ font-family:var(--body); font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--red); text-decoration:none; }
.wordmark{
  display:block; margin:.06em 0 .02em -.045em;    /* optical flush-left on the T */
  font-family:var(--display); font-weight:600;
  font-size:clamp(44px,12.4vw,180px); line-height:.82; letter-spacing:-.055em;
  text-decoration:none;
}
.sections{
  display:flex; flex-wrap:wrap; gap:28px;
  padding:14px 0; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink);
}
.sections a{ font-family:var(--body); font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; text-decoration:none; color:var(--ink-72); }
.sections a:hover{ color:var(--red); }

/* ================= LEAD ================= */
.lead{
  max-width:var(--page); margin:0 auto;
  padding:clamp(24px,3.4vw,48px) var(--pad) clamp(44px,5.5vw,80px);
  display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(26px,3.6vw,56px); align-items:start;
}
@media (max-width:900px){ .lead{ grid-template-columns:1fr; } }
.lead-art img{ width:100%; height:auto; display:block; filter:grayscale(1) contrast(1.08); }
.lead h1{ font-size:clamp(33px,4.6vw,62px); margin-bottom:20px; }
.standfirst{
  font-family:var(--display); font-size:clamp(18px,1.75vw,23px); line-height:1.42;
  color:var(--ink-72); margin:0 0 20px; max-width:44ch;
}
.lead-body{ margin-top:26px; max-width:var(--measure); }
.lead-body p{ font-family:var(--display); font-size:clamp(17px,1.35vw,19.5px); line-height:1.6; margin:0 0 20px; }
.lead-body p:first-child::first-letter{
  float:left; font-size:4.2em; line-height:.76; padding:.05em .09em 0 0;
  font-weight:600; color:var(--red);
}

/* ---- the editor's marks. hand-made, never symmetrical. ---- */
.circ{ position:relative; display:inline-block; padding:0 .1em; }
.circ::after{
  content:''; position:absolute; inset:-22% -8% -18% -8%;
  border:2px solid var(--red); border-radius:48% 52% 45% 55% / 56% 44% 58% 42%;
  transform:rotate(-1.8deg); opacity:.9; pointer-events:none;
}
.caret{ color:var(--red); font-family:var(--display); }
.margin-note{
  font-family:var(--display); font-style:italic; font-size:15px; color:var(--red);
  margin:0 0 18px; padding-left:16px; border-left:2px solid var(--red);
}

/* Photographs run greyscale on purpose: the rule of this page is that red only
   ever appears as a mark a human made, and a full-colour photo would break it. */

/* ================= ALSO THIS WEEK ================= */
.more{ background:var(--paper-2); padding:clamp(44px,5.5vw,84px) var(--pad); border-top:1px solid var(--ink); }
.rail{ max-width:var(--page); margin:0 auto clamp(26px,3.2vw,42px); font-size:clamp(21px,2.3vw,29px); }
.stories{ max-width:var(--page); margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(245px,1fr)); gap:clamp(24px,2.8vw,40px); }
.thumb{ aspect-ratio:16/10; margin-bottom:16px; }
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(1) contrast(1.08); }
.story h3{ font-size:clamp(19px,1.85vw,23px); margin-bottom:11px; }
.dek{ margin:0 0 12px; color:var(--ink-72); font-size:15.5px; }

/* ================= SUBSCRIBE ================= */
.subscribe{ background:var(--ink); color:var(--paper); padding:clamp(48px,6vw,90px) var(--pad); }
.sub-inner{ max-width:52ch; margin:0 auto; text-align:center; }
.subscribe h2{ font-size:clamp(27px,3.5vw,44px); margin-bottom:16px; }
.subscribe > .sub-inner > p{ color:rgba(251,250,247,.72); margin:0 0 26px; }
.sub-form{ display:flex; gap:0; justify-content:center; flex-wrap:wrap; }
.sub-form input{
  flex:1 1 250px; max-width:330px;
  font-family:var(--body); font-size:16px; color:var(--paper);
  background:transparent; border:1px solid rgba(251,250,247,.36); border-radius:0; padding:14px 16px;
}
.sub-form input::placeholder{ color:rgba(251,250,247,.42); }
.sub-form input:focus{ border-color:var(--red); outline:none; }
.sub-form button{
  font-family:var(--body); font-weight:700; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  background:var(--red); color:var(--paper); border:1px solid var(--red); border-radius:0;
  padding:14px 30px; cursor:pointer;
}
.sub-form button:hover{ background:transparent; color:var(--red); }
.sent{ flex-basis:100%; margin:16px 0 0; font-size:13.5px; color:#F0A79E; }
.fineprint{ margin:22px 0 0 !important; font-family:var(--body); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(251,250,247,.42) !important; }

/* ================= FOOTER ================= */
.foot{ max-width:var(--page); margin:0 auto; padding:clamp(40px,5vw,70px) var(--pad); }
.foot-grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:30px; padding-bottom:26px; border-bottom:2px solid var(--ink); }
@media (max-width:760px){ .foot-grid{ grid-template-columns:1fr; } }
.foot p{ margin:0 0 7px; font-size:14.5px; color:var(--ink-72); }
.foot a{ text-decoration:none; }
.foot a:hover{ color:var(--red); }
.foot-mark{ font-family:var(--display); font-size:26px; letter-spacing:-.04em; color:var(--ink) !important; }
.fine{ margin-top:24px; font-family:var(--body); font-size:11px; letter-spacing:.05em; line-height:1.9; color:var(--ink-45); max-width:70ch; }

/* ---- demo tag */
.demo-tag{
  position:fixed; right:0; bottom:0; z-index:60;
  display:flex; flex-direction:column; gap:2px;
  background:var(--red); color:var(--paper);
  padding:12px 20px; text-decoration:none; border-radius:0;
  font-family:var(--body); font-size:10px; letter-spacing:.1em; line-height:1.5;
}
.demo-tag span{ opacity:.78; text-transform:uppercase; font-size:9px; letter-spacing:.2em; }
.demo-tag strong{ font-weight:700; font-size:11px; letter-spacing:.09em; }
.demo-tag:hover{ background:var(--ink); }