/* ============================================================
   Synas Media — main.css
   Design system extracted from reference/hem.html + reference/international.html,
   rebuilt framework-free with the mandatory dual-theme system (brief §2).
   Dark = Deep Navy (default) · Light = Charcoal & Cream.
   Hero / CTA band / contact-dark / footer stay DARK in BOTH modes (.always-dark).
   ============================================================ */

/* ---------- Fonts (self-hosted, brief §A2/§13 — no CDN) ---------- */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 600;font-display:swap;src:url('../fonts/fraunces-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 600;font-display:swap;src:url('../fonts/fraunces-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 600;font-display:swap;src:url('../fonts/fraunces-normal-vietnamese.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:300 500;font-display:swap;src:url('../fonts/fraunces-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:300 500;font-display:swap;src:url('../fonts/fraunces-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:300 500;font-display:swap;src:url('../fonts/fraunces-italic-vietnamese.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}
@font-face{font-family:'Familjen Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/familjen-grotesk-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Familjen Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/familjen-grotesk-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Familjen Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/familjen-grotesk-normal-vietnamese.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}
@font-face{font-family:'Familjen Grotesk';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/familjen-grotesk-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Familjen Grotesk';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/familjen-grotesk-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Familjen Grotesk';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/familjen-grotesk-italic-vietnamese.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}

/* ---------- Theme tokens (brief §2 — verbatim) ---------- */
:root, :root[data-theme="dark"] {
  --bg:#0B1B2E; --surface:#14273D; --surface2:#1B3049;
  --heading:#EAF1F8; --body:#9DB2C7; --muted:#6E8299;
  --accent:#45D8C0; --accent-hover:#2BAE96; --accent-ink:#07131F;
  --teal-text:#45D8C0;
  --border:rgba(255,255,255,.09); --ghost:rgba(255,255,255,.22);
  --hero-bg:#0B1B2E; --hero-surface:#14273D; --hero-heading:#EAF1F8;
  --hero-body:#9DB2C7; --hero-border:rgba(255,255,255,.10);
  --status-warn:#E8B44F;
  --nav-surface:rgba(20,39,61,.20);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:#F4F1EA; --surface:#FBF9F5; --surface2:#FFFFFF;
    --heading:#1A1D21; --body:#4A4E54; --muted:#8A8578;
    --accent:#1F5F54; --accent-hover:#17493F; --accent-ink:#F4F1EA;
    --teal-text:#1F5F54;
    --border:rgba(26,29,33,.12); --ghost:rgba(26,29,33,.28);
    --hero-bg:#16181B; --hero-surface:#1F2226; --hero-heading:#F4F1EA;
    --hero-body:#B9BCB4; --hero-border:rgba(244,241,234,.12);
    --nav-surface:rgba(251,249,245,.20);
  }
}
:root[data-theme="light"] {
  --bg:#F4F1EA; --surface:#FBF9F5; --surface2:#FFFFFF;
  --heading:#1A1D21; --body:#4A4E54; --muted:#8A8578;
  --accent:#1F5F54; --accent-hover:#17493F; --accent-ink:#F4F1EA;
  --teal-text:#1F5F54;
  --border:rgba(26,29,33,.12); --ghost:rgba(26,29,33,.28);
  --hero-bg:#16181B; --hero-surface:#1F2226; --hero-heading:#F4F1EA;
  --hero-body:#B9BCB4; --hero-border:rgba(244,241,234,.12);
  --nav-surface:rgba(251,249,245,.20);
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{font-family:'Familjen Grotesk',system-ui,sans-serif;background:var(--bg);color:var(--body);-webkit-font-smoothing:antialiased;line-height:1.5;transition:background-color .35s,color .35s;}
img,svg,video,iframe{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;background:none;border:none;cursor:pointer;color:inherit;}
:focus-visible{outline:2px solid var(--teal-text);outline-offset:3px;}
/* logical inset (not left:) so the off-screen link can't widen the scroll area on the RTL page */
.skip-link{position:absolute;inset-inline-start:-999px;top:0;z-index:100;background:var(--accent);color:var(--accent-ink);padding:10px 18px;border-radius:2px;}
.skip-link:focus{inset-inline-start:12px;top:12px;}
::selection{background:var(--accent);color:var(--accent-ink);}

/* ---------- Typography ---------- */
.font-display,h1,h2,h3,h4{font-family:'Fraunces',serif;font-optical-sizing:auto;font-weight:400;}
.t-heading{color:var(--heading);} .t-body{color:var(--body);} .t-muted{color:var(--muted);}
.t-accent{color:var(--teal-text);} .t-border{border-color:var(--border);}
h1{font-size:clamp(2.7rem,7vw,4.5rem);line-height:.98;letter-spacing:-.02em;color:var(--heading);}
.h2{font-size:clamp(2.1rem,4.5vw,3rem);line-height:1.05;letter-spacing:-.015em;color:var(--heading);}
.h3{font-size:1.5rem;color:var(--heading);}
.italic{font-style:italic;} .font-light{font-weight:300;} .font-medium{font-weight:500;}
.section-tag{font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:var(--teal-text);font-weight:500;}
.lede{font-size:clamp(1.1rem,2vw,1.25rem);line-height:1.65;max-width:42rem;}
.small{font-size:.875rem;} .xs{font-size:.75rem;} .tac{text-align:center;}
.kicker{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-text);margin-bottom:.5rem;}

/* ---------- Layout ---------- */
.wrap{max-width:72rem;margin-inline:auto;padding-inline:1.5rem;}
@media(min-width:64rem){.wrap{padding-inline:2.5rem;}}
.wrap-narrow{max-width:48rem;margin-inline:auto;padding-inline:1.5rem;}
section{position:relative;}
[id]{scroll-margin-top:5rem;}
.sec{padding-block:6rem;} .sec-sm{padding-block:4rem;} .sec-xs{padding-block:3.5rem;}
.border-t{border-top:1px solid var(--border);} .border-b{border-bottom:1px solid var(--border);}
.surface{background:var(--surface);transition:background-color .35s;}
.grid{display:grid;gap:1.5rem;}
.grid-2{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);gap:2rem;} .grid-6{grid-template-columns:repeat(6,1fr);gap:2rem;}
.split{display:grid;gap:3.5rem;align-items:center;}
@media(min-width:64rem){.split{grid-template-columns:1fr 1fr;}}
.flag-grid{display:grid;gap:2.5rem;align-items:center;}
@media(min-width:64rem){.flag-grid{grid-template-columns:3fr 2fr;}}
@media(max-width:47.9rem){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}.grid-6{grid-template-columns:repeat(2,1fr);}}
@media(min-width:48rem) and (max-width:63.9rem){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}.grid-6{grid-template-columns:repeat(3,1fr);}}
.mt-1{margin-top:.5rem;}.mt-2{margin-top:1rem;}.mt-3{margin-top:1.5rem;}.mt-4{margin-top:2rem;}.mt-5{margin-top:2.5rem;}.mt-6{margin-top:3rem;}.mt-7{margin-top:3.5rem;}
.mb-2{margin-bottom:1rem;}.mb-3{margin-bottom:1.5rem;}.mb-4{margin-bottom:2rem;}
.stack>*+*{margin-top:1.25rem;}
.row{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;}
.row-center{justify-content:center;}

