/* news.css — news-migrate-260913. /news, /news/<category>, /news/<slug>.
   Loads after home.css and work.css and adds nothing either of them already says: paper,
   ink, hair, green, --pad, the header and the footer all come from there unchanged.
   What is here is the list and the article measure, and nothing else.
   D 9/9 display ruling, held to the letter: the list is a list. No card, no shadow, no
   border-radius, no sidebar. One column at 390, two from 1024. */

/* ---- the strip ---------------------------------------------------------------- */
/* round4e D29: the News H1 sat 56px higher than the About and Contact H1 at 1440 (120 vs 176)
   and 22px higher at 390, because this strip opened on clamp(26px,3.4vw,40px) while
   `main.abt,main.ctc` opens on clamp(48px,7vw,96px) (about.css:11). The top value is now that
   same expression, character for character, so the three H1s track together at every width
   instead of agreeing at two measured ones. Bottom and side padding are unchanged. */
.news .nstrip{padding:clamp(48px,7vw,96px) var(--pad) clamp(18px,2.4vw,26px)}
.news .nstrip h1{font-family:Newsreader,Georgia,serif;font-weight:300;font-size:clamp(30px,4vw,44px);line-height:1.1;margin:0;color:var(--ink)}

/* ---- the list ----------------------------------------------------------------- */
/* D9: 2-across below 768, never 1 and never 3. Thom 9/17: "3-across at >= 768; 2-across
   below (never 3 on small)". The phone was shipping a single column, so /news read as one
   tall stack; the 3-across step moved from 1200 down to 768 below. The hairline technique is
   unchanged - the rule is drawn by a card that exists (see the note in the 1024 block), so a
   short last row still paints nothing. */
.nlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--hair)}
.npost{border-bottom:1px solid var(--hair);padding:clamp(22px,3vw,30px) var(--pad)}
.ngo{display:block;text-decoration:none;color:inherit}
.nstage{display:block;position:relative;width:100%;aspect-ratio:16/9;background:#0d0d0d;overflow:hidden;margin-bottom:16px}
.nstage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* a post with no hero keeps its rhythm without pretending to have a picture */
.nstage-none{display:none}
.nttl{font-family:Newsreader,Georgia,serif;font-weight:300;font-size:clamp(24px,3.2vw,32px);line-height:1.15;margin:0;color:var(--ink);max-width:24ch}
.ngo:hover .nttl{border-bottom:0;color:var(--ink)}
.ngo:hover .nstage img{opacity:.88}
.nmeta{font-family:"Inter Tight",system-ui,sans-serif;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-sm);margin:10px 0 0}
.nmeta a{color:var(--muted-sm);text-decoration:none;border-bottom:1px solid var(--hair)}
.nmeta a:hover{border-color:var(--green);color:var(--ink)}
.nsep{padding:0 .35em}
/* D23 (Thom 9/18 6:00-7:40 AM ET): below 768 the card is image, title, date - category and NO
 * excerpt. Thom's words: "joined GameChang..." is not a preview. Two lines of clamped body copy
 * on a 2-across phone list bought nothing and cost the rows their alignment, so the element is
 * not shipped narrow - display:none, not a smaller clamp. From 768 up it is ONE line, clamped.
 * The base rule is the phone rule because the list is mobile-first here. */
.nex{display:none}
@media(min-width:768px){
.nex{font-family:"Inter Tight",system-ui,sans-serif;font-size:16px;line-height:1.6;color:var(--muted-sm);margin:.7em 0 0;max-width:62ch;display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
}
@media(min-width:1024px){
/* round3b-260916 B6, the second half. Same defect class as the post pager below and the one
   actually in Thom's screenshot: the two-column list painted its hairlines by showing a
   hair-coloured GRID BACKGROUND through a 1px gap, and the cards painted the white back. With
   an odd number of posts (9 today) the last row has one card and one empty cell, and that
   empty cell had nothing to paint it -- so the bottom of /news was a grey slab beside the
   last post. Paper background + a real column rule on the second card of each row: the
   hairline is drawn by something that exists, so a missing card draws nothing. */
.nlist{grid-template-columns:1fr 1fr;gap:0;background:var(--paper)}
.nlist>.npost:nth-child(2n){border-left:1px solid var(--hair)}
.npost{background:var(--paper)}
}
/* D9: the same column rule the 1024 block relies on, now needed at the phone too, because the
   list is 2-across there from this round on. */
@media(max-width:767px){.nlist>.npost:nth-child(2n){border-left:1px solid var(--hair)}}
/* round4c-260917 B6 / N1. The list was 2-across at every desktop width, which orphaned "Snow Day"
 * beside an empty cell at 1440 (9 posts / 2 columns = 4 rows + 1). Brief V4c asks for a dense
 * 3 -> 2 -> 1. Three columns divides 9 exactly, so the orphan cell at 1440 stops existing rather
 * than being painted over.
 * The column rule generalises the technique above: at 2-across the rule belongs on every 2nd card,
 * at 3-across on every card that is NOT starting a row (3n+1). It is still drawn by a card that
 * exists, so a short last row draws nothing and cannot leave a grey slab.
 * minmax(0,1fr): a long unbroken headline must not widen its own track (R-D's defect class). */
@media(min-width:768px){ /* D9: was 1200 - the ruled step is 768 */
.nlist{grid-template-columns:repeat(3,minmax(0,1fr))}
.nlist>.npost:nth-child(2n){border-left:0}
.nlist>.npost:not(:nth-child(3n+1)){border-left:1px solid var(--hair)}
}

/* ---- the article -------------------------------------------------------------- */
/* One column. The measure is the ~560-600px the article wireframe asked for; images and
   video break out to the full column width because that is where they sit on live. */
.art{padding:0 var(--pad) clamp(30px,5vw,54px)}
.ahd{max-width:62ch;margin:0 auto}
.acat{font-family:"Inter Tight",system-ui,sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin:clamp(22px,3vw,32px) 0 0}
/* round4c B6 N5 -- "one accent per screen; green is never text on white (fails AA)". The post
 * was carrying four accents at once: this kicker, the blockquote rule, every body link's
 * underline, and the green bars inside the stats image. Kicker and links keep a hairline at rest
 * and take the accent on hover/focus; same treatment already applied to Home under H4/C1. */
.acat a{color:var(--muted-sm);text-decoration:none;border-bottom:1px solid var(--hair)}
.acat a:hover,.acat a:focus-visible{color:var(--ink);border-color:var(--green)}
.art h1{font-family:Newsreader,Georgia,serif;font-weight:300;font-size:clamp(30px,4vw,44px);line-height:1.1;margin:.3em 0 0;color:var(--ink)}
.ameta{font-family:"Inter Tight",system-ui,sans-serif;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-sm);margin:1em 0 0;padding-bottom:clamp(20px,3vw,28px);border-bottom:1px solid var(--hair)}
.abody{max-width:62ch;margin:0 auto;font-family:"Inter Tight",system-ui,sans-serif;font-size:17px;line-height:1.7;color:var(--ink)}
.abody p{margin:1.15em 0}
.abody h2{font-family:Newsreader,Georgia,serif;font-weight:300;font-size:clamp(24px,3vw,30px);line-height:1.2;margin:1.6em 0 .4em}
.abody h3{font-family:"Inter Tight",system-ui,sans-serif;font-weight:500;font-size:18px;letter-spacing:.01em;margin:1.5em 0 .3em}
.abody a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hair)}
.abody a:focus-visible{border-color:var(--green)}
.abody a:hover{background:rgba(101,231,130,.16)}
.abody ul,.abody ol{margin:1.15em 0;padding-left:1.3em}
.abody li{margin:.35em 0}
/* the pull-quote rule is the one place the accent stays on the post: it is a 2px rule on paper,
 * not text on white, so it passes AA, and with the kicker and links now hairline it is the
 * single accent on the screen -- which is exactly what N5 asks for. */
