/* diegoperez.me: hoja compartida.
   Antes vivia dentro de index.html. Se extrajo al partir el sitio en varias
   paginas (raiz EN, /es/ ES y las notas de metodo): un solo archivo evita que
   el mundo visual se bifurque pagina por pagina.
   Las rutas son absolutas desde la raiz porque la hoja se carga desde
   /assets/site.css y desde subdirectorios de dos niveles. */

/* Libre Franklin: the Franklin Gothic lineage used in chart and government
   lettering. Self-hosted, no external requests. */
@font-face{font-family:"Libre Franklin";font-style:normal;font-weight:400;font-display:swap;
  src:url("/fonts/libre-franklin-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Libre Franklin";font-style:normal;font-weight:600;font-display:swap;
  src:url("/fonts/libre-franklin-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Libre Franklin";font-style:normal;font-weight:700;font-display:swap;
  src:url("/fonts/libre-franklin-latin-700-normal.woff2") format("woff2")}

:root{
  --deep:#fbfdfd;
  --shoal:#cfe3ec;
  --shoal-2:#a9cede;
  --ink:#14202a;
  --ink-2:#42565f;
  --ink-3:#5d6f77;
  --magenta:#bf0071;
  --rule:#9fb3bc;
  --hair:#c3d3da;
  --sans:"Libre Franklin",ui-sans-serif,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --num:ui-monospace,"SFMono-Regular","Cascadia Mono","Segoe UI Mono",Menlo,Consolas,monospace;
  --maxw:1180px;
  --t1:12px; --t2:15px; --t3:19px; --t4:24px; --t5:31px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:var(--shoal-2) var(--deep)}
body{margin:0;background:var(--deep);color:var(--ink);
  font-family:var(--sans);font-size:var(--t3);line-height:1.55;
  font-variant-numeric:tabular-nums;overflow-x:hidden}
::selection{background:var(--magenta);color:#fff}
:focus-visible{outline:2px solid var(--magenta);outline-offset:3px}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--deep)}
::-webkit-scrollbar-thumb{background:var(--shoal-2);border:3px solid var(--deep);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:var(--rule)}

.sheet{max-width:var(--maxw);margin:0 auto;padding:0 22px;position:relative}
@media(min-width:760px){.sheet{padding:0 40px}}
.sheet.narrow{max-width:820px}

.neatline{position:fixed;inset:14px;pointer-events:none;z-index:1}
.neatline svg{width:100%;height:100%;display:block}
.neatline rect.frame{fill:none;stroke:var(--rule);stroke-width:1}
.neatline line{stroke:var(--rule);stroke-width:1}
@media(max-width:820px){.neatline{display:none}}

.skip{position:absolute;left:-9999px}
.skip:focus{left:22px;top:12px;z-index:9;background:var(--ink);color:var(--deep);
  padding:10px 16px;font-size:var(--t2);text-decoration:none}

/* ── language toggle ─────────────────────────────────────────────────────── */
/* Ya no es un boton que oculta texto con CSS: cada idioma tiene su URL, asi que
   son enlaces reales y el que corresponde a la pagina actual va como <span>. */
.langbar{position:fixed;top:24px;right:22px;z-index:6;display:flex;border:1px solid var(--rule);background:var(--deep)}
@media(min-width:760px){.langbar{right:40px;top:34px}}
@media(min-width:820px){.langbar{right:46px}}
/* on a phone any pinned control ends up sitting on the copy; keep it in the
   flow at the top of the sheet, where it covers nothing */
@media(max-width:700px){.langbar{position:static;margin:20px 0 0 auto;width:max-content}}
.langbar a,.langbar span{display:block;padding:9px 15px;text-decoration:none;
  font-family:var(--sans);font-size:var(--t1);font-weight:600;letter-spacing:.18em;color:var(--ink-3);
  transition:background .15s ease,color .15s ease}
.langbar a + span,.langbar span + a,.langbar a + a{border-left:1px solid var(--hair)}
.langbar a:hover{color:var(--magenta)}
.langbar span[aria-current]{background:var(--ink);color:var(--deep)}

/* la barra de la cabecera de las subpaginas no va fija: ahi convive con el
   nombre y con la ruta de vuelta */
.masthead .langbar{position:static;top:auto;right:auto;margin:0}

/* ── lettering ───────────────────────────────────────────────────────────── */
h1,h2,h3{margin:0;font-weight:600;line-height:1.06}
.geoname{text-transform:uppercase;letter-spacing:.28em;font-weight:600;font-size:var(--t1);color:var(--ink-2)}
.sounding{font-family:var(--num);font-size:var(--t1);color:var(--ink-3);letter-spacing:.02em}
.hydro{font-style:italic;color:var(--ink-2)}
p{margin:0 0 1.1em;max-width:66ch}
a{color:var(--ink);text-decoration-color:var(--magenta);text-underline-offset:4px;text-decoration-thickness:1.5px}
a:hover{color:var(--magenta)}

/* ── title block ─────────────────────────────────────────────────────────── */
header{padding:22px 0 44px}
@media(min-width:701px){header{padding:96px 0 60px}}
@media(min-width:760px){header{padding:120px 0 72px}}
.cartouche{border:1px solid var(--rule);background:rgba(251,253,253,.9);position:relative;
  padding:26px;display:grid;grid-template-columns:1fr;gap:30px}
@media(min-width:760px){.cartouche{padding:42px;gap:42px}}
@media(min-width:900px){.cartouche{grid-template-columns:minmax(0,1fr) 296px;align-items:start}}
.cartouche::after{content:"";position:absolute;inset:5px;border:1px solid var(--hair);pointer-events:none}
.blurb{order:2}
.portrait{order:1;position:relative}
@media(min-width:900px){.blurb{order:1}.portrait{order:2}}

h1{font-size:40px;letter-spacing:-.035em;line-height:1}
@media(min-width:760px){h1{font-size:66px}}
@media(min-width:1100px){h1{font-size:76px}}
.sub{font-size:var(--t2);letter-spacing:.24em;text-transform:uppercase;
  font-weight:600;color:var(--ink-2);margin:18px 0 0;line-height:1.3}
@media(min-width:760px){.sub{font-size:var(--t3);letter-spacing:.28em}}
.scalebar{display:flex;align-items:center;gap:14px;margin:24px 0 22px;color:var(--ink-3);flex-wrap:wrap}
.scalebar svg{display:block}
.lede{font-size:var(--t3);line-height:1.5;max-width:44ch;margin:0}
@media(min-width:760px){.lede{font-size:var(--t4);line-height:1.45}}
.lede b{font-weight:700;color:var(--ink)}

/* portrait plate: a photograph inset on the sheet */
.plate{display:block;border:1px solid var(--rule);overflow:hidden;background:var(--shoal);
  aspect-ratio:852/1100}
.plate img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block;
  transform:scale(1.07);transition:transform .5s cubic-bezier(.16,1,.3,1)}
