@charset "utf-8";

/* =========================================================================
   losveintisiete — EU–Chile Trade Gateway
   European editorial design × Swiss clarity × contemporary diplomacy

   Identity comes from typography, spacing, photography, the 27 flags and one
   recurring motif: a Reflex Blue connection line, Europe → Chile.
   Motion is short, happens once, and is always cancellable (§18).
   No remote fonts, no remote assets, no animation libraries, no inline styles.
   ========================================================================= */

/* ---- 1. Tokens --------------------------------------------------------- */
:root {
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", "Noto Sans", Arial, sans-serif;

  --step--2: 0.75rem;
  --step--1: 0.8125rem;
  --step-0:  1rem;
  --step-1:  1.0625rem;
  --step-2:  clamp(1.125rem, 0.35vw + 1.02rem, 1.3125rem);
  --step-3:  clamp(1.375rem, 0.85vw + 1.15rem, 1.875rem);
  --step-4:  clamp(1.75rem, 1.7vw + 1.3rem, 2.5rem);
  --step-5:  clamp(2.25rem, 3.1vw + 1rem, 3.5rem);

  --s-1: 0.25rem;  --s-2: 0.5rem;  --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;    --s-7: 3rem;     --s-8: 4.5rem;
  --s-9: 6.5rem;   --s-10: 9rem;

  /* Reflex Blue is the institutional accent and the motif. Interactive blue is
     what the reader can click. Yellow appears only as a small accent. */
  --paper:      #FCFCFB;   /* warm white */
  --surface:    #F5F7FB;
  --tint:       #F7F9FC;   /* row hover */
  --ink:        #111318;   /* 17.0:1 on paper */
  --ink-2:      #3F4550;   /*  9.7:1 on paper */
  --muted:      #667085;   /*  4.9:1 on paper — small meta only */
  --line:       #E6E8EE;
  --line-2:     #C9CDD8;
  --blue:       #003399;   /* 12.5:1 on paper — motif, institutional accent */
  --blue-i:     #0B57D0;   /*  6.9:1 on paper — interactive */
  --blue-wash:  #EDF2FC;
  --yellow:     #FFCC00;

  --dark:       #081F4D;
  --dark-2:     #0C2A63;
  --on-dark:    #FFFFFF;
  --on-dark-2:  #9AA6C2;   /*  6.4:1 on --dark */
  --dark-line:  rgba(255, 255, 255, 0.14);

  --radius: 3px;
  --measure: 62ch;
  --shell: 1200px;

  /* One easing pair, three durations. Nothing else. */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 150ms;
  --t-mid:  200ms;
  --t-slow: 500ms;
}

/* ---- 2. Reset ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* The guard against accidental horizontal overflow lives here. It must NOT be
   `overflow-x: hidden` on `body`: that makes the body a scroll container,
   which stops the page scrolling and breaks the sticky header. */
html { -webkit-text-size-adjust: 100%; color-scheme: light; overflow-x: clip; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.14; text-wrap: balance; }
p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--blue-i); text-underline-offset: 0.18em; }
a:hover { color: var(--blue); }
button { font: inherit; color: inherit; }

/* ---- 3. Focus ---------------------------------------------------------- */
:focus-visible { outline: 3px solid var(--blue-i); outline-offset: 2px; border-radius: 1px; }
.site-footer :focus-visible,
.section--network :focus-visible { outline-color: var(--yellow); }
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute; left: var(--s-4); top: 0; z-index: 100;
  transform: translateY(-120%);
  background: var(--blue); color: #fff;
  padding: var(--s-3) var(--s-4);
  font-weight: 600; text-decoration: none;
  transition: transform var(--t-mid) var(--ease);
}
.skip-link:focus { transform: translateY(0); color: #fff; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---- 4. Layout and rhythm ---------------------------------------------- */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--s-6); }
@media (max-width: 40rem) { .shell { padding-inline: var(--s-4); } }

.section { padding-block: var(--s-8); }
.section--flags { padding-block: var(--s-8) var(--s-7); }
.section--directory { padding-block: var(--s-7) var(--s-9); }
.section--network { padding-block: var(--s-9); }
.section--news { padding-block: var(--s-9) var(--s-8); }

/* The motif: a short Reflex Blue rule above every section heading. */
.section-title {
  font-size: var(--step-3);
  letter-spacing: -0.026em;
  margin-bottom: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  position: relative;
}
.section-title::before {
  content: ""; position: absolute; top: -1px; left: 0;
  width: 3rem; height: 2px; background: var(--blue);
}
.section-hint { color: var(--muted); font-size: var(--step--1); margin: calc(var(--s-6) * -1) 0 var(--s-6); }

.eyebrow {
  font-size: var(--step--1); font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; gap: var(--s-3);
}
.eyebrow::before { content: ""; width: 3rem; height: 2px; background: var(--blue); flex: none; }

/* ---- 5. Header --------------------------------------------------------- */
.site-header {
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(150%) blur(10px);
  position: sticky; top: 0; z-index: 40;
}
.site-header .shell {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); min-height: 4.25rem; flex-wrap: wrap; padding-block: var(--s-3);
}