.abody blockquote{margin:1.6em 0;padding-left:20px;border-left:2px solid var(--green);font-family:Newsreader,Georgia,serif;font-size:21px;line-height:1.45;color:var(--ink)}
.abody blockquote p{margin:.4em 0}
.abody hr{border:0;border-top:1px solid var(--hair);margin:2.2em 0}
.abody>:first-child{margin-top:1.4em}

/* media sits at its natural place in the flow and is allowed the full column */
.afig,.agal,.avid,.aemb{margin:1.8em 0}
.afig img,.agal img{display:block;width:100%;height:auto;background:#0d0d0d}
.afig figcaption{font-family:"Inter Tight",system-ui,sans-serif;font-size:13px;line-height:1.5;color:var(--muted-sm);margin-top:8px}
.agal{display:grid;grid-template-columns:1fr;gap:10px}
.agal figure{margin:0}
@media(min-width:700px){.agal{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* round4c B5 G13 -- the post's photo pair had the same ragged-row defect as the job grid: two
 * pictures side by side, each keeping its own height, so a portrait beside a landscape left a
 * white hole. Uniform 3:2 cells, the same ratio as the job grid (WF-1 `.pgrid figure`). A news
 * post has no wireframe, so the reference here is the defect list's own expected column.
 * .afig (the single lead image) is deliberately untouched -- it is one full frame, not a grid. */
.agal img{aspect-ratio:3/2;object-fit:cover}
.avid{background:#0d0d0d}
.avid video{display:block;width:100%;height:auto}
.aemb{position:relative;width:100%;aspect-ratio:16/9;background:#0d0d0d}
.aemb iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.abtn a{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border:1px solid var(--ink);text-decoration:none;color:var(--ink);font-family:"Inter Tight",system-ui,sans-serif;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.abtn a:hover{background:var(--ink);color:var(--paper)}

/* prev / next: the post above and the post below in the same newest-first list */
/* round3b-260916 B6. The pager was a 1px-gap GRID on a hair-coloured background, with the
   white cells painted by the links themselves. When only one of Newer/Older exists -- the
   newest post and the oldest post, i.e. both ends of the index -- the other grid cell had no
   link to paint it, so the reader got a grey slab exactly where "Newer" should be. It read as
   a broken button, not as an absent one.
   The box is white now and the hairline is a real border, so an absent button contributes
   nothing to the render instead of a grey rectangle; `justify-content:space-between` keeps
   Newer left and Older right whether there are two buttons or one. Both buttons still render
   only when there is a page to go to -- that part was already true in build.mjs (pn() emits
   nothing for a missing neighbour); what changed is that "nothing" now looks like nothing. */
.apn{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1px clamp(16px,3vw,40px);background:var(--paper);border-top:1px solid var(--hair);margin-top:clamp(34px,5vw,56px)}
.apn-a{background:var(--paper);padding:20px 0;text-decoration:none;color:var(--ink);display:block;flex:0 1 auto;max-width:48%}
.apn-a span{display:block;font-family:"Inter Tight",system-ui,sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-sm)}
.apn-a b{display:block;font-family:Newsreader,Georgia,serif;font-weight:300;font-size:21px;line-height:1.2;margin-top:6px}
.apn-a:hover b{border-bottom:1px solid var(--green);display:inline-block}
@media(min-width:700px){
.apn-next{text-align:right;margin-left:auto}
}