/* AikaNova – base styles. Tokens first, then layout, components. Plain CSS, no build step. */

/* ---------- Fonts (SIL OFL, self-hosted) ---------- */
@font-face { font-family: "Oxanium"; src: url("../Fonts/oxanium-latin-wght-normal.woff2") format("woff2");
             font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Chakra Petch"; src: url("../Fonts/chakra-petch-latin-400-normal.woff2") format("woff2");
             font-weight: 400; font-display: swap; }
@font-face { font-family: "Chakra Petch"; src: url("../Fonts/chakra-petch-latin-600-normal.woff2") format("woff2");
             font-weight: 600; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  --c-bg: #0e0d11;
  --c-surface: #141217;
  --c-surface-2: #1d1b21;
  --c-line: #2c2931;
  --c-text: #f3efe9;
  --c-muted: #a39ea8;
  --c-accent: #ff8a1f;
  --c-accent-strong: #ff6a00;
  --c-on-accent: #141217;
  --c-violet: #7b5cff;
  --c-cyan: #2ad4e6;

  --f-display: "Oxanium", "Chakra Petch", system-ui, sans-serif;
  --f-body: "Chakra Petch", system-ui, sans-serif;

  --fs-0: .875rem;
  --fs-1: 1rem;
  --fs-2: 1.25rem;
  --fs-3: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  --fs-4: clamp(2rem, 1.3rem + 3vw, 4rem);

  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4.5rem;

  --container: 1440px;
  --gutter: clamp(1rem, 3vw, 2.5rem);
  --cut: 18px;          /* angled corner size */
  --cut-lg: 36px;
  --radius-pill: 999px;
  --glow: 0 0 18px rgb(255 138 31 / .45);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--c-bg); color: var(--c-text); font: 400 var(--fs-1)/1.6 var(--f-body); }
img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--c-accent); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--c-text); }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 700; line-height: 1.1; text-transform: uppercase;
                 letter-spacing: .02em; margin: 0 0 .5em; }
h1 { font-size: var(--fs-4); }
h2 { font-size: var(--fs-3); color: var(--c-accent); }
h3 { font-size: var(--fs-2); }
p { margin: 0 0 1em; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: var(--sp-4); top: -4rem; z-index: 100; background: var(--c-accent); color: var(--c-on-accent);
             padding: var(--sp-2) var(--sp-4); font-weight: 600; }
.skip-link:focus { top: var(--sp-4); }
.icon { width: 1.25em; height: 1.25em; fill: currentColor; flex: none; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.page-main { min-height: 50vh; }
/* fluid_styled_content frames sit in the container; full-bleed elements (hero) opt out */
.page-main > .frame { max-width: var(--container); margin: var(--sp-7) auto; padding-inline: var(--gutter); }
.page-main > .frame-fullwidth { max-width: none; margin-top: 0; padding-inline: 0; }

/* ---------- Angled panel frame ---------- */
.panel, .frame-panel { /* .frame-panel = frame class "Panel" in the backend */
  --panel-cut: var(--cut);
  position: relative; background: var(--c-surface); padding: var(--sp-6);
  clip-path: polygon(0 0, calc(100% - var(--panel-cut)) 0, 100% var(--panel-cut), 100% 100%, var(--panel-cut) 100%, 0 calc(100% - var(--panel-cut)));
}
.panel::before, .frame-panel::before { /* orange edge accent, top-left */
  content: ""; position: absolute; left: 0; top: 0; width: 64px; height: 3px; background: var(--c-accent);
}
.page-main > .frame-panel { width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--container) - 2 * var(--gutter)); }
.panel--raised { background: var(--c-surface-2); }
.panel--lg { --panel-cut: var(--cut-lg); }

/* ---------- Section heading ---------- */
.section-head { display: flex; align-items: baseline; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.section-head h2 { margin: 0; }
.section-head__more { order: 2; display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--c-muted); text-decoration: none;
                      font: 600 var(--fs-0)/1 var(--f-display); text-transform: uppercase; letter-spacing: .08em; }
.section-head__more:hover { color: var(--c-accent); }
.section-head::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--c-accent), transparent); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: var(--sp-2); padding: .75em 1.6em; border-radius: var(--radius-pill);
       font: 600 var(--fs-0)/1 var(--f-display); text-transform: uppercase; letter-spacing: .08em; text-decoration: none;
       border: 2px solid transparent; transition: background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease); }
.btn--primary { background: var(--c-accent); color: var(--c-on-accent); }
.btn--primary:hover { background: var(--c-accent-strong); color: var(--c-on-accent); box-shadow: var(--glow); }
.btn--ghost { border-color: var(--c-line); color: var(--c-text); background: rgb(20 18 23 / .6); }
.btn--ghost:hover { border-color: var(--c-accent); color: var(--c-accent); }
.btn-icon { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; color: var(--c-text);
            border-radius: var(--radius-pill); background: none; border: 0; cursor: pointer; }
.btn-icon:hover { color: var(--c-accent); }

/* ---------- Header ----------
   Reference layout: an orange tab with the logo top-left, a small nav row with an orange rule underneath, and an
   orange block top-right for socials + CTA. On pages that start with a hero the header lies on top of the hero
   frame, so the tab continues into the hero's left bar and the orange block into the panel behind Aika. */
:root { --tab-w: 14rem; --tab-h: 4.75rem; --panel-w: clamp(16rem, 24vw, 22rem); --bar-w: 1.5rem; }
.site-header { position: relative; z-index: 20; padding-top: var(--sp-4); }
.site-header__inner { position: relative; display: flex; align-items: flex-start; min-height: var(--tab-h);
                      width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--container) - 2 * var(--gutter)); margin-inline: auto; }
.site-header__brand { flex: none; display: flex; align-items: center; width: var(--tab-w); height: var(--tab-h); padding: 0 var(--sp-5);
                      background: var(--c-accent); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1.5rem), calc(100% - 1.5rem) 100%, 0 100%); }
.logo { display: inline-flex; align-items: center; color: var(--c-text); text-decoration: none;
        font: 800 1.5rem/1 var(--f-display); letter-spacing: .04em; text-transform: uppercase; }
.logo__mark { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; margin-right: .35em; background: var(--c-accent);
              color: var(--c-on-accent); clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%); }
.logo__accent { color: var(--c-accent); }
.logo:hover { color: var(--c-text); }
.site-header__brand .logo, .site-header__brand .logo:hover { color: var(--c-on-accent); }
.site-header__brand .logo__mark { background: var(--c-on-accent); color: var(--c-accent); }
.site-header__brand .logo__accent { color: var(--c-on-accent); font-weight: 400; } /* white on orange failed contrast (2.35:1) */

.main-nav { flex: 1; min-width: 0; position: relative; margin: 0 var(--sp-4) 0 var(--sp-4); padding: var(--sp-3) 0 var(--sp-2); }
.main-nav::after { /* orange rule under the nav row, ending in a small node like the reference */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, var(--c-accent), rgb(255 138 31 / .45) 70%, var(--c-accent)); }
.main-nav::before { content: ""; position: absolute; right: -3px; bottom: -3px; width: 7px; height: 7px;
                    border-radius: 50%; background: var(--c-accent); box-shadow: var(--glow); }
.main-nav ul { display: flex; flex-wrap: wrap; gap: 0 var(--sp-1); list-style: none; margin: 0; padding: 0; }
.main-nav a { display: block; padding: var(--sp-2) .5rem; color: var(--c-muted); text-decoration: none;
              font: 600 .78rem/1.2 var(--f-display); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; position: relative; }
.main-nav a:hover, .main-nav a[aria-current], .main-nav a.is-active { color: var(--c-text); }
.main-nav > ul > li > a[aria-current]::after, .main-nav > ul > li > a.is-active::after, .main-nav > ul > li > a:hover::after { content: ""; position: absolute; left: .5rem; right: .5rem;
              bottom: 0; height: 2px; background: var(--c-accent); box-shadow: var(--glow); }

.site-header__actions { flex: none; width: var(--panel-w); height: var(--tab-h); display: flex; align-items: flex-start;
                        justify-content: space-between; gap: var(--sp-2); padding-left: var(--sp-6); background: var(--c-accent);
                        clip-path: polygon(0 0, 100% 0, 100% 100%, 1.5rem 100%, 0 calc(100% - 1.5rem)); }
.site-header__actions .socials { padding-top: var(--sp-3); }
.site-header__actions .socials a { color: var(--c-on-accent); }
.site-header__actions .socials a:hover { color: #fff; }
.site-header__actions .btn { /* dark tab hanging from the top edge */
  white-space: nowrap; height: 3rem; border-radius: 0 0 0 .9rem; padding-inline: var(--sp-5); background: var(--c-bg); color: var(--c-text); border: 0; }
.site-header__actions .btn:hover { background: #000; color: var(--c-accent); box-shadow: none; }
.socials { display: flex; gap: var(--sp-1); list-style: none; margin: 0; padding: 0; }
.socials a { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; color: var(--c-muted); }
.socials a:hover { color: var(--c-accent); }
.nav-toggle { display: none; }

/* language switch: EN | DE at the end of the nav row (also in the mobile menu) */
.main-nav__lang { display: flex; align-items: center; margin-left: var(--sp-2); }
.lang-switch ul { display: flex !important; gap: 2px; list-style: none; margin: 0; padding: 0; }
.main-nav .lang-switch__item { display: inline-grid; place-items: center; min-width: 2.1rem; height: 1.6rem; padding: 0 .4rem;
                               font: 700 .7rem/1 var(--f-display); letter-spacing: .1em; color: var(--c-muted); border: 1px solid var(--c-line); }
.main-nav .lang-switch__item::after { display: none; }
.main-nav .lang-switch__item.is-active { background: var(--c-accent); color: var(--c-on-accent); border-color: var(--c-accent); }
.main-nav a.lang-switch__item:hover { color: var(--c-accent); border-color: var(--c-accent); }

/* dropdown for second-level pages */
.main-nav li { position: relative; }
.main-nav__sub { position: absolute; left: 0; top: 100%; z-index: 40; min-width: 14rem; display: block !important; padding: var(--sp-2) 0 !important;
                 background: var(--c-surface); border-top: 2px solid var(--c-accent); box-shadow: 0 12px 30px rgb(0 0 0 / .45);
                 opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s var(--ease), transform .15s var(--ease), visibility 0s .15s; }
.main-nav li:hover > .main-nav__sub, .main-nav li:focus-within > .main-nav__sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.main-nav__sub a { padding: var(--sp-2) var(--sp-4); font-size: .75rem; }
.main-nav__sub a:hover, .main-nav__sub a[aria-current] { color: var(--c-accent); background: rgb(255 138 31 / .06); }
.main-nav .has-sub > a { padding-right: 1.1rem; }
.main-nav .has-sub > a::before { content: ""; position: absolute; right: .35rem; top: 50%; margin-top: -2px; border: 4px solid transparent;
                                 border-top-color: currentColor; border-bottom: 0; }

/* header search */
.main-nav__search { margin-left: auto; }
.search-toggle { width: 2rem; height: 2rem; color: var(--c-muted); }
.search-toggle:hover, .search-toggle[aria-expanded="true"] { color: var(--c-accent); }
.site-search { position: absolute; right: 0; top: calc(100% + .75rem); z-index: 45; display: flex; gap: var(--sp-2); width: min(28rem, 80vw);
               padding: var(--sp-3); background: var(--c-surface); border-top: 2px solid var(--c-accent); box-shadow: 0 12px 30px rgb(0 0 0 / .45);
               opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s var(--ease), transform .15s var(--ease), visibility 0s .15s; }
.site-search.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.site-search .form-control { padding: .6rem .8rem; }
.site-search .btn { flex: none; }

/* header lying on the hero frame (start page) */
body:has(.page-main > .hero:first-child) .site-header { position: absolute; top: 0; left: 0; right: 0; }
body:has(.page-main > .hero:first-child) .site-header__actions { background: none; clip-path: none; }

@media (max-width: 960px) {
  :root { --tab-h: 3.75rem; }
  .site-header { padding-top: var(--sp-3); }
  body:has(.page-main > .hero:first-child) .site-header { position: relative; }
  .site-header__inner { align-items: center; }
  .site-header__brand { width: auto; padding-right: var(--sp-7); }
  .site-header__brand .logo { font-size: 1.25rem; }
  .nav-toggle { display: inline-grid; margin-left: auto; font-size: 1.4rem; }
  .site-header__actions { display: none; }
  .main-nav { position: fixed; inset: 4.5rem 0 auto 0; z-index: 30; margin: 0; padding: var(--sp-4) var(--gutter) var(--sp-6);
              background: var(--c-surface); border-bottom: 2px solid var(--c-accent);
              transform: translateY(-120%); visibility: hidden; transition: transform .25s var(--ease), visibility 0s .25s; }
  .main-nav::before, .main-nav::after { display: none; }
  .main-nav ul { flex-direction: column; }
  .main-nav a { font-size: var(--fs-1); padding: var(--sp-3) 0; }
  .main-nav a::after { display: none; }
  .nav-open .main-nav { transform: none; visibility: visible; transition: transform .25s var(--ease); }
  .main-nav .socials { display: flex; margin-top: var(--sp-4); }
  .main-nav__sub { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: none;
                   padding: 0 0 var(--sp-2) var(--sp-4) !important; }
  .main-nav__sub a { font-size: var(--fs-0); padding: var(--sp-2) 0; }
  .main-nav .has-sub > a::before { display: none; }
  .main-nav__search { margin: var(--sp-3) 0 0; }
  .main-nav__lang { margin: var(--sp-4) 0 0; }
  .main-nav .lang-switch__item { height: 2.25rem; min-width: 3rem; font-size: .8rem; padding: 0 .6rem; }
  .search-toggle { display: none; }
  .site-search { position: static; width: 100%; opacity: 1; visibility: visible; transform: none; padding: 0; border: 0; box-shadow: none; background: none; }
}
@media (min-width: 961px) { .main-nav .socials { display: none; } }
@media (min-width: 961px) and (max-width: 1280px) { :root { --tab-w: 12rem; --panel-w: 15rem; } .site-header__actions .socials { display: none; } .site-header__brand .logo { font-size: 1.25rem; } .main-nav a { padding-inline: .45rem; letter-spacing: .06em; } }

/* ---------- Page head + content page grid (backend layouts Content / FullWidth) ---------- */
.page-head { width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--container) - 2 * var(--gutter)); margin: var(--sp-5) auto var(--sp-7); }
.page-head__title { margin: 0; font-size: var(--fs-4); }
.page-head__title::after { content: ""; display: block; width: 120px; height: 3px; margin-top: var(--sp-4); background: var(--c-accent); box-shadow: var(--glow); }
.page-head__sub { margin: var(--sp-4) 0 0; max-width: 46rem; color: #cfc9c2; font-size: var(--fs-2); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; margin: 0 0 var(--sp-4); padding: 0;
                 font: 600 .75rem/1.3 var(--f-display); text-transform: uppercase; letter-spacing: .1em; }
