/* AFC 13 — sub-pages (round 6): the shared page shell + the news pages' layouts.
   Loaded AFTER site/site.css (tokens, type, grounds with grain, materials, pill/link-arrow/socials, reveals, line
   masks, speed masks, reduced motion/transparency/contrast) and with site/spring.js + site/pages.js. It never needs
   chrome.css / sections.css / site.js: those are the home's. Motion law = ~/.claude/skills/apple-design (§ refer
   to it) and ~/afc-website/Motion.md: press responds on pointer-down, springs for anything that moves on input,
   reveals materialize once, nothing loops, reduced motion cross-fades.

   ── Page shell contract (copy this skeleton; nothing else is required) ─────────────────────────────────────────
     <html lang="pt-PT" data-lang="pt" data-title-pt="… — António Félix da Costa" data-title-en="…">
     <head> the inline language script of the home (sets data-lang + .js from ?lang= / localStorage 'afc-lang'),
            fonts (Archivo var + Instrument Serif ital@1 + JetBrains Mono), site/site.css, site/pages.css </head>
     <body class="pg">
       <svg class="pg-sprite" aria-hidden="true"><symbol id="afc-logo" viewBox="0 0 3120 972">…logo paths…</symbol></svg>
       <a class="skip" href="#conteudo">…</a>
       <a class="pg-brand" href="index.html" aria-label="…" data-aria-pt="…" data-aria-en="…"><svg viewBox="0 0 3120 972"
          aria-hidden="true"><use href="#ffe1d9-logo"/></svg></a>
       <div class="pg-dock">                          top right on desktop, a capsule at the bottom on phones
         [<nav class="pg-dock-nav" aria-label="…"><a class="pg-dock-link" href="#sec">…</a>…</nav>]   optional
                                                      in-page anchors (desktop only; hidden ≤ 860px)
         <a class="pg-back" href="index.html#section"><svg …arrow-left/>…Voltar ao site / Back to site…</a>
         <div class="pg-lang" role="group" aria-label="Idioma / Language"><i class="pg-lang-thumb" aria-hidden="true"></i>
           <button type="button" data-set-lang="pt" aria-pressed="true">PT</button>
           <button type="button" data-set-lang="en" aria-pressed="false">EN</button></div>
       </div>
       <i class="pg-veil" aria-hidden="true"></i>      the scroll edge under the floating brand and dock (§12)
       <i class="pg-edge-b" aria-hidden="true"></i>    phones: the scroll edge behind the bottom capsule
       <main id="conteudo" class="pg-main ground"> <div class="wrap">…</div> </main>
       <footer class="pg-foot" data-theme="dark">…</footer>   (see noticias.html: compact home footer)
       <script src="site/spring.js"></script> <script src="site/pages.js"></script>
     </body>
   Utilities from site.css work as on the home: .t-h2 (+ .t-accent, one per headline), .t-lede, .t-label,
   .sec-tag, .t-second-title, .pill, .link-arrow, .socials, .glass, .mat-*, [data-reveal], [data-lines], [data-speed]
   (pages.js wires them; no GSAP here), data-theme="dark". PT/EN: <span lang="pt">/<span lang="en"> pairs; content
   that exists only in Portuguese gets lang="pt-PT" (so the EN switch never hides it). Segmented control with a
   sliding spring thumb: .pg-seg (below) + AFC.pages.segmented() in pages.js. Print: the shell hides itself.
   ─────────────────────────────────────────────────────────────────────────────────────────────────────────────── */

