/* no-comment.css — /no-comment, the humor column's own front page
   (owner, 2026-10-10: "design it so it's super buzzy looking and fun, but
   also fits a good amount of articles"). Loaded by no-comment.html alone,
   after styles.css; scripts/build_no_comment_sheet.py writes the markup.

   ONE TYPE SYSTEM (owner, 2026-10-02): Playfair Display upright for the
   column's name, the headlines and the band heads; Inter for everything
   else. No italics, nothing under 11px. Rules are near-black. The energy
   comes from scale, one accent the page keeps to itself (the highlighter
   pink), the stamps and the motion — never from a third face.

   THE PAGE'S OWN ACCENT. Pink sits only behind near-black type (5.6:1) or
   as a rule, a stroke or a shadow; it never carries small text on white. */

/* Playfair Display at 800-900: the same variable file fonts.css serves
   (wght 400-900), declared for the heavy weights this page alone sets, so
   the name is drawn, not faked bold. No second download. */
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 800 900; font-display: swap; src: url("fonts/playfair-display-v40-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 800 900; font-display: swap; src: url("fonts/playfair-display-v40-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

.ncpage {
  --nc-ink: #121212;
  --nc-pink: #ff3d8b;
  --nc-pink-soft: #ffe4ef;
  --nc-wash: #f4f4f2;
  color: var(--nc-ink);
  font-family: var(--ui);
  padding-bottom: 8px;
}
.ncpage a:focus-visible { outline: 3px solid var(--nc-pink); outline-offset: 3px; }

/* ---- the column's masthead ------------------------------------------- */
.nc-mast { position: relative; padding: 34px 0 24px; }
.nc-eyebrow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  margin: 0 0 14px;
  font: 700 12px/1.3 var(--ui); letter-spacing: .14em; text-transform: uppercase;
}
.nc-eyebrow a { color: var(--nc-ink); text-decoration: none; padding: 3px 0;
  border-bottom: 3px solid var(--nc-pink); }
.nc-eyebrow a:hover { background: var(--nc-pink-soft); }
.nc-eyebrow-sep { color: var(--ink-3); }
.nc-eyebrow span:last-child { color: var(--ink-2); }
.nc-name { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 34px; }
.nc-title {
  margin: 0;
  font: 900 clamp(56px, 12vw, 172px)/.88 var(--display);
  letter-spacing: -.035em;
  color: var(--nc-ink);
}
.nc-title-comment {
  /* the highlighter stroke, low across the word */
  background: linear-gradient(transparent 58%, var(--nc-pink) 58%, var(--nc-pink) 88%, transparent 88%);
  padding: 0 .05em;
  margin: 0 -.05em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.nc-bigstamp {
  margin: 0;
  max-width: 12ch;
  padding: 10px 14px 9px;
  border: 3px solid var(--nc-ink);
  background: #fff;
  box-shadow: 5px 5px 0 var(--nc-pink);
  font: 900 14px/1.2 var(--ui); letter-spacing: .13em; text-transform: uppercase;
  text-align: center;
  transform: rotate(-8deg);
  transition: transform .25s cubic-bezier(.3, 1.6, .5, 1);
}
.nc-mast:hover .nc-bigstamp { transform: rotate(-13deg) scale(1.06); }
.nc-sub { margin: 18px 0 0; max-width: 40ch;
  font: 600 clamp(18px, 1.7vw, 22px)/1.4 var(--ui); color: var(--ink-2); }
.nc-fresh { margin: 8px 0 0; font: 500 12.5px/1.4 var(--ui); color: var(--ink-3); }

/* ---- the strip of non-statements -------------------------------------- */
.nc-marquee {
  position: relative;
  overflow: hidden;
  margin: 0 0 34px;
  background: var(--nc-ink);
  color: #fff;
  border-top: 4px solid var(--nc-ink);
  box-shadow: inset 0 -3px 0 var(--nc-pink);
}
.nc-marquee-track { display: flex; width: max-content; animation: nc-run 42s linear infinite; }
.nc-marquee:hover .nc-marquee-track { animation-play-state: paused; }
.nc-marquee-run { display: flex; flex: none; }
.nc-marquee span {
  padding: 12px 0 13px;
  white-space: nowrap;
  font: 900 13px/1 var(--ui); letter-spacing: .16em; text-transform: uppercase;
}
.nc-marquee span::after {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  margin: 0 20px;
  vertical-align: 1px;
  background: var(--nc-pink);
  transform: rotate(45deg);
}
@keyframes nc-run { to { transform: translateX(-50%); } }
/* The ends fade into the strip's own black, so a word cut by the edge reads
   as the strip running, not as a strip that broke (owner, 2026-10-16: "things
   got cut off"). Drawn over the words, never over the pink rule under them. */
.nc-marquee::before, .nc-marquee::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 3px;
  width: 44px;
  pointer-events: none;
}
.nc-marquee::before { left: 0; background: linear-gradient(to right, var(--nc-ink), rgba(18, 18, 18, 0)); }
.nc-marquee::after { right: 0; background: linear-gradient(to left, var(--nc-ink), rgba(18, 18, 18, 0)); }