.breadcrumb li + li::before { content: "//"; margin-right: var(--sp-2); color: var(--c-accent); }
.breadcrumb a { color: var(--c-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--c-accent); }
.breadcrumb [aria-current] { color: var(--c-text); }
.page-grid { width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--container) - 2 * var(--gutter)); margin: 0 auto;
             display: grid; gap: var(--sp-7); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 961px) { .page-grid--sidebar { grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr); } }
.page-grid .frame { margin: 0 0 var(--sp-7); }
.page-grid__side .frame { margin-bottom: var(--sp-5); }

/* ---------- Footer ----------
   Community call-to-action band (with the chibi), link columns, bottom bar with HUD label and back-to-top. */
.site-footer { margin-top: var(--sp-8); position: relative; background: var(--c-surface); border-top: 1px solid var(--c-line); }
.site-footer::before { content: ""; position: absolute; left: 0; top: -1px; width: 30%; height: 2px; background: var(--c-accent); box-shadow: var(--glow); }
.footer-cta { position: relative; width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--container) - 2 * var(--gutter));
              margin: calc(-1 * var(--sp-7)) auto 0; }
.footer-cta__inner { background: repeating-linear-gradient(135deg, rgb(0 0 0 / .06) 0 2px, transparent 2px 14px),
                                 linear-gradient(100deg, var(--c-accent) 0%, #ff7a12 55%, #e05a00 100%);
                     clip-path: polygon(0 0, calc(100% - var(--cut-lg)) 0, 100% var(--cut-lg), 100% 100%, var(--cut-lg) 100%, 0 calc(100% - var(--cut-lg)));
                     position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5); padding: var(--sp-6) var(--sp-7);
                     padding-right: calc(170px + var(--sp-6)); min-height: 9rem; }
.footer-cta__text { flex: 1 1 22rem; color: var(--c-on-accent); }
.site-footer .footer-cta__title { margin: 0 0 var(--sp-1); font-size: var(--fs-3); letter-spacing: .02em; color: var(--c-on-accent); }
.footer-cta__text p { margin: 0; font-weight: 600; }
.footer-cta .btn--primary { background: var(--c-on-accent); color: var(--c-accent); }
.footer-cta .btn--primary:hover { background: #000; color: var(--c-accent); box-shadow: none; }
.site-footer__chibi { position: absolute; right: var(--sp-6); bottom: 0; width: 170px; aspect-ratio: 360 / 500; pointer-events: none;
                      filter: drop-shadow(0 6px 14px rgb(0 0 0 / .35)); }
.site-footer__chibi img, .site-footer__chibi video { width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
.site-footer__grid { width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--container) - 2 * var(--gutter)); margin: 0 auto;
                     display: grid; gap: var(--sp-6); grid-template-columns: 1fr; padding-block: var(--sp-7); }
@media (min-width: 760px) { .site-footer__grid { grid-template-columns: 2fr repeat(3, 1fr); } }
.site-footer h2 { font-size: var(--fs-0); letter-spacing: .12em; margin-bottom: var(--sp-3); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li a { display: inline-block; padding: var(--sp-1) 0; color: var(--c-muted); text-decoration: none; transition: color .15s var(--ease), transform .15s var(--ease); }
.site-footer li a:hover { color: var(--c-accent); transform: translateX(3px); }
.site-footer__claim { color: var(--c-muted); max-width: 36ch; margin-top: var(--sp-3); }
.site-footer .socials { margin-top: var(--sp-4); margin-left: calc(-1 * var(--sp-2)); }
.site-footer .socials a { width: 2.5rem; height: 2.5rem; border: 1px solid var(--c-line); margin-right: var(--sp-1); }
.site-footer .socials a:hover { border-color: var(--c-accent); }
.site-footer__bottom { width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--container) - 2 * var(--gutter)); margin: 0 auto;
                       border-top: 1px solid var(--c-line); padding-block: var(--sp-4); color: var(--c-muted); font-size: var(--fs-0);
                       display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); justify-content: space-between; }
.site-footer__hud { font: 500 .7rem/1 ui-monospace, Consolas, monospace; letter-spacing: .2em; text-transform: uppercase; }
.site-footer__hud::before { content: ""; display: inline-block; width: .45rem; height: .45rem; margin-right: .5rem; border-radius: 50%;
                            background: #3ddc84; box-shadow: 0 0 8px #3ddc84; }
.back-to-top { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--c-muted); text-decoration: none;
               font: 600 .75rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .1em; }
.back-to-top .icon { rotate: -90deg; }
.back-to-top:hover { color: var(--c-accent); }
@media (max-width: 760px) {
  .footer-cta { width: 100%; margin-top: 0; }
  .footer-cta__inner { clip-path: none; }
  .footer-cta__inner { padding: var(--sp-6) var(--gutter) var(--sp-6); padding-right: calc(110px + var(--gutter)); }
  .site-footer__chibi { width: 110px; right: var(--gutter); }
}

/* ---------- Container grids (b13/container) ---------- */
.ce-grid { display: grid; gap: var(--sp-6); grid-template-columns: minmax(0, 1fr); }
.ce-grid__col > .frame { margin: 0; }
.ce-grid__col > .frame + .frame { margin-top: var(--sp-6); }
@media (min-width: 961px) {
  .ce-grid--aikanova_2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ce-grid--aikanova_2col_66 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .ce-grid--aikanova_2col_33 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .ce-grid--aikanova_3col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Teaser cards ---------- */
.teasers { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-5);
           grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.teaser { --accent: var(--c-accent); position: relative; display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--sp-4);
          padding: var(--sp-4); background: var(--c-surface-2); transition: transform .2s var(--ease), background .2s var(--ease);
          clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%); }
.teaser--cyan { --accent: var(--c-cyan); }
.teaser--violet { --accent: var(--c-violet); }
.teaser:not(:has(.teaser__media)) { grid-template-columns: minmax(0, 1fr); }
.teaser::after { /* corner notch, bottom right */
  content: ""; position: absolute; right: 0; bottom: 0; width: calc(var(--cut) * 1.6); height: calc(var(--cut) * 1.6);
  background: linear-gradient(135deg, transparent 50%, var(--accent) 50%); opacity: .9; }
.teaser:has(.teaser__link):hover { transform: translateY(-2px); background-color: #24212a; }
.teaser__media { display: flex; flex-direction: column; }
.teaser__media img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.teaser__tag { display: block; padding: var(--sp-1) var(--sp-2); background: var(--accent); color: var(--c-on-accent);
               font: 700 .75rem/1.3 var(--f-display); text-transform: uppercase; letter-spacing: .1em; text-align: center; }
.teaser__body > .teaser__tag { display: inline-block; margin-bottom: var(--sp-3); }
.teaser__body { position: relative; padding-top: var(--sp-3); }
.teaser__body::before { content: ""; position: absolute; left: 0; right: 15%; top: 0; height: 2px;
                        background: linear-gradient(90deg, var(--accent), transparent); }
.teaser__title { font-size: var(--fs-2); margin: 0 0 var(--sp-2); }
.teaser__link { color: var(--c-text); text-decoration: none; }
.teaser__link::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* whole card clickable */
.teaser__link:hover { color: var(--c-text); }
.teaser__text { color: var(--c-muted); font-size: var(--fs-0); margin-bottom: var(--sp-3); }
.teaser__more { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--accent);
                font: 600 var(--fs-0)/1 var(--f-display); text-transform: uppercase; letter-spacing: .08em; }
.teaser:hover .teaser__more .icon { transform: translateX(3px); }
.teaser__more .icon { transition: transform .2s var(--ease); }

/* next to a sidebar (2/3 + 1/3 container) the cards stay two per row down to the tablet breakpoint */
.ce-grid--aikanova_2col_66 .teasers:not(.teasers--compact) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: var(--sp-4); }
.ce-grid--aikanova_2col_66 .teasers:not(.teasers--compact) .teaser { grid-template-columns: 6.5rem minmax(0, 1fr); }

/* Compact variant (news row): square thumb, tag as orange text, 2-line text, progress-style rule */
.teasers--compact { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--sp-4); }
.teasers--compact .teaser { grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-3) var(--sp-3) var(--sp-4); }
.teasers--compact .teaser::after { display: none; }
.teasers--compact .teaser__media img { aspect-ratio: 1; }
.teasers--compact .teaser__media .teaser__tag { display: none; }
.teasers--compact .teaser__body { padding-top: 0; display: flex; flex-direction: column; }
.teasers--compact .teaser__body::before { top: auto; bottom: calc(-1 * var(--sp-2)); right: 30%; }
.teasers--compact .teaser__body > .teaser__tag {
  order: -1; display: block; padding: 0; margin: 0 0 var(--sp-1); background: none; color: var(--accent); text-align: left; }
.teasers--compact .teaser__title { font-size: var(--fs-1); margin-bottom: var(--sp-1); }
.teasers--compact .teaser__text { margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.teasers--compact .teaser__more { display: none; }

/* ---------- Article / video list ---------- */
.medialist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-5); counter-reset: ml; }
.medialist__item { --accent: var(--c-accent); position: relative; display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto;
                   gap: var(--sp-4); align-items: center; padding-bottom: var(--sp-5); }
.medialist__item:nth-child(3n+2) { --accent: var(--c-violet); }
.medialist__item:nth-child(3n+3) { --accent: var(--c-cyan); }
.medialist__item::after { /* orange rule under the thumbnail, as in the design */
  content: ""; position: absolute; left: 0; bottom: 0; width: 14rem; max-width: 60%; height: 2px;
  background: linear-gradient(90deg, var(--c-accent), rgb(255 138 31 / .2)); }
.medialist__thumb { position: relative; aspect-ratio: 1; background: var(--c-surface-2); overflow: hidden; }
.medialist__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s var(--ease); }
.medialist__placeholder { display: grid; place-items: center; width: 100%; height: 100%; color: var(--c-line); font-size: 2rem; }
.medialist__play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 1.6rem;
                   background: radial-gradient(circle, rgb(14 13 17 / .55) 0 1.4rem, transparent 1.45rem); }
.medialist__body { position: relative; min-width: 0; }
.medialist__title { font-size: var(--fs-1); letter-spacing: .04em; margin: 0 0 var(--sp-1); }
.medialist__link { color: var(--c-text); text-decoration: none; }
.medialist__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.medialist__item:has(.medialist__link) { cursor: pointer; }
.medialist__meta { margin: 0; color: var(--c-muted); font-size: .8rem; letter-spacing: .04em; }
.medialist__text { margin: var(--sp-1) 0 0; color: var(--c-muted); font-size: var(--fs-0);
                   display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.medialist__rule { display: block; height: 3px; margin-top: var(--sp-3); background: var(--c-line); position: relative; }
.medialist__rule::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 62%; background: linear-gradient(90deg, rgb(255 255 255 / .15), var(--accent)); }
.medialist__item:nth-child(even) .medialist__rule::before { width: 84%; }
.medialist__go { color: var(--c-muted); transition: color .2s var(--ease), transform .2s var(--ease); }
.medialist__item:hover .medialist__link { color: var(--accent); }
.medialist__item:hover .medialist__go { color: var(--accent); transform: translateX(3px); }
.medialist__item:hover .medialist__thumb img { transform: scale(1.05); }
/* compact: sidebar lists (3.8) */
.medialist--compact { gap: var(--sp-3); }
.medialist--compact .medialist__item { grid-template-columns: 4rem minmax(0, 1fr); gap: var(--sp-3); padding-bottom: var(--sp-3);
                                        border-bottom: 1px solid var(--c-line); }
.medialist--compact .medialist__item::after { display: none; }
.medialist--compact .medialist__title { font-size: var(--fs-0); }
.medialist--compact .medialist__rule { display: none; }
@media (max-width: 560px) {
  .medialist__item { grid-template-columns: 5rem minmax(0, 1fr); }
  .medialist__go { display: none; }
}

/* ---------- Icon tiles ---------- */
.tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3);
         grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.tile { position: relative; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-2);
        background: rgb(29 27 33 / .92); border: 1px solid var(--c-line); border-top-color: #3a3640;
        transition: border-color .2s var(--ease), background .2s var(--ease); }
.tile__icon { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; flex: none; background: var(--c-surface);
              color: var(--c-muted); font-size: 1.4rem; border: 1px solid var(--c-line); }
