/* Shared page styles: book pages (A5, cqw-scaled) and mobile cards. Used by the book and the editor. */
/* ===== PAGE (A5, sized in cqw so it scales like paper) — same styles as the book ===== */
.page{position:absolute;inset:0;overflow:hidden;background-color:var(--paper);color:var(--ink);container-type:inline-size;font-family:var(--f-body)}
.pin{position:absolute;left:0;top:0;width:calc(100% / var(--k,1));height:calc(100% / var(--k,1));transform:scale(var(--k,1));transform-origin:0 0;box-sizing:border-box;padding:8.6cqw 7.5cqw 9cqw;font-size:2.55cqw;line-height:1.42;display:flex;flex-direction:column;gap:2.4cqw}
.pin>*{flex-shrink:0}
.page h2{font-family:var(--f-display);font-weight:900;font-size:7.4cqw;line-height:.98;margin:0;letter-spacing:-.01em;text-wrap:balance}
.page h3{font-family:var(--f-display);font-weight:700;font-size:2.3cqw;letter-spacing:.16em;text-transform:uppercase;color:var(--olive);margin:0 0 1.2cqw}
.cat{font:700 2cqw var(--f-ui);letter-spacing:.18em;text-transform:uppercase;color:var(--red)}
.meta{display:flex;flex-wrap:wrap;gap:1.4cqw;font:700 2cqw var(--f-ui);color:var(--soft)}
.meta span{border:.25cqw solid var(--rule);border-radius:9cqw;padding:.5cqw 2cqw}
.quote{font-family:var(--f-hand);font-size:4.7cqw;line-height:1.05;color:var(--hand-ink);margin:0;padding-left:3cqw;border-left:.5cqw solid var(--mustard)}
.ing{list-style:none;margin:0;padding:0}
.ing li{display:grid;grid-template-columns:13cqw 1fr;gap:1.5cqw;padding:.55cqw 0;border-bottom:.2cqw dotted var(--rule)}
.ing b{font-family:var(--f-ui);font-size:.9em;font-variant-numeric:tabular-nums;color:var(--olive)}
.ing.cols{columns:2;column-gap:5cqw}.ing.cols li{break-inside:avoid}
.steps{margin:0;padding:0;list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:1.5cqw}
.steps li{counter-increment:s;display:grid;grid-template-columns:5cqw 1fr;gap:1cqw}
.steps li::before{content:counter(s);font:900 3.6cqw/1 var(--f-display);color:var(--mustard)}
.steps li>div{display:flex;flex-direction:column;gap:1.2cqw;min-width:0}
.steps.wide li.hp>div{display:grid;grid-template-columns:1fr 30cqw;gap:2.6cqw;align-items:start}
.sfig{margin:0;display:flex;flex-direction:column;gap:.8cqw}
.sim{aspect-ratio:4/3;border-radius:1cqw;background:#e9e2d2 center/cover no-repeat}
.sim.empty{display:flex;align-items:center;justify-content:center;border:.35cqw dashed #b9ad95;background:repeating-linear-gradient(45deg,#f1ead8 0 1.4cqw,#ebe3cf 1.4cqw 2.8cqw);font:700 1.7cqw var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:#7f735f;text-align:center}
.sfig figcaption{font:2.9cqw/1.05 var(--f-hand);color:var(--hand-ink)}
.tip{background:#f1ead8;border-radius:1.5cqw;padding:2.4cqw 3cqw;font-size:.95em}
.tip strong{font:700 2cqw var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--red);display:block;margin-bottom:.6cqw}
.two{display:grid;grid-template-columns:1fr 1.25fr;gap:4cqw;min-height:0}
.ph{position:relative;overflow:hidden;border-radius:1.2cqw;background:#d9cfbd center/cover no-repeat}
.ph.empty{display:flex;align-items:center;justify-content:center;border:.35cqw dashed #b9ad95;background:repeating-linear-gradient(45deg,#f1ead8 0 1.4cqw,#ebe3cf 1.4cqw 2.8cqw);font:700 1.9cqw var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:#7f735f}
.halfrec{display:flex;flex-direction:column;gap:1.6cqw;font-size:2.1cqw;flex:0 0 auto}
.halfrec .hd{display:grid;grid-template-columns:22cqw 1fr;gap:3.5cqw;align-items:center}
.halfrec .ph{aspect-ratio:1;border-radius:50%}
.halfrec h2{font-size:5.6cqw}
.halfrec .quote{font-size:3.9cqw}
.halfrec .two{grid-template-columns:1fr 1.2fr;gap:3cqw}
.halfrec .ing li{grid-template-columns:10cqw 1fr;padding:.3cqw 0}
.halfrec .steps{gap:.8cqw}
.halfrec .steps li{grid-template-columns:4cqw 1fr}
.halfrec .steps li::before{font-size:3cqw}
.otra{flex:0 0 42%;border:.35cqw dashed var(--rule);border-radius:1.5cqw;display:flex;align-items:center;justify-content:center;font:700 1.9cqw var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--soft);text-align:center;padding:4cqw}
.az{position:absolute;left:0;right:0;top:0;height:4.6cqw;background-repeat:repeat-x;background-size:4.6cqw 4.6cqw;background-position:center;z-index:1;pointer-events:none;border-bottom:.45cqw solid var(--a)}
.mi{width:1.25em;height:1.25em;flex:none;color:var(--olive)}
.meta span{display:inline-flex;align-items:center;gap:.5em}
.meta span:nth-child(2){color:var(--ink);border-color:var(--mustard);background:#f6ecd2}
.meta span:nth-child(2) .mi{color:var(--red)}
.mem{border-top:.3cqw solid var(--rule);border-bottom:.3cqw solid var(--rule);padding:1.8cqw 0;font-style:italic;font-size:.95em;color:var(--ink)}
.mem .qq{display:block;font:2.9cqw/1.1 var(--f-hand);font-style:normal;color:var(--hand-ink);margin-bottom:.6cqw}
.m-body .mem .qq{font-size:1.25rem}
.askq{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--warn-bg);color:var(--warn-ink);border-radius:12px;padding:10px 12px}
.askq p{margin:0;flex:1;min-width:12rem;font:700 1.05rem/1.3 var(--f-display)}
.askq small{display:block;font:800 .7rem var(--f-ui);letter-spacing:.12em;text-transform:uppercase;margin-bottom:2px}
.mem strong{display:block;font:700 2cqw var(--f-ui);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--olive);margin-bottom:.6cqw}
.m-body .mem{border-width:1px;padding:10px 0}.m-body .mem strong{font-size:.72rem}
.ab-ph{aspect-ratio:1;width:40cqw;border-radius:50%;background:#d9cfbd center/cover no-repeat;box-shadow:0 0 0 1.2cqw var(--mustard);align-self:center}
.ab-ph.empty{display:flex;align-items:center;justify-content:center;font:700 1.9cqw var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:#7f735f;background:repeating-linear-gradient(45deg,#f1ead8 0 1.4cqw,#ebe3cf 1.4cqw 2.8cqw)}
.ab-txt{margin:0;white-space:pre-line}
.ab-txt.eg{color:#9a8f7c;font-style:italic}
.gal{display:grid;grid-template-columns:1fr 1fr;gap:3cqw}
.gal figure{margin:0;display:flex;flex-direction:column;gap:1cqw}
.gal .frame{aspect-ratio:4/5;background:#e9e2d2 center/cover no-repeat;border:1.6cqw solid #7a5a36;box-shadow:inset 0 0 0 .5cqw #c9a96e,0 1cqw 2cqw rgba(0,0,0,.25)}
.gal .frame.empty{display:flex;align-items:center;justify-content:center;text-align:center;font:700 1.7cqw var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:#7f735f;background:repeating-linear-gradient(45deg,#f1ead8 0 1.4cqw,#ebe3cf 1.4cqw 2.8cqw)}
.gal figcaption{font:3cqw/1.05 var(--f-hand);color:var(--hand-ink);text-align:center}
.m-body .gal{gap:12px}.m-body .gal .frame{border-width:6px}.m-body .gal figcaption{font-size:1.2rem}
.rlist .about-btn{font-family:var(--f-display);font-weight:700}
.pcard{display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:10px;align-items:center;border:1px solid var(--line-ui);border-radius:12px;padding:10px}
.pcard .thumb{aspect-ratio:4/5}
@media (max-width:899px){.pcard{grid-template-columns:90px minmax(0,1fr)}.pcard .sctl{grid-column:1/-1}}
#measure{position:fixed;left:-10000px;top:0;width:600px;height:849px;visibility:hidden;pointer-events:none}

/* mobile card preview */
.m-rec{background:var(--paper);color:var(--ink);border-radius:16px;overflow:hidden;font-family:var(--f-body);font-size:1rem;line-height:1.5;max-width:400px;margin:0 auto;width:100%}
.m-rec>.ph{aspect-ratio:4/3;border-radius:0}
.m-rec .ph.empty{font-size:.75rem}
.m-body{padding:18px 18px 22px;display:flex;flex-direction:column;gap:14px}
.m-body .cat{font-size:.72rem}
.m-body h2{font:900 2rem/1 var(--f-display);margin:2px 0 0;text-wrap:balance}
.m-body .meta{font-size:.78rem;gap:6px}
.m-body .meta span{border-width:1px;padding:3px 10px}
.m-body .quote{font-size:1.55rem;padding-left:12px;border-left-width:3px}
.m-body h3{font:700 .8rem var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:var(--olive);margin:6px 0 4px}
.m-body .ing li{grid-template-columns:5.5rem 1fr;gap:8px;padding:6px 0;border-bottom-width:1px}
.m-body .steps{gap:12px}
.m-body .steps li{grid-template-columns:1.8rem 1fr;gap:6px}
.m-body .steps li::before{font-size:1.4rem}
.m-body .steps li>div{gap:8px}
.m-body .sim{border-radius:8px}
.m-body .sim.empty{font-size:.7rem;border-width:2px}
.m-body .sfig figcaption{font-size:1.3rem}
.m-body .tip{border-radius:10px;padding:12px 14px}
.m-body .tip strong{font-size:.72rem}