/* ---- the stamp: the NO COMMENT kicker on every card -------------------- */
.nc-stamp {
  display: inline-block;
  margin: 0;
  padding: 5px 8px 4px;
  border: 2px solid var(--nc-ink);
  background: var(--nc-pink);
  color: var(--nc-ink);
  font: 900 11px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase;
  transform: rotate(-3deg);
  transition: transform .22s cubic-bezier(.3, 1.6, .5, 1);
}

/* ---- the lead ---------------------------------------------------------- */
.nc-band { margin: 0 0 52px; }
.nc-top { margin-bottom: 56px; }
.nc-lead {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 0 44px;
  align-items: center;
}
.nc-lead-art { min-width: 0; }
.nc-lead-art a {
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--nc-wash);
  border: 3px solid var(--nc-ink);
  box-shadow: 12px 12px 0 var(--nc-pink);
  transition: box-shadow .25s ease, transform .25s ease;
}
.nc-lead-art a:hover { transform: translate(-3px, -3px); box-shadow: 15px 15px 0 var(--nc-pink); }
.nc-lead-img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.nc-lead-art a:hover .nc-lead-img { transform: scale(1.035); }
/* The lead's credit is drawn under its picture (the NYT pattern, 9F). */
body .ncpage .nc-lead .nc-lead-art .cr.nc-lead-cr { display: block; margin-top: 18px;
  font: 400 11px/1.4 var(--ui); color: var(--ink-3); }
.nc-lead-copy { min-width: 0; }
.nc-stamp-lead { padding: 7px 11px 6px; font-size: 13px; transform: rotate(-4deg); }
.nc-lead:hover .nc-stamp-lead { transform: rotate(-9deg) scale(1.08); }
.nc-lead-hl {
  margin: 20px 0 0;
  font: 800 clamp(30px, 3.4vw, 54px)/1.05 var(--display);
  letter-spacing: -.018em;
  text-wrap: balance;
}
.nc-lead-hl a, .nc-card-hl a, .nc-file a {
  color: var(--nc-ink);
  text-decoration: none;
  background-image: linear-gradient(var(--nc-pink), var(--nc-pink));
  background-repeat: no-repeat;
  background-position: 0 94%;
  background-size: 0 .16em;
  transition: background-size .3s ease;
}
.nc-lead-hl a:hover, .nc-card:hover .nc-card-hl a, .nc-file a:hover { background-size: 100% .16em; }
.nc-dek { margin: 16px 0 0; font: 400 18px/1.5 var(--ui); color: var(--ink-2); }
.nc-meta { margin: 12px 0 0; font: 600 12px/1.3 var(--ui); letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3); }
.nc-lead-solo { grid-template-columns: minmax(0, 1fr); max-width: 880px; padding: 28px 30px;
  background: var(--nc-pink-soft); border-top: 6px solid var(--nc-ink); }

/* ---- the band heads ---------------------------------------------------- */
.nc-band-h {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 24px;
  padding-top: 12px;
  border-top: 4px solid var(--nc-ink);
  font: 800 clamp(24px, 2.4vw, 34px)/1.1 var(--display);
  letter-spacing: -.01em;
}
.nc-band-h::after { content: ""; flex: 1; min-width: 24px; height: 1px; background: var(--nc-ink); }

/* ---- the cards: the row of three and the grid of eight ----------------- */
/* The row sits on the page's own wash: white, pink, white, black, down the
   page — the rhythm, without a third face or a second accent. */