.wordmark { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; color: var(--ink); }
.wordmark .mark { width: 1.75rem; height: 1.75rem; flex: none; transition: transform var(--t-mid) var(--ease); }
.wordmark:hover .mark { transform: translateX(2px); }
.wordmark .mark--emblem { width: 2.75rem; height: 1.875rem; }
.wordmark__text { display: block; }
.wordmark .name {
  display: block; font-weight: 600; font-size: 1.125rem;
  letter-spacing: -0.032em; line-height: 1.1;
}
.wordmark .tag {
  display: block; font-size: 0.625rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--muted); font-weight: 600; margin-top: 1px;
}

.site-nav { display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap; }
.site-nav ul { display: flex; gap: var(--s-5); list-style: none; }
.site-nav a {
  position: relative; color: var(--ink-2); text-decoration: none;
  font-size: 0.9375rem; padding-block: var(--s-2);
}
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--blue); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-mid) var(--ease);
}
.site-nav a:hover { color: var(--ink); }
.site-nav a:hover::after { transform: scaleX(1); background: var(--line-2); }
.site-nav a[aria-current="page"], .site-nav a[data-active] { color: var(--ink); }
.site-nav a[aria-current="page"]::after,
.site-nav a[data-active]::after { transform: scaleX(1); background: var(--blue); }

.lang-switch { display: flex; align-items: center; gap: var(--s-1); }
.lang-switch a {
  padding: var(--s-1) var(--s-2); font-size: var(--step--1); font-weight: 600;
  text-decoration: none; color: var(--muted); border-radius: var(--radius);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.lang-switch a:hover { color: var(--ink); background: var(--surface); }
.lang-switch a[aria-current="true"] { color: var(--blue); }
.lang-switch abbr { text-decoration: none; }
.lang-switch .sep { color: var(--line-2); }

/* ---- 6. Hero ----------------------------------------------------------- */
.hero { padding-block: var(--s-9) var(--s-8); }
.hero-grid { display: grid; gap: var(--s-8); align-items: center; }
@media (min-width: 68rem) {
  .hero-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--s-8); }
}

.hero h1 {
  font-size: var(--step-5);
  letter-spacing: -0.042em;
  line-height: 1.02;
  margin: var(--s-5) 0;
}
.hero-lead {
  font-size: var(--step-2); color: var(--ink-2);
  max-width: 40ch; margin-bottom: var(--s-6); line-height: 1.5;
}
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); align-items: center; }

/* ---- 7. Hero composition: 27 flags → one line → Chile ------------------ */
.net { margin: 0; display: grid; justify-items: center; text-align: center; }
.net__cap, .net__mid {
  font-size: var(--step--2); letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.net__flags {
  list-style: none;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--s-3);
  max-width: 21rem;
  margin: var(--s-5) 0;
}
.net__flags li { opacity: 0; animation: flagIn 420ms var(--ease-out) both; }
.net__flags img {
  width: 2.125rem; height: auto;
  border: 1px solid rgba(17, 19, 24, 0.14);
  background: #fff;
}
@keyframes flagIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* The single connector — the motif at full strength. */
.net__link { display: grid; justify-items: center; }
.net__line {
  display: block; width: 2px; height: 3.25rem; background: var(--blue);
  transform: scaleY(0); transform-origin: top;
  animation: drop 560ms var(--ease-out) both; animation-delay: 760ms;
}
.net__dot {
  display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--blue);
  margin-top: -1px; opacity: 0;
  animation: fade 300ms var(--ease-out) both; animation-delay: 1240ms;
}
@keyframes drop { to { transform: scaleY(1); } }
@keyframes fade { to { opacity: 1; } }

