/* ============================================================
   CIEN — Centro de Investigación de Economía Nacional
   Sistema editorial. Azul de marca #85A7D7 como acento único.
   ============================================================ */

:root {
  /* superficies — base tintada (azul + neutros) */
  --paper:        #EBEFF6;   /* azul-gris muy claro: menos blanco */
  --paper-2:      #FFFFFF;    /* tarjetas / paneles blancos que resaltan */
  --white:        #FFFFFF;

  /* tintas — neutros */
  --ink:          #1B1C1E;   /* casi negro, neutro */
  --ink-2:        #434343;
  --muted:        #7A7A7A;
  --faint:        #BABABA;

  /* líneas */
  --line:         #E6E7EA;
  --line-2:       #D8D8D8;
  --line-strong:  #BABABA;

  /* azul de marca — ÚNICO acento dominante (#85A7D7 / #73A9CB).
     Los “dark” son neutros (no navy); el verde NO es color de marca. */
  --brand:        #85A7D7;   /* azul CIEN — primario: logo, links, botones, destacados */
  --brand-2:      #73A9CB;   /* azul profundo — hover y series de datos */
  --green:        #85A7D7;   /* acento = azul de marca */
  --green-600:    #73A9CB;   /* hover */
  --green-deep:   #1C1D1F;   /* superficie oscura NEUTRA */
  --green-deepest:#0F1011;   /* superficie más oscura NEUTRA (footer) */
  --green-tint:   #EAF1F8;   /* wash azul muy claro */
  --green-tint-2: #D9E5F3;

  /* acentos de datos secundarios — solo en gráficos, con moderación */
  --blue:   #73A9CB;
  --blue-2: #85A7D7;
  --gold:   #E5AE47;

  /* tipografía — Montserrat es la fuente oficial de CIEN: marca, nav, UI y
     etiquetas. Newsreader se reserva para los titulares editoriales y el
     cuerpo largo de los informes; Space Grotesk para metadatos y números. */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Montserrat", system-ui, sans-serif;
  --mono:  "Space Grotesk", system-ui, sans-serif;  /* meta / datos */
  --label: "Montserrat", system-ui, sans-serif;     /* etiquetas en mayúscula */

  /* medidas */
  --read: 680px;        /* columna de lectura */
  --wide: 1180px;       /* contenedor ancho */
  --pad: clamp(20px, 5vw, 56px);

  --r: 4px;             /* radio sutil */
  --r-lg: 8px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--paper);
  /* "papel de gráfico": solo pautado horizontal sutil (eje Y de un chart),
     más un wash suave. La textura temática vive en .data-backdrop (barras). */
  background-image:
    repeating-linear-gradient(0deg, rgba(115,169,203,.05) 0 1px, transparent 1px 68px),
    radial-gradient(120% 80% at 100% 0%, rgba(115,169,203,.10), transparent 60%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--brand); color: #11151b; }

/* ============================================================
   FONDO TEMÁTICO — skyline de barras (serie económica)
   Capa fija detrás del contenido. Las barras "respiran" con el scroll.
   ============================================================ */
#root { position: relative; z-index: 1; }
.data-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.data-backdrop .bars {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 62vh;
  display: flex;
  align-items: flex-end;
  gap: 1.1vw;
  padding-inline: 2vw;
  opacity: .85;
}
.data-backdrop .b {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, rgba(115,169,203,.16), rgba(115,169,203,.05));
  transform-origin: bottom center;
  transform: scaleY(var(--w, 1));
  will-change: transform;
}
.data-backdrop .b.alt {
  background: none;
  border: 1px solid rgba(115,169,203,.18);
  border-bottom: 0;
}
@media (max-width: 880px){
  .data-backdrop .bars { height: 46vh; gap: 1.4vw; opacity: .7; }
}

/* ---------- tipografía utilitaria ---------- */
/* Montserrat es más ancha que la grotesca anterior: en mayúsculas el tracking
   de .16em quedaba suelto, así que baja a .12em con un cuerpo apenas menor. */
.eyebrow {
  font-family: var(--label);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--green);
  font-weight: 600;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .6em;
}
.eyebrow.muted { color: var(--muted); }
.eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: currentColor;
  opacity: .55;
}
.eyebrow.no-rule::before { display: none; }

.mono { font-family: var(--mono); }
.serif { font-family: var(--serif); }

h1,h2,h3,h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}

.display {
  font-family: var(--serif);
  font-weight: 470;
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-size: clamp(40px, 6.4vw, 84px);
}

p { margin: 0 0 1.1em; }
strong { font-weight: 600; }

/* ---------- layout ---------- */
.wrap { max-width: var(--wide); margin: 0 auto; padding-inline: var(--pad); }
.read { max-width: var(--read); margin-inline: auto; padding-inline: var(--pad); }

.section { padding-block: clamp(56px, 9vw, 116px); }
.section.tight { padding-block: clamp(40px, 6vw, 72px); }

