/* news.css - the news lane (news.html + article.html). Loads after pages.css and overrides it.
   news = "the herald's board": a herald's banner on top (art, title, filter on the gold hairline), the newest dispatch
   pinned large with a character breaking out of its frame and a gold wax-seal date stamped on it, then the other
   notices hanging from gold nails in a 7/5, 5/7 rhythm, each with its calling's figure. They swing into place.
   article = a manuscript: a layered hero (place, figure, title), one 68ch framed sheet with a gold initial, a gold
   reading spine in the margin, and a wax seal pressed at the end. Decoration only: remove this file and both pages read. */

:root {
  --nw-frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cg fill='none'%3E%3Cpath d='M1 26V1h25M64 1h25v25M89 64v25H64M26 89H1V64' stroke='%23E2A93B' stroke-width='2'/%3E%3Cpath d='M6 18V6h12M72 6h12v12M84 72v12H72M18 84H6V72' stroke='%23F4C65C' stroke-opacity='.5'/%3E%3Cpath d='M1 1h6v6zM89 1h-6v6zM89 89h-6v-6zM1 89h6v-6z' fill='%23F4C65C'/%3E%3Cpath d='M26 1h38M89 26v38M64 89H26M1 64V26' stroke='%23E2A93B' stroke-opacity='.18'/%3E%3C/g%3E%3C/svg%3E");
  --nw-rule: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='12' viewBox='0 0 168 12'%3E%3Cpath d='M0 6h70M98 6h70' stroke='%23E2A93B' stroke-width='1.4'/%3E%3Cpath d='M58 6h12M98 6h12' stroke='%23FFE7A3' stroke-width='2'/%3E%3Crect x='78' y='0' width='12' height='12' transform='rotate(45 84 6)' fill='none' stroke='%23F4C65C' stroke-width='1.4'/%3E%3Crect x='81' y='3' width='6' height='6' transform='rotate(45 84 6)' fill='%23F4C65C'/%3E%3C/svg%3E");
  --nw-seal: radial-gradient(circle at 34% 28%, #FFE7A3 0 12%, #F4C65C 34%, #C98A24 70%, #8A5512 100%);
}

/* ================= NEWS: the herald's banner ================= */
.news-head { padding-block: calc(96px + var(--sp-6)) var(--sp-6); }
.news-head .nw-head-art { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 40%;
  opacity: .42; -webkit-mask-image: linear-gradient(0deg, transparent, #000 38%, #000 72%, transparent);
  mask-image: linear-gradient(0deg, transparent, #000 38%, #000 72%, transparent); }
.news-head::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(7, 11, 23, .9) 0%, rgba(7, 11, 23, .45) 55%, rgba(7, 11, 23, .2) 100%); }
[dir="rtl"] .news-head::before { background: linear-gradient(-90deg, rgba(7, 11, 23, .9) 0%, rgba(7, 11, 23, .45) 55%, rgba(7, 11, 23, .2) 100%); }
.news-head .page-title { font-size: var(--fs-hero); line-height: 1.02; }
.news-head .tabs { gap: var(--sp-2); margin-top: var(--sp-5); padding-bottom: var(--sp-2); border-bottom: 1px solid rgba(226, 169, 59, .28);
  scroll-snap-type: x proximity; }
.news-head .tab { padding: var(--sp-2) var(--sp-4); scroll-snap-align: start; scroll-margin-inline: var(--sp-4); }
.news-head .tab:hover { color: var(--sand-50); }
.news-head .tab[aria-selected="true"] { color: var(--gold-1, #FFE7A3); }
@media (min-width: 1024px) {
  .news-head .container { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-7); align-items: end; }
  .news-head .page-title, .news-head .page-lead { grid-column: 1; }
  .news-head .tabs { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin: 0; }
}
.news-page.page-body { padding-block-start: var(--sp-7); }
/* the seal stamps in large and the notices swing on their nails (motion below): their corners may pass the screen edge for a
   moment, so the board clips sideways only (no scroll box, so the figure still breaks out of its frame upwards) */
.news-page.page-body { overflow-x: clip; }

/* ================= NEWS: the board ================= */
.news-page .news-list { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-7) var(--sp-5); }
.news-page .news-list > li { grid-column: span 6; min-width: 0; }
.news-page .news-list > li:nth-child(4n+2), .news-page .news-list > li:nth-child(4n+5) { grid-column: span 7; }
.news-page .news-list > li:nth-child(4n+3), .news-page .news-list > li:nth-child(4n+4) { grid-column: span 5; }
/* under a filter the rhythm would follow hidden notices: the board falls back to even halves */
.news-page .news-list:has(> li[hidden]) > li:not([hidden]) { grid-column: span 6; }
.news-page .news-list > li.is-lead, .news-page .news-list > li:has(.news-empty) { grid-column: 1 / -1; }
/* ready for the integrator's patches: the "nothing in this section" row under a filter, and titles drawn as h2 */
.news-page .news-list:has(> li[hidden]) > li.nw-none, .news-page .news-list > li.nw-none { grid-column: 1 / -1; }
.news-page .news-list h2.t { margin-block: 0; }

/* the lead dispatch: picture and words side by side; the figure steps out over the frame, the date is a wax seal */
.news-page .news-list li.is-lead > a { position: relative; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  grid-template-rows: 1fr auto auto auto 1fr; align-items: start; gap: var(--sp-4) var(--sp-7); margin-inline: 0; padding: var(--sp-5);
  border: 1px solid rgba(226, 169, 59, .2); border-image: var(--nw-frame) 30 / 30px / 0 stretch; background-color: rgba(11, 17, 36, .82);
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .9); scroll-margin-block: 96px; }
.news-page .news-list li.is-lead .lead-media { grid-column: 1; grid-row: 1 / -1; margin: 0; aspect-ratio: 16 / 10; overflow: visible; clip-path: none; background: none; }
.news-page .news-list li.is-lead .lead-media > img:first-child { position: absolute; inset: 0; clip-path: var(--clip-cut); background: var(--night-800); }
.news-page .news-list li.is-lead a:hover .lead-media > img:first-child { transform: none; transition: none; }
.news-page .news-list li.is-lead .lead-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; clip-path: var(--clip-cut);
  background: linear-gradient(0deg, rgba(7, 11, 23, .6), transparent 45%); box-shadow: inset 0 0 0 1px rgba(244, 198, 92, .22); }
.news-page .news-list li.is-lead .lead-media .char { z-index: 1; height: 114%; inset-inline-start: 10%; inset-inline-end: auto; }
.news-page .news-list li.is-lead .tag { grid-column: 2; grid-row: 2; justify-self: start; margin: 0; scale: 1.2; transform-origin: left center; }
[dir="rtl"] .news-page .news-list li.is-lead .tag { transform-origin: right center; }
.news-page .news-list li.is-lead .t { grid-column: 2; grid-row: 3; margin: 0; color: var(--sand-50); line-height: 1.15;
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); text-wrap: balance; }
.news-page .news-list li.is-lead .t::after { content: ""; display: block; width: 168px; height: 12px; margin-top: var(--sp-4); background: var(--nw-rule) no-repeat; }
.news-page .news-list li.is-lead .x { grid-column: 2; grid-row: 4; margin: 0; max-width: 46ch; color: var(--sand-300); font-size: 1.0625rem; line-height: 1.75; }
.news-page .news-list li.is-lead a:hover .t { color: var(--gold-1, #FFE7A3); }

/* the wax seal: a gold disc with a stamped rim; the date is the item's own text, in the body face so digits stay digits */
.news-page .news-list li.is-lead time { grid-column: 1; grid-row: 1 / -1; z-index: 2; justify-self: end; align-self: start;
  display: grid; place-items: center; width: 96px; height: 96px; margin: calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) 0 0; padding: 14px;
  border-radius: 50%; text-align: center; font: 700 .9375rem/1.1 var(--font-body); color: #2A1704; text-shadow: 0 1px 0 rgba(255, 236, 180, .55);
  background: var(--nw-seal);
  box-shadow: 0 0 0 4px rgba(42, 23, 4, .55), 0 0 0 6px rgba(244, 198, 92, .75), 0 0 0 10px rgba(244, 198, 92, .12), inset 0 0 0 6px rgba(138, 85, 18, .35), 0 14px 26px rgba(0, 0, 0, .55);
  rotate: -8deg; position: relative; }
[dir="rtl"] .news-page .news-list li.is-lead time { margin: calc(var(--sp-5) * -1) 0 0 calc(var(--sp-5) * -1); rotate: 8deg; }

/* the board: engraved notices hanging from a gold nail, each with its calling's figure fading in from the far edge */
.news-page .news-list > li:not(.is-lead) > a { position: relative; isolation: isolate; overflow: hidden; height: 100%; min-height: 220px; margin-inline: 0;
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto 1fr; align-items: center; align-content: start; gap: var(--sp-4);
  padding: var(--sp-7) var(--sp-6) var(--sp-6); border: 1px solid rgba(226, 169, 59, .16); border-image: var(--nw-frame) 30 / 30px / 0 stretch;
  background-color: rgba(13, 20, 41, .78); scroll-margin-block: 96px;
  transition: box-shadow var(--t-base), background-color var(--t-base); }
.news-page .news-list > li:not(.is-lead) > a::before { content: ""; position: absolute; z-index: -1; inset-block: 8px 0; inset-inline-end: 4%; width: 46%;
  background: url("../img/features/fortress.webp") right bottom / contain no-repeat; opacity: .2;
  -webkit-mask-image: linear-gradient(0deg, transparent, #000 45%); mask-image: linear-gradient(0deg, transparent, #000 45%); }
[dir="rtl"] .news-page .news-list > li:not(.is-lead) > a::before { background-position: left bottom; }
.news-page .news-list > li[data-cat="event"]:not(.is-lead) > a::before { background-image: url("../img/features/caravan.webp"); }
.news-page .news-list > li[data-cat="update"]:not(.is-lead) > a::before { background-image: url("../img/features/dragon-caves.webp"); }
.news-page .news-list > li:not(.is-lead) > a:hover::before { opacity: .34; }
.news-page .news-list > li:not(.is-lead) > a::after { content: ""; position: absolute; inset-block-start: 12px; inset-inline-start: calc(50% - 5px); width: 10px; height: 10px;
  rotate: 45deg; background: radial-gradient(circle at 35% 30%, var(--gold-1, #FFE7A3), var(--copper-500) 60%, var(--copper-700)); box-shadow: 0 2px 4px rgba(0, 0, 0, .6); }
.news-page .news-list > li:not(.is-lead) .tag { grid-column: 1; grid-row: 1; }
.news-page .news-list > li:not(.is-lead) time { grid-column: 2; grid-row: 1; justify-self: end; color: var(--copper-300); font-size: .875rem; }
.news-page .news-list > li:not(.is-lead) .t { grid-column: 1 / -1; grid-row: 2; max-width: 30ch; font-family: var(--font-head); font-weight: 400; color: var(--sand-50);
  font-size: var(--fs-h3); line-height: 1.25; text-wrap: balance; }
.news-page .news-list > li:not(.is-lead) .t::after { content: ""; display: block; width: 112px; height: 8px; margin-top: var(--sp-3);
  background: var(--nw-rule) no-repeat; background-size: 112px 8px; background-position: left center; }
[dir="rtl"] .news-page .news-list > li:not(.is-lead) .t::after { background-position: right center; }
.news-page .news-list > li:not(.is-lead) .x { grid-column: 1 / -1; grid-row: 3; align-self: start; max-width: 52ch; color: var(--text-2); font-size: .9688rem; line-height: 1.7; }
.news-page .news-list > li:not(.is-lead) > a:hover { background-color: rgba(18, 27, 54, .92); box-shadow: 0 18px 40px -18px rgba(4, 7, 16, .9), 0 0 28px -6px rgba(226, 169, 59, .3); }
.news-page .news-list > li:not(.is-lead) > a:hover .t { color: var(--gold-1, #FFE7A3); }

/* nothing pinned yet (or nothing in this section): an empty board, framed and calm */
.news-page .news-empty { padding: var(--sp-8) var(--sp-5); border: 1px dashed rgba(226, 169, 59, .3); background-color: rgba(11, 17, 36, .6);
  color: var(--text-2); font-family: var(--font-head); font-size: 1.25rem; }
.news-page .news-empty::before { content: ""; display: block; width: 168px; height: 12px; margin: 0 auto var(--sp-4); background: var(--nw-rule) no-repeat; }

@media (min-width: 700px) and (max-width: 1023px) {
  .news-page .news-list > li:nth-child(n) { grid-column: span 6; }
  .news-page .news-list > li.is-lead, .news-page .news-list > li:has(.news-empty) { grid-column: 1 / -1; }
}
@media (max-width: 1023px) {
  .news-page .news-list li.is-lead > a { grid-template-columns: 1fr; grid-template-rows: auto; gap: var(--sp-4); }
  .news-page .news-list li.is-lead .lead-media { grid-row: 1; aspect-ratio: 16 / 9; margin-top: var(--sp-5); }
  .news-page .news-list li.is-lead .lead-media .char { height: 108%; }
  .news-page .news-list li.is-lead .tag { grid-column: 1; grid-row: 2; margin: var(--sp-2) 0 0; scale: 1; }
  .news-page .news-list li.is-lead .t { grid-column: 1; grid-row: 3; }
  .news-page .news-list li.is-lead .x { grid-column: 1; grid-row: 4; max-width: 70ch; }
  .news-page .news-list li.is-lead time { grid-row: 1; margin: var(--sp-2); width: 84px; height: 84px; font-size: .875rem; }
  [dir="rtl"] .news-page .news-list li.is-lead time { margin: var(--sp-2); }
}
@media (max-width: 699px) {
  .news-page .news-list { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .news-page .news-list > li, .news-page .news-list > li:nth-child(n) { grid-column: 1 / -1; }
  .news-page .news-list li.is-lead > a { padding: var(--sp-3); }
  .news-page .news-list > li:not(.is-lead) > a { min-height: 0; padding: var(--sp-7) var(--sp-5) var(--sp-5); }
  .news-page .news-list li.is-lead time { width: 76px; height: 76px; padding: 10px; font-size: .875rem; }
  .news-head .tabs { gap: 0; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  [dir="rtl"] .news-head .tabs { -webkit-mask-image: linear-gradient(-90deg, #000 88%, transparent); mask-image: linear-gradient(-90deg, #000 88%, transparent); }
  .news-head .tab { padding-inline: var(--sp-3); }
}
@media (max-width: 420px) {
  .news-head .tabs { -webkit-mask-image: none; mask-image: none; }
  .news-head .tab { padding-inline: 7px; font-size: .9375rem; }
}

/* ================= ARTICLE: the hero, in three layers (place, figure, words) ================= */
.art-head { padding-block-start: calc(110px + var(--sp-8)); }
.art-head::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--gold-2, #F4C65C), transparent); box-shadow: 0 0 18px rgba(244, 198, 92, .5); }
.art-head .container { position: relative; }
.art-head .container::before { content: ""; position: absolute; z-index: -1; inset-block: -20%; inset-inline-start: -10vw; width: 70%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(7, 11, 23, .72), transparent); }
.art-head .page-title { max-width: min(15ch, 56%); font-size: clamp(2.25rem, 1.4rem + 3vw, 4.25rem); text-wrap: balance; }
.art-head .page-lead { max-width: min(54ch, 55%); }
.art-head .page-title::after { content: ""; display: block; width: 168px; height: 12px; margin-top: var(--sp-4); background: var(--nw-rule) no-repeat; }
.art-figure { max-width: 38%; height: min(84%, 560px); }
.art-back { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; padding: 8px var(--sp-4); border: 1px solid rgba(226, 169, 59, .3);
  background: rgba(7, 11, 23, .55); color: var(--sand-300); scroll-margin-block: 96px; transition: color var(--t-base), border-color var(--t-base), background-color var(--t-base); }
.art-back::before { content: ""; width: 7px; height: 7px; flex: none; rotate: 45deg; background: var(--copper-500); }
.art-back:hover, [dir="rtl"] .art-back:hover { color: var(--gold-1, #FFE7A3); border-color: rgba(244, 198, 92, .7); background: rgba(7, 11, 23, .8); }
.art-meta time { color: var(--copper-300); }

/* the sheet: one framed reading column */
.art-wrap { position: relative; padding-block: var(--sp-8) var(--sp-9); }
.art-body { position: relative; max-width: 68ch; margin-inline: auto; padding: var(--sp-8) clamp(var(--sp-5), 5vw, var(--sp-8)) var(--sp-9);
  border: 1px solid rgba(226, 169, 59, .16); border-image: var(--nw-frame) 30 / 30px / 0 stretch;
  background: radial-gradient(120% 60% at 50% 0%, rgba(244, 198, 92, .05), transparent 70%), rgba(11, 17, 36, .78);
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .95); box-sizing: content-box; }
.art-body::before { content: ""; display: block; width: 168px; height: 12px; margin: 0 auto var(--sp-6); background: var(--nw-rule) no-repeat; }
/* the closing seal: a gold wax disc pressed half over the bottom edge of the sheet */
.art-body::after { content: ""; position: absolute; inset-block-end: -30px; inset-inline-start: calc(50% - 30px); width: 60px; height: 60px; border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%232A1704' stroke-opacity='.55'%3E%3Ccircle cx='30' cy='30' r='21' stroke-dasharray='2 3'/%3E%3Crect x='22' y='22' width='16' height='16' transform='rotate(45 30 30)' stroke-width='1.6'/%3E%3C/g%3E%3Crect x='26.5' y='26.5' width='7' height='7' transform='rotate(45 30 30)' fill='%232A1704' fill-opacity='.55'/%3E%3C/svg%3E") center / 100% no-repeat, var(--nw-seal);
  box-shadow: 0 0 0 3px rgba(42, 23, 4, .55), 0 0 0 5px rgba(244, 198, 92, .7), 0 0 0 9px rgba(244, 198, 92, .1), 0 14px 24px rgba(0, 0, 0, .6); rotate: -8deg; }
.art-body p { color: var(--sand-50); opacity: .92; font-size: 1.125rem; line-height: 1.9; }
/* the gold initial: one letter of light, no box */
.art-body p:first-of-type::first-letter { float: inline-start; font-family: var(--font-head); font-size: 4.4em; line-height: .78;
  margin-block-start: .08em; margin-inline-end: .08em; color: var(--gold-2, #F4C65C);
  text-shadow: 0 2px 0 var(--copper-700), 0 0 26px rgba(226, 169, 59, .35); }
:lang(ar) .art-body p:first-of-type::first-letter { float: none; font-size: inherit; line-height: inherit; margin: 0; color: inherit; text-shadow: none; }
:lang(ar) .art-body p:first-of-type { font-size: 1.3125rem; line-height: 1.9; color: var(--sand-50); opacity: 1; }

/* the picture inside the text shows the place only (the hero already shows the figure) */
.art-plate { margin-block: var(--sp-7); margin-inline: 0; }
.art-plate-img { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid rgba(244, 198, 92, .35);
  box-shadow: 0 0 0 4px rgba(7, 11, 23, .9), 0 0 0 5px rgba(226, 169, 59, .28); }
.art-plate-img > img:first-child { width: 100%; height: 100%; object-fit: cover; object-position: 30% 60%; }
.art-plate-img .char { display: none; }
.art-plate figcaption { margin-top: var(--sp-3); padding-inline-start: var(--sp-4); border-inline-start: 2px solid var(--copper-500); color: var(--text-2); font-size: .9375rem; line-height: 1.6; }

/* older / newer: one neighbour takes the whole row, centred under the seal */
.art-nav { max-width: calc(68ch + 2 * var(--sp-8)); margin-inline: auto; margin-top: var(--sp-9); }
.art-nav > span:empty { display: none; }
.art-nav:has(> span:empty) .art-step { grid-column: 1 / -1; justify-items: center; text-align: center; }
.article-page .art-step { background-color: rgba(13, 20, 41, .74); scroll-margin-block: 96px; transition: box-shadow var(--t-base), filter var(--t-base), border-color var(--t-base); }
.article-page .art-step:hover { transform: none; }
.art-step small { color: var(--copper-300); font-size: .875rem; }
.art-step small::before { content: ""; display: block; width: 112px; height: 8px; margin-bottom: 6px; background: var(--nw-rule) no-repeat; background-size: 112px 8px; }
.art-step.is-next small::before { margin-inline-start: auto; }
.art-nav:has(> span:empty) .art-step small::before { margin-inline: auto; }

/* the reading line: a thin gold thread across the top of the screen that grows as you read (phones and tablets) */
.read-line { display: none; }

.art-missing .page-title::after { content: ""; display: block; width: 168px; height: 12px; margin: var(--sp-4) auto 0; background: var(--nw-rule) no-repeat; }
.art-missing .link { padding: var(--sp-2) var(--sp-5); border: 1px solid rgba(226, 169, 59, .35); }

@media (min-width: 768px) and (max-width: 1023px) {
  .art-figure { max-width: 34%; }
  .art-head .page-title { max-width: min(15ch, 62%); }
  .art-head .page-lead { max-width: 60%; }
}
@media (max-width: 767px) {
  /* phones: the figure stands in the band above the words instead of behind them */
  .art-head { min-height: 0; padding-block-start: calc(76px + min(56vw, 300px)); }
  .art-figure { opacity: 1; top: 76px; bottom: auto; height: min(56vw, 300px); max-width: 80%; inset-inline: 0; margin-inline: auto; }
  .art-head .page-title, .art-head .page-lead { max-width: none; }
  .art-head .container::before { width: 100%; inset-inline-start: -20%; }
  .art-body { padding: var(--sp-6) var(--sp-4) var(--sp-8); }
  .art-body p { font-size: 1.0625rem; line-height: 1.85; }
  .art-wrap { padding-block: var(--sp-6) var(--sp-8); }
}

/* ================= motion (strong, but only when the visitor allows it) ================= */
@media (prefers-reduced-motion: no-preference) {
  @keyframes nw-drift { from { scale: 1; } to { scale: 1.07; } }
  @keyframes nw-pan { from { scale: 1.06; translate: 1.5% 0; } to { scale: 1.06; translate: -1.5% 0; } }
  @keyframes nw-float { from { translate: 0 0; } to { translate: 0 -10px; } }
  @keyframes nw-stamp { 0% { opacity: 0; scale: 1.9; } 60% { opacity: 1; scale: .92; } 100% { opacity: 1; scale: 1; } }
  @keyframes nw-swing { 0% { opacity: 0; rotate: -7deg; translate: 0 -24px; } 35% { opacity: 1; rotate: 4deg; translate: 0 0; }
    60% { rotate: -2deg; } 80% { rotate: 1deg; } 100% { opacity: 1; rotate: var(--nw-tilt, 0deg); translate: 0 0; } }
  @keyframes nw-glint { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
  @keyframes nw-read { from { scale: 0 1; } to { scale: 1 1; } }
  @keyframes nw-rise { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }
  @keyframes nw-settle { from { scale: 1.1; } to { scale: 1; } }
  @keyframes nw-arrive { from { opacity: 0; translate: 0 34px; } to { opacity: 1; translate: 0 0; } }
  @keyframes nw-spine { from { scale: 1 0; } to { scale: 1 1; } }
  @keyframes nw-ring { 0% { opacity: 0; scale: .9; } 30% { opacity: .9; } 100% { opacity: 0; scale: 1.85; } }
  @keyframes nw-press { 0% { opacity: 0; scale: 1.8; } 60% { opacity: 1; scale: .9; } 100% { opacity: 1; scale: 1; } }

  /* news: the banner pans, the seal is stamped, then the notices swing on their nails and come to rest slightly askew */
  .news-head .nw-head-art { animation: nw-pan 30s ease-in-out infinite alternate; }
  .news-page .news-list .lead-media > img:first-child { animation: nw-drift 16s ease-in-out infinite alternate; }
  .news-page .news-list .lead-media .char { animation: nw-float 5.5s ease-in-out infinite alternate; }
  .art-plate-img > img:first-child { animation: nw-drift 18s ease-in-out infinite alternate; }
  .news-page .news-list li.is-lead time { animation: nw-stamp .9s cubic-bezier(.2, .9, .3, 1.2) .35s both; }
  /* the moment the wax lands: a gold ring of pressure runs out from the seal, twice, then the board is still */
  .news-page .news-list li.is-lead time::before, .news-page .news-list li.is-lead time::after { content: ""; position: absolute; inset: -6px; border-radius: 50%;
    border: 2px solid var(--gold-2, #F4C65C); box-shadow: 0 0 18px rgba(244, 198, 92, .55); pointer-events: none; opacity: 0;
    animation: nw-ring 1.1s cubic-bezier(.2, .7, .3, 1) .86s both; }
  .news-page .news-list li.is-lead time::after { border-width: 1px; animation-delay: 1.06s; animation-duration: 1.4s; }
  .news-page .news-list > li:not(.is-lead) > a { transform-origin: 50% 17px; rotate: var(--nw-tilt, 0deg);
    transition: translate var(--t-base) var(--ease), rotate var(--t-base) var(--ease), box-shadow var(--t-base), background-color var(--t-base); }
  .news-page .news-list > li:nth-child(odd):not(.is-lead) > a { --nw-tilt: -.6deg; }
  .news-page .news-list > li:nth-child(even):not(.is-lead) > a { --nw-tilt: .5deg; }
  /* every notice swings onto its nail after the seal lands, one after another (pure CSS: no reveal class is needed) */
  .news-page .news-list > li:not(.is-lead) > a { animation: nw-swing 1.3s cubic-bezier(.3, .7, .3, 1) backwards; animation-delay: calc(1.1s + var(--nw-i, 0) * .16s); }
  .news-page .news-list > li:nth-child(3) > a { --nw-i: 1; }
  .news-page .news-list > li:nth-child(4) > a { --nw-i: 2; }
  .news-page .news-list > li:nth-child(5) > a { --nw-i: 3; }
  .news-page .news-list > li:nth-child(n+6) > a { --nw-i: 4; }
  /* notices further down swing as they come into view instead (the first row keeps the timed stagger) */
  @supports (animation-timeline: view()) {
    .news-page .news-list > li:nth-child(n+4):not(.is-lead) > a { animation: nw-swing linear backwards; animation-timeline: view(); animation-range: entry 0% entry 100%; }
  }
  .news-page .news-list > li:not(.is-lead) > a:hover, .news-page .news-list > li:not(.is-lead) > a:focus-visible { translate: 0 -6px; rotate: 0deg; }
  .news-page .news-list > li:not(.is-lead) > a::before { transition: opacity var(--t-base), scale 1.2s var(--ease); transform-origin: bottom; }
  .news-page .news-list > li:not(.is-lead) > a:hover::before { scale: 1.06; }

  /* article: the place settles, the figure arrives, the words rise, the spine fills as you read, the seal is pressed at the end */
  .art-bg { animation: nw-settle 1.8s var(--ease) both; }
  .art-figure { animation: nw-arrive 1.1s var(--ease) .25s both, nw-float 5.5s ease-in-out 1.35s infinite alternate; }
  .art-head .container > * { animation: nw-rise .9s var(--ease) both; }
  .art-head .art-back { animation-delay: .35s; }
  .art-head .art-meta { animation-delay: .45s; }
  .art-head .page-title { animation-delay: .55s; }
  .art-head .page-lead { animation-delay: .7s; }
  .art-back:hover::before { animation: nw-glint 1s ease-in-out infinite; }
  .article-page .art-step { transition: translate var(--t-base) var(--ease), box-shadow var(--t-base), filter var(--t-base), border-color var(--t-base); }
  @media (hover: hover) { .article-page .art-step:hover { translate: 0 -4px; } }

  @supports (animation-timeline: scroll()) {
    .read-line { display: block; position: fixed; z-index: calc(var(--z-header, 50) + 1); inset-block-start: 0; inset-inline: 0; height: 3px;
      pointer-events: none; transform-origin: left center; background: linear-gradient(90deg, var(--copper-700), var(--gold-2, #F4C65C), var(--gold-1, #FFE7A3));
      box-shadow: 0 0 12px rgba(244, 198, 92, .6); animation: nw-read linear both; animation-timeline: scroll(root); }
    [dir="rtl"] .read-line { transform-origin: right center; background: linear-gradient(-90deg, var(--copper-700), var(--gold-2, #F4C65C), var(--gold-1, #FFE7A3)); }
  }
  @supports (animation-timeline: view()) {
    .art-body::after { animation: nw-press linear both; animation-timeline: view(); animation-range: entry 10% entry 90%; }
    @media (min-width: 1100px) {
      .read-line { display: none; }
      /* the reading spine: a gold thread down the sheet's margin, filled as the sheet passes through the screen */
      .art-wrap::before { content: ""; position: absolute; inset-block: var(--sp-8) var(--sp-9); inset-inline-start: calc(50% - 34ch - var(--sp-8) - 30px); width: 2px;
        background: linear-gradient(180deg, var(--gold-1, #FFE7A3), var(--copper-500) 60%, var(--copper-700)); box-shadow: 0 0 10px rgba(244, 198, 92, .45);
        transform-origin: top; animation: nw-spine linear both; animation-timeline: view(); animation-range: cover 15% cover 85%; }
      .art-wrap::after { content: ""; position: absolute; inset-block-start: calc(var(--sp-8) - 5px); inset-inline-start: calc(50% - 34ch - var(--sp-8) - 34px);
        width: 10px; height: 10px; rotate: 45deg; background: var(--gold-2, #F4C65C); box-shadow: 0 0 12px rgba(244, 198, 92, .7); }
    }
  }
}

/* owner review 2026-10-16: no big seal on the lead; its date is plain text right beside its tag */
.news-page .news-list li.is-lead .lead-meta { grid-column: 2; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.news-page .news-list li.is-lead .lead-meta .tag { scale: 1; margin: 0; }
.news-page .news-list li.is-lead .lead-meta time, [dir="rtl"] .news-page .news-list li.is-lead .lead-meta time { display: inline; width: auto; height: auto; margin: 0; padding: 0;
  border-radius: 0; background: none; box-shadow: none; rotate: none; animation: none; text-shadow: none; color: var(--copper-300); font: 500 .9375rem/1.4 var(--font-body); }
.news-page .news-list li.is-lead .lead-meta time::before, .news-page .news-list li.is-lead .lead-meta time::after { content: none; }
@media (max-width: 1023px) { .news-page .news-list li.is-lead .lead-meta { grid-column: 1; grid-row: 2; margin-top: var(--sp-2); } }