.tile__body { display: flex; flex-direction: column; min-width: 0; }
.tile__title { color: var(--c-text); text-decoration: none; font: 700 var(--fs-0)/1.3 var(--f-display); text-transform: uppercase; letter-spacing: .08em; }
.tile__link::after { content: ""; position: absolute; inset: 0; }
.tile__subtitle { color: var(--c-muted); font-size: .8rem; line-height: 1.4; }
.tile:has(.tile__link):hover, .tile--highlight { border-color: var(--c-accent); }
.tile:has(.tile__link):hover .tile__icon, .tile--highlight .tile__icon { color: var(--c-accent); border-color: rgb(255 138 31 / .5);
                                                                        box-shadow: inset 0 0 14px rgb(255 138 31 / .25); }
.tile:has(.tile__link):hover .tile__title { color: var(--c-accent); }
/* list variant (sidebar, 3.4): borderless rows, glowing orange icons */
.section-sub { margin: calc(-1 * var(--sp-4)) 0 var(--sp-5); color: var(--c-muted); font-size: var(--fs-0); }
.tiles--list { grid-template-columns: minmax(0, 1fr); gap: 0; }
.tiles--list .tile { background: none; border: 0; border-bottom: 1px solid var(--c-line); padding: var(--sp-3) 0; }
.tiles--list .tile:last-child { border-bottom: 0; }
.tiles--list .tile__icon { width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; color: var(--c-accent); font-size: 1.1rem;
                           background: radial-gradient(circle, rgb(255 138 31 / .22), rgb(255 138 31 / .04) 70%); }
.tiles--list .tile:has(.tile__link):hover, .tiles--list .tile--highlight { border-color: var(--c-line); }
.tiles--list .tile:has(.tile__link):hover .tile__icon { box-shadow: var(--glow); }
.tiles--list .tile__title { text-transform: none; letter-spacing: .02em; font-size: var(--fs-1); }

/* right after the hero the tiles overlap its bottom edge, as in the design */
.hero + .frame-type-aikanova_icontiles { position: relative; z-index: 2; margin-top: calc(-1 * var(--sp-7)); }
@media (max-width: 760px) { .hero + .frame-type-aikanova_icontiles { margin-top: 0; } }

/* ---------- Promo box (3.5) ---------- */
.promo { position: relative; display: flex; flex-direction: column; background: var(--c-surface-2); border-top: 2px solid var(--c-accent);
         clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%); }
.promo__image { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
.promo__body { padding: var(--sp-5) var(--sp-5) var(--sp-4); }
.promo__kicker { margin: 0 0 var(--sp-2); color: var(--c-accent); font: 700 .75rem/1.3 var(--f-display); text-transform: uppercase; letter-spacing: .14em; }
.promo__title { font-size: var(--fs-2); color: var(--c-text); margin-bottom: var(--sp-2); }
.promo__text { margin: 0; color: var(--c-muted); font-size: var(--fs-0); }
.promo__cta { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin: 0 var(--sp-5) var(--sp-5);
              padding: var(--sp-3) var(--sp-4); background: var(--c-accent); color: var(--c-on-accent); text-decoration: none;
              font: 700 var(--fs-0)/1.2 var(--f-display); text-transform: uppercase; letter-spacing: .08em;
              clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); transition: background .2s var(--ease); }
.promo__cta:hover { background: var(--c-accent-strong); color: var(--c-on-accent); }
.promo__cta .icon { transition: transform .2s var(--ease); }
.promo__cta:hover .icon { transform: translateX(3px); }
.promo::after { content: ""; position: absolute; left: var(--sp-5); right: 40%; bottom: var(--sp-2); height: 2px;
                background: linear-gradient(90deg, var(--c-cyan), transparent); }

/* ---------- Media banner (3.6) ---------- */
.banner { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: 320px;
          aspect-ratio: 16 / 5; background: var(--c-surface);
          clip-path: polygon(0 0, calc(100% - var(--cut-lg)) 0, 100% var(--cut-lg), 100% 100%, var(--cut-lg) 100%, 0 calc(100% - var(--cut-lg))); }
/* in columns (sidebar layout, containers) the wide aspect ratio would force ~1000px width via min-height: height only */
.page-grid .banner, .ce-grid .banner { aspect-ratio: auto; }
.ce-grid .banner { align-items: flex-start; }
.ce-grid .banner__content { padding: var(--sp-6) var(--sp-5) calc(var(--sp-6) + 4rem); max-width: none; }
.ce-grid .banner__play { top: auto; bottom: var(--sp-5); right: var(--sp-5); translate: none; width: 3.5rem; height: 3.5rem; font-size: 1.4rem; }
.banner__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.banner::before { content: ""; position: absolute; inset: 0; z-index: -1;
                  background: linear-gradient(90deg, rgb(14 13 17 / .92) 0%, rgb(14 13 17 / .55) 45%, rgb(14 13 17 / .1) 100%); }
.banner::after { /* orange bracket on the left, as in the design */
  content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 4px; background: var(--c-accent); box-shadow: var(--glow); }
.banner__content { max-width: 34rem; padding: var(--sp-6) var(--sp-7); }
.banner__kicker { margin: 0 0 var(--sp-2); color: var(--c-cyan); font: 700 .75rem/1.3 var(--f-display); text-transform: uppercase; letter-spacing: .14em; }
.banner__title { font-size: var(--fs-3); color: var(--c-text); margin-bottom: var(--sp-3); }
.banner__text { color: #ddd6cf; margin-bottom: var(--sp-5); }
.banner__badge { position: absolute; top: 0; right: var(--sp-7); padding: var(--sp-2) var(--sp-4); background: var(--c-accent); color: var(--c-on-accent);
                 font: 700 .75rem/1.3 var(--f-display); text-transform: uppercase; letter-spacing: .12em;
                 clip-path: polygon(0 0, 100% 0, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
.banner__play { position: absolute; right: 18%; top: 50%; translate: 50% -50%; display: grid; place-items: center; width: 5rem; height: 5rem;
                border: 2px solid var(--c-accent); border-radius: 50%; background: rgb(14 13 17 / .6); color: var(--c-text); font-size: 2rem;
                cursor: pointer; box-shadow: var(--glow); transition: transform .2s var(--ease), background .2s var(--ease); }
.banner__play:hover { transform: scale(1.08); background: var(--c-accent); color: var(--c-on-accent); }
.banner__stage { position: absolute; inset: 0; z-index: 3; background: #000; }
.banner__stage iframe, .banner__stage video { width: 100%; height: 100%; border: 0; object-fit: contain; }
@media (max-width: 760px) {
  .banner { aspect-ratio: auto; flex-direction: column; align-items: stretch; }
  .banner::before { background: linear-gradient(0deg, rgb(14 13 17 / .95) 30%, rgb(14 13 17 / .3) 100%); }
  .banner__content { padding: var(--sp-8) var(--sp-5) var(--sp-5); }
  .banner__play { top: var(--sp-6); right: var(--sp-6); translate: none; width: 3.5rem; height: 3.5rem; font-size: 1.4rem; }
  .banner__badge { right: auto; left: var(--sp-5); }
}

/* ---------- Featured box (3.7) ---------- */
.featured { display: grid; gap: var(--sp-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 761px) { .featured { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
@media (min-width: 1100px) { .featured--with-list { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 4fr); } }
.featured__media img { width: 100%; aspect-ratio: 14 / 9; object-fit: cover; }
.featured__cta { margin: 0; }
.featured__badge { display: inline-block; margin-bottom: var(--sp-3); padding: var(--sp-1) var(--sp-3); border: 1px solid var(--c-accent); color: var(--c-accent);
                   font: 700 .75rem/1.3 var(--f-display); text-transform: uppercase; letter-spacing: .12em; }
.featured__title { font-size: var(--fs-3); }
.featured__text { color: #cfc9c2; }
.featured__list { border-left: 1px solid var(--c-line); padding-left: var(--sp-5); }
@media (max-width: 1099px) { .featured__list { grid-column: 1 / -1; border-left: 0; padding-left: 0; } }

/* ---------- Stats / progress (3.10) ---------- */
.stats { display: grid; gap: var(--sp-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 761px) { .stats--with-media { grid-template-columns: 9rem minmax(0, 1fr); } }
.stats__image { width: 100%; max-width: 9rem; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--c-line); }
.stats__intro { color: var(--c-muted); margin-bottom: var(--sp-5); }
.stats__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-5); }
.stat { --accent: var(--c-accent); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2) var(--sp-4); align-items: baseline; }
.stat--cyan { --accent: var(--c-cyan); }
.stat--violet { --accent: var(--c-violet); }
.stat__label { font: 600 var(--fs-0)/1.3 var(--f-display); text-transform: uppercase; letter-spacing: .08em; }
.stat__value { color: var(--accent); font: 700 var(--fs-0)/1.3 var(--f-display); white-space: nowrap; }
.stat__bar { grid-column: 1 / -1; position: relative; display: block; height: 4px; background: var(--c-line); }
.stat__fill { position: absolute; inset: 0 auto 0 0; width: min(100%, calc(var(--value) / var(--max) * 100%));
              background: linear-gradient(90deg, rgb(255 255 255 / .2), var(--accent)); box-shadow: 0 0 10px var(--accent);
              transform-origin: left; transition: transform 1.2s var(--ease); }
.stat__fill::after { /* end marker */
  content: ""; position: absolute; right: -2px; top: -4px; width: 4px; height: 12px; background: var(--accent); }
.js-stats-pending .stat__fill { transform: scaleX(0); }

/* ---------- Large feature card (3.11) ---------- */
.fcard { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); background: var(--c-surface-2);
         clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-lg)), calc(100% - var(--cut-lg)) 100%, 0 100%); }
@media (min-width: 761px) { .fcard--with-media { grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); } }
.fcard__bar { grid-column: 1 / -1; padding: var(--sp-3) var(--sp-6); background: var(--c-accent); color: var(--c-on-accent);
              clip-path: polygon(0 0, 100% 0, calc(100% - 3rem) 100%, 0 100%); margin-right: 18%; }
.fcard__bar-title { margin: 0; font-size: var(--fs-2); color: var(--c-on-accent); }
.fcard__image { width: 100%; height: 100%; min-height: 16rem; object-fit: cover; }
.fcard__body { padding: var(--sp-6); }
.fcard__title { font-size: var(--fs-3); }
.fcard__text { color: #cfc9c2; }
.fcard__details { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: var(--sp-4); margin: var(--sp-5) 0; }
.fcard__detail { padding-left: var(--sp-3); border-left: 2px solid var(--c-accent); }
.fcard__detail dt { color: var(--c-muted); font: 600 .75rem/1.3 var(--f-display); text-transform: uppercase; letter-spacing: .12em; }
.fcard__detail dd { margin: var(--sp-1) 0 0; font-weight: 600; }

/* ---------- Lightbox restyle (3.13, jn_lighterbox / Lightbox2) ---------- */
.lightboxOverlay { background: rgb(8 7 10); opacity: .92 !important; backdrop-filter: blur(4px); }
.lightbox .lb-outerContainer { background: var(--c-surface); border-radius: 0; border-top: 2px solid var(--c-accent);
                               box-shadow: 0 0 40px rgb(255 138 31 / .18);
                               clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%); }
.lightbox .lb-image { border: 0; border-radius: 0; }
.lightbox .lb-container { padding: 0; }
.lightbox .lb-prev, .lightbox .lb-next { background: none; opacity: .0; position: relative; }
.lightbox .lb-nav a:hover, .lightbox .lb-nav a:focus-visible { opacity: 1; }
.lightbox .lb-prev::after, .lightbox .lb-next::after { /* chevrons instead of the PNG arrows */
  content: ""; position: absolute; top: 50%; width: 2.75rem; height: 2.75rem; margin-top: -1.375rem; background: var(--c-accent);
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.4 5 8.4 12l7 7-1.4 1.4L5.6 12 14 3.6z'/%3E%3C/svg%3E");
  -webkit-mask: var(--chev) center / contain no-repeat; mask: var(--chev) center / contain no-repeat; }
.lightbox .lb-prev::after { left: var(--sp-3); }
.lightbox .lb-next::after { right: var(--sp-3); transform: scaleX(-1); }
.lightbox .lb-dataContainer { padding-top: var(--sp-2); }
.lightbox .lb-data .lb-details { width: calc(100% - 3rem); }
.lightbox .lb-data .lb-caption { color: var(--c-text); font: 700 var(--fs-0)/1.4 var(--f-display); text-transform: uppercase; letter-spacing: .08em; }
.lightbox .lb-data .lb-number { color: var(--c-muted); font-size: .8rem; padding-top: var(--sp-1); }
.lightbox .lb-data .lb-close { position: relative; width: 2.25rem; height: 2.25rem; background: none; opacity: .8; }
.lightbox .lb-data .lb-close:hover { opacity: 1; }
.lightbox .lb-data .lb-close::before, .lightbox .lb-data .lb-close::after { content: ""; position: absolute; left: 50%; top: 50%;
  width: 1.4rem; height: 2px; margin: -1px 0 0 -.7rem; background: var(--c-accent); rotate: 45deg; }
.lightbox .lb-data .lb-close::after { rotate: -45deg; }
.lb-loader .lb-cancel { background: none; border: 2px solid var(--c-line); border-top-color: var(--c-accent); border-radius: 50%;
                        animation: lb-spin .8s linear infinite; }
@keyframes lb-spin { to { rotate: 360deg; } }
/* thumbnails that open the lightbox */
a.jnlightbox { display: block; position: relative; overflow: hidden; }
a.jnlightbox img { transition: transform .3s var(--ease), filter .3s var(--ease); }
a.jnlightbox:hover img, a.jnlightbox:focus-visible img { transform: scale(1.04); filter: brightness(1.1); }
a.jnlightbox::after { content: ""; position: absolute; inset: 0; border: 2px solid transparent; transition: border-color .2s var(--ease); }
a.jnlightbox:hover::after { border-color: var(--c-accent); }

