/* ==========================================================================
   CYBER SAFETY TODAY
   Concept: "the neighborhood watch bulletin".

   One vocabulary, held on every page: a printed sheet. Structure comes from
   horizontal rules of three weights, from ink, and from the size of the type.
   Nothing floats, glows or is lit from above.

   So, on purpose and checked by tools/check.py:
     no box-shadow, no border-radius, no gradient, no tinted callout box,
     no frame around a picture, no bar beside a quote, one accent colour.

   Colours, typefaces and sizes are NOT set here. They live in tokens.css.
   Started from the "broadsheet" template; its rule system is kept.
   ========================================================================== */

/* 1. Sheet ---------------------------------------------------------------- */

body { overflow-x: clip; font-feature-settings: "kern", "liga", "onum"; }
::selection { background: var(--c-ink); color: var(--c-stock); }
main { display: block; }

h1, h2, h3 { font-weight: 700; letter-spacing: -0.018em; }
h1 { font-weight: 900; letter-spacing: -0.026em; }

a { text-decoration-thickness: 1px; text-decoration-color: var(--c-ink-soft); }
a:hover { text-decoration-thickness: 2px; text-decoration-color: var(--c-accent); }
.link-plain { text-decoration: none; }
.link-plain:hover { text-decoration: underline; }

/* 2. Rules: the load-bearing element --------------------------------------- */

.rule { border: 0; border-top: var(--r-hair) solid var(--c-rule); margin: var(--s-4) 0; height: 0; }
.rule--mid   { border-top: var(--r-mid) solid var(--c-ink); }
.rule--heavy { border-top: var(--r-heavy) solid var(--c-ink); }
.rule--double {
  border-top: var(--r-mid) solid var(--c-ink);
  border-bottom: var(--r-hair) solid var(--c-ink);
  height: 6px;
}

/* 3. Small type: labels, datelines ---------------------------------------- */

.kicker, .meta {
  font-family: var(--f-label);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--c-ink-soft);
  max-width: none;
}
.kicker { font-weight: 600; line-height: 1.3; margin: 0 0 var(--s-2); }
.meta   { font-weight: 500; line-height: 1.6; }
.kicker a, .meta a { text-decoration-color: var(--c-rule); }
.kicker--accent { color: var(--c-accent); }

.standfirst { font-size: var(--t-lg); line-height: 1.4; max-width: 40ch; }

/* 4. Masthead: the nameplate ---------------------------------------------- */

.masthead { padding-top: var(--s-2); }

.dateline {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: var(--s-1) var(--s-4);
  margin: 0; padding-block: var(--s-2);
  border-bottom: var(--r-hair) solid var(--c-ink);
  font: 500 var(--t-xs)/1.4 var(--f-label);
  text-transform: uppercase; letter-spacing: 0.13em;
  color: var(--c-ink-soft);
  max-width: none;
}

.nameplate {
  display: block;
  padding-block: var(--s-3) var(--s-2);
  font-family: var(--f-display);
  font-weight: 900;
  font-size: var(--t-name);
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}
.nameplate:hover { text-decoration: none; }

/* Inside pages carry a smaller nameplate so the headline leads. */
body:not(.home) .nameplate { font-size: var(--t-2xl); padding-block: var(--s-3); }

.nav {
  border-top: var(--r-mid) solid var(--c-ink);
  border-bottom: var(--r-hair) solid var(--c-ink);
  margin-top: 0;
  position: relative;
}
/* Thick over thin: the double rule under a newspaper's name. */
.nav::before {
  content: ""; position: absolute; left: 0; right: 0; top: 3px;
  border-top: var(--r-hair) solid var(--c-ink);
}
.nav ul {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0 var(--s-5);
  list-style: none; margin: 0; padding: var(--s-2) 0 calc(var(--s-2) - 2px);
}
.nav li { max-width: none; }
.nav a {
  display: inline-block; padding-block: var(--s-1);
  font: 600 var(--t-xs)/1.3 var(--f-label);
  text-transform: uppercase; letter-spacing: 0.14em;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.nav a:hover { border-bottom-color: var(--c-accent); }
/* The current section is marked from the page's own class, so the shared
   masthead file never has to know which page it is on. */
.sec-is-this-real .nav a[href="/is-this-real/"],
.sec-guides       .nav a[href="/guides/"],
.sec-this-week    .nav a[href="/this-week/"],
.sec-about        .nav a[href="/how-this-is-made/"],
.sec-sources      .nav a[href="/sources/"] { border-bottom-color: var(--c-ink); }

/* 5. The strip: "Going around today". The site's one motif. ---------------- */

.strip { border-bottom: var(--r-mid) solid var(--c-ink); }
.strip__row {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  gap: var(--s-2) var(--s-4);
  align-items: baseline;
  padding-block: var(--s-3);
}
.strip__label {
  margin: 0; max-width: none;
  font: 600 var(--t-xs)/1.3 var(--f-label);
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--c-accent);
  padding-bottom: 5px;
  position: relative;
}
/* A short ruled segment under the label: the only place the accent draws a line. */
.strip__label::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 2.4rem; border-top: var(--r-mid) solid var(--c-accent);
}
.strip__items {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: stretch;
}
/* Equal columns with a hairline between them, like items across a front page. */
.strip__items li {
  flex: 1 1 0; max-width: none;
  font-family: var(--f-display); font-weight: 500;
  font-size: var(--t-base); line-height: 1.22;
  padding-inline: var(--s-3);
  border-left: var(--r-hair) solid var(--c-rule);
}
.strip__items li:first-child { padding-left: 0; border-left: 0; }
.strip__items a { text-decoration: none; }
.strip__items a:hover { text-decoration: underline; text-decoration-color: var(--c-accent); }
.strip__checked {
  margin: 0; max-width: none; text-align: right;
  font: 500 var(--t-xs)/1.3 var(--f-label);
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--c-ink-soft);
}
@media (max-width: 900px) {
  .strip__row { grid-template-columns: minmax(0, 1fr); }
  .strip__checked { text-align: left; }
  .strip__items { flex-direction: column; gap: var(--s-2); }
  .strip__items li { padding-inline: 0; border-left: 0; }
}