/* ---------- Always-dark sections (§2: hero, CTA band, footer stay dark in BOTH modes) ---------- */
.always-dark{background:var(--hero-bg);transition:background-color .35s;color:var(--hero-body);}
.always-dark h1,.always-dark .h2,.always-dark .h-heading{color:var(--hero-heading);}
.always-dark .h-body{color:var(--hero-body);}
.always-dark .section-tag,.always-dark .accent{color:#45D8C0;} /* hard-coded bright teal per §2 */
.always-dark .btn-primary{background:#45D8C0;color:#07131F;}
.always-dark .btn-primary:hover{background:#2BAE96;}
.always-dark .btn-ghost{border-color:rgba(255,255,255,.25);color:var(--hero-heading);}
.always-dark .btn-ghost:hover{border-color:#45D8C0;color:#45D8C0;}
.hero-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 80% 8%,rgba(69,216,192,.16) 0%,transparent 52%),radial-gradient(ellipse at 8% 92%,rgba(69,216,192,.07) 0%,transparent 55%);}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.04;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");}
.hero{min-height:92vh;display:flex;align-items:center;overflow:hidden;}
.hero-inner{position:relative;z-index:10;width:100%;padding-top:7rem;padding-bottom:4rem;}
.hero-sub{padding-block:6rem;overflow:hidden;}
.rel{position:relative;z-index:10;}

/* ---------- Buttons ---------- */
.btn-primary{background:var(--accent);color:var(--accent-ink);padding:13px 26px;font-weight:500;letter-spacing:.02em;display:inline-flex;align-items:center;gap:10px;transition:background .3s,transform .3s;border-radius:2px;}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px);}
.btn-ghost{border:1px solid var(--ghost);color:var(--heading);padding:12px 26px;font-weight:500;display:inline-flex;align-items:center;gap:10px;transition:border-color .3s,color .3s;border-radius:2px;}
.btn-ghost:hover{border-color:var(--teal-text);color:var(--teal-text);}
.btn-sm{padding:10px 20px;font-size:.875rem;}
.arrow{display:inline-block;transition:transform .3s;}
a:hover .arrow{transform:translateX(4px);}
[dir="rtl"] .arrow{transform:scaleX(-1);}
[dir="rtl"] a:hover .arrow{transform:scaleX(-1) translateX(4px);}

/* ---------- Nav ---------- */
#nav{position:fixed;top:0;left:0;right:0;z-index:50;background:transparent;transition:background .35s,border-color .35s;}
#nav.scrolled{background:var(--surface);border-bottom:1px solid var(--border);backdrop-filter:blur(12px);}
/* ~80% transparent bar, blur kept (stronger to keep text legible) */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  #nav.scrolled{background:var(--nav-surface);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);}
}
#nav .bar{display:flex;align-items:center;justify-content:space-between;padding-block:1rem;}
#nav .links{display:none;align-items:center;gap:1.5rem;font-size:.875rem;}
@media(min-width:48rem){#nav .links{display:flex;}}
.nav-link{position:relative;color:var(--heading);}
#nav:not(.scrolled) .over-dark .nav-link{color:var(--hero-heading);}
.nav-link::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:1px;background:var(--teal-text);transition:width .3s;}
.nav-link:hover::after{width:100%;}
.nav-logo{height:2.25rem;width:auto;}
.footer-logo{height:1.75rem;width:auto;}
.lang-chip{font-size:11px;letter-spacing:.08em;padding:4px 8px;border:1px solid var(--border);border-radius:2px;color:var(--muted);transition:color .3s,border-color .3s;}
.lang-chip.on,.lang-chip:hover{color:var(--teal-text);border-color:var(--teal-text);}
.theme-toggle{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:2px;color:var(--heading);transition:border-color .3s,color .3s;}
.theme-toggle:hover{border-color:var(--teal-text);color:var(--teal-text);}
.theme-toggle .icon-sun{display:none;}
:root[data-theme="light"] .theme-toggle .icon-sun{display:block;}
:root[data-theme="light"] .theme-toggle .icon-moon{display:none;}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .theme-toggle .icon-sun{display:block;}
  :root:not([data-theme="dark"]) .theme-toggle .icon-moon{display:none;}
}
.menu-btn{display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;color:var(--heading);}
@media(min-width:48rem){.menu-btn{display:none;}}
#mobile-menu{display:none;background:var(--surface);border-bottom:1px solid var(--border);padding:1rem 1.5rem 1.5rem;}
#mobile-menu.open{display:block;}
#mobile-menu a{display:block;padding:.65rem 0;color:var(--heading);font-size:1rem;}
.nav-cta-mobile{display:inline-flex;}
@media(min-width:48rem){.nav-cta-mobile{display:none;}}