/* ---------- fluid_styled_content galleries ---------- */
.ce-gallery .ce-row { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.ce-gallery .ce-column { flex: 1 1 0; min-width: 0; }
/* fixed column widths so a single image in the last row keeps its size */
.ce-gallery[data-ce-columns="2"] .ce-column { flex: 0 0 calc((100% - var(--sp-3)) / 2); }
.ce-gallery[data-ce-columns="3"] .ce-column { flex: 0 0 calc((100% - 2 * var(--sp-3)) / 3); }
.ce-gallery[data-ce-columns="4"] .ce-column { flex: 0 0 calc((100% - 3 * var(--sp-3)) / 4); }
.ce-textpic, .ce-textmedia { display: flow-root; }
.ce-gallery img { width: 100%; height: auto; }
.ce-gallery figure { margin: 0; }
.ce-gallery figcaption { color: var(--c-muted); font-size: .8rem; padding-top: var(--sp-1); }
.ce-textpic .ce-bodytext { margin-bottom: var(--sp-4); }
@media (max-width: 560px) { .ce-gallery .ce-row { flex-wrap: wrap; } .ce-gallery .ce-column { flex-basis: calc(50% - var(--sp-3)); } }

/* ---------- Forms (3.14, typo3/form) ---------- */
form .form-element { margin-bottom: var(--sp-5); }
.form-label { display: block; margin-bottom: var(--sp-2); font: 600 var(--fs-0)/1.3 var(--f-display); text-transform: uppercase; letter-spacing: .08em; }
.form-label .required, .form-check-label .required { color: var(--c-accent); }
.form-control, .form-select { width: 100%; padding: .75rem 1rem; background: var(--c-bg); color: var(--c-text); font: inherit;
                              border: 1px solid var(--c-line); border-bottom: 2px solid #3a3640; border-radius: 0; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.form-control::placeholder { color: #6e6874; }
.form-control:hover, .form-select:hover { border-color: #4a4550; }
.form-control:focus, .form-select:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px rgb(255 138 31 / .2); }
.form-select { appearance: none; padding-right: 2.5rem;
               background: var(--c-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff8a1f'%3E%3Cpath d='m7 9 5 5 5-5z'/%3E%3C/svg%3E") right .75rem center / 1.25rem no-repeat; }
textarea.form-control { min-height: 9rem; resize: vertical; }
.form-check-wrapping-label { display: flex; gap: var(--sp-3); align-items: flex-start; }
.form-check-input { appearance: none; flex: none; width: 1.25rem; height: 1.25rem; margin-top: .15rem; background: var(--c-bg);
                    border: 1px solid #4a4550; display: grid; place-items: center; cursor: pointer; }
.form-check-input:checked { background: var(--c-accent); border-color: var(--c-accent); }
.form-check-input:checked::after { content: ""; width: .35rem; height: .65rem; border: solid var(--c-on-accent); border-width: 0 2px 2px 0; rotate: 45deg; margin-top: -.15rem; }
.form-check-input:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.form-check-label { color: #cfc9c2; font-size: var(--fs-0); cursor: pointer; }
.form-element .help-block, .form-element .invalid-feedback, .form-element .error { display: block; margin-top: var(--sp-2); color: #ff6b5a; font-size: .8rem; }
.form-element.is-invalid .form-control, .form-element.is-invalid .form-select, .form-element.is-invalid .form-check-input,
.form-control.is-invalid { border-color: #ff6b5a; }
.form-navigation { margin-top: var(--sp-6); }
.btn.btn-primary { background: var(--c-accent); color: var(--c-on-accent); cursor: pointer; }
.btn.btn-primary:hover { background: var(--c-accent-strong); box-shadow: var(--glow); }
.frame-type-form_formframework form, .frame-type-form_formframework > p { max-width: 44rem; }

/* ---------- Search results (indexed_search) ---------- */
.tx-indexedsearch-searchbox fieldset { border: 0; margin: 0 0 var(--sp-6); padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end; max-width: 44rem; }
.tx-indexedsearch-searchbox legend { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.tx-indexedsearch-form { flex: 1 1 18rem; }
.tx-indexedsearch-form label { display: block; margin-bottom: var(--sp-2); font: 600 var(--fs-0)/1.3 var(--f-display); text-transform: uppercase; letter-spacing: .08em; }
.tx-indexedsearch-searchbox-sword { width: 100%; padding: .75rem 1rem; background: var(--c-bg); color: var(--c-text); font: inherit;
                                     border: 1px solid var(--c-line); border-bottom: 2px solid #3a3640; }
.tx-indexedsearch-searchbox-sword:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px rgb(255 138 31 / .2); }
.tx-indexedsearch-searchbox-button { padding: .85em 1.8em; border: 0; border-radius: var(--radius-pill); background: var(--c-accent); color: var(--c-on-accent); cursor: pointer;
                                     font: 600 var(--fs-0)/1 var(--f-display); text-transform: uppercase; letter-spacing: .08em; }
.tx-indexedsearch-searchbox-button:hover { background: var(--c-accent-strong); box-shadow: var(--glow); }
.tx-indexedsearch-searchbox p { flex-basis: 100%; margin: 0; font-size: .8rem; }
.tx-indexedsearch-searchbox p a { color: var(--c-muted); }
.tx-indexedsearch-info-sword { color: var(--c-muted); margin-bottom: var(--sp-2); }
.tx-indexedsearch-info-sword-word { color: var(--c-accent); font-weight: 600; }
div.tx-indexedsearch-browsebox { color: var(--c-muted); font-size: var(--fs-0); margin-bottom: var(--sp-5); }
ul.tx-indexedsearch-browsebox { display: flex; gap: var(--sp-2); list-style: none; margin: var(--sp-3) 0 0; padding: 0; }
ul.tx-indexedsearch-browsebox a { display: inline-block; padding: var(--sp-1) var(--sp-3); border: 1px solid var(--c-line); color: var(--c-text); text-decoration: none; }
ul.tx-indexedsearch-browsebox a[aria-current], ul.tx-indexedsearch-browsebox a:hover { border-color: var(--c-accent); color: var(--c-accent); }
.tx-indexedsearch-res { position: relative; max-width: 52rem; padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-4); background: var(--c-surface);
                        border-left: 3px solid var(--c-accent); }
.tx-indexedsearch-res h3 { display: flex; justify-content: space-between; gap: var(--sp-4); margin: 0 0 var(--sp-2); font-size: var(--fs-2); }
.tx-indexedsearch-title a { color: var(--c-text); text-decoration: none; }
.tx-indexedsearch-title a::after { content: ""; position: absolute; inset: 0; }
.tx-indexedsearch-res:hover .tx-indexedsearch-title a { color: var(--c-accent); }
.tx-indexedsearch-percent { color: var(--c-muted); font: 600 .75rem/1.6 ui-monospace, Consolas, monospace; }
.tx-indexedsearch-description { margin: 0; color: #cfc9c2; font-size: var(--fs-0); }
.tx-indexedsearch-redMarkup { color: var(--c-accent); }
.tx-indexedsearch-info { display: flex; flex-wrap: wrap; gap: 0 var(--sp-2); margin: var(--sp-2) 0 0; font-size: .75rem; color: var(--c-muted); }
.tx-indexedsearch-info dt, .tx-indexedsearch-info dd { margin: 0; }
.tx-indexedsearch-info .tx-indexedsearch-text-item-size, .tx-indexedsearch-info .tx-indexedsearch-text-item-crdate { display: none; }
.tx-indexedsearch-info p { margin: 0; }
.tx-indexedsearch-info a { color: var(--c-muted); }

/* ---------- Quick-links bar (2.5): icon tiles, variant 2 ---------- */
.tiles--bar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0; min-height: 3rem; padding: 0 var(--sp-4);
              background: rgb(14 13 17 / .85); backdrop-filter: blur(6px); border-top: 1px solid rgb(255 138 31 / .35); }
.tiles--bar .tile { background: none; border: 0; padding: var(--sp-2) var(--sp-5); gap: var(--sp-2); }
.tiles--bar .tile + .tile { border-left: 1px solid var(--c-line); }
.tiles--bar .tile__icon { width: auto; height: auto; background: none; border: 0; color: var(--c-accent); font-size: 1.1rem; }
.tiles--bar .tile__title { font-size: .75rem; letter-spacing: .12em; }
.tiles--bar .tile__subtitle { display: none; }
.tiles--bar .tile:has(.tile__link):hover { border-color: var(--c-line); }
.tiles--bar .tile:has(.tile__link):hover .tile__icon { box-shadow: none; color: var(--c-text); }
/* inside the hero frame: right after the hero it sits on the hero's bottom edge, full frame width */
.hero + .frame-type-aikanova_icontiles.frame-layout-2 { width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--container) - 2 * var(--gutter));
                                                       margin: -3rem auto 0; padding-inline: 0; position: relative; z-index: 3; }
.hero + .frame-layout-2 .tiles--bar { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.5rem), calc(100% - 2.5rem) 100%, 0 100%); }
.hero + .frame-layout-2 + .frame-type-aikanova_icontiles { margin-top: var(--sp-5); }
@media (max-width: 960px) {
  .hero + .frame-type-aikanova_icontiles.frame-layout-2 { width: 100%; margin-top: 0; }
  .tiles--bar .tile { padding: var(--sp-2) var(--sp-3); }
}

/* ---------- YouTube videos (music) ---------- */
.yt-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-5);
           grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
@media (min-width: 761px) { .yt-grid--featured > .yt-card:first-child { grid-column: span 2; grid-row: span 2; } }
.yt-card { --accent: var(--c-accent); position: relative; display: flex; flex-direction: column; }
.yt-card:nth-child(3n+2) { --accent: var(--c-cyan); }
.yt-card:nth-child(3n+3) { --accent: var(--c-violet); }
.yt-card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--c-surface-2);
                  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%); }
.yt-card__media::after { /* accent rule along the bottom, like the media list */
  content: ""; position: absolute; left: 0; bottom: 0; width: 45%; height: 3px; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.yt-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--ease), filter .35s var(--ease); filter: saturate(.9) brightness(.85); }
.yt-card:hover .yt-card__media img { transform: scale(1.05); filter: none; }
.yt-card__media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-card__play { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; border: 0; background: none; cursor: pointer;
                 color: #fff; font-size: 1.6rem; }
.yt-card__play .icon { width: 3.75rem; height: 3.75rem; padding: 1rem 1rem 1rem 1.15rem; border-radius: 50%; background: rgb(14 13 17 / .65);
                       border: 2px solid var(--accent); box-shadow: 0 0 18px rgb(0 0 0 / .4); transition: transform .2s var(--ease), background .2s var(--ease); }
.yt-card__play:hover .icon, .yt-card__play:focus-visible .icon { transform: scale(1.1); background: var(--accent); color: var(--c-on-accent); }
.yt-card__index { position: absolute; top: var(--sp-2); left: var(--sp-3); color: #fff; font: 700 .75rem/1 ui-monospace, Consolas, monospace;
                  letter-spacing: .15em; text-shadow: 0 1px 4px #000; pointer-events: none; }
.yt-card__title { margin: var(--sp-3) 0 0; font-size: var(--fs-1); letter-spacing: .04em; }
.yt-card__title a { color: var(--c-text); text-decoration: none; }
.yt-card__title a:hover { color: var(--accent); }
.yt-grid--featured > .yt-card:first-child .yt-card__title { font-size: var(--fs-3); }
.yt-grid--featured > .yt-card:first-child .yt-card__play .icon { width: 5rem; height: 5rem; }
.yt-card.is-playing .yt-card__play, .yt-card.is-playing .yt-card__index { display: none; }
.yt-note { margin: var(--sp-4) 0 0; color: var(--c-muted); font-size: .75rem; }

/* ---------- Chibi Aika in the footer ---------- */
.site-footer__chibi { position: absolute; right: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))); bottom: 100%;
                      width: 150px; aspect-ratio: 360 / 500; margin-bottom: -38px; pointer-events: none;
                      filter: drop-shadow(0 0 14px rgb(255 140 30 / .35)); }