/* 6. Front page ----------------------------------------------------------- */

.lead {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: var(--s-4) var(--s-6);
  align-items: end;
  padding-block: var(--s-6) var(--s-5);
}
.lead h1 { font-size: var(--t-3xl); margin-bottom: var(--s-4); max-width: 15ch; }
.lead h1 a { text-decoration: none; }
.lead h1 a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--c-accent); }
.lead__answer {
  font-family: var(--f-display); font-weight: 500;
  font-size: var(--t-xl); line-height: 1.18; letter-spacing: -0.012em;
  max-width: 26ch; margin: 0 0 var(--s-3);
}
.lead__side { border-top: var(--r-mid) solid var(--c-ink); padding-top: var(--s-3); }
.lead__side .spot { margin: 0 0 var(--s-3); max-width: 15rem; }

.front {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: var(--s-5) var(--s-6);
  align-items: start;
  padding-bottom: var(--s-6);
}
.front__side > section + section { margin-top: var(--s-5); }

.head-row {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--s-1) var(--s-4);
  border-top: var(--r-heavy) solid var(--c-ink);
  padding-top: var(--s-2);
  margin-bottom: var(--s-2);
}
.head-row h2 { margin: 0; font-size: var(--t-lg); letter-spacing: -0.01em; }
.head-row .meta { margin: 0; }

@media (max-width: 900px) {
  .lead, .front { grid-template-columns: minmax(0, 1fr); }
  .lead { align-items: start; padding-block: var(--s-5) var(--s-4); }
}

/* 7. Ruled rows: where a card grid would have been ------------------------- */

.rows { list-style: none; margin: 0; padding: 0; }
.rows > li { max-width: none; border-bottom: var(--r-hair) solid var(--c-rule); }
.rows > li:last-child { border-bottom: var(--r-mid) solid var(--c-ink); }
.row {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--s-2) var(--s-5);
  padding-block: var(--s-4);
}
.row h3 { margin: 0; font-size: var(--t-xl); line-height: 1.08; }
.row h3 a { text-decoration: none; }
.row h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--c-accent); }
.row p { margin: 0 0 var(--s-2); }
.row p:last-child { margin-bottom: 0; }
@media (max-width: 760px) { .row { grid-template-columns: minmax(0, 1fr); } }

/* A plain listing in the side column. */
.briefs { list-style: none; margin: 0; padding: 0; }
.briefs li { max-width: none; padding-block: var(--s-3); border-bottom: var(--r-hair) solid var(--c-rule); }
.briefs li:first-child { padding-top: var(--s-2); }
.briefs h3 { font-size: var(--t-lg); line-height: 1.15; margin: 0 0 var(--s-1); }
.briefs h3 a { text-decoration: none; }
.briefs h3 a:hover { text-decoration: underline; text-decoration-color: var(--c-accent); }
.briefs p { margin: 0; font-size: var(--t-sm); line-height: 1.5; color: var(--c-ink-soft); }
.note p { font-size: var(--t-sm); line-height: 1.55; }

/* 8. Article -------------------------------------------------------------- */

.lede {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 15rem);
  gap: var(--s-4) var(--s-6);
  align-items: end;
  padding-block: var(--s-5) var(--s-4);
}
.lede h1 { font-size: var(--t-3xl); margin: 0; max-width: 17ch; }
.lede .standfirst { margin: var(--s-4) 0 0; }
.lede .spot { margin: 0; }
@media (max-width: 760px) {
  .lede { grid-template-columns: minmax(0, 1fr); }
  .lede .spot { max-width: 11rem; order: -1; }
}