/* ---------- Language switch (flagged) ---------- */
.lang-switch{display:inline-flex;align-items:center;gap:.35rem;padding:4px 9px;border:1px solid var(--border);border-radius:999px;color:var(--heading);font-weight:500;font-size:.72rem;line-height:1;transition:border-color .3s,color .3s,background .3s;}
.lang-switch .flag{width:24px;height:16px;box-shadow:0 0 0 .5px rgba(0,0,0,.15);}
.lang-switch:hover{border-color:var(--accent);color:var(--accent);background:rgba(69,216,192,.08);}
#nav:not(.scrolled) .over-dark .lang-switch{color:var(--hero-heading);border-color:rgba(255,255,255,.28);}
#nav:not(.scrolled) .over-dark .lang-switch:hover{border-color:#45D8C0;color:#45D8C0;}
#nav .bar > .row{flex-wrap:nowrap;}
.lang-chip-m{display:inline-flex;align-items:center;justify-content:center;padding:6px 7px;border:1px solid var(--border);border-radius:999px;color:var(--heading);line-height:0;}
.lang-chip-m .flag{width:36px;height:24px;}
#nav:not(.scrolled) .over-dark .lang-chip-m{color:var(--hero-heading);border-color:rgba(255,255,255,.28);}
@media(min-width:48rem){.lang-chip-m{display:none;}}
.flag{width:12px;height:8px;border-radius:2px;flex:none;display:block;box-shadow:0 0 0 1px rgba(0,0,0,.12);}
#mobile-menu .flag{display:inline-block;vertical-align:-1px;margin-inline-end:.4rem;}

/* ---------- Cards ---------- */
.card{background:var(--surface);border:1px solid var(--border);transition:transform .4s cubic-bezier(.4,0,.2,1),border-color .4s,background-color .35s;display:block;padding:1.75rem;}
.card:hover{transform:translateY(-4px);border-color:var(--teal-text);}
.card2{background:var(--surface2);}
.card .h3{font-size:1.5rem;} .card .kicker{margin-bottom:.5rem;}
.card p.desc{font-size:.875rem;margin-top:.75rem;line-height:1.6;}
.card .cta{margin-top:1.25rem;font-size:.875rem;color:var(--teal-text);}
.icon-lg{width:30px;height:30px;color:var(--teal-text);}

/* ---------- Logo / partner strips ---------- */
.logo-strip,.partner-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;column-gap:3rem;row-gap:1.75rem;}
.logo-strip img,.partner-strip img{filter:grayscale(100%) opacity(.55);transition:filter .3s,opacity .3s;width:auto;}
.logo-strip a:hover img,.partner-strip a:hover img{filter:none;opacity:1;}
.logo-h8{height:2rem;} .logo-h9{height:2.25rem;} .logo-h10{height:2.5rem;} .logo-h6{height:1.5rem;} .logo-h4{height:1rem;}
/* §2: grayscale-hover applies ONLY to customer/partner logos — never the Synas logo. */

/* ---------- Trust band ---------- */
/* The partner logos are mixed polarity (some are white/light artwork, e.g. Swedrive,
   Gibon, Linnéuniversitetet). The band keeps the normal page background in both modes:
   - Dark mode (navy): brighter baseline (.75) so every logo reads.
   - Light mode (cream): logos are forced to dark silhouettes (brightness 0) so the
     light-artwork ones don't vanish on the pale background.
   Full brand colour returns on hover in both modes. */
.trust-band .logo-strip img{filter:grayscale(100%) opacity(.75);}
.trust-band .logo-strip a:hover img{filter:none;opacity:1;}
:root[data-theme="light"] .trust-band .logo-strip img{filter:brightness(0) opacity(.6);}
:root[data-theme="light"] .trust-band .logo-strip a:hover img{filter:none;opacity:1;}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .trust-band .logo-strip img{filter:brightness(0) opacity(.6);}
  :root:not([data-theme="dark"]) .trust-band .logo-strip a:hover img{filter:none;opacity:1;}
}

