/*
   NEWSPRINT — The Smoke Ring's type and furniture, laid over pages that were
   built from the app's ordinary components (story cards, stat strips, list
   tables, results blocks, the site's own ad slots).

   Loaded after newspaper.css on the pages set as editions of the paper —
   /weekend (the Weekend Edition) and /recap (The Recap). Everything is scoped
   to `.np-skin`, the class on their sheet, so no other page sees any of it.

   The method: the site's colour tokens are re-pointed at the paper's ink and
   rules inside the sheet, so every component that reads var(--text),
   var(--muted) or var(--line) turns to print by itself; then the few things a
   token cannot reach — rounded cards, gradient numerals, glows, sticky dark
   table heads — are taken back off, one rule each. Same markup, same data,
   same ad slots; a different paper.
*/

.np-skin {
  --text: var(--ink);
  --muted: var(--ink-2);
  --line: var(--rule);
  --bg: var(--paper);
  --bg-2: transparent;
  --bg-3: var(--paper-2);
  --ember: var(--spot);
  --ember-2: var(--spot);
  --flame: var(--spot);
  --flame-grad: var(--ink);
  --gold: #7d5c0c;
  --silver: #55585e;
  --bronze: #7f4f24;
  --ok: var(--up);
  font-size: 1rem;
}

/* ---------- the edition's masthead (views/_paperhead.njk) ----------------- */
.np-mast-edition .np-nameplate-sm {
  font-size: clamp(2rem, 5.2vw, 3.7rem);
  margin: 0;
}
.np-mast-edition .np-nameplate-sm a { text-decoration: none; }
.np-edition-title {
  font-family: var(--display) !important; font-weight: 900 !important; font-style: italic;
  font-size: clamp(1.25rem, 2.6vw, 2.05rem) !important; line-height: 1.05;
  margin: 4px 0 0 !important; letter-spacing: -.01em !important; text-transform: none !important;
}
.np-edition-lead {
  font-family: var(--display); font-size: clamp(1.02rem, 1.55vw, 1.22rem); line-height: 1.4;
  color: var(--ink-2); text-align: center; max-width: 52em; margin: 14px auto 6px !important;
}
.np-edition-lead b { color: var(--ink); }

/* ---------- headings -------------------------------------------------------
   A section's <h2> is set as a section front: a heavy rule over a double one,
   the name centred between them in the headline face. */
.np-skin h2 {
  font-family: var(--display) !important; font-weight: 900 !important;
  font-size: clamp(1.05rem, 1.9vw, 1.4rem) !important; line-height: 1.15;
  text-transform: uppercase !important; letter-spacing: .04em !important; text-align: center;
  border-top: 3px solid var(--ink); border-bottom: 3px double var(--ink);
  padding: 8px 0 6px; margin: 30px 0 12px !important;
  display: block !important;
}
.np-skin h2::before, .np-skin h3::before { content: none !important; display: none !important; }
.np-skin h3 { font-family: var(--display); font-weight: 700; }
.np-skin .fine { color: var(--ink-3); font-size: .78rem; line-height: 1.45; }
.np-skin section > .fine:first-of-type { font-style: italic; text-align: center; margin: -4px auto 10px; max-width: 60em; }

/* ---------- the figures band (the stat strip) ------------------------------ */
.np-skin .lander-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 0; justify-content: stretch;
  border-top: 1px solid var(--ink); border-bottom: 3px double var(--ink);
  margin: 10px 0 18px;
}
.np-skin .lander-stats > a, .np-skin .lander-stats > span {
  padding: 12px 8px 11px; border-left: 1px solid var(--rule); text-align: center;
}
.np-skin .lander-stats > :first-child { border-left: 0; }
.np-skin .lander-stats b {
  font-family: var(--display); font-weight: 900; font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: .95;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  background: none; -webkit-text-fill-color: currentColor; color: var(--ink);
}
.np-skin .lander-stats span span, .np-skin .lander-stats a span {
  font-family: var(--agate); font-size: .58rem; letter-spacing: .13em; color: var(--ink-2); margin-top: 6px;
}
.np-skin .lander-stats a:hover b { filter: none; color: var(--spot); }

/* ---------- stories --------------------------------------------------------
   Cards become columns of type: no boxes, no glow, no emoji badge — a kicker
   in the spot colour, the figure in the headline face, the sentence set
   justified, and a hairline between columns. The grid is pulled one pixel
   left and up under a clip, so the rules show only BETWEEN stories. */
