/* Sonicaster · cuaderno. Tokens first; DESIGN.md explains every choice. */
:root {
  color-scheme: light dark;
  --paper: #efeadf; --ink: #16130f; --muted: #6d675c; --a: #9c5600; --hl: #f08a00; --mark-ink: #16130f;
  --c: #156fa5; --pencil: #66625b; --line: #cfc7b6; --scrap: #f6f2ea;
  --photo-paper: #efeadf; --photo-ink: #16130f;
  --tape: rgb(217 207 168 / .7); --dot: rgb(22 19 15 / .11); --blend: multiply; --grano-op: .18;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --hand: "Bradley Hand", "Segoe Print", "Chalkboard SE", cursive;
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0b0d14; --ink: #ece6d8; --muted: #8c8a80; --a: #ffb547; --hl: #ffb547; --mark-ink: #0b0d14;
    --c: #5cc8ff; --pencil: #9a968c; --line: #2a2f3d; --scrap: #141824;
    --photo-paper: #ece6d8; --photo-ink: #0b0d14;
    --tape: rgb(236 230 216 / .16); --dot: rgb(236 230 216 / .09); --blend: screen; --grano-op: .1;
  }
}

/* paper */
* { box-sizing: border-box; }
html { background: var(--paper); }
body {
  margin: 0; color: var(--ink); background-color: var(--paper);
  background-image: radial-gradient(var(--dot) .7px, transparent .9px);
  background-size: 18px 18px; background-position: 9px 9px;
  font: 17px/1.55 var(--serif); -webkit-font-smoothing: antialiased;
}
body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: var(--grano); mix-blend-mode: var(--blend); opacity: var(--grano-op); }
.hoja { position: relative; z-index: 1; max-width: 72rem; margin: 0 auto; padding: 1.25rem 1rem 4rem; }
a { color: inherit; text-decoration-color: color-mix(in srgb, var(--c) 70%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--a); outline-offset: 3px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* masthead and nav */
header.site { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem 1.25rem; border-bottom: 2px solid var(--ink); padding-bottom: .6rem; margin-bottom: 2rem; }
.mast { font: 900 clamp(1.6rem, 4vw, 2.2rem)/.8 var(--sans); letter-spacing: -.055em; text-transform: uppercase; text-decoration: none; color: var(--ink); white-space: nowrap; }
.portada .mast { font-size: clamp(2.3rem, 10.5vw, 7rem); filter: url(#sangrado); text-shadow: 2px 1px 0 color-mix(in srgb, var(--c) 75%, transparent), -1px -1px 0 color-mix(in srgb, var(--hl) 65%, transparent); }
.mast-lado { display: flex; flex-direction: column; gap: .4rem; padding-bottom: .3rem; }
.tag { display: inline-block; align-self: flex-start; background: var(--ink); color: var(--paper); font: 700 .62rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; padding: .3rem .5rem; transform: rotate(-1deg); }
.aparte-mast { font: 1.05rem var(--hand); color: var(--a); transform: rotate(-4deg); transform-origin: left; }
header.site nav { margin-left: auto; display: flex; gap: 1rem; font: 700 .7rem var(--mono); letter-spacing: .14em; text-transform: uppercase; }
header.site nav a { color: var(--muted); text-decoration: none; }
header.site nav a:hover, header.site nav a[aria-current] { color: var(--a); }

/* type */
.kick { font: 700 .68rem/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--a); margin: 0 0 .3rem; }
.titular { font: 900 clamp(1.7rem, 4.6vw, 3rem)/.95 var(--sans); text-transform: uppercase; letter-spacing: -.025em; margin: .2rem 0 .7rem; text-wrap: balance; }
.titular a { text-decoration: none; }
.dek { font: 1.05rem/1.45 var(--sans); color: var(--muted); max-width: 36rem; margin: 0 0 1rem; }
.mono, .src { font: .78rem var(--mono); color: var(--muted); }
.hand { font-family: var(--hand); color: var(--pencil); }
h1, h2, h3 { font-family: var(--sans); }
.seccion { font: 700 .72rem var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 2.5rem 0 .6rem; }
mark { color: var(--mark-ink); background: linear-gradient(transparent 12%, var(--hl) 12% 88%, transparent 88%); padding: 0 .12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* body text */
.cuerpo { max-width: 38rem; font-size: 1.06rem; overflow-wrap: anywhere; }
.cuerpo p, .cuerpo ul, .cuerpo ol { margin: 0 0 1.1em; }
.cuerpo h2, .cuerpo h3, .cuerpo h4 { font: 900 1.15rem/1.2 var(--sans); text-transform: uppercase; margin: 1.8em 0 .5em; }
.cuerpo a { text-decoration-style: wavy; }
.cuerpo img, .cuerpo video, .cuerpo iframe { max-width: 100%; height: auto; }
.cuerpo img { display: block; margin: .5rem 0; filter: grayscale(1) contrast(1.3); }
.cuerpo blockquote { margin: 1.2em 0; padding-left: 1rem; border-left: 2px solid var(--c); color: var(--muted); font-style: italic; }
.cuerpo pre { overflow-x: auto; padding: .75rem; background: var(--scrap); font: .85rem var(--mono); }
.cuerpo table { display: block; overflow-x: auto; max-width: 100%; }
.cuerpo hr { border: 0; width: 90px; height: 16px; margin: 2rem auto; background: var(--pencil);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 22'%3E%3Cpath fill='none' stroke='black' stroke-width='1.6' d='M0,20 L2.2,12.6 L5.5,7.4 L10.5,2.9 L16.7,.3 L20,0 L23.3,.3 L29.5,2.9 L34.5,7.4 L37.8,12.6 L40,20 L42.2,12.6 L45.5,7.4 L50.5,2.9 L56.7,.3 L60,0 L63.3,.3 L69.5,2.9 L74.5,7.4 L77.8,12.6 L80,20 L82.2,12.6 L85.5,7.4 L90.5,2.9 L96.7,.3 L100,0 L103.3,.3 L109.5,2.9 L114.5,7.4 L117.8,12.6 L120,20'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 22'%3E%3Cpath fill='none' stroke='black' stroke-width='1.6' d='M0,20 L2.2,12.6 L5.5,7.4 L10.5,2.9 L16.7,.3 L20,0 L23.3,.3 L29.5,2.9 L34.5,7.4 L37.8,12.6 L40,20 L42.2,12.6 L45.5,7.4 L50.5,2.9 L56.7,.3 L60,0 L63.3,.3 L69.5,2.9 L74.5,7.4 L77.8,12.6 L80,20 L82.2,12.6 L85.5,7.4 L90.5,2.9 L96.7,.3 L100,0 L103.3,.3 L109.5,2.9 L114.5,7.4 L117.8,12.6 L120,20'/%3E%3C/svg%3E") center / contain no-repeat; }
.fin { color: var(--a); margin: .5rem 0 0; }
.rueda { width: 1em; height: 1em; vertical-align: -.15em; }
figure.wp-caption { margin: 1rem 0; max-width: 100%; }
figure.wp-caption figcaption { font: .95rem var(--hand); color: var(--pencil); }
.embed iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: .5rem; }

/* lists */
.filas { list-style: none; padding: 0; margin: 0; counter-reset: n; }
.filas li { display: grid; grid-template-columns: 6.5rem 1fr auto; gap: .75rem; align-items: baseline; padding: .45rem 0; border-bottom: 1px dotted var(--line); font: 1rem/1.35 var(--sans); }
.filas .fecha { font: .72rem var(--mono); color: var(--muted); }
.filas .fmt { font: 700 .62rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--a); }
.filas a { text-decoration: none; }
.filas a:hover { text-decoration: underline wavy var(--c); }
.numeradas li { counter-increment: n; grid-template-columns: 2rem 1fr; border-bottom: 0; border-top: 2px solid var(--ink); font-weight: 700; }
.numeradas li::before { content: counter(n, decimal-leading-zero); font: 800 .8rem var(--mono); color: var(--a); }
.numeradas .src { display: block; font-weight: 400; margin-top: .1rem; }
.valoracion { display: inline-flex; gap: .2rem; color: var(--a); } .valoracion .vacia { color: var(--line); }
.pager, .prevnext { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; padding-top: .6rem; border-top: 1px dashed var(--line); font: .78rem var(--mono); color: var(--muted); }

/* scraps, tape, stamps, sketches */
.recorte { display: flow-root; position: relative; padding: 1.2rem 1.3rem 1.4rem; background: var(--scrap); transform: rotate(-1deg); box-shadow: 0 1px 0 rgb(0 0 0 / .25); }
.sello { display: inline-block; border: 2px solid var(--a); color: var(--a); font: 800 .7rem var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: .25rem .5rem; transform: rotate(7deg); filter: url(#aspero); }
.boceto { color: var(--pencil); width: 20rem; max-width: 100%; height: auto; filter: url(#lapiz); overflow: visible; }
.boceto text { font: 10px var(--hand); fill: currentColor; }
.boceto .punto { fill: var(--a); }
.cicloide { display: block; width: 100%; height: clamp(60px, 15vw, 72px); overflow: visible; }
.cicloide .lapiz { filter: url(#lapiz); fill: none; stroke: var(--pencil); stroke-width: 1.1; }
.cicloide .lapiz * { vector-effect: non-scaling-stroke; }
.cicloide .t-men { opacity: .55; }
.cicloide .punto, .cicloide .marca { fill: var(--a); }
.cicloide .marca { stroke: none; }
@media (max-width: 34rem) { .cicloide .formula { display: none; } }
.cicloide .formula { font: 11px var(--hand); fill: var(--pencil); }

/* comments ("cartas") */
.cartas { max-width: 38rem; margin-top: 3rem; }
.cartas h2 { font: 900 1.1rem var(--sans); text-transform: uppercase; }
ol.comments { list-style: none; padding-left: 0; }
ol.comments ol.comments { padding-left: 1.25rem; border-left: 2px solid var(--line); }
li.comment { margin: 1rem 0; }
li.comment .meta { font: .75rem var(--mono); color: var(--muted); }
li.comment .body p { margin: .3rem 0; }
.closed { font: .75rem var(--mono); color: var(--muted); }

/* footer */
footer.site { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin-top: 4rem; padding-top: 1rem; border-top: 2px solid var(--ink); font: .72rem var(--mono); color: var(--muted); }
footer.site .rueda { color: var(--a); width: 1.4em; height: 1.4em; }
footer.site a { color: inherit; }

/* dithered prints */
.impreso { position: relative; margin: 1.5rem 0; transform: rotate(var(--giro, -1deg)); }
.impreso::before { content: ""; position: absolute; z-index: 2; top: -.55rem; left: 40%; width: 4rem; height: 1.1rem; background: var(--tape); transform: rotate(3deg); }
.impreso .capas { position: relative; display: block; background: var(--photo-paper); }
.impreso .capa { position: absolute; inset: 0; -webkit-mask: var(--m) center / 100% 100% no-repeat; mask: var(--m) center / 100% 100% no-repeat; }
.impreso .trama { background: var(--c); transform: translate(3px, 2px); opacity: .5; mix-blend-mode: multiply; }
.impreso .tinta { background: var(--photo-ink); }
.impreso .crudo img { display: block; width: 100%; height: auto; filter: grayscale(1) contrast(1.4); }
.impreso figcaption { text-align: right; margin-top: .3rem; font-size: .95rem; }

/* posts */
.post { max-width: 52rem; }
.crumbs { margin-bottom: 1rem; }
.crumbs a { color: inherit; }
.resena-cab { display: grid; gap: 1.5rem; align-items: start; }
.resena-cab > .kick { grid-column: 1 / -1; margin: 0; }
@media (min-width: 40rem) { .resena-cab:has(.impreso) { grid-template-columns: 17rem 1fr; } .resena-cab .impreso { margin: .5rem 0 0; --giro: -2deg; } }
.resena-cab .impreso { margin-top: .5rem; }
.ficha { margin: 0 0 1rem; padding: .8rem 1rem; background: var(--scrap); border: 1px dashed var(--pencil); max-width: 30rem; }
.ficha div { display: grid; grid-template-columns: 8rem 1fr; gap: .75rem; padding: .25rem 0; border-bottom: 1px dotted var(--line); }
.ficha div:last-child { border-bottom: 0; }
.ficha dt { font: 700 .66rem/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ficha dd { margin: 0; font: 1rem/1.4 var(--sans); overflow-wrap: anywhere; }
.nota-rueda { margin: 0 0 .8rem; font-size: 1.3rem; }
.lista-oir { margin: 0; padding-left: 1.2rem; max-width: 38rem; }
.lista-oir li { margin: .15rem 0; }
.donde { margin-top: 1.5rem; }
:is(.largo, .resena) .cuerpo > p:first-child:not(:has(img))::first-letter, :is(.largo, .resena) .cuerpo > p:first-child:has(img) + p::first-letter { float: left; font: 900 3.4em/.8 var(--sans); color: var(--a); margin: .06em .1em 0 0; }
.largo .cuerpo blockquote:has(> p > strong:only-child) { font: 900 1.3rem/1.15 var(--sans); font-style: normal; text-transform: uppercase; color: var(--ink); border: 0; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); padding: .6rem 0; }
.largo .cuerpo blockquote:has(> p > strong:only-child) strong { color: var(--mark-ink); background: linear-gradient(transparent 12%, var(--hl) 12% 88%, transparent 88%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.cuerpo .footnote-definition { font: 1.05rem/1.3 var(--hand); color: var(--pencil); margin: .2rem 0 1.1rem; padding-left: 1rem; border-left: 1px dashed var(--line); }
.cuerpo .footnote-definition p { display: inline; margin: 0; }
.footnote-reference a, .footnote-definition-label { font: 700 .7rem var(--mono); color: var(--a); text-decoration: none; }
@media (min-width: 64rem) {
  .largo .cuerpo .footnote-definition { float: right; clear: right; width: 12rem; margin: 0 -14rem 1rem 0; padding: 0; border: 0; transform: rotate(-2deg); }
}
.temas { margin-top: 1.5rem; }
.temas a { text-decoration: none; margin-right: .4rem; }
.relacionados { max-width: 38rem; }

/* portada */
.portada-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 60rem) {
  .portada-grid { grid-template-columns: 1.35fr 1fr .9fr; grid-template-areas: "recorte recorte col" "reciente reciente reciente"; }
  .portada-grid > .recorte { grid-area: recorte; }
  .portada-grid > .portada-col { grid-area: col; } .portada-grid > .reciente { grid-area: reciente; }
}
.reciente .seccion:first-child { margin-top: 0; }
.resenas-pila { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.mini { display: grid; grid-template-columns: 5.5rem 1fr; gap: .9rem; align-items: start; padding-top: .7rem; border-top: 2px solid var(--ink); }
.mini:not(:has(.impreso)) { grid-template-columns: 1fr; }
.mini .impreso { margin: .3rem 0 0; --giro: -2deg; }
.mini .impreso::before { width: 2.2rem; height: .7rem; top: -.4rem; }
.mini-texto p, .pila-item p { margin: 0 0 .2rem; }
.nombre { font: 700 1rem/1.25 var(--sans); }
.nombre a { text-decoration: none; }
.nombre a:hover { text-decoration: underline wavy var(--c); }
.veredicto { font: .92rem/1.35 var(--sans); color: var(--muted); }
.todas { margin: 1rem 0 0; } .todas a { text-decoration: none; font-size: 1.05rem; }
.filas li.reciente .t a { text-decoration: none; }
.filas li.reciente.nota { padding: .25rem 0; font-size: .95rem; }
.reciente.nota .dom { font: .72rem var(--mono); color: var(--muted); }
.parrafo { font: 700 .85rem var(--mono); color: var(--a); padding: .2rem .45rem; text-decoration: none; }
.parrafo:hover, .parrafo:focus-visible { text-decoration: underline; }
.filas li.reciente.largo { padding: .6rem 0; }
.reciente.largo .t > a { font: 700 1rem/1.35 var(--sans); }
.reciente .snippet { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-size: .92rem; line-height: 1.4; color: var(--muted); }
@media (min-width: 40.01rem) {
  .reciente-ancho .filas li { grid-template-columns: 6.5rem minmax(0, 65ch) 1fr; gap: .75rem 1.5rem; }
  .reciente-ancho .filas .fmt { justify-self: end; }
}
.reciente.largo .min { font: .72rem var(--mono); color: var(--muted); }
.reciente.resena .t em { font-style: italic; }
.seguir-p { margin: 0; }
.seguir { font-size: 1.1rem; text-decoration: none; }
.seguir:hover, .seguir:focus-visible { text-decoration: underline; }
.portada-grid .seccion:first-child { margin-top: 0; }
.recorte .impreso { --giro: 2deg; margin: 0 0 1rem; }
@media (min-width: 60rem) { .recorte .impreso { float: right; width: 45%; margin: .2rem 0 .8rem 1.3rem; shape-outside: margin-box; } }
.pie-portada { margin-top: 3rem; }
.archivo-p { margin: .4rem 0 0; text-align: right; }
.pie-portada a { text-decoration: none; font-size: 1.05rem; }

/* la pila (formato/resena) */
.pila { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 2rem 1.25rem; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
.pila-item .impreso { margin: .4rem 0 .8rem; --giro: -1.5deg; }
.pila-item:nth-child(even) .impreso { --giro: 1.5deg; }
.papel { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 9rem; margin: .4rem 0 .8rem; padding: 1rem; background: var(--scrap); border: 1px dashed var(--pencil); font: 800 1rem/1.2 var(--sans); text-decoration: none; overflow-wrap: anywhere; }
.papel:hover { border-color: var(--a); }

/* archivo */
.calendario { display: grid; grid-template-columns: 3rem repeat(12, minmax(0, 1fr)); gap: .3rem .35rem; align-items: end; margin: .5rem 0 2rem; }
.calendario .cab { font: .65rem var(--mono); color: var(--muted); text-align: center; }
.calendario .anio { font: 800 .8rem var(--mono); color: var(--a); align-self: center; }
.calendario .mes { display: flex; flex-wrap: wrap-reverse; gap: 2px; min-height: .5rem; padding-bottom: 3px; border-bottom: 1px solid var(--line); text-decoration: none; }
.calendario .mes i { width: 4px; height: 4px; border-radius: 50%; background: var(--ink); }
.calendario a.mes:hover i, .calendario a.mes:focus-visible i { background: var(--a); }
.anio-titulo { font: 900 2rem var(--sans); margin: 2.5rem 0 0; color: var(--a); }
/* temas */
.tema-cab { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.tema { font: 900 clamp(2rem, 7vw, 3.4rem)/1 var(--sans); text-transform: uppercase; letter-spacing: -.04em; margin: 0; overflow-wrap: anywhere; }
.tema small { font-size: .4em; color: var(--muted); }
.nube { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: baseline; }
.nube a { font-family: var(--sans); font-weight: 700; text-decoration: none; }
.nube a:hover { color: var(--a); }
.nube .mono { font-size: .65rem; }
@media (max-width: 40rem) { .calendario { grid-template-columns: 2.4rem repeat(12, minmax(0, 1fr)); gap: .25rem .2rem; } .calendario .mes i { width: 3px; height: 3px; } }

@media (max-width: 40rem) {
  body { font-size: 16px; }
  header.site nav { margin-left: 0; }
  .filas li { grid-template-columns: 4.8rem 1fr; }
  .filas .fmt { grid-column: 2; }
  .pager, .prevnext { flex-direction: column; }
}