/* ---------- Laurels ---------- */
.laurel{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;}
.laurel-img{height:96px;display:flex;align-items:center;justify-content:center;}
.laurel-img img{max-height:100%;width:auto;object-fit:contain;}
a.laurel{transition:transform .3s;}
a.laurel:hover{transform:translateY(-4px);}
a.laurel:hover .laurel-award{color:var(--teal-text);}
.laurel-award{font-size:.75rem;color:var(--heading);font-weight:500;}
.laurel-note{font-size:11px;color:var(--muted);line-height:1.3;}
.laurel-small img{max-height:64px;width:auto;filter:opacity(.75);transition:filter .3s;}
.laurel-small:hover img{filter:opacity(1);}
:root[data-theme="light"] .laurel-img img,:root[data-theme="light"] .laurel-small img{filter:invert(1) opacity(.7);}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .laurel-img img,:root:not([data-theme="dark"]) .laurel-small img{filter:invert(1) opacity(.7);}
}
/* laurel artwork is white-on-transparent; inverting in light mode keeps it visible.
   (Laurels are festival marks, not the Synas logo — the no-filter rule applies to the logo only.) */

/* ---------- Media frames ---------- */
.vimeo-frame{background:var(--surface2);aspect-ratio:16/9;overflow:hidden;}
.vimeo-frame iframe{width:100%;height:100%;border:0;}

/* ---------- Clickable video tile (muted preview + play → lightbox) ---------- */
.video-tile{position:relative;}
.video-tile .vimeo-frame iframe{pointer-events:none;} /* preview only — the button handles the click */
.video-play-btn{position:absolute;inset:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:rgba(7,19,31,.18);transition:background .3s;}
.video-play-btn:hover,.video-play-btn:focus-visible{background:rgba(7,19,31,.4);}
.play-ico{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(69,216,192,.94);transition:transform .3s;}
.video-play-btn:hover .play-ico,.video-play-btn:focus-visible .play-ico{transform:scale(1.08);}

/* ---------- Synas Bio: film video facades, IMDb link, soundtrack ---------- */
.video-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));}
.film-video{margin:0;}
.film-video .video-tile{border:1px solid var(--border);overflow:hidden;background:var(--surface2);}
.video-thumb{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;}
.video-cap{margin-top:.7rem;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--heading);font-weight:500;}
.film-soundtrack{max-width:40rem;}
.film-links{display:flex;flex-wrap:wrap;gap:1rem;}
.imdb-link{display:inline-flex;align-items:center;gap:.6rem;font-size:.9rem;color:var(--heading);}
.imdb-link:hover{color:var(--teal-text);}
.imdb-badge{background:#F5C518;color:#07131F;font-weight:700;font-size:.72rem;letter-spacing:.01em;padding:.18rem .42rem;border-radius:3px;}

/* ---------- Video lightbox (modal, built by main.js) ---------- */
body.modal-open{overflow:hidden;}
.video-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:1.5rem;}
.video-modal[hidden]{display:none;}
.video-modal-backdrop{position:absolute;inset:0;background:rgba(4,10,17,.86);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
.video-modal-dialog{position:relative;z-index:1;width:100%;max-width:64rem;}
.video-modal-frame{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5);}
.video-modal-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.video-modal-close{position:absolute;top:-2.9rem;right:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;color:#EAF1F8;border:1px solid rgba(255,255,255,.25);border-radius:2px;transition:border-color .3s,color .3s;}
.video-modal-close:hover,.video-modal-close:focus-visible{border-color:#45D8C0;color:#45D8C0;}
@media(max-width:40rem){.video-modal{padding:1rem;}.video-modal-close{top:auto;bottom:-2.9rem;right:50%;transform:translateX(50%);}}
.media-frame{position:relative;overflow:hidden;border:1px solid var(--border);}
.media-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.media-fade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.7) 100%);}
.play-btn{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(69,216,192,.92);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transition:transform .3s;}
.play-btn:hover{transform:translate(-50%,-50%) scale(1.06);}
.portrait-frame{aspect-ratio:4/5;position:relative;overflow:hidden;background:var(--surface2);border:1px solid var(--border);}
.portrait-badge{position:absolute;bottom:-1rem;left:-1rem;padding:.5rem 1rem;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500;background:var(--accent);color:var(--accent-ink);}
.portrait-wrap{position:relative;}
.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none;}
.dot-ok{background:#45D8C0;} .dot-warn{background:var(--status-warn);}
.status-line{display:flex;align-items:center;gap:.5rem;font-size:.75rem;}

/* ---------- Process steps ---------- */
.step-num{font-family:'Fraunces',serif;font-style:italic;font-size:2.25rem;color:var(--teal-text);}
.step h4{font-size:1.125rem;margin-top:.75rem;color:var(--heading);font-family:'Fraunces',serif;}
.step p{font-size:.875rem;margin-top:.25rem;}

/* ---------- Film grid + filters (Synas Bio) ---------- */
.chips{display:flex;flex-wrap:wrap;gap:.6rem;}
.chip{font-size:.8rem;letter-spacing:.04em;padding:8px 16px;border:1px solid var(--border);border-radius:2px;color:var(--body);transition:color .3s,border-color .3s,background .3s;}
.chip:hover{border-color:var(--teal-text);color:var(--teal-text);}
.chip.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);}
.film-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(2,1fr);}
@media(min-width:48rem){.film-grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:64rem){.film-grid{grid-template-columns:repeat(4,1fr);}}
.film-card{position:relative;background:var(--surface);border:1px solid var(--border);transition:transform .4s,border-color .4s;}
.film-card:hover{transform:translateY(-4px);border-color:var(--teal-text);}
.film-card .poster{aspect-ratio:2/3;overflow:hidden;}
.film-card .poster img{width:100%;height:100%;object-fit:cover;}
.film-card .meta{padding:.9rem 1rem 1.1rem;}
.film-card .title{font-family:'Fraunces',serif;font-size:1.05rem;color:var(--heading);}
.film-card .sub{font-size:.75rem;color:var(--muted);margin-top:.25rem;}
.film-card.hidden{display:none;}
a.film-card{display:block;color:inherit;text-decoration:none;}
a.film-card:hover .title{color:var(--teal-text);}
.film-card .poster-ph{aspect-ratio:2/3;background:linear-gradient(160deg,var(--surface2),var(--surface));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;text-align:center;padding:1rem;}
.film-card .poster-ph .pt{font-family:'Fraunces',Georgia,serif;font-size:1.15rem;color:var(--heading);line-height:1.1;}
.film-card .poster-ph .pn{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.award-badge{position:absolute;top:.6rem;right:.6rem;z-index:2;background:rgba(7,19,31,.82);color:#45D8C0;font-size:.7rem;letter-spacing:.06em;padding:4px 8px;border-radius:2px;border:1px solid rgba(69,216,192,.4);}
[dir="rtl"] .award-badge{right:auto;left:.6rem;}

/* ---------- Prose (kunskap articles, case pages) ---------- */
.prose{max-width:44rem;}
.prose p{margin-top:1.1rem;line-height:1.7;}
.prose h2{font-size:1.6rem;margin-top:2.5rem;color:var(--heading);}
.prose h3{font-size:1.25rem;margin-top:2rem;color:var(--heading);}
.prose ul,.prose ol{margin-top:1rem;padding-inline-start:1.4rem;}
.prose li{margin-top:.4rem;line-height:1.6;}
.prose a{color:var(--teal-text);}
.prose blockquote{margin-top:1.5rem;border-inline-start:2px solid var(--accent);padding-inline-start:1.25rem;font-style:italic;color:var(--heading);}
.credit-list dt{color:var(--muted);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;margin-top:1rem;}
.credit-list dd{color:var(--heading);margin-top:.2rem;}
.breadcrumbs{font-size:.8rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;}
.breadcrumbs a{color:var(--muted);} .breadcrumbs a:hover{color:var(--teal-text);}
.quote-block{background:var(--surface);border:1px solid var(--border);padding:2rem;}
.quote-block p{font-style:italic;line-height:1.7;color:var(--heading);}
.quote-block cite{display:block;margin-top:1rem;font-style:normal;font-size:.875rem;color:var(--muted);}

/* ---------- Forms (Netlify) ---------- */
.form{display:grid;gap:1rem;text-align:start;}
.form label{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:.35rem;}
.form input,.form textarea{width:100%;background:var(--surface2);border:1px solid var(--border);color:var(--heading);padding:.8rem 1rem;border-radius:2px;font:inherit;transition:border-color .3s;}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--teal-text);}
.form .hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden;}
.form-success{display:none;background:var(--surface);border:1px solid var(--accent);padding:2rem;text-align:center;color:var(--heading);}
.form-success.show{display:block;}
.form.sent{display:none;}