/* bandas full-bleed para dar ritmo de color */
.band-deep  { background: #D8E4F2; }
.band-white { background: var(--white); }
.band-brand { background: var(--brand); color: #11151b; }

/* motivo de líneas finas para encabezados (eco del patrón de fondo) */
.bar-accent { display:flex; align-items:flex-end; gap:5px; height:26px; margin-bottom:20px; }
.bar-accent span { width:2px; border-radius:1px; flex:none; background:var(--brand-2); }
.bar-accent span:nth-child(1){ height:48%; }
.bar-accent span:nth-child(2){ height:100%; }
.bar-accent span:nth-child(3){ height:32%; background:#acc6e4; }
.bar-accent span:nth-child(4){ height:74%; }
.bar-accent span:nth-child(5){ height:54%; background:#acc6e4; }

/* franja-gráfico (serie de datos) entre secciones */
.chart-rule-wrap { padding-block: clamp(4px, 1.4vw, 12px); }
.chart-rule { display:flex; align-items:flex-end; gap:5px; height: clamp(54px, 7vw, 78px); border-bottom:1px solid var(--line-2); position: relative; }
.chart-rule span { flex:1 1 0; min-width:2px; border-radius:2px 2px 0 0; background: var(--brand); transform-origin: bottom; }
.chart-rule span:nth-child(3n){ background: var(--brand-2); }
/* las barras crecen al entrar en pantalla (scroll) */
.chart-rule-wrap.reveal .chart-rule span { transform: scaleY(0); transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.chart-rule-wrap.reveal.is-in .chart-rule span { transform: scaleY(1); }
.chart-rule-wrap.on-dark .chart-rule { border-bottom-color: rgba(255,255,255,.14); }
.chart-rule-wrap.on-dark .chart-rule span { background: rgba(133,167,215,.45); }
.chart-rule-wrap.on-dark .chart-rule span:nth-child(3n){ background: rgba(133,167,215,.7); }
@media (max-width: 600px){ .chart-rule span:nth-child(2n){ display:none; } }

.divider { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ============================================================
   HEADER
   ============================================================ */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-head .bar {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 var(--pad);
  height: 74px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.brand { display: flex; align-items: center; gap: 13px; cursor: pointer; }
.brand svg, .brand img { width: 42px; height: auto; display: block; }
/* Lockup institucional. Reproduce el de la portada de los informes: isotipo +
   nombre completo, los dos en el MISMO azul de marca (#85A7D7, muestreado del
   original — ahí marca y texto comparten color exacto).
   Tres reglas que venían mal y no hay que volver a romper:
     · Nunca se escribe "CIEN" en letras al lado del isotipo. El isotipo ES la
       marca; el wordmark deletreado era un invento del sitio.
     · El nombre va entero — no "Investigación · Economía Nacional" recortado.
     · Va en azul, no en gris.
   La versión impresa parte el nombre en cuatro líneas porque una portada tiene
   alto de sobra; en una barra de 74px va la variante horizontal, de dos líneas,
   con el bloque de texto a la altura óptica del isotipo. */
.brand .wm { display: flex; flex-direction: column; line-height: 1.18; }
.brand .wm span {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: .004em;
  color: var(--brand);
  white-space: nowrap;
}
/* Abajo de 560px el nombre y el botón de menú se pelean por el ancho: baja todo
   el lockup en bloque en vez de esconder el nombre — la identidad tiene que
   seguir estando en el teléfono. */
@media (max-width: 560px) {
  .brand { gap: 10px; }
  .brand svg, .brand img { width: 34px; }
  .brand .wm span { font-size: 13px; }
}

/* tabla de datos cruda (extraída de PDF) — monoespaciada y con scroll */
.prose pre.data-table, pre.data-table {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.7;
  white-space: pre;
  overflow-x: auto;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 24px 0;
  color: var(--ink);
  -webkit-overflow-scrolling: touch;
}

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 15px;
  color: var(--ink-2);
  padding: 9px 13px;
  border-radius: var(--r);
  position: relative;
  transition: color .15s, background .15s;
}
.nav a:hover { color: var(--green); }
.nav a.active { color: var(--green); }
.nav a.active::after {
  content:""; position:absolute; left:13px; right:13px; bottom:2px;
  height:2px; background: var(--green); border-radius:2px;
}

.menu-btn {
  display: none;
  background: none; border: 1px solid var(--line-2);
  border-radius: var(--r); padding: 9px 11px; cursor: pointer;
  font-family: var(--mono); font-size: 12px; letter-spacing:.1em; text-transform:uppercase;
  color: var(--ink);
}

/* mobile drawer */
.drawer { display: none; }

@media (max-width: 860px) {
  .nav { display: none; }
  .menu-btn { display: inline-block; }
  .drawer {
    display: block;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
    overflow: hidden;
    max-height: 0; transition: max-height .3s ease;
  }
  .drawer.open { max-height: 420px; }
  .drawer nav { display: flex; flex-direction: column; padding: 8px var(--pad) 20px; }
  .drawer a {
    padding: 14px 0; border-bottom: 1px solid var(--line);
    /* el drawer es la nav de mobile: misma familia que la nav de desktop */
    font-size: 17px; font-weight: 500; font-family: var(--sans); color: var(--ink);
  }
  .drawer a.active { color: var(--green); }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-weight: 600; font-size: 15px;
  padding: 13px 22px; border-radius: var(--r); cursor: pointer;
  border: 1px solid transparent; transition: .16s; white-space: nowrap;
}
.btn-green { background: var(--green); color: #11151b; }
.btn-green:hover { background: var(--brand-2); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--green); color: var(--green); }
.btn .arr { transition: transform .18s; }
.btn:hover .arr { transform: translateX(3px); }

/* link with arrow */
.tlink {
  font-family: var(--sans); font-weight: 600; font-size: 15px;
  color: var(--green); display: inline-flex; align-items: center; gap: 7px;
  border-bottom: 1px solid transparent; padding-bottom: 1px;
}
.tlink:hover { border-color: var(--green); }
.tlink .arr { transition: transform .18s; }
.tlink:hover .arr { transform: translateX(3px); }

/* ============================================================
   HERO (home) — con motivo abstracto de barras (logo "100")
   ============================================================ */
.hero-wrap { position: relative; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: clamp(28px,5vw,64px); align-items: stretch; }

/* serie económica que fluye (reemplaza el motivo de barras del hero) */
.hero-chart {
  align-self: end;
  width: clamp(260px, 30vw, 440px);
  height: clamp(300px, 40vw, 500px);
  margin-bottom: clamp(72px, 11vw, 168px);
  pointer-events: none;
  position: relative;
}
.hero-chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.hero-chart .grid  { stroke: rgba(115,169,203,.20); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hero-chart .area  { fill: url(#heroFill); }
.hero-chart .line  { fill: none; stroke: var(--brand-2); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hero-chart .line2 { fill: none; stroke: rgba(115,169,203,.55); stroke-width: 1.6; stroke-dasharray: 3 6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hero-chart .dot   { fill: var(--brand-2); }
.hero-chart .dot-pulse {
  fill: var(--brand-2);
  transform-box: fill-box; transform-origin: center;
  animation: heroPulse 2.6s cubic-bezier(.2,.6,.3,1) infinite;
}
@keyframes heroPulse {
  from { transform: scale(1);   opacity: .42; }
  to   { transform: scale(4.4); opacity: 0;   }
}
@media (prefers-reduced-motion: reduce){ .hero-chart .dot-pulse { animation: none; opacity: .25; } }
@media (max-width: 880px){
  .hero-grid { grid-template-columns: 1fr; }
  .hero-chart { display: none; }
}

.hero { padding-top: clamp(40px, 6vw, 76px); padding-bottom: clamp(36px, 5vw, 64px); position: relative; z-index: 2; }
.hero .display { max-width: 16ch; }
.hero .lede {
  font-family: var(--serif);
  font-size: clamp(19px, 2.1vw, 24px);
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 56ch;
  margin-top: 28px;
}
.hero .cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }

/* statline */
.statline {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--ink);
  margin-top: clamp(48px, 7vw, 84px);
}
.statline .cell { padding: 24px 26px 24px 0; border-right: 1px solid var(--line); }
.statline .cell:last-child { border-right: 0; }
.statline .n { font-family: var(--serif); font-size: clamp(30px,4vw,46px); color: var(--green); line-height:1; }
.statline .k { font-family: var(--mono); font-size: 12px; letter-spacing:.04em; color: var(--muted); margin-top: 12px; text-transform: uppercase; }
@media (max-width:680px){ .statline{ grid-template-columns:1fr; } .statline .cell{ border-right:0; border-bottom:1px solid var(--line);} .statline .cell:last-child{border-bottom:0;} }

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.sec-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom: 40px; }
.sec-head h2 { font-size: clamp(28px, 3.6vw, 44px); }
.sec-head .lead { color: var(--muted); max-width: 46ch; margin-top: 12px; font-size: 16px; }

/* ============================================================
   FEATURED / DESTACADOS
   ============================================================ */
.feat-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; }
@media (max-width: 900px){ .feat-grid{ grid-template-columns: 1fr; } }

.feat-main {
  background: var(--paper-2); color: var(--ink); border:1px solid var(--line);
  border-left: 4px solid var(--brand); border-radius: var(--r-lg);
  display: flex; flex-direction: column;
  min-height: 360px; position: relative; overflow: hidden; transition:.2s;
}
.feat-main .ph { width:100%; aspect-ratio: 16/8; background: var(--line); }
.feat-main .ph image-slot { width:100%; height:100%; display:block; }
.feat-main .body { padding: clamp(28px, 4vw, 48px); display:flex; flex-direction:column; flex:1; }
.feat-main:hover { border-color: var(--brand); border-left-color: var(--brand); box-shadow: 0 16px 38px -22px rgba(60,90,130,.5); }
.feat-main .eyebrow { color: var(--green); }
.feat-main .eyebrow::before { background: var(--green); }
.feat-main h3 { color:var(--ink); font-size: clamp(26px, 3vw, 38px); margin-top: 20px; max-width: 18ch; }
.feat-main p { color: var(--ink-2); margin-top: 16px; max-width: 46ch; }
.feat-main .meta { font-family: var(--mono); font-size:12px; color:var(--muted); margin-top:auto; padding-top: 28px; letter-spacing:.04em; }
.feat-main .tlink { color: var(--green); }
.feat-main .tlink:hover { border-color: var(--green); }

.feat-side { display: grid; gap: 28px; }
.feat-card {
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-lg);
  display: flex; flex-direction: column; transition: .18s; cursor: pointer; overflow: hidden;
}
.feat-card .ph { width:100%; aspect-ratio: 16/9; background: var(--line); }
.feat-card .ph image-slot { width:100%; height:100%; display:block; }
.feat-card .body { padding: 22px 24px 24px; display:flex; flex-direction:column; }
.feat-card:hover { border-color: var(--green); transform: translateY(-2px); }
.feat-card:hover .ph image-slot { filter: saturate(1.04); }
.feat-card .eyebrow { color: var(--green); }
.feat-card h4 { font-size: 21px; margin-top: 14px; line-height: 1.18; }
.feat-card .meta { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-top: 14px; letter-spacing:.03em; }

/* ============================================================
   INFORME INDEX — listado editorial
   ============================================================ */
.filters { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom: 8px; }

.search-wrap { position: relative; }
.search-wrap input {
  font-family: var(--sans); font-size: 14px; padding: 9px 14px 9px 36px;
  border: 1px solid var(--line-2); border-radius: 999px; background: var(--paper-2);
  width: 230px; color: var(--ink); outline: none; transition:.15s;
}
.search-wrap input:focus { border-color: var(--green); }
.search-wrap svg { position:absolute; left:13px; top:50%; transform:translateY(-50%); opacity:.5; }

.info-list { border-top: 1px solid var(--ink); }
.info-row {
  display: grid; grid-template-columns: 150px 1fr 140px; gap: 32px;
  padding: 26px 0; border-bottom: 1px solid var(--line);
  cursor: pointer; transition: .16s; align-items: start;
}
.info-row:hover { background: var(--green-tint); padding-inline: 16px; margin-inline: -16px; border-radius: var(--r); }
.info-row .date { font-family: var(--mono); font-size: 13px; color: var(--green); letter-spacing:.02em; padding-top: 5px; }
.info-row h3 { font-size: 25px; line-height: 1.14; }
.info-row .sum { color: var(--ink-2); font-size: 15.5px; margin-top: 9px; max-width: 60ch; line-height:1.5; }
.info-row .rt { text-align: right; font-family: var(--mono); font-size: 12px; color: var(--muted); padding-top: 6px; line-height: 1.8; }
.info-row .rt b { color: var(--ink); font-weight:600; }
.info-row .go { display:inline-block; margin-top:10px; color:var(--green); font-family:var(--sans); font-weight:600; font-size:13px; opacity:0; transition:.16s; }
.info-row:hover .go { opacity:1; }
@media (max-width: 760px){
  .info-row { grid-template-columns: 1fr; gap: 8px; }
  .info-row .rt { text-align:left; display:flex; gap:18px; padding-top:4px; }
  .info-row:hover { padding-inline: 12px; margin-inline:-12px; }
}

/* ---- tarjetas de informe (índice dinámico) ---- */
.inf-cards { display:grid; grid-template-columns: repeat(2,1fr); gap: 24px; }
@media (max-width:760px){ .inf-cards{ grid-template-columns:1fr; } }

.inf-card {
  background: var(--paper-2); border:1px solid var(--line); border-radius: var(--r-lg);
  padding: 28px; display:flex; flex-direction:column; cursor:pointer; transition:.2s;
  position:relative; overflow:hidden; min-height: 230px;
}
.inf-card::before {
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background: var(--brand); transform: scaleY(0); transform-origin: top; transition:.22s;
}
.inf-card:hover { border-color: var(--brand); transform: translateY(-3px); box-shadow: 0 14px 32px -20px rgba(33,63,93,.5); }
.inf-card:hover::before { transform: scaleY(1); }
.inf-card .top { display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-family:var(--mono); font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; margin-bottom:16px; }
.inf-card .top .dt { color:var(--green); }
.inf-card .top .src { color:var(--faint); }
.inf-card h3 { font-size: 23px; line-height:1.15; letter-spacing:-.01em; }
.inf-card .sum { color: var(--ink-2); font-size:14.5px; margin-top:11px; line-height:1.5; flex:1; }
.inf-card .foot { display:flex; align-items:center; justify-content:space-between; margin-top:20px; padding-top:15px; border-top:1px solid var(--line); }
.inf-card .foot .m { font-family:var(--mono); font-size:11.5px; color:var(--muted); letter-spacing:.03em; }
.inf-card .foot .go { color:var(--green); font-family:var(--sans); font-weight:600; font-size:13px; display:inline-flex; gap:6px; align-items:center; opacity:.55; transition:.18s; }
.inf-card:hover .foot .go { opacity:1; gap:9px; }

/* informe destacado (lead) */
.inf-lead {
  grid-column: 1 / -1; display:grid; grid-template-columns: 1.55fr 1fr;
  border-radius: var(--r-lg); overflow:hidden; border:1px solid var(--line);
  background: var(--paper-2); cursor:pointer; transition:.2s; margin-bottom: 4px;
}
.inf-lead:hover { border-color: var(--brand); box-shadow: 0 16px 38px -22px rgba(33,63,93,.55); }
.inf-lead .body { padding: clamp(28px,4vw,46px); display:flex; flex-direction:column; }
.inf-lead h2 { font-size: clamp(28px,3.6vw,42px); margin-top:16px; line-height:1.06; max-width:15ch; }
.inf-lead .sum { color: var(--ink-2); font-size:16.5px; margin-top:16px; line-height:1.5; max-width:50ch; }
.inf-lead .cta { margin-top:auto; padding-top:26px; }
.inf-lead .side {
  background: var(--paper); color: var(--ink);
  background-image: repeating-linear-gradient(90deg, rgba(115,169,203,.30) 0 1px, transparent 1px 22px);
  border-left: 1px solid var(--line);
  padding: clamp(24px,3vw,40px); display:flex; flex-direction:column; justify-content:space-between; gap:24px;
}
.inf-lead .side .lbl { font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.inf-lead .side .yr { font-family:var(--serif); font-weight:500; font-size: clamp(56px,8vw,104px); line-height:.9; letter-spacing:-.02em; color: var(--green); }
.inf-lead .side .m { font-family:var(--mono); font-size:12px; letter-spacing:.03em; line-height:1.9; color: var(--ink-2); }
.inf-lead .side .m b { font-weight:600; }
@media (max-width:760px){ .inf-lead{ grid-template-columns:1fr; } .inf-lead .side{ flex-direction:row; align-items:flex-end; justify-content:space-between; } }

/* ============================================================
   ARTICLE — informe individual
   ============================================================ */
.art-head { border-bottom: 1px solid var(--ink); padding-bottom: 44px; }
.art-head .kick { display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-bottom: 26px; }
.art-head h1 { font-size: clamp(34px, 5vw, 60px); font-weight: 470; line-height: 1.04; max-width: 18ch; }
.art-head .standfirst {
  font-family: var(--serif); font-size: clamp(19px, 2.1vw, 23px); line-height:1.5;
  color: var(--ink-2); margin-top: 24px; max-width: 60ch;
}
.art-meta { display:flex; flex-wrap:wrap; align-items:center; gap: 26px; margin-top: 30px; font-family: var(--mono); font-size:12.5px; color:var(--muted); letter-spacing:.02em; }
.art-meta b { color: var(--ink); font-weight:600; }

/* Descarga compacta en la cabecera. No compite con el h1: se queda en el
   registro monoespaciado de la dateline y sólo se enciende al pasar por
   encima. La flecha baja en el hover — el gesto de "bajar el archivo". */
.dl-chip {
  margin-left: auto; display:inline-flex; align-items:center; gap:8px;
  font-family: var(--mono); font-size:12px; letter-spacing:.02em; line-height:1;
  color: var(--ink-2); padding: 8px 15px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--paper-2);
  transition: background .16s, border-color .16s, color .16s;
}
.dl-chip svg { color: var(--green); transition: transform .18s; }
.dl-chip:hover { border-color: var(--green); background: var(--green-tint); color: var(--green-deep); }
.dl-chip:hover svg { transform: translateY(2px); }
.dl-chip:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
/* En pantalla angosta la línea se apila: el chip deja de irse al margen derecho. */
@media (max-width:640px){ .dl-chip { margin-left: 0; } }

.tag { font-family: var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:5px 11px; border-radius:999px; background:var(--green-tint); color:var(--green-deep); white-space:nowrap; }

/* ---------- resumen ejecutivo ----------
   Los informes que traen su propio "Resumen" / "Resumen ejecutivo" lo muestran
   acá, arriba del cuerpo: fuera de la numeración de secciones y fuera del índice.
   Tiene que leerse como antesala del informe, no como el capítulo 1: más liviano
   que el h1 y la bajada que quedan arriba, y claramente separado del cuerpo. */
.resumen-ej {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: var(--r-lg);
  padding: clamp(22px, 3vw, 34px) clamp(22px, 3vw, 36px);
  margin: 0 0 clamp(38px, 5vw, 56px);
}
.resumen-ej .k {
  font-family: var(--label);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--green);
  display: flex; align-items: center; gap: .6em;
  margin-bottom: 18px;
}
.resumen-ej .k::before { content:""; width:22px; height:1px; background:currentColor; opacity:.55; }
.resumen-ej .c { font-family: var(--serif); font-size: 17.5px; line-height: 1.6; color: var(--ink-2); }
.resumen-ej .c > p { margin: 0 0 1em; }
.resumen-ej .c > :last-child { margin-bottom: 0; }
.resumen-ej .c strong { font-weight: 600; color: var(--ink); }
.resumen-ej .c em { font-style: italic; }
.resumen-ej .c a { color: var(--green); border-bottom: 1px solid color-mix(in srgb, var(--green) 40%, transparent); }
.resumen-ej .c h3, .resumen-ej .c h4 {
  font-family: var(--sans); font-weight: 600; font-size: 15px; line-height: 1.4;
  margin: 1.4em 0 .4em; color: var(--ink); letter-spacing: 0;
}
/* viñetas propias: cuadraditos del azul de marca, alineados al texto */
.resumen-ej .c ul { list-style: none; padding-left: 0; margin: 0 0 1em; }
.resumen-ej .c li { position: relative; padding-left: 1.35em; margin-bottom: .55em; }
.resumen-ej .c li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; background: var(--brand); border-radius: 1px;
}
.resumen-ej .c ul ul { margin: .55em 0 0; }
.resumen-ej .c ul ul li { margin-bottom: .35em; }
.resumen-ej .c ul ul li::before { background: transparent; border: 1px solid var(--brand-2); }
@media (max-width: 560px){ .resumen-ej { border-radius: var(--r); } }

/* prose */
.prose { font-family: var(--serif); font-size: 19px; line-height: 1.66; color: #23241b; }
.prose > p { margin: 0 0 1.25em; }
.prose h2 {
  font-family: var(--serif); font-size: clamp(26px, 3.4vw, 36px); font-weight: 500;
  margin: 2em 0 .6em; line-height: 1.1; letter-spacing:-.01em;
}
.prose h2 .num { color: var(--green); font-family: var(--mono); font-size: .5em; vertical-align: middle; margin-right: .8em; letter-spacing:0; }
.prose h3 {
  font-family: var(--sans); font-weight: 700; font-size: 19px; line-height:1.4;
  margin: 1.9em 0 .5em; color: var(--ink); letter-spacing: 0;
}
.prose .subkick { font-family: var(--sans); font-weight: 700; font-size: 17px; margin: 1.7em 0 .4em; color: var(--green-deep); }
.prose h4 { font-family: var(--sans); font-weight: 600; font-size: 16px; line-height: 1.4; margin: 1.5em 0 .4em; color: var(--green-deep); letter-spacing: 0; }
.prose a { color: var(--green); border-bottom: 1px solid color-mix(in srgb, var(--green) 40%, transparent); }
.prose a:hover { border-color: var(--green); }
.prose em { font-style: italic; }
.prose ul { padding-left: 1.2em; margin: 0 0 1.3em; }
.prose li { margin-bottom: .5em; }

/* dropcap on first para */
.prose.lead-cap > p:first-of-type::first-letter {
  font-family: var(--serif); float: left; font-size: 4.1em; line-height: .82;
  padding: 8px 12px 0 0; color: var(--green); font-weight: 500;
}

/* pull quote */
.pullquote {
  font-family: var(--serif); font-size: clamp(23px, 3vw, 31px); line-height: 1.28;
  color: var(--green-deep); font-weight: 500; letter-spacing: -.01em;
  border-left: 3px solid var(--green); padding: 6px 0 6px 28px; margin: 1.6em 0;
  max-width: 100%;
}

/* figure — gráficos como ciudadanos de primera clase */
.figure { margin: 2.4em 0; }
.figure .frame {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(18px, 3vw, 34px);
}
.figure img { margin: 0 auto; }
.figure figcaption { margin-top: 16px; display:flex; flex-direction:column; gap:6px; }
.figure .fnum { font-family: var(--mono); font-size: 12px; letter-spacing:.1em; text-transform:uppercase; color: var(--green); }
.figure .fcap { font-family: var(--sans); font-size: 15px; color: var(--ink-2); line-height:1.4; font-weight:500; }
.figure .fsrc { font-family: var(--mono); font-size: 11.5px; color: var(--muted); letter-spacing:.02em; }

/* figure placeholder for unavailable charts */
.figph {
  border: 1px dashed var(--line-strong); border-radius: var(--r-lg);
  background: repeating-linear-gradient(135deg, #f0efe8 0 11px, #f6f5ef 11px 22px);
  min-height: 220px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  color: var(--muted);
}
.figph .pi { font-family: var(--mono); font-size: 12px; letter-spacing:.06em; }
.figph .pt { font-family: var(--sans); font-size: 14px; color: var(--ink-2); max-width: 36ch; text-align:center; }

/* tables — embebidas */
.tbl-wrap { margin: 2.2em 0; overflow-x:auto; }
.tbl-cap { font-family: var(--mono); font-size: 12px; letter-spacing:.1em; text-transform:uppercase; color: var(--green); margin-bottom: 12px; }
table.data {
  width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 15px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); overflow:hidden;
}
table.data th, table.data td { padding: 11px 16px; text-align: right; border-bottom: 1px solid var(--line); }
table.data th:first-child, table.data td:first-child { text-align: left; }
table.data thead th { background: var(--green-deep); color:#fff; font-weight:600; font-size:13px; letter-spacing:.01em; border-bottom:0; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:nth-child(even) { background: #faf9f3; }
table.data tr.total td { font-weight: 700; border-top: 2px solid var(--ink); background: var(--green-tint); }
table.data .num { font-family: var(--mono); font-size: 14px; }
.tbl-src { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-top: 10px; }

/* download block */
.dl {
  margin: 56px 0 0; border: 1px solid var(--green); border-radius: var(--r-lg);
  padding: 26px 28px; display:flex; align-items:center; justify-content:space-between; gap:24px;
  background: var(--green-tint);
}
.dl .l .k { font-family: var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--green); }
.dl .l .t { font-family: var(--serif); font-size: 20px; margin-top:6px; color: var(--ink); }
.dl .l .s { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top:4px; }
@media (max-width:560px){ .dl{ flex-direction:column; align-items:flex-start; } }

/* footnote-ish source under inline mentions */
.src-inline { font-family: var(--mono); font-size: 12px; color: var(--muted); display:block; margin: -1.2em 0 2em; }

/* TOC rail */
.toc {
  position: sticky; top: 96px; font-family: var(--sans); font-size: 13.5px;
}
.toc .h { font-family: var(--label); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
.toc a { display:block; padding: 7px 0 7px 14px; color: var(--muted); border-left: 2px solid var(--line); line-height:1.3; }
.toc a:hover { color: var(--green); }
.toc a.on { color: var(--green); border-color: var(--green); font-weight:600; }
.toc a.sub { padding-left: 30px; font-size: 12.5px; }

.art-grid { display:grid; grid-template-columns: 200px minmax(0,1fr); gap: clamp(28px,5vw,72px); align-items:start; max-width: 1080px; margin:0 auto; padding-inline:var(--pad); }
/* minmax(0,1fr) y no 1fr: con `1fr` la columna hereda el min-content de las
   tablas y los bloques <pre> del informe y se estira más allá del viewport,
   desbordando toda la página en mobile. Con el mínimo en 0, la columna se
   achica y esos bloques scrollean por dentro, que es lo que corresponde. */
@media (max-width: 980px){ .art-grid{ grid-template-columns:minmax(0,1fr); } .toc{ display:none; } }

/* ============================================================
   ANALISIS (blog) cards
   ============================================================ */
.note-list { display: grid; gap: 0; border-top:1px solid var(--ink); }
.note-row {
  display:grid; grid-template-columns: 1fr 240px; gap: 36px; padding: 30px 0;
  border-bottom: 1px solid var(--line); cursor:pointer; transition:.16s; align-items:center;
}
.note-row:hover { background: var(--green-tint); padding-inline:16px; margin-inline:-16px; }
.note-row .meta { font-family: var(--mono); font-size:12px; color:var(--green); letter-spacing:.03em; margin-bottom:12px; display:flex; gap:14px; flex-wrap:wrap; }
.note-row h3 { font-size: 27px; line-height:1.12; }
.note-row .sum { color: var(--ink-2); margin-top:10px; font-size:15.5px; max-width:58ch; }
.note-row .thumb { aspect-ratio: 16/10; border-radius: var(--r); overflow:hidden; background:var(--line); filter: grayscale(1); transition:.2s; }
.note-row:hover .thumb { filter: grayscale(0); }
.note-row .thumb img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:760px){ .note-row{ grid-template-columns:1fr; } .note-row .thumb{ order:-1; } }

/* institucional blocks */
.inst-block { display:grid; grid-template-columns: 220px 1fr; gap: clamp(24px,5vw,64px); padding-block: clamp(40px,5vw,64px); border-bottom:1px solid var(--line); }
.inst-block:last-of-type { border-bottom:0; }
.inst-block .k h2 { font-size: clamp(24px,3vw,34px); }
.inst-block .k .e { margin-bottom:14px; }
.inst-block .c { font-family: var(--serif); font-size: 19px; line-height:1.6; color:#23241b; max-width:62ch; }
.inst-block .c p { margin-bottom: 1em; }
@media (max-width:760px){ .inst-block{ grid-template-columns:1fr; gap:16px; } }

/* ============================================================
   ACTIVIDADES / MEDIOS
   ============================================================ */
.act-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:28px; }
@media (max-width:900px){ .act-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .act-grid{ grid-template-columns:1fr;} }
.act-card { cursor:pointer; }
.act-card .img { aspect-ratio: 3/2; border-radius: var(--r); overflow:hidden; background:var(--line); filter:grayscale(.3); transition:.2s; }
.act-card:hover .img { filter:grayscale(0); }
.act-card .img img{ width:100%; height:100%; object-fit:cover; }
.act-card .e { margin-top:16px; }
.act-card h4 { font-size:20px; margin-top:10px; line-height:1.18; }
.act-card .meta { font-family:var(--mono); font-size:12px; color:var(--muted); margin-top:8px; }

/* Actividad sin foto propia: bloque tipográfico en vez de una imagen de archivo
   que no sea del evento. Las barras evocan el isotipo. */
.act-card .img-ph { display:flex; align-items:center; justify-content:center;
  /* --green-tint queda a un punto de --paper y el bloque parecía transparente:
     el placeholder usa el tinte fuerte, que sí despega del fondo de página. */
  background-color: var(--green-tint-2);
  background-image: repeating-linear-gradient(90deg,
    color-mix(in srgb, var(--brand) 30%, transparent) 0 7px, transparent 7px 26px);
  filter:none; }
.act-card .img-ph span { font-family:var(--mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brand-2); background:var(--paper-2);
  border:1px solid var(--line); border-radius:999px; padding:7px 15px; }

/* --- FAEP destacado: dos tarjetas anchas arriba de la grilla ---------------- */
.act-feat-head { max-width:60ch; margin-bottom:30px; }
.act-feat-head p { font-family:var(--serif); font-size:18px; line-height:1.6; color:var(--ink-2); margin-top:16px; }

.act-feat-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:36px; }
@media (max-width:760px){ .act-feat-grid{ grid-template-columns:1fr; gap:44px; } }

/* Misma familia visual que .act-card (grayscale que se apaga en hover), pero con
   foto más grande, dato de escala y enlace real al detalle. */
.act-feat { cursor:pointer; }
.act-feat .img { aspect-ratio:16/10; border-radius:var(--r); overflow:hidden; background:var(--line); filter:grayscale(.3); transition:.2s; }
.act-feat:hover .img { filter:grayscale(0); }
.act-feat .img img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.act-feat:hover .img img { transform:scale(1.02); }
.act-feat .e { margin-top:20px; }
.act-feat h3 { font-size:clamp(22px,2.4vw,29px); line-height:1.14; margin-top:12px; }
.act-feat .meta { font-family:var(--mono); font-size:12.5px; color:var(--muted); margin-top:10px; }
.act-feat .scale { font-family:var(--mono); font-size:12.5px; color:var(--green); margin-top:4px; letter-spacing:.02em; }
.act-feat .act-go { display:inline-flex; align-items:center; gap:8px; margin-top:16px; font-family:var(--sans); font-weight:600; font-size:14px; color:var(--green); }
.act-feat:hover .act-go .arr { transform:translateX(3px); }
.act-feat .act-go .arr { transition:.18s; }

/* --- Detalle de actividad --------------------------------------------------- */
.act-hero { max-width:1080px; margin:44px auto 0; padding-inline:var(--pad); }
.act-hero img { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--r); display:block; }

.panel-block { border-top:1px solid var(--line); padding-top:26px; margin-top:34px; scroll-margin-top:90px; }
.panel-block .pb-when { font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--green); }
.panel-block h3 { font-family:var(--serif); font-size:23px; line-height:1.22; margin:10px 0 0; color:var(--ink); }
.panel-block > p { font-size:17px; margin-top:14px; }
.pb-oradores { list-style:none; padding:0; margin:18px 0 0; display:flex; flex-wrap:wrap; gap:10px; }
.pb-oradores li { font-family:var(--sans); font-size:14px; font-weight:500; color:var(--ink-2);
  background:var(--paper-2); border:1px solid var(--line); border-radius:999px; padding:7px 14px; margin:0;
  display:inline-flex; align-items:center; gap:8px; }
.pb-oradores li.is-cien { border-color:var(--brand); background:var(--green-tint); color:var(--green-deep); }
.chip-cien { font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; color:var(--brand-2); font-weight:700; }
.pb-modera { font-family:var(--mono); font-size:12.5px; color:var(--muted); margin-top:14px; }
.pb-video { display:inline-flex; align-items:center; gap:8px; margin-top:14px; font-family:var(--sans); font-weight:600; font-size:14px; color:var(--green); border-bottom:0; }

.resena-block { margin-top:34px; }
.resena-block h3 { font-family:var(--sans); font-weight:600; font-size:17px; letter-spacing:0;
  color:var(--green-deep); margin:0 0 14px; }
/* Aviso de procedencia: la crónica reconstruida no se puede confundir con la
   que escribieron los moderadores. */
.resena-nota { font-family:var(--sans); font-size:13.5px; line-height:1.5; color:var(--muted);
  background:var(--green-tint); border-left:2px solid var(--brand);
  padding:12px 16px; border-radius:0 var(--r) var(--r) 0; margin:0 0 16px; }

.adh-list { display:flex; flex-wrap:wrap; gap:9px; margin-top:8px; }
.adh { font-family:var(--mono); font-size:12px; color:var(--ink-2); background:var(--paper-2);
  border:1px solid var(--line); border-radius:999px; padding:6px 13px; }

.act-gallery { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:8px; }
@media (max-width:560px){ .act-gallery{ grid-template-columns:1fr; } }
.act-gallery .g { aspect-ratio:3/2; border-radius:var(--r); overflow:hidden; background:var(--line); }
.act-gallery .g img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.act-gallery .g:hover img { transform:scale(1.03); }

.media-row {
  display:grid; grid-template-columns: 120px 1fr auto auto; gap:28px; align-items:center;
  padding:22px 0; border-bottom:1px solid var(--line); transition:.15s;
}
/* El hover toma el color del medio (--m, que pone la fila). En reposo la lista
   queda igual que siempre: el color solo aparece al recorrerla, así que dos
   medios de tono parecido no se pisan nunca. Ojo: en teléfono no hay hover. */
.media-row{ --m: var(--brand); }
.media-row:hover{
  background: color-mix(in srgb, var(--m) 7%, var(--paper-2));
  box-shadow: inset 3px 0 0 var(--m);
  padding-inline:14px; margin-inline:-14px;
}
.media-row:hover .outlet,
.media-row:hover .media-go{ color: var(--m); }
.media-row .outlet { font-family:var(--serif); font-size:17px; color:var(--green-deep); }
.media-row .ttl { font-family:var(--sans); font-weight:500; font-size:17px; }
.media-row .d { font-family:var(--mono); font-size:12px; color:var(--muted); }
/* en mobile las tres columnas no entran (y el 1fr del medio arrastraba el
   min-content del título, desbordando la página entera): se apila. */
@media (max-width:760px){
  .media-row { grid-template-columns: minmax(0,1fr); gap: 8px; }
  .media-go { justify-self: start; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-foot { background: var(--green-deepest); color:#e7eadf; margin-top: clamp(60px,8vw,120px); }
.site-foot .top { padding: clamp(48px,7vw,84px) 0; display:grid; grid-template-columns: 1.6fr 1fr 1fr; gap:40px; }
.site-foot .lede { font-family:var(--serif); font-size: clamp(22px,2.6vw,30px); line-height:1.25; color:#fff; max-width: 20ch; }
.site-foot img.logo { width: 64px; margin-bottom: 24px; }
.site-foot h5 { font-family:var(--label); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#8ea6c6; margin:0 0 16px; font-weight:500; }
.site-foot a.fl { display:block; color:#ccd8ea; padding:5px 0; font-size:15px; }
.site-foot a.fl:hover { color:#fff; }

/* miembro / apoyo de Rethinking Economics */
.site-foot .member {
  border-top: 1px solid rgba(255,255,255,.13);
  padding: 30px 0;
  display: flex; align-items: center; gap: 24px;
}
.site-foot .member .re-logo {
  width: 58px; height: auto; flex: none; display: block;
  transition: transform .25s ease, filter .25s ease;
}
.site-foot .member a:hover .re-logo { transform: translateY(-2px); }
.site-foot .member h5 { margin: 0 0 6px; color:#8ea6c6; }
.site-foot .member p {
  margin: 0; color:#ccd8ea; font-size: 14.5px; line-height: 1.55; max-width: 70ch;
}
.site-foot .member p b { color:#fff; font-weight: 600; }
@media (max-width:640px){ .site-foot .member{ flex-direction: column; align-items: flex-start; gap: 16px; } }

.site-foot .bottom { border-top:1px solid rgba(255,255,255,.13); padding: 22px 0; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-family:var(--label); font-size:12px; color:#809abf; letter-spacing:.02em; }
@media (max-width:760px){ .site-foot .top{ grid-template-columns:1fr; gap:32px; } }

/* fade-in — resting state is fully visible; animation only enhances */
/* entrance fade removed — iframe environments freeze keyframes at frame 0,
   which would hide content. Resting state must always be visible. */
.fade { animation: none; opacity: 1; }
@keyframes fadeup { from { opacity:0; transform: translateY(14px); } to { opacity:1; transform:none; } }

/* reveal on scroll (fade-in con movimiento). Solo se aplica a elementos
   por DEBAJO del fold (JS agrega .reveal); el contenido visible nunca se oculta. */
.reveal { opacity:0; transform: translateY(26px); transition: opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; }
.reveal.is-in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal { opacity:1 !important; transform:none !important; transition:none; } }

/* enlace en filas de Medios */
.media-go { font-family:var(--sans); font-weight:600; font-size:14px; color:var(--green); display:inline-flex; align-items:center; gap:7px; white-space:nowrap; justify-self:end; }
.media-go svg { transition: transform .18s; }
.media-row:hover .media-go svg { transform: translate(2px,-2px); }

/* breadcrumb / back */
.crumb { font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--muted); display:inline-flex; gap:8px; align-items:center; padding:8px 0; }
.crumb a:hover{ color:var(--green); }
.backlink { font-family:var(--sans); font-weight:600; font-size:14px; color:var(--green); display:inline-flex; gap:8px; align-items:center; }
.backlink:hover .arr{ transform:translateX(-3px); } .backlink .arr{ transition:.18s; }