/* The news, C refined (Taylor, November 10, 2026: "C with refinement"), linked after site.css by the home page and /news
   alone (src/news.py, lib/news-view.mjs). The book's type and colours: Fraunces for the heads, Libre Franklin for
   everything else, Blue; the block on the book's blue at 7 percent (--tint), the cards white. The home page's own
   spacing: 104 and 112 px over and under a block on a desktop, 56 and 64 on a phone; a head 44 px.
   Every picture whole: a 16:9 frame (a Substack header's own shape) with the picture contained in it on the tint, never
   cropped. A post with no picture is a text card: no tile and no logo; the date leads and the subtitle takes the room. */
.pp .news { display: none !important; }   /* /profile is the home page built again: the news is not on it */

.news { padding: 104px 0 112px; background: var(--tint); }
/* on a desktop the space over and under follows the window's height, as the money's and the conference's do (the fit, November 10) */
@media (min-width: 1101px) { .news { padding: clamp(48px, 11svh - 48px, 104px) 0 clamp(56px, 11svh - 40px, 112px); } }
/* the seam rule (site.css, "B, pure white"): the block's blue at 7 percent holds it apart from the three things and the
   money, so neither seam takes a rule; with no post the money keeps the one it had under the three things */
.things + .news[hidden] + .money { background: linear-gradient(var(--line), var(--line)) 50% 0 / calc(min(100%, 1360px) - 2 * var(--gutter)) 1px no-repeat; }

/* the head, the line under it, and All news at the right on the line's baseline */
.nbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.nbar h2 { color: var(--blue); font-size: 44px; line-height: 1.1; }
.nlede { margin-top: 12px; font: 500 18px/1.45 "Libre Franklin", sans-serif; color: var(--quiet); max-width: 34em; }
.nall { flex: none; font: 600 18px/1.45 "Libre Franklin", sans-serif; color: var(--blue); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }

/* the cards */
.ncards, .nlist { list-style: none; }
.ncards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.ncard { background: #fff; display: flex; flex-direction: column; position: relative; }
.ncard:hover h3 a, .ncard:hover h2 a { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.ncard .ntxt { padding: 24px 28px 28px; display: flex; flex-direction: column; flex: 1; }
.ndt { font: 600 14px/1.3 "Libre Franklin", sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--quiet); text-box: trim-both cap alphabetic; }   /* the date's capitals on the box's top, where a picture beside it starts */
.ncard .ntxt .ndt + h3, .ncard .ntxt .ndt + h2 { margin-top: 14px; }
.ncard h3, .ncard h2 { margin-top: 10px; color: #000; font-size: 26px; line-height: 1.18; text-wrap: balance; }
.ncard h3 a, .ncard h2 a { text-decoration: none; }
.ncard h3 a::after, .ncard h2 a::after { content: ""; position: absolute; inset: 0; }   /* the whole card is the link */
.nsub { margin-top: 12px; font-size: 17px; line-height: 1.5; color: #000; text-wrap: pretty; }
.nread { margin-top: auto; padding-top: 24px; font: 600 17px/1.3 "Libre Franklin", sans-serif; color: var(--blue); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
/* the picture, whole: the frame is a Substack header's 16:9; another shape sits whole inside it, on the card's own white,
   its top on the card's top edge, so a wider picture leaves white under it and never a band over it */
.npic { display: block; aspect-ratio: 16 / 9; background: #fff; }
.npic > img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 0; }
.nlist .npic, .ncards.all .ntext .npic { background: none; }
/* a card with a picture shows the picture, the date and the headline (ALA's Featured News); a text card adds the subtitle
   in the room a picture would take, under the blue rule every text card carries at its top */
@media (min-width: 1101px) { .ncards:not(.n1) .ncard:not(.ntext) .nsub { display: none; } }
.ncard.ntext { border-top: 4px solid var(--blue); }   /* the text card's top: no louder than a picture card beside it, its headline the same size */

/* one post: one wide card, its picture at the left */
.ncards.n1 { grid-template-columns: minmax(0, 1fr); }
.ncards.n1 .ncard { flex-direction: row; }
.ncards.n1 .npic { flex: 0 0 56%; }
.ncards.n1 .ntxt { padding: 40px 48px; justify-content: center; }
.ncards.n1 .ntxt .nread { margin-top: 0; }
.ncards.n1 h3, .ncards.n1 h2 { font-size: 40px; line-height: 1.1; margin-top: 14px; }
.ncards.n1 .nsub { font-size: 20px; margin-top: 16px; max-width: 30em; }
.ncards.n1 .ntext .ntxt { padding: 48px 56px; }
.ncards.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* c2, the lead and the latest (AIA): the lead card at the left, the next two as ruled rows at its right */
.nlead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: stretch; }
.nlead .ncards.nl { grid-template-columns: minmax(0, 1fr); align-content: stretch; }   /* the lead's foot on the column's last rule */
.nlead .nl .ncard:not(.ntext) .nsub { display: none; }
.nlist { border-top: 2px solid var(--blue); }
.nlist .ncard { background: none; border-top: 0; border-bottom: 1px solid var(--line); }
.nlist .ncard .ntxt { padding: 28px 0 32px; }
.nlist .ncard h3 { font-size: 30px; line-height: 1.15; }
.nlist .nread { display: none; }

/* /news */
.newsp > header.site { padding-top: var(--head-top); }
.newsp { background: #fff; }
.nmain { padding-bottom: 112px; }
.nhead { padding: 46px 0 56px; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 40px; align-items: end; }
.nhead h1 { grid-column: 1; color: var(--blue); font-size: 56px; line-height: 1.05; }
.nline { grid-column: 1; margin-top: 18px; max-width: 26em; font: 500 21px/1.45 "Libre Franklin", sans-serif; }
.nhead .btn { grid-column: 2; grid-row: 1 / 3; align-self: end; }
.nempty { font-size: 21px; line-height: 1.45; padding: 40px 0; border-top: 1px solid var(--rule); max-width: 30em; }
.ncards.all { row-gap: 40px; }
.ncards.all .ncard { box-shadow: 0 0 0 1px var(--rule); }
.nhd { display: contents; }
/* /news in the grid: a text card's date and headline fill the height a picture takes in the card beside it, the headline's
   baseline on the picture's foot, so the subtitle starts on the line the picture card's date starts on */
@media (min-width: 1101px) {
  .ncards.all:not(.n1) .ncard { container-type: inline-size; }
  .ncards.all:not(.n1) .ntext .nhd { display: flex; flex-direction: column; justify-content: space-between; min-height: calc(56.25cqw - 28px); }
  .ncards.all:not(.n1) .ntext h2 { font-size: clamp(26px, 2.1vw, 30px); line-height: 1.15; text-box: trim-both cap alphabetic; }
  .ncards.all:not(.n1) .ntext .nsub { margin-top: 24px; text-box: trim-start cap alphabetic; }
}   /* every card on /news white with the same hairline; a text card keeps its blue top */

@media (max-width: 1100px) {
  /* a tablet: each card a row, its picture whole at the left, so no headline is set narrower than its longest word */
  .ncards, .ncards.n2, .ncards.n1, .nlead { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ncards.all { row-gap: 16px; }
  .ncard, .ncards.n1 .ncard { flex-direction: row; align-items: flex-start; }
  .ncard .npic, .ncards.n1 .npic { flex: 0 0 240px; margin: 20px 0 20px 20px; }
  .ncard .ntxt, .ncards.n1 .ntxt, .ncards.n1 .ntext .ntxt { padding: 20px 24px; justify-content: flex-start; }
  .ncard h3, .ncard h2, .ncards.n1 h3, .ncards.n1 h2, .nlist .ncard h3 { font-size: 24px; line-height: 1.18; margin-top: 8px; }
  .nsub, .ncards.n1 .nsub { font-size: 17px; margin-top: 8px; }
  .nread, .ncards.n1 .ntxt .nread { padding-top: 12px; font-size: 16px; }
  .ncard.ntext { border-top-width: 4px; }
  .nlead { gap: 0; }
  .nlist { border-top: 0; margin-top: 8px; }
  .nlist .ncard .ntxt { padding: 20px 0; }
}
@media (max-width: 760px) {
  .news { padding: 56px 0 64px; }
  .nbar { margin-bottom: 24px; flex-direction: column; align-items: flex-start; gap: 12px; }
  .nbar h2 { font-size: 32px; }
  .nlede { font-size: 16px; margin-top: 8px; }
  .nall { order: 2; font-size: 16px; }
  .ncards, .ncards.n2, .ncards.n1, .nlead { gap: 12px; }
  .ncards.all { row-gap: 12px; }
  .ncard .npic, .ncards.n1 .npic { flex: 0 0 128px; margin: 14px 0 14px 14px; }
  .nsub, .ncards.n1 .nsub { display: none; }
  .ncard .ntxt, .ncards.n1 .ntxt, .ncards.n1 .ntext .ntxt { padding: 14px 16px; }
  .ndt { font-size: 12px; }
  .ncard h3, .ncard h2, .ncards.n1 h3, .ncards.n1 h2, .nlist .ncard h3 { font-size: 19px; line-height: 1.2; margin-top: 6px; }
  .nread, .ncards.n1 .ntxt .nread { display: none; }
  .nlist .ncard .ntxt { padding: 16px 0; }
  .nhead { padding: 28px 0 36px; grid-template-columns: minmax(0, 1fr); }
  .nhead h1 { font-size: 40px; }
  .nline { font-size: 18px; }
  .nhead .btn { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 24px; }
  .nmain { padding-bottom: 72px; }
}