/* ---------- Map embed + social links ---------- */
.map-frame{aspect-ratio:4/3;overflow:hidden;border:1px solid var(--border);border-radius:2px;background:var(--surface2);}
.map-frame iframe{width:100%;height:100%;border:0;display:block;filter:invert(.9) hue-rotate(180deg);}
/* the invert trick tones the map to the dark UI; drop it whenever the light palette is active */
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .map-frame iframe{filter:none;} }
:root[data-theme="light"] .map-frame iframe{filter:none;}
.social-row{display:flex;flex-wrap:wrap;gap:.75rem;}
.social-link{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:2px;color:var(--heading);transition:color .3s,border-color .3s,background .3s;}
.social-link:hover{color:var(--accent);border-color:var(--accent);}
.social-link svg{width:20px;height:20px;}

/* ---------- Film detail pages ---------- */
.film-meta{display:flex;flex-wrap:wrap;gap:.4rem .85rem;align-items:center;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--hero-body);}
.film-meta .sep{opacity:.4;}
.film-badges{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.5rem;}
.film-badges .award-badge{position:static;background:rgba(69,216,192,.1);}
.film-layout{display:grid;gap:2.5rem;align-items:start;}
@media(min-width:60rem){.film-layout{grid-template-columns:minmax(0,330px) 1fr;gap:4rem;}}
.film-poster{border:1px solid var(--border);border-radius:2px;overflow:hidden;background:var(--surface2);position:sticky;top:6rem;}
.film-poster img{width:100%;height:auto;display:block;}
.poster-placeholder{aspect-ratio:2/3;border:1px solid var(--border);border-radius:2px;background:linear-gradient(160deg,var(--surface),var(--surface2));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem;text-align:center;padding:1.75rem;}
.poster-placeholder .ph-title{font-family:'Fraunces',Georgia,serif;font-size:1.7rem;line-height:1.1;color:var(--heading);}
.poster-placeholder .ph-note{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.credits{margin-top:1rem;}
.credit-row{display:grid;grid-template-columns:minmax(8rem,10rem) 1fr;gap:1.25rem;padding:.7rem 0;border-top:1px solid var(--border);}
.credit-row:last-child{border-bottom:1px solid var(--border);}
.credit-role{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-top:.15rem;}
.credit-name{color:var(--heading);line-height:1.5;}
.cast-list{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem;}
.cast-chip{font-size:.85rem;padding:.4rem .85rem;border:1px solid var(--border);border-radius:2px;color:var(--body);transition:border-color .3s,color .3s;}
.cast-chip:hover{border-color:var(--teal-text);color:var(--heading);}
.stills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:1.5rem;}
.stills-grid img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/9;border:1px solid var(--border);border-radius:2px;display:block;}