.site-footer__chibi img, .site-footer__chibi video { width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
@media (max-width: 760px) { .site-footer__chibi { width: 110px; margin-bottom: -28px; } }
/* room for the chibi so it does not cover the last content element */
.site-footer { margin-top: calc(var(--sp-7) + 150px); }
@media (max-width: 760px) { .site-footer { margin-top: calc(var(--sp-7) + 100px); } }

/* ---------- Sticky header (after scrolling past the header) ---------- */
.site-header.is-stuck { position: fixed !important; top: 0; left: 0; right: 0; padding-top: 0; z-index: 60; --tab-h: 3.5rem;
                        background: rgb(14 13 17 / .9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--c-line);
                        animation: header-in .25s var(--ease); }
.site-header.is-stuck .site-header__brand { height: 3.5rem; }
.site-header.is-stuck .site-header__brand .logo { font-size: 1.2rem; }
.site-header.is-stuck .main-nav { padding: var(--sp-2) 0; }
.site-header.is-stuck .main-nav::after, .site-header.is-stuck .main-nav::before { display: none; }
.site-header.is-stuck .site-header__actions { height: 3.5rem; background: var(--c-accent) !important;
                                              clip-path: polygon(1.5rem 0, 100% 0, 100% 100%, 0 100%, 0 1.5rem) !important; }
.site-header.is-stuck .site-header__actions .socials { padding-top: var(--sp-2); }
.site-header.is-stuck .site-header__actions .btn { height: 2.6rem; }
@keyframes header-in { from { transform: translateY(-100%); } }
@media (max-width: 960px) { .site-header.is-stuck { --tab-h: 3.75rem; } .site-header.is-stuck .main-nav { padding: var(--sp-4) var(--gutter) var(--sp-6); } }

/* ---------- Page head as a banner (content and full-width pages) ---------- */
.page-head { position: relative; isolation: isolate; overflow: hidden; padding: var(--sp-7) var(--sp-7) var(--sp-6);
             background: var(--c-surface) url("../Images/Hero/hero-bg-1440.webp") 70% 40% / cover no-repeat;
             clip-path: polygon(0 0, calc(100% - var(--cut-lg)) 0, 100% var(--cut-lg), 100% 100%, 0 100%); }
.page-head::before { content: ""; position: absolute; inset: 0; z-index: -1;
                     background: linear-gradient(90deg, rgb(14 13 17 / .96) 0%, rgb(14 13 17 / .85) 50%, rgb(14 13 17 / .45) 100%); }
.page-head::after { /* HUD corner bottom-right */
  content: ""; position: absolute; right: var(--sp-5); bottom: var(--sp-5); width: 2rem; height: 2rem;
  border-right: 2px solid var(--c-cyan); border-bottom: 2px solid var(--c-cyan); opacity: .8; }
@media (max-width: 760px) { .page-head { padding: var(--sp-6) var(--gutter); width: 100%; clip-path: none; } }

/* ---------- Reveal on scroll (added by main.js only, so no-JS shows everything) ---------- */
.js-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js-reveal.is-visible { opacity: 1; transform: none; }

/* ---------- "At a glance" facts (definition list in a text element) ---------- */
.glance { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2) var(--sp-4); margin: 0; font-size: var(--fs-0); }
.glance dt { color: var(--c-muted); font: 600 .72rem/1.6 var(--f-display); text-transform: uppercase; letter-spacing: .1em; }
.glance dd { margin: 0; font-weight: 600; }
.ce-bodytext ol, .ce-bodytext ul { padding-left: 1.2em; }
.ce-bodytext li + li { margin-top: var(--sp-1); }
.ce-bodytext code { padding: .1em .35em; background: var(--c-bg); border: 1px solid var(--c-line); font-size: .9em; }
.ce-intext.ce-right .ce-gallery { float: right; margin: 0 0 var(--sp-4) var(--sp-6); max-width: 45%; }
.ce-intext.ce-left .ce-gallery { float: left; margin: 0 var(--sp-6) var(--sp-4) 0; max-width: 45%; }
@media (max-width: 760px) { .ce-intext.ce-left .ce-gallery, .ce-intext.ce-right .ce-gallery { float: none; margin: 0 0 var(--sp-4); max-width: 100%; } }

/* ---------- FAQ accordion ---------- */
.faq { display: grid; gap: var(--sp-3); max-width: 56rem; }
.faq__item { background: var(--c-surface); border-left: 3px solid var(--c-line); transition: border-color .2s var(--ease); }
.faq__item[open], .faq__item:hover { border-left-color: var(--c-accent); }
.faq__q { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); cursor: pointer;
          list-style: none; font: 700 var(--fs-1)/1.35 var(--f-display); text-transform: uppercase; letter-spacing: .04em; }
.faq__q::-webkit-details-marker { display: none; }
.faq__icon { position: relative; flex: none; width: 1rem; height: 1rem; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px;
                                         background: var(--c-accent); transition: rotate .2s var(--ease); }
.faq__icon::after { rotate: 90deg; }
.faq__item[open] .faq__icon::after { rotate: 0deg; }
.faq__a { padding: 0 var(--sp-5) var(--sp-5); color: #cfc9c2; }
.faq__a p:last-child { margin-bottom: 0; }

/* ---------- Hero ----------
   Framed stage like the reference: angled frame inset from the viewport, orange bar down the left edge (continuing
   the logo tab), orange panel behind Aika on the right, HUD corner brackets and a data-rain / ember canvas
   (effects taken from the AikaV2Test dashboard and its scene backgrounds). */
.hero { position: relative; isolation: isolate; display: flex; align-items: center;
        width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--container) - 2 * var(--gutter)); margin: var(--sp-4) auto 0;
        min-height: min(88vh, 840px); }
/* the clipped stage (background, effects, panel, bar); Aika and the copy sit outside it so she can step out of the frame */
.hero__frame { position: absolute; inset: 0; z-index: -1; overflow: hidden; isolation: isolate; background: var(--c-surface);
               clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.5rem), calc(100% - 2.5rem) 100%, 0 100%); }
.hero__bg { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.hero__frame::before { /* darken the left side for copy legibility */
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(180deg, rgb(14 13 17 / .85) 0, transparent 7rem), /* keeps the nav row readable */
              linear-gradient(90deg, rgb(14 13 17 / .94) 0%, rgb(14 13 17 / .7) 38%, rgb(14 13 17 / .1) 70%),
              linear-gradient(0deg, rgb(14 13 17 / .85) 0%, transparent 30%); }
.hero__fx { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; opacity: .75;
            -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 50%, transparent 74%); mask-image: linear-gradient(90deg, #000 0%, #000 50%, transparent 74%); }
.hero__bar { position: absolute; left: 0; top: 0; z-index: 2; width: var(--bar-w); height: 54%; background: var(--c-accent);
             clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.5rem), 0 100%); }