.portrait:hover .plate img{transform:scale(1)}
@media(prefers-reduced-motion:reduce){.plate img{transition:none}}
.compass{position:absolute;left:-16px;bottom:-16px;width:78px;height:78px;
  background:var(--deep);border-radius:50%;padding:5px}
@media(min-width:900px){.compass{width:92px;height:92px;left:-22px;bottom:-22px}}

/* ── sections ────────────────────────────────────────────────────────────── */
section{padding:54px 0}
@media(min-width:760px){section{padding:88px 0}}
.secthead{display:flex;align-items:baseline;gap:16px;margin-bottom:30px;flex-wrap:wrap}
.secthead h2{font-size:var(--t4);letter-spacing:-.02em}
@media(min-width:760px){.secthead h2{font-size:var(--t5)}.secthead{margin-bottom:38px}}
.secthead .rule{flex:1;min-width:24px;height:1px;background:var(--hair)}

/* what I build */
.builds{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:700px){.builds{grid-template-columns:1fr 1fr}}
.bd{padding:26px 0;border-top:1px solid var(--hair)}
@media(min-width:700px){
  .bd{padding:28px 30px 32px}
  .bd:nth-child(odd){padding-left:0}
  .bd:nth-child(even){padding-right:0;border-left:1px solid var(--hair)}
}
.bd h3{font-size:var(--t3);letter-spacing:-.01em;margin-bottom:.5em}
.bd p{font-size:var(--t2);color:var(--ink-2);margin:0;max-width:52ch}

