/* ===== Lechon Baboy — shared zine stylesheet (blog/guide pages) ===== */
:root{
  --paper:#F5EDD8;--card:#FFFDF6;--ink:#1E1A14;--ink-2:#6A5F4F;
  --orange:#F2521B;--orange-d:#D2400C;--green:#1F8A50;--green-d:#16633A;
  --yellow:#FFC42E;--pink:#FF3E7A;--teal:#159A8E;
  --line:rgba(30,26,20,.16);--sh:5px 5px 0 var(--ink);--sh-sm:3px 3px 0 var(--ink);
  --maxw:920px;--ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:15.5px;line-height:1.64;-webkit-font-smoothing:antialiased}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.06;background-image:radial-gradient(var(--ink) 1px,transparent 1.5px);background-size:7px 7px}
::selection{background:var(--yellow)}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
a{color:var(--orange-d);text-decoration:none;font-weight:600}a:hover{text-decoration:underline}
em{font-family:"Newsreader",serif;font-style:italic}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.wide{max-width:1080px}
h1,h2,h3{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;line-height:1.05;letter-spacing:-.02em}
.kick{font-family:"Hanken Grotesk";font-weight:800;font-size:.66rem;letter-spacing:.3em;text-transform:uppercase}
.issue{background:var(--ink);color:var(--paper);font-family:"Hanken Grotesk";font-weight:700;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;text-align:center;padding:7px 12px}
.issue b{color:var(--yellow)}
/* nav */
header.nav{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:2px solid var(--ink)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:62px;max-width:1140px;margin:0 auto;padding:0 24px;gap:12px;flex-wrap:wrap}
.brand{font-family:"Bricolage Grotesque";font-weight:800;font-size:1.3rem;letter-spacing:-.03em}
.brand .b{color:var(--orange)}
.nav-links{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.nav-links a{color:var(--ink);font-weight:600;font-size:.9rem}.nav-links a:hover{color:var(--orange-d);text-decoration:none}
/* buttons */
.btn{padding:11px 20px;border:2px solid var(--ink);background:var(--orange);color:#fff;font-family:"Bricolage Grotesque";font-weight:700;font-size:.9rem;box-shadow:var(--sh-sm);transition:transform .12s var(--ease),box-shadow .12s;display:inline-flex;gap:8px;cursor:pointer}
.btn:hover{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink);text-decoration:none}
.btn-2{background:var(--paper);color:var(--ink)}
/* page hero */
.phero{color:#fff;border-bottom:2px solid var(--ink);padding:clamp(2.2rem,5vw,3.6rem) 0}
.phero.o{background:var(--orange)}.phero.g{background:var(--green)}.phero.t{background:var(--teal)}.phero.p{background:var(--pink)}.phero.k{background:var(--ink)}.phero.y{background:var(--yellow);color:var(--ink)}
.phero .kick{color:var(--yellow)}.phero.y .kick{color:var(--orange-d)}
.phero h1{font-size:clamp(2.2rem,5.5vw,3.7rem);margin-top:.4rem;text-shadow:4px 4px 0 rgba(30,26,20,.22)}
.phero.y h1{text-shadow:4px 4px 0 rgba(30,26,20,.18)}
.phero p{margin-top:.8rem;max-width:56ch;font-size:1.05rem;opacity:.96}
.crumb{font-size:.8rem;font-weight:600;opacity:.85;margin-bottom:.5rem}
.crumb a{color:#fff}.phero.y .crumb a{color:var(--ink)}
/* image slot */
.imgslot{position:relative;width:100%;object-fit:cover;border:2px solid var(--ink);box-shadow:var(--sh-sm);background:repeating-linear-gradient(45deg,#ece2c6,#ece2c6 10px,#e7dcbd 10px,#e7dcbd 20px);aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;margin:1.8rem 0}
.imgslot span{font-family:"Bricolage Grotesque";font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);background:var(--paper);border:2px dashed var(--ink-2);padding:7px 13px}
/* article body */
main{padding:clamp(2.2rem,4.5vw,3.4rem) 0}
.lead{font-size:1.1rem;color:var(--ink-2);max-width:64ch;margin-bottom:1.6rem}
.prose h2{font-size:clamp(1.45rem,3vw,2rem);margin:2.4rem 0 .8rem}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.18rem;margin:1.4rem 0 .4rem}
.prose p{margin-bottom:1rem;color:var(--ink-2)}
.prose p strong,.prose li strong{color:var(--ink)}
.prose ul,.prose ol{margin:0 0 1.1rem;padding-left:0;list-style:none;display:grid;gap:9px}
.prose li{padding-left:18px;position:relative;color:var(--ink-2)}
.prose ul li::before{content:"›";position:absolute;left:0;color:var(--orange);font-weight:800}
.prose ol{counter-reset:n}
.prose ol li{counter-increment:n}
.prose ol li::before{content:counter(n);position:absolute;left:0;top:1px;color:var(--orange-d);font-family:"Bricolage Grotesque";font-weight:800;font-size:.9rem}
/* devices */
.tell{border-left:4px solid var(--orange);padding:2px 0 2px 18px;margin:1.4rem 0}
.tell h3{font-size:1.18rem;margin:0 0 5px}
.tell p{color:var(--ink-2)}
.card{background:var(--card);border:2px solid var(--ink);box-shadow:var(--sh-sm);padding:20px 24px;margin:1.4rem 0;transform:rotate(var(--t,-.3deg))}
.card.alt{--t:.3deg}.card.y{background:var(--yellow)}
.card .sticker{margin-bottom:10px}
.callout{background:var(--card);border:2px solid var(--ink);box-shadow:var(--sh-sm);padding:18px 22px;display:flex;gap:16px;align-items:flex-start;margin:1.8rem 0;transform:rotate(-.3deg)}
.callout p{font-size:.92rem;color:var(--ink-2)}.callout b{color:var(--ink)}
.sticker{display:inline-flex;align-items:center;gap:6px;font-family:"Bricolage Grotesque";font-weight:800;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;border:2px solid var(--ink);background:var(--yellow);color:var(--ink);padding:6px 12px;border-radius:999px;box-shadow:var(--sh-sm);flex:none}
.sticker.g{background:var(--green);color:#fff}.sticker.o{background:var(--orange);color:#fff}.sticker.p{background:var(--pink);color:#fff}.sticker.t{background:var(--teal);color:#fff}
.dishes{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:1.2rem 0}
.dish{background:var(--card);border:2px solid var(--ink);box-shadow:var(--sh-sm);padding:18px 20px;transform:rotate(var(--tilt,0deg))}
.dish:nth-child(odd){--tilt:-.4deg}.dish:nth-child(even){--tilt:.4deg}
.dish h3{font-size:1.06rem;margin:0 0 6px;color:var(--orange-d)}
.dish p{font-size:.88rem;color:var(--ink-2)}
.grp{margin:2.2rem 0}
.grp h2{font-size:clamp(1.45rem,3vw,2rem);margin-bottom:1rem}
table.cmp{width:100%;border-collapse:collapse;border:2px solid var(--ink);box-shadow:var(--sh-sm);margin:1.4rem 0;background:var(--card);font-size:.9rem}
table.cmp th,table.cmp td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
table.cmp th{background:var(--ink);color:var(--paper);font-family:"Bricolage Grotesque";font-weight:700;font-size:.82rem}
table.cmp tr:nth-child(even) td{background:#fbf6e9}
blockquote{border-left:4px solid var(--pink);padding:6px 0 6px 18px;margin:1.4rem 0;font-family:"Newsreader",serif;font-style:italic;font-size:1.2rem;color:var(--ink)}
.cta{margin-top:2.4rem;display:flex;gap:12px;flex-wrap:wrap}
.related{margin-top:2.4rem;border-top:2px dashed var(--line);padding-top:1.6rem}
.related h2{font-size:1.2rem;margin-bottom:.8rem}
.related a{display:inline-block;margin:0 14px 8px 0}
/* footer */
footer{border-top:2px solid var(--ink);background:var(--ink);color:var(--paper);padding:2.4rem 0 1.6rem;margin-top:2.4rem}
.foot-brand{font-family:"Bricolage Grotesque";font-weight:800;font-size:1.4rem;letter-spacing:-.03em;text-shadow:3px 3px 0 var(--orange)}
.foot-brand .b{color:var(--orange)}
footer p.tag{color:rgba(244,236,216,.8);font-size:.88rem;margin-top:10px;max-width:48ch}
.foot-base{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;border-top:1px solid rgba(244,236,216,.2);padding-top:1.4rem;margin-top:1.6rem;font-size:.78rem;color:rgba(244,236,216,.6)}
.foot-base a{color:rgba(244,236,216,.85)}
@media(max-width:760px){.dishes{grid-template-columns:1fr}}


/* ===== byline (E-E-A-T) ===== */
.byline{font-size:.8rem;font-weight:600;color:var(--ink-2);margin:-.6rem 0 1.4rem;letter-spacing:.01em}
.byline b{color:var(--ink)}
/* ===== printable checklist ===== */
.chk{list-style:none;margin:1.2rem 0}
.chk li{padding:10px 12px 10px 40px;position:relative;border:2px solid var(--ink);background:var(--card);box-shadow:var(--sh-sm);margin-bottom:10px;color:var(--ink)}
.chk li::before{content:"";position:absolute;left:12px;top:11px;width:16px;height:16px;border:2px solid var(--ink);background:var(--paper)}
.printbar{display:flex;gap:10px;flex-wrap:wrap;margin:1.4rem 0}
@media print{.issue,header.nav,.phero .kick,.crumb,.printbar,footer{display:none!important}.phero{color:var(--ink)!important;background:#fff!important;padding:0 0 1rem}.phero h1{text-shadow:none}body::after{display:none}.imgslot{display:none}}

/* always-visible language toggle + social share */
.nav-end{display:flex;align-items:center;gap:10px}
.nav-in>.nav-links{margin-left:auto}
.lang-btn{display:inline-flex;align-items:center;gap:5px;border:2px solid var(--ink,#1E1A14);background:var(--yellow,#FFC42E);color:var(--ink,#1E1A14);font-weight:800;font-size:.68rem;letter-spacing:.03em;text-transform:uppercase;padding:6px 10px;box-shadow:2px 2px 0 var(--ink,#1E1A14);cursor:pointer;text-decoration:none;white-space:nowrap;line-height:1;margin-right:auto;position:relative;animation:navGlow 1.9s ease-in-out infinite}
.lang-btn::before{content:"🌐"}
.lang-btn:hover{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink,#1E1A14)}
.share-row{max-width:720px;margin:2.6rem auto 0;padding:0 1.25rem;text-align:center}
.share-row .sh-k{display:block;font:800 .7rem/1 'Hanken Grotesk',system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2,#6b6253);margin-bottom:.7rem}
.share-row .row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.share-row .sh{display:inline-flex;align-items:center;gap:6px;font:800 .82rem/1 'Hanken Grotesk',system-ui,sans-serif;padding:9px 14px;border:2px solid var(--ink,#1E1A14);background:var(--card,#FFFDF7);color:var(--ink,#1E1A14);cursor:pointer;box-shadow:2px 2px 0 var(--ink,#1E1A14);text-decoration:none;transition:transform .12s}
.share-row .sh:hover{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink,#1E1A14)}

/* pop-art conyo-tito switch beside the page title */
.tito-switch{display:inline-flex;align-items:center;gap:8px;margin:14px 0 4px;font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:800;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;color:#1E1A14;background:#FFC42E;border:3px solid #1E1A14;padding:10px 16px;text-decoration:none;box-shadow:4px 4px 0 #1E1A14;cursor:pointer;position:relative;transition:transform .12s;animation:titoGlow 1.7s ease-in-out infinite}
.tito-switch::before{content:"\1F5E3\FE0F";font-size:1rem}
.tito-switch::after{content:"NEW";position:absolute;top:-12px;right:-12px;background:#FF3E7A;color:#fff;border:2px solid #1E1A14;font-size:.55rem;font-weight:800;letter-spacing:.05em;padding:2px 5px;transform:rotate(8deg)}
.tito-switch:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 #1E1A14;animation:none}
@keyframes titoGlow{0%,100%{box-shadow:4px 4px 0 #1E1A14,0 0 0 0 rgba(255,62,122,0)}50%{box-shadow:4px 4px 0 #1E1A14,0 0 16px 3px rgba(255,62,122,.55)}}
@media(prefers-reduced-motion:reduce){.tito-switch{animation:none}}

@keyframes navGlow{0%,100%{box-shadow:2px 2px 0 var(--ink,#1E1A14),0 0 0 0 rgba(255,62,122,0)}50%{box-shadow:2px 2px 0 var(--ink,#1E1A14),0 0 12px 2px rgba(255,62,122,.55)}}@media(prefers-reduced-motion:reduce){.lang-btn{animation:none}}