/* ---------- Footer ---------- */
footer .foot-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:2.5rem;}
footer .foot-links{display:flex;flex-wrap:wrap;gap:1.25rem;font-size:.875rem;}
footer .foot-links a:hover{opacity:.7;}
footer .legal{font-size:.75rem;}
footer .legal-row{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;font-size:.75rem;padding-bottom:1.5rem;color:var(--hero-body);}
footer .legal-row a:hover{color:#45D8C0;}

/* ---------- Motion ---------- */
.fade-up{opacity:0;transform:translateY(18px);transition:opacity .8s ease-out,transform .8s ease-out;}
.fade-up.visible{opacity:1;transform:translateY(0);}
.d1{transition-delay:.1s;} .d15{transition-delay:.15s;} .d2{transition-delay:.2s;} .d25{transition-delay:.25s;} .d4{transition-delay:.4s;} .d55{transition-delay:.55s;} .d08{transition-delay:.08s;} .d16{transition-delay:.16s;} .d24{transition-delay:.24s;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .fade-up{opacity:1;transform:none;transition:none;}
  .card,.btn-primary,a.laurel,.film-card{transition:none;}
}

/* ---------- Hero stat row (EN) ---------- */
.stat-row{display:flex;flex-wrap:wrap;column-gap:2.5rem;row-gap:1rem;font-size:.875rem;}
.stat-row .stat{display:flex;align-items:center;gap:.5rem;}
.stat-row .num{font-family:'Fraunces',serif;font-size:1.5rem;color:#45D8C0;}

/* ============================================================
   MasterClass (/kunskap/masterclass/)
   Every clip in this section is a VERTICAL 9:16 social reel (720x1280), so the
   section's visual signature is a wall of portrait tiles rather than the 16:9
   frames used everywhere else on the site.
   ============================================================ */

/* ---------- Reel tile (portrait video facade → existing .video-modal lightbox) ---------- */
/* 150px keeps two columns at 375px wide — a single full-width column would make
   14 portrait tiles an endless scroll on a phone. */
.reel-wall{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));}
.reel{position:relative;display:block;color:inherit;}
/* display:block matters — the frame is a <span> inside a <button>, and an inline box
   would ignore aspect-ratio/overflow and misplace the absolutely positioned badges. */
