/* La Libreta — shared article layout (magazine/editorial)
 * Load AFTER ../../styles.css. Text column + right figure rail (desktop ≥1100px),
 * full-width stacking on mobile. Classes: .fig-side .fig-left .fig-full .stat-aside
 * .pull .honesty .post-cta — see the sin-verduras post as the reference implementation. */

.post-page{background:var(--ink);color:var(--bg);min-height:100svh;display:flex;flex-direction:column;}
.post-nav{display:flex;justify-content:space-between;align-items:center;padding:20px var(--pad);
  border-bottom:1px solid #F4EFE625;color:var(--bg);}
.post-nav .back{font-family:var(--mono);font-size:12px;letter-spacing:.15em;font-weight:600;}
.post-nav .back:hover{color:var(--acid);}
.post-nav .brand-sm{font-family:var(--display);font-size:20px;letter-spacing:-.01em;}
.post-nav .brand-sm span{color:var(--acid);}

/* wide main: 66ch text column + ~370px right rail */
.post-main{flex:1;width:100%;max-width:1150px;margin:0 auto;padding:clamp(48px,8vw,88px) var(--pad) 72px;}
.post-kick{display:flex;justify-content:space-between;font-family:var(--mono);font-size:12px;
  letter-spacing:.22em;font-weight:600;color:var(--acid);margin-bottom:20px;}
.post-kick .dim{color:var(--bg);opacity:.5;}
/* .95 min line-height: Spanish accented caps (É Ó Ú) collide with the line above at .85 */
h1.post-title{font-family:var(--display);font-size:clamp(46px,10vw,120px);line-height:.95;
  letter-spacing:-.012em;text-transform:uppercase;margin:0 0 16px;max-width:12em;}
h1.post-title .acid{color:var(--acid);}
.post-sub{font-size:clamp(16px,1.9vw,20px);opacity:.85;max-width:34em;margin-bottom:22px;}
.post-meta{font-family:var(--mono);font-size:11px;letter-spacing:.2em;font-weight:600;opacity:.6;
  padding-bottom:28px;margin-bottom:clamp(28px,5vw,44px);border-bottom:1px solid #F4EFE625;}

.post-body{max-width:66ch;font-size:clamp(17px,1.8vw,18px);line-height:1.7;color:#F4EFE6;position:relative;}
.post-body p{margin:0 0 22px;opacity:.9;}
.post-body strong{font-weight:700;}
.post-body .acid{color:var(--acid);}
.post-body a{text-decoration:underline;text-underline-offset:3px;}
.post-body a:hover{color:var(--acid);}
.post-body h2{font-family:var(--display);font-size:clamp(28px,5vw,44px);line-height:.95;
  letter-spacing:-.008em;text-transform:uppercase;margin:clamp(36px,6vw,52px) 0 18px;opacity:1;clear:both;}
.post-body h3{font-size:17px;font-weight:700;margin:26px 0 8px;}
.post-body ul{margin:0 0 22px;padding-left:22px;opacity:.9;}
.post-body li{margin-bottom:10px;}

/* drop cap on the opening paragraph */
.post-body > p:first-of-type::first-letter{
  font-family:var(--display);font-size:3.6em;line-height:.78;float:left;
  color:var(--acid);padding:4px 14px 0 0;}

/* ── figures ── */
.post-fig{margin:clamp(30px,5vw,42px) 0;}
.post-fig img{width:100%;height:auto;display:block;border-radius:10px;}
.post-fig figcaption{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  opacity:.6;margin-top:10px;line-height:1.5;}

/* stat callout (aside) */
.stat-aside{border:1px solid #F4EFE630;border-radius:14px;padding:20px 22px;margin:clamp(30px,5vw,42px) 0;}
.stat-aside .s-kick{font-family:var(--mono);font-size:10px;letter-spacing:.22em;font-weight:700;
  color:var(--acid);margin-bottom:12px;}
.stat-aside .s-row{display:flex;justify-content:space-between;align-items:baseline;
  padding:9px 0;border-bottom:1px solid #F4EFE618;}
.stat-aside .s-row:last-child{border-bottom:none;}
.stat-aside .s-n{font-family:var(--display);font-size:30px;letter-spacing:-.005em;color:var(--bg);}
.stat-aside .s-n.acid{color:var(--acid);}
.stat-aside .s-l{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.6;text-align:right;}

/* ── magazine breakouts (desktop) ── */
@media(min-width:1100px){
  .fig-side{float:right;clear:right;width:330px;margin:6px -382px 26px 30px;}
  .fig-side img{max-height:440px;object-fit:cover;object-position:center 22%;}
  .stat-aside.fig-side{margin-top:2px;}
  .fig-left{float:left;clear:left;width:250px;margin:6px 30px 22px -90px;}
  .fig-left img{max-height:330px;object-fit:cover;}
  .fig-full{width:calc(100% + 382px);}
  .pull{width:calc(100% + 160px);}
}

.pull{border-left:4px solid var(--acid);padding:6px 0 6px 22px;margin:clamp(32px,5vw,44px) 0;clear:both;}
.pull p{font-family:var(--display);font-size:clamp(26px,4.5vw,38px);line-height:1.02;letter-spacing:-.005em;
  text-transform:uppercase;color:var(--acid);margin:0;opacity:1;}

.honesty{border:1px solid #F4EFE640;border-radius:14px;padding:20px 22px;margin:clamp(32px,5vw,44px) 0;
  font-size:14px;line-height:1.6;opacity:.9;clear:both;}
.honesty .h-kick{font-family:var(--mono);font-size:10px;letter-spacing:.22em;font-weight:700;
  color:var(--amber);margin-bottom:8px;}

.post-cta{display:block;border:1px solid var(--acid);border-radius:16px;padding:26px 24px;
  margin:clamp(36px,6vw,52px) 0 0;transition:background .2s,color .2s;clear:both;text-decoration:none;}
.post-body a.post-cta{text-decoration:none;}
.post-cta .c-kick{font-family:var(--mono);font-size:11px;letter-spacing:.22em;font-weight:600;
  color:var(--acid);margin-bottom:10px;}
.post-cta .c-title{font-family:var(--display);font-size:clamp(26px,4.5vw,40px);line-height:.95;
  letter-spacing:-.008em;text-transform:uppercase;}
.post-cta .c-sub{font-size:14px;opacity:.75;margin-top:8px;}
.post-cta:hover{background:var(--acid);}
.post-cta:hover .c-kick,.post-cta:hover .c-title,.post-cta:hover .c-sub{color:var(--ink);}

.post-foot{padding:22px var(--pad);border-top:1px solid #F4EFE625;display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;opacity:.75;}
.post-foot a:hover{color:var(--acid);}

/* reveal on scroll (JS adds .in; no-JS stays visible via .no-reveal fallback below) */
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .5s ease-out,transform .5s ease-out;}
[data-reveal].in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none;}}
.no-js [data-reveal]{opacity:1;transform:none;}

@media print{
  .post-page{background:#fff;color:#0E0E0E;}
  .post-body{color:#0E0E0E;max-width:none;}
  .post-nav,.post-cta,.post-foot{display:none;}
  .pull p{color:#0E0E0E;}
  .fig-side,.fig-left{float:none;width:100%;margin:20px 0;}
}