/* ── shell tokens ── */
:root {
  --pg-top: clamp(118px, 15vh, 176px);         /* room above the first content: clears the brand and the dock */
  --pg-head-h: clamp(80px, 6.6vw, 92px);       /* the floating chrome's band (veil height, sticky offsets) */
  --pg-inset-b: 0px;                           /* phones: the bottom capsule's room */
}
@media (min-width: 861px) { html { scroll-padding-top: 104px; } }
@media (max-width: 860px) {
  :root { --pg-inset-b: calc(80px + env(safe-area-inset-bottom, 0px)); --pg-head-h: 80px; }   /* the home's top veil */
  html { scroll-padding-top: 84px; scroll-padding-bottom: var(--pg-inset-b); }
}
.pg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* the chrome's palette (same values as the home's chrome.css; .on-dark flips it over a dark ground, pages.js) */
.pg-brand, .pg-dock, .pg-veil {
  --c-hair: rgba(16, 19, 28, .08);
  --c-fill: rgba(16, 19, 28, .055);
  --c-thumb: rgba(255, 255, 255, .94);
  --c-thumb-shadow: 0 1px 3px rgba(16, 19, 28, .14), 0 0 0 .5px rgba(16, 19, 28, .07), inset 0 1px 0 #fff;
  --c-hover: rgba(16, 19, 28, .05);
}
.pg-brand.on-dark, .pg-dock.on-dark {
  --ink: #edf1f9; --ink-2: #c9cfdb; --mute: #939cb2;
  --line: rgba(237, 241, 249, .14); --line-2: rgba(237, 241, 249, .3);
  --apex-deep: var(--apex); --focus: var(--apex);
  --mat-regular: rgba(17, 26, 50, .66);
  --mat-edge: inset 0 1px 0 rgba(255, 255, 255, .11);
  --shadow-s: 0 1px 2px rgba(0, 0, 0, .28), 0 10px 24px -12px rgba(0, 0, 0, .62);
  --c-hair: rgba(237, 241, 249, .1);
  --c-fill: rgba(237, 241, 249, .08);
  --c-thumb: rgba(237, 241, 249, .17);
  --c-thumb-shadow: 0 1px 3px rgba(0, 0, 0, .32), 0 0 0 .5px rgba(237, 241, 249, .1), inset 0 1px 0 rgba(255, 255, 255, .14);
  --c-hover: rgba(237, 241, 249, .07);
  color-scheme: dark;
}

/* ── brand: top left, always (the home's .brand) ── */
.pg-brand {
  position: fixed; z-index: 42; left: max(var(--edge), env(safe-area-inset-left, 0px)); top: clamp(16px, 2.2vw, 26px);
  display: block; width: clamp(78px, 7.4vw, 104px); color: var(--ink); line-height: 0; border-radius: 4px;
  transition: opacity .35s var(--ease-out), color .2s ease, scale var(--press-t) ease-out;
}
.pg-brand svg { width: 100%; height: auto; }
/* the footer's own mark is on screen (pages.js): one AFC | 13 at a time. Focused from the keyboard it stays */
.pg-brand.is-away:not(:focus-visible) { opacity: 0; pointer-events: none; }
@media (hover: hover) { .pg-brand:hover { color: var(--apex-deep); } }
@media (pointer: coarse) { .pg-brand { padding: 10px 0; margin-top: -10px; } }

/* ── dock: the material capsule (the home's .dock): back to the site + PT/EN ── */
.pg-dock {
  position: fixed; z-index: 42; right: max(var(--edge), env(safe-area-inset-right, 0px)); top: clamp(12px, 1.8vw, 20px);
  display: flex; align-items: center; gap: 4px; height: 48px; padding: 4px; border-radius: 999px; color: var(--ink);
  transition: color .2s ease;
}
.pg-dock::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background-color: var(--mat-regular);
  -webkit-backdrop-filter: var(--mat-regular-filter); backdrop-filter: var(--mat-regular-filter);
  box-shadow: var(--mat-edge), inset 0 0 0 .5px var(--c-hair), var(--shadow-s);
  transition: background-color .2s ease, box-shadow .2s ease;
}
.pg-back, .pg-dock-link {
  display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px; border-radius: 999px;
  color: var(--ink); text-decoration: none; white-space: nowrap;
  font-family: var(--brand); font-size: var(--t-label); font-weight: 560; font-stretch: 125%; letter-spacing: .14em;
  text-transform: uppercase; line-height: 1; transition: background-color .2s ease, color .2s ease, scale var(--press-t) ease-out;
}
.pg-back { padding-left: 13px; }
.pg-back svg { width: 13px; height: 13px; flex: none; transition: transform .45s var(--ease-out); }
.pg-dock-nav { display: flex; align-items: center; gap: 2px; padding-right: 4px; margin-right: 2px; border-right: 1px solid var(--line); }
.pg-dock-link { color: var(--ink-2); padding: 0 12px; }
.pg-dock-link[aria-current] { color: var(--apex-deep); }
@media (hover: hover) {
  .pg-back:hover, .pg-dock-link:hover { background-color: var(--c-hover); }
  .pg-back:hover svg { transform: translateX(-3px); }
}
.pg-back:active svg { transform: translateX(-5px); transition-duration: .1s; }