.hero__panel { position: absolute; top: 0; right: 0; bottom: 0; z-index: -1; width: var(--panel-w);
               background: repeating-linear-gradient(135deg, rgb(0 0 0 / .05) 0 2px, transparent 2px 14px),
                           linear-gradient(180deg, #ff8a1f 0%, #ff7a12 55%, rgb(255 106 0 / .25) 88%, transparent 100%); }
.hero__hud { position: absolute; inset: var(--sp-5) var(--sp-5) calc(3rem + var(--sp-5)); z-index: 1; pointer-events: none; }
.hero__hud::before, .hero__hud::after { content: ""; position: absolute; width: 2.5rem; height: 2.5rem; }
.hero__hud::before { left: var(--sp-6); bottom: 0; border-left: 2px solid var(--c-cyan); border-bottom: 2px solid var(--c-cyan); }
.hero__hud::after { right: calc(var(--panel-w) + var(--sp-4)); top: calc(var(--tab-h) + var(--sp-2)); border-right: 2px solid var(--c-cyan);
                    border-top: 2px solid var(--c-cyan); opacity: .7; }
.hero__hud-label { position: absolute; left: calc(var(--sp-6) + 3.25rem); bottom: .25rem; color: var(--c-muted);
                   font: 500 .7rem/1 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .2em; text-transform: uppercase; }
.hero__hud-label::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .6rem; border-radius: 50%;
                           background: var(--c-accent); box-shadow: var(--glow); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.hero__inner { position: relative; width: 100%; padding: calc(var(--tab-h) + var(--sp-7)) var(--sp-8) var(--sp-8) calc(var(--bar-w) + var(--sp-7)); }
.hero__copy { max-width: 36rem; position: relative; z-index: 1; }
.hero__kicker { display: inline-block; margin-bottom: var(--sp-4); padding: var(--sp-1) var(--sp-3); background: var(--c-accent); color: var(--c-on-accent);
                font: 700 var(--fs-0)/1.4 var(--f-display); text-transform: uppercase; letter-spacing: .12em;
                clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.hero__title { margin-bottom: var(--sp-4); text-shadow: 0 2px 24px rgb(0 0 0 / .5); }
.hero__text { color: #ddd6cf; font-size: var(--fs-2); max-width: 32em; }
.hero__text p:last-child { margin-bottom: 0; }
.hero__actions { display: flex; flex-wrap: wrap; row-gap: var(--sp-3); margin-top: var(--sp-6); }
/* fused pill pair like the reference: orange pill with a dark pill tucked behind it */
.hero__actions .btn--primary { position: relative; z-index: 1; }
.hero__actions .btn--ghost { margin-left: -1.5rem; padding-left: 2.6rem; background: rgb(29 27 33 / .92); border-color: #3a3640; }
.hero__rule { width: 120px; height: 3px; background: var(--c-accent); margin-top: var(--sp-6); box-shadow: var(--glow); }

/* Aika: seamless VP9-alpha loop (550×800, ~240 KB); Safari (no VP9 alpha) and reduced motion keep the poster */
.hero__aika { position: absolute; right: calc(var(--panel-w) * .1); bottom: 0; height: calc(100% - var(--tab-h) + 1rem);
              aspect-ratio: 550 / 800; z-index: 0; pointer-events: none; filter: drop-shadow(0 0 22px rgb(255 140 30 / .45));
              -webkit-mask-image: linear-gradient(to top, transparent 0, #000 12%); mask-image: linear-gradient(to top, transparent 0, #000 12%); }
.hero__aika img, .hero__aika video { width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
.hero__aika img { animation: breathe 4s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes breathe { 50% { transform: scale(1.012) translateY(-.4%); } }

/* Breaking out of the grid (desktop): the stage runs from viewport edge to viewport edge, taking the logo tab / left
   bar and the orange panel / header block with it, while logo, nav, copy, socials and the quick-links bar stay on the
   grid; Aika steps out of the frame at the bottom, next to the quick-links bar, which ends before her.
   --edge = distance from the grid to the viewport edge. */
:root { --edge: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))); --aika-drop: 4.5rem; }
@media (min-width: 961px) {
  .hero { width: auto; max-width: none; margin: 0; }
  body:has(.page-main > .hero:first-child) .site-header:not(.is-stuck) { padding-top: 0; }
  .hero__panel { width: calc(var(--panel-w) + var(--edge)); }
  .hero__hud { left: calc(var(--sp-5) + var(--edge) - var(--gutter)); right: calc(var(--sp-5) + var(--edge)); }
  .hero__inner { padding-right: calc(var(--sp-8) + var(--edge)); padding-left: calc(var(--edge) + var(--bar-w) + var(--sp-7)); }
  .hero__aika { right: calc(var(--panel-w) * .1 + var(--edge)); bottom: calc(-1 * var(--aika-drop));
                height: calc(100% - var(--tab-h) + 1rem + var(--aika-drop));
                -webkit-mask-image: linear-gradient(to top, transparent 0, #000 5%); mask-image: linear-gradient(to top, transparent 0, #000 5%); }
  body:has(.page-main > .hero:first-child) .site-header__inner { width: auto; max-width: none; margin-inline: 0; }
  body:has(.page-main > .hero:first-child) .site-header__brand { width: calc(var(--tab-w) + var(--edge)); padding-left: calc(var(--edge) + var(--sp-5)); }
  body:has(.page-main > .hero:first-child) .site-header__actions { width: calc(var(--panel-w) + var(--edge)); padding-right: var(--edge); }
  body:has(.page-main > .hero:first-child) .site-header__actions .btn { border-radius: 0 0 .9rem .9rem; }
  .hero + .frame-type-aikanova_icontiles.frame-layout-2 { width: auto; max-width: none;
                                                         margin-left: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
                                                         margin-right: calc(var(--panel-w) + var(--edge) + var(--sp-6)); }
  .hero + .frame-layout-2 + .frame-type-aikanova_icontiles { margin-top: calc(var(--aika-drop) + var(--sp-3)); }
}
@media (min-width: 961px) and (max-width: 1359px) {
  .main-nav a { padding-inline: .35rem; letter-spacing: .05em; }
  .main-nav__lang { margin-left: var(--sp-1); }
}
@media (min-width: 961px) and (max-width: 1279px) {
  .hero__aika { max-width: 42%; }
  .hero + .frame-layout-2 .tiles--bar .tile { padding-inline: var(--sp-3); }
}
@media (min-width: 961px) and (max-width: 1099px) {
  .hero + .frame-layout-2 .tiles--bar .tile { padding-inline: var(--sp-2); }
  .hero + .frame-layout-2 .tiles--bar .tile__title { letter-spacing: .06em; }
}

@media (max-width: 960px) {
  .hero { width: 100%; margin-top: 0; flex-direction: column; align-items: stretch; min-height: 0; }
  .hero__frame { clip-path: none; }
  .hero__bar, .hero__panel, .hero__hud { display: none; }
  .hero__frame::before { background: linear-gradient(180deg, rgb(14 13 17 / .9) 0%, rgb(14 13 17 / .55) 55%, var(--c-bg) 100%); }
  .hero__fx { -webkit-mask-image: none; mask-image: none; opacity: .35; }
  .hero__inner { padding: var(--sp-6) var(--gutter) 0; }
  .hero__actions { gap: var(--sp-3); }
  .hero__actions .btn--ghost { margin-left: 0; padding-left: 1.6em; }
  .hero__aika { position: relative; right: auto; height: auto; width: min(80%, 360px); margin: var(--sp-4) auto 0; }
}

/* ---------- Footer, animated ----------
   The community band breaks out to the right viewport edge (like the hero panel) while its copy stays on the grid;
   a ticker with Aika's talents, link columns that rise in one after another when the footer scrolls into view
   (main.js adds .footer-pending), a scanning beam along the top edge and a big outlined wordmark with a light sweep. */
.site-footer::before { width: 100%; height: 1px; box-shadow: none; background: linear-gradient(90deg, var(--c-accent), rgb(255 138 31 / .15) 40%, transparent); }
.site-footer::after { content: ""; position: absolute; left: 0; top: -2px; width: 18%; height: 3px; pointer-events: none;
                      background: linear-gradient(90deg, transparent, var(--c-accent), #fff3, transparent); filter: drop-shadow(0 0 6px var(--c-accent));
                      animation: beam 7s var(--ease) infinite; }
@keyframes beam { 0% { translate: -100% 0; opacity: 0; } 8% { opacity: 1; } 55%, 100% { translate: 560% 0; opacity: 0; } }

.footer-cta__inner { isolation: isolate; overflow: hidden; background-size: 40px 40px, auto; animation: stripes 3s linear infinite; }
@keyframes stripes { to { background-position: 40px 0, 0 0; } }
.footer-cta__inner::after { /* light sweep across the band */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent 35%, rgb(255 255 255 / .28) 50%, transparent 65%); translate: -100% 0;
  animation: sweep 6s var(--ease) 1s infinite; }
@keyframes sweep { 0% { translate: -100% 0; } 35%, 100% { translate: 100% 0; } }
.footer-cta { z-index: 1; }
.site-footer { overflow-x: clip; } /* the beam runs past the right edge; clip keeps the chibi above the footer visible */
.site-footer__chibi { animation: hop 5s var(--ease) infinite; transform-origin: 50% 100%; }
@keyframes hop { 0%, 80%, 100% { translate: 0 0; } 86% { translate: 0 -10px; } 90% { translate: 0 0; } 94% { translate: 0 -4px; } }

.footer-ticker { overflow: hidden; margin-top: var(--sp-6); border-block: 1px solid var(--c-line); background: var(--c-bg);
                 -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.footer-ticker__track { display: flex; width: max-content; animation: ticker 45s linear infinite; }
.footer-ticker:hover .footer-ticker__track { animation-play-state: paused; }
.footer-ticker span { flex: none; padding: var(--sp-3) 0; white-space: pre; color: var(--c-muted);
                      font: 600 .8rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .25em; }
.footer-ticker span:nth-child(even) { color: var(--c-accent); }
.footer-ticker span::after { content: "\25C6"; margin-inline: 1.1em; color: var(--c-muted); }
@keyframes ticker { to { translate: -50% 0; } }

.site-footer__grid > * { transition: opacity .6s var(--ease), translate .6s var(--ease); }
.site-footer__grid > :nth-child(2) { transition-delay: .1s; }
.site-footer__grid > :nth-child(3) { transition-delay: .2s; }
.site-footer__grid > :nth-child(4) { transition-delay: .3s; }
.footer-pending .site-footer__grid > * { opacity: 0; translate: 0 24px; }
.site-footer h2 { position: relative; padding-bottom: var(--sp-2); }
.site-footer h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 1.5rem; height: 2px; background: var(--c-accent);
                         transition: width .5s var(--ease); }
.site-footer nav:hover h2::after { width: 3.5rem; }
.site-footer li a { position: relative; transition: color .2s var(--ease), padding .2s var(--ease); transform: none !important; }
.site-footer li a::before { content: "\203A"; position: absolute; left: 0; color: var(--c-accent); opacity: 0; translate: -6px 0;
                            transition: opacity .2s var(--ease), translate .2s var(--ease); }
.site-footer li a:hover { padding-left: 1rem; }
.site-footer li a:hover::before { opacity: 1; translate: 0 0; }
.site-footer .socials a { transition: translate .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease); }
.site-footer .socials a:hover { translate: 0 -3px; box-shadow: 0 6px 16px rgb(255 138 31 / .25); color: var(--c-accent); }
/* the column-link rules above (.site-footer li a) must not reach the icon buttons: keep them centred, no arrow, no indent */
.site-footer .socials li a, .site-footer .socials li a:hover { display: inline-grid; place-items: center; padding: 0; }
.site-footer .socials li a::before { content: none; }

.site-footer__wordmark { width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--container) - 2 * var(--gutter)); margin: 0 auto -.12em;
                         font: 800 clamp(3.5rem, 16.5vw, 15.5rem)/.8 var(--f-display); letter-spacing: .02em; text-transform: uppercase;
                         white-space: nowrap; overflow: hidden; user-select: none; pointer-events: none;
                         color: transparent; -webkit-text-stroke: 1px rgb(255 138 31 / .28);
                         background: linear-gradient(100deg, transparent 40%, rgb(255 138 31 / .55) 50%, transparent 60%) 0 0 / 250% 100% no-repeat;
                         -webkit-background-clip: text; background-clip: text; animation: wordmark 9s linear infinite; }
.site-footer__wordmark span { -webkit-text-stroke-color: rgb(255 255 255 / .14); }
@keyframes wordmark { from { background-position: 150% 0; } to { background-position: -150% 0; } }
.site-footer__bottom { position: relative; background: var(--c-surface); }
.site-footer__caret { display: inline-block; width: .5em; height: 1em; margin-left: .3em; vertical-align: -.15em; background: var(--c-accent);
                      animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.site-footer__hud::before { animation: pulse 2s ease-in-out infinite; }
.back-to-top:hover .icon { animation: nudge .7s var(--ease) infinite; }
@keyframes nudge { 50% { translate: 0 -4px; } }
@media (min-width: 961px) {
  .footer-cta { width: auto; max-width: none; margin-left: var(--edge); margin-right: 0; }
  .footer-cta__inner { padding-right: calc(170px + var(--sp-6) + var(--edge));
                       clip-path: polygon(0 0, 100% 0, 100% 100%, var(--cut-lg) 100%, 0 calc(100% - var(--cut-lg))); }
}

/* ---------- Motion, site-wide ----------
   Hero copy and stage come in on load; buttons get a shine on hover; section rules draw in, and cards / tiles rise in
   one after another when their block is revealed. All of it is off with prefers-reduced-motion (rule below). */
.hero__copy > * { animation: rise .7s var(--ease) both; }
.hero__copy > :nth-child(2) { animation-delay: .08s; }
.hero__copy > :nth-child(3) { animation-delay: .16s; }
.hero__copy > :nth-child(4) { animation-delay: .24s; }
.hero__copy > :nth-child(5) { animation-delay: .32s; }
.hero__copy > :nth-child(6) { animation-delay: .4s; }
@keyframes rise { from { opacity: 0; translate: 0 22px; } }
.hero__panel { animation: slide-in .9s var(--ease) both; }
@keyframes slide-in { from { translate: 100% 0; } }
.hero__bar { animation: drop .8s var(--ease) .15s both; }
@keyframes drop { from { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); } }
.hero__aika { animation: appear 1s var(--ease) .25s both; }
@keyframes appear { from { opacity: 0; translate: 0 30px; } }
.hero__rule { animation: grow .8s var(--ease) .5s both; transform-origin: left; }
@keyframes grow { from { scale: 0 1; } }

.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; translate: -120% 0;
              background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / .35) 50%, transparent 70%); }
.btn:hover::after { animation: shine .7s var(--ease); }
@keyframes shine { to { translate: 120% 0; } }

.js-reveal .section-head::after { transform-origin: left; scale: 0 1; transition: scale 1s var(--ease) .25s; }
.js-reveal.is-visible .section-head::after { scale: 1 1; }
.js-reveal :is(.teasers, .tiles, .yt-grid, .medialist) > * { opacity: 0; translate: 0 20px; transition: opacity .5s var(--ease), translate .5s var(--ease); }
.js-reveal.is-visible :is(.teasers, .tiles, .yt-grid, .medialist) > * { opacity: 1; translate: 0 0; }
.js-reveal.is-visible :is(.teasers, .tiles, .yt-grid, .medialist) > :nth-child(2) { transition-delay: .08s; }
.js-reveal.is-visible :is(.teasers, .tiles, .yt-grid, .medialist) > :nth-child(3) { transition-delay: .16s; }
.js-reveal.is-visible :is(.teasers, .tiles, .yt-grid, .medialist) > :nth-child(4) { transition-delay: .24s; }
.js-reveal.is-visible :is(.teasers, .tiles, .yt-grid, .medialist) > :nth-child(5) { transition-delay: .32s; }
.js-reveal.is-visible :is(.teasers, .tiles, .yt-grid, .medialist) > :nth-child(n+6) { transition-delay: .4s; }
.tile__icon { transition: color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease), rotate .3s var(--ease), scale .3s var(--ease); }
.tile:has(.tile__link):hover .tile__icon { rotate: -6deg; scale: 1.08; }

/* ---------- Motion for content elements ----------
   Reveal (inside a block that main.js reveals on scroll): images wipe in, rules and brackets draw, headings and
   banner copy slide in. Hover: a spotlight follows the pointer on cards and tiles (--mx / --my from main.js), images
   zoom, play buttons pulse. Off with prefers-reduced-motion (rule below). */
.js-reveal :is(.ce-gallery img, .promo__image, .featured__media img, .fcard__image, .stats__image) {
  clip-path: inset(0 100% 0 0); transition: clip-path .9s var(--ease) .15s, transform .35s var(--ease); }
.js-reveal.is-visible :is(.ce-gallery img, .promo__image, .featured__media img, .fcard__image, .stats__image) { clip-path: inset(0 0 0 0); }
.js-reveal > header, .js-reveal :is(.section-head h2, .ce-bodytext > h2, .ce-bodytext > h3) { opacity: 0; translate: -18px 0;
  transition: opacity .6s var(--ease) .1s, translate .6s var(--ease) .1s; }
.js-reveal.is-visible > header, .js-reveal.is-visible :is(.section-head h2, .ce-bodytext > h2, .ce-bodytext > h3) { opacity: 1; translate: 0 0; }
.frame-panel::before, .panel::before { transition: width .8s var(--ease) .3s; }
.js-reveal.frame-panel::before, .js-reveal .panel::before { width: 0; }
.js-reveal.is-visible.frame-panel::before, .js-reveal.is-visible .panel::before { width: 64px; }
.js-reveal .teaser__body::before, .js-reveal .medialist__rule::before, .js-reveal .medialist__item::after, .js-reveal .promo::after {
  transform-origin: left; scale: 0 1; transition: scale .9s var(--ease) .35s; }
.js-reveal.is-visible .teaser__body::before, .js-reveal.is-visible .medialist__rule::before,
.js-reveal.is-visible .medialist__item::after, .js-reveal.is-visible .promo::after { scale: 1 1; }

.js-reveal .banner__bg { scale: 1.12; transition: scale 1.6s var(--ease); }
.js-reveal.is-visible .banner__bg { scale: 1; }
.js-reveal .banner::after { scale: 1 0; transition: scale .7s var(--ease) .3s; }
.js-reveal.is-visible .banner::after { scale: 1 1; }
.js-reveal .banner__content > *, .js-reveal .banner__badge { opacity: 0; translate: 0 16px; transition: opacity .6s var(--ease), translate .6s var(--ease); }
.js-reveal .banner__badge { translate: 0 -100%; }
.js-reveal.is-visible .banner__content > *, .js-reveal.is-visible .banner__badge { opacity: 1; translate: 0 0; }
.js-reveal.is-visible .banner__content > :nth-child(2) { transition-delay: .1s; }
.js-reveal.is-visible .banner__content > :nth-child(3) { transition-delay: .2s; }
.js-reveal.is-visible .banner__content > :nth-child(4) { transition-delay: .3s; }
.js-reveal.is-visible .banner__badge { transition-delay: .45s; }
.js-reveal .fcard__bar { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); transition: clip-path .8s var(--ease) .15s; }
.js-reveal.is-visible .fcard__bar { clip-path: polygon(0 0, 100% 0, calc(100% - 3rem) 100%, 0 100%); }

/* pulsing rings on play buttons */
.banner__play::before, .yt-card__play .icon { position: relative; }
.banner__play::before { content: ""; position: absolute; inset: -2px; border: 2px solid var(--c-accent); border-radius: 50%;
                        animation: ring 2.4s var(--ease) infinite; pointer-events: none; }
@keyframes ring { 0% { scale: 1; opacity: .8; } 70%, 100% { scale: 1.6; opacity: 0; } }
.yt-card__play:hover .icon, .yt-card__play:focus-visible .icon { animation: ring-shadow 1.2s var(--ease) infinite; }
@keyframes ring-shadow { 0% { box-shadow: 0 0 0 0 var(--accent); } 100% { box-shadow: 0 0 0 16px transparent; } }

/* spotlight that follows the pointer */
.teaser, .tile, .promo, .fcard { --mx: -999px; --my: -999px; }
.teaser:hover, .promo:hover, .fcard:hover { background-image: radial-gradient(260px circle at var(--mx) var(--my), rgb(255 138 31 / .1), transparent 70%); }
.tile:hover { background-image: radial-gradient(180px circle at var(--mx) var(--my), rgb(255 138 31 / .14), transparent 70%); }
.tiles--list .tile:hover { background-image: none; }

/* hover details */
.teaser__media { overflow: hidden; }
.teaser__media img { transition: transform .4s var(--ease), filter .4s var(--ease); }
.teaser:has(.teaser__link):hover .teaser__media img { transform: scale(1.06); filter: saturate(1.15); }
.teaser::after { transform-origin: 100% 100%; transition: scale .25s var(--ease); }
.teaser:has(.teaser__link):hover::after { scale: 1.35; }
.teaser__tag { background-size: 250% 100%; background-repeat: no-repeat; }
.teaser:hover .teaser__media .teaser__tag, .teasers:not(.teasers--compact) .teaser:hover .teaser__body > .teaser__tag { background-image: linear-gradient(100deg, transparent 40%, rgb(255 255 255 / .45) 50%, transparent 60%);
                             animation: tag-shine .8s var(--ease); }