.net__mid { margin-top: var(--s-3); }
.net__cl {
  display: inline-flex; align-items: center; gap: var(--s-3); margin-top: var(--s-4);
  opacity: 0; animation: fade 400ms var(--ease-out) both; animation-delay: 1320ms;
}
.net__cl img { width: 1.875rem; border: 1px solid rgba(17, 19, 24, 0.14); }
.net__cl span { font-size: var(--step-1); font-weight: 600; letter-spacing: 0.02em; color: var(--ink); }

/* ---- 8. Hero entrance -------------------------------------------------- */
/* Delays live in css/generated.css (.anim-1 … .anim-5) so no markup carries a
   `style` attribute. Pure CSS, so it also plays with JavaScript disabled. */
@keyframes rise { from { opacity: 0; transform: translateY(0.7rem); } to { opacity: 1; transform: none; } }

/* ---- 9. Buttons -------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 0.8125rem var(--s-5);
  border: 1px solid var(--blue); border-radius: var(--radius);
  background: var(--blue); color: #fff;
  font-size: 0.9375rem; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.btn:hover { background: var(--dark-2); color: #fff; transform: translateY(-1px); }
.btn .icon { width: 1em; height: 1em; flex: none; }
.btn .arrow { transition: transform var(--t-mid) var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

.btn--ghost { background: transparent; color: var(--blue-i); border-color: var(--line-2); }
.btn--ghost:hover { background: var(--blue-wash); color: var(--blue); border-color: var(--blue); }

.btn--quiet {
  background: none; border: 0; padding: 0.8125rem 0;
  color: var(--ink-2); font-weight: 500; position: relative;
}
.btn--quiet::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.55rem; height: 1px;
  background: var(--line-2); transition: background var(--t-mid) var(--ease);
}
.btn--quiet:hover { color: var(--blue); background: none; transform: none; }
.btn--quiet:hover::after { background: var(--blue); }

/* ---- 10. Photography bands --------------------------------------------- */
/* `main` is unconstrained, so a band is naturally full-bleed. */
.band { margin: 0; }
.band__frame { display: block; overflow: hidden; }
.band img { width: 100%; background: var(--surface); }
.band figcaption { margin-top: var(--s-3); font-size: var(--step--2); color: var(--muted); }
.band--offset { margin-block: var(--s-9); }
.band--thin { margin-top: var(--s-8); }
@media (min-width: 64rem) {
  .band--offset .band__frame { width: min(100%, 80rem); margin-left: auto; }
}
/* Parallax applies to one photograph only, driven by JS, capped at ±14px. */
.band--hero .band__frame img { will-change: transform; }

/* ---- 11. The 27 -------------------------------------------------------- */
.flag-index {
  list-style: none;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(3.25rem, 1fr));
  gap: var(--s-5) var(--s-3);
  padding-bottom: 1.5rem;
}
.flag-index li { position: relative; }
.flag-index a { display: block; padding: 2px; border-radius: var(--radius); }
.flag-index img {
  width: 2.5rem; border: 1px solid var(--line-2); background: #fff;
  transition: transform var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
}
.flag-index a:hover img, .flag-index a:focus-visible img {
  transform: scale(1.06); border-color: var(--blue);
}
.flag-name {
  position: absolute; left: 50%; top: calc(100% + 0.2rem);
  transform: translateX(-50%);
  white-space: nowrap; font-size: var(--step--2); color: var(--ink-2);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-fast) var(--ease);
}
.flag-index a:hover .flag-name, .flag-index a:focus-visible .flag-name { opacity: 1; }

/* Touch has no hover, so the label never paints; keep it clipped so it can
   never inflate the scroll width of the horizontal scroller. */