.nc-rowband { padding: 0 26px 34px; background: var(--nc-pink-soft); }
.nc-rowband .nc-band-h { margin: 0 -26px 26px; padding: 14px 26px 0; }
.nc-row .nc-stamp { font-size: 12px; padding: 6px 9px 5px; }
.nc-row, .nc-grid { list-style: none; margin: 0; padding: 0; display: grid; }
.nc-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 38px 32px; }
.nc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px 26px; }
.nc-card { position: relative; min-width: 0; transition: transform .22s ease; }
.nc-card:hover { transform: translateY(-4px); }
.nc-card-art {
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--nc-wash);
  border: 2px solid var(--nc-ink);
  transition: box-shadow .22s ease;
}
.nc-card:hover .nc-card-art { box-shadow: 7px 7px 0 var(--nc-pink); }
.nc-card-img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.nc-card:hover .nc-card-img { transform: scale(1.05); }
/* the stamp lands across the picture's bottom edge, tilted, every other one the other way */
.nc-card:not(.nc-solo) .nc-stamp { position: relative; z-index: 1; margin: -13px 0 0 12px; }
.nc-card:nth-child(even) .nc-stamp { transform: rotate(2.5deg); }
.nc-card:nth-child(3n) .nc-stamp { transform: rotate(-1.5deg); }
.nc-card:hover .nc-stamp { transform: rotate(-7deg) scale(1.08); }
.nc-card-hl { margin: 12px 0 0; font: 700 23px/1.18 var(--display); text-wrap: pretty; }
.nc-card-sm .nc-card-hl { font-size: 18px; line-height: 1.22; }
.nc-card-dek { margin: 8px 0 0; font: 400 14px/1.5 var(--ui); color: var(--ink-2); }
/* a piece with no picture of its own is a type card, on the page's wash */
.nc-solo { padding: 16px 16px 18px; background: var(--nc-pink-soft); border-top: 4px solid var(--nc-ink); }

/* ---- the whole file ---------------------------------------------------- */
.nc-file { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 48px; }
.nc-file li {
  break-inside: avoid;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 4px 14px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}
