/* ============================================================================
   ICEBREAK DISPATCH — story page styling
   ----------------------------------------------------------------------------
   A broadsheet treatment: newsprint ground, Scotch rules, a nameplate, and a
   justified text column with a drop cap.

   This page deliberately commits to a single light "paper" world rather than
   following the viewer's dark mode. Newsprint inverted is not newsprint, and a
   dark variant would read as a different publication. Every colour is therefore
   painted explicitly so the page holds on any host background.
   ========================================================================== */

:root{
  --paper:#F2EFE8;
  --paper-deep:#E8E3D9;
  --ink:#141210;
  --ink-soft:#3A3330;
  --ink-faint:#7A6F66;
  --clay:#A6704F;
  --rule:#141210;
  --hair:#C6BEB1;
}

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

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background-color:var(--paper);
  color:var(--ink);
  font-family:'Spectral',Georgia,'Times New Roman',serif;
  font-size:19px;
  line-height:1.72;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Faint paper grain. Fixed so it reads as the sheet itself, not a scrolling layer. */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
}

.sheet{
  position:relative; z-index:1;
  max-width:1000px;
  margin:0 auto;
  padding:34px 26px 96px;
}

a{ color:var(--clay); text-decoration:none; border-bottom:1px solid rgba(166,112,79,.4); }
a:hover{ border-bottom-color:var(--clay); }
a:focus-visible{ outline:2px solid var(--clay); outline-offset:3px; }

/* ---------------------------------------------------------------- nameplate */
.plate-top{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:9.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-faint);
  padding-bottom:12px;
}
.plate-top a{ color:var(--ink-faint); border:none; }
.plate-top a:hover{ color:var(--clay); }

.nameplate{
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  padding:26px 0 22px;
  text-align:center;
}
.nameplate h2{
  margin:0;
  font-family:'Bodoni Moda',Didot,'Bodoni MT',Georgia,serif;
  font-weight:500;
  font-size:clamp(40px,9vw,84px);
  line-height:.94;
  letter-spacing:.1em;
  text-indent:.1em;            /* optical centring against the trailing letter-space */
  text-transform:uppercase;
}
.motto{
  margin:12px 0 0;
  font-family:'Spectral',Georgia,serif;
  font-style:italic; font-weight:300;
  font-size:14px; color:var(--ink-faint);
  letter-spacing:.02em;
}

/* Scotch rule: the thick-then-thin pair that says "newspaper" more than any typeface. */
.scotch{ border-top:3px solid var(--rule); margin-top:4px; }
.scotch::after{
  content:""; display:block;
  border-top:1px solid var(--rule);
  margin-top:2.5px;
}

.dateline{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
  padding:9px 2px 10px;
  border-bottom:1px solid var(--rule);
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:10px; font-weight:600; letter-spacing:.17em; text-transform:uppercase;
  color:var(--ink-soft);
}
.dateline span{ white-space:nowrap; }

/* ----------------------------------------------------------------- headline */
.head{
  max-width:none;   /* match the scotch rules above, not a narrower measure */ margin:0 auto;
  padding:52px 0 0; text-align:center;
}
.kicker{
  margin:0 0 18px;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:11px; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:var(--clay);
}
h1{
  margin:0;
  font-family:'Bodoni Moda',Didot,'Bodoni MT',Georgia,serif;
  font-weight:700;
  font-size:clamp(38px,7.4vw,76px);
  line-height:1.09;
  letter-spacing:-.012em;
  text-wrap:balance;
}
.deck{
  margin:22px auto 0; max-width:34em;
  font-family:'Spectral',Georgia,serif;
  font-style:italic; font-weight:300;
  font-size:clamp(18px,2.4vw,22px);
  line-height:1.5; color:var(--ink-soft);
  text-wrap:balance;
}
.byline{
  margin:26px 0 0;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-faint);
}

/* -------------------------------------------------------------------- plate */
figure.plate{
  margin:46px auto 0; max-width:900px;
}
figure.plate img{
  display:block; width:100%; height:auto;
  /* A tall portrait shot would otherwise fill the whole screen and stall the
     read. Capping the height keeps the plate a plate, not a page. */
  max-height:64vh; object-fit:cover; object-position:center;
  border:1px solid var(--hair);
  background:var(--paper-deep);
}
figure.plate figcaption{
  margin-top:11px;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:12px; line-height:1.5; color:var(--ink-faint);
  text-align:center; font-style:normal;
}

/* --------------------------------------------------------------------- body */
.body{
  max-width:34.5em;          /* ~68 characters at this size */
  margin:0 auto;
  padding-top:52px;
}
.body p{
  margin:0 0 1.35em;
  text-align:justify;
  hyphens:auto;
  -webkit-hyphens:auto;
}
/* Justification needs enough width to avoid rivers; below that, ragged right reads better. */
@media (max-width:560px){
  .body p{ text-align:left; hyphens:manual; }
}

.body > p:first-of-type::first-letter{
  float:left;
  font-family:'Bodoni Moda',Didot,Georgia,serif;
  font-weight:700;
  font-size:4.9em;
  line-height:.82;
  padding:.04em .09em 0 0;
  margin-right:.02em;
  color:var(--ink);
}
/* The opening line in small caps is a broadsheet convention and eases the eye
   in after the drop cap. */
.body > p:first-of-type{
  font-variant-caps:normal;
}

.body h2{
  margin:2.4em 0 .75em;
  font-family:'Bodoni Moda',Didot,Georgia,serif;
  font-weight:600;
  font-size:1.62em;
  line-height:1.18;
  letter-spacing:-.005em;
  text-align:left;
  text-wrap:balance;
}
/* Sub-subhead in the reading face, italic. An uppercase letterspaced sans label
   here reads like software chrome rather than prose. */
.body h3{
  margin:2.1em 0 .5em;
  font-family:'Spectral',Georgia,serif;
  font-style:italic; font-weight:400;
  font-size:1.1em; letter-spacing:0; text-transform:none;
  color:var(--ink);
  text-align:left;
}
.body strong{ font-weight:600; }
.body em{ font-style:italic; }

/* A pull quote, set the way a magazine sets one: full measure, rules above and
   below, display face. No left rail and no indent -- that is a web convention
   borrowed from code comments, not from print. */
.body blockquote{
  margin:2.7em 0;
  padding:1.05em 0 1.15em;
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  font-family:'Bodoni Moda',Didot,Georgia,serif;
  font-style:italic;
  font-weight:500;
  font-size:1.44em;
  line-height:1.34;
  color:var(--ink);
  text-align:center;
}
.body blockquote p{
  text-align:center; hyphens:manual; margin:0;
  text-wrap:balance;
}

/* ---------------------------------------------------------------- end matter */
.endmark{
  margin:46px auto 0;
  text-align:center;
}
.endmark img{ width:26px; height:26px; opacity:.55; }

.colophon{
  max-width:34.5em; margin:34px auto 0;
  border-top:1px solid var(--rule);
  padding-top:18px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-faint);
}
.colophon a{ color:var(--ink-faint); border:none; }
.colophon a:hover{ color:var(--clay); }

@media (max-width:640px){
  body{ font-size:18px; }
  .sheet{ padding:22px 20px 72px; }
  .head{ padding-top:38px; }
  .body{ padding-top:38px; }
  .dateline{ font-size:9px; letter-spacing:.13em; justify-content:center; }
}

@media print{
  body::before{ display:none; }
  body{ background:#fff; }
  .plate-top,.colophon{ display:none; }
}