.reel-frame{display:block;position:relative;aspect-ratio:9/16;overflow:hidden;background:var(--surface2);border:1px solid var(--border);border-radius:3px;transition:border-color .35s,transform .35s cubic-bezier(.4,0,.2,1);}
.reel:hover .reel-frame,.reel:focus-visible .reel-frame{border-color:var(--teal-text);transform:translateY(-4px);}
.reel-frame img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.4,0,.2,1),filter .35s;}
.reel:hover .reel-frame img{transform:scale(1.045);}
.reel-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,10,17,.5) 0%,transparent 26%,transparent 48%,rgba(4,10,17,.82) 100%);}
.reel-num{position:absolute;top:.55rem;inset-inline-start:.6rem;font-family:'Fraunces',serif;font-style:italic;font-size:1.5rem;line-height:1;color:#EAF1F8;text-shadow:0 1px 12px rgba(0,0,0,.5);}
.reel-dur{position:absolute;top:.6rem;inset-inline-end:.6rem;font-size:.66rem;letter-spacing:.06em;padding:3px 6px;border-radius:2px;background:rgba(4,10,17,.7);color:#EAF1F8;font-variant-numeric:tabular-nums;}
.reel-label{position:absolute;inset-inline:.7rem;bottom:.7rem;font-size:.8rem;line-height:1.3;color:#EAF1F8;font-weight:500;text-shadow:0 1px 10px rgba(0,0,0,.6);}
.reel-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(69,216,192,.94);color:#07131F;opacity:0;transition:opacity .3s,transform .3s;}
.reel:hover .reel-play,.reel:focus-visible .reel-play{opacity:1;transform:translate(-50%,-50%) scale(1.06);}
@media(hover:none){.reel-play{opacity:.92;}}
.reel-part{position:absolute;bottom:.7rem;inset-inline-end:.7rem;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:#45D8C0;font-weight:600;text-shadow:0 1px 8px rgba(0,0,0,.7);}
/* watched state — set from localStorage by main.js */
.reel.is-watched .reel-frame img{filter:saturate(.55) brightness(.8);}
.reel-check{position:absolute;top:.55rem;inset-inline-end:.6rem;width:20px;height:20px;border-radius:50%;background:#45D8C0;color:#07131F;display:none;align-items:center;justify-content:center;}
.reel.is-watched .reel-check{display:flex;}
.reel.is-watched .reel-dur{display:none;}

/* ---------- Course cards on the section hub ---------- */
.course-card{position:relative;display:grid;gap:1.75rem;padding:1.9rem;background:var(--surface);border:1px solid var(--border);border-radius:3px;transition:border-color .4s,transform .4s cubic-bezier(.4,0,.2,1);}
.course-card:hover{border-color:var(--teal-text);transform:translateY(-4px);}
@media(min-width:52rem){.course-card{grid-template-columns:150px 1fr;align-items:start;gap:2.25rem;}}
.course-card .cc-poster{aspect-ratio:9/16;overflow:hidden;border-radius:3px;border:1px solid var(--border);background:var(--surface2);max-width:150px;}
.course-card .cc-poster img{width:100%;height:100%;object-fit:cover;}
.course-num{font-family:'Fraunces',serif;font-style:italic;font-size:.95rem;color:var(--teal-text);}
.course-card h3{font-size:1.6rem;color:var(--heading);margin-top:.3rem;line-height:1.15;}
.course-meta{display:flex;flex-wrap:wrap;gap:.35rem .8rem;font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-top:.7rem;}
.course-meta .sep{opacity:.45;}

/* ---------- Progress (localStorage-backed) ---------- */
.progress-wrap{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;}
.progress-bar{flex:1 1 8rem;min-width:8rem;max-width:18rem;height:4px;background:var(--border);border-radius:99px;overflow:hidden;}
.progress-bar span{display:block;height:100%;width:0;background:var(--accent);border-radius:99px;transition:width .5s cubic-bezier(.4,0,.2,1);}
.progress-text{font-size:.78rem;letter-spacing:.06em;color:var(--muted);font-variant-numeric:tabular-nums;}
.always-dark .progress-bar{background:rgba(255,255,255,.14);}
.always-dark .progress-bar span{background:#45D8C0;}
.always-dark .progress-text{color:var(--hero-body);}
.progress-reset{font-size:.72rem;letter-spacing:.06em;color:var(--muted);text-decoration:underline;text-underline-offset:3px;}
.progress-reset:hover{color:var(--teal-text);}

/* ---------- Episode page: playlist rail ---------- */
.ep-layout{display:grid;gap:3rem;align-items:start;}
@media(min-width:64rem){.ep-layout{grid-template-columns:minmax(0,1fr) 20rem;gap:4rem;}}
.ep-rail{position:sticky;top:5.5rem;background:var(--surface);border:1px solid var(--border);border-radius:3px;padding:1.35rem;}
@media(max-width:63.9rem){.ep-rail{position:static;}}
.ep-rail h2{font-size:1.05rem;color:var(--heading);}
.ep-list{list-style:none;margin-top:1rem;display:grid;gap:.2rem;max-height:26rem;overflow-y:auto;scrollbar-width:thin;}
.ep-list a{display:grid;grid-template-columns:2rem 1fr;gap:.7rem;align-items:center;padding:.55rem .6rem;border-radius:2px;font-size:.85rem;line-height:1.35;color:var(--body);border-inline-start:2px solid transparent;transition:background .25s,color .25s,border-color .25s;}
.ep-list a:hover{background:var(--surface2);color:var(--heading);}
.ep-list .n{font-family:'Fraunces',serif;font-style:italic;color:var(--muted);font-size:.9rem;text-align:center;}
.ep-list a[aria-current="page"]{background:var(--surface2);color:var(--heading);border-inline-start-color:var(--accent);font-weight:500;}
.ep-list a[aria-current="page"] .n{color:var(--teal-text);}
.ep-list li.is-watched a .n::after{content:'✓';display:block;font-style:normal;font-size:.6rem;color:var(--teal-text);line-height:1;margin-top:-2px;}

/* ---------- Episode page: prev/next ---------- */
.ep-nav{display:grid;gap:1rem;margin-top:3rem;}
@media(min-width:48rem){.ep-nav{grid-template-columns:1fr 1fr;}}
.ep-nav a{display:block;padding:1.25rem 1.4rem;background:var(--surface);border:1px solid var(--border);border-radius:3px;transition:border-color .3s,transform .3s;}
.ep-nav a:hover{border-color:var(--teal-text);transform:translateY(-2px);}
.ep-nav .dir{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);}
.ep-nav .ttl{color:var(--heading);margin-top:.35rem;font-family:'Fraunces',serif;font-size:1.05rem;line-height:1.25;}
.ep-nav .next{text-align:end;}

/* ---------- Takeaway checklist (persisted) ---------- */
.checklist{list-style:none;display:grid;gap:.6rem;margin-top:1.25rem;}
.checklist li{margin:0;}
.check{display:grid;grid-template-columns:1.15rem 1fr;gap:.85rem;align-items:start;width:100%;text-align:start;padding:.85rem 1.05rem;background:var(--surface2);border:1px solid var(--border);border-radius:3px;line-height:1.55;color:var(--body);transition:border-color .3s,color .3s;font-size:.95rem;}
.check:hover{border-color:var(--teal-text);}
.check .box{width:1.15rem;height:1.15rem;border:1.5px solid var(--ghost);border-radius:3px;display:flex;align-items:center;justify-content:center;margin-top:.15rem;transition:background .25s,border-color .25s;}
.check .box svg{width:.7rem;height:.7rem;opacity:0;transition:opacity .2s;color:var(--accent-ink);}
.check[aria-pressed="true"]{color:var(--heading);}
.check[aria-pressed="true"] .box{background:var(--accent);border-color:var(--accent);}
.check[aria-pressed="true"] .box svg{opacity:1;}
.check[aria-pressed="true"] .txt{text-decoration:line-through;text-decoration-color:var(--muted);text-decoration-thickness:1px;opacity:.72;}

/* ---------- Accordion (FAQ) ---------- */
.acc{border-top:1px solid var(--border);}
.acc details{border-bottom:1px solid var(--border);}
.acc summary{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.3rem 0;cursor:pointer;list-style:none;color:var(--heading);font-family:'Fraunces',serif;font-size:1.1rem;line-height:1.35;transition:color .25s;}
.acc summary::-webkit-details-marker{display:none;}
.acc summary:hover{color:var(--teal-text);}
.acc summary .ico{flex:none;width:1.1rem;height:1.1rem;position:relative;}
.acc summary .ico::before,.acc summary .ico::after{content:'';position:absolute;background:var(--teal-text);transition:transform .3s,opacity .3s;}
.acc summary .ico::before{top:50%;left:0;width:100%;height:1.5px;transform:translateY(-50%);}
.acc summary .ico::after{left:50%;top:0;height:100%;width:1.5px;transform:translateX(-50%);}
.acc details[open] summary .ico::after{transform:translateX(-50%) rotate(90deg);opacity:0;}
.acc .acc-body{padding:0 0 1.4rem;max-width:44rem;line-height:1.7;color:var(--body);}
.acc .acc-body p+p{margin-top:.9rem;}

/* ---------- Generation comparison (tabs) ---------- */
.gen-tabs{display:flex;flex-wrap:wrap;gap:.5rem;}
.gen-tab{font-size:.85rem;padding:9px 18px;border:1px solid var(--border);border-radius:2px;color:var(--body);transition:color .3s,border-color .3s,background .3s;}
.gen-tab:hover{border-color:var(--teal-text);color:var(--teal-text);}
.gen-tab[aria-selected="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);}
.gen-panel[hidden]{display:none;}
.gen-panel{margin-top:1.75rem;background:var(--surface2);border:1px solid var(--border);border-radius:3px;padding:1.9rem;}
.gen-born{font-size:.75rem;letter-spacing:.11em;text-transform:uppercase;color:var(--teal-text);}
.gen-panel h3{font-size:1.5rem;color:var(--heading);margin-top:.4rem;}
.gen-grid{display:grid;gap:1.6rem;margin-top:1.6rem;}
@media(min-width:48rem){.gen-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:64rem){.gen-grid{grid-template-columns:repeat(4,1fr);}}
.gen-cell dt{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
.gen-cell dd{margin-top:.5rem;color:var(--body);line-height:1.6;font-size:.92rem;}
.gen-cell .tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.5rem;}
.gen-cell .tag{font-size:.78rem;padding:.28rem .65rem;border:1px solid var(--border);border-radius:2px;color:var(--heading);}
/* the comparison is also a real table for crawlers/answer engines when JS is off */
.gen-table{width:100%;border-collapse:collapse;font-size:.88rem;margin-top:1.5rem;}
.gen-table th,.gen-table td{text-align:start;padding:.8rem .9rem;border:1px solid var(--border);vertical-align:top;line-height:1.55;}
.gen-table th{color:var(--heading);font-family:'Fraunces',serif;font-weight:400;background:var(--surface);}
.gen-table caption{caption-side:top;text-align:start;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-bottom:.75rem;}
.table-scroll{overflow-x:auto;}

/* ---------- Episode index search / filter ---------- */
.mc-search{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;}
.mc-search input{flex:1 1 16rem;background:var(--surface2);border:1px solid var(--border);color:var(--heading);padding:.72rem 1rem;border-radius:2px;font:inherit;font-size:.92rem;transition:border-color .3s;}
.mc-search input:focus{outline:none;border-color:var(--teal-text);}
.mc-search input::placeholder{color:var(--muted);}
.mc-empty{display:none;color:var(--muted);font-size:.92rem;margin-top:1.5rem;}
.mc-empty.show{display:block;}
.reel.hidden,.idx-row.hidden{display:none;}

/* ---------- Episode index rows (text list under the reel wall) ---------- */
.idx-list{list-style:none;border-top:1px solid var(--border);}
.idx-row{border-bottom:1px solid var(--border);}
.idx-row a{display:grid;grid-template-columns:2.5rem 1fr auto;gap:1rem;align-items:center;padding:1.1rem .35rem;transition:background .25s;}
.idx-row a:hover{background:var(--surface);}
.idx-row .n{font-family:'Fraunces',serif;font-style:italic;font-size:1.15rem;color:var(--teal-text);}
.idx-row .ttl{color:var(--heading);line-height:1.35;}
.idx-row .crs{font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-top:.2rem;}
.idx-row .dur{font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums;}
@media(max-width:36rem){.idx-row .dur{display:none;}}

/* ---------- Reading progress bar (episode + article pages) ---------- */
.read-bar{position:fixed;top:0;left:0;height:2px;width:0;background:var(--accent);z-index:60;transition:width .1s linear;}
@media (prefers-reduced-motion: reduce){.read-bar{transition:none;}}

/* ---------- Pull quote / callout ---------- */
.callout{background:var(--surface);border:1px solid var(--border);border-inline-start:2px solid var(--accent);border-radius:3px;padding:1.5rem 1.7rem;margin-top:1.75rem;}
.callout .ct{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--teal-text);}
.callout p{margin-top:.6rem;color:var(--heading);line-height:1.65;}

/* ---------- Misc ---------- */
.divider-label{font-size:.875rem;color:var(--muted);}
.aspect-video{aspect-ratio:16/9;}
.hide{display:none;}
.err-code{font-family:'Fraunces',serif;font-style:italic;font-size:6rem;color:var(--teal-text);line-height:1;}