.np-skin .story-grid { gap: 0; overflow: hidden; margin: 6px 0 10px; }
.np-skin .story-card {
  background: none; border: 0; border-radius: 0; box-shadow: none; transform: none !important;
  border-left: 1px solid var(--rule); border-top: 1px solid var(--rule);
  margin: -1px 0 0 -1px; padding: 14px clamp(12px, 1.5vw, 20px) 16px;
}
.np-skin .story-card::before { display: none; }
.np-skin .story-card:hover { box-shadow: none; }
.np-skin .story-badge { display: none; }
.np-skin .story-top { min-height: 0; }
.np-skin .story-title {
  font-family: var(--agate); font-size: .66rem; font-weight: 500; letter-spacing: .22em;
  text-transform: uppercase; color: var(--spot);
}
.np-skin .story-say { border-left-color: var(--rule); }
.np-skin .story-figure {
  font-family: var(--display); font-weight: 900; letter-spacing: -.02em; line-height: 1;
  background: none; -webkit-text-fill-color: currentColor; color: var(--ink);
}
/* Playfair's figures run a third wider than Oswald's, so the site's sizes
   wrapped a four-decimal score mid-number (4.7em for 700.0000, in a stat
   column 112px at its narrowest, 180px on the lead). Each length class is
   re-sized to fit its column, and a figure breaks only at a space, never
   inside a number. */
.np-skin .story-figure { font-size: clamp(1.6rem, 2.4vw, 2rem); overflow-wrap: normal; }
.np-skin .story-figure.is-mid { font-size: clamp(1.15rem, 1.7vw, 1.45rem); }
.np-skin .story-figure.is-long { font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.15; }
.np-skin .story-lead .story-figure { font-size: clamp(2.2rem, 4vw, 3.2rem); }
.np-skin .story-lead .story-figure.is-mid { font-size: clamp(1.7rem, 2.8vw, 2.25rem); }
.np-skin .story-lead .story-figure.is-long { font-size: clamp(1.5rem, 2.3vw, 1.9rem); }
.np-skin .story-cap { font-family: var(--agate); color: var(--ink-2); font-size: .6rem; letter-spacing: .12em; }
.np-skin .story-text {
  font-family: var(--serif); color: var(--ink); font-size: .95rem; line-height: 1.5;
  text-align: justify; hyphens: auto; -webkit-hyphens: auto;
}
.np-skin .story-lead .story-text { font-size: 1.08rem; }
.np-skin .story-text b, .np-skin .story-text a { color: var(--ink); }
.np-skin .story-text a { text-decoration-color: rgba(25, 21, 16, .3); }
.np-skin .story-text a:hover { color: var(--spot); }
.np-skin .story-meter { background: none; border: 1px solid var(--ink); border-radius: 0; height: 10px; }
.np-skin .story-meter-fill {
  border-radius: 0; background: repeating-linear-gradient(135deg, var(--ink) 0 2px, transparent 2px 5px);
}
.np-skin .story-meter-cap { font-family: var(--agate); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.np-skin .story-chips { gap: 0 10px; }
.np-skin .story-chips li {
  background: none; border: 0; border-radius: 0; padding: 0;
  font-family: var(--agate); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2);
}
.np-skin .story-chips li + li::before { content: "·"; margin-right: 10px; color: var(--ink-3); }
@media (max-width: 620px) {
  .np-skin .story-text { text-align: left; }
}

