/* CARIBASOL V2-mix — giro 17 (D-159…): Journal (book + editorial grid), article page, Guides, Home news card.
   Built from data/articles.json by tools/build-journal.py. Identity unchanged: Archivo Expanded titles, Inter text, Instrument Serif Italic as the accent face (already self-hosted, D-155) — no new font.
   Tokens: css/base.css (pages) · the Home keeps its own inline set, so everything here carries its own fallbacks. Sizes follow the 25 % scale of giro 15b (text ≥ 16 px, labels ≥ 12 px, tap targets ≥ 44 px on phones).
   Motion (Emil Kowalski's rules): strong custom curves, transform + opacity only, interruptible transitions for UI, WAAPI for the page turn; the book turns slowly (decorative, seen rarely), the controls answer at once;
   prefers-reduced-motion: no 3D turn, no automatic advance, a plain fade on a manual change. */

:root {
  --j-serif: var(--f-brand, 'Caribasol Sans', sans-serif);   /* giro 27: the brand face (Caribasol Sans Bold) — Instrument Serif removed */
  --j-ease: cubic-bezier(.77, 0, .175, 1);       /* on-screen movement: strong ease-in-out */
  --j-out: cubic-bezier(.23, 1, .32, 1);         /* entering / responding: strong ease-out */
  --j-paper: #FFFFFF; --j-ink: #0E2240; --j-muted: #4A5B73; --j-blue: #0D53A1; --j-line: rgba(14, 34, 64, .1);
  --j-sans: Inter, 'Inter Fallback', system-ui, sans-serif;
}

/* ======================= the typographic cover (no photograph yet — D-136: never stock) ======================= */
.jc { container-type: inline-size; position: relative; width: 100%; height: 100%; overflow: hidden; color: var(--j-ink);
  background: radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 60%), repeating-linear-gradient(135deg, rgba(255, 255, 255, .13) 0 1px, transparent 1px 10px), var(--tone, #BFD1E6); }
.jc::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(14, 34, 64, .14), rgba(14, 34, 64, 0) 45%); pointer-events: none; }
.jc__in { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 7cqi; }
.jc__k { font: 600 12px/1.2 var(--j-sans); letter-spacing: .1em; text-transform: uppercase; color: rgba(14, 34, 64, .78); }
.jc__z { font-family: var(--j-serif); font-style: normal; font-weight: 700; font-size: clamp(calc(26px * var(--ui)), 15cqi, calc(84px * var(--ui))); line-height: .96; letter-spacing: -.01em; max-width: 11ch; text-wrap: balance; }
.jc__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 0; }
.jc .chip-rv { position: absolute; top: calc(10px * var(--ui)); right: calc(10px * var(--ui)); z-index: 2; background: rgba(247, 250, 253, .94); }

