/*
Theme Name: Anclate
Theme URI: https://anclate.com
Author: Anclate Studios
Description: Tema de la comedia animada Anclate. Portada estilo cartelera, episodios en video con reproductor emergente, página de todos los videos del canal de YouTube y formulario de contacto.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: anclatte
Tags: entertainment, custom-menu, custom-logo, featured-images, translation-ready
*/

:root{
  /* diseño nuevo */
  --white:#fff; --ink:#141416; --gray:#6e6e73; --hair:#e8e8ea; --mist:#f5f5f6; --accent:#c14a34;
  --font:"Manrope",system-ui,-apple-system,Helvetica,Arial,sans-serif;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --col:960px; --ease:cubic-bezier(.4,0,.2,1);
  /* tokens heredados (páginas de personajes / contenido) */
  --ink-soft:#544F5E; --teal:#4D9C99; --red:#B04B39; --red-dark:#913328;
  --green:#709B5B; --orange:#F79936; --tangerine:#F26C39; --purple:#8D5E94;
  --peach:#E9A877; --cream:#FBF6EE; --paper:#FFFDF8;
  --line:3px solid var(--ink); --pop:6px 6px 0 var(--ink); --pop-sm:4px 4px 0 var(--ink);
  --display:"Baloo 2",system-ui,sans-serif; --body:"Nunito Sans",system-ui,sans-serif; --util:"Space Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; color-scheme:light}
body{margin:0; background:var(--white); color:var(--ink); font-family:var(--font); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px}
.cap{text-transform:uppercase; letter-spacing:.2em; font-weight:600}

/* ================= HEADER ================= */
.hdr{position:sticky; top:0; z-index:100; background:#fff; border-bottom:1px solid var(--hair)}
.hdr .in{max-width:1440px; margin:0 auto; padding:0 40px; height:70px; display:flex; align-items:center; justify-content:space-between}
.brand{font-family:var(--font); font-weight:800; font-size:27px; letter-spacing:.005em; color:var(--ink)}
.brand img{width:auto; height:34px}
.hdr nav{display:flex; gap:40px; align-items:center}
.hdr nav a{font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:var(--ink); opacity:.85; transition:opacity .2s, color .2s}
.hdr nav a:hover{opacity:1; color:var(--accent)}
.hdr nav li{list-style:none} .hdr nav ul{display:flex; gap:40px; align-items:center; margin:0; padding:0}
.nav-toggle{display:none; flex-direction:column; justify-content:center; gap:5px; width:42px; height:42px; padding:9px; margin-right:-9px; background:none; border:0; cursor:pointer}
.nav-toggle span{display:block; width:100%; height:2px; background:var(--ink); border-radius:2px; transition:transform .25s var(--ease), opacity .2s}
.hdr.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hdr.nav-open .nav-toggle span:nth-child(2){opacity:0}
.hdr.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:760px){
  .hdr .in{padding:0 22px}
  .nav-toggle{display:flex}
  .hdr nav{position:absolute; top:100%; left:0; right:0; display:none; flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border-bottom:1px solid var(--hair); padding:6px 22px 14px; box-shadow:0 18px 34px rgba(0,0,0,.08)}
  .hdr.nav-open nav{display:flex}
  .hdr nav ul{flex-direction:column; align-items:stretch; gap:0; width:100%}
  .hdr nav a{font-size:14px; padding:13px 0; width:100%; border-bottom:1px solid var(--hair)}
  .hdr nav a:last-child, .hdr nav li:last-child a{border-bottom:0}
}

/* ================= HERO ================= */
.hero-wrap{position:relative; overflow:hidden; padding:52px 0; border-bottom:1px solid rgba(18,26,14,.3)}
.hero-wrap .hero-bg{position:absolute; inset:0; z-index:0; background-position:center; background-size:cover; background-repeat:no-repeat; filter:brightness(.78) saturate(1.05)}
.hero-wrap .hero-bg::after{content:""; position:absolute; inset:0; background:radial-gradient(130% 130% at 50% 45%, rgba(0,0,0,0) 52%, rgba(0,0,0,.24) 100%)}
.hero-stage{position:relative; z-index:1; width:min(940px,92%); margin:0 auto; aspect-ratio:16/9; cursor:pointer}
.hero-stage .hero-img{position:absolute; inset:0; background-position:center; background-size:cover; background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(180deg,transparent 0,#000 10%,#000 90%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(180deg,transparent 0,#000 10%,#000 90%,transparent 100%);
  mask-composite:intersect}
.hero-stage .copy{position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; justify-content:center; padding:0 clamp(28px,6%,72px); max-width:66%}
.hero-stage .studio-credit{align-self:flex-start; font-family:var(--font); font-weight:700; font-size:clamp(13px,1.4vw,16px); letter-spacing:.16em; text-transform:uppercase; color:#fff; opacity:.95; margin-bottom:12px; text-shadow:0 2px 10px rgba(0,0,0,.65)}
.hero-stage h1{font-family:"Luckiest Guy",var(--font); font-weight:400; font-size:clamp(44px,7vw,90px); line-height:.98; letter-spacing:.005em; color:#fff; -webkit-text-stroke:5px #17130f; paint-order:stroke fill; text-shadow:6px 7px 0 rgba(23,19,15,.42); margin:0}
@media(max-width:640px){
  .hero-wrap{padding:26px 0}
  .hero-stage{width:100%; aspect-ratio:4/5}
  .hero-stage .hero-img{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%); -webkit-mask-composite:source-over; mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%); mask-composite:add}
  .hero-stage .copy{justify-content:flex-end; max-width:100%; padding:0 22px 26px}
}

/* ================= MOSAICO / BANNERS ================= */
.mosaic{max-width:var(--col); margin:0 auto; padding:70px 24px 30px; display:flex; flex-direction:column; gap:16px}
.banner{position:relative; display:block; overflow:hidden; border-radius:6px; background:#111; cursor:pointer}
.banner .media{position:absolute; inset:0}
.banner .media img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); filter:saturate(1.05)}
.banner:hover .media img{transform:scale(1.05)}
.banner .film-in{position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; color:#fff; padding:clamp(24px,4vw,50px)}
.banner .film-in .credit{font-family:var(--font); font-weight:700; font-size:clamp(12px,1.3vw,15px); letter-spacing:.16em; text-transform:uppercase; color:#fff; opacity:.96; margin-bottom:10px; text-shadow:0 2px 12px rgba(0,0,0,.7)}
.banner .film-in h3{font-family:"Baloo 2",var(--font); font-weight:800; font-size:clamp(34px,5.6vw,68px); line-height:.9; color:var(--tc,#fff); -webkit-text-stroke:5px #17130f; paint-order:stroke fill; text-shadow:4px 6px 0 rgba(23,19,15,.45); max-width:15ch; margin:0}
.banner .wash{position:absolute; inset:0; background:linear-gradient(0deg, rgba(6,8,10,.2), rgba(6,8,10,.2)), radial-gradient(140% 140% at 50% 44%, rgba(6,8,10,0) 40%, rgba(6,8,10,.5) 100%)}
.banner.pos-left .wash{background:linear-gradient(90deg, rgba(6,8,10,.78) 0%, rgba(6,8,10,.36) 36%, rgba(6,8,10,.05) 64%), linear-gradient(0deg, rgba(6,8,10,.16), rgba(6,8,10,.16))}
.banner.pos-top .wash{background:linear-gradient(180deg, rgba(6,8,10,.78) 0%, rgba(6,8,10,.34) 40%, rgba(6,8,10,.05) 66%), linear-gradient(0deg, rgba(6,8,10,.16), rgba(6,8,10,.16))}
.banner.pos-bottom .wash{background:linear-gradient(0deg, rgba(6,8,10,.82) 0%, rgba(6,8,10,.3) 40%, rgba(6,8,10,.04) 66%), linear-gradient(0deg, rgba(6,8,10,.14), rgba(6,8,10,.14))}
.banner.pos-left .film-in{align-items:flex-start; text-align:left}
.banner.pos-right .film-in{align-items:flex-end; text-align:right}
.banner.pos-top .film-in{justify-content:flex-start}
.banner.pos-bottom .film-in{justify-content:flex-end}
.banner.wide{aspect-ratio:16/9}
.banner.tile{aspect-ratio:1/1}
.banner.tile .film-in{padding:clamp(15px,2.4vw,22px)}
.banner.tile .film-in .credit{font-size:11px; letter-spacing:.14em; margin-bottom:6px}
.banner.tile .film-in h3{font-size:clamp(18px,2.1vw,28px); -webkit-text-stroke-width:3px; max-width:13ch}
/* logotipos por episodio */
.banner.logo-script .film-in h3{font-family:"Pacifico",cursive; font-weight:400; -webkit-text-stroke-width:3px; line-height:1.1; text-shadow:3px 5px 0 rgba(23,19,15,.38)}
.banner.logo-chunky .film-in h3{font-family:"Luckiest Guy",var(--font); font-weight:400; letter-spacing:.01em}
.banner.logo-round .film-in h3{font-family:"Titan One",var(--font); font-weight:400}
.banner.logo-urban .film-in h3{font-family:"Bungee",var(--font); font-weight:400; -webkit-text-stroke-width:3px; font-size:clamp(24px,4.4vw,52px)}
.trio{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media(max-width:720px){ .trio{grid-template-columns:1fr} .banner.tile{aspect-ratio:16/9} }
/* icono de play translúcido */
.banner::after, .hero-stage::after{content:""; position:absolute; z-index:4; left:50%; top:50%; transform:translate(-50%,-50%); width:78px; height:78px; border-radius:50%;
  background:rgba(10,10,12,.3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M9 5v14l11-7z'/%3E%3C/svg%3E") no-repeat center/40px;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); box-shadow:0 4px 16px rgba(0,0,0,.28); transition:transform .2s var(--ease), background-color .2s; pointer-events:none}
.banner:hover::after, .hero-stage:hover::after{transform:translate(-50%,-50%) scale(1.08); background-color:rgba(193,74,52,.72)}
.banner.tile::after{width:60px; height:60px; background-size:30px}
.hero-stage::after{width:100px; height:100px; background-size:52px}
.ver-todos{display:block; margin:34px auto 0; text-align:center; width:100%; font-family:var(--font); font-weight:700; font-size:15px; letter-spacing:.02em; color:var(--ink); transition:color .2s}
.ver-todos:hover{color:var(--accent)}
.ver-todos .arw{transition:transform .2s var(--ease); display:inline-block}
.ver-todos:hover .arw{transform:translateX(4px)}

/* ================= ESTADÍSTICAS (redes) ================= */
.stats-band{padding:clamp(48px,7vh,76px) 0; border-top:1px solid var(--hair); background:#fff}
.stats{max-width:var(--col); margin:0 auto; padding:0 24px; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:22px; text-align:center}
@media(max-width:640px){ .stats{grid-auto-flow:row; grid-template-columns:repeat(2,1fr); grid-auto-columns:auto; gap:32px 18px} }
.stat{position:relative}
.stat + .stat::before{content:""; position:absolute; left:-11px; top:14%; bottom:14%; width:1px; background:var(--hair)}
@media(max-width:640px){ .stat + .stat::before{display:none} }
.stat .ic{display:block; margin:0 auto 10px}
.stat .ic svg{width:24px; height:24px; fill:currentColor}
.stat .num{font-family:"Baloo 2",var(--font); font-weight:800; font-size:clamp(30px,4vw,46px); line-height:1; color:var(--ink); letter-spacing:-.01em}
.stat .lbl{font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gray); margin-top:9px; font-weight:600}

/* ================= SOBRE ANCLATE ================= */
.about-anclate{background:var(--mist); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); padding:clamp(64px,10vh,110px) 0}
.about-anclate .in{max-width:980px; margin:0 auto; padding:0 24px; text-align:center}
.about-anclate .kicker{font-family:var(--font); font-weight:600; text-transform:uppercase; letter-spacing:.2em; color:var(--accent); font-size:12px; margin:0 0 16px}
.about-anclate h2{font-family:"Baloo 2",var(--font); font-weight:800; font-size:clamp(30px,4.6vw,52px); line-height:1.02; letter-spacing:-.01em; max-width:20ch; margin:0 auto}
.about-anclate .lead{color:var(--gray); font-size:clamp(16px,1.5vw,19px); max-width:60ch; margin:22px auto 0}
.about-anclate .cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:46px; text-align:left}
@media(max-width:760px){ .about-anclate .cards{grid-template-columns:1fr} }
.about-anclate .c{background:#fff; border:1px solid var(--hair); border-radius:16px; padding:26px 24px}
.about-anclate .c .ic{font-size:30px; display:block; margin-bottom:12px}
.about-anclate .c h3{font-family:"Baloo 2",var(--font); font-weight:800; font-size:19px; margin:0 0 8px}
.about-anclate .c p{color:var(--gray); font-size:14.5px; margin:0}

/* ================= CONTACTO ================= */
.contacto{padding:clamp(64px,10vh,110px) 0}
.contacto .in{max-width:680px; margin:0 auto; padding:0 24px; text-align:center}
.contacto .kicker{font-family:var(--font); font-weight:600; text-transform:uppercase; letter-spacing:.2em; color:var(--accent); font-size:12px; margin:0 0 14px}
.contacto h2{font-family:"Baloo 2",var(--font); font-weight:800; font-size:clamp(28px,4vw,46px); line-height:1.03; margin:0 auto; max-width:20ch}
.contacto > .in > p{color:var(--gray); max-width:52ch; margin:16px auto 0}
.contacto form{margin-top:30px; display:grid; gap:14px; text-align:left}
.contacto .row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:560px){ .contacto .row{grid-template-columns:1fr} }
.contacto input,.contacto textarea{width:100%; border:2px solid var(--hair); border-radius:12px; padding:14px 16px; font:inherit; font-size:15px; background:#fff; color:var(--ink); transition:border-color .2s}
.contacto input:focus,.contacto textarea:focus{outline:none; border-color:var(--accent)}
.contacto textarea{min-height:130px; resize:vertical}
.contacto button{justify-self:center; background:var(--ink); color:#fff; border:0; padding:15px 34px; border-radius:100px; font-weight:800; font-size:15px; cursor:pointer; transition:transform .2s var(--ease), background .2s, opacity .2s; margin-top:4px}
.contacto button:hover{transform:scale(1.04); background:var(--accent)}
.contacto button[disabled]{opacity:.7; cursor:default; transform:none}
.contacto .thanks{display:none; text-align:center; color:var(--accent); font-weight:700; margin:8px 0 0}
.contacto .thanks.err{color:#b3261e}
.contacto form.sent .thanks{display:block}

/* ================= FOOTER (nuevo) ================= */
.site-footer{background:var(--mist); border-top:1px solid var(--hair); margin-top:56px; padding:52px 0 34px}
.site-footer .fin{max-width:var(--col); margin:0 auto; padding:0 24px}
.fsoc{display:flex; gap:18px; justify-content:center; margin-bottom:34px}
.fsoc a{color:var(--ink); opacity:.8; transition:opacity .2s} .fsoc a:hover{opacity:1}
.fsoc svg{width:20px; height:20px; fill:currentColor}
.fcols{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:30px; max-width:640px; margin:0 auto 36px; justify-content:center; text-align:left}
@media(max-width:600px){ .fcols{grid-auto-flow:row; grid-template-columns:repeat(2,1fr); grid-auto-columns:auto} }
.fcols h4{font-size:11px; text-transform:uppercase; letter-spacing:.18em; color:var(--ink); margin-bottom:14px; font-weight:700}
.fcols a{display:block; font-size:13px; color:var(--gray); margin-bottom:9px; transition:color .2s} .fcols a:hover{color:var(--ink)}
.fcols li{list-style:none} .fcols ul{margin:0;padding:0}
.fpriv{text-align:center; font-size:12px; color:var(--gray); border-top:1px solid var(--hair); padding-top:22px}
.fpriv .row1{font-weight:700; color:var(--ink); margin-bottom:8px; letter-spacing:.02em}
.fpriv a{color:var(--gray)} .fpriv a:hover{color:var(--ink)}

/* ================= REVEAL ================= */
.rv{opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.rv.in{opacity:1; transform:none}

/* ================= MODAL DE VIDEO ================= */
.anc-modal{position:fixed; inset:0; z-index:1000; display:none; place-items:center; background:rgba(8,8,12,.85); padding:24px}
.anc-modal.open{display:grid}
.anc-modal .box{position:relative; width:min(1000px,100%); aspect-ratio:16/9; background:#000; border-radius:12px; overflow:hidden; box-shadow:0 30px 90px rgba(0,0,0,.6)}
.anc-modal .box.vertical{width:auto; height:min(86vh,860px); max-width:94vw; aspect-ratio:9/16}
.anc-modal iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.anc-modal .close{position:absolute; top:-48px; right:0; width:40px; height:40px; border-radius:50%; background:#fff; border:0; cursor:pointer; font-size:22px; line-height:1; display:grid; place-items:center; color:#111}
.anc-modal .close:hover{background:var(--accent); color:#fff}

/* ================= PÁGINA: TODOS LOS VIDEOS ================= */
.videos-hero{text-align:center; padding:70px 24px 8px; max-width:760px; margin:0 auto}
.videos-hero .kicker{font-family:var(--font); font-weight:600; text-transform:uppercase; letter-spacing:.2em; color:var(--accent); font-size:12px; margin:0 0 14px}
.videos-hero h1{font-family:"Baloo 2",var(--font); font-weight:800; font-size:clamp(32px,5vw,58px); line-height:1.02; margin:0}
.videos-hero p{color:var(--gray); margin:14px auto 0; max-width:52ch}
.videos-grid{max-width:1120px; margin:0 auto; padding:44px 24px 80px; display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
@media(max-width:900px){ .videos-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .videos-grid{grid-template-columns:1fr} }
.vcard{cursor:pointer; text-align:left}
.vcard .thumb{position:relative; aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:#111; box-shadow:0 12px 30px rgba(20,18,26,.14); transition:transform .2s var(--ease), box-shadow .2s}
.vcard:hover .thumb{transform:translateY(-4px); box-shadow:0 20px 44px rgba(20,18,26,.22)}
.vcard .thumb img{width:100%; height:100%; object-fit:cover}
.vcard .thumb::after{content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:60px; height:60px; border-radius:50%;
  background:rgba(10,10,12,.34) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M9 5v14l11-7z'/%3E%3C/svg%3E") no-repeat center/28px; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); transition:background-color .2s}
.vcard:hover .thumb::after{background-color:rgba(193,74,52,.72)}
.vcard h3{font-family:var(--font); font-weight:700; font-size:16px; line-height:1.3; margin:14px 0 0; color:var(--ink)}
.vcard .date{font-size:12.5px; color:var(--gray); margin-top:4px}
.videos-empty{grid-column:1/-1; text-align:center; color:var(--gray); padding:40px 0}

/* ================= SOPORTE PLANTILLAS HEREDADAS (personajes, contenido) ================= */
.eyebrow{font-family:var(--util); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 14px}
.btn{display:inline-block; font-family:var(--display); font-weight:700; font-size:17px; padding:13px 26px; border:var(--line); border-radius:999px; background:var(--paper); box-shadow:var(--pop-sm); transition:transform .12s, box-shadow .12s}
.btn:hover{transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--ink)}
.btn-red{background:var(--red); color:var(--paper)} .btn-teal{background:var(--teal); color:var(--paper)} .btn-orange{background:var(--orange); color:var(--ink)}
.page-hero{padding:96px 0 12px; text-align:center}
.page-hero h1{font-family:"Baloo 2",var(--font); font-weight:800; font-size:clamp(34px,4.6vw,56px); line-height:1.05; margin:0 0 10px}
.page-hero p{color:var(--gray); margin:0 auto; max-width:56ch}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
@media(max-width:900px){ .grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .grid{grid-template-columns:1fr} }
.cast{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
@media(max-width:900px){ .cast{grid-template-columns:repeat(3,1fr)} }
@media(max-width:520px){ .cast{grid-template-columns:repeat(2,1fr)} }
.toon{background:#fff; border:1px solid var(--hair); border-radius:16px; box-shadow:0 10px 26px rgba(20,18,26,.08); overflow:hidden; transition:transform .2s var(--ease), box-shadow .2s}
.toon:hover{transform:translateY(-5px); box-shadow:0 18px 40px rgba(20,18,26,.16)}
.toon .port{position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--teal)}
.toon .port img{width:100%; height:100%; object-fit:cover}
.toon .port .ph, .frame .ph, .port .ph{font-family:var(--util); font-size:11px; text-align:center; line-height:1.9; color:#123B3A; padding:10px; display:grid; place-items:center; height:100%}
.toon .port.red{background:var(--red)} .toon .port.green{background:var(--green)} .toon .port.peach{background:var(--peach)} .toon .port.purple{background:var(--purple)} .toon .port.orange{background:var(--orange)}
.toon-body{padding:16px 18px 20px}
.toon-body h3{font-family:"Baloo 2",var(--font); font-weight:800; font-size:22px; margin:0 0 2px; line-height:1.1}
.toon-body h3 a{color:inherit} .toon-body h3 a:hover{color:var(--accent)}
.toon-body .role{font-family:var(--util); font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:var(--gray); margin:0 0 10px}
.toon-body p{margin:0; font-size:14.5px; color:var(--gray); line-height:1.55}
.traits{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px}
.traits span{font-family:var(--util); font-size:10px; letter-spacing:.08em; text-transform:uppercase; border:2px solid var(--ink); border-radius:999px; padding:2px 9px; background:var(--cream)}
.hero-toon{background:#fff; border:1px solid var(--hair); border-radius:18px; box-shadow:0 12px 30px rgba(20,18,26,.1); overflow:hidden; display:grid; grid-template-columns:1fr 1.05fr}
.hero-toon .port{position:relative; aspect-ratio:auto; border-right:1px solid var(--hair); min-height:290px}
.hero-toon .toon-body{padding:24px} .hero-toon h3{font-size:30px}
.quote{font-family:"Baloo 2",var(--font); font-weight:600; font-size:17px; line-height:1.4; border-left:5px solid var(--orange); padding:2px 0 2px 13px; margin:14px 0 0}
.duo{display:grid; grid-template-columns:repeat(2,1fr); gap:24px}
@media(max-width:900px){ .duo{grid-template-columns:1fr} .hero-toon{grid-template-columns:1fr} .hero-toon .port{border-right:0; border-bottom:1px solid var(--hair)} }
.card{background:#fff; border:1px solid var(--hair); border-radius:14px; box-shadow:0 10px 26px rgba(20,18,26,.08); overflow:hidden; transition:transform .2s, box-shadow .2s}
.card:hover{transform:translateY(-4px); box-shadow:0 18px 40px rgba(20,18,26,.16)}
.card a{display:block} .card h3 a{color:inherit}
.card-body{padding:15px 17px 18px}
.card h3{font-family:"Baloo 2",var(--font); font-weight:800; font-size:20px; margin:0 0 4px}
.card .meta{font-family:var(--util); font-size:12px; color:var(--gray); margin:0}
.chip{display:inline-block; font-family:var(--util); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; border:2px solid var(--ink); border-radius:999px; padding:3px 11px; margin-bottom:11px; background:var(--peach); color:#5E3311}
.chip.b{background:var(--orange); color:#5C3403}
.frame{position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--teal)}
.frame.red{background:var(--red)} .frame.green{background:var(--green)} .frame.purple{background:var(--purple)} .frame.peach{background:var(--peach)}
.play{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:66px; height:66px; border-radius:50%; background:rgba(10,10,12,.34); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); display:grid; place-items:center}
.play span{width:0; height:0; margin-left:5px; border-left:20px solid #fff; border-top:12px solid transparent; border-bottom:12px solid transparent}
.pager{display:flex; justify-content:center; gap:10px; margin-top:52px; flex-wrap:wrap}
.pager .page-numbers{font-family:var(--font); font-weight:700; font-size:15px; border:1px solid var(--hair); border-radius:999px; padding:9px 18px; background:#fff; display:inline-block}
.pager .page-numbers.current{background:var(--ink); color:#fff; border-color:var(--ink)}
.empty{text-align:center; padding:60px 20px; font-family:"Baloo 2",var(--font); font-weight:600; font-size:21px; color:var(--gray)}
.back{display:inline-block; font-family:var(--util); font-size:12px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:22px; border-bottom:2px solid var(--ink)}
.entry{max-width:820px; margin:0 auto}
.entry h1{font-family:"Baloo 2",var(--font); font-weight:800; font-size:clamp(30px,4vw,46px); line-height:1.1; margin:0 0 18px}
.entry h2{font-family:"Baloo 2",var(--font); font-weight:700; font-size:28px; margin:32px 0 12px}
.entry p{margin:0 0 16px; color:var(--ink)} .entry a{color:var(--accent); text-decoration:underline; text-underline-offset:3px}
.entry ul,.entry ol{margin:0 0 18px; padding-left:24px} .entry li{margin-bottom:7px}
.entry img,.entry .wp-block-image img{border-radius:12px}
.entry blockquote{border-left:5px solid var(--orange); margin:22px 0; padding:4px 0 4px 18px; font-family:"Baloo 2",var(--font); font-weight:600; font-size:19px}
.video-wrap{position:relative; aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:var(--ink); box-shadow:0 16px 40px rgba(20,18,26,.18)}
.video-wrap.vertical{aspect-ratio:9/16; max-width:400px; margin-left:auto; margin-right:auto}
.video-wrap iframe,.video-wrap video{position:absolute; inset:0; width:100%; height:100%; border:0}
.comments{max-width:820px; margin:44px auto 0}
.comments h2{font-family:"Baloo 2",var(--font); font-weight:800; font-size:26px; margin:0 0 18px}
.comment-list{list-style:none; padding:0; margin:0}
.comment-list li{background:#fff; border:1px solid var(--hair); border-radius:12px; padding:18px 22px; margin-bottom:14px}
.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],.comment-form textarea{width:100%; border:2px solid var(--hair); border-radius:10px; padding:11px 14px; font-family:var(--font); font-size:15px; background:#fff}
.comment-form label{font-weight:600; display:block; margin-bottom:5px}
.comment-form p{margin-bottom:14px}
.comment-form .submit{font-family:var(--font); font-weight:800; font-size:15px; padding:13px 28px; border:0; border-radius:999px; background:var(--ink); color:#fff; cursor:pointer}

/* ================= WordPress a11y ================= */
.screen-reader-text{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap}
.skip-link{position:absolute; left:-9999px; top:0; z-index:1001; background:#fff; border:1px solid var(--hair); padding:12px 20px; font-weight:700}
.skip-link:focus{left:12px; top:12px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
.custom-logo{height:34px; width:auto}
.admin-bar .hdr{top:32px}
@media (max-width:782px){ .admin-bar .hdr{top:46px} }
@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important} .rv{opacity:1; transform:none} }