/* Estilos del blog: las cuatro paginas (/blog/, /en/blog/ y cada articulo)
   comparten este archivo ademas de /tokens.css. El header es el mismo sistema
   que /fractional/ y /projects/ (marca -> nav -> idioma, dos filas explicitas en
   telefono); si cambia alla, cambia aca.

   A diferencia de /projects/ y /fractional/, cada pagina del blog lleva UN solo
   idioma en el DOM: el articulo en ingles es una adaptacion, no una traduccion,
   asi que no hay par generado. El toggle de idioma es un link a la otra URL. */

.topbar{position:sticky;top:0;z-index:50;background:var(--bone);border-bottom:1px solid var(--rule);}
.topbar .row{max-width:1180px;margin:0 auto;padding:1.1rem 6vw;display:flex;justify-content:space-between;align-items:baseline;gap:1rem 1.6rem;flex-wrap:wrap;}
.topbar .mast{font-family:var(--sans);font-weight:700;letter-spacing:.04em;font-size:.9rem;color:var(--ink);text-decoration:none;}
.topbar .mast:hover{color:var(--wine);}
.topbar .right{display:flex;gap:1.6rem;align-items:baseline;font-family:var(--sans);font-size:.78rem;letter-spacing:.04em;}
.topbar .nav{display:flex;gap:1.2rem;align-items:baseline;}
.topbar .nav a{color:var(--ink-soft);text-decoration:none;border-bottom:2px solid transparent;padding-bottom:.15rem;}
.topbar .nav a:hover{color:var(--wine);}
.topbar .nav a[aria-current]{color:var(--wine);border-bottom-color:var(--wine);}
@media(max-width:520px){
  .topbar .right{display:contents;}
  .topbar .row{display:grid;grid-template-columns:1fr auto;gap:.55rem 1rem;}
  .topbar .mast{grid-area:1/1;}
  .topbar .lang{grid-area:1/2;justify-self:end;}
  .topbar .nav{grid-area:2/1/3/3;gap:1rem;}
  .topbar .nav a{white-space:nowrap;}
}
.lang{display:flex;gap:.15rem;align-items:baseline;}
.lang .sep{opacity:.4;}
.lang a{color:var(--ink-soft);text-decoration:none;}
.lang a:hover{color:var(--wine);}
.lang a[aria-current]{color:var(--wine);font-weight:700;}

/* El nav sale de tools/nav.mjs con las etiquetas en los dos idiomas; la clase
   del <body> elige cual se ve, igual que en las otras paginas estaticas. */
[data-lang]{display:none;}
body.en [data-lang="en"]{display:revert;}
body.es [data-lang="es"]{display:revert;}

/* ---------- indice ---------- */
.head{padding:8vh 0 4vh;}
.head h1{font-size:clamp(2.6rem,6vw,4.6rem);line-height:1.02;font-weight:500;letter-spacing:-.02em;margin:1rem 0 0;}
.head .lede{font-size:clamp(1.1rem,1.8vw,1.35rem);color:var(--ink-soft);max-width:54ch;margin-top:1.4rem;}
.posts{list-style:none;margin:0;padding:0 0 8vh;}
.posts li{border-top:1px solid var(--rule);padding:4vh 0;}
.posts .meta{font-family:var(--sans);font-size:.78rem;letter-spacing:.06em;color:var(--wine-soft);text-transform:uppercase;}
.posts h2{font-size:clamp(1.5rem,2.8vw,2.1rem);font-weight:500;letter-spacing:-.015em;margin:.6rem 0 0;line-height:1.15;}
.posts h2 a{color:var(--ink);text-decoration:none;}
.posts h2 a:hover{color:var(--wine);}
.posts p{font-size:1.05rem;color:var(--ink-soft);line-height:1.6;max-width:62ch;margin:.9rem 0 0;}

/* ---------- articulo ---------- */
.post{max-width:68ch;padding:7vh 0 6vh;}
.post .eyebrow a{color:inherit;text-decoration:none;}
.post .eyebrow a:hover{text-decoration:underline;}
.post h1{font-size:clamp(2.2rem,5vw,3.8rem);line-height:1.05;font-weight:500;letter-spacing:-.02em;margin:1rem 0 0;}
.post .lede{font-size:clamp(1.15rem,1.9vw,1.4rem);color:var(--ink-soft);line-height:1.5;margin:1.6rem 0 0;}
.post .byline{font-family:var(--sans);font-size:.85rem;color:var(--ink-soft);margin-top:1.6rem;}
.post .byline a{color:var(--wine);text-decoration:none;}
.post h2{font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:500;letter-spacing:-.015em;line-height:1.2;margin:3.2rem 0 0;}
.post p,.post li{font-size:1.12rem;line-height:1.68;}
.post p{margin:1.1rem 0 0;}
.post ul,.post ol{margin:1.1rem 0 0;padding-left:1.4rem;}
.post li{margin:.55rem 0 0;}
.post li::marker{color:var(--wine-soft);}
.post a{color:var(--wine);text-decoration-thickness:1px;text-underline-offset:3px;}
.post a:hover{color:var(--ink);}
.post code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;
  background:rgba(110,36,51,.07);padding:.1em .35em;border-radius:3px;}
.post pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88rem;line-height:1.6;
  background:var(--ink);color:var(--bone);padding:1rem 1.2rem;border-radius:6px;overflow-x:auto;margin:1rem 0 0;}
.post pre code{background:none;padding:0;font-size:inherit;color:inherit;}
.post .facts{border-left:3px solid var(--wine);padding:.2rem 0 .2rem 1.2rem;margin:1.6rem 0 0;}
.post .facts li{font-size:1.05rem;}
.post .todo{counter-reset:t;list-style:none;padding:0;}
.post .todo > li{counter-increment:t;position:relative;padding-left:2.6rem;margin-top:1.4rem;}
.post .todo > li::before{content:counter(t,decimal-leading-zero);position:absolute;left:0;top:.2rem;
  font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.14em;color:var(--wine-soft);}
.post .sources{border-top:1px solid var(--rule);margin-top:3.6rem;padding-top:1.6rem;}
.post .sources h2{font-family:var(--sans);font-size:.78rem;text-transform:uppercase;letter-spacing:.2em;font-weight:600;color:var(--wine);margin:0;}
.post .sources li,.post .sources p{font-family:var(--sans);font-size:.88rem;line-height:1.55;color:var(--ink-soft);}
.post .sources p{margin-top:.9rem;}

footer{border-top:1px solid var(--rule);padding:4vh 0 7vh;font-family:var(--sans);font-size:.8rem;color:var(--ink-soft);}
footer .wrap{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;}
footer a{color:var(--wine);text-decoration:none;}
footer a:hover{text-decoration:underline;}