/* PT / EN: the dock's segmented control; pages.js moves the thumb on a spring (--seg 0 → 1) */
.pg-lang {
  --seg: 0;
  position: relative; display: grid; grid-template-columns: 1fr 1fr; height: 40px; padding: 0 3px; border-radius: 999px;
  background-color: var(--c-fill); transition: background-color .2s ease;
}
.pg-lang-thumb {
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px;
  background-color: var(--c-thumb); box-shadow: var(--c-thumb-shadow); pointer-events: none;
  transform: translate3d(calc(var(--seg) * 100%), 0, 0); transition: background-color .2s ease, box-shadow .2s ease;
}
.pg-lang button {
  position: relative; min-width: 44px; padding: 0 10px; border-radius: 999px;
  font-family: var(--brand); font-size: var(--t-label); font-weight: 560; font-stretch: 125%; letter-spacing: var(--tr-label);
  line-height: 1; color: var(--mute); transition: color .2s ease, scale var(--press-t) ease-out;
}
.pg-lang button[aria-pressed="true"] { color: var(--ink); }
@media (pointer: coarse) {
  .pg-dock { height: 52px; }
  .pg-back, .pg-dock-link, .pg-lang { height: 44px; }
}

/* ── the scroll edge: a blurred pearl veil under the floating chrome once the page has moved (home: body::after) ── */
.pg-veil {
  position: fixed; z-index: 41; left: 0; right: 0; top: 0; height: calc(var(--pg-head-h) + env(safe-area-inset-top, 0px));
  background-color: rgba(236, 239, 245, .92);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(to bottom, #000, rgba(0, 0, 0, .8) 50%, rgba(0, 0, 0, .63) 60%, rgba(0, 0, 0, .2) 80%, transparent);
  mask-image: linear-gradient(to bottom, #000, rgba(0, 0, 0, .8) 50%, rgba(0, 0, 0, .63) 60%, rgba(0, 0, 0, .2) 80%, transparent);
  pointer-events: none; opacity: 0; transition: opacity .4s ease, background-color .2s ease;
}
.pg-scrolled .pg-veil { opacity: 1; }
.pg-veil.on-dark { background-color: rgba(9, 17, 40, .9); }
/* bottom (phones): the home's .edge-b. Content softens behind the capsule while it runs under it; pages.js sets
   .is-on (off at the very end, where the footer leaves the capsule's room) and .on-dark (the capsule's ground) */
.pg-edge-b { display: none; }

/* ── phones: the dock becomes the home's floating capsule at the bottom (thumb reach) ── */
@media (max-width: 860px) {
  .pg-dock {
    top: auto; left: 0; right: 0; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); margin: 0 auto;
    width: min(calc(100% - 24px), 24rem); height: 56px; padding: 6px; gap: 6px;
  }
  .pg-dock-nav { display: none; }
  .pg-edge-b {
    display: block; position: fixed; z-index: 41; left: 0; right: 0; bottom: 0; height: calc(104px + env(safe-area-inset-bottom, 0px));
    background-color: rgba(236, 239, 245, .8);
    -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
    -webkit-mask-image: linear-gradient(to top, #000, rgba(0, 0, 0, .6) 40%, rgba(0, 0, 0, .15) 70%, transparent);
    mask-image: linear-gradient(to top, #000, rgba(0, 0, 0, .6) 40%, rgba(0, 0, 0, .15) 70%, transparent);
    pointer-events: none; opacity: 0; transition: opacity .3s ease, background-color .2s ease;
  }
  .pg-edge-b.is-on { opacity: 1; }
  .pg-edge-b.on-dark { background-color: rgba(9, 17, 40, .82); }
  .pg-back { flex: 1; min-width: 0; height: 44px; padding: 0 12px 0 14px; letter-spacing: .1em; }
  .pg-back > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .pg-lang { height: 44px; }
}
@media (max-width: 360px) {
  .pg-back { letter-spacing: .06em; font-stretch: 112%; gap: 8px; }
}

/* ── the page: a lit pearl ground (site.css .ground: soft key light + fine static grain, no squares) ── */
.pg-main {
  position: relative; z-index: 1; min-height: 70vh;
  padding: var(--pg-top) var(--gutter) clamp(120px, 16vh, 200px);
}
.pg-main > .wrap { position: relative; }
.pg-intro { display: grid; gap: clamp(18px, 2.4vw, 30px); }
/* one-column grids never grow past their column for a long word or a nowrap pill (no sideways page on a phone) */
.pg-intro, .ar-head, .ar-missing, .nw-empty, .nw-lead-copy, .pg-foot-col, .pg-foot-id { grid-template-columns: minmax(0, 1fr); }
.pg-main .pill { max-width: 100%; }
.pg-intro .sec-tag { margin: 0; }
.pg-intro h1 { max-width: 13ch; }
.pg-count { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* ── footer: the home's night panel, compact. It rests on the page like a sheet (rounded top over the ground) ── */
.pg-foot {
  position: relative; z-index: 2; margin-top: calc(-1 * var(--panel-r)); border-radius: var(--panel-r) var(--panel-r) 0 0;
  padding: clamp(64px, 8vw, 112px) var(--gutter) calc(clamp(22px, 2.4vw, 32px) + max(var(--pg-inset-b), env(safe-area-inset-bottom, 0px)));
  color: var(--ink); overflow: clip;
}
.pg-foot-main {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, .8fr); gap: clamp(40px, 5vw, 80px);
  align-items: start; padding-bottom: clamp(48px, 6vw, 88px);
}
.pg-foot-id { display: grid; gap: clamp(22px, 2.6vw, 36px); justify-items: start; }
.pg-foot-logo { display: flex; align-items: center; min-height: 44px; width: clamp(104px, 9vw, 140px); color: var(--ink); line-height: 0; border-radius: 4px; transition: color .45s var(--ease-out), scale var(--press-t) ease-out; }
.pg-foot-logo svg { width: 100%; height: auto; }
.pg-foot-line { margin: 0; font-size: clamp(2.2rem, 1.3rem + 2.6vw, 4.2rem); }
.pg-foot-col { display: grid; gap: 16px; justify-items: start; align-content: start; }
.pg-foot-col > .t-label { margin: 0; color: var(--mute); }
.pg-foot-col p { margin: 0; }
.pg-foot-mail { font-size: var(--t-callout); min-height: 44px; padding-bottom: 0; overflow-wrap: anywhere; }
.pg-foot-nav ul { list-style: none; margin: 0; padding: 0; display: grid; width: 100%; border-bottom: 1px solid var(--line); }
.pg-foot-nav li { border-top: 1px solid var(--line); }
.pg-foot-nav a {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px;
  font-family: var(--display); text-transform: uppercase; font-size: clamp(1.35rem, 1rem + .9vw, 1.9rem); line-height: .95;
  font-weight: 780; font-stretch: 72%; letter-spacing: 0; font-synthesis: none;
  color: var(--ink); text-decoration: none; transition: color .4s var(--ease-out), scale var(--press-t) ease-out;
}
.pg-foot-nav a svg { width: 13px; height: 13px; flex: none; color: var(--mute); transition: transform .5s var(--ease-out), color .4s var(--ease-out); }
.pg-foot-nav a[aria-current] { color: var(--apex-deep); }
.pg-foot-base {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px;
  padding-top: clamp(14px, 1.6vw, 20px); border-top: 1px solid var(--line);
}
.pg-foot-copy { margin: 0; font-size: var(--t-footnote); line-height: var(--lh-footnote); letter-spacing: var(--tr-footnote); color: var(--mute); }
.pg-foot-top {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: var(--t-footnote); letter-spacing: var(--tr-footnote);
  color: var(--ink-2); text-decoration: none; transition: color .4s var(--ease-out), scale var(--press-t) ease-out;
}
.pg-foot-top svg { width: 13px; height: 13px; transition: transform .5s var(--ease-out); }
@media (hover: hover) {
  .pg-foot-logo:hover, .pg-foot-nav a:hover, .pg-foot-top:hover { color: var(--apex-deep); }
  .pg-foot-nav a:hover svg { transform: translateX(4px); color: var(--apex-deep); }
  .pg-foot-top:hover svg { transform: translateY(-3px); }
}
.pg-foot-nav a:active, .pg-foot-top:active { color: var(--apex-deep); }
.pg-foot-top:active svg { transform: translateY(-5px); transition-duration: .1s; }
@media (max-width: 960px) {
  .pg-foot-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pg-foot-id { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .pg-foot-main { grid-template-columns: minmax(0, 1fr); }
  .pg-foot-base { flex-direction: column-reverse; align-items: flex-start; }
}
/* the six social circles need 314px in a row: below that they read as a tidy 3 + 3 (the home's contact card), never 5 + 1 */
@media (max-width: 359px) {
  .pg-foot .socials { display: grid; grid-template-columns: repeat(3, 44px); gap: 12px; }
}

/* ── segmented control with a sliding thumb (filters; AFC.pages.segmented in pages.js writes --tx / --tw) ──
   <div class="pg-seg" role="radiogroup" aria-label="…"><i class="pg-seg-thumb" aria-hidden="true"></i>
     <button type="button" role="radio" aria-checked="true" data-value="all">…</button> … </div> */
.pg-seg {
  --tx: 0px; --tw: 0px;
  --c-fill: rgba(16, 19, 28, .055);
  --c-thumb: rgba(255, 255, 255, .94);
  --c-thumb-shadow: 0 1px 3px rgba(16, 19, 28, .14), 0 0 0 .5px rgba(16, 19, 28, .07), inset 0 1px 0 #fff;
  position: relative; display: inline-flex; align-items: stretch; max-width: 100%; height: 44px; padding: 3px;
  border-radius: 999px; background-color: var(--c-fill); isolation: isolate;
}
.pg-seg-thumb {
  position: absolute; z-index: -1; top: 3px; bottom: 3px; left: 0; width: var(--tw); border-radius: 999px;
  background-color: var(--c-thumb); box-shadow: var(--c-thumb-shadow); pointer-events: none;
  transform: translate3d(var(--tx), 0, 0); opacity: 0;
}
.pg-seg.is-ready .pg-seg-thumb { opacity: 1; }
.pg-seg button {
  position: relative; flex: 1 1 auto; min-width: 44px; padding: 0 clamp(10px, 1.4vw, 18px); border-radius: 999px; white-space: nowrap;
  font-family: var(--text); font-size: var(--t-subhead); font-weight: 560; font-stretch: 100%; letter-spacing: -.004em; line-height: 1;
  color: var(--mute); transition: color .2s ease, scale var(--press-t) ease-out;
}
.pg-seg button[aria-checked="true"] { color: var(--ink); }
/* no JS yet / no thumb: the checked segment carries its own fill */
.pg-seg:not(.is-ready) button[aria-checked="true"] { background-color: var(--c-thumb); box-shadow: var(--c-thumb-shadow); }
@media (hover: hover) { .pg-seg button:not([aria-checked="true"]):hover { color: var(--ink-2); } }
.pg-seg button:focus-visible { outline-offset: -2px; }
@media (pointer: coarse) { .pg-seg { height: 50px; } }   /* touch: 44px segments inside the 3px track */

/* ══ NEWS ARCHIVE · noticias.html ═══════════════════════════════════════════════════════════════════════════════ */
.nw-intro { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: end; column-gap: clamp(32px, 5vw, 96px); }
.nw-intro .sec-tag, .nw-intro h1 { grid-column: 1; }
.nw-intro-side { grid-column: 2; grid-row: 2; display: grid; gap: 14px; justify-items: start; padding-bottom: .35em; }
.nw-intro-side .t-lede { max-width: 40ch; }
.nw-note { margin: 0; font-size: var(--t-footnote); line-height: var(--lh-footnote); letter-spacing: var(--tr-footnote); color: var(--mute); }

.nw-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px;
  margin: clamp(40px, 5.4vw, 72px) 0 0; padding: 0 0 clamp(18px, 2vw, 24px); border-bottom: 1px solid var(--line-2);
}
.nw-filters .pg-count { margin: 0 0 0 auto; font-size: var(--t-footnote); color: var(--ink-2); }

.nw-results { padding-top: clamp(36px, 4.4vw, 64px); }

/* lead story: one large picture behind the speed mask; the title in the display voice */
.nw-lead { margin: 0 0 clamp(64px, 8vw, 120px); }
.nw-lead > a {
  --press: .99;
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(24px, 3.6vw, 64px); align-items: end;
  color: var(--ink); text-decoration: none; border-radius: 12px;
}
.nw-media { display: block; position: relative; overflow: hidden; border-radius: 12px; aspect-ratio: 3 / 2; background: var(--silver); }
.nw-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.001); transition: transform 1.2s var(--ease-out); }
.nw-media.is-portrait img, .nw-thumb.is-portrait img { object-position: 50% 28%; }
.nw-lead-copy { display: grid; gap: 16px; justify-items: start; padding-bottom: 4px; }
.nw-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0; color: var(--mute); }
.nw-meta time { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: var(--t-footnote); letter-spacing: 0; color: var(--ink-2); }
.nw-meta .t-label { color: var(--mute); }
.nw-lead-title {
  margin: 0; max-width: 18ch; font-family: var(--display); text-transform: uppercase;
  font-size: clamp(2rem, 1.1rem + 2.5vw, 3.6rem); line-height: .93; font-weight: 790; font-stretch: 70%; letter-spacing: 0;
  font-synthesis: none; text-wrap: balance; transition: color .45s var(--ease-out);
}
.nw-excerpt {
  margin: 0; max-width: 52ch; color: var(--ink-2); font-size: var(--t-callout); line-height: 1.5;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden;
}
.nw-read {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink);
  border-bottom: 1px solid var(--line-2); transition: border-color .4s var(--ease-out), color .4s var(--ease-out);
}
.nw-read svg { width: 13px; height: 13px; transition: transform .45s var(--ease-out); }
@media (hover: hover) {
  .nw-lead > a:hover .nw-media img { transform: scale(1.035); }
  .nw-lead > a:hover .nw-lead-title { color: var(--apex-deep); }
  .nw-lead > a:hover .nw-read { color: var(--apex-deep); border-color: var(--apex); }
  .nw-lead > a:hover .nw-read svg { transform: translateX(3px); }
}
.nw-lead > a:active .nw-lead-title { color: var(--apex-deep); }
.nw-lead > a:active .nw-read svg { transform: translateX(5px); transition-duration: .1s; }