/* ======================= editorial cards: .jx (Journal grid, "more stories", Guides) ======================= */
.jx-grid { display: grid; gap: calc(24px * var(--ui)) calc(18px * var(--ui)); grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; }
@media (min-width: 700px) { .jx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .jx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .jx-grid > .jx--lead { grid-column: span 2; grid-row: span 2; } }
.jx { display: block; color: var(--j-ink); position: relative; min-width: 0; }
.jx[hidden] { display: none !important; }
.jx__in { position: relative; display: flex; flex-direction: column; gap: calc(11px * var(--ui)); height: 100%; box-sizing: border-box; border-radius: calc(18px * var(--ui)); padding: calc(9px * var(--ui)) calc(9px * var(--ui)) calc(17px * var(--ui)); }
.jx__media { position: relative; aspect-ratio: 3 / 2; border-radius: calc(15px * var(--ui)); overflow: hidden; box-shadow: 1px 2px 3px rgba(14, 34, 64, .16), 3px 8px 14px -4px rgba(14, 34, 64, .2); }
.jx__body { display: flex; flex-direction: column; gap: calc(8px * var(--ui)); padding: 0 calc(8px * var(--ui)); flex: 1; }
.jx__cat { font-size: max(12px, calc(12px * var(--ui))); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--j-muted); }
.jx h2, .jx h3 { margin: 0; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); line-height: 1.3; font-weight: 600; letter-spacing: -.01em; text-wrap: balance; }
.jx p { margin: 0; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); line-height: 1.6; color: var(--j-muted); text-wrap: pretty; }
.jx__meta { font-size: max(12px, calc(12px * var(--ui))); color: var(--j-muted); }
.jx__flag { display: flex; flex-wrap: wrap; gap: calc(4px * var(--ui)); }
.jx__more { margin-top: auto; padding-top: calc(4px * var(--ui)); font-size: max(var(--fs-body-min), calc(16px * var(--ui))); font-weight: 500; color: var(--j-blue); }
/* the lead story: the wide card (2 columns × 2 rows from 1024) — its title takes the accent face */
@media (min-width: 1024px) {
  .jx--lead .jx__in { padding: calc(12px * var(--ui)) calc(12px * var(--ui)) calc(22px * var(--ui)); }
  .jx--lead .jx__media { flex: 1 1 auto; aspect-ratio: auto; min-height: calc(280px * var(--ui)); }
  .jx--lead .jx__body { flex: 0 0 auto; padding: 0 calc(14px * var(--ui)); gap: calc(10px * var(--ui)); }
  .jx--lead h2, .jx--lead h3 { font-family: var(--j-serif); font-style: normal; font-weight: 700; font-size: clamp(calc(30px * var(--ui)), calc(3.1vw * var(--ui)), calc(42px * var(--ui))); line-height: 1.02; letter-spacing: 0; }
  .jx--lead p { font-size: max(var(--fs-body-min), calc(16px * var(--ui))); }
}
/* filter by area (built by js/journal.js when there are enough stories) */
.jx-filter { display: flex; flex-wrap: wrap; gap: calc(6px * var(--ui)); margin: 0 0 calc(21px * var(--ui)); padding: 0; list-style: none; }
.jx-filter button { min-height: calc(36px * var(--ui)); padding: 0 calc(14px * var(--ui)); border-radius: calc(749px * var(--ui)); border: 1px solid #A9B8CB; background: #FFFFFF; color: var(--j-ink); font-size: max(var(--fs-body-min), calc(16px * var(--ui))); font-weight: 500; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .12s var(--j-out); }
.jx-filter button[aria-pressed="true"] { background: var(--j-ink); border-color: var(--j-ink); color: #fff; }
.jx-filter button:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .jx-filter button[aria-pressed="false"]:hover { border-color: var(--j-ink); background: #fff; } }
.jx-count { margin: 0 0 calc(12px * var(--ui)); font-size: max(12px, calc(12px * var(--ui))); color: var(--j-muted); }

/* ======================= THE BOOK (Journal page) ======================= */
.bk { margin-top: calc(30px * var(--ui)); overflow-x: clip; padding-bottom: calc(4px * var(--ui)); }
.no-js .bk { display: none; }
.bk__stage { position: relative; max-width: 960px; margin-inline: auto; touch-action: pan-y; }
.bk__stage:focus-visible { outline: 2px solid var(--j-blue); outline-offset: 8px; border-radius: calc(10px * var(--ui)); }
.bk__book { position: relative; display: grid; grid-template-columns: 1fr 1fr; aspect-ratio: 8 / 5; perspective: 2400px; border-radius: calc(8px * var(--ui));
  box-shadow: 0 30px 50px -30px rgba(14, 34, 64, .5), 0 10px 20px -12px rgba(14, 34, 64, .3); background: #E0E9F3; }
.bk--one .bk__book { grid-template-columns: 1fr; aspect-ratio: 4 / 6.4; max-width: calc(420px * var(--ui)); }
.bk__slot { position: relative; min-width: 0; height: 100%; }
.bk__pg { position: relative; height: 100%; overflow: hidden; box-sizing: border-box; background: linear-gradient(135deg, #FFFFFF, #EEF4FA); }
.bk__slot--l > .bk__pg { border-radius: calc(8px * var(--ui)) 0 0 calc(8px * var(--ui)); } .bk__slot--r > .bk__pg { border-radius: 0 calc(8px * var(--ui)) calc(8px * var(--ui)) 0; }
.bk--one .bk__slot--r > .bk__pg { border-radius: calc(8px * var(--ui)); }
.bk--one .bk__slot--l { display: none; }
/* the gutter: each page darkens towards the spine */
.bk__pg[data-side="l"]::after, .bk__pg[data-side="r"]::after { content: ''; position: absolute; top: 0; bottom: 0; width: 13%; pointer-events: none; z-index: 3; }
.bk__pg[data-side="l"]::after { right: 0; background: linear-gradient(90deg, rgba(14, 34, 64, 0), rgba(14, 34, 64, .2)); }
.bk__pg[data-side="r"]::after { left: 0; background: linear-gradient(270deg, rgba(14, 34, 64, 0), rgba(14, 34, 64, .2)); }
.bk--one .bk__pg::after { display: none; }
.bk--one .bk__pg--txt > * { flex-shrink: 0; }
.bk--one .bk__pg--txt .bk__d { -webkit-line-clamp: 3; line-clamp: 3; }
.bk--one .bk__pg--txt { padding-top: calc(20px * var(--ui)); padding-bottom: calc(20px * var(--ui)); }
.bk--one .bk__pg--txt .bk__folio { display: none; }
.bk__pg > .jc { position: absolute; inset: 0; }
.bk__pg--art { background: var(--tone, #BFD1E6); }
.bk__pg--one { display: flex; flex-direction: column; }
.bk__pg--one > .bk__pg--art { position: relative; flex: 0 0 34%; height: auto; }
.bk__pg--one > .bk__pg--txt { flex: 1 1 auto; min-height: 0; }
.bk__pg--txt { display: flex; flex-direction: column; padding: clamp(calc(22px * var(--ui)), 4.2vw, calc(44px * var(--ui))) clamp(calc(22px * var(--ui)), 4vw, calc(42px * var(--ui))) calc(52px * var(--ui)); min-height: 0; }
.bk__pg--txt > * { position: relative; z-index: 1; }
.bk__k { font-size: max(12px, calc(12px * var(--ui))); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--j-muted); }
.bk__t { margin: calc(14px * var(--ui)) 0 0; font-family: var(--j-serif); font-style: normal; font-weight: 700; font-size: clamp(calc(30px * var(--ui)), calc(3.3vw * var(--ui)), calc(46px * var(--ui))); line-height: 1.02; text-wrap: balance; }
.bk__d { margin: calc(14px * var(--ui)) 0 0; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); line-height: 1.55; color: var(--j-muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; text-wrap: pretty; }
.bk__m { margin: calc(12px * var(--ui)) 0 0; font-size: max(12px, calc(12px * var(--ui))); color: var(--j-muted); }
.bk__flag { display: flex; flex-wrap: wrap; gap: calc(4px * var(--ui)); margin-top: calc(10px * var(--ui)); }
.bk__go { align-self: flex-start; margin-top: auto; display: inline-flex; align-items: center; min-height: max(44px, calc(44px * var(--ui))); padding: 0 calc(18px * var(--ui)); border-radius: calc(749px * var(--ui)); background: var(--j-blue); color: #fff; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); font-weight: 600; text-decoration: none; transition: background-color .15s ease, transform .12s var(--j-out); }
.bk__go:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .bk__go:hover { background: #0A458A; color: #fff; } }
.bk__folio { position: absolute; bottom: calc(14px * var(--ui)); z-index: 4; font-size: max(12px, calc(12px * var(--ui))); font-variant-numeric: tabular-nums; color: rgba(14, 34, 64, .78); }
.bk__pg[data-side="l"] .bk__folio { left: calc(20px * var(--ui)); } .bk__pg[data-side="r"] .bk__folio, .bk--one .bk__folio { right: calc(20px * var(--ui)); left: auto; }
/* the cover spread */
.bk__pg--in { background: radial-gradient(90% 80% at 30% 20%, #0A458A, #083A73 70%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(16px * var(--ui)); }
.bk__pg--in .bk__in-logo { display: block; width: min(80%, calc(300px * var(--ui))); height: auto; }   /* giro 27 (point 3): the client logo, white, on the inside cover (was the provisional sun mask) */
.bk__in-t { font-size: max(12px, calc(12px * var(--ui))); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #CFE0F5; }
.bk__pg--title { justify-content: center; }
.bk__pg--title .bk__t { font-size: clamp(calc(34px * var(--ui)), calc(4.6vw * var(--ui)), calc(56px * var(--ui)));   /* giro 24b (D-237): cover title 56 / 34 like articles and guides, D-230 (was 92 / 52) */ margin-top: calc(8px * var(--ui)); line-height: .94; }
.bk__pg--title .bk__d { -webkit-line-clamp: 3; line-clamp: 3; }
.bk__hint { align-self: flex-start; margin: auto 0 0 calc(-8px * var(--ui)); min-height: max(44px, calc(44px * var(--ui))); padding: 0 calc(8px * var(--ui)); border: 0; background: none; font: 600 12px/1 var(--j-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--j-blue); cursor: pointer; }
.bk__hint:hover { text-decoration: underline; text-underline-offset: 3px; }
/* the turning leaf: hinged on the spine (left edge of the right half); its two faces are clones of the pages */
.bk__leaf { position: absolute; top: 0; left: 50%; width: 50%; height: 100%; z-index: 5; transform-origin: 0 50%; transform-style: preserve-3d; display: none; }
.bk--one .bk__leaf { left: 0; width: 100%; }
.bk.is-turning .bk__leaf { display: block; }
/* giro 24: the leaf is built by js/journal.js as NS vertical strips hinged one on the next, each with a front and a back face that are windows on a clone of the page. Only transform and opacity move. */
.bk__strip { position: absolute; top: 0; left: 100%; height: 100%; transform-origin: 0 50%; transform-style: preserve-3d; }
.bk__leaf > .bk__strip { left: 0; }
.bk__face { position: absolute; top: 0; left: 0; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden;
  /* giro 24e (D-244): each face is rasterised WITH its shade (the shade is a separate animated layer; its antialiased edge left a 1 px unshaded, pale line between two strips) */
  isolation: isolate; will-change: transform; }
.bk__face--back { transform: rotateY(180deg); }
.bk__strip .bk__pg { height: 100%; border-radius: 0; }
.bk__strip--last > .bk__face--front { border-radius: 0 calc(8px * var(--ui)) calc(8px * var(--ui)) 0; }
.bk__strip--last > .bk__face--back { border-radius: calc(8px * var(--ui)) 0 0 calc(8px * var(--ui)); }
.bk--one .bk__leaf > .bk__strip > .bk__face--front { border-radius: calc(8px * var(--ui)) 0 0 calc(8px * var(--ui)); }
.bk--one .bk__strip--last > .bk__face--front { border-radius: 0 calc(8px * var(--ui)) calc(8px * var(--ui)) 0; }
/* the soft shade moving on the paper: a flat tone whose opacity follows the angle of the strip to the light */
.bk__sh { position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0; background: rgb(14, 34, 64); }
/* the thin dark fold close to the binding */
.bk__crease { position: absolute; top: 0; bottom: 0; left: 0; width: calc(14px * var(--ui)); z-index: 7; pointer-events: none;
  background: linear-gradient(90deg, rgba(14, 34, 64, .42), rgba(14, 34, 64, 0)); box-shadow: inset 1px 0 0 rgba(14, 34, 64, .3); }
.bk__face--back .bk__crease { left: auto; right: 0; background: linear-gradient(270deg, rgba(14, 34, 64, .42), rgba(14, 34, 64, 0)); box-shadow: inset -1px 0 0 rgba(14, 34, 64, .3); }
/* the light shadow thrown on the page under the leaf: it grows from the spine and follows the projected edge (scaleX + opacity) */
.bk__cast { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 4; pointer-events: none; opacity: 0; display: none; }
.bk.is-turning .bk__cast { display: block; }
.bk__cast--r { right: 0; transform-origin: 0 50%; border-radius: 0 calc(8px * var(--ui)) calc(8px * var(--ui)) 0; background: linear-gradient(90deg, rgba(14, 34, 64, .5), rgba(14, 34, 64, .2) 45%, rgba(14, 34, 64, 0)); }
.bk__cast--l { left: 0; transform-origin: 100% 50%; border-radius: calc(8px * var(--ui)) 0 0 calc(8px * var(--ui)); background: linear-gradient(270deg, rgba(14, 34, 64, .5), rgba(14, 34, 64, .2) 45%, rgba(14, 34, 64, 0)); }
.bk--one .bk__cast { width: 100%; }
.bk--one .bk__cast--l { display: none !important; }
/* the controls */
.bk__bar { display: flex; align-items: center; justify-content: center; gap: calc(10px * var(--ui)); margin-top: calc(18px * var(--ui)); }
.bk__btn { display: inline-grid; place-items: center; width: max(44px, calc(44px * var(--ui))); height: max(44px, calc(44px * var(--ui))); padding: 0; border-radius: 50%; border: 1px solid rgba(14, 34, 64, .18); background: var(--j-paper); color: var(--j-ink); cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, transform .12s var(--j-out); }
.bk__btn:active { transform: scale(.94); }
.bk__btn:focus-visible { outline: 2px solid var(--j-blue); outline-offset: 3px; }
.bk__btn svg { width: calc(16px * var(--ui)); height: calc(16px * var(--ui)); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bk__btn .i-play { display: none; } .bk__btn[aria-pressed="true"] .i-play { display: block; } .bk__btn[aria-pressed="true"] .i-pause { display: none; }
@media (hover: hover) and (pointer: fine) { .bk__btn:hover { background: #fff; border-color: var(--j-ink); } }
.bk__ind { min-width: 13ch; margin: 0; text-align: center; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); font-variant-numeric: tabular-nums; color: var(--j-ink); }
.bk__ind small { display: block; font-size: max(12px, calc(12px * var(--ui))); color: var(--j-muted); }
.bk.is-static .bk__btn--pause { display: none; }      /* reduced motion: nothing runs on its own, so there is nothing to pause */
@media (prefers-reduced-motion: reduce) { .bk__leaf, .bk__cast { display: none !important; } .bk__btn--pause { display: none; } }

/* ======================= HOME: ONE ROTATING CARD ======================= */
.hn { padding: 0 var(--gx, calc(16px * var(--ui))) calc(96px * var(--ui) * var(--sp)); }
.hn .jr-head { display: flex; justify-content: space-between; align-items: baseline; gap: calc(18px * var(--ui)); margin-bottom: calc(27px * var(--ui)); }
.hn .jr-head h2 { margin: 0; font-size: calc(24px * var(--ui)); line-height: 1.1; font-weight: 600; letter-spacing: -.02em; font-family: var(--f-title, 'Caribasol Sans', Inter, 'Inter Fallback', system-ui, sans-serif); }
.hn__card { position: relative; border-radius: calc(22px * var(--ui)); overflow: hidden; background: radial-gradient(90% 90% at 50% 0%, var(--pn-1, #FFFFFF) 0%, var(--pn-2, #F6F9FD) 55%, var(--pn-3, #EBF2FA) 100%); border: 1px solid rgba(14, 34, 64, .06);
  box-shadow: 0 1px 2px rgba(14, 34, 64, .06), 1px 6px 16px -4px rgba(14, 34, 64, .1), 2px 18px 36px -10px rgba(14, 34, 64, .16); touch-action: pan-y; }
.hn__slides { display: grid; list-style: none; margin: 0; padding: 0; }
.hn__slide { grid-area: 1 / 1; display: grid; grid-template-columns: 1fr; min-width: 0; opacity: 0; visibility: hidden; transform: translateX(16px);
  transition: opacity .2s ease-out, transform .2s ease-out, visibility 0s linear .2s; position: relative; }
.hn__slide.is-before { transform: translateX(-16px); }
.hn__slide.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .36s var(--j-out), transform .36s var(--j-out), visibility 0s; z-index: 1; }
.hn:not(.is-js) .hn__slide:not(:first-child) { display: none; }
.hn__art { position: relative; aspect-ratio: 16 / 10; }
.hn__txt { position: relative; display: flex; flex-direction: column; gap: calc(10px * var(--ui)); padding: calc(21px * var(--ui)) calc(18px * var(--ui)) calc(86px * var(--ui)); }
.hn__k { font-size: max(12px, calc(12px * var(--ui))); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--j-muted); }
.hn__t { margin: 0; font-family: var(--j-serif); font-style: normal; font-weight: 700; font-size: clamp(calc(30px * var(--ui)), calc(8vw * var(--ui)), calc(36px * var(--ui))); line-height: 1.02; text-wrap: balance; }
.hn__d { margin: 0; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); line-height: 1.55; color: var(--j-muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; text-wrap: pretty; }
.hn__m { font-size: max(12px, calc(12px * var(--ui))); color: var(--j-muted); }
.hn__flag { display: flex; flex-wrap: wrap; gap: calc(4px * var(--ui)); }
.hn__go { align-self: flex-start; margin-top: calc(6px * var(--ui)); display: inline-flex; align-items: center; min-height: max(44px, calc(44px * var(--ui))); padding: 0 calc(20px * var(--ui)); border-radius: calc(749px * var(--ui)); background: var(--j-blue); color: #fff; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); font-weight: 600; text-decoration: none; transition: background-color .15s ease, transform .12s var(--j-out); }
.hn__go:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .hn__go:hover { background: #0A458A; color: #fff; } }
.hn__ctl { position: absolute; left: calc(18px * var(--ui)); bottom: calc(14px * var(--ui)); z-index: 3; display: flex; align-items: center; gap: 2px; }
.hn__dots { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.hn__dot { position: relative; width: calc(28px * var(--ui)); height: max(44px, calc(44px * var(--ui))); padding: 0; border: 0; background: none; cursor: pointer; }
.hn__dot::before { content: ''; position: absolute; left: 50%; top: 50%; width: calc(10px * var(--ui)); height: calc(10px * var(--ui)); margin: calc(-5px * var(--ui)) 0 0 calc(-5px * var(--ui)); border-radius: 50%; background: rgba(14, 34, 64, .22); transition: background-color .2s ease, transform .2s var(--j-out); }
.hn__dot[aria-current="true"]::before { background: var(--j-ink); transform: scale(1.2); }
.hn__dot:active::before { transform: scale(.85); }
.hn__pause { display: inline-grid; place-items: center; width: max(44px, calc(44px * var(--ui))); height: max(44px, calc(44px * var(--ui))); padding: 0; margin-left: calc(6px * var(--ui)); border: 1px solid rgba(14, 34, 64, .18); background: rgba(255, 255, 255, .7); color: var(--j-ink); cursor: pointer; border-radius: 50%; }
.hn__pause svg { width: calc(16px * var(--ui)); height: calc(16px * var(--ui)); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hn__pause .i-play { display: none; } .hn__pause[aria-pressed="true"] .i-play { display: block; } .hn__pause[aria-pressed="true"] .i-pause { display: none; }
@media (max-width: 899px) { .hn__ctl { left: calc(4px * var(--ui)); right: calc(4px * var(--ui)); justify-content: space-between; } .hn__dot { width: max(44px, calc(44px * var(--ui))); } }
@media (pointer: coarse) { .hn__dot { width: max(44px, calc(44px * var(--ui))); } }
@media (pointer: coarse), (max-width: 767px) { .jx-filter button { min-height: max(44px, calc(44px * var(--ui))); } }
.hn__bar { position: absolute; left: 0; right: 0; bottom: 0; height: calc(3px * var(--ui)); z-index: 3; visibility: hidden; pointer-events: none; }   /* giro 27 (point 13): NO visible progress bar — the element stays only as the (invisible) clock of the automatic change, js/journal.js; the pause / play key remains */
.hn__bar > i { display: block; height: 100%; background: var(--j-ink); transform-origin: 0 50%; transform: scaleX(0); }
.hn__card.is-static .hn__pause, .hn__card.is-static .hn__bar { display: none; }
.hn__card:not(.is-js) .hn__ctl, .hn:not(.is-js) .hn__bar { display: none; }
@media (min-width: 900px) {
  .hn__slide { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .hn__art { aspect-ratio: auto; min-height: calc(380px * var(--ui)); }
  .hn__txt { justify-content: center; padding: calc(30px * var(--ui)) calc(42px * var(--ui)) calc(86px * var(--ui)) calc(36px * var(--ui)); gap: calc(14px * var(--ui)); }
  .hn__t { font-size: clamp(calc(36px * var(--ui)), calc(3.6vw * var(--ui)), calc(50px * var(--ui))); }
  .hn__ctl { left: calc(58.33% + calc(24px * var(--ui))); }
}
.hn .chip-rv { align-self: flex-start; }
/* the Home's phone rule `.page h3 { font-size: max(var(--fs-body-min), calc(16px * var(--ui))) !important }` (index.html) would flatten the story title: a more specific !important keeps it */
.hn .hn__t { font-size: clamp(calc(30px * var(--ui)), calc(8vw * var(--ui)), calc(36px * var(--ui))) !important; }
@media (min-width: 900px) { .hn .hn__t { font-size: clamp(calc(36px * var(--ui)), calc(3.6vw * var(--ui)), calc(50px * var(--ui))) !important; } }

/* ======================= ARTICLE (a modern newspaper page — giro 18, D-176) ======================= */
/* Title across the whole grid, opening photograph at full width, wide paragraphs set to the left (readable line, but the page width is used),
   a side column with the area card, the pull quote and notes; one column on phones. Newsreader (D-177) for titles and text. */
.ar { --ar-text: 38rem; --ar-side: 23rem; }   /* giro 27 (point 10): 46rem of Inter 17–19 px = 92 characters a line; 40rem ≈ 80 */
.ar-back { margin: 0 0 calc(14px * var(--ui)); }
.ar-back a { color: inherit; }
.ar-head { max-width: none; text-align: left; border-top: 3px solid var(--j-ink); padding-top: calc(14px * var(--ui)); }
.ar-kicker { margin: 0; font-size: max(12px, calc(12px * var(--ui))); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--j-muted); }
.ar-kicker a { color: var(--j-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(14, 34, 64, .3); }
.ar-title { margin: calc(12px * var(--ui)) 0 0; font-family: var(--j-news-t); font-weight: 600; font-size: clamp(calc(34px * var(--ui)), calc(4.6vw * var(--ui)), calc(56px * var(--ui))); line-height: 1.03; letter-spacing: -.015em; text-wrap: balance; }   /* giro 24 (D-230): article = guide, cover titles 56 / 34 (was 92 / 36) */
.ar-dek { margin: calc(18px * var(--ui)) 0 0; max-width: 54rem; font-family: var(--j-news); font-style: normal; font-size: clamp(calc(20px * var(--ui)), calc(2vw * var(--ui)), calc(28px * var(--ui))); line-height: 1.35; color: #364357; text-wrap: pretty; }
.ar-by { margin: calc(22px * var(--ui)) 0 0; padding: calc(10px * var(--ui)) 0; border-top: 1px solid var(--j-line); border-bottom: 1px solid var(--j-line); display: flex; flex-wrap: wrap; align-items: center; gap: calc(4px * var(--ui)) calc(12px * var(--ui)); font-size: max(12px, calc(12px * var(--ui))); color: var(--j-muted); }
.ar-by strong { color: var(--j-ink); font-weight: 600; }
.ar-by > span + span::before { content: '·'; margin-right: calc(12px * var(--ui)); }
.ar-hero { margin: calc(22px * var(--ui)) 0 0; }
.ar-hero .ar-cover, .ar-hero img.ar-photo { display: block; position: relative; width: 100%; aspect-ratio: 21 / 9; max-height: calc(560px * var(--ui)); border-radius: var(--r-photo, calc(15px * var(--ui))); overflow: hidden; object-fit: cover;
  box-shadow: 1px 2px 3px rgba(14, 34, 64, .12), 3px 8px 14px -4px rgba(14, 34, 64, .16); }
@media (max-width: 767px) { .ar-hero .ar-cover, .ar-hero img.ar-photo { aspect-ratio: 4 / 3; } }
.ar-hero figcaption, .ar-fig figcaption { margin-top: calc(9px * var(--ui)); font-family: var(--j-news); font-style: normal; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); line-height: 1.4; color: var(--j-muted); }
.ar-credit { font-style: normal; font-family: var(--j-sans); font-size: max(12px, calc(12px * var(--ui))); letter-spacing: .01em; }
.ar-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ar-status { max-width: 60rem; margin: calc(18px * var(--ui)) 0 0; text-align: left; }
.ar-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(36px * var(--ui)); margin-top: calc(36px * var(--ui)); }
@media (min-width: 1024px) { .ar-layout { grid-template-columns: minmax(0, var(--ar-text)) minmax(0, var(--ar-side)); justify-content: space-between; align-items: start; margin-top: calc(44px * var(--ui)); } }
.ar-main { min-width: 0; }
.ar-body > * { margin: 1.1em 0 0; }
.ar-body > :first-child { margin-top: 0; }
.ar-body p { font-family: var(--j-news); font-size: clamp(calc(19px * var(--ui)), calc(1.55vw * var(--ui)), calc(22px * var(--ui))); line-height: 1.6; text-wrap: pretty; }
.ar-body p.av .chip-rv { margin-left: calc(6px * var(--ui)); vertical-align: 1px; }
.ar-body .av__n { display: block; margin-top: calc(4px * var(--ui)); font-family: var(--j-sans); font-size: max(12px, calc(12px * var(--ui))); line-height: 1.5; color: var(--j-muted); }
.ar-body > h2 { margin-top: 1.7em; font-family: var(--j-news-t); font-size: clamp(calc(24px * var(--ui)), calc(2.4vw * var(--ui)), calc(32px * var(--ui))); line-height: 1.15; font-weight: 600; letter-spacing: -.01em; text-wrap: balance; }
.ar-body > h3 { margin-top: 1.5em; font-family: var(--j-news-t); font-size: calc(22px * var(--ui)); font-weight: 600; }
.ar-body > h2 + *, .ar-body > h3 + * { margin-top: .5em; }
.ar-body > ul, .ar-body > ol { padding-left: 1.3em; font-family: var(--j-news); font-size: clamp(calc(19px * var(--ui)), calc(1.55vw * var(--ui)), calc(22px * var(--ui))); line-height: 1.6; }
.ar-body li { margin-bottom: .4em; }
.ar-body > p:first-child::first-letter { float: left; font-family: var(--j-news-t); font-style: normal; font-weight: 700; font-size: 4.4em; line-height: .78; padding: .06em .09em 0 0; color: var(--j-ink); }
.ar-pull { margin: 1.6em 0; padding: calc(18px * var(--ui)) 0 0; border-top: 2px solid var(--amber, #F4840C); }
.ar-pull blockquote, .ar-side__pull blockquote { margin: 0; font-family: var(--j-news-t); font-style: normal; font-weight: 700; font-size: clamp(calc(26px * var(--ui)), calc(3.4vw * var(--ui)), calc(34px * var(--ui))); line-height: 1.12; text-wrap: balance; }
.ar-fig { margin: 1.8em 0; }
.ar-fig picture, .ar-hero picture, .jc picture { display: contents; }   /* giro 24 (D-233): AVIF <picture> wrapper adds no box */
.ar-fig img { display: block; width: 100%; height: auto; border-radius: var(--r-photo, calc(15px * var(--ui))); }
.ar-fig .ph-box { --ar: 16 / 9; }
.ar-end { margin-top: calc(40px * var(--ui) * var(--sp)); padding-top: calc(22px * var(--ui)); border-top: 1px solid var(--j-line); display: grid; gap: calc(24px * var(--ui)); }
.ar-end .pg-sub { margin: 0 0 calc(8px * var(--ui)); }
.ar-end p { margin: 0 0 calc(9px * var(--ui)); font-size: max(var(--fs-body-min), calc(16px * var(--ui))); line-height: 1.55; color: var(--j-muted); }
/* side column */
.ar-side { display: grid; gap: calc(22px * var(--ui)); min-width: 0; }
.ar-card { padding: calc(18px * var(--ui)) calc(18px * var(--ui)) calc(20px * var(--ui)); border-radius: calc(15px * var(--ui)); background: var(--surf-tl, #F5F9FE); border: 1px solid rgba(14, 34, 64, .06); box-shadow: 0 1px 2px rgba(14, 34, 64, .06), 1px 4px 10px -2px rgba(14, 34, 64, .07); }
.ar-card__k, .ar-notes__k { margin: 0; font-family: var(--j-sans); font-size: max(12px, calc(12px * var(--ui))); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--j-muted); }
.ar-card h2 { margin: calc(6px * var(--ui)) 0 0; font-family: var(--j-news-t); font-size: calc(28px * var(--ui)); line-height: 1.1; font-weight: 600; letter-spacing: -.01em; }
.ar-card dl { margin: calc(12px * var(--ui)) 0 0; display: grid; gap: calc(8px * var(--ui)); }
.ar-card dl > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: calc(8px * var(--ui)); padding-top: calc(8px * var(--ui)); border-top: 1px solid rgba(14, 34, 64, .1); font-size: max(var(--fs-body-min), calc(16px * var(--ui))); line-height: 1.45; }
.ar-card dt { font-size: max(12px, calc(12px * var(--ui))); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--j-muted); padding-top: calc(3px * var(--ui)); }
.ar-card dd { margin: 0; }
.ar-card__intro { margin: calc(12px * var(--ui)) 0 0; font-family: var(--j-news); font-size: calc(18px * var(--ui)); line-height: 1.5; }
.ar-card__act { display: flex; flex-wrap: wrap; gap: calc(8px * var(--ui)); margin-top: calc(14px * var(--ui)); }
.ar-side__pull { display: none; padding-top: calc(18px * var(--ui)); border-top: 2px solid var(--amber, #F4840C); }
.ar-notes { padding: 0 0 0 calc(16px * var(--ui)); border-left: 3px solid var(--j-ink); }
.ar-notes p { margin: calc(8px * var(--ui)) 0 0; font-family: var(--j-news); font-size: calc(18px * var(--ui)); line-height: 1.5; }
@media (min-width: 1024px) { .ar-pull { display: none; } .ar-side__pull { display: block; } .ar-side__pull blockquote { font-size: clamp(calc(30px * var(--ui)), calc(2.8vw * var(--ui)), calc(38px * var(--ui))); } }
.ar-sec { margin-top: calc(60px * var(--ui) * var(--sp)); }
.ar-sec .pg-h2 { margin-bottom: calc(18px * var(--ui)); }

/* ======================= GUIDES ======================= */
.gd-kick a { color: inherit; }
.gd-head { max-width: 52rem; }
.gd-head h1 { margin: calc(8px * var(--ui)) 0 0; font-size: clamp(calc(24px * var(--ui)), calc(3.75vw * var(--ui)), calc(39px * var(--ui))); line-height: 1.06; font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }
.gd-dek { margin: calc(14px * var(--ui)) 0 0; font-size: calc(18px * var(--ui)); line-height: 1.5; color: var(--j-muted); max-width: 40rem; text-wrap: pretty; }
.gd-body { max-width: 46rem; margin-top: calc(30px * var(--ui)); }
.gd-body > p { margin: 0 0 1em; font-size: calc(18px * var(--ui)); line-height: 1.7; text-wrap: pretty; }
.gd-body h2 { margin: 1.6em 0 .6em; font-size: clamp(calc(18px * var(--ui)), calc(2.25vw * var(--ui)), calc(22px * var(--ui))); font-weight: 600; letter-spacing: -.01em; }
.gd-steps { list-style: none; margin: 0 0 1em; padding: 0; display: grid; gap: calc(10px * var(--ui)); counter-reset: gd; }
.gd-step { position: relative; display: grid; grid-template-columns: calc(34px * var(--ui)) minmax(0, 1fr); gap: 0 calc(12px * var(--ui)); padding: calc(16px * var(--ui)) calc(16px * var(--ui)) calc(17px * var(--ui)); border-radius: calc(15px * var(--ui)); background: var(--surf-tl, #F5F9FE); border: 1px solid rgba(14, 34, 64, .06);
  box-shadow: 0 1px 2px rgba(14, 34, 64, .06), 1px 4px 10px -2px rgba(14, 34, 64, .07); }
.gd-step::before { counter-increment: gd; content: counter(gd); display: inline-grid; place-items: center; width: calc(28px * var(--ui)); height: calc(28px * var(--ui)); border-radius: 50%; background: #E8F1FB; color: var(--j-blue); font-size: max(12px, calc(12px * var(--ui))); font-weight: 600; font-variant-numeric: tabular-nums; }
.gd-body .gd-step :is(h2, h3) { margin: 2px 0 0; font-family: var(--font, Inter), sans-serif; font-size: calc(18px * var(--ui)); line-height: 1.3; font-weight: 600; letter-spacing: 0; }
.gd-step p a { color: var(--j-blue); text-decoration: underline; text-underline-offset: 3px; }
.gd-step p { grid-column: 2; margin: calc(6px * var(--ui)) 0 0; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); line-height: 1.6; text-wrap: pretty; }
.gd-step .chip-rv { grid-column: 2; justify-self: start; margin-top: calc(8px * var(--ui)); }
.gd-step .av__n { grid-column: 2; margin: calc(4px * var(--ui)) 0 0; font-size: max(12px, calc(12px * var(--ui))); line-height: 1.5; color: var(--j-muted); }
.gd-areas { display: flex; flex-wrap: wrap; gap: calc(6px * var(--ui)); margin: calc(12px * var(--ui)) 0 0; padding: 0; list-style: none; }
.gd-legacy { display: grid; gap: calc(8px * var(--ui)); }
.gd-legacy p { margin: 0; font-size: calc(18px * var(--ui)); line-height: 1.7; }
.gd-idx .tile { position: relative; display: flex; flex-direction: column; gap: calc(6px * var(--ui)); }
.gd-idx .tile h3 { font-size: calc(18px * var(--ui)); }
.gd-idx .tile .gd-go { margin-top: auto; padding-top: calc(8px * var(--ui)); font-size: max(var(--fs-body-min), calc(16px * var(--ui))); font-weight: 500; color: var(--j-blue); }
.gd-cat { font-size: max(12px, calc(12px * var(--ui))); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--j-muted); }
.gd-band { margin-top: calc(48px * var(--ui) * var(--sp)); }

/* ======================= giro 18 (D-177): Newsreader for the Journal ======================= */
/* Self-hosted, static, hinted woff2 (tools/build-fonts-giro18.py, SIL OFL 1.1: fonts/newsreader-OFL.txt). "Text" = 16 pt optical size, "Title" = 48 pt. Only the Journal (articles, book, grid, Guides, Home card); the rest of the site is unchanged. */
:root { --j-news: var(--f-text, Inter, sans-serif); --j-news-t: var(--f-brand, 'Caribasol Sans', sans-serif); }   /* giro 27 (point 1): Newsreader removed — titles Caribasol Sans Bold, text Inter */
.jc__z { font-family: var(--j-news-t); }
.jx h2, .jx h3 { font-family: var(--j-news-t); font-size: calc(22px * var(--ui)); line-height: 1.15; font-weight: 600; letter-spacing: -.005em; }
.jx p { font-family: var(--j-news); font-size: calc(18px * var(--ui)); line-height: 1.5; }
@media (min-width: 1024px) {
  .jx--lead h2, .jx--lead h3 { font-family: var(--j-news-t); font-style: normal; font-weight: 600; font-size: clamp(calc(32px * var(--ui)), calc(3.2vw * var(--ui)), calc(46px * var(--ui))); line-height: 1.04; letter-spacing: -.012em; }
  .jx--lead p { font-size: calc(20px * var(--ui)); }
}
.bk__t { font-family: var(--j-news-t); font-style: normal; font-weight: 600; letter-spacing: -.012em; line-height: 1.04; font-size: clamp(calc(30px * var(--ui)), calc(3.2vw * var(--ui)), calc(44px * var(--ui))); }
.bk__d { font-family: var(--j-news); }
.hn__t, .hn .hn__t { font-family: var(--j-news-t); font-style: normal; font-weight: 600; letter-spacing: -.012em; line-height: 1.05; }
.hn__d { font-family: var(--j-news); font-size: calc(18px * var(--ui)); line-height: 1.5; }
.jn .pg-intro h1 { font-family: var(--j-news-t); font-weight: 600; font-size: clamp(calc(29px * var(--ui)), calc(3.8vw * var(--ui)), calc(44px * var(--ui))); line-height: 1.06; letter-spacing: -.015em; }   /* giro 22 (D-205, modifies D-177): the page-title scale of .pg-intro h1 (39 / 24 px); the face stays Newsreader Title (was clamp(38px, 5vw, 64px), line-height 1.02) */
.jn .pg-intro .lede { font-family: var(--j-news); font-size: clamp(calc(19px * var(--ui)), calc(1.6vw * var(--ui)), calc(22px * var(--ui))); line-height: 1.5; }
.jn .pg-h2 { font-family: var(--j-news-t); font-weight: 600; font-size: clamp(calc(26px * var(--ui)), calc(2.6vw * var(--ui)), calc(34px * var(--ui))); line-height: 1.1; letter-spacing: -.01em; }
.jn .band h2 { font-family: var(--j-news-t); font-weight: 600; font-size: clamp(calc(24px * var(--ui)), calc(2.4vw * var(--ui)), calc(30px * var(--ui))); line-height: 1.12; letter-spacing: -.01em; }
.jn .band p { font-family: var(--j-news); font-size: calc(18px * var(--ui)); line-height: 1.5; }
.gd-head h1 { font-family: var(--j-news-t); font-weight: 600; font-size: clamp(calc(34px * var(--ui)), calc(4.6vw * var(--ui)), calc(56px * var(--ui))); line-height: 1.03; letter-spacing: -.015em; }
.gd-dek { font-family: var(--j-news); font-style: normal; font-size: clamp(calc(20px * var(--ui)), calc(1.9vw * var(--ui)), calc(24px * var(--ui))); line-height: 1.4; }
.gd-body > p, .gd-legacy p { font-family: var(--j-news); font-size: clamp(calc(19px * var(--ui)), calc(1.5vw * var(--ui)), calc(21px * var(--ui))); line-height: 1.6; }
.gd-body h2 { font-family: var(--j-news-t); font-weight: 600; font-size: clamp(calc(24px * var(--ui)), calc(2.4vw * var(--ui)), calc(30px * var(--ui))); }
.gd-body .gd-step :is(h2, h3) { font-family: var(--j-news-t); font-size: calc(21px * var(--ui)); line-height: 1.2; font-weight: 600; }
.gd-step p { font-family: var(--j-news); font-size: calc(18px * var(--ui)); line-height: 1.5; }
.gd-idx .tile h3 { font-family: var(--j-news-t); font-size: calc(22px * var(--ui)); font-weight: 600; line-height: 1.15; }
.gd-idx .tile p { font-family: var(--j-news); font-size: calc(18px * var(--ui)); line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  .hn__slide, .hn__slide.is-active { transition: none; }
  .jx-filter button, .bk__btn, .bk__go, .hn__go { transition: none; }
}
.jc .ph-credit { position: absolute; left: calc(8px * var(--ui)); bottom: calc(8px * var(--ui)); z-index: 2; max-width: calc(100% - calc(16px * var(--ui))); font: 500 12px/1.2 var(--j-sans); color: #fff; background: rgba(14, 34, 64, .6); padding: calc(3px * var(--ui)) calc(8px * var(--ui)); border-radius: calc(749px * var(--ui)); pointer-events: none; }
.ar-fig img { aspect-ratio: 3 / 2; object-fit: cover; }
.ar-hero img.ar-photo { object-position: 50% 62%; }

/* ======================= giro 27 (point 1): the Journal in the two site faces ======================= */
/* Newsreader (serif, 19–22 px) gave way to Inter: the same reading comfort at a smaller size (Inter's x-height is .55 em). Titles: Caribasol Sans Bold (shell.css §0a). */
.ar-body p, .ar-body > ul, .ar-body > ol, .gd-body > p, .gd-legacy p { font-size: clamp(calc(17px * var(--ui)), calc(1.25vw * var(--ui)), calc(19px * var(--ui))); line-height: 1.65; }
.ar-dek, .gd-dek { font-size: clamp(calc(18px * var(--ui)), calc(1.6vw * var(--ui)), calc(22px * var(--ui))); line-height: 1.45; }
.jx p, .hn__d, .bk__d, .ar-card__intro, .ar-notes p, .jn .band p, .gd-step p, .gd-idx .tile p { font-size: max(var(--fs-body-min), calc(16px * var(--ui))); line-height: 1.55; }
.jn .pg-intro .lede { font-size: clamp(calc(17px * var(--ui)), calc(1.3vw * var(--ui)), calc(19px * var(--ui))); }
.ar-body > p:first-child::first-letter { font-family: var(--f-brand); color: var(--c-blue, #0D53A1); }
.ar-body > p, .ar-body > ul, .ar-body > ol, .gd-body > p { max-width: var(--ar-text, 38rem); }   /* giro 27: the measure on tablets too (98 characters a line at 768 before) */
.ar-card__intro, .ar-notes p { max-width: var(--ar-text, 38rem); }