@media (hover: none) {
  .flag-index {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 2.75rem;
    overflow-x: auto; scrollbar-width: thin; padding-bottom: var(--s-3);
  }
  .flag-name {
    position: absolute !important; width: 1px; height: 1px; margin: -1px;
    overflow: hidden; clip-path: inset(50%); opacity: 1;
  }
}

/* ---- 12. Toolbar ------------------------------------------------------- */
.toolbar { display: grid; gap: var(--s-4); margin-bottom: var(--s-5); }
@media (min-width: 56rem) {
  .toolbar { grid-template-columns: minmax(15rem, 21rem) 1fr; align-items: center; gap: var(--s-6); }
}

.search-field { position: relative; display: flex; align-items: center; }
.search-field .icon {
  position: absolute; left: 0.75rem; width: 1.0625rem; height: 1.0625rem;
  color: var(--muted); pointer-events: none; transition: color var(--t-fast) var(--ease);
}
.search-field input {
  width: 100%; font: inherit; color: var(--ink);
  padding: 0.6875rem 2.25rem 0.6875rem 2.5rem;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: #fff;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.search-field input::placeholder { color: var(--muted); opacity: 1; }
.search-field input:hover { border-color: var(--muted); }
.search-field input:focus { border-color: var(--blue-i); box-shadow: 0 0 0 3px var(--blue-wash); }
.search-field:focus-within .icon { color: var(--blue-i); }
.search-clear {
  position: absolute; right: 0.5rem; display: none;
  padding: var(--s-1); background: none; border: 0; cursor: pointer;
  color: var(--muted); line-height: 0; border-radius: var(--radius);
  transition: color var(--t-fast) var(--ease);
}
.search-clear .icon { width: 1rem; height: 1rem; }
.search-clear:hover { color: var(--blue-i); }
.search-field[data-filled="true"] .search-clear { display: block; }

.filters { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.filters .chip {
  padding: 0.4375rem 0.875rem;
  border: 1px solid var(--line-2); border-radius: 999px; background: #fff;
  color: var(--ink-2); font-size: 0.875rem; cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
.filters .chip:hover { border-color: var(--muted); color: var(--ink); }
.filters .chip[aria-pressed="true"] {
  background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 500;
}

.result-count { font-size: var(--step--1); color: var(--muted); padding-bottom: var(--s-3); }
.result-count b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- 13. Directory ----------------------------------------------------- */
.directory { list-style: none; border-top: 1px solid var(--ink); }
.directory > li {
  border-bottom: 1px solid var(--line);
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.directory > li[data-leaving] { opacity: 0; transform: translateY(-4px); }

.country > summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-4);
  margin-inline: calc(var(--s-4) * -1);
  cursor: pointer; list-style: none; position: relative;
  transition: background var(--t-mid) var(--ease);
}
.country > summary::-webkit-details-marker { display: none; }
/* The motif once more: a blue bar that grows at the row edge. */
.country > summary::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 2px; height: 0; background: var(--blue);
  transform: translateY(-50%);
  transition: height var(--t-mid) var(--ease);
}
.country > summary:hover { background: var(--tint); }
.country > summary:hover::before, .country[open] > summary::before { height: 62%; }
.country > summary:hover .country-name { color: var(--blue); }

@media (min-width: 62rem) {
  .country > summary { grid-template-columns: auto minmax(0, 1fr) minmax(0, 13rem) auto; }
}

.flag {
  width: 1.875rem; height: 1.4375rem; object-fit: cover;
  border: 1px solid var(--line-2); background: #fff; flex: none;
  transition: transform var(--t-mid) var(--ease);
}
.country > summary:hover .flag { transform: scale(1.04); }

.country-id { min-width: 0; }
.country-name {
  display: block; font-size: var(--step-2); font-weight: 600; letter-spacing: -0.02em;
  transition: color var(--t-fast) var(--ease);
}
.country-lead {
  display: block; color: var(--muted); font-size: var(--step--1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.country-meta { display: none; }
@media (min-width: 62rem) { .country-meta { display: block; min-width: 0; } }
.presence { display: block; font-size: var(--step--1); color: var(--ink-2); white-space: nowrap; }
.presence::before {
  content: ""; display: inline-block;
  width: 0.4375rem; height: 0.4375rem; margin-right: 0.5em;
  background: var(--line-2); vertical-align: 0.05em;
}
.presence[data-presence="direct"]::before  { background: var(--blue); }
.presence[data-presence="embassy"]::before { background: #7E8CB8; }

.row-cta { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--muted); }
.row-cta__text {
  display: none; font-size: var(--step--1);
  opacity: 0; transform: translateX(-4px);
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.row-cta .arrow { display: none; transition: transform var(--t-mid) var(--ease); }
@media (min-width: 48rem) {
  .row-cta__text { display: inline; }
  .row-cta .arrow { display: block; width: 1rem; height: 1rem; }
  .row-cta .chev { display: none; }
}
.country > summary:hover .row-cta { color: var(--blue); }
.country > summary:hover .row-cta__text { opacity: 1; transform: none; }
.country > summary:hover .row-cta .arrow { transform: translateX(4px); }
.country[open] .row-cta__text { opacity: 0; }
.country[open] .row-cta .arrow { transform: rotate(90deg); }

.chev { width: 1.125rem; height: 1.125rem; flex: none; transition: transform var(--t-mid) var(--ease); }
.country[open] .chev { transform: rotate(180deg); }
.country[open] .country-name { color: var(--blue); }

.country-body { padding: 0 0 var(--s-6); }
@media (min-width: 48rem) { .country-body { padding-left: calc(1.875rem + var(--s-4)); } }
.country-summary { color: var(--ink-2); max-width: var(--measure); margin-bottom: var(--s-5); }

.org-list { list-style: none; display: grid; gap: var(--s-5); }
.org-list > li { display: grid; gap: 0.2rem; max-width: 68ch; }
.org-cat {
  font-size: var(--step--2); letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.org-link {
  font-size: var(--step-1); font-weight: 500; color: var(--blue-i);
  text-decoration: underline; text-decoration-color: rgba(11, 87, 208, 0.32);
  display: inline-flex; align-items: baseline; gap: 0.35em;
  transition: text-decoration-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.org-link:hover { color: var(--blue); text-decoration-color: currentColor; }
.org-link .ext {
  width: 0.65em; height: 0.65em; flex: none; align-self: center; color: var(--muted);
  transition: transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.org-link:hover .ext { color: var(--blue); transform: translate(1px, -1px); }
.org-link--dead { color: var(--ink-2); text-decoration: none; }
.org-dead { color: var(--muted); font-weight: 400; font-size: var(--step--1); }

.org-meta { font-size: var(--step--2); color: var(--muted); }
.org-meta .meta-link { color: var(--muted); }
.org-meta .meta-link:hover { color: var(--blue-i); }
.org-note { font-size: var(--step--2); color: var(--muted); max-width: 62ch; }

.vstatus {
  display: inline-block; margin-right: 0.5em; padding: 0.05em 0.4em;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  font-size: 0.95em; color: var(--ink-2);
}

.empty-state { padding: var(--s-7) 0; color: var(--ink-2); }
.empty-state p { margin-bottom: var(--s-4); }

/* ---- 14. Dark network section ------------------------------------------ */
/* The one dark moment on the page. */
.section--network { background: var(--dark); color: var(--on-dark); }
.section--network .section-title { border-top-color: var(--dark-line); color: var(--on-dark); }
.section--network .section-title::before { background: var(--yellow); }

.network-head { display: grid; gap: var(--s-7); margin-bottom: var(--s-8); }
@media (min-width: 62rem) {
  .network-head { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--s-9); align-items: start; }
}
.network-lead { color: var(--on-dark-2); max-width: 46ch; font-size: var(--step-1); }

.brand-moment {
  display: grid; gap: 0.1rem;
  padding-left: var(--s-5); border-left: 2px solid var(--yellow);
  color: var(--on-dark-2); font-size: var(--step-1); line-height: 1.5;
}
.brand-moment__name {
  font-size: var(--step-3); font-weight: 600; letter-spacing: -0.032em;
  color: var(--on-dark); margin-bottom: var(--s-2);
}
.brand-moment__last { color: var(--on-dark); font-weight: 500; }

.logo-wall {
  list-style: none;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 1px; background: var(--dark-line);
  border: 1px solid var(--dark-line);
}
.logo-wall li { background: var(--dark); }
.logo-wall a {
  display: flex; align-items: center; min-height: 5rem;
  padding: var(--s-4); text-decoration: none; color: var(--on-dark-2);
  transition: background var(--t-mid) var(--ease), color var(--t-mid) var(--ease);
}
.logo-wall a:hover { background: var(--dark-2); color: var(--on-dark); }
.wall-name { font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; }
.network-note { margin-top: var(--s-5); font-size: var(--step--1); color: var(--on-dark-2); max-width: 58ch; }

/* ---- 15. News ---------------------------------------------------------- */
.news-grid {
  list-style: none; display: grid; gap: 1px;
  background: var(--line); border-block: 1px solid var(--line);
}
@media (min-width: 56rem) { .news-grid { grid-template-columns: 1fr 1fr; } }
.news-grid li { background: var(--paper); }
.news-feature { grid-column: 1 / -1; }

.news-grid a { display: block; padding: var(--s-6) 0; text-decoration: none; color: inherit; }
@media (min-width: 56rem) {
  .news-grid li:not(.news-feature) + li a { padding-left: var(--s-6); }
}
.news-meta {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  font-size: var(--step--2); color: var(--muted);
  letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: var(--s-4);
}
.news-source { color: var(--blue); font-weight: 600; }
.news-grid h3 {
  font-size: var(--step-2); font-weight: 600; letter-spacing: -0.02em;
  margin-bottom: var(--s-3); max-width: 46ch;
  transition: color var(--t-fast) var(--ease);
}
.news-feature h3 { font-size: var(--step-4); letter-spacing: -0.032em; line-height: 1.1; max-width: 20ch; }
.news-feature p { font-size: var(--step-1); }
.news-grid p { color: var(--ink-2); max-width: var(--measure); margin-bottom: var(--s-4); }
.news-grid a:hover h3 { color: var(--blue); }
.news-more {
  display: inline-flex; align-items: center; gap: 0.45em;
  font-size: var(--step--1); font-weight: 600; color: var(--blue-i);
}
.news-more .arrow { width: 1em; height: 1em; transition: transform var(--t-mid) var(--ease); }
.news-grid a:hover .news-more .arrow { transform: translateX(4px); }
.news-updated { margin-top: var(--s-5); font-size: var(--step--1); color: var(--muted); }

/* The feature splits in two so a large headline does not leave half the row empty. */
@media (min-width: 56rem) {
  .news-feature a {
    display: grid; grid-template-columns: 1.15fr 1fr;
    column-gap: var(--s-8); align-items: start;
  }
  .news-feature .news-meta  { grid-area: 1 / 1; }
  .news-feature h3          { grid-area: 2 / 1; margin-bottom: 0; }
  .news-feature p           { grid-area: 2 / 2; align-self: end; margin-bottom: 0; }
  .news-feature .news-more  { grid-area: 3 / 1; margin-top: var(--s-5); }
}

/* ---- 16. Footer -------------------------------------------------------- */
.site-footer { background: var(--ink); color: var(--on-dark-2); padding-block: var(--s-8) var(--s-6); }
.site-footer a {
  color: #fff; text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.24);
  transition: border-color var(--t-fast) var(--ease);
}
.site-footer a:hover { border-bottom-color: var(--yellow); }
.footer-grid {
  display: grid; gap: var(--s-7);
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  padding-bottom: var(--s-7);
}
.footer-brand { display: grid; gap: 0.15rem; align-content: start; }
.footer-logo .mark { width: 2rem; height: 2rem; margin-bottom: var(--s-3); }
.footer-brand .name { font-size: 1.125rem; font-weight: 600; color: #fff; letter-spacing: -0.032em; }
.footer-brand .tag {
  font-size: 0.625rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--on-dark-2);
}
.footer-grid h2 {
  font-size: var(--step--2); letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--on-dark-2); font-weight: 600; margin-bottom: var(--s-4);
}
.footer-grid ul { list-style: none; display: grid; gap: var(--s-2); font-size: 0.9375rem; }

.status-note {
  padding-top: var(--s-5); border-top: 1px solid var(--dark-line);
  font-size: var(--step--1); color: var(--on-dark-2); max-width: 74ch;
}
.footer-note { padding-top: var(--s-4); font-size: var(--step--1); color: var(--on-dark-2); }

/* ---- 17. Prose (legal pages) ------------------------------------------- */
.prose { max-width: 68ch; padding-block: var(--s-8) var(--s-9); }
.prose h1 { font-size: var(--step-4); letter-spacing: -0.032em; margin-bottom: var(--s-5); }
.prose h2 {
  font-size: var(--step-2); margin-top: var(--s-8); margin-bottom: var(--s-4);
  padding-top: var(--s-5); border-top: 1px solid var(--line);
}
.prose h3 { font-size: var(--step-1); margin-top: var(--s-6); margin-bottom: var(--s-3); }
.prose p, .prose ul, .prose ol, .prose dl { margin-bottom: var(--s-4); color: var(--ink-2); }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li { margin-bottom: var(--s-2); }
.prose strong { color: var(--ink); }
.prose .lead { font-size: var(--step-2); color: var(--ink-2); margin-bottom: var(--s-6); }
.prose code { font-size: 0.9em; background: var(--surface); padding: 0.1em 0.3em; border-radius: var(--radius); }
.prose kbd {
  font: inherit; font-size: 0.85em; border: 1px solid var(--line-2);
  border-bottom-width: 2px; border-radius: 3px; padding: 0.05em 0.35em;
}
.defs { margin-bottom: var(--s-5); }
.defs dt { font-weight: 600; color: var(--ink); margin-top: var(--s-4); }
.defs dd { margin-bottom: var(--s-2); color: var(--ink-2); }

.prose table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.prose th, .prose td {
  text-align: left; padding: var(--s-3); border-bottom: 1px solid var(--line); vertical-align: top;
}
.prose thead th { color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--ink); }
/* `position: relative` is load-bearing: the visually-hidden "(external site)"
   spans inside the cells are absolutely positioned. Without a positioned
   ancestor they escape this scroller and drag the page into horizontal scroll. */
.table-scroll { position: relative; overflow-x: auto; margin-bottom: var(--s-3); }
.table-foot { font-size: var(--step--2); color: var(--muted); margin-bottom: var(--s-5); }

.todo {
  display: inline-block; padding: 0.1em 0.45em;
  background: var(--yellow); color: #3D2F00; border-radius: var(--radius);
  font-size: 0.85em; font-weight: 600;
}
.updated { font-size: var(--step--1); color: var(--muted); margin-bottom: var(--s-6); }

/* ---- 18. Reduced motion ------------------------------------------------ */
/* Every animation above is decorative. With the preference set the page is
   identical in content and equally usable, with nothing in motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .net__flags li, .net__dot, .net__cl { opacity: 1; transform: none; }
  .net__line { transform: scaleY(1); }
  .flag-index a:hover img, .flag-index a:focus-visible img { transform: none; }
  .country > summary:hover .flag { transform: none; }
  .btn:hover { transform: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation: none !important;
  }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Fades between the ES and EN pages. Both remain real, separate, indexable
   static URLs; browsers without support simply navigate. */
@view-transition { navigation: auto; }

/* ---- 19. Print --------------------------------------------------------- */
@media print {
  .toolbar, .site-nav, .lang-switch, .skip-link, .net, .band, .flag-index { display: none; }
  .site-footer, .section--network { background: none; color: #000; }
  .country > summary { cursor: auto; }
  .country-body { display: block !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; word-break: break-all; }
}

/* ---- 20. Forced colours ------------------------------------------------ */
@media (forced-colors: active) {
  .filters .chip[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .flag, .flag-index img, .net__flags img { border-color: CanvasText; }
  .btn { border: 1px solid ButtonText; }
  .country > summary:hover { background: Highlight; color: HighlightText; }
  .logo-wall a:hover { background: Highlight; color: HighlightText; }
}