/* ---------- boards and tables: agate -------------------------------------- */
.np-skin .results-grid { gap: 18px clamp(14px, 2vw, 26px); }
.np-skin .results-block {
  background: none; border: 0; border-radius: 0; padding: 6px 0 0;
  border-top: 2px solid var(--ink);
}
.np-skin .results-block h3 {
  font-family: var(--display); font-weight: 900; font-size: 1.12rem; line-height: 1.15;
  text-transform: none; letter-spacing: -.01em; color: var(--ink);
}
.np-skin .results-block h3 .fine { font-family: var(--agate); font-style: normal; font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; }
.np-skin .list-table {
  background: none; border: 0; border-radius: 0; margin: 8px 0 18px;
  font-family: var(--serif);
}
.np-skin .list-table thead th {
  position: static; background: none !important; border-radius: 0 !important;
  font-family: var(--agate); font-weight: 500; font-size: .58rem; letter-spacing: .14em; color: var(--ink-2);
  border-bottom: 1px solid var(--ink); padding: 6px 8px;
}
.np-skin .list-table td {
  border-bottom: 1px dotted var(--rule); padding: 6px 8px; font-size: .88rem; color: var(--ink);
  border-radius: 0 !important; background: none !important;
}
.np-skin .list-table tbody tr:last-child td { border-bottom: 1px solid var(--rule); }
.np-skin .list-table tbody tr:hover td { background: rgba(162, 53, 15, .05) !important; }
.np-skin .list-table .score, .np-skin .list-table .date {
  font-family: var(--agate); font-weight: 500; font-size: .82rem; letter-spacing: .02em; white-space: nowrap;
}
.np-skin .list-table a { color: var(--ink); }
.np-skin .list-table a:hover { color: var(--spot); }
.np-skin table.sortable thead th:hover { color: var(--ink); }
.np-skin table.sortable thead th[aria-sort]::after { color: var(--spot); }
.np-skin .place {
  background: none !important; box-shadow: none !important; border-radius: 0; min-width: 0; height: auto; padding: 0;
  font-family: var(--agate); font-weight: 500; color: var(--ink-3);
}
.np-skin .place.p1 { color: var(--spot); font-weight: 700; }
.np-skin .place.p2, .np-skin .place.p3 { color: var(--ink); }
.np-skin .phone-scroll, .np-skin .table-scroll { background: none; border: 0; }

/* ---------- chips, buttons, links ------------------------------------------ */
.np-skin .ember-text { background: none; -webkit-text-fill-color: currentColor; color: var(--spot); }
.np-skin .tagchip {
  background: none; border: 1px solid var(--ink-2); border-radius: 0; color: var(--ink);
  font-family: var(--agate); font-size: .56rem; letter-spacing: .14em; text-transform: uppercase; padding: 1px 6px;
}
.np-skin .tagchip.gold { border-color: var(--spot); color: var(--spot); }
.np-skin .tagchip.info { border-color: var(--ink-3); color: var(--ink-2); }
.np-skin .btn {
  background: none; color: var(--ink); border: 1px solid var(--ink); border-radius: 0; box-shadow: none;
  font-family: var(--agate); font-weight: 500; letter-spacing: .16em; transform: none !important;
}
.np-skin .btn:hover { background: var(--ink); color: var(--paper); }
.np-skin .btn-primary { background: var(--ink); color: var(--paper); }
.np-skin .btn-primary:hover { background: var(--spot); border-color: var(--spot); }

/* ---------- the site's ad slots, as display ads in the paper --------------- */
.np-skin .adslot { margin: 20px 0; align-items: stretch; }
.np-skin .adslot-label { font-family: var(--agate); letter-spacing: .3em; color: var(--ink-3); opacity: 1; text-align: center; }
.np-skin .adslot-house {
  width: 100%;
  border: 3px double var(--ink); border-radius: 0;
  background-color: var(--paper-2);
  background-image: repeating-linear-gradient(135deg, rgba(25, 21, 16, .035) 0 8px, transparent 8px 16px);
  padding: 12px 22px;
}
.np-skin .adslot-head {
  font-family: var(--display); font-weight: 900; text-transform: none; letter-spacing: -.01em;
  font-size: clamp(1.4rem, 2.4vw, 2rem); color: var(--ink);
}
.np-skin .adslot-head .ember-text { color: var(--ink); }
.np-skin .adslot-pitch { font-family: var(--serif); font-style: italic; color: var(--ink-2); font-size: .92rem; }
.np-skin .adslot-cta { background: none; border: 1px solid var(--ink); color: var(--ink); font-size: .7rem; padding: 8px 16px; }
.np-skin .adslot-cta:hover { background: var(--ink); color: var(--paper); }
.np-skin .adslot-art img { border-radius: 0; box-shadow: none; }

/* ---------- boxed notices (the calendar pitch, the recap's next line) ------ */
.np-skin .judge-cta {
  background: var(--paper-2); border: 3px double var(--ink); border-radius: 0; margin: 26px 0;
}
.np-skin .judge-cta h2 {
  border: 0 !important; padding: 0 !important; margin: 0 0 4px !important; text-align: left;
  text-transform: none !important; letter-spacing: -.01em !important; font-size: clamp(1.3rem, 2.4vw, 1.8rem) !important;
}
.np-skin .judge-cta p { color: var(--ink-2); font-size: .95rem; }
.np-skin .recap-next {
  background: none; border: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  border-radius: 0; padding: 10px 0; color: var(--ink-2); font-size: .9rem;
}
.np-skin .recap-next b { font-family: var(--agate); color: var(--ink); }

