/*
Theme Name: OtizmTV
Theme URI: https://www.otizmtv.com
Author: OtizmTV
Description: Calm, neurodiversity-friendly editorial theme for OtizmTV — utility bar, masthead, sticky section nav, Topics mega menu, full menu drawer, search panel, calm mode, dark theme and an animated sign-in page.
Version: 1.0.0
Requires at least: 6.3
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: otizmtv
*/

/* OtizmTV — shared styles for every artboard (tokens from the OtizmTV design system) */
.ot{
  --bg:#f7f3ec;--surface:#ffffff;--surface-2:#efe8dc;--ink:#14302e;--muted:#4c5f5c;--border:#d9cfbf;
  --brand:#0f6b63;--brand-strong:#0a4f49;--on-brand:#ffffff;--accent:#e2a63b;--coral:#e0705a;--lavender:#c9c3ef;
  --focus:#0f6b63;--success:#2e7d4f;--danger:#b3261e;--accent-ink:#14302e;
  --shadow-card:0 1px 2px rgba(20,48,46,.06),0 8px 24px rgba(20,48,46,.08);
  --shadow-lift:0 12px 32px rgba(20,48,46,.14);
  --r-sm:8px;--r-md:14px;--r-lg:24px;--r-pill:999px;
  --e:cubic-bezier(.22,1,.36,1);
  --display:"Bricolage Grotesque","Lexend",system-ui,sans-serif;
  --sans:"Lexend",system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;
  min-height:100%;box-sizing:border-box;
}
.ot[data-theme="dark"]{
  --bg:#0e1a19;--surface:#152523;--surface-2:#1d302d;--ink:#f2ede4;--muted:#a9b8b4;--border:#2c403d;
  --brand:#4fc1b4;--brand-strong:#7fd6cb;--on-brand:#0e1a19;--accent:#f0b955;--coral:#f08a74;--lavender:#5d55a3;
  --focus:#4fc1b4;--success:#6cc68e;--danger:#f2867d;
  --shadow-card:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
  --shadow-lift:0 12px 32px rgba(0,0,0,.5);
}
.ot *{box-sizing:border-box}
.ot a{color:var(--brand)}
.ot :focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px}
.ot h1,.ot h2,.ot h3,.ot p{margin:0}
.wrapx{max-width:1200px;margin:0 auto;padding:0 32px}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.nav-in{height:72px;display:flex;align-items:center;gap:24px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-.01em;min-height:44px}
.logo-mark{position:relative;width:38px;height:24px;flex:none}
.logo-mark i{position:absolute;top:0;width:24px;height:24px;border-radius:50%;border:5px solid var(--brand)}
.logo-mark i+i{left:14px;border-color:var(--accent)}
.logo b{color:var(--brand);font-weight:700}
.links{display:flex;gap:4px;margin-left:8px}
.links a{color:var(--ink);text-decoration:none;font-size:15px;font-weight:500;padding:10px 12px;border-radius:var(--r-sm);min-height:44px;display:flex;align-items:center;transition:background .2s}
.links a:hover{background:var(--surface-2)}
.links a.on{color:var(--brand)}
.spacer{flex:1}
.search{display:flex;align-items:center;gap:8px;height:44px;width:220px;padding:0 14px;border-radius:var(--r-pill);background:var(--surface-2);border:1.5px solid transparent;color:var(--muted);transition:border-color .2s}
.search:focus-within{border-color:var(--focus)}
.search input{border:0;background:none;outline:none;font:inherit;font-size:14px;color:var(--ink);width:100%}
.search input::placeholder{color:var(--muted)}
.iconbtn{width:44px;height:44px;border-radius:var(--r-pill);border:1.5px solid var(--border);background:var(--surface);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background .2s}
.iconbtn:hover{background:var(--surface-2)}
.calm{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--muted);cursor:pointer;min-height:44px;padding:0 4px;background:none;border:0;font-family:inherit}
.tg{width:40px;height:24px;border-radius:var(--r-pill);background:var(--border);position:relative;transition:background .2s;flex:none}
.tg::after{content:"";position:absolute;width:18px;height:18px;top:3px;left:3px;border-radius:50%;background:var(--surface);transition:transform .2s var(--e)}
.tg.on{background:var(--brand)}
.tg.on::after{transform:translateX(16px)}
.menubtn{display:none}
.mobmenu{display:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:var(--r-md);font:inherit;font-weight:600;font-size:16px;text-decoration:none;cursor:pointer;border:0;transition:background .2s,transform .2s var(--e),box-shadow .2s;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn-p{background:var(--brand);color:var(--on-brand)}
.btn-p:hover{background:var(--brand-strong)}
.ot a.btn-p{color:var(--on-brand)}
.btn-s{background:var(--surface);color:var(--ink);border:1.5px solid var(--border)}
.ot a.btn-s{color:var(--ink)}
.btn-lg{height:56px;padding:0 28px;font-size:17px}
.btn-sm{height:44px;padding:0 18px;font-size:15px}

/* ---------- hero ---------- */
.hero{padding:72px 0 88px}
.hero-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--brand);background:color-mix(in srgb,var(--brand) 12%,transparent);padding:6px 12px;border-radius:var(--r-pill)}
.hero h1{font-family:var(--display);font-size:64px;line-height:1.02;letter-spacing:-.025em;font-weight:700;margin-top:20px}
.hero h1 em{font-style:normal;color:var(--brand)}
.hero p.lead{font-size:19px;line-height:1.6;color:var(--muted);margin-top:20px;max-width:34em}
.cta{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.trust{display:flex;gap:28px;margin-top:40px;flex-wrap:wrap}
.trust div{font-size:14px;color:var(--muted);line-height:1.4}
.trust b{display:block;font-family:var(--display);font-size:26px;color:var(--ink)}
.stage{position:relative;aspect-ratio:1/0.92;border-radius:var(--r-lg);background:var(--brand);overflow:hidden}
.stage .rA,.stage .rB{position:absolute;border-radius:50%;width:56%;aspect-ratio:1;top:14%;border:34px solid var(--accent)}
.stage .rA{left:8%;animation:drift 26s ease-in-out infinite}
.stage .rB{left:38%;border-color:var(--lavender);animation:drift 30s ease-in-out infinite reverse}
.stage .orb{position:absolute;width:22%;aspect-ratio:1;border-radius:50%;background:var(--coral);right:8%;bottom:10%;animation:drift 22s ease-in-out infinite}
.stage .orb2{position:absolute;width:12%;aspect-ratio:1;border-radius:50%;background:color-mix(in srgb,#ffffff 30%,transparent);left:10%;bottom:12%;animation:drift 28s ease-in-out infinite reverse}
.nowcard{position:absolute;left:20px;right:20px;bottom:20px;background:var(--surface);color:var(--ink);border-radius:var(--r-md);box-shadow:var(--shadow-lift);padding:14px;display:flex;gap:14px;align-items:center}
.nowcard .play{width:48px;height:48px;border-radius:50%;background:var(--brand);color:var(--on-brand);display:grid;place-items:center;flex:none}
.nowcard small{display:block;font-size:12px;color:var(--muted);line-height:1.3}
.nowcard strong{display:block;font-size:15px;line-height:1.35;font-weight:600}
.live{margin-left:auto;background:var(--accent);color:var(--accent-ink);font-size:12px;font-weight:700;padding:4px 10px;border-radius:var(--r-sm);display:flex;align-items:center;gap:6px;flex:none}
.live i{width:7px;height:7px;border-radius:50%;background:var(--accent-ink)}

@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(16px,-20px)}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.rise{animation:rise .5s var(--e) both}

/* ---------- sections ---------- */
.sec{padding:56px 0}
.sec-h{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.sec-h h2{font-family:var(--display);font-size:32px;line-height:1.15;font-weight:700;letter-spacing:-.01em}
.sec-h p{color:var(--muted);font-size:15px;margin-top:4px}
.more{font-weight:600;text-decoration:none;font-size:15px;min-height:44px;display:inline-flex;align-items:center;gap:6px}

.strip{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:24px}
.feat{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:340px;padding:28px;display:flex;flex-direction:column;justify-content:flex-end;text-decoration:none;transition:transform .2s var(--e),box-shadow .2s}
.feat:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.ot a.feat{color:#ffffff}
.feat.f1{background:#0f6b63}
.feat.f2{background:#14302e}
.feat.f3{background:#7a4a2a}
.feat .shape{position:absolute;border-radius:50%;border:26px solid #e2a63b;width:220px;height:220px;top:-50px;right:-40px;opacity:.9}
.feat.f2 .shape{border-color:#c9c3ef;width:180px;height:180px}
.feat.f3 .shape{border-color:#e0705a;width:170px;height:170px;top:-30px}
.feat .tagline{position:relative;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.9}
.feat h3{position:relative;font-family:var(--display);font-size:26px;line-height:1.15;font-weight:700;margin-top:8px;max-width:16em}
.feat.f2 h3,.feat.f3 h3{font-size:21px}
.feat .meta{position:relative;font-size:14px;margin-top:10px;opacity:.9}

.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}
.chip{height:44px;padding:0 18px;border-radius:var(--r-pill);border:1.5px solid var(--border);background:var(--surface);color:var(--ink);font:inherit;font-size:15px;font-weight:500;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.chip:hover{border-color:var(--brand)}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}

.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.vc{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:12px;text-decoration:none;display:block;transition:transform .2s var(--e),box-shadow .2s}
.ot a.vc{color:var(--ink)}
.vc:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.th{position:relative;aspect-ratio:16/9;border-radius:var(--r-md);overflow:hidden}
.th.t1{background:var(--brand)}.th.t2{background:var(--coral)}.th.t3{background:var(--lavender)}
.th.t4{background:var(--accent)}.th.t5{background:var(--ink)}.th.t6{background:var(--surface-2)}
.th .r{position:absolute;width:30%;aspect-ratio:1;border-radius:50%;border:12px solid var(--surface);top:22%;left:28%;opacity:.85}
.th .r+.r{left:44%;border-color:var(--accent)}
.th.t4 .r+.r,.th.t2 .r+.r{border-color:var(--ink)}
.th.t6 .r{border-color:var(--brand)}
.dur{position:absolute;right:8px;bottom:8px;background:rgba(14,26,25,.82);color:#fff;font-size:12px;font-weight:500;padding:2px 8px;border-radius:var(--r-sm)}
.new{position:absolute;left:8px;top:8px;background:var(--accent);color:var(--accent-ink);font-size:12px;font-weight:700;padding:2px 8px;border-radius:var(--r-sm)}
.th .pl{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .2s}
.vc:hover .pl{opacity:1}
.th .pl b{width:52px;height:52px;border-radius:50%;background:var(--surface);color:var(--brand);display:grid;place-items:center}
.vc-b{padding:14px 6px 6px}
.cat{display:inline-block;font-size:12px;font-weight:600;color:var(--brand);letter-spacing:.02em}
.vc h3{font-family:var(--display);font-size:19px;line-height:1.3;font-weight:600;margin-top:6px}
.vc .m{font-size:14px;color:var(--muted);margin-top:6px}

/* ---------- newsletter ---------- */
.news{position:relative;overflow:hidden;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:48px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.news h2{font-family:var(--display);font-size:32px;line-height:1.15;font-weight:700}
.news p{color:var(--muted);margin-top:10px;max-width:30em}
.news form{display:flex;gap:10px;flex-wrap:wrap}
.news .fi{flex:1 1 220px;position:relative}
.news .fi input{width:100%;height:56px;border-radius:var(--r-md);border:1.5px solid var(--border);background:var(--surface-2);padding:0 16px;font:inherit;color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s}
.news .fi input:focus{border-color:var(--focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 28%,transparent)}
.news small{display:block;font-size:13px;color:var(--muted);margin-top:10px}
.news .deco{position:absolute;width:160px;height:160px;border-radius:50%;border:22px solid var(--lavender);right:-50px;top:-60px;opacity:.7}

/* ---------- footer ---------- */
.foot{margin-top:56px;border-top:1px solid var(--border);padding:48px 0 40px}
.foot-in{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:32px}
.foot h4{font-size:14px;font-weight:600;margin:0 0 12px;color:var(--ink)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.foot ul a{color:var(--muted);text-decoration:none;font-size:15px;min-height:32px;display:inline-flex;align-items:center}
.foot ul a:hover{color:var(--brand)}
.foot .about{color:var(--muted);font-size:15px;margin-top:12px;max-width:26em}
.foot-b{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:40px;font-size:14px;color:var(--muted)}

/* ---------- login ---------- */
.lg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:900px}
.lg-side{position:relative;overflow:hidden;background:var(--brand);color:var(--on-brand);padding:48px;display:flex;flex-direction:column;justify-content:space-between}
.lg-side .logo{color:var(--on-brand);position:relative;z-index:1}
.lg-side .logo b{color:var(--on-brand)}
.lg-side .logo-mark i{border-color:var(--on-brand)}
.lg-side .logo-mark i+i{border-color:var(--accent)}
.lg-side .rA,.lg-side .rB{position:absolute;border-radius:50%;width:340px;height:340px;top:150px;border:40px solid var(--accent)}
.lg-side .rA{left:60px;animation:drift 26s ease-in-out infinite}
.lg-side .rB{left:260px;border-color:var(--lavender);animation:drift 30s ease-in-out infinite reverse}
.lg-side .orb{position:absolute;width:120px;height:120px;border-radius:50%;background:var(--coral);top:480px;left:470px;animation:drift 22s ease-in-out infinite}
.lg-side .orb2{position:absolute;width:64px;height:64px;border-radius:50%;background:color-mix(in srgb,#ffffff 28%,transparent);top:110px;left:520px;animation:drift 28s ease-in-out infinite reverse}
.lg-copy{position:relative;z-index:1}
.lg-copy h2{font-family:var(--display);font-size:48px;line-height:1.05;font-weight:700;letter-spacing:-.02em;max-width:11em}
.lg-copy p{font-size:17px;line-height:1.6;margin-top:16px;max-width:28em;opacity:.92}
.lg-main{display:flex;align-items:center;justify-content:center;padding:48px 32px}
.card{position:relative;width:100%;max-width:440px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:40px}
.card h1{font-family:var(--display);font-size:32px;line-height:1.15;font-weight:700;letter-spacing:-.01em}
.card .sub{color:var(--muted);font-size:15px;margin-top:6px}
.lform{margin-top:28px;display:grid;gap:16px}
.fld{position:relative}
.fld input{width:100%;height:58px;padding:22px 52px 6px 16px;border-radius:var(--r-md);border:1.5px solid var(--border);background:var(--surface-2);color:var(--ink);font:inherit;font-size:16px;outline:none;transition:border-color .2s,box-shadow .2s}
.fld label{position:absolute;left:17px;top:18px;font-size:16px;color:var(--muted);pointer-events:none;transition:top .2s var(--e),font-size .2s var(--e),color .2s}
.fld input:focus{border-color:var(--focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 28%,transparent)}
.fld input:focus+label,.fld input:not(:placeholder-shown)+label{top:8px;font-size:12px;font-weight:500;color:var(--brand)}
.fld.err input{border-color:var(--danger)}
.fld.err input:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 25%,transparent)}
.eye{position:absolute;right:7px;top:7px;width:44px;height:44px;border:0;background:none;color:var(--muted);border-radius:var(--r-sm);cursor:pointer;display:grid;place-items:center}
.eye:hover{color:var(--ink)}
.emsg{display:flex;gap:8px;align-items:flex-start;color:var(--danger);font-size:14px;line-height:1.4;margin-top:8px;animation:open .2s var(--e) both}
@keyframes open{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.row a{font-size:15px;font-weight:500;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.remember{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--muted);cursor:pointer;min-height:44px;background:none;border:0;font-family:inherit;padding:0}
.submit{width:100%;height:56px;font-size:17px}
.dots{display:inline-flex;gap:6px}
.dots i{width:8px;height:8px;border-radius:50%;background:currentColor;animation:pulse 1s infinite ease-in-out}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes pulse{0%,100%{opacity:.3}50%{opacity:1}}
.or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:14px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--border)}
.alts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.alts .btn{height:52px;font-weight:500;font-size:15px}
.signup{font-size:15px;color:var(--muted);text-align:center}
.signup a{font-weight:600;text-decoration:none}
.done{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;min-height:520px;animation:rise .5s var(--e) both}
.done svg circle{fill:none;stroke:var(--success);stroke-width:4;stroke-dasharray:190;stroke-dashoffset:190;animation:draw .6s var(--e) forwards}
.done svg path{fill:none;stroke:var(--success);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:50;stroke-dashoffset:50;animation:draw .4s .45s var(--e) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.hint{font-size:13px;color:var(--muted);text-align:center;margin-top:16px}
.lg-mobtop{display:none}

/* ---------- calm mode + reduced motion ---------- */
.ot.is-calm *,.ot.is-calm *::before,.ot.is-calm *::after{animation:none!important;transition:opacity .2s,background-color .2s,border-color .2s,color .2s!important}
.ot.is-calm .vc:hover,.ot.is-calm .feat:hover,.ot.is-calm .btn:hover{transform:none}
.ot.is-calm .done svg *{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){
  .ot *,.ot *::before,.ot *::after{animation:none!important;transition:opacity .2s!important}
  .ot .done svg *{stroke-dashoffset:0}
}

/* ---------- tablet ---------- */
@media (max-width:1100px){
  .links{display:none}
  .search{width:auto;flex:0 1 200px}
  .menubtn{display:grid}
}

/* ---------- phone ---------- */
@media (max-width:720px){
  .wrapx{padding:0 16px}
  .nav-in{height:64px;gap:8px}
  .search,.calm-lbl,.nav .btn-login{display:none}
  .mobmenu{display:block;border-top:1px solid var(--border);padding:8px 16px 16px;background:var(--bg)}
  .mobmenu a{display:flex;align-items:center;min-height:48px;color:var(--ink);text-decoration:none;font-weight:500;border-bottom:1px solid var(--border)}
  .mobmenu .mm-row{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
  .hero{padding:32px 0 48px}
  .hero-in{grid-template-columns:minmax(0,1fr);gap:32px}
  .hero h1{font-size:42px}
  .hero p.lead{font-size:17px}
  .cta .btn{flex:1 1 140px}
  .trust{gap:20px}
  .sec{padding:36px 0}
  .sec-h h2{font-size:26px}
  .strip{grid-template-columns:minmax(0,1fr)}
  .feat{min-height:260px}
  .chips{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px 24px;padding:0 16px 4px}
  .chip{flex:none}
  .grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .news{grid-template-columns:minmax(0,1fr);padding:28px 20px;gap:20px}
  .news h2{font-size:26px}
  .news .btn{flex:1 1 100%}
  .foot-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-in>div:first-child{grid-column:1/-1}
  /* login */
  .lg{grid-template-columns:minmax(0,1fr);position:relative;overflow:hidden;min-height:900px;background:var(--brand)}
  .lg-side{position:absolute;inset:0;padding:20px 16px}
  .lg-side .lg-copy{display:none}
  .lg-side .rA,.lg-side .rB{width:220px;height:220px;border-width:28px;top:70px}
  .lg-side .rA{left:-30px}.lg-side .rB{left:110px}
  .lg-side .orb{width:84px;height:84px;top:60px;left:290px}
  .lg-side .orb2{top:780px;left:30px}
  .lg-main{position:relative;z-index:1;align-items:flex-start;padding:200px 16px 32px}
  .card{padding:28px 20px;max-width:none}
  .card h1{font-size:28px}
  .alts{grid-template-columns:minmax(0,1fr)}
}

/* =====================================================================
   EDITORIAL LAYOUT (English edition) — header & menus modelled on a
   news-magazine structure: utility bar · masthead · section nav ·
   Topics mega menu · full menu drawer · search panel
   ===================================================================== */
.ed{position:relative}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* utility bar */
.ubar{background:var(--ink);color:var(--bg);font-size:13px}
.ubar-in{display:flex;align-items:center;gap:20px;min-height:44px}
.ubar .date{opacity:.8}
.ubar nav{display:flex;gap:2px}
.ot .ubar a{color:var(--bg);text-decoration:none}
.ubar nav a{padding:0 10px;min-height:44px;display:inline-flex;align-items:center;opacity:.85;transition:opacity .2s}
.ubar nav a:hover{opacity:1;text-decoration:underline}
.soc{display:flex;gap:2px}
.soc a{width:36px;height:44px;display:grid;place-items:center;opacity:.8}
.soc a:hover{opacity:1}
.ubar .calm{color:var(--bg);font-size:13px}
.ubar .tg{background:color-mix(in srgb,var(--bg) 30%,transparent)}
.ubar .tg.on{background:var(--accent)}
.ubar .tg::after{background:var(--ink)}
.ubar .ubtn{height:44px;min-width:44px;background:none;border:0;color:var(--bg);display:grid;place-items:center;cursor:pointer;border-radius:var(--r-sm)}
.ot .ubar a.subscribe{background:var(--accent);color:var(--accent-ink);font-weight:600;padding:0 14px;height:32px;display:inline-flex;align-items:center;border-radius:var(--r-sm)}
.ubar .signin{font-weight:600;min-height:44px;display:inline-flex;align-items:center;padding:0 6px}

/* masthead */
.mast{border-bottom:1px solid var(--border);background:var(--bg)}
.mast-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;min-height:100px}
.menu-btn{justify-self:start;display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 14px 0 10px;border-radius:var(--r-pill);border:1.5px solid var(--border);background:var(--surface);color:var(--ink);font:inherit;font-size:15px;font-weight:600;cursor:pointer;transition:background .2s}
.menu-btn:hover{background:var(--surface-2)}
.mlogo{display:flex;flex-direction:column;align-items:center;text-decoration:none;gap:2px}
.ot a.mlogo{color:var(--ink)}
.mlogo .w{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:700;font-size:40px;letter-spacing:-.02em;line-height:1}
.mlogo .w b{color:var(--brand)}
.mlogo .logo-mark{width:48px;height:30px}
.mlogo .logo-mark i{width:30px;height:30px;border-width:6px}
.mlogo .logo-mark i+i{left:18px}
.mlogo small{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500}
.mast-r{justify-self:end;display:flex;gap:8px;align-items:center}

/* section nav */
.snav{position:sticky;top:0;z-index:6;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.snav-in{display:flex;justify-content:center;align-items:center;gap:2px;min-height:56px;flex-wrap:wrap}
.snav a,.snav button.tab{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:56px;padding:0 14px;font:inherit;font-size:15px;font-weight:600;color:var(--ink);text-decoration:none;background:none;border:0;cursor:pointer}
.snav a::after,.snav button.tab::after{content:"";position:absolute;left:14px;right:14px;bottom:10px;height:3px;border-radius:3px;background:var(--brand);transform:scaleX(0);transition:transform .2s var(--e)}
.snav a:hover::after,.snav button.tab:hover::after,.snav .cur::after,.snav button.tab.open::after{transform:scaleX(1)}
.snav .sep{width:1px;height:22px;background:var(--border);margin:0 6px}
.snav .chev{transition:transform .2s var(--e)}
.snav .open .chev{transform:rotate(180deg)}
.ot .snav a.spec{color:var(--brand)}

/* mega menu */
.mega{position:absolute;left:0;right:0;top:100%;background:var(--surface);border-bottom:1px solid var(--border);box-shadow:var(--shadow-lift);animation:drop .3s var(--e) both}
@keyframes drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.mega-in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.3fr);gap:40px;padding:36px 32px 40px}
.mega h4,.drawer h4{margin:0 0 12px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
.mega ul,.drawer ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.mega ul a,.drawer ul a{display:flex;align-items:center;min-height:40px;color:var(--ink);text-decoration:none;font-size:15px;font-weight:500;border-radius:var(--r-sm);padding:0 8px;margin:0 -8px;transition:background .2s,color .2s}
.mega ul a:hover,.drawer ul a:hover{background:var(--surface-2);color:var(--brand)}
.ot .mega ul a.all{color:var(--brand);font-weight:600}
.mfeat{background:var(--brand);color:var(--on-brand);border-radius:var(--r-lg);padding:24px;position:relative;overflow:hidden;text-decoration:none;display:flex;flex-direction:column;justify-content:flex-end;min-height:240px}
.ot a.mfeat{color:var(--on-brand)}
.mfeat .shape{position:absolute;width:150px;height:150px;border-radius:50%;border:22px solid var(--accent);top:-36px;right:-24px}
.mfeat span.k{position:relative;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;opacity:.9}
.mfeat strong{position:relative;font-family:var(--display);font-size:22px;line-height:1.2;margin-top:8px}

/* search panel */
.spanel{position:absolute;left:0;right:0;top:100%;background:var(--surface);border-bottom:1px solid var(--border);box-shadow:var(--shadow-lift);animation:drop .3s var(--e) both;z-index:7}
.spanel-in{max-width:840px;margin:0 auto;padding:32px}
.sbox{display:flex;align-items:center;gap:12px;height:64px;padding:0 18px;border-radius:var(--r-md);border:1.5px solid var(--border);background:var(--surface-2)}
.sbox:focus-within{border-color:var(--focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 28%,transparent)}
.sbox input{flex:1;border:0;background:none;outline:none;font:inherit;font-size:20px;color:var(--ink)}
.sbox input::placeholder{color:var(--muted)}
.pop{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:16px}
.pop span{font-size:13px;color:var(--muted);font-weight:500;margin-right:4px}
.pop a{height:36px;padding:0 14px;display:inline-flex;align-items:center;border-radius:var(--r-pill);background:var(--surface-2);color:var(--ink);text-decoration:none;font-size:14px}
.pop a:hover{background:color-mix(in srgb,var(--brand) 14%,var(--surface-2))}

/* drawer */
.scrim{position:absolute;inset:0;background:rgba(14,26,25,.45);z-index:20;animation:fadein .25s ease both}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.drawer{position:absolute;top:0;left:0;bottom:0;width:400px;max-width:100%;background:var(--surface);z-index:21;box-shadow:var(--shadow-lift);animation:slide .35s var(--e) both;overflow:hidden}
@keyframes slide{from{transform:translateX(-24px);opacity:0}to{transform:none;opacity:1}}
.drawer-in{padding:20px 28px 40px;display:grid;gap:28px}
.drawer-top{display:flex;justify-content:space-between;align-items:center}
.drawer .primary a{font-family:var(--display);font-size:22px;font-weight:600;min-height:48px}
.drawer .tools{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.drawer .soc a{color:var(--ink);width:44px}

/* sections */
.kick{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--brand)}
.time{font-size:13px;color:var(--muted)}
.ed-sec{padding:48px 0;border-top:1px solid var(--border)}
.ed-sec.first{border-top:0;padding-top:40px}
.ed-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:24px}
.ed-h h2{font-family:var(--display);font-size:30px;line-height:1.15;font-weight:700;letter-spacing:-.01em}
.lead{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:48px}
.lead-main{text-decoration:none;display:block}
.ot a.lead-main{color:var(--ink)}
.lead-main .th{aspect-ratio:16/9;border-radius:var(--r-lg)}
.lead-main .th .r{border-width:22px}
.lead-main h1{font-family:var(--display);font-size:46px;line-height:1.06;letter-spacing:-.02em;font-weight:700;margin-top:12px}
.lead-main:hover h1{color:var(--brand)}
.lead-main .dek{font-size:18px;line-height:1.55;color:var(--muted);margin-top:12px;max-width:40em}
.byline{display:flex;gap:10px;align-items:center;margin-top:16px;font-size:14px;color:var(--muted)}
.lead-main .kmeta{display:flex;gap:12px;align-items:center;margin-top:20px}
.latest h3{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:0 0 4px;font-family:var(--sans)}
.latest ol{list-style:none;margin:0;padding:0}
.latest li{border-bottom:1px solid var(--border)}
.latest li a{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;padding:16px 0;text-decoration:none}
.ot .latest li a{color:var(--ink)}
.latest .n{font-family:var(--display);font-size:22px;font-weight:700;color:var(--accent);line-height:1.2}
.latest strong{display:block;font-family:var(--display);font-size:18px;line-height:1.3;font-weight:600;margin-top:4px}
.latest a:hover strong{color:var(--brand)}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.picks{display:flex;gap:16px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory}
.pick{flex:0 0 260px;scroll-snap-align:start;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:20px;text-decoration:none;display:flex;flex-direction:column;gap:10px;min-height:200px;transition:transform .2s var(--e)}
.ot a.pick{color:var(--ink)}
.pick:hover{transform:translateY(-3px)}
.pick strong{font-family:var(--display);font-size:18px;line-height:1.3;font-weight:600}
.pick .time{margin-top:auto}
.arrows{display:flex;gap:8px}
.report{background:var(--ink);color:var(--bg);border-radius:var(--r-lg);padding:48px;position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:48px}
.report .rA,.report .rB{position:absolute;width:260px;height:260px;border-radius:50%;border:32px solid var(--accent);bottom:-110px;left:-40px;opacity:.9}
.report .rB{left:120px;border-color:var(--coral)}
.report .tag{display:inline-flex;background:var(--accent);color:var(--accent-ink);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:var(--r-sm)}
.report h2{font-family:var(--display);font-size:40px;line-height:1.08;font-weight:700;margin-top:16px;letter-spacing:-.02em}
.report p{opacity:.85;margin-top:12px;max-width:26em}
.report ul{list-style:none;margin:0;padding:0;position:relative;z-index:1}
.report li{border-top:1px solid color-mix(in srgb,var(--bg) 22%,transparent)}
.report li:first-child{border-top:0}
.report li a{display:block;padding:18px 0;text-decoration:none}
.ot .report li a{color:var(--bg)}
.report li .k{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--accent)}
.report li strong{display:block;font-family:var(--display);font-size:21px;line-height:1.3;font-weight:600;margin-top:4px}
.report li a:hover strong{text-decoration:underline}
.report .left{position:relative;z-index:1;padding-bottom:120px}
.persp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.pc{border-top:3px solid var(--ink);padding-top:20px;text-decoration:none;display:flex;flex-direction:column;gap:12px}
.ot a.pc{color:var(--ink)}
.pc blockquote{margin:0;font-family:var(--display);font-size:22px;line-height:1.3;font-weight:600}
.pc:hover blockquote{color:var(--brand)}
.who{display:flex;gap:12px;align-items:center;font-size:14px;color:var(--muted)}
.av{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:14px;flex:none}
.av.a1{background:var(--lavender);color:var(--ink)}.av.a2{background:var(--accent);color:var(--accent-ink)}.av.a3{background:var(--brand);color:var(--on-brand)}
.who b{display:block;color:var(--ink);font-weight:600}
.topics2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px}
.tcol h2{font-family:var(--display);font-size:24px;font-weight:700;display:flex;justify-content:space-between;align-items:baseline;border-bottom:3px solid var(--brand);padding-bottom:10px;margin-bottom:20px}
.tcol h2 a{font-family:var(--sans);font-size:14px;font-weight:600;text-decoration:none}
.trow{display:grid;grid-template-columns:140px minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--border);text-decoration:none}
.ot a.trow{color:var(--ink)}
.trow .th{border-radius:var(--r-md)}
.trow .th .r{border-width:7px}
.trow strong{font-family:var(--display);font-size:17px;line-height:1.3;font-weight:600;display:block;margin-top:2px}
.trow:hover strong{color:var(--brand)}
.tbig{text-decoration:none;display:block;padding-bottom:16px;border-bottom:1px solid var(--border)}
.ot a.tbig{color:var(--ink)}
.tbig strong{display:block;font-family:var(--display);font-size:24px;line-height:1.2;font-weight:700;margin-top:10px}
.tbig:hover strong{color:var(--brand)}
.tbig p{color:var(--muted);margin-top:6px;font-size:15px}

/* footer */
.efoot{background:var(--ink);color:var(--bg);margin-top:48px;padding:56px 0 32px}
.efoot-top{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding-bottom:32px;border-bottom:1px solid color-mix(in srgb,var(--bg) 18%,transparent)}
.ot .efoot a{color:var(--bg);text-decoration:none}
.efoot .mlogo{align-items:flex-start}
.ot .efoot a.mlogo{color:var(--bg)}
.efoot .mlogo .w b{color:var(--accent)}
.efoot .mlogo small{color:color-mix(in srgb,var(--bg) 70%,transparent)}
.efoot .mlogo .logo-mark i{border-color:var(--bg)}
.efoot .mlogo .logo-mark i+i{border-color:var(--accent)}
.efoot .soc a{width:44px;opacity:.85}
.efoot-cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:32px;padding:36px 0}
.efoot h4{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;margin:0 0 12px;color:var(--accent)}
.efoot ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.efoot ul a{font-size:15px;min-height:36px;display:inline-flex;align-items:center;opacity:.85}
.efoot ul a:hover{opacity:1;text-decoration:underline}
.efoot-b{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;opacity:.75;padding-top:24px;border-top:1px solid color-mix(in srgb,var(--bg) 18%,transparent)}
.ot .ed .news{margin-top:0}
.mob-only{display:none}

@media (max-width:1100px){
  .ubar nav{display:none}
  .grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .efoot-cols{grid-template-columns:repeat(3,minmax(0,1fr))}
  .snav-in{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto}
}
@media (max-width:720px){
  .ubar{display:none}
  .mob-only{display:inline-flex}
  .mast-in{grid-template-columns:auto 1fr auto;min-height:64px;gap:8px}
  .menu-btn .lbl{display:none}
  .menu-btn{width:44px;padding:0;justify-content:center}
  .mlogo .w{font-size:26px;gap:8px}
  .mlogo .logo-mark{width:36px;height:22px}
  .mlogo .logo-mark i{width:22px;height:22px;border-width:5px}
  .mlogo .logo-mark i+i{left:13px}
  .mlogo small{display:none}
  .mast-r .nl{display:none}
  .snav-in{gap:0;min-height:48px;padding:0 8px}
  .snav a,.snav button.tab{min-height:48px;padding:0 10px;font-size:14px;flex:none}
  .snav .sep{display:none}
  .mega-in{grid-template-columns:minmax(0,1fr);gap:24px;padding:24px 16px}
  .spanel-in{padding:20px 16px}
  .sbox input{font-size:17px}
  .drawer{width:100%}
  .drawer-in{padding:16px 20px 32px}
  .ed-sec{padding:32px 0}
  .ed-h h2{font-size:24px}
  .lead{grid-template-columns:minmax(0,1fr);gap:28px}
  .lead-main h1{font-size:32px}
  .lead-main .dek{font-size:16px}
  .grid4{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .grid4 .vc{padding:8px}
  .grid4 .vc h3{font-size:15px}
  .grid4 .vc .m{font-size:12px}
  .report{grid-template-columns:minmax(0,1fr);padding:28px 20px;gap:12px}
  .report h2{font-size:30px}
  .report .left{padding-bottom:0}
  .report .rA,.report .rB{width:160px;height:160px;border-width:22px;bottom:auto;top:-70px;left:auto;right:-40px}
  .report .rB{right:60px}
  .persp{grid-template-columns:minmax(0,1fr)}
  .topics2{grid-template-columns:minmax(0,1fr);gap:32px}
  .trow{grid-template-columns:112px minmax(0,1fr)}
  .efoot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .arrows{display:none}
}

/* =====================================================================
   WordPress additions
   ===================================================================== */
html,body{margin:0}
body.ot{min-height:100vh}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link:focus{position:fixed;left:16px;top:16px;z-index:100;width:auto;height:auto;clip:auto;background:var(--surface);color:var(--ink);padding:12px 16px;border-radius:var(--r-md);box-shadow:var(--shadow-lift)}
.ot img{max-width:100%;height:auto}
.th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ubar nav ul,.snav-in ul,.efoot ul.menu{list-style:none;margin:0;padding:0}
.ubar nav ul{display:flex;gap:2px}
.snav-in>ul{display:flex;gap:2px;flex-wrap:inherit;align-items:center}
.snav-in li{list-style:none}
.snav .current-menu-item>a::after{transform:scaleX(1)}
.mega-cols{display:contents}
.mega-cols>ul{display:contents}
.mega-cols>ul>li>a{display:block;margin:0 0 12px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;min-height:0;padding:0;pointer-events:none}
.mega-cols>ul>li>ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.mega[hidden],.spanel[hidden],.drawer[hidden],.scrim[hidden]{display:none}
.scrim,.drawer{position:fixed}
.drawer{overflow-y:auto}
.ot.drawer-open{overflow:hidden}
.no-thumb .r{display:block}
.pagination{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:40px 0}
.pagination .page-numbers{min-width:44px;height:44px;display:inline-grid;place-items:center;border-radius:var(--r-pill);border:1.5px solid var(--border);text-decoration:none;color:var(--ink);padding:0 12px}
.pagination .current{background:var(--ink);color:var(--bg);border-color:var(--ink)}
/* single post / page */
.entry{max-width:760px;margin:0 auto;padding:48px 0 24px}
.entry-head .kmeta{display:flex;gap:12px;align-items:center}
.entry h1.title{font-family:var(--display);font-size:48px;line-height:1.06;letter-spacing:-.02em;margin-top:12px}
.entry .dek{font-size:19px;color:var(--muted);margin-top:14px}
.entry .hero-media{margin:28px 0;border-radius:var(--r-lg);overflow:hidden}
.entry-content{font-size:18px;line-height:1.75}
.entry-content>*{margin:0 0 1.2em}
.entry-content h2,.entry-content h3{font-family:var(--display);line-height:1.2;margin-top:1.6em}
.entry-content a{color:var(--brand)}
.entry-content blockquote{border-left:0;margin:1.6em 0;padding:24px;background:var(--surface);border-radius:var(--r-lg);font-family:var(--display);font-size:22px;line-height:1.35}
.entry-content figure{margin:1.6em 0}
.entry-content iframe,.entry-content video,.wp-block-embed__wrapper iframe{width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:var(--r-md)}
.entry-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:32px}
.entry-tags a{height:36px;padding:0 14px;display:inline-flex;align-items:center;border-radius:var(--r-pill);background:var(--surface-2);color:var(--ink);text-decoration:none;font-size:14px}
.arch-head{padding:48px 0 8px}
.arch-head h1{font-family:var(--display);font-size:44px;line-height:1.1}
.arch-head p{color:var(--muted);margin-top:8px}
.alignwide{max-width:1100px;margin-left:auto;margin-right:auto}
.alignfull{width:100vw;margin-left:50%;transform:translateX(-50%)}
/* login page inside WP */
.lg-page .lg{min-height:100vh}
.card .gsl{margin-top:4px}
@media (max-width:720px){
  .entry{padding:28px 0 16px}
  .entry h1.title{font-size:32px}
  .entry-content{font-size:17px}
  .lg-page .lg{min-height:100vh}
}

/* theme + calm mode set on <html> by the theme script */
html[data-theme="dark"] body.ot{
  --bg:#0e1a19;--surface:#152523;--surface-2:#1d302d;--ink:#f2ede4;--muted:#a9b8b4;--border:#2c403d;
  --brand:#4fc1b4;--brand-strong:#7fd6cb;--on-brand:#0e1a19;--accent:#f0b955;--coral:#f08a74;--lavender:#5d55a3;
  --focus:#4fc1b4;--success:#6cc68e;--danger:#f2867d;
  --shadow-card:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
  --shadow-lift:0 12px 32px rgba(0,0,0,.5);
}
html.otz-calm .ot *,html.otz-calm .ot *::before,html.otz-calm .ot *::after{animation:none!important;transition:opacity .2s,background-color .2s,border-color .2s,color .2s!important}
html.otz-calm .ot .vc:hover,html.otz-calm .ot .feat:hover,html.otz-calm .ot .btn:hover,html.otz-calm .ot .pick:hover{transform:none}
html.otz-calm .ot .done svg *{stroke-dashoffset:0}
.done[hidden],#otz-form-wrap[hidden]{display:none}
.remember input:focus-visible + .tg{outline:3px solid var(--focus);outline-offset:2px}
.remember{position:relative}
.gsl a{border-radius:var(--r-md)!important}
body .ed{display:contents}
.admin-bar .snav{top:32px}
@media (max-width:782px){.admin-bar .snav{top:46px}}
@media (max-width:600px){.admin-bar .snav{top:0}}
.drawer ul ul{padding-left:12px;margin-bottom:8px}
.drawer ul li>a[href="#"]{pointer-events:none;color:var(--muted);font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;min-height:32px}