@keyframes tag-shine { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.ce-gallery figure, .featured__media, .promo { overflow: hidden; }
.ce-gallery a img, .featured__media img, .promo__image { transition: transform .45s var(--ease), clip-path .9s var(--ease) .15s; }
.ce-gallery a:hover img, .featured__media:hover img, .promo:hover .promo__image { transform: scale(1.04); }
.promo { transition: border-color .2s var(--ease); }
.promo:hover { border-top-color: var(--c-cyan); }
.fcard__image { transition: transform .5s var(--ease), clip-path .9s var(--ease) .15s; }
.fcard { overflow: hidden; }
.fcard:hover .fcard__image { transform: scale(1.03); }
.stat__fill { background-image: linear-gradient(100deg, transparent 40%, rgb(255 255 255 / .55) 50%, transparent 60%),
                                linear-gradient(90deg, rgb(255 255 255 / .2), var(--accent));
              background-size: 250% 100%, 100% 100%; background-repeat: no-repeat; animation: bar-sheen 3.2s linear 1.4s infinite; }
@keyframes bar-sheen { 0% { background-position: 150% 0, 0 0; } 45%, 100% { background-position: -50% 0, 0 0; } }
.faq__item { transition: border-color .2s var(--ease), background .2s var(--ease); }
.faq__item:hover { background: var(--c-surface-2); }
.faq__item[open] .faq__a { animation: rise .45s var(--ease); }
.glance dd { transition: color .2s var(--ease); }
.glance dt:hover + dd, .glance dd:hover { color: var(--c-accent); }

/* ---------- YouTube modal ----------
   Opens from the video cards: local 16:9 poster with a consent panel first, the youtube-nocookie player only after
   "Play video". Prev / next (buttons, arrow keys) walk through the videos of the same element. */
html:has(.yt-modal[open]) { overflow: hidden; }
.yt-modal { width: min(100% - 2 * var(--gutter), 72rem); max-width: none; max-height: calc(100dvh - 2rem); padding: 0; border: 0;
            background: none; color: var(--c-text); overflow: visible; }
.yt-modal::backdrop { background: rgb(8 7 10 / .82); backdrop-filter: blur(6px); }
.yt-modal[open] { animation: modal-in .35s var(--ease); }
.yt-modal[open]::backdrop { animation: fade-in .3s var(--ease); }
@keyframes modal-in { from { opacity: 0; translate: 0 24px; scale: .97; } }
@keyframes fade-in { from { opacity: 0; } }
.yt-modal__box { position: relative; background: var(--c-surface); border-top: 2px solid var(--c-accent);
                 box-shadow: 0 30px 80px rgb(0 0 0 / .6), 0 0 0 1px var(--c-line);
                 clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-lg)), calc(100% - var(--cut-lg)) 100%, 0 100%); }
.yt-modal__head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-5); }
.yt-modal__index { color: var(--c-accent); font: 700 .8rem/1 ui-monospace, Consolas, monospace; letter-spacing: .15em; }
.yt-modal__title { flex: 1; min-width: 0; margin: 0; color: var(--c-text); font-size: var(--fs-1); letter-spacing: .04em;
                   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yt-modal__close, .yt-modal__nav { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: none; padding: 0; cursor: pointer;
                                   background: var(--c-surface-2); color: var(--c-text); border: 1px solid var(--c-line);
                                   transition: color .2s var(--ease), border-color .2s var(--ease), rotate .3s var(--ease); }
.yt-modal__close:hover, .yt-modal__nav:hover { color: var(--c-accent); border-color: var(--c-accent); }
.yt-modal__close:hover { rotate: 90deg; }
.yt-modal__stage { position: relative; aspect-ratio: 16 / 9; max-height: calc(100dvh - 10rem); margin-inline: auto; background: #000; overflow: hidden; }
.yt-modal__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.45) saturate(1.1);
                    transition: filter .5s var(--ease), scale 6s linear; }
.yt-modal.is-switching .yt-modal__poster, .yt-modal.is-switching .yt-modal__consent { animation: fade-in .4s var(--ease); }
.yt-modal__stage iframe { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; border: 0; animation: fade-in .4s var(--ease); }
.yt-modal__consent { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 1; width: min(100% - 2rem, 34rem);
                     padding: var(--sp-5) var(--sp-6); background: rgb(14 13 17 / .88); backdrop-filter: blur(8px);
                     border-left: 3px solid var(--c-accent); box-shadow: 0 10px 40px rgb(0 0 0 / .5); }
.yt-modal__kicker { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-2); color: #ff4e45;
                    font: 700 .75rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .14em; }
.yt-modal__question { margin: 0 0 var(--sp-2); font: 700 var(--fs-2)/1.2 var(--f-display); text-transform: uppercase; letter-spacing: .03em; }
.yt-modal__text { margin: 0 0 var(--sp-4); color: var(--c-muted); font-size: var(--fs-0); }
.yt-modal__remember { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4); font-size: var(--fs-0); cursor: pointer; }
.yt-modal__remember input { width: 1.1rem; height: 1.1rem; accent-color: var(--c-accent); }
.yt-modal__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.yt-modal.is-playing .yt-modal__consent { display: none; }
.yt-modal__foot { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); }
.yt-modal__prev .icon { rotate: 180deg; }
.yt-modal__count { color: var(--c-muted); font: 600 .75rem/1 ui-monospace, Consolas, monospace; letter-spacing: .15em; }
.yt-modal__forget { margin-left: auto; padding: 0; background: none; border: 0; color: var(--c-muted); font-size: .8rem;
                    text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.yt-modal__forget:hover { color: var(--c-accent); }
.yt-modal.is-single .yt-modal__nav, .yt-modal.is-single .yt-modal__count { display: none; }
@media (max-width: 640px) {
  .yt-modal { width: 100%; }
  .yt-modal__box { clip-path: none; }
  /* phones: poster as a 16:9 strip on top, consent text below it */
  .yt-modal__stage { aspect-ratio: auto; max-height: none; overflow: visible; background: var(--c-surface); }
  .yt-modal__poster { position: relative; inset: auto; display: block; height: auto; aspect-ratio: 16 / 9; filter: brightness(.8); }
  .yt-modal.is-playing .yt-modal__stage { aspect-ratio: 16 / 9; background: #000; }
  .yt-modal.is-playing .yt-modal__poster { position: absolute; inset: 0; height: 100%; }
  .yt-modal__consent { position: relative; left: auto; top: auto; translate: none; width: auto; margin: 0; border-left: 0;
                       border-top: 3px solid var(--c-accent); background: var(--c-surface); backdrop-filter: none; box-shadow: none; }
  .yt-modal__question { font-size: var(--fs-1); }
}
.yt-card__play { text-decoration: none; }

/* ---------- Page transitions (cross-document View Transitions) ----------
   Header parts keep their place and morph between page layouts (hero page ↔ sub page); the content leaves upwards
   and the new page is scanned in from the top behind an orange line. Browsers without support just navigate. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .site-header__brand { view-transition-name: brand; }
  .site-header__actions { view-transition-name: actions; }
  .main-nav { view-transition-name: nav; }
  .page-main { view-transition-name: page; }
  ::view-transition-group(brand), ::view-transition-group(actions), ::view-transition-group(nav) { animation-duration: .45s; animation-timing-function: var(--ease); }
  ::view-transition-old(page) { animation: vt-out .25s var(--ease) both; }
  ::view-transition-new(page) { animation: vt-in .55s var(--ease) .1s both; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  ::view-transition-group(root) { background: var(--c-bg); }
}
@keyframes vt-out { to { opacity: 0; translate: 0 -16px; filter: blur(3px); } }
@keyframes vt-in { from { clip-path: inset(0 0 100% 0); filter: drop-shadow(0 -2px 0 var(--c-accent)) brightness(1.3); }
                   to { clip-path: inset(0 0 0 0); } }

/* ---------- Scroll-driven motion (CSS only, no JS) ----------
   Reading progress along the top edge, a parallax hero that hands over to the content, cards that fan in and
   section titles that tighten as they arrive. Only where animation-timeline is supported. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    body::before { content: ""; position: fixed; left: 0; top: 0; right: 0; z-index: 90; height: 3px; pointer-events: none;
                   background: linear-gradient(90deg, var(--c-accent), #ffb15e); box-shadow: var(--glow); transform-origin: left;
                   animation: progress linear both; animation-timeline: scroll(root); }
    @keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

    .hero__bg { animation: hero-parallax linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    @keyframes hero-parallax { from { transform: scale(1.15); } to { transform: translateY(7%) scale(1.15); } }
    .hero__inner { animation: hero-away linear both; animation-timeline: scroll(root); animation-range: 10vh 85vh; }
    @keyframes hero-away { to { opacity: .15; transform: translateY(-48px); } }

    .teasers:not(.teasers--compact) > *, .yt-grid > * { --fan: -3deg; animation: fan linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    .teasers:not(.teasers--compact) > :nth-child(even), .yt-grid > :nth-child(even) { --fan: 3deg; }
    @keyframes fan { from { rotate: var(--fan); scale: .92; } }

    .section-head h2, .page-main .frame > header h2 { animation: tighten linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
    @keyframes tighten { from { letter-spacing: .22em; } }
  }
}

/* ---------- Easter eggs (main.js) ---------- */
.egg-bubble { position: absolute; left: 50%; bottom: 100%; translate: -50% -8px; z-index: 5; padding: var(--sp-2) var(--sp-3); white-space: nowrap;
              background: var(--c-text); color: var(--c-on-accent); font: 700 .85rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .06em;
              clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), 60% calc(100% - 8px), 50% 100%, 40% calc(100% - 8px), 0 calc(100% - 8px));
              padding-bottom: calc(var(--sp-2) + 8px); animation: bubble 1.8s var(--ease) both; pointer-events: none; }
@keyframes bubble { 0% { opacity: 0; scale: .6; } 12%, 80% { opacity: 1; scale: 1; } 100% { opacity: 0; translate: -50% -24px; } }
.site-footer__chibi.is-poked { pointer-events: auto; cursor: pointer; }
.site-footer__chibi.is-boing { animation: boing .5s var(--ease); }
@keyframes boing { 30% { scale: 1.08 .9; } 60% { scale: .95 1.08; translate: 0 -14px; } }
.egg-rain { position: fixed; inset: 0; z-index: 200; pointer-events: none; overflow: hidden; }
.egg-rain img { position: absolute; top: -160px; width: 120px; height: auto; animation: egg-fall linear forwards; filter: drop-shadow(0 0 12px rgb(255 140 30 / .5)); }
@keyframes egg-fall { to { translate: var(--dx, 0) calc(100vh + 200px); rotate: var(--spin, 360deg); } }
.egg-toast { position: fixed; left: 50%; bottom: var(--sp-6); z-index: 201; translate: -50% 0; padding: var(--sp-3) var(--sp-5);
             background: var(--c-surface); border-left: 3px solid var(--c-accent); box-shadow: 0 10px 40px rgb(0 0 0 / .5);
             font: 600 .8rem/1.2 ui-monospace, Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--c-text);
             animation: toast 4s var(--ease) both; }
@keyframes toast { 0% { opacity: 0; translate: -50% 20px; } 10%, 85% { opacity: 1; translate: -50% 0; } 100% { opacity: 0; } }
html.is-glitching body { animation: glitch .6s steps(2) both; }
@keyframes glitch {
  0% { filter: none; translate: 0; }
  20% { filter: hue-rotate(90deg) saturate(2); translate: -4px 0; }
  40% { filter: invert(.1) hue-rotate(-60deg); translate: 3px 1px; clip-path: inset(10% 0 30% 0); }
  60% { filter: saturate(3) contrast(1.4); translate: -2px -1px; clip-path: inset(40% 0 5% 0); }
  80% { filter: hue-rotate(180deg); translate: 2px 0; clip-path: none; }
  100% { filter: none; translate: 0; } }

/* ---------- 404 "Meltdown" (stats element with layout 3 on the error page) ----------
   The meter counts up to 100 %, then the bar overheats and shakes, the page flickers once like a broken signal. */
.frame-layout-3 .stats { max-width: 46rem; }
.frame-layout-3 .stat__label { color: var(--c-accent); font-size: var(--fs-1); }
.frame-layout-3 .stat__value { font-size: var(--fs-3); color: #ff4d3d; text-shadow: 0 0 18px rgb(255 77 61 / .6); animation: flicker 2.6s steps(1) 1.4s infinite; }
.frame-layout-3 .stat__bar { height: 10px; }
.frame-layout-3 .stat__fill { --accent: #ff4d3d; animation: overheat .12s linear 1.3s infinite alternate, bar-sheen 1.6s linear 1.3s infinite; }
.frame-layout-3 .stat__fill::after { top: -6px; height: 22px; width: 6px; }
@keyframes overheat { from { translate: 0 0; } to { translate: 1px -1px; } }
@keyframes flicker { 0%, 100% { opacity: 1; } 7% { opacity: .3; } 9% { opacity: 1; } 52% { opacity: .55; } 54% { opacity: 1; } }
body:has(.frame-type-aikanova_stats.frame-layout-3) .page-main { animation: glitch .6s steps(2) .2s both; }
body:has(.frame-type-aikanova_stats.frame-layout-3) .ce-gallery img { animation: shake .4s var(--ease) 1.5s 3; }
@keyframes shake { 25% { rotate: -4deg; } 75% { rotate: 4deg; } }

/* ---------- Twitch live status (/_live.json, main.js) ---------- */
.live-pill { position: fixed; left: var(--sp-4); bottom: var(--sp-4); z-index: 80; display: inline-flex; align-items: center; gap: var(--sp-2);
             padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-3); background: #9146ff; color: #fff; text-decoration: none;
             font: 700 .78rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .1em; box-shadow: 0 8px 30px rgb(145 70 255 / .45);
             clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); animation: pill-in .5s var(--ease) both; }