/* "The short answer": set at headline size between two rules. Not a box. */
.answer {
  border-top: var(--r-heavy) solid var(--c-ink);
  border-bottom: var(--r-hair) solid var(--c-ink);
  padding-block: var(--s-3) var(--s-4);
}
.answer p:last-child {
  margin: 0; max-width: 30ch;
  font-family: var(--f-display); font-weight: 500;
  font-size: var(--t-2xl); line-height: 1.1; letter-spacing: -0.02em;
}

.byline {
  display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4);
  margin: 0; padding-block: var(--s-2);
  border-bottom: var(--r-hair) solid var(--c-rule);
}
.byline .draft { color: var(--c-accent); font-weight: 600; }

.article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
  gap: var(--s-5) var(--s-7);
  align-items: start;
  padding-block: var(--s-5) var(--s-6);
}
.article__body { max-width: var(--w-text); }
.article__body > p:first-child { font-size: var(--t-lg); line-height: 1.45; }
.article__body h2 {
  font-size: var(--t-xl);
  margin: var(--s-5) 0 var(--s-3);
  padding-top: var(--s-3);
  border-top: var(--r-mid) solid var(--c-ink);
}
.article__body ul { padding-left: 1.15em; margin: 0 0 var(--s-3); }
.article__body ul li { padding-left: 0.2em; margin-bottom: var(--s-2); }
.article__body ul li::marker { content: "\25AA\00a0"; color: var(--c-accent); }

/* Numbered steps: the numeral hangs in the margin at headline weight. */
.article__body ol { list-style: none; counter-reset: step; margin: 0 0 var(--s-3); padding: 0; }
.article__body ol > li {
  counter-increment: step;
  position: relative;
  padding: var(--s-3) 0 var(--s-3) 3.3rem;
  border-top: var(--r-hair) solid var(--c-rule);
}
.article__body ol > li:last-child { border-bottom: var(--r-hair) solid var(--c-rule); }
.article__body ol > li::before {
  content: counter(step);
  position: absolute; left: 0; top: calc(var(--s-3) - 0.12em);
  font: 700 var(--t-xl)/1 var(--f-display);
  font-feature-settings: "lnum";
}

/* A source number after a sentence. */
.cite { font: 600 0.62em/1 var(--f-label); vertical-align: super; margin-left: 0.12em; }
.cite a { text-decoration: none; color: var(--c-ink-soft); padding: 0 0.1em; }
.cite a:hover { color: var(--c-accent); }

/* The scam message, set the way a phone shows it, held between two rules. */
.message { margin: var(--s-5) 0; border-top: var(--r-mid) solid var(--c-ink); border-bottom: var(--r-hair) solid var(--c-ink); padding-block: var(--s-3) var(--s-4); }
.message figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-1) var(--s-3); margin-bottom: var(--s-3); }
.message figcaption span:last-child { font-weight: 500; }
.message blockquote { margin: 0; padding-left: var(--s-4); }
.message blockquote p {
  margin: 0 0 var(--s-2); max-width: 34ch;
  font-family: var(--f-phone); font-size: var(--t-lg); line-height: 1.38; letter-spacing: -0.005em;
}
.message blockquote p:last-child { margin-bottom: 0; }
/* A section heading straight after the message uses the message's closing rule as its own. */
.message + h2 { border-top: 0; padding-top: 0; margin-top: var(--s-4); }
.message .fake-link { text-decoration: underline; text-decoration-color: var(--c-ink-soft); }
@media (max-width: 600px) { .message blockquote { padding-left: 0; } }