/* ---------- the weekend's fixture list ------------------------------------- */
.np-skin .wk-grid { gap: 0; overflow: hidden; margin: 6px 0 14px; }
.np-skin .wk-card {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  border-left: 1px solid var(--rule); border-top: 1px solid var(--rule);
  margin: -1px 0 0 -1px; padding: 14px 18px 16px;
}
.np-skin .wk-card h3 { font-family: var(--display); font-weight: 900; font-size: 1.28rem; line-height: 1.08; letter-spacing: -.01em; }
.np-skin .wk-card h3 a { color: var(--ink); }
.np-skin .wk-card h3 a:hover { color: var(--spot); }
.np-skin .wk-card.is-class { background: none; }
.np-skin .wk-card.is-class h3 { font-style: italic; font-weight: 700; }
.np-skin .wk-card.is-class h3 a { color: var(--ink-2); }
.np-skin .wk-where { font-family: var(--serif); font-style: italic; color: var(--ink-2); }
.np-skin .wk-facts { gap: 4px 20px; margin-top: 6px; }
.np-skin .wk-facts span { font-family: var(--agate); font-size: .56rem; letter-spacing: .14em; color: var(--ink-3); }
.np-skin .wk-facts b { font-family: var(--serif); font-weight: 600; color: var(--ink); }
.np-skin .wk-def { border-top: 1px dotted var(--rule); color: var(--ink-2); }
.np-skin .wk-def a { font-weight: 700; color: var(--ink); }
/* the weekend's biggest contest leads the list, across two columns */
.np-skin .wk-card.wk-lead h3 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); }
@media (min-width: 900px) { .np-skin .wk-card.wk-lead { grid-column: span 2; } }
.np-skin .wk-kicker {
  font-family: var(--agate); font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--spot);
  margin-bottom: 4px !important;
}

/* ---------- the recap's newsstand strip and archive ------------------------ */
.np-skin .paper-promo { box-shadow: none; border: 3px double var(--ink); border-radius: 0; margin: 26px 0; }
.np-skin .archive-months a {
  background: none; border: 1px solid var(--rule); border-radius: 0; color: var(--ink);
  font-family: var(--agate); font-size: .7rem; letter-spacing: .08em;
}
.np-skin .archive-months a:hover { border-color: var(--ink); transform: none; }
.np-skin .archive-months a[aria-current="page"] { background: var(--ink); color: var(--paper); }
.np-skin .archive-months .archive-n { color: var(--ink-3); }
.np-skin .archive-cal .archive-none { border-radius: 0; border-color: var(--rule-2); color: var(--rule); background: none; }
.np-skin .archive-year h3 { font-size: 1rem; border-bottom: 1px dotted var(--rule); padding-bottom: 3px; margin: 12px 0 6px; }

/* the closing line, set as the paper's colophon */
.np-skin > .fine:last-child, .np-skin .np-edition-colophon {
  border-top: 3px double var(--ink); padding-top: 10px; margin-top: 26px; text-align: center; font-style: italic;
}

@media print {
  .np-skin .adslot { display: none !important; }
}

/* ---------- second-pass fixes ------------------------------------------- */
/* small print is the text face, not the site's sans */
.np-skin .fine, .np-skin .phone-sub { font-family: var(--serif); }
.np-skin .fine a { color: inherit; }
/* A narrow column of type with long team names in it opens rivers when it is
   justified — the names cannot hyphenate. Narrow stories are set ragged, as
   the paper's own narrow columns are; the lead, set wide, stays justified. */
.np-skin .story-card:not(.story-lead) .story-text { text-align: left; hyphens: manual; -webkit-hyphens: manual; }
/* the market's arrows, in the paper's two inks */
.np-skin .list-table .delta.up { color: var(--up); }
.np-skin .list-table .delta.down { color: var(--spot); }
/* a two-digit place stays on one line */
.np-skin .place { white-space: nowrap; }
/* the weekend's lead contest opens the list, across two columns */
.np-skin .wk-card.wk-lead { order: -1; }
/* the figures band's rules between cells only, however many cells a row holds:
   every cell carries a left rule, and the band clips the first column's */
.np-skin .lander-stats { overflow: hidden; }
.np-skin .lander-stats > a, .np-skin .lander-stats > span { margin-left: -1px; }
.np-skin .lander-stats > :first-child { border-left: 1px solid var(--rule); }