.live-pill[hidden] { display: none; }
.live-pill:hover { color: #fff; background: #772ce8; }
.live-pill i { width: .55rem; height: .55rem; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 0 0 #ff4d4d; animation: live-dot 1.6s infinite; }
.live-pill__viewers:not(:empty)::before { content: "\00B7  "; font-weight: 400; }
@keyframes live-dot { 70% { box-shadow: 0 0 0 8px transparent; } }
@keyframes pill-in { from { opacity: 0; translate: 0 20px; } }
html.is-live .hero__hud-label { color: var(--c-text); }
html.is-live .hero__hud-label::before { background: #ff4d4d; box-shadow: 0 0 10px #ff4d4d; }

/* header button keeps its label whole (the shine needs overflow: hidden); the longer German label takes the header
   socials' place below 1600px – they are in the hero and footer as well */
.site-header__actions .btn { flex: none; padding-inline: 1.1em; margin-left: auto; }
@media (max-width: 1599px) { html:lang(de) .site-header__actions .socials { display: none; } }
body { overflow-x: clip; } /* short glitch / overheat shakes must never cause a sideways scrollbar */

/* ---------- Chat terminal (aikanova_terminal) ---------- */
.terminal-block--with-intro { display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 961px) { .terminal-block--with-intro { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
.terminal-block__intro { margin: 0; color: #cfc9c2; font-size: var(--fs-2); max-width: 32ch; }
.terminal { max-width: 48rem; background: var(--c-surface); border-top: 2px solid var(--c-accent); box-shadow: 0 20px 60px rgb(0 0 0 / .45);
            clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-lg)), calc(100% - var(--cut-lg)) 100%, 0 100%); }
.terminal__bar { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-line);
                 color: var(--c-muted); font: 600 .72rem/1 ui-monospace, Consolas, monospace; letter-spacing: .2em; text-transform: uppercase; }
.terminal__bar i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--c-accent); box-shadow: var(--glow); animation: pulse 2s ease-in-out infinite; }
.terminal__log { height: 15rem; overflow-y: auto; padding: var(--sp-4); font: .9rem/1.6 ui-monospace, Consolas, monospace; scroll-behavior: smooth; }
.terminal__data { margin: 0; }
.terminal__data > div + div { margin-top: var(--sp-3); }
.terminal__data dt { font-weight: 700; }
.terminal__data dd { margin: 0; color: var(--c-muted); }
.terminal .cmd { color: var(--c-accent); }
.terminal__msg { margin: 0 0 var(--sp-2); animation: rise .25s var(--ease); }
.terminal__who { margin-right: var(--sp-2); font-weight: 700; }
.terminal__msg.is-you .terminal__who { color: var(--c-cyan); }
.terminal__msg.is-aika .terminal__who { color: var(--c-accent); }
.terminal__msg.is-other .terminal__who { color: var(--c-violet); }
.terminal__msg.is-sys { color: var(--c-muted); font-style: italic; }
.terminal__msg.is-sys a { text-decoration: none; }
.terminal__msg.is-typing::after { content: "\258D"; color: var(--c-accent); animation: caret 1s steps(1) infinite; }
.terminal__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: 0 var(--sp-4) var(--sp-3); }
.terminal__chips button { padding: var(--sp-1) var(--sp-3); background: none; border: 1px solid var(--c-line); color: var(--c-muted); cursor: pointer;
                          font: 600 .78rem/1.4 ui-monospace, Consolas, monospace; transition: color .2s var(--ease), border-color .2s var(--ease); }
.terminal__chips button:hover, .terminal__chips button:focus-visible { color: var(--c-accent); border-color: var(--c-accent); }
.terminal__input { display: flex; gap: var(--sp-2); align-items: center; padding: var(--sp-3) var(--sp-4) var(--sp-5); border-top: 1px solid var(--c-line); }
.terminal__input span { color: var(--c-cyan); font: 700 .9rem/1 ui-monospace, Consolas, monospace; }
.terminal__input input { flex: 1; min-width: 0; padding: var(--sp-2) var(--sp-3); background: var(--c-bg); color: var(--c-text);
                         border: 1px solid var(--c-line); font: .9rem ui-monospace, Consolas, monospace; }
.terminal__input input:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px rgb(255 138 31 / .2); }
@media (max-width: 760px) { .terminal { clip-path: none; } .terminal__log { height: 14rem; } }

/* ---------- Tables in text (RTE) ---------- */
.table-scroll { overflow-x: auto; margin: 0 0 var(--sp-5); }
.frame table { width: 100%; border-collapse: collapse; font-size: var(--fs-0); }
.frame th { text-align: left; padding: var(--sp-2) var(--sp-3); color: var(--c-accent); font: 700 .75rem/1.3 var(--f-display);
                  text-transform: uppercase; letter-spacing: .1em; border-bottom: 2px solid var(--c-accent); white-space: nowrap; }
.frame td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--c-line); vertical-align: top; color: #cfc9c2; }
.frame tbody tr:hover td { background: var(--c-surface); }
.frame-type-text ol { padding-left: 1.4em; }
.frame-type-text code { padding: .1em .35em; background: var(--c-bg); border: 1px solid var(--c-line); font-size: .9em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- News (EXT:news): start page block, list with category filter, detail ---------- */

/* ---------- Shared bits ---------- */
.news-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3);
             font: 600 .75rem/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); }
.news-meta time { color: var(--c-text); }
.news-meta time::before { content: "// "; color: var(--c-accent); }
.news-cat { --accent: var(--c-accent); display: inline-block; padding: .35em .6em; background: var(--accent); color: var(--c-on-accent);
            font: 700 .72rem/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; }
.news-cat--music { --accent: var(--c-violet); color: #fff; }
.news-cat--projects { --accent: var(--c-cyan); }
/* author chip: Aika's own posts get her sticker + an "AI" badge, so readers always see who wrote it */
.news-author { display: inline-flex; align-items: center; gap: var(--sp-2); text-transform: none; letter-spacing: .02em;
               font: 600 var(--fs-0)/1 var(--f-body); color: var(--c-text); }
.news-author img { width: 28px; height: 28px; border-radius: 50%; background: var(--c-surface-2); object-fit: cover;
                   box-shadow: 0 0 0 2px var(--c-surface), 0 0 0 3px var(--c-line); }
.news-author__letter { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c-surface-2);
                       color: var(--c-violet); font: 700 .8rem/1 var(--f-display); box-shadow: 0 0 0 2px var(--c-surface), 0 0 0 3px var(--c-line); }
.news-item .news-author__letter { width: 22px; height: 22px; font-size: .7rem; }
.news-author--aika img { box-shadow: 0 0 0 2px var(--c-surface), 0 0 0 3px var(--c-cyan), 0 0 12px rgb(42 212 230 / .5); }
.news-author__badge { font: 700 .62rem/1 var(--f-display); letter-spacing: .1em; padding: .3em .45em; color: var(--c-cyan);
                      border: 1px solid currentColor; }

/* ---------- Start page: "Latest news" (featured + 3 compact) ---------- */
.news-latest { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--sp-5); }
.news-feature { position: relative; display: grid; grid-template-rows: auto 1fr; background: var(--c-surface);
                clip-path: polygon(0 0, calc(100% - var(--cut-lg)) 0, 100% var(--cut-lg), 100% 100%, 0 100%); }
.news-feature__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.news-feature__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.news-feature:hover .news-feature__media img { transform: scale(1.04); }
.news-feature__media::after { /* fade into the panel + scanline */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, var(--c-surface)), repeating-linear-gradient(0deg, rgb(0 0 0 / .12) 0 1px, transparent 1px 3px); }
.news-feature__stamp { position: absolute; left: var(--sp-5); top: var(--sp-5); z-index: 1; display: flex; gap: var(--sp-2); }
.news-feature__new { font: 700 .72rem/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; padding: .45em .7em; color: var(--c-accent);
                     background: rgb(14 13 17 / .8); border: 1px solid var(--c-accent); }
.news-feature__new::before { content: ""; display: inline-block; width: .5em; height: .5em; margin-right: .5em; border-radius: 50%;
                             background: var(--c-accent); box-shadow: var(--glow); animation: news-blink 1.4s steps(2) infinite; }
@keyframes news-blink { 50% { opacity: .2; } }
.news-feature__body { position: relative; padding: 0 var(--sp-6) var(--sp-6); margin-top: calc(-1 * var(--sp-7)); z-index: 1; }
.news-feature__body .news-meta { margin-bottom: var(--sp-3); }
.news-feature__title { font-size: var(--fs-3); margin: 0 0 var(--sp-3); }
.news-feature__title a, .news-item__title a, .news-card__title a { color: var(--c-text); text-decoration: none; }
.news-card__title { color: var(--c-text); }
.news-feature__title a::after, .news-item__title a::after, .news-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.news-feature__teaser { color: var(--c-muted); margin-bottom: var(--sp-4); max-width: 60ch; }
.news-feature__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
                      padding-top: var(--sp-4); border-top: 1px solid var(--c-line); }
.news-more { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--c-accent);
             font: 700 var(--fs-0)/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; }
.news-more .icon { transition: transform .2s var(--ease); }
:is(.news-feature, .news-card):hover .news-more .icon { transform: translateX(3px); }

.news-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); align-content: start; }
.news-item { position: relative; display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--sp-4);
             padding: var(--sp-3); background: var(--c-surface); transition: background-color .2s, transform .2s var(--ease); }
.news-item:hover { background: #24212a; transform: translateX(3px); }
.news-item::before { content: ""; position: absolute; left: 0; top: var(--sp-3); bottom: var(--sp-3); width: 2px; background: var(--c-line); transition: background .2s; }
.news-item:hover::before { background: var(--c-accent); box-shadow: var(--glow); }
.news-item__thumb { aspect-ratio: 1; overflow: hidden; background: var(--c-surface-2); }
.news-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.news-item__body { display: flex; flex-direction: column; justify-content: center; gap: var(--sp-2); min-width: 0; }
.news-item__title { font-size: var(--fs-1); letter-spacing: .03em; margin: 0; }
.news-item .news-author { font-size: .8rem; }
.news-item .news-author img { width: 22px; height: 22px; }
.news-latest__side { display: grid; gap: var(--sp-4); align-content: start; }
.news-latest__all { display: flex; justify-content: center; padding: var(--sp-3); color: var(--c-muted); text-decoration: none;
                    border: 1px dashed var(--c-line); font: 700 var(--fs-0)/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; gap: var(--sp-2); }
.news-latest__all:hover { color: var(--c-accent); border-color: var(--c-accent); }

/* ---------- News page: filter + card grid + pagination ---------- */
.news-filter { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.news-filter a { padding: .55em 1.1em; border: 1px solid var(--c-line); color: var(--c-muted); text-decoration: none;
                 font: 700 .78rem/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase;
                 clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); }
.news-filter a:hover { color: var(--c-text); border-color: var(--c-accent); }
.news-filter a[aria-current] { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); }
.news-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-5);
             grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.news-card { position: relative; display: flex; flex-direction: column; background: var(--c-surface);
             clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
             transition: transform .2s var(--ease), background-color .2s; }
.news-card:hover { transform: translateY(-3px); background: #24212a; }
.news-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.news-card__media img { width: 100%; height: 100%; object-fit: cover; }
.news-card__media .news-cat { position: absolute; left: 0; bottom: 0; }
.news-card__body { position: relative; display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; padding: var(--sp-5); }
.news-card__body::before { content: ""; position: absolute; left: var(--sp-5); top: 0; width: 48px; height: 2px; background: var(--c-accent); }
.news-card__title { font-size: var(--fs-2); margin: 0; }
.news-card__teaser { color: var(--c-muted); font-size: var(--fs-0); margin: 0; flex: 1; }
.news-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.news-pager { display: flex; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-7); list-style: none; padding: 0; }
.news-pager a, .news-pager span { display: grid; place-items: center; min-width: 2.75rem; height: 2.75rem; padding-inline: var(--sp-3);
                                   background: var(--c-surface); color: var(--c-text); text-decoration: none; font: 700 var(--fs-0)/1 var(--f-display); }
.news-pager a:hover { color: var(--c-accent); }
.news-pager__back { transform: rotate(180deg); }
.news-pager [aria-current] { background: var(--c-accent); color: var(--c-on-accent); }

.page-head--news { margin-bottom: var(--sp-5); }
.news-empty { color: var(--c-muted); }

/* ---------- Detail page ---------- */
.news-detail { max-width: 860px; margin-inline: auto; }
.news-detail__head .breadcrumb ol { margin-bottom: var(--sp-5); }
.news-detail__head .news-meta { margin-bottom: var(--sp-4); }
.news-detail__title { font-size: var(--fs-4); color: var(--c-text); margin-bottom: var(--sp-4); }
.news-detail__lead { font-size: var(--fs-2); color: var(--c-text); line-height: 1.5; margin-bottom: var(--sp-6);
                     padding-left: var(--sp-4); border-left: 3px solid var(--c-accent); }
.news-detail__media { margin: 0 0 var(--sp-6);
                      clip-path: polygon(0 0, calc(100% - var(--cut-lg)) 0, 100% var(--cut-lg), 100% 100%, 0 100%); }
.news-detail__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.news-detail__media figcaption { padding: var(--sp-2) var(--sp-4); background: var(--c-surface); color: var(--c-muted); font-size: var(--fs-0); }
.news-detail__body { font-size: 1.075rem; }
.news-detail__body h2 { margin-top: var(--sp-6); }
.news-detail__sign { display: flex; align-items: center; gap: var(--sp-4); margin: var(--sp-7) 0 var(--sp-6); padding: var(--sp-5);
                     background: var(--c-surface); border-left: 3px solid var(--c-cyan); }
.news-detail__sign img { width: 72px; height: 72px; flex: none; }
.news-detail__sign p { margin: 0; color: var(--c-muted); font-size: var(--fs-0); }
.news-detail__sign strong { display: block; color: var(--c-text); font: 700 var(--fs-1)/1.3 var(--f-display); text-transform: uppercase; letter-spacing: .06em; }
.news-detail__nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.news-detail__nav a { display: block; padding: var(--sp-4) var(--sp-5); background: var(--c-surface); color: var(--c-text); text-decoration: none; }
.news-detail__nav a:hover { background: #24212a; }
.news-detail__nav small { display: block; color: var(--c-accent); font: 700 .72rem/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; margin-bottom: var(--sp-2); }
.news-detail__nav a + a { text-align: right; }

@media (max-width: 960px) {
  .news-latest { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .news-feature__body { padding: 0 var(--sp-4) var(--sp-5); margin-top: calc(-1 * var(--sp-6)); }
  .news-item { grid-template-columns: 5rem minmax(0, 1fr); }
  .news-detail__nav { grid-template-columns: 1fr; }
  .news-detail__nav a + a { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .news-feature__new::before { animation: none; } }