/* Side column: stays in view while the page is read. */
.article__side {
  position: sticky; top: var(--s-4);
  border-top: var(--r-mid) solid var(--c-ink);
  padding-top: var(--s-3);
  font-size: var(--t-sm); line-height: 1.45;
}
.article__side h2 {
  font: 600 var(--t-xs)/1.3 var(--f-label);
  text-transform: uppercase; letter-spacing: 0.13em;
  color: var(--c-ink-soft);
  margin: 0 0 var(--s-1);
}
.article__side ol, .article__side ul { list-style: none; margin: 0 0 var(--s-4); padding: 0; }
.article__side li { max-width: none; padding-block: var(--s-2); border-bottom: var(--r-hair) solid var(--c-rule); }
.article__side p { font-size: var(--t-sm); margin-bottom: var(--s-4); }
.article__side .src-pub { display: block; font: 600 var(--t-xs)/1.4 var(--f-label); text-transform: uppercase; letter-spacing: 0.1em; color: var(--c-ink-soft); }
@media (max-width: 960px) {
  .article { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .article__side { position: static; }
}

/* Plain pages (how this is made, sources, corrections). */
.plain { padding-block: var(--s-5) var(--s-6); }
.plain h1 { font-size: var(--t-3xl); max-width: 16ch; margin-bottom: var(--s-4); }
.plain .article__body { margin-top: var(--s-4); }
.plain table { width: 100%; border-collapse: collapse; margin: 0 0 var(--s-4); font-size: var(--t-sm); }
.plain th, .plain td { text-align: left; vertical-align: top; padding: var(--s-2) var(--s-3) var(--s-2) 0; border-bottom: var(--r-hair) solid var(--c-rule); }
.plain thead th { border-bottom: var(--r-mid) solid var(--c-ink); font: 600 var(--t-xs)/1.4 var(--f-label); text-transform: uppercase; letter-spacing: 0.12em; }

/* Index pages. */
.index-head { padding-block: var(--s-5) var(--s-4); }
.index-head h1 { font-size: var(--t-3xl); margin-bottom: var(--s-3); }
.index-list { padding-bottom: var(--s-6); }
.index-list .rows { border-top: var(--r-heavy) solid var(--c-ink); }

/* 9. This week: one sheet, made to print ----------------------------------- */

.sheet { padding-block: var(--s-5) var(--s-6); max-width: 54rem; }
.sheet h1 { font-size: var(--t-3xl); margin-bottom: var(--s-2); }
.sheet__items { list-style: none; margin: var(--s-4) 0 0; padding: 0; border-top: var(--r-heavy) solid var(--c-ink); }
.sheet__items > li { max-width: none; padding-block: var(--s-4); border-bottom: var(--r-hair) solid var(--c-ink); }
.sheet__items h2 { font-size: var(--t-xl); margin: 0 0 var(--s-2); }
.sheet__items h2 a { text-decoration: none; }
.sheet__answer { font-family: var(--f-display); font-weight: 500; font-size: var(--t-lg); line-height: 1.25; margin: 0 0 var(--s-2); max-width: 44ch; }
.sheet__steps { margin: 0; padding-left: 1.3em; }
.sheet__steps li { max-width: 58ch; margin-bottom: var(--s-1); font-size: var(--t-sm); line-height: 1.5; }
.sheet__foot { margin-top: var(--s-4); }

/* 10. Spot drawings: ink line, one accent shape. No frame. ----------------- */

.spot { color: var(--c-ink); }
.spot svg { width: 100%; height: auto; overflow: visible; }
.spot .ink  { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.spot .thin { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.spot .tone { fill: var(--c-accent); stroke: none; }
.spot .paper { fill: var(--c-stock); stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.spot .solid { fill: currentColor; stroke: none; }

/* 11. Colophon ------------------------------------------------------------ */

.colophon { background: var(--c-stock-warm); border-top: var(--r-heavy) solid var(--c-ink); margin-top: var(--s-5); padding-block: var(--s-5); }
.colophon__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--s-4) var(--s-6); align-items: start; }
.colophon .colophon__name { font-family: var(--f-display); font-weight: 900; font-size: var(--t-xl); letter-spacing: -0.03em; line-height: 1; margin: 0 0 var(--s-3); }
.colophon p { font-size: var(--t-sm); line-height: 1.55; }
.colophon ul { list-style: none; margin: 0; padding: 0; border-top: var(--r-mid) solid var(--c-ink); }
.colophon li { max-width: none; padding-block: var(--s-2); border-bottom: var(--r-hair) solid var(--c-rule); font-size: var(--t-sm); }
.colophon li a { text-decoration: none; }
.colophon li a:hover { text-decoration: underline; text-decoration-color: var(--c-accent); }
.colophon__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-1) var(--s-4); margin: var(--s-5) 0 0; padding-top: var(--s-2); border-top: var(--r-hair) solid var(--c-ink); }
@media (max-width: 760px) { .colophon__grid { grid-template-columns: minmax(0, 1fr); } }

/* 12. Print: any page comes out as a clean sheet for the fridge ------------ */

@media print {
  :root { --t-base: 11pt; }   /* paper colours for print are set in tokens.css */
  .nav, .strip, .article__side, .colophon ul, .skip { display: none; }
  .nameplate, body:not(.home) .nameplate { font-size: 26pt; padding-block: 4pt; }
  .article { display: block; padding-block: 10pt; }
  .lede, .lead { padding-block: 8pt; }
  .lede .spot { max-width: 8rem; }
  .colophon { background: none; margin-top: 12pt; padding-block: 8pt; }
  a { text-decoration: none; }
  .article__body a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; word-break: break-all; }
  h2, h3, li { break-inside: avoid; }
  h2 { break-after: avoid; }
}