/* experience */
.leg{display:grid;grid-template-columns:1fr;gap:4px;padding:24px 0;border-top:1px solid var(--hair)}
@media(min-width:700px){.leg{grid-template-columns:110px 1fr;gap:36px;padding:28px 0}}
.leg:last-of-type{border-bottom:1px solid var(--hair)}
.leg .yr{font-family:var(--num);font-size:var(--t1);color:var(--ink-3);padding-top:7px;letter-spacing:.02em}
.leg h3{font-size:var(--t3);letter-spacing:-.01em}
.leg .org{display:block;font-weight:600;color:var(--ink-2);font-size:var(--t2);margin-top:.3em}
.leg p{font-size:var(--t2);color:var(--ink-2);margin:.7em 0 0}
.leg.live .yr::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--magenta);margin-left:9px;vertical-align:.1em}

/* the control band */
.control{background:var(--shoal);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  margin-top:52px;padding:48px 0}
@media(min-width:760px){.control{padding:84px 0;margin-top:76px}}
.control .inner{max-width:var(--maxw);margin:0 auto;padding:0 22px;
  display:grid;grid-template-columns:1fr;gap:32px}
@media(min-width:760px){.control .inner{padding:0 40px;gap:52px}}
@media(min-width:900px){.control .inner{grid-template-columns:1fr 1.05fr;align-items:center}}
.control h2{font-size:var(--t4);letter-spacing:-.02em;margin-bottom:.7em}
.control p{color:#243740;font-size:var(--t3)}
.plot{width:100%;height:auto;display:block}
.trackline{animation:draw 2.2s cubic-bezier(.22,1,.3,1) .3s both}
@keyframes draw{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.trackline{animation:none;stroke-dashoffset:0}}

/* how to read it: the legend, next to the thing it explains */
.legend{margin-top:26px;border-top:1px solid var(--rule);padding-top:16px}
.legend h3{font-size:var(--t1);text-transform:uppercase;letter-spacing:.26em;color:#3b535e;font-weight:600;margin-bottom:12px}
.legend ul{margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:9px}
@media(min-width:520px){.legend ul{grid-template-columns:1fr 1fr}}
.legend li{display:flex;align-items:center;gap:11px;list-style:none;font-size:var(--t2);color:#243740}
.legend .sym{flex:0 0 22px;height:12px;display:block}

/* background + contact */
footer{padding:54px 0 82px}
@media(min-width:760px){footer{padding:88px 0 118px}}
.colophon{display:grid;grid-template-columns:1fr;gap:34px}
@media(min-width:820px){.colophon{grid-template-columns:1.15fr 1fr;gap:52px}}
.colophon dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:11px 22px;font-size:var(--t2)}
.colophon dt{color:var(--ink-3);font-family:var(--num);font-size:var(--t1);padding-top:3px;letter-spacing:.03em}
.colophon dd{margin:0;color:var(--ink-2)}
.hail{border:1px solid var(--rule);padding:28px;background:rgba(207,227,236,.42);align-self:start}
@media(min-width:760px){.hail{padding:34px}}
.hail h2{font-size:var(--t4);letter-spacing:-.02em;margin-bottom:.6em}
.hail p{font-size:var(--t2);color:var(--ink-2)}
.hail a.primary{display:inline-block;margin-top:8px;padding:14px 26px;background:var(--ink);color:var(--deep);
  text-decoration:none;font-size:var(--t2);letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  border:1px solid var(--ink);transition:background .18s ease,border-color .18s ease,box-shadow .18s ease}
.hail a.primary:hover{background:var(--magenta);border-color:var(--magenta);color:#fff;
  box-shadow:0 6px 18px rgba(191,0,113,.24)}

/* ── sailing directions: el indice de notas de metodo ────────────────────── */
/* Un indice de lectura, no un blog. Filas con filete, la misma gramatica que
   .leg y .bd: sin tarjetas, sin sombras. */
.pilot{display:block}
.pilot .row{display:grid;grid-template-columns:1fr;gap:6px;padding:26px 0;
  border-top:1px solid var(--hair);text-decoration:none;color:var(--ink)}
@media(min-width:700px){.pilot .row{grid-template-columns:78px 1fr;gap:34px;padding:30px 0}}
.pilot .row:last-child{border-bottom:1px solid var(--hair)}
.pilot .row:hover{background:rgba(207,227,236,.3)}
.pilot .row:hover h2,.pilot .row:hover h3{color:var(--magenta)}
.pilot .num{font-family:var(--num);font-size:var(--t1);color:var(--ink-3);padding-top:7px;letter-spacing:.06em}
.pilot h2,.pilot h3{font-size:var(--t4);letter-spacing:-.02em;transition:color .15s ease}
@media(max-width:699px){.pilot h2,.pilot h3{font-size:var(--t3)}}
.pilot p{font-size:var(--t2);color:var(--ink-2);margin:.6em 0 0;max-width:62ch}

/* ── cabecera de subpagina ───────────────────────────────────────────────── */
.masthead{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 0 0;flex-wrap:wrap}
@media(min-width:760px){.masthead{padding:38px 0 0}}
.wordmark{font-size:var(--t3);font-weight:700;letter-spacing:-.02em;text-decoration:none;color:var(--ink)}
.wordmark:hover{color:var(--magenta)}
.wordmark .rank{display:block;font-size:var(--t1);font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-3);margin-top:.3em}

/* ── prosa de las notas ──────────────────────────────────────────────────── */
.article{padding:44px 0 0}
@media(min-width:760px){.article{padding:76px 0 0}}
.crumb{font-size:var(--t1);letter-spacing:.22em;text-transform:uppercase;font-weight:600;
  color:var(--ink-3);text-decoration:none;display:inline-block;margin-bottom:26px}
.crumb:hover{color:var(--magenta)}
.article h1{font-size:32px;letter-spacing:-.03em;line-height:1.08;max-width:30ch}
@media(min-width:760px){.article h1{font-size:46px}}
.pubmeta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:22px 0 0;
  padding-bottom:26px;border-bottom:1px solid var(--rule)}