.nc-file-k {
  padding: 4px 6px 3px;
  background: var(--nc-pink);
  font: 900 11px/1 var(--ui); letter-spacing: .12em;
  white-space: nowrap;
}
.nc-file a { font: 700 17px/1.3 var(--display); }
.nc-file-date { font: 500 12px/1.2 var(--ui); color: var(--ink-3); white-space: nowrap; }
.nc-more { margin: 18px 0 0; font: 500 13px/1.5 var(--ui); color: var(--ink-3); }
.nc-more a { color: var(--nc-ink); text-decoration: underline; text-decoration-color: var(--nc-pink);
  text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ---- a column with nothing out yet: one quiet line, never a box ------- */
/* An empty band does not print at all (the builder leaves it out); before
   the first piece, the lead's place holds this one line. */
.nc-first {
  margin: 0;
  padding-top: 14px;
  border-top: 4px solid var(--nc-ink);
  font: 600 17px/1.45 var(--ui);
  color: var(--ink-2);
}

/* ---- what this is ------------------------------------------------------ */
.nc-about {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 8px 26px;
  margin: 4px 0 40px;
  padding: 22px 26px;
  background: var(--nc-ink);
  color: #fff;
}
.nc-about-h { margin: 0; font: 800 24px/1.15 var(--display); color: var(--nc-pink); white-space: nowrap; }
.nc-about p { margin: 0; max-width: 72ch; font: 400 15px/1.6 var(--ui); color: rgba(255, 255, 255, .9); }
.nc-about a { color: #fff; text-decoration: underline; text-decoration-color: var(--nc-pink);
  text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ---- smaller screens --------------------------------------------------- */
@media (max-width: 1040px) {
  .nc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nc-lead { gap: 0 32px; }
}
@media (max-width: 760px) {
  /* THE FIRST SCREEN IS THE LEAD'S (the house's phone law; launch fix,
     2026-10-16: the headline opened 695px down on a 390x844 phone). The
     stamp leaves the name's row and sits in its own column beside the line
     under it — in the flow, so the masthead is always tall enough for it,
     with or without the "Newest" line; the masthead and the strip run
     tighter; the lead's picture crops to 16:9 (object-fit: cover, centred);
     and the lead's stamp lands across the picture's bottom edge, as every
     card's does, with the credit beside it on the right — so the headline's
     first line is on the first screen. */
  .nc-mast { display: grid; grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px; padding: 10px 0 10px; }
  .nc-eyebrow { grid-column: 1 / -1; grid-row: 1; margin-bottom: 6px; }
  .nc-name { display: contents; }
  .nc-title { grid-column: 1 / -1; grid-row: 2; font-size: clamp(50px, 15vw, 96px); }
  .nc-bigstamp { grid-column: 2; grid-row: 3 / span 2; align-self: start; justify-self: end;
    margin: 4px 8px 0 0; max-width: 10ch;
    padding: 5px 7px 4px; font-size: 11px; line-height: 1.15;
    box-shadow: 3px 3px 0 var(--nc-pink); transform: rotate(7deg); }
  .nc-mast:hover .nc-bigstamp { transform: rotate(11deg) scale(1.04); }
  .nc-sub { grid-column: 1; grid-row: 3; margin-top: 8px; font-size: 16px; line-height: 1.3; }
  .nc-fresh { grid-column: 1; grid-row: 4; margin-top: 4px; }
  .nc-marquee { margin-bottom: 14px; }
  .nc-marquee span { padding: 9px 0 10px; font-size: 12px; }
  .nc-marquee::before, .nc-marquee::after { width: 32px; }
  .nc-lead { grid-template-columns: minmax(0, 1fr); }
  /* The pink slab stays inside the gutter: the picture gives up the slab's
     6px on the right, so picture and slab together are the column's width. */
  .nc-lead-art a { aspect-ratio: 16 / 9; margin-right: 6px; box-shadow: 6px 6px 0 var(--nc-pink); }
  .nc-lead-art a:hover { box-shadow: 6px 6px 0 var(--nc-pink); transform: none; }
  .nc-lead:not(.nc-lead-solo) { grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; }
  .nc-lead:not(.nc-lead-solo) > .nc-lead-art,
  .nc-lead:not(.nc-lead-solo) > .nc-lead-copy { display: contents; }
  .nc-lead:not(.nc-lead-solo) .nc-lead-art > a { grid-column: 1 / -1; grid-row: 1; }
  .nc-lead:not(.nc-lead-solo) .nc-stamp-lead { grid-column: 1; grid-row: 2; justify-self: start;
    position: relative; z-index: 1; margin: -14px 0 0 12px; }
  body .ncpage .nc-lead .nc-lead-art .cr.nc-lead-cr { grid-column: 2; grid-row: 2;
    margin-top: 10px; text-align: right; }
  .nc-lead:not(.nc-lead-solo) .nc-lead-hl { grid-column: 1 / -1; grid-row: 3; }
  .nc-lead:not(.nc-lead-solo) .nc-dek { grid-column: 1 / -1; grid-row: 4; }
  .nc-lead:not(.nc-lead-solo) .nc-meta { grid-column: 1 / -1; grid-row: 5; }
  .nc-stamp-lead { padding: 5px 8px 4px; font-size: 12px; transform: rotate(-3deg); }
  .nc-lead:hover .nc-stamp-lead { transform: rotate(-6deg) scale(1.04); }
  .nc-lead-hl { margin-top: 10px; font-size: clamp(28px, 7.6vw, 38px); }
  .nc-dek { font-size: 16px; }
  .nc-row { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .nc-rowband { padding: 0 14px 26px; }
  .nc-rowband .nc-band-h { margin: 0 -14px 20px; padding: 12px 14px 0; }
  /* A band head that wraps on a phone wraps clean: the hairline after it
     goes (the 4px rule above already draws the band), so no stray dash is
     left at the end of the second line. */
  .nc-band-h { display: block; text-wrap: balance; }
  .nc-band-h::after { content: none; }
  /* Cards keep their lift shadow inside the gutter on a phone: a tap leaves
     :hover stuck, and a full-width card's 7px slab would reach the edge. */
  .nc-card:hover .nc-card-art { box-shadow: none; }
  .nc-card-hl { font-size: 22px; }
  /* the grid turns into a dense list: a small picture beside each headline */
  .nc-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .nc-grid .nc-card { display: grid; grid-template-columns: 112px minmax(0, 1fr);
    column-gap: 14px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .nc-grid .nc-card:hover { transform: none; }
  .nc-grid .nc-card-art { grid-row: 1 / span 3; aspect-ratio: 1 / 1; }
  .nc-grid .nc-card:not(.nc-solo) .nc-stamp { margin: 0; justify-self: start; }
  .nc-grid .nc-stamp, .nc-grid .nc-card-hl, .nc-grid .nc-meta { grid-column: 2; }
  .nc-grid .nc-card-hl { margin-top: 8px; font-size: 18px; }
  .nc-grid .nc-solo { display: block; padding: 14px; margin-bottom: 10px; }
  .nc-file { columns: 1; }
  .nc-file li { grid-template-columns: minmax(0, 1fr) auto; }
  .nc-file-k { grid-column: 1 / -1; justify-self: start; }
  .nc-about { grid-template-columns: minmax(0, 1fr); padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  /* The strip stands still: it starts on a whole word at the left, with
     room to breathe, and only its right end, where a word is cut, fades. */
  .nc-marquee-track { animation: none; padding-left: 14px; }
  .nc-marquee::before { content: none; }
  .nc-bigstamp, .nc-stamp, .nc-card, .nc-card-art, .nc-card-img,
  .nc-lead-art a, .nc-lead-img, .nc-lead-hl a, .nc-card-hl a, .nc-file a { transition: none; }
  .nc-mast:hover .nc-bigstamp { transform: rotate(-8deg); }
  @media (max-width: 760px) { .nc-mast:hover .nc-bigstamp { transform: rotate(7deg); } }
  .nc-card:hover, .nc-lead-art a:hover { transform: none; }
  .nc-card:hover .nc-card-img, .nc-lead-art a:hover .nc-lead-img { transform: none; }
}