/* the rest, by year: the year stays beside its stories while they pass (sticky), the stories read as an editorial
   list on hairlines (the home's list) with a small picture each */
.nw-year {
  display: grid; grid-template-columns: minmax(120px, .75fr) minmax(0, 3.25fr); gap: 0 clamp(24px, 4vw, 72px);
  align-items: start; margin-top: clamp(56px, 7vw, 104px);
}
.nw-year:first-child { margin-top: 0; }
.nw-year-head { position: sticky; top: 104px; display: grid; gap: 8px; padding-top: 22px; }
.nw-year-n {
  margin: 0; font-family: var(--display); font-size: clamp(2.8rem, 1.6rem + 3.4vw, 5.6rem); line-height: .86; font-weight: 800;
  font-stretch: 66%; letter-spacing: -.004em; font-variant-numeric: tabular-nums; color: var(--ink);
}
.nw-year-c { margin: 0; font-size: var(--t-footnote); color: var(--mute); }
.nw-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.nw-item { position: relative; border-bottom: 1px solid var(--line); }
.nw-item::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--apex);
  transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-out);
}
.nw-item > a {
  --press: 1;
  display: grid; grid-template-columns: clamp(132px, 13vw, 196px) minmax(0, 1fr) 20px; align-items: center; gap: 6px clamp(18px, 2.2vw, 32px);
  padding: clamp(18px, 1.8vw, 26px) 0; color: var(--ink); text-decoration: none;
}
.nw-thumb { display: block; position: relative; overflow: hidden; border-radius: 8px; aspect-ratio: 3 / 2; background: var(--silver); }
.nw-thumb img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.001); transition: transform .9s var(--ease-out); }
.nw-item-copy { display: grid; gap: 8px; min-width: 0; }
.nw-item-title {
  margin: 0; font-family: var(--second); font-size: clamp(1.1rem, .98rem + .42vw, 1.42rem);
  line-height: var(--lh-second-title); font-stretch: var(--st-second-title); font-weight: var(--w-second-title);
  letter-spacing: var(--tr-second-title); font-synthesis: none; text-wrap: pretty;
  transition: color .45s var(--ease-out), transform .6s var(--ease-out);
}
.nw-item-excerpt {
  margin: 0; max-width: 70ch; color: var(--mute); font-size: var(--t-subhead); line-height: var(--lh-subhead);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.nw-item > a > svg {
  width: 16px; height: 16px; color: var(--apex-deep); opacity: 0; transform: translateX(-8px);
  transition: opacity .45s var(--ease-out), transform .6s var(--ease-out);
}
@media (hover: hover) {
  .nw-item:hover::after { transform: scaleX(1); }
  .nw-item > a:hover .nw-item-title { color: var(--apex-deep); transform: translateX(4px); }
  .nw-item > a:hover .nw-thumb img { transform: scale(1.05); }
  .nw-item > a:hover > svg { opacity: 1; transform: none; }
}
.nw-item:focus-within::after { transform: scaleX(1); }
.nw-item > a:focus-visible { outline-offset: 4px; border-radius: 8px; }
.nw-item > a:focus-visible .nw-item-title { color: var(--apex-deep); }
.nw-item > a:focus-visible > svg { opacity: 1; transform: none; }
/* press: the row holds still and lights at once; its title steps toward the arrow (§1) */
.nw-item:has(> a:active)::after { transform: scaleX(1); transition-duration: .1s; }
.nw-item > a:active .nw-item-title { color: var(--apex-deep); transform: translateX(6px); transition-duration: .1s; }
.nw-item > a:active > svg { opacity: 1; transform: translateX(3px); transition-duration: .1s; }

/* empty filter state */
.nw-empty { display: grid; gap: 18px; justify-items: start; padding: clamp(40px, 6vw, 88px) 0; }
.nw-empty .t-second-title { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); max-width: 26ch; }

@media (max-width: 960px) {
  .nw-intro { grid-template-columns: minmax(0, 1fr); }
  .nw-intro-side { grid-column: 1; grid-row: auto; padding-bottom: 0; }
  .nw-lead > a { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .nw-lead-title { max-width: 22ch; }
  .nw-year { grid-template-columns: minmax(0, 1fr); }
  .nw-year-head {
    position: static; display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    padding: 0 0 14px;
  }
}
@media (max-width: 600px) {
  .nw-filters { gap: 10px; }
  .nw-filters .pg-seg { width: 100%; }
  .nw-filters .pg-count { margin: 4px 0 0; }
  .nw-media { border-radius: 10px; }
  .nw-lead-title { max-width: none; }
  .nw-excerpt { -webkit-line-clamp: 5; line-clamp: 5; }
  .nw-item > a { grid-template-columns: 104px minmax(0, 1fr); align-items: start; gap: 4px 16px; padding: 18px 0; }
  .nw-thumb { border-radius: 6px; }
  .nw-item-copy { gap: 6px; }
  .nw-item-title { font-size: 1.04rem; line-height: 1.22; }
  .nw-item-excerpt, .nw-item > a > svg { display: none; }
}
@media (hover: none) { .nw-item > a > svg { opacity: 1; transform: none; color: var(--mute); } }

/* ══ ONE ARTICLE · noticia.html ═════════════════════════════════════════════════════════════════════════════════ */
.ar { --col: 46rem; }
.ar-col { width: 100%; max-width: var(--col); margin: 0 auto; }
.ar-back { margin-bottom: clamp(30px, 4vw, 52px); }
.ar-back svg { transition: transform .45s var(--ease-out); }
@media (hover: hover) { .ar-back:hover svg { transform: translateX(-3px); } }
.ar-back:active svg { transform: translateX(-5px); transition-duration: .1s; }
.ar-head { display: grid; gap: clamp(16px, 2vw, 24px); justify-items: start; }
.ar-title {
  margin: 0; max-width: 20ch; font-family: var(--display); text-transform: uppercase;
  font-size: clamp(2.3rem, 1.2rem + 3.4vw, 4.6rem); line-height: .92; font-weight: 800; font-stretch: 68%; letter-spacing: -.002em;
  font-synthesis: none; text-wrap: balance; overflow-wrap: break-word; hyphens: manual;
}
.ar-standfirst { max-width: none; }
.ar-note { margin: 0; font-size: var(--t-footnote); line-height: var(--lh-footnote); color: var(--mute); }

.ar-hero { width: 100%; max-width: 1120px; margin: clamp(40px, 5.4vw, 80px) auto; }
.ar-hero .nw-media { aspect-ratio: auto; border-radius: 12px; }
.ar-hero .nw-media img { height: auto; }
.ar-hero.is-portrait .nw-media { width: fit-content; max-width: 100%; margin: 0 auto; }
.ar-hero.is-portrait .nw-media img { width: auto; max-width: 100%; max-height: min(84svh, 900px); }

/* long-form reading: Archivo at a comfortable measure (~66ch) and leading */
.ar-body {
  font-family: var(--text); font-size: clamp(1.04rem, .98rem + .22vw, 1.16rem); line-height: 1.66; letter-spacing: -.004em;
  color: var(--ink-2); font-feature-settings: 'kern'; hanging-punctuation: first;
}
.ar-body > p { margin: 0 0 1.2em; max-width: 66ch; text-wrap: pretty; }
.ar-body > p:first-child { color: var(--ink); }
/* a quote paragraph ('Name: "…"') becomes a pull quote: the words in the secondary voice, the speaker as a label */
.ar-quote { margin: 1.9em 0; padding: .1em 0 .1em clamp(18px, 2vw, 26px); border-left: 2px solid var(--apex); max-width: 66ch; }
.ar-quote blockquote { margin: 0; }
.ar-quote blockquote p {
  margin: 0; font-family: var(--second); font-size: 1.12em; line-height: 1.48; font-weight: 480; font-stretch: 98%;
  letter-spacing: -.01em; color: var(--ink); text-wrap: pretty;
}
.ar-quote figcaption { margin-top: 12px; color: var(--mute); }

/* previous / next */
.ar-foot { margin-top: clamp(56px, 7vw, 96px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--line-2); }
.ar-pn { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(12px, 1.6vw, 20px); }
.ar-pn-card {
  --press: .98;
  display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; align-items: center; padding: 12px; min-height: 88px;
  color: var(--ink); text-decoration: none; border-radius: 14px;
}
.ar-pn-card.is-next { grid-template-columns: minmax(0, 1fr) 92px; text-align: right; }
.ar-pn-card.is-next .nw-thumb { order: 2; }
.ar-pn-card .nw-thumb { border-radius: 8px; }
.ar-pn-copy { display: grid; gap: 6px; min-width: 0; }
.ar-pn-copy .t-label { color: var(--mute); display: inline-flex; align-items: center; gap: 8px; }
.ar-pn-card.is-next .ar-pn-copy .t-label { justify-content: flex-end; }
.ar-pn-copy .t-label svg { width: 12px; height: 12px; transition: transform .45s var(--ease-out); }
.ar-pn-title {
  margin: 0; font-family: var(--second); font-size: var(--t-callout); line-height: 1.3; font-weight: 600; font-stretch: 94%;
  letter-spacing: -.008em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  transition: color .4s var(--ease-out);
}
.ar-pn-spacer { display: block; }
@media (hover: hover) {
  .ar-pn-card:hover .ar-pn-title { color: var(--apex-deep); }
  .ar-pn-card.is-prev:hover .t-label svg { transform: translateX(-3px); }
  .ar-pn-card.is-next:hover .t-label svg { transform: translateX(3px); }
}
.ar-pn-card:active .ar-pn-title { color: var(--apex-deep); }
.ar-all { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: clamp(32px, 4vw, 48px); }
.ar-all .t-label { color: var(--mute); }

/* not found */
.ar-missing { display: grid; gap: clamp(18px, 2.4vw, 28px); justify-items: start; }
.ar-missing h1 { max-width: 14ch; }
.ar-missing-list { width: 100%; margin-top: clamp(28px, 4vw, 48px); }
.ar-missing-list > .t-label { display: block; margin: 0 0 12px; color: var(--mute); }

@media (max-width: 600px) {
  .ar-title { font-size: clamp(2rem, 1.1rem + 4.6vw, 2.6rem); max-width: none; }
  .ar-hero { margin: 32px auto 36px; }
  .ar-hero .nw-media { border-radius: 10px; }
  .ar-quote { margin: 1.6em 0; }
  .ar-pn { grid-template-columns: minmax(0, 1fr); }
  .ar-pn-card, .ar-pn-card.is-next { grid-template-columns: 84px minmax(0, 1fr); text-align: left; padding: 10px; }
  .ar-pn-card.is-next .nw-thumb { order: 0; }
  .ar-pn-card.is-next .ar-pn-copy .t-label { justify-content: flex-start; }
  .ar-pn-spacer { display: none; }
}

/* ── accessibility (§14) ── */
@media (prefers-reduced-motion: reduce) {
  .nw-media img, .nw-thumb img, .nw-item-title, .nw-item > a > svg, .nw-item::after, .pg-back svg, .ar-back svg, .ar-pn-copy .t-label svg { transition: none; }
  .nw-lead > a:hover .nw-media img, .nw-item > a:hover .nw-thumb img { transform: scale(1.001); }
  .nw-item > a:hover .nw-item-title, .nw-item > a:active .nw-item-title { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .pg-veil { background-color: var(--pearl); }
  .pg-veil.on-dark { background-color: var(--night); }
  .pg-edge-b {
    background-color: var(--pearl); -webkit-backdrop-filter: none; backdrop-filter: none;
    -webkit-mask-image: linear-gradient(to top, #000 35%, transparent); mask-image: linear-gradient(to top, #000 35%, transparent);
  }
  .pg-edge-b.on-dark { background-color: var(--night); }
  .pg-dock.on-dark { --mat-regular: #151f38; }
}
@media (prefers-contrast: more) {
  .pg-dock::before { outline: 1px solid var(--line-2); outline-offset: -1px; }
  .pg-seg { outline: 1px solid var(--line-2); outline-offset: -1px; }
  .pg-dock.on-dark { --mat-regular: #151f38; }
}

/* ── print: the page, not the chrome ── */
@media print {
  .pg-brand, .pg-dock, .pg-veil, .pg-edge-b, .skip, .pg-foot, .nw-filters, .ar-foot { display: none !important; }
  .pg-main { padding: 0; background: #fff !important; }
  body { background: #fff; }
  .js [data-reveal], .js [data-reveal]:not(.is-in) { opacity: 1 !important; translate: none !important; scale: none !important; filter: none !important; }
  .js [data-lines] .line-text { translate: none !important; transform: none !important; opacity: 1 !important; }
  [data-speed] { clip-path: none !important; }
  [data-speed]::after { display: none !important; }
}