.standfirst{font-size:var(--t3);line-height:1.5;color:var(--ink-2);max-width:56ch;margin:30px 0 0}
@media(min-width:760px){.standfirst{font-size:var(--t4);line-height:1.45}}
.prose{padding:0 0 20px}
.prose h2{font-size:var(--t4);letter-spacing:-.02em;margin:2.1em 0 .8em;max-width:34ch}
@media(min-width:760px){.prose h2{font-size:var(--t5)}}
.prose h2:first-child{margin-top:1.4em}
.prose h3{font-size:var(--t3);letter-spacing:-.01em;margin:1.7em 0 .5em}
.prose p{font-size:var(--t3);max-width:64ch}
.prose ul,.prose ol{max-width:64ch;padding-left:1.15em;margin:0 0 1.1em}
.prose li{margin-bottom:.55em}
.prose li::marker{color:var(--magenta)}
.prose strong{font-weight:700}
.prose .aside{border-left:2px solid var(--magenta);padding:2px 0 2px 20px;margin:1.8em 0;
  font-size:var(--t2);color:var(--ink-2);max-width:60ch}
.prose .aside p{font-size:var(--t2);margin-bottom:.6em}
.prose .aside p:last-child{margin-bottom:0}

/* pie de nota: siguiente lectura y contacto, con el mismo filete */
.nextup{border-top:1px solid var(--rule);padding-top:30px;margin-top:52px}
.nextup .geoname{display:block;margin-bottom:18px}

/* ── 404 ─────────────────────────────────────────────────────────────────── */
.lost{min-height:62vh;display:flex;flex-direction:column;justify-content:center;padding:80px 0}
.lost h1{font-size:34px;letter-spacing:-.03em;max-width:24ch}
@media(min-width:760px){.lost h1{font-size:52px}}
.lost p{margin-top:22px;color:var(--ink-2);max-width:52ch}
.lost .sounding{display:block;margin-bottom:20px}