/* ===== site_core/styles/engine.css ===== */
/* Strofia — poem page (Jaspr static shell + edge-injected verse). */
/* Palette adopted from strofia.com (Bootstrap light/dark + brand tokens). */
:root{
  /* Ink, lines and accents from Strofia's design canvas (2026-10-14): blue = library, links, primary buttons;
     teal = genres, contributing, public-domain badges (--teal-fill under white text, --teal-ink on --teal-soft). */
  --bg:#ffffff; --ink:#0F1B2D; --ink-soft:#2A3342; --muted:#5B6474;
  --line:#E3E6EC; --accent:#1D4ED8; --panel:#F5F6F8; --verse:#0F1B2D;
  --teal:#0F766E; --teal-fill:#0F766E; --teal-ink:#0B5D57; --teal-soft:#E6F4F2;
  --brand-blue:#1D4ED8; --accent-soft:#EEF3FF;
  /* Bootstrap's secondary text (75% body) and strofia.com's --brand-cyan. */
  --subtext:rgba(15,27,45,.75); --brand-cyan:#0078d8;
  --on-accent:#ffffff; --wm-primary:#0B1730;
  /* Light-blue section band (how-it-works), like strofia.com's process-section. */
  --band-blue:#dbecfa;
  /* Slightly deeper panel for the "What's inside" band (strofia.com uses #eef0f1). */
  --panel-2:#eef0f1;
  /* Chrome: the NAVBAR is theme-aware (white in light, navy in dark) like
     strofia.com's Bootstrap navbar (see the dark blocks below). The FOOTER
     overrides these tokens locally to stay navy in both themes (see .foot). */
  --chrome-bg:#ffffff; --chrome-fg:#2A3342; --chrome-muted:#5B6474;
  --chrome-line:#E3E6EC;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#212529; --ink:#dee2e6; --ink-soft:#adb5bd; --muted:#959ca3;
    --line:#495057; --accent:#759cf7; --panel:#2a2f34; --verse:#dee2e6;
    --accent-soft:rgba(117,156,247,.17); --band-blue:#17222e; --panel-2:#2a2f34;
    --teal:#2DD4BF; --teal-ink:#5EEAD4; --teal-soft:rgba(45,212,191,.14);
  --on-accent:#0b1220; --wm-primary:#759cf7; --subtext:rgba(222,226,230,.75);
    --chrome-bg:#0B1730; --chrome-fg:#e9ecef; --chrome-muted:rgba(233,236,239,.62);
    --chrome-line:rgba(255,255,255,.12);
  }
}
:root[data-theme="dark"]{
  --bg:#212529; --ink:#dee2e6; --ink-soft:#adb5bd; --muted:#959ca3;
  --line:#495057; --accent:#759cf7; --panel:#2a2f34; --verse:#dee2e6;
  --accent-soft:rgba(117,156,247,.17); --band-blue:#17222e; --panel-2:#2a2f34;
    --teal:#2DD4BF; --teal-ink:#5EEAD4; --teal-soft:rgba(45,212,191,.14);
  --on-accent:#0b1220; --wm-primary:#759cf7; --subtext:rgba(222,226,230,.75);
  --chrome-bg:#0B1730; --chrome-fg:#e9ecef; --chrome-muted:rgba(233,236,239,.62);
  --chrome-line:rgba(255,255,255,.12);
}

*{box-sizing:border-box}
/* Landing gap for in-page section scrolls (the navbar is relative, so this is
   just breathing room; the scroll script reads this value as its offset). */
html{color-scheme:light dark;scroll-padding-top:72px}
/* A theme chosen by hand fixes the UA's colour scheme too: with only «light dark», an OS in dark mode drew dark
   native scrollbars and form controls on a page the reader had set to light (the genre page's chip rows). */
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.5 var(--font-sans,-apple-system),BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
/* Bootstrap's monospace stack (strofia.com's --font-mono). */
:root{--font-mono:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--font-display:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}

/* Chrome: the NAVBAR is theme-aware (white in light, navy in dark). */
.chrome{border-bottom:1px solid var(--chrome-line);background:var(--chrome-bg);position:relative;z-index:30}
/* Top navbar stays pinned while scrolling (like strofia.com's fixed navbar).
   Scoped to `header` so the `.chrome foot` footer is NOT stuck. `scroll-padding-top`
   above offsets anchor/section scrolling by the navbar height. */
header.chrome{position:sticky;top:0}
/* The FOOTER is permanently navy in BOTH themes, like strofia.com's dark
   footer — so it rebinds the --chrome-* tokens locally to navy, and every
   .ftr__* / .foot .bar child that reads them turns light-on-navy without
   touching each selector. (Before, the footer followed the theme-aware chrome
   and went WHITE in light mode, losing strofia.com's navy footer.) */
.foot{--wm-primary:#ffffff;--teal:#5EEAD4;--chrome-bg:#0B1730;--chrome-fg:#e9ecef;--chrome-muted:rgba(233,236,239,.62);--chrome-line:rgba(255,255,255,.12);
  border-bottom:none;border-top:1px solid var(--chrome-line);background:var(--chrome-bg);margin-top:0}
.bar{max-width:1140px;margin:0 auto;padding:14px 28px;display:flex;align-items:center;gap:18px}
/* The NAVBAR spans full width (logo hard-left, menu hard-right) like strofia.com's
   Bootstrap `container-fluid` — the section content below stays in the 1140 .wrap.
   The footer keeps the centered .bar. */
/* The NAVBAR matches strofia.com's (ng-site-shell `.top-navbar`, Bootstrap navbar-expand-lg): 64px tall
   (60 below md, border included), container-fluid padding (24px, 16 below lg), 32px logo, links in the Bootstrap system
   font at 500, CSS-triangle carets, white dropdowns with shadow-sm. No backdrop-filter: it would trap the
   fixed overlays (search, language dialog) opened from inside it. */
/* The footer's .bar keeps the full-width padding. */
.chrome>.bar{max-width:none;padding-inline:clamp(24px,3vw,44px)}
header.chrome{border-bottom-color:color-mix(in srgb,var(--chrome-fg) 8%,transparent)}
header.chrome>.bar{max-width:none;height:63px;box-sizing:border-box;padding:0 24px;gap:4px;
  font-family:var(--font-sans,-apple-system),BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
.brand{text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;padding:5px 0}
header.chrome .brand{margin-right:auto}
.brand__logo{width:32px;height:32px;display:block;flex:none;transition:transform .3s ease}
.brand:hover .brand__logo{transform:scale(1.04)}
/* Wordmark (ng-site-shell app-wordmark: STRO blue + FIA teal) */
.wm{font:700 17.6px/1 var(--font-display);
  letter-spacing:.06em;white-space:nowrap;text-transform:uppercase}
/* Phones show only the logo mark, like strofia.com (wordmark hidden below sm). */
@media (max-width:575px){.wm{display:none}}
.wm__primary{color:var(--wm-primary)}
.wm__accent{color:var(--teal)}
.nav{display:flex;align-items:center}
.nav__panel{display:flex;gap:4px;align-items:center}
.nav-burger{display:none}
/* Drawer-only "Search" row (opens the palette); hidden on desktop where the
   navbar has its own search control. */
.nav-search{display:none}
/* Desktop: the menus, the search control and the user area sit in ONE row in Angular's order
   (menus · search · settings · bell · avatar), although they live in different containers. */
@media (min-width:992px){
  .nav,.nav__panel{display:contents}
  .nav-dd{order:1}
  header.chrome .bar>.controls{order:2;margin-left:0}
  .nav-auth{order:3}
}
/* Icon buttons (search, settings): Bootstrap nav-link with a `fs-5` Bootstrap Icon. */
.nav-icon{display:inline-flex;align-items:center;justify-content:center;padding:8px;border:none;border-radius:6px;
  background:transparent;color:var(--chrome-fg);cursor:pointer;text-decoration:none;line-height:1;
  transition:color .2s ease,background-color .2s ease}
.nav-icon:hover,.nav-icon:focus-visible{color:var(--brand-blue);background:rgba(29,78,216,.06)}
.nav-icon .nav-ico{width:1.25rem;height:1.25rem}
.nav-ico{display:block;width:1em;height:1em;flex:none}
/* User area (site config `auth`): «Login» (auth-client-angular `.eac-login`) or the avatar + popup. */
.nav-auth{display:inline-flex;align-items:center}
.nav-auth__login{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .85rem;text-decoration:none;
  color:var(--chrome-fg);font-family:inherit;font-size:1rem;font-weight:400;line-height:1.5;border:1px solid rgba(255,255,255,.4);border-radius:10px}
.nav-auth__login:hover{background:rgba(127,127,127,.12);color:var(--chrome-fg)}
.nav-auth__login .nav-ico{font-size:1.1em}
.nav-auth__avatar{display:inline-flex;align-items:center;justify-content:center;flex:none;width:2rem;height:2rem;border-radius:50%;
  object-fit:cover;overflow:hidden;color:#fff;font-size:.8rem;font-weight:600;line-height:1}
.nav-auth__avatar--sm{width:1.75rem;height:1.75rem;font-size:.7rem}
.nav-dd__btn.nav-auth__btn{padding:0;border-radius:50%;line-height:0;background:transparent}
.nav-dd__menu.nav-auth__menu{left:auto;right:0;top:calc(100% + .5rem);width:260px;max-width:min(92vw,260px);min-width:0;padding:.35rem;
  border:1px solid var(--line);border-radius:10px;box-shadow:0 .5rem 1.5rem rgba(0,0,0,.18)}
.nav-auth__head{display:flex;align-items:center;gap:.6rem;padding:.5rem .6rem}
.nav-auth__id{min-width:0;flex:1 1 auto}
.nav-auth__fullname{font-weight:600;color:var(--chrome-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-auth__email{font-size:.82rem;color:var(--chrome-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-auth__sep{height:1px;margin:.3rem 0;background:var(--line)}
.nav-dd__item.nav-auth__item{display:flex;align-items:center;gap:.6rem;width:100%;box-sizing:border-box;padding:.5rem .6rem;
  border-radius:6px;font-size:1rem;text-align:left;background:transparent;border:0;cursor:pointer}
.nav-dd__item.nav-auth__item:hover{background:rgba(127,127,127,.1)}
.nav-auth__item .nav-ico{font-size:1.05em;color:var(--brand-blue)}
.nav-dd__item.nav-auth__logout,.nav-auth__logout .nav-ico{color:#dc2626}
/* In Angular the settings hub is reached from the gear, not from the avatar menu. */
@media (min-width:992px){.nav-dd__item.nav-auth__settings{display:none}}
/* Config-driven navbar dropdown menus (Bootstrap dropdown + ng-site-shell overrides) */
.nav-dd{position:relative}
.nav-dd__btn{display:inline-block;cursor:pointer;background:transparent;border:none;color:var(--chrome-fg);
  font-family:inherit;font-size:.95rem;font-weight:500;line-height:1.5;padding:8px;border-radius:6px;white-space:nowrap;
  transition:color .2s ease,background-color .2s ease}
.nav-dd__btn:hover,.nav-dd__btn:focus-visible{color:var(--brand-blue);background:rgba(29,78,216,.06)}
.nav-dd__caret{display:inline-block;margin-left:.255em;vertical-align:.255em;
  border-top:.3em solid;border-right:.3em solid transparent;border-bottom:0;border-left:.3em solid transparent}
.nav-dd__menu{position:absolute;top:calc(100% + 8px);left:0;min-width:14rem;max-width:min(22rem,calc(100vw - 1.5rem));
  box-sizing:border-box;z-index:40;display:none;background:var(--chrome-bg);border:0;border-radius:8px;
  box-shadow:0 .125rem .25rem rgba(0,0,0,.075);padding:.35rem}
.nav-dd.is-open .nav-dd__menu{display:block}
.nav-dd__item{display:block;text-decoration:none;color:var(--chrome-fg);font-family:inherit;font-size:.925rem;font-weight:400;line-height:1.5;
  padding:.55rem .75rem;border-radius:.375rem;white-space:normal;overflow-wrap:anywhere}
.nav-dd__item:hover,.nav-dd__item:focus-visible{background:rgba(0,72,240,.08);color:var(--chrome-fg)}
/* Below lg the dropdowns collapse into a hamburger + full-width drawer (992,
   like strofia.com's navbar-expand-lg). The search control is hidden so the
   hamburger is the rightmost element, like strofia.com's mobile navbar. */
@media (max-width:991px){
  header.chrome>.bar{padding:0 16px}
  .bar>.controls{display:none}
  .nav-search{display:flex;align-items:center;gap:10px;width:100%;
    background:transparent;border:none;border-bottom:1px solid var(--chrome-line);
    color:var(--chrome-fg);font:600 15px/1 var(--font-sans,system-ui),sans-serif;padding:12px 0;cursor:pointer;text-align:left}
  .nav-search:hover{color:var(--accent)}
  .nav-search__icon{font-size:18px;line-height:1}
  .controls{margin-left:10px}
  .nav-burger{display:inline-flex;align-items:center;justify-content:center;width:38px;height:34px;
    background:transparent;border:1px solid var(--chrome-line);border-radius:9px;cursor:pointer;padding:0}
  .nav-burger:hover{border-color:var(--chrome-fg)}
  .nav-burger__bars,.nav-burger__bars::before,.nav-burger__bars::after{content:"";display:block;
    width:18px;height:2px;background:var(--chrome-fg);border-radius:2px}
  .nav-burger__bars{position:relative}
  .nav-burger__bars::before{position:absolute;top:-6px}
  .nav-burger__bars::after{position:absolute;top:6px}
  .nav__panel{display:none;position:absolute;top:100%;left:0;right:0;z-index:45;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--chrome-bg);border-top:1px solid var(--chrome-line);
    padding:8px 22px 18px;box-shadow:0 14px 30px rgba(0,0,0,.32)}
  .nav.is-open .nav__panel{display:flex}
  .nav-dd{position:static}
  .nav-dd__btn{display:flex;width:100%;justify-content:space-between;padding:12px 0;color:var(--chrome-fg);
    border-bottom:1px solid var(--chrome-line);border-radius:0;background:transparent;pointer-events:none;font-weight:600}
  .nav-dd__caret{display:none}
  .nav-dd__menu{display:block;position:static;background:transparent;border:none;box-shadow:none;
    padding:4px 0 12px;min-width:0;max-width:none;width:auto}
  .nav-dd__item{color:var(--chrome-muted);padding:8px 0}
  .nav-dd__item:hover{background:transparent;color:var(--chrome-fg)}
  /* Signed in, the drawer shows the identity and the items inline (Angular's inline auth menu). */
  .nav-auth{flex-direction:column;align-items:stretch}
  .nav-auth__btn,.nav-auth__gear{display:none}
  .nav-dd__menu.nav-auth__menu{position:static;width:auto;max-width:none;border:none;box-shadow:none;padding:4px 0 12px}
  .nav-dd__item.nav-auth__item{padding:8px 0}
  .nav-auth__head{padding:12px 0 4px}
}
@media (max-width:768px){header.chrome>.bar{height:59px}}
.controls{margin-left:18px;display:flex;gap:8px;align-items:center}
/* The navbar as two rows (site config `navLinks`, Strofia's redesign study 2026-10-12): brand · search · reading
   settings · user on top, the site's links underneath (they scroll sideways on a phone; no hamburger). Content
   lines up with the 1200px pages. Everything is scoped to a bar that holds `.nav-links`, over the dropdown rules. */
html:has(.nav-links){scroll-padding-top:128px}
header.chrome>.bar:has(.nav-links){height:auto;flex-wrap:wrap;column-gap:clamp(8px,2vw,24px);row-gap:0;
  padding:10px max(16px,calc((100% - 1200px) / 2 + 22px)) 0}
header.chrome>.bar:has(.nav-links) .brand{margin-right:0;flex:none;min-height:44px}
.bar:has(.nav-links)>.nav,.bar:has(.nav-links) .nav__panel{display:contents}
header.chrome>.bar:has(.nav-links)>.controls{display:flex;order:1;flex:1 1 0;min-width:0;max-width:520px;margin:0 auto 0 0}
.bar:has(.nav-links) .nav-auth{order:3;flex-direction:row;align-items:center}
.bar:has(.nav-links) .nav-auth__btn{display:inline-block;pointer-events:auto;width:auto;border:0;padding:0}
.bar:has(.nav-links) .nav-dd{position:relative}
.bar:has(.nav-links) .nav-dd__menu{display:none;position:absolute}
.bar:has(.nav-links) .nav-dd.is-open .nav-dd__menu{display:block}
.bar:has(.nav-links) .nav-dd__menu.nav-auth__menu{position:absolute;width:260px;max-width:min(92vw,260px);padding:.35rem;
  border:1px solid var(--line);box-shadow:0 .5rem 1.5rem rgba(0,0,0,.18);background:var(--chrome-bg)}
.bar:has(.nav-links) .nav-dd__item.nav-auth__item{padding:.5rem .6rem}
.bar:has(.nav-links) .nav-auth__head{padding:.5rem .6rem}
.bar:has(.nav-links) .nav-auth__login{min-height:44px;box-sizing:border-box;padding:0 16px;border:0;border-radius:999px;
  background:var(--chrome-fg);color:var(--chrome-bg);font-size:14px;font-weight:600}
.bar:has(.nav-links) .nav-auth__login:hover{background:var(--brand-blue);color:#fff}
.bar:has(.nav-links) .nav-auth__login .nav-ico{display:none}
/* The search control as a field (the palette opens on click); its text follows the page language. */
.search-pill{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:0 14px;box-sizing:border-box;
  border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--muted);font-size:15px;line-height:1.2;
  font-family:inherit;text-align:left;cursor:text}
.search-pill:hover,.search-pill:focus-visible{border-color:var(--accent);color:var(--ink-soft)}
.search-pill .nav-ico{width:18px;height:18px}
.search-pill__ph{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html:not([lang="es"]) .search-pill__ph[lang="es"],html[lang="es"] .search-pill__ph[lang="en"]{display:none}
.nav-links{order:4;flex:1 0 calc(100% + 12px);margin:10px 0 0 -12px;position:relative;display:flex;align-items:center;gap:2px;
  overflow-x:auto;white-space:nowrap;scrollbar-width:none;font-size:15px;font-weight:500;
  border-top:1px solid var(--chrome-line);border-image:linear-gradient(var(--chrome-line),var(--chrome-line)) 1 0 0 / 1px 0 0 / 0 100vw}
.nav-links::-webkit-scrollbar{display:none}
.nav-links__a{flex:none;display:inline-flex;align-items:center;min-height:46px;padding:0 12px;box-sizing:border-box;
  color:var(--chrome-fg);text-decoration:none;border-bottom:2px solid transparent}
.nav-links__a:hover{color:var(--brand-blue)}
.nav-links__a[aria-current="page"]{border-bottom-color:var(--brand-blue);color:var(--brand-blue)}
.nav-links__a--accent{color:var(--teal);font-weight:600}
.nav-links__a--accent:hover,.nav-links__a--accent[aria-current="page"]{color:var(--teal);border-bottom-color:var(--teal)}
:root[data-theme="dark"] .nav-links__a--accent{color:var(--teal)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .nav-links__a--accent{color:var(--teal)}}
.nav-links__sep{flex:none;align-self:center;width:1px;height:20px;background:var(--line);margin:0 8px}
.foot .bar{justify-content:space-between;font-family:var(--font-sans,system-ui),sans-serif;font-size:12.5px;color:var(--chrome-muted)}
.muted{color:var(--muted)}

.ctl{font:13px/1 var(--font-sans,system-ui),sans-serif;cursor:pointer;color:var(--chrome-fg);
  background:transparent;border:1px solid var(--chrome-line);border-radius:999px;padding:7px 12px}
.ctl:hover{border-color:var(--chrome-fg);color:var(--chrome-fg)}

/* ---- footer (config-driven, on the navy chrome) ---- */
/* No top margin: the footer hugs the last section (its own tint band supplies
   the breathing room), like strofia.com — a margin here showed the white page
   background as a band between the tinted contact section and the navy footer. */
.foot{margin-top:0}
.ftr__wrap{max-width:1140px;margin:0 auto;padding:0 22px}
.ftr__top{display:flex;flex-wrap:wrap;align-items:flex-start;gap:28px 48px;padding:48px 0 26px}
.ftr__brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;flex:0 0 auto}
.ftr__logo{width:36px;height:36px;display:block}
.ftr__cols{display:flex;flex-wrap:wrap;gap:26px 44px;margin-left:auto}
.ftr__col{display:flex;flex-direction:column;gap:9px;min-width:130px}
.ftr__col-h{font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.11em;
  text-transform:uppercase;color:var(--chrome-muted);margin-bottom:6px}
.ftr__link{color:var(--chrome-fg);text-decoration:none;font:14px/1.6 var(--font-sans,system-ui),sans-serif;opacity:.8}
.ftr__link:hover{opacity:1;color:var(--chrome-fg)}
.ftr__bottom{display:flex;flex-wrap:wrap;align-items:center;gap:14px;justify-content:space-between;
  padding:16px 0 24px;border-top:1px solid var(--chrome-line)}
/* Bottom bar controls: same as the Angular footer (ng-site-shell `.footer-controls`: Bootstrap
   btn-sm outline on the dark footer, ng-i18n's language picker, Bootstrap Icons sun/moon). */
.ftr__copy{font:.78rem/1.5 var(--font-sans,-apple-system),BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:rgba(255,255,255,.6)}
.ftr__controls{display:inline-flex;flex-wrap:wrap;align-items:center;gap:14px;
  font-family:var(--font-sans,-apple-system),BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
.ftr__consent{font-family:inherit;font-size:14px;font-weight:400;line-height:21px;cursor:pointer;padding:4px 8px;border-radius:4px;
  background:transparent;border:1px solid rgba(255,255,255,.25);color:rgba(255,255,255,.82);
  transition:color .15s,background-color .15s,border-color .15s}
.ftr__consent:hover,.ftr__consent:focus-visible{background:rgba(0,120,216,.14);color:#fff;border-color:#0078d8}
.ftr__theme{display:inline-flex}
.ftr__theme-btn{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;width:36px;height:31px;box-sizing:border-box;
  padding:4px 10px;font-size:14px;line-height:21px;background:transparent;color:rgba(255,255,255,.7);
  border:1px solid rgba(255,255,255,.25);transition:color .15s,background-color .15s,border-color .15s}
.ftr__theme-btn:first-child{border-radius:4px 0 0 4px}
.ftr__theme-btn+.ftr__theme-btn{margin-left:-1px;border-radius:0 4px 4px 0}
.ftr__theme-btn:hover{position:relative;background:rgba(0,120,216,.14);color:#fff;border-color:#0078d8}
.ftr__theme-btn[aria-pressed="true"]{position:relative;background:#0078d8;color:#fff;border-color:#0078d8}
.ftr__theme-ico{width:1em;height:1em;display:block}
/* Language picker trigger (ng-i18n `.eti-picker__trigger` with the footer's dark overrides). */
.lp{position:relative;display:inline-block}
.lp__trigger{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .7rem .4rem .6rem;cursor:pointer;
  background:transparent;color:#f8f9fa;border:1px solid rgba(255,255,255,.18);border-radius:6px;
  font-family:inherit;font-size:.875rem;line-height:1.2;transition:background-color .15s,border-color .15s}
.lp__trigger:hover,.lp__trigger:focus-visible{background:rgba(255,255,255,.06);border-color:color-mix(in srgb,rgba(255,255,255,.18) 60%,#f8f9fa)}
.lp__trigger:focus-visible{outline:2px solid #00ccff;outline-offset:2px}
.lp__flag{display:inline-block;width:1.4em;height:1.05em;flex-shrink:0;object-fit:cover;border-radius:2px;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,#f8f9fa 25%,transparent);vertical-align:middle}
.lp__label{font-weight:500}
.lp__caret{width:.85em;height:.85em;margin-left:.15rem;opacity:.7;transition:transform .15s}
.lp__trigger[aria-expanded="true"] .lp__caret{opacity:1;transform:rotate(180deg)}
@media (max-width:767.98px){.ftr__bottom{flex-direction:column;justify-content:center;text-align:center}}
@media (max-width:575.98px){.ftr__controls{justify-content:center}}
/* Language dialog (ng-i18n `.eti-modal`), built on first open and appended to <body>. */
.lp-modal{--lpm-accent:var(--brand-blue);position:fixed;inset:0;z-index:1080;display:flex;align-items:flex-start;justify-content:center;
  padding:4rem 1rem 2rem;background:rgba(0,0,0,.65);opacity:0;pointer-events:none;transition:opacity .18s ease-out;overflow-y:auto;
  font-family:var(--font-sans,-apple-system),BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
.lp-modal--open{opacity:1;pointer-events:auto}
.lp-modal__panel{width:100%;max-width:720px;max-height:calc(100vh - 6rem);display:flex;flex-direction:column;
  background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 24px 48px rgba(0,0,0,.35);overflow:hidden;transform:scale(.96);transition:transform .18s ease-out}
.lp-modal--open .lp-modal__panel{transform:scale(1)}
.lp-modal__header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 1.25rem;
  border-bottom:1px solid var(--line);flex-shrink:0}
.lp-modal__title{margin:0;font-family:inherit;font-size:1.125rem;font-weight:600;line-height:1.3;color:var(--ink)}
.lp-modal__close{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;
  background:transparent;color:var(--ink-soft);border:none;border-radius:6px;cursor:pointer;transition:background-color .12s,color .12s}
.lp-modal__close:hover,.lp-modal__close:focus-visible{background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--ink)}
.lp-modal__close:focus-visible{outline:2px solid var(--lpm-accent);outline-offset:2px}
.lp-modal__icon{width:1rem;height:1rem}
.lp-modal__search{position:relative;padding:.85rem 1.25rem;border-bottom:1px solid var(--line);flex-shrink:0}
.lp-modal__search-icon{position:absolute;left:1.95rem;top:50%;transform:translateY(-50%);width:.95rem;height:.95rem;
  color:var(--ink-soft);pointer-events:none}
.lp-modal__search-input{width:100%;box-sizing:border-box;padding:.55rem .9rem .55rem 2.4rem;
  background:color-mix(in srgb,var(--ink) 4%,var(--panel));color:var(--ink);border:1px solid var(--line);border-radius:8px;
  font-family:inherit;font-size:.95rem;line-height:1.4;transition:border-color .12s,box-shadow .12s}
.lp-modal__search-input::placeholder{color:var(--ink-soft);opacity:.85}
.lp-modal__search-input:focus{outline:none;border-color:var(--lpm-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--lpm-accent) 18%,transparent)}
.lp-modal__body{flex:1 1 auto;overflow-y:auto;padding:1rem 1.25rem 1.4rem}
.lp-modal__region+.lp-modal__region{margin-top:1.5rem}
.lp-modal__region-title{margin:0 0 .6rem;font-family:inherit;font-size:.72rem;font-weight:700;line-height:1.2;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft)}
.lp-modal__grid{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;grid-template-columns:repeat(2,minmax(0,1fr))}
.lp-modal__grid li{margin:0;padding:0}
@media (min-width:576px){.lp-modal__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:768px){.lp-modal__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.lp-modal__tile{display:flex;align-items:center;gap:.6rem;width:100%;box-sizing:border-box;padding:.55rem .65rem;
  background:transparent;color:var(--ink);border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);border-radius:8px;
  text-decoration:none;text-align:left;cursor:pointer;transition:background-color .12s,border-color .12s,transform .08s}
.lp-modal__tile:hover{background:color-mix(in srgb,var(--ink) 4%,transparent);transform:translateY(-1px);color:var(--ink)}
.lp-modal__tile:focus-visible{outline:2px solid var(--lpm-accent);outline-offset:2px}
.lp-modal__tile--active{background:color-mix(in srgb,var(--lpm-accent) 12%,transparent);border-color:var(--lpm-accent)}
.lp-modal__flag{width:32px;height:24px;flex-shrink:0;display:block;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);object-fit:cover}
.lp-modal__text{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.lp-modal__native{font-family:var(--font-sans,system-ui),-apple-system,"Segoe UI",Roboto,sans-serif;font-size:.875rem;font-weight:600;line-height:1.25;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-modal__english{font-size:.75rem;line-height:1.2;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-modal__check{margin-left:auto;width:1.05rem;height:1.05rem;color:var(--lpm-accent);flex-shrink:0}
.lp-modal__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 1rem;text-align:center;color:var(--ink-soft)}
.lp-modal__empty-icon{width:2.5rem;height:2.5rem;margin-bottom:.75rem;opacity:.5}
.lp-modal__empty-text{margin:0;font-size:.95rem;line-height:1.4;max-width:32ch}
@media (max-width:575.98px){.lp-modal{padding:1.5rem .75rem}.lp-modal__panel{max-height:calc(100vh - 3rem)}}

/* Floating scroll button (go to bottom / back to top) */
.scroll-btn{position:fixed;right:22px;bottom:22px;z-index:55;width:46px;height:46px;border-radius:50%;
  border:none;cursor:pointer;background:var(--brand-blue);color:#fff;display:flex;align-items:center;
  justify-content:center;box-shadow:0 8px 22px rgba(0,0,0,.28)}
.scroll-btn:hover{filter:brightness(1.08)}
.scroll-btn__chev{display:block;width:10px;height:10px;border-right:2px solid #fff;border-bottom:2px solid #fff;
  transform:translateY(-2px) rotate(45deg)}
.scroll-btn.is-up .scroll-btn__chev{transform:translateY(2px) rotate(-135deg)}

/* main spans the full viewport; each .sec band fills it edge-to-edge and its
   inner .wrap centers the content — so section backgrounds are full-bleed like
   strofia.com while text stays within a max-width column. */
main{display:block}
/* Sticky footer: the page column fills at least the viewport and <main> grows,
   so on short pages (author with few works, short legal, 404) the footer sits at
   the bottom of the screen instead of floating up under the content. */
.page{display:flex;flex-direction:column;min-height:100vh;min-height:100svh}
.page>main{flex:1 0 auto}
.slot-empty{color:var(--muted);text-align:center;padding:80px 0;font-size:28px;letter-spacing:.3em}
/* poem-of-the-day: a tinted card on the white band, like strofia.com — a 1px
   border and NO shadow, capped narrow (608) with generous padding. */
@media (max-width:600px){.poem-card{padding:24px 22px 26px}}

/* ---- full-page sections (shared PageConfig -> Jaspr catalog) ---- */
/* Content column = Bootstrap's .container, as on strofia.com: 12px gutters and
   540/720/960/1140/1320 from sm/md/lg/xl/xxl. */
.wrap{max-width:none;margin:0 auto;padding:0 12px}
@media (min-width:576px){.wrap{max-width:540px}}
@media (min-width:768px){.wrap{max-width:720px}}
@media (min-width:992px){.wrap{max-width:960px}}
@media (min-width:1200px){.wrap{max-width:1140px}}
@media (min-width:1400px){.wrap{max-width:1320px}}
.article-header>.wrap,.article-section>.wrap{max-width:760px}
.sec{padding:8px 0}
/* Config-driven section backgrounds (config `background`: tint/surface). A full-
   width band in the panel tint, so the contrast between home sections is kept. */
.sec--tint{background:var(--panel);padding-top:44px;padding-bottom:44px}
.sec--surface{background:var(--panel)}
/* Light-blue band (how-it-works), like strofia.com's process-section. */
.sec--blue{background:var(--band-blue);padding-top:44px;padding-bottom:44px}
/* Framed band (poem of the day): a plain white/page band with generous padding;
   the tint lives on the card itself, like strofia.com's white poem-section. */
.sec--framed{background:var(--panel);padding-top:2.5rem;padding-bottom:3rem}
@media (min-width:768px){.sec--framed{padding-top:3.5rem;padding-bottom:4rem}}
/* Strong navy band for the CTA — high contrast, like strofia.com. It rebinds
   --chrome-bg/muted locally to a constant navy (NOT the theme-aware chrome),
   so the band stays navy and its white title stays legible in BOTH themes.
   (Before, sec--dark followed --chrome-bg and went WHITE in light mode, so the
   white title was invisible on a white band.) */
.sec--dark{--wm-primary:#759cf7;--chrome-bg:#0B1730;--chrome-muted:rgba(255,255,255,.72);
  background:var(--chrome-bg);padding-top:8px;padding-bottom:8px}
.sec--dark .sec__title{color:#fff}
.sec--dark .sec__sub{color:var(--chrome-muted)}
.sec--dark .cta__body{color:rgba(255,255,255,.74)}
.sec--dark .cta__note{color:#8a94a1}
.page-top{height:0}
.btn{display:inline-block;margin-top:18px;background:var(--accent);color:var(--on-accent);
  text-decoration:none;font-family:var(--font-sans,system-ui),sans-serif;font-size:14px;font-weight:600;
  padding:11px 20px;border-radius:999px}
.btn:hover{filter:brightness(1.08)}

/* Hero — the illustration is a BACKGROUND (top center) like strofia.com, so the
   copy is bottom-anchored and sits ON the art's transparent lower band instead of
   being pushed below the whole image box. Theme-aware via inline --hero-art-* vars
   (SVG is 1920x740 → aspect ~2.6, so at full width the banner is ~38.5vw tall). */
.hero{text-align:center;
  background-image:var(--hero-art-light);background-repeat:no-repeat;background-position:top center;
  background-size:100% auto;                       /* mobile: full-width banner */
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(120px,29vw,300px) 0 clamp(1rem,4vh,2rem)}
/* The hero is a flex column, so its .wrap (margin:auto) would shrink to its
   content instead of filling — force full width so the stacked buttons and copy
   span the column like strofia.com. Desktop still caps it (max-width:820 below). */
.hero>.wrap{width:100%}
/* Mobile/tablet (below lg): navbar + hero + lede fill one viewport — the hero
   grows to absorb the slack and the "work of the day" starts below the fold,
   like strofia.com. The clamp reserves the lede band's height. */
@media (max-width:991px){
  .hero{min-height:calc(100svh - 60px - clamp(150px,calc(430px - 60vw),210px))}
}
:root[data-theme="dark"] .hero{background-image:var(--hero-art-dark)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hero{background-image:var(--hero-art-dark)}
}
.hero__title{font-size:clamp(1.9rem,4.6vw,2.9rem);line-height:1.05;margin:0 0 1.5rem;font-weight:700;letter-spacing:-.035em;text-wrap:balance}
.hero__accent{color:var(--brand-cyan,#0078d8);font-style:normal}
/* 40px under the title (its 1.5rem margin collapses into this one), like strofia.com's hero. */
.hero__actions{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin:40px 0 2.5rem}
/* Hero buttons like strofia.com's .hero-btn: pill, 12/28 padding, 2px border
   (the primary's border matches its fill; the secondary is a 2px outline). */
.hero__actions .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;margin-top:0;
  font-family:var(--font-display);font-size:.95rem;font-weight:600;letter-spacing:.01em;line-height:1.5;
  padding:12px 28px;border-radius:50px;border:2px solid var(--accent);
  transition:background-color .2s,border-color .2s,color .2s,transform .15s,box-shadow .2s}
.hero__actions .btn:hover{filter:none;transform:translateY(-2px);box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 30%,transparent)}
.hero__actions .btn--ghost{border:2px solid var(--line)}
.hero__actions .btn--ghost:hover{background:color-mix(in srgb,var(--brand-blue) 6%,transparent);border-color:var(--brand-blue);color:var(--brand-blue);box-shadow:none}
.hero__actions .btn__arrow{margin-left:.5rem}
/* Phones: buttons stack full-width; from sm they sit in a row — like strofia.com
   (hero-cta-group flex-column → flex-sm-row). */
@media (max-width:575px){
  .hero>.wrap{padding-left:16px;padding-right:16px}
  .hero__actions{flex-direction:column;align-items:stretch}
  .hero__actions{gap:8px}
  .hero__actions .btn{width:100%;text-align:center;padding:11px 24px;font-size:.9rem}
}
/* Arrow inside the primary hero button (label → ), like strofia.com's bi-arrow-right */
.btn__arrow{margin-left:.5em;display:inline-block;transition:transform .15s ease}
.btn:hover .btn__arrow{transform:translateX(3px)}
.btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent);filter:none}

.lede{padding:clamp(20px,3vh,34px) 0;text-align:center}
.lede__lead{font-size:clamp(1.35rem,1.7vw,1.85rem);color:var(--ink);max-width:44ch;margin:0 auto;line-height:1.4;font-weight:500}
/* Home lede band (config background:"lede"): a soft brand-primary tint that sets
   it apart from the hero and the panel-tinted sections, like strofia.com's lede. */
.sec--lede{background:color-mix(in srgb,var(--brand-blue) 8%,var(--bg));
  padding-top:clamp(20px,3vh,34px);padding-bottom:clamp(20px,3vh,34px)}
.sec--lede>.wrap{max-width:900px;padding:0 1.5rem}
/* Home lede text fills the 900 column (2 lines on wide screens), like strofia.com
   — not the narrower 44ch used for the plain about/authors intros. */
.sec--lede .lede__lead{max-width:none}
/* Desktop: navbar + hero + lede share exactly one viewport — the lede fills the
   height left after the (compact) hero and centers its copy, capped so it stays a
   band on tall screens instead of ballooning. Mirrors strofia.com. */
@media (min-width:992px){
  /* Cap the hero and size the art by HEIGHT (top center); the copy is anchored to
     the bottom, on the art's transparent floor. navbar + hero + lede then fit one
     screen. */
  .hero{height:min(72vh,640px);justify-content:flex-end;
    background-size:auto clamp(380px,40vw,580px);
    padding-top:clamp(1rem,2vh,2rem);padding-bottom:clamp(.5rem,1.5vh,1.25rem)}
  .hero>.wrap{max-width:820px}
  .hero__title{font-size:2.6rem}
  .sec--lede{display:flex;align-items:center;justify-content:center;
    min-height:min(calc(100svh - 60px - min(72vh,640px)),210px)}
}
.eyebrow{font-family:var(--font-sans,system-ui),sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--accent);margin:0 0 8px}

/* Section heading sizes mirror strofia.com: the generic title is ~32px (as its
   "How it works"/CTA use); the "big" sections (cards/contact/poem) bump to 40px
   via their own rules. Subtitle baseline matches the process-subtitle (16.8px). */
.sec__title{font-size:2rem;line-height:1.25;margin:0 0 16px;font-weight:700}
.sec__sub{color:var(--subtext);margin:0 0 26px;font-size:1.05rem;line-height:1.6}

/* "What's inside" (ng-sections-ui cards-section, layout default): Bootstrap row g-4 row-cols-md-3, card p-4 +
   card-body, a 40px icon on a 60px line with the brand gradient, a gradient bar that slides in on hover. */
.cards{padding:3rem 0;text-align:center;background:var(--panel-2)}
@media (min-width:768px){.cards{padding:2rem 0 4rem}}
@media (min-width:992px){.cards{padding:2.5rem 0 5rem}}
.cards>.wrap{padding-top:24px}
.cards .sec__title{font-size:calc(1.375rem + 1.5vw);line-height:1.25;font-weight:600}
@media (min-width:1200px){.cards .sec__title{font-size:2.5rem}}
.cards .sec__sub{font-size:1.25rem;font-weight:300;line-height:1.5;margin-bottom:24px}
.cards__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;margin:24px 0 48px}
@media (min-width:768px){.cards__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:16px;padding:40px;background:var(--bg);text-align:center;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
  display:flex;flex-direction:column;align-items:center;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--brand-blue) 0%,var(--brand-cyan) 50%,var(--teal) 100%);
  transform:scaleX(0);transform-origin:left center;transition:transform .3s ease}
.card:hover::before{transform:scaleX(1)}
/* Bootstrap's fs-1 glyph on a 1.5 line: calc(1.375rem + 1.5vw), 2.5rem from xl. */
.card__icon{display:flex;align-items:center;justify-content:center;height:calc((1.375rem + 1.5vw) * 1.5);line-height:0;margin-bottom:16px}
.card__icon-svg{width:calc(1.375rem + 1.5vw);height:calc(1.375rem + 1.5vw)}
@media (min-width:1200px){.card__icon{height:3.75rem}.card__icon-svg{width:2.5rem;height:2.5rem}}
.card__title{font-size:1.25rem;line-height:1.2;margin:0 0 8px;font-weight:700}
.card__desc{margin:0;color:var(--subtext);font-size:14px;line-height:1.55}
a.card{text-decoration:none;color:var(--ink)}
a.card .card__title{color:var(--accent)}
a.card:hover .card__title{text-decoration:underline;text-underline-offset:3px}
a.card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* CTA band (ng-sections-ui cta-section, layout default): the 135deg navy gradient with its dotted pattern and
   the blue glow, a 2.1rem title, the body at line-height 1.8, an Inter pill button. */
.cta{position:relative;overflow:hidden;padding:3rem 0;text-align:center;
  background:linear-gradient(135deg,#08172b 0%,color-mix(in srgb,#0a1b33 82%,#0048f0 18%) 50%,#08172b 100%)}
.cta::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle,rgba(255,255,255,.04) 1px,transparent 1px);background-size:32px 32px}
.cta::after{content:"";position:absolute;top:-120px;left:50%;transform:translateX(-50%);width:600px;height:300px;pointer-events:none;
  background:radial-gradient(ellipse,rgba(0,72,240,.14) 0%,transparent 70%)}
/* strofia.com's section rhythm: 48/48 on phones, 32/64 from md, 40/80 from lg. */
@media (min-width:768px){.cta{padding:2rem 0 4rem}}
@media (min-width:992px){.cta{padding:2.5rem 0 5rem}}
.cta>.wrap{position:relative;z-index:1}
.cta .sec__title{font-size:2.1rem;line-height:1.25;margin-bottom:16px}
.cta__body{font-size:1rem;line-height:1.8;max-width:580px;margin:0 auto}
.sec--dark .cta__body{color:color-mix(in srgb,#fff 70%,#0a1b33)}
.cta__btn{margin-top:24px;padding:14px 48px;font-family:var(--font-display);font-size:1rem;font-weight:700;letter-spacing:.01em;
  line-height:1.5;border-radius:50px;border:2px solid var(--brand-blue);background:var(--brand-blue);color:#fff;
  display:inline-flex;align-items:center;gap:8px;transition:background-color .2s,border-color .2s,transform .15s,color .2s}
.cta__btn:hover{filter:none;transform:translateY(-2px);background:#0030f0;border-color:#0030f0;color:#fff}
.cta__btn-icon{width:16px;height:16px;flex:none}
.cta__note{margin:16px 0 0;font-size:.75rem;line-height:1.5;display:flex;justify-content:center;align-items:center;gap:5px}
.sec--dark .cta__note{color:color-mix(in srgb,#fff 50%,#0a1b33)}
.cta__note-icon{width:12px;height:12px;flex:none}

.unknown{padding:14px 0}
.unknown__tag{border:1px dashed var(--line);border-radius:10px;padding:14px 18px;color:var(--muted);
  font-family:ui-monospace,monospace;font-size:13px;text-align:center;margin:0}
.author-section .container{max-width:960px;margin:0 auto;padding:56px 22px 0}
.author__dates{color:var(--muted);font-family:var(--font-sans,system-ui),sans-serif;font-size:15px}
.author__bio{margin:20px 0;color:var(--ink-soft)}
.author__poems{margin-top:20px;line-height:2}
.author__poems a{color:var(--accent);text-decoration:none}

/* ---- process-detail (how it works): ng-sections-ui process-section, layout default ---- */
.process{padding:48px 0;text-align:center}
.process .sec__title{font-size:2rem;line-height:1.25;margin-bottom:16px}
.process .sec__sub{max-width:720px;margin:0 auto 48px}
.process__steps{list-style:none;counter-reset:step;padding:0;margin:0 auto;max-width:966px;text-align:left}
.process__step{counter-increment:step;position:relative;display:flow-root;padding:0 0 2rem 76px;min-height:56px}
/* the 56px number circle: the brand gradient, a white numeral, a soft blue shadow */
.process__step::before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:0;
  width:56px;height:56px;border-radius:50%;z-index:1;
  background:linear-gradient(135deg,var(--brand-blue),var(--brand-cyan));color:#fff;font-weight:700;font-size:1rem;
  box-shadow:0 4px 12px color-mix(in srgb,var(--brand-blue) 25%,transparent);
  display:grid;place-items:center;font-family:"JetBrains Mono",ui-monospace,monospace}
/* the connector from one circle to the next */
.process__step:not(:last-child)::after{content:"";position:absolute;left:27px;top:56px;bottom:0;width:2px;
  background:linear-gradient(to bottom,var(--brand-cyan),color-mix(in srgb,var(--brand-cyan) 25%,transparent))}
.process__step-title{margin:.5rem 0;font-size:1.15rem;line-height:1.3;font-weight:600}
.process__step-desc{margin:0;color:var(--subtext);font-size:.95rem;line-height:1.6}
.process__legal{max-width:966px;margin:16px auto 0;padding:1.25rem 1.5rem;text-align:left;display:flex;gap:1rem;align-items:flex-start;
  border:1px solid color-mix(in srgb,var(--brand-cyan) 30%,transparent);border-radius:10px;
  background:color-mix(in srgb,var(--bg) 92%,var(--brand-cyan) 8%)}
.process__legal-icon{width:1.15rem;height:1.15rem;flex:none;color:var(--brand-cyan);margin-top:2px}
.process__legal-text{min-width:0}
.process__legal-title{margin:0 0 8px;font-size:.92rem;line-height:1.55;font-weight:600}
.process__legal-body{margin:0;color:var(--ink);font-size:.92rem;line-height:1.55}

/* ---- timeline (the "about" rail) + people ---- */
.timeline{padding:48px 0;text-align:center}
.timeline__body{display:grid;grid-template-columns:1fr;gap:28px;max-width:960px;margin:8px auto 0;align-items:start}
.timeline__body:has(.person--founder){grid-template-columns:minmax(0,1fr) 260px}
.timeline__items{list-style:none;padding:0;margin:0;display:grid;gap:26px;text-align:left}
.timeline__item{position:relative;padding-left:92px;min-height:48px}
/* The marker is the milestone's own key (a year), not a counter. */
.timeline__key{position:absolute;left:0;top:0;min-width:72px;padding:6px 10px;border-radius:999px;
  background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);
  font-weight:700;font-size:14px;text-align:center}
.timeline__item:not(:last-child)::after{content:"";position:absolute;left:35px;top:38px;bottom:-26px;
  width:2px;background:color-mix(in srgb,var(--accent) 30%,transparent)}
.timeline__title{margin:0 0 6px;font-size:18px;font-weight:600}
.timeline__desc{margin:0;color:var(--ink-soft);font-family:var(--font-sans,system-ui),sans-serif;font-size:15px;line-height:1.6}
.stats{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:32px;padding:0;margin:32px 0 0}
.stat{display:flex;flex-direction:column;gap:2px}
.stat__value{font-size:26px;font-weight:700;color:var(--accent);line-height:1.1}
.stat__label{color:var(--muted);font-family:var(--font-sans,system-ui),sans-serif;font-size:14px}

/* ---- team ---- */
.team{padding:48px 0;text-align:center}
.team__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:8px}
.person{margin:0;padding:24px;border:1px solid var(--line);border-radius:16px;background:var(--bg);
  box-shadow:0 2px 8px rgba(0,0,0,.04);text-align:center}
.person--founder{text-align:center;background:var(--panel)}
.person__photo{width:96px;height:96px;border-radius:50%;object-fit:cover;margin:0 auto 14px;display:block}
.person__body{margin:0}
.person__name{margin:0 0 4px;font-size:18px;font-weight:700}
.person__role{margin:0;color:var(--ink-soft);font-family:var(--font-sans,system-ui),sans-serif;font-size:14px}
.person__links{list-style:none;display:flex;justify-content:center;gap:12px;padding:0;margin:12px 0 0}
.person__link{color:var(--accent);font-family:var(--font-sans,system-ui),sans-serif;font-size:14px;text-decoration:none}
.person__link:hover{text-decoration:underline}
@media (max-width:720px){
  .timeline__body:has(.person--founder){grid-template-columns:1fr}
  .timeline__item{padding-left:0;padding-top:42px}
  .timeline__key{position:static;display:inline-block;margin-bottom:10px}
  .timeline__item:not(:last-child)::after{display:none}
}

/* ---- contact form ---- */
/* Two columns like strofia.com: the intro (title + subtitle) on the left and the
   form as a framed card on the right; stacks to one column below 860px. The band
   colour may differ from strofia.com — the STRUCTURE is what stays consistent
   across screen sizes. (strofia.com also shows an email line + privacy note in the
   left column; those aren't in the ContactSection model yet.) */
/* Contact (ng-sections-ui contact-section, layout default): a 5fr/7fr grid, the intro with the site's address,
   a white form card with a mono head/labels/foot, inputs 0.75rem 1rem, the accent submit (disabled until valid). */
.contact{--contact-accent:var(--teal);padding:5rem 0;
  background-color:color-mix(in oklab,color-mix(in srgb,var(--contact-accent) 8%,var(--bg)) 94%,var(--ink) 6%)}
@media (max-width:767.98px){.contact{padding:3rem 0}}
.contact__grid{display:grid;align-items:start;grid-template-columns:5fr 7fr;gap:4rem}
@media (max-width:991.98px){.contact__grid{grid-template-columns:1fr;gap:2.5rem}}
.contact__intro,.contact__panel{min-width:0}
.contact__mono{font-family:"JetBrains Mono","IBM Plex Mono",ui-monospace,"Courier New",monospace}
.contact .contact__title{font-size:clamp(1.75rem,3.5vw,2.5rem);font-weight:700;line-height:1.15;letter-spacing:-.02em;margin:0 0 1.25rem}
.contact .contact__lede{font-size:1rem;line-height:1.65;color:color-mix(in srgb,var(--ink) 88%,transparent);margin:0 0 2.5rem;max-width:480px}
.contact__meta{margin:0;display:flex;flex-direction:column;gap:1.25rem}
.contact__meta-row{display:grid;grid-template-columns:88px 1fr;gap:1rem;align-items:baseline}
.contact__meta-label{font-size:.7rem;font-weight:700;color:color-mix(in srgb,var(--ink) 88%,transparent);margin:0;letter-spacing:.05em;text-transform:uppercase}
.contact__meta-value{margin:0;color:var(--ink);font-size:.92rem}
.contact__meta-value a{color:var(--ink);text-decoration:none;border-bottom:1px dotted color-mix(in srgb,currentColor 35%,transparent)}
.contact__meta-value a:hover{color:var(--brand-cyan);border-bottom-color:var(--brand-cyan)}
@media (max-width:480px){.contact__meta-row{grid-template-columns:1fr;gap:.1rem}.contact__meta-value{overflow-wrap:anywhere}}
.contact__panel{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:2rem}
@media (max-width:575.98px){.contact__panel{padding:1.5rem}}
.contact__form{display:block;margin:0}
.contact__form-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;
  margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--line)}
.contact__form-tag,.contact__form-note,.contact__form-status{font-size:.7rem;color:color-mix(in srgb,var(--ink) 88%,transparent);letter-spacing:.05em;text-transform:uppercase}
.contact__form-status{display:inline-flex;align-items:center;gap:.5rem}
.contact__form-status-dot{width:8px;height:8px;border-radius:50%;background:color-mix(in srgb,currentColor 35%,transparent)}
.contact__form-status.is-editing{color:var(--brand-cyan)}
.contact__form-status.is-editing .contact__form-status-dot{background:var(--brand-cyan)}
.contact__field{display:block;margin-bottom:1.25rem}
.contact__field-label{display:block;font-size:.7rem;color:color-mix(in srgb,var(--ink) 88%,transparent);letter-spacing:.05em;text-transform:uppercase;margin-bottom:.5rem}
.contact__input{display:block;width:100%;padding:.75rem 1rem;background:var(--bg);color:var(--ink);border:1px solid var(--line);
  border-radius:8px;font-family:inherit;font-size:.95rem;line-height:1.5}
.contact__input::placeholder{color:color-mix(in srgb,var(--ink) 50%,transparent)}
.contact__input:focus{outline:none;border-color:var(--contact-accent)}
.contact__textarea{resize:vertical;min-height:120px}
.contact__form-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;
  margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.contact__note-icon{width:1em;height:1em;vertical-align:-.125em;margin-right:.25rem}
.contact__submit{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.4rem;background:var(--contact-accent);color:#fff;
  border:1px solid transparent;border-radius:8px;font-family:inherit;font-weight:600;font-size:.9rem;line-height:1.5;cursor:pointer;
  transition:transform .15s,box-shadow .2s}
.contact__submit:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 18px color-mix(in srgb,var(--contact-accent) 35%,transparent)}
.contact__submit:disabled{background:color-mix(in oklab,var(--contact-accent) 42%,var(--bg));color:var(--ink);cursor:not-allowed}
.contact__submit-icon{width:1em;height:1em;margin-left:.5rem}
.contact-turnstile{min-height:65px}
.contact__status{margin:4px 0 0;font-family:var(--font-sans,system-ui),sans-serif;font-size:13.5px;line-height:1.5}
.contact__status--ok{color:var(--accent)}
.contact__status--err{color:#c0392b}
:root[data-theme="dark"] .contact__status--err{color:#e88}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .contact__status--err{color:#e88}}

/* ---- article / legal ---- */
.article-header{padding:48px 0 4px}
/* Site-page header (about): centered like the rest of the page's sections;
   legal/article pages keep the default left-aligned reading column. */
.article-header--center{text-align:center}
.article__title{font-size:clamp(30px,5vw,44px);margin:0;font-weight:600;letter-spacing:-.01em;text-wrap:balance}
.article__subtitle{color:var(--ink-soft);margin:8px 0 0;font-family:var(--font-sans,system-ui),sans-serif}
.article-section{padding:14px 0}
.article__section-title{font-size:21px;margin:0 0 8px;font-weight:600}
.article__content{color:var(--ink-soft);line-height:1.6;font-size:16px}
.article__content p{margin:0 0 1em}
.article__content strong{color:var(--ink)}
.article__content a{color:var(--accent)}
/* Markdown inside article content: headings (### ), lists (- / 1.), rules (---) */
.article__content .article__section-title{margin:1.6em 0 .5em}
.article__content h2.article__section-title{font-size:21px}
.article__content h3.article__section-title{font-size:18px}
.article__content h4.article__section-title{font-size:16px}
.article__content .md-list{margin:0 0 1em;padding-left:1.4em}
.article__content .md-list li{margin:.35em 0}
.article__content .md-hr{border:none;border-top:1px solid var(--line);margin:1.9em 0}
/* ── Legal pages (page_layout:"legal", set on <html data-layout>): sans-serif,
   a wider column, and a header with the date + a Print/PDF button + a divider,
   matching the Angular sites' legal pages. */
[data-layout="legal"] .article-header>.wrap,
[data-layout="legal"] .article-section>.wrap{max-width:var(--bodyw)}
[data-layout="legal"] .article__title,
[data-layout="legal"] .article__section-title,
[data-layout="legal"] .article__content{font-family:var(--font-sans,system-ui),-apple-system,"Segoe UI",Roboto,sans-serif}
[data-layout="legal"] .article__content{font-size:16.5px;line-height:1.7}
[data-layout="legal"] .article-header--legal{padding:48px 0 22px}
/* Title on its own row; then date (left) + Print button (right) on one row,
   like the Angular legal headers. */
.article-head__row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:14px}
.article__date{display:flex;align-items:center;gap:7px;color:var(--muted);font:14px/1 var(--font-sans,system-ui),sans-serif;margin:0}
/* strofia.com's article-header print button (legal and author pages): an outline pill, 16px regular. */
.article__print{display:inline-flex;align-items:center;gap:8px;flex:none;cursor:pointer;margin-left:auto;
  background:transparent;color:var(--accent);border:1px solid var(--accent);border-radius:999px;
  padding:.4rem .85rem;font-family:inherit;font-size:1rem;font-weight:400;line-height:1.5;transition:background .15s ease,color .15s ease}
.author__actions{margin:16px 0 0}
.author__actions .article__print{margin-left:0}
.article__print:hover{background:var(--accent);color:var(--on-accent)}
/* ── Document template: header + left index + body + right reading-prefs panel,
   in a full-width grid (rails at the page edges, like the Angular article
   template). The HEADER sits in the body column (`head` == body track) so its
   content is exactly as wide as the body content in EVERY width mode; a
   full-width `.doc__rule` draws the side-to-side divider below it. The index is
   at the far left, the reading controls at the far right. Standard caps the
   readable content at --bodyw (≈ the Angular sites' 856px); Wide (--bodyw:none)
   lets it fill the body column. */
.doc{display:grid;margin:0 auto;padding:0 40px;
  grid-template-columns:230px minmax(0,1fr) 230px;gap:0 40px;
  grid-template-areas:". head ." "rule rule rule" "index body aspect";--bodyw:860px;--fs:16.5px}
/* No index (poems/works/author): same 3-track grid, empty left rail. */
.doc--noindex{grid-template-areas:". head ." "rule rule rule" ". body aspect"}
.doc[data-fs="small"]{--fs:15px}
.doc[data-fs="large"]{--fs:18.5px}
.doc[data-width="wide"]{--bodyw:none} /* wide: content fills the body column */
.doc>.sec.article-header{grid-area:head}
.doc>.sec.article-header>.wrap{max-width:var(--bodyw);margin:0 auto;padding:0}
.doc__rule{grid-area:rule;border-top:1px solid var(--line);margin:0 0 10px}
.doc__index{grid-area:index}
.doc__body{grid-area:body;min-width:0}
.doc__aspect{grid-area:aspect}
.doc__aspect-box{display:contents}
.doc__aspect-toggle{display:none}
/* The grid columns span the full page (index at the far left, controls at the
   far right, like the Angular article template); the readable content is capped
   at --bodyw and centred in the wide body column so it stays legible and lines
   up with the header (also centred at --bodyw). */
.doc__body .wrap{max-width:var(--bodyw);margin-inline:auto;padding:0}
/* The moderators' editors and the comments under a reading page share the text's column (they were full body
   width, so «Edit the chapters» / «History» sat left of the text), and the page keeps air above the footer. */
.doc__body .text-editor,.doc__body .comments{max-width:var(--bodyw);margin-left:auto;margin-right:auto}
.doc{padding-bottom:64px}
.doc__body .article__content{font-size:var(--fs)}
/* Reading surfaces (work/poem/chapter) wrapped in the shell: neutralize the
   section's own column (the shell owns the width now) and let the text-size
   control reach the verse. Verse keeps its designed 19px at the default step
   (--fs 16.5 + 2.5) and scales with Small/Large. */
/* Author directory in the shell: work titles follow the text-size control,
   keeping their designed 18px at the default step. */
/* left index (auto TOC) */
/* margin-bottom caps the sticky rails' bottom at (content end − margin), so they
   stop just short of where the article content ends instead of pinning to the
   footer — like the Angular article template. Viewport-independent. */
.doc__index{position:sticky;top:80px;align-self:start;margin-bottom:56px;font-family:var(--font-sans,system-ui),sans-serif}
.doc-toc__label{font:700 11.5px/1 var(--font-sans,system-ui),sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.doc-toc{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.doc-toc__link{display:block;padding:6px 0 6px 14px;margin-left:-1px;border-left:2px solid transparent;
  color:var(--ink-soft);text-decoration:none;font-size:13.5px;line-height:1.35}
button.doc-toc__link{width:100%;background:none;border-top:0;border-right:0;border-bottom:0;font-family:inherit;text-align:left;cursor:pointer}
.doc-toc__link:hover{color:var(--ink)}
.doc-toc__link.is-active{color:var(--accent);border-left-color:var(--accent);font-weight:600}
.doc-toc__item--h3 .doc-toc__link{padding-left:26px;font-size:13px}
.doc-toc__item--h4 .doc-toc__link{padding-left:36px;font-size:12.5px}
/* right reading-prefs panel */
.doc__aspect{position:sticky;top:80px;align-self:start;margin-bottom:56px;font-family:var(--font-sans,system-ui),sans-serif;display:flex;flex-direction:column;gap:20px}
.aspect__title{font:700 11.5px/1 var(--font-sans,system-ui),sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 0 9px}
.aspect__opts{display:flex;flex-direction:column;gap:6px}
.aspect__opt{display:block;text-align:left;cursor:pointer;background:transparent;border:1px solid var(--line);
  border-radius:9px;padding:8px 12px;color:var(--ink-soft);font:14px/1 var(--font-sans,system-ui),sans-serif;transition:all .12s ease}
.aspect__opt:hover{border-color:var(--chrome-fg);color:var(--ink)}
.aspect__opt[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
/* The panel as icons (redesign study, 2026-10-13): a compact card, one row of square buttons per setting. */
.doc__aspect--icons{gap:10px;padding:12px;border:1px solid var(--line);border-radius:14px;width:max-content;max-width:100%;box-sizing:border-box;justify-self:end}
.doc__aspect--icons .aspect__opts{flex-direction:row;flex-wrap:wrap;gap:4px}
.aspect__icon{display:inline-grid;place-items:center;width:42px;height:42px;padding:0;text-align:center;color:var(--ink)}
.aspect__a{font-family:Georgia,"Times New Roman",serif;font-weight:600;line-height:1}
.doc__aspect--icons .aspect__group+.aspect__group{padding-top:10px;border-top:1px solid var(--line)}
.aspect__icon.is-done{border-color:var(--teal);color:var(--teal)}
/* wide screens: the panel carries Print / Share, so the byline does not repeat them */
@media (min-width:1100px){.doc:has(.doc__aspect [data-share]) .reading__actions{display:none}}
/* Under the two-row header (navLinks, ~112px) the sticky panel and index clear it, and the panel starts level with
   the reading page's first line (its 44px top padding) instead of touching the header. */
@media (min-width:1100px){
  html:has(.nav-links) .doc__aspect,html:has(.nav-links) .doc__index{top:132px}
  .doc:has(.doc__body>.poem-section) .doc__aspect--icons{margin-top:44px}
}
@media (max-width:1099px){.aspect__group--actions{display:none}.doc__aspect--icons{width:auto;gap:10px 18px}.doc__aspect--icons .aspect__group+.aspect__group{padding-top:0;border-top:0}}
/* Work illustration (public-domain plate). Light background so line-art
   engravings stay visible in dark mode; caption carries credit + license. */
.work__figure{margin:6px auto 32px;max-width:min(460px,100%);text-align:center}
.work__img{display:block;width:100%;height:auto;border-radius:8px;cursor:zoom-in;transition:filter .12s ease}
.work__figure:hover .work__img{filter:brightness(.97)}
.work__figcaption{margin-top:9px;font-family:var(--font-sans,system-ui),sans-serif;font-size:13px;line-height:1.45;color:var(--ink-soft)}
/* ── Image lightbox — faithful vanilla port of the astrocodex viewer ─────────
   (@eliertech/ng-utils ImageModalComponent + its light-card skin): centered
   light card, top counter, corner close, side nav, caption+description, a
   bottom-right license badge and a Download/Copy/Share toolbar with a share
   channel row. Themed with strofia tokens so it adapts to light/dark. */
.lbx{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:4vh 12px}
.lbx[hidden]{display:none}
.lbx__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.lbx__dialog{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;
  max-width:min(92vw,720px);min-width:min(94vw,420px);max-height:92vh;overflow:hidden;background:var(--panel);color:var(--ink);
  border:1px solid var(--line);border-radius:14px;box-shadow:0 16px 48px rgba(0,0,0,.4);
  padding:2.25rem 1.25rem .75rem;animation:lbxin .25s ease}
@keyframes lbxin{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
/* The image is the flexible element: it shrinks so the caption + toolbar always
   stay inside the dialog (which is capped at 92vh). max-height caps it when there
   is spare room; min-height:0 lets it shrink below its natural size when there
   is not. caption + toolbar are flex:none so they are never clipped. */
.lbx__figure{margin:0;width:100%;flex:0 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;min-width:0}
.lbx__img{flex:0 1 auto;min-height:0;display:block;width:auto;max-width:100%;height:auto;max-height:74vh;object-fit:contain;border-radius:8px}
.lbx__cap{flex:none;max-width:min(720px,92vw);text-align:center;margin-top:14px;font-family:var(--font-sans,system-ui),sans-serif}
.lbx__caption{margin:0 0 4px;font-weight:600;color:var(--ink)}
.lbx__caption:empty{display:none}
.lbx__desc{margin:0;font-size:.925rem;line-height:1.5;color:var(--muted)}
.lbx__desc:empty{display:none}
.lbx__close{position:absolute;top:10px;right:10px;z-index:5;background:transparent;border:none;color:var(--ink-soft);
  cursor:pointer;padding:4px;border-radius:8px;display:inline-flex;transition:transform .15s ease,color .15s ease}
.lbx__close:hover{color:var(--ink);transform:scale(1.1)}
.lbx__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;background:var(--panel);color:var(--ink);
  border:1px solid var(--line);box-shadow:0 2px 10px rgba(0,0,0,.18);transition:transform .1s ease,background-color .15s ease}
.lbx__nav:hover{transform:translateY(-50%) scale(1.08)}
.lbx__prev{left:12px}
.lbx__next{right:12px}
.lbx__nav[hidden]{display:none}
.lbx__counter{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:4;padding:3px 12px;border-radius:999px;
  font:.8rem/1.5 var(--font-sans,system-ui),sans-serif;font-variant-numeric:tabular-nums;
  background:color-mix(in srgb, var(--ink) 8%, transparent);color:var(--muted)}
.lbx__counter[hidden]{display:none}
.lbx__toolbar{flex:none;width:100%;margin:14px auto 0;padding-top:12px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;gap:10px}
.lbx__channels{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.lbx__channels[hidden]{display:none}
.lbx__chan{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--line);color:var(--ink-soft);cursor:pointer;text-decoration:none}
.lbx__chan:hover{color:var(--accent);border-color:var(--accent)}
/* Bottom bar: info (left) · action buttons (center) · license (right) — a
   3-column grid so the corners never collide with the buttons at any width. */
.lbx__bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;width:100%}
.lbx__actions{grid-column:2;display:flex;align-items:center;justify-content:center;gap:8px}
.lbx__btn{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:8px;cursor:pointer;
  font:600 14px/1 var(--font-sans,system-ui),sans-serif;text-decoration:none;background:transparent;color:var(--ink-soft);
  border:1px solid var(--line);transition:all .15s ease}
.lbx__btn:hover{color:var(--ink);background:color-mix(in srgb, var(--ink) 6%, transparent);transform:translateY(-1px)}
.lbx__btn--primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.lbx__btn--primary:hover{background:var(--ink);color:var(--bg);opacity:.9}
/* License badge (bottom-right): the license only, linked. */
/* astrocodex's licence pill: 4px 11px, 12.8px text, a 1.1rem icon centred on the text, a translucent surface. */
.lbx__badge{grid-column:3;justify-self:end;display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;
  font:12.8px/1.2 var(--font-sans,system-ui),sans-serif;color:color-mix(in srgb,var(--ink) 70%,transparent);white-space:nowrap;
  background:color-mix(in srgb,var(--bg) 85%,transparent);border:1px solid var(--line)}
.lbx__badge>span,.lbx__badge>a{display:inline-flex;align-items:center;gap:6px}
.lbx__badge svg{width:1.1rem;height:1.1rem;flex:none;display:block}
.lbx__badge--compact{padding:4px}
.lbx__badge--compact .lbx__lic-text{display:none}
.lbx__badge[hidden]{display:none}
.lbx__badge a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:5px}
.lbx__badge a:hover{color:var(--ink);text-decoration:underline}
/* Info icon (bottom-left) + hover/focus panel with extended image details. */
.lbx__info{grid-column:1;justify-self:start;position:relative;display:inline-flex}
.lbx__info[hidden]{display:none}
.lbx__info-btn{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--line);color:var(--muted);cursor:pointer;transition:color .12s ease,border-color .12s ease}
.lbx__info-btn:hover{color:var(--ink);border-color:var(--ink-soft)}
.lbx__info-panel{position:absolute;bottom:calc(100% + 8px);left:0;z-index:6;width:min(280px,80vw);padding:12px 14px;
  border-radius:10px;background:var(--panel);border:1px solid var(--line);box-shadow:0 8px 28px rgba(0,0,0,.28);
  text-align:left;font:12.5px/1.5 var(--font-sans,system-ui),sans-serif;color:var(--ink-soft);
  opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .12s ease,transform .12s ease}
.lbx__info:hover .lbx__info-panel,.lbx__info:focus-within .lbx__info-panel{opacity:1;visibility:visible;transform:none}
.lbx__info-title{margin:0 0 8px;font-weight:600;color:var(--ink)}
.lbx__info-row{display:flex;gap:8px;margin:0 0 4px}
.lbx__info-row:last-child{margin-bottom:0}
.lbx__info-k{color:var(--muted);flex:none;min-width:58px}
.lbx__info-v{color:var(--ink);min-width:0;word-break:break-word}
.lbx__info-v a{color:var(--accent);text-decoration:none}
.lbx__info-v a:hover{text-decoration:underline}
@media (max-width:640px){ .lbx__btn span{display:none} .lbx__lic-text{display:none} .lbx__img{max-height:70vh} .lbx__prev{left:4px} .lbx__next{right:4px} }
/* Phones: the document's 40px gutter left 295px at 375px — less than a contact panel holding the 300px Turnstile
   widget (the takedown page scrolled sideways). The .wrap keeps Bootstrap's 12px (strofia.com); the contact panel's
   1.5rem still fits the widget from ~375px, and below 380px it drops to 12px. */
@media (max-width:600px){
  .doc{padding:0 22px 48px}
}
@media (max-width:379.98px){
  .contact__panel{padding:12px}
}
@media (max-width:1099px){
  .doc,.doc--noindex{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "rule" "aspect" "body";max-width:900px;gap:0}
  .doc__index{display:none}
  .doc__aspect-box{display:block;grid-area:aspect;margin:0 0 14px;text-align:right}
  .doc__aspect-toggle{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;
    background:transparent;color:var(--ink-soft);font:14px/1.2 var(--font-sans,system-ui),sans-serif;cursor:pointer}
  .doc__aspect-toggle[aria-expanded="true"]{border-color:var(--accent);color:var(--ink)}
  .doc__aspect-aa{font:600 15px/1 var(--font-serif,Georgia),serif}
  .doc__aspect{display:none;position:static;flex-direction:row;flex-wrap:wrap;gap:12px 22px;margin:10px 0 8px;padding:14px 0;
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:left}
  .doc__aspect-box.is-open .doc__aspect{display:flex}
  .doc__aspect .aspect__group{min-width:0}
  .doc__aspect .aspect__opts{flex-direction:row;flex-wrap:wrap}
}
/* ── Print stylesheet: drop the chrome + controls, print just the content on
   white. Used by the legal Print/PDF button (window.print) and Ctrl+P. */
/* Page margins are the browser's «Margins» setting, as Wikipedia prints (Elier, 2026-10-13): Default = the usual
   margins and the text fills the width between them; None = the text keeps only a thin 8px edge. */
@media print{
  footer.foot,.scroll-btn,.consent,.article__print,.doc__index,.doc__aspect,.doc__aspect-toggle,.novel__pager,
  .comments,.text-editor,.work-translate,.author__actions{display:none !important}
  /* Print is width-mode agnostic: force --bodyw:none so the header and the body
     both print full-width (the reading Width control must not change the PDF). */
  .doc,.doc--noindex{display:block;max-width:none;padding:0;--bodyw:none}
  .doc__body{max-width:none}
  /* The side-to-side divider (was the header's border-bottom) in solid black. */
  .doc__rule{border-top:1px solid #000;margin:0 0 14px}
  /* Keep only the wordmark as the printed document's header (no navbar/menu),
     like the Angular sites' print view. */
  header.chrome{position:static;background:none !important;border:none;box-shadow:none}
  header.chrome .bar,header.chrome>.bar:has(.nav-links){max-width:none;height:auto;margin:0;padding:6px 0 14px}
  /* the thin edge Wikipedia keeps when the margins are None (a browser's default body margin) */
  .page{padding:8px}
  header.chrome .nav,header.chrome .controls,.nav-burger{display:none !important}
  header.chrome .wm{display:inline-flex}
  body{background:#fff;color:#000}
  .page{min-height:0}
  .wrap,[data-layout="legal"] .article-header>.wrap,[data-layout="legal"] .article-section>.wrap{max-width:none;padding:0}
  .article__title,.article__section-title,.article__content,.article__content strong{color:#000}
  .article__content a{color:#000;text-decoration:underline}
  .article-header--legal{border-color:#000}
}
.md-table{border-collapse:collapse;margin:8px 0 16px;font-family:var(--font-sans,system-ui),sans-serif;font-size:14px}
.md-table th,.md-table td{border:1px solid var(--line);padding:7px 12px;text-align:left}
.md-table th{background:var(--panel);font-weight:600;color:var(--ink)}
.md-table td{color:var(--ink-soft)}

/* ---- faq (about) ---- */
.faq{padding:40px 0}
.faq__list{margin:24px 0 0;display:grid;gap:18px}
.faq__item{padding-bottom:18px;border-bottom:1px solid var(--line)}
.faq__item:last-child{border-bottom:none;padding-bottom:0}
.faq__q{font-size:17px;font-weight:600;color:var(--ink);margin:0 0 6px}
.faq__a{margin:0;color:var(--ink-soft);line-height:1.6}
.faq__a p{margin:0 0 .6em}
.faq__a a{color:var(--accent)}
/* Author bio (localized) — makes the author page real, indexable content */
.author__bio{margin:8px 0 0;color:var(--ink-soft);font-family:var(--font-sans,system-ui),sans-serif;font-size:15.5px;line-height:1.55;max-width:62ch}

/* ---- settings hub: as strofia.com's (@eliertech/ng-site-shell settings-content + Bootstrap 5.3 panels) ----
   Title and groups in a 14rem sidebar, the open section on the page background (no box), Bootstrap's buttons,
   cards, list-group, form controls and switch; the admin panels as @eliertech/admin-angular draws them.
   Primary stays #0048f0 with white text in both themes, as Bootstrap's does (2026-10-09). */
.sec.settings{padding:0}
/* strofia.com's settings page has no footer (its config.json: hideFooter) — neither does this one. */
body:has(.settings__layout) .foot{display:none}
.settings{--set-border:rgba(0,0,0,.175);--set-soft:rgba(0,0,0,.1);--set-hair:rgba(0,0,0,.07);--set-hover:rgba(0,72,240,.08)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .settings{--set-border:rgba(255,255,255,.15);
  --set-soft:rgba(255,255,255,.12);--set-hair:rgba(255,255,255,.08);--set-hover:rgba(117,156,247,.14)}}
:root[data-theme="dark"] .settings{--set-border:rgba(255,255,255,.15);--set-soft:rgba(255,255,255,.12);
  --set-hair:rgba(255,255,255,.08);--set-hover:rgba(117,156,247,.14)}
.settings__layout[hidden],.settings__gate[hidden]{display:none}
.settings__gate{display:flex;flex-direction:column;align-items:center;gap:1rem;max-width:29rem;margin:clamp(3rem,8vw,6rem) auto;padding:clamp(1.5rem,4vw,2.5rem);border:1px solid var(--line);border-radius:16px;text-align:center;box-sizing:border-box}
.settings__gate-ico{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--set-soft,var(--panel));color:var(--brand-blue)}
.settings__gate-title{margin:0;font-family:var(--font-serif);font-weight:600;font-size:clamp(1.75rem,4vw,2.25rem);line-height:1.1}
.settings__gate-text{margin:0;font-size:1.0625rem}
.settings__gate-btn{min-height:48px;padding:0 1.75rem;display:inline-flex;align-items:center}
.settings__gate-foot{margin:0;font-size:.875rem;color:var(--muted)}
.settings__layout{display:flex;flex-direction:column;gap:1.5rem;max-width:64rem;margin:0 auto;padding:2rem 1rem}
@media (min-width:768px){.settings__layout{flex-direction:row;align-items:flex-start;gap:2.5rem;padding:2.5rem 1.5rem}}
.settings__sidebar{flex:0 0 14rem;min-width:0}
.settings__brand{margin:0 0 1rem;font-size:1.5rem;font-weight:600;line-height:1.2}
.settings__sub{margin:-.5rem 0 1rem;color:var(--subtext);font-size:.875rem}
.settings__group-title{margin:0 0 .6rem;padding:0 .75rem .45rem;font-family:inherit;font-size:.7rem;font-weight:700;line-height:1.5;
  letter-spacing:.09em;text-transform:uppercase;color:color-mix(in srgb,var(--ink) 50%,transparent);border-bottom:1px solid var(--line)}
.settings__nav--admin{margin-top:1.75rem}
.settings__nav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.25rem}
.settings__nav-link{display:block;padding:.5rem .75rem;border-radius:.5rem;color:inherit;text-decoration:none;transition:background-color .15s ease}
.settings__nav-link:hover{background-color:var(--set-hover)}
.settings__nav-link[aria-current="page"]{background-color:var(--brand-blue);color:#fff}
.settings__content{flex:1 1 auto;min-width:0}
.settings__panels{display:flex;flex-direction:column;gap:3rem}
.settings__panel{scroll-margin-top:90px}
.settings__head{margin-bottom:1rem}
.settings__panel-title{margin:0 0 .5rem;font-size:calc(1.275rem + .3vw);font-weight:500;line-height:1.2}
@media (min-width:1200px){.settings__panel-title{font-size:1.5rem}}
.settings__desc{margin:0 0 1rem;color:var(--subtext)}
.settings__muted{margin:0;color:var(--subtext);font-size:.875em}
.settings__panel p{margin-top:0}

/* buttons — Bootstrap .btn-outline-primary by default, .btn--primary filled, .btn--sm, danger outlined */
.settings .btn{display:inline-block;margin:0;padding:.375rem .75rem;font-family:inherit;font-size:1rem;font-weight:400;line-height:1.5;
  text-align:center;vertical-align:middle;text-decoration:none;cursor:pointer;user-select:none;border:1px solid var(--brand-blue);
  border-radius:.375rem;background:transparent;color:var(--brand-blue);filter:none;
  transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}
.settings .btn:hover{background:var(--brand-blue);color:#fff;filter:none}
.settings .btn:focus-visible{outline:0;box-shadow:0 0 0 .25rem rgba(0,72,240,.25)}
.settings .btn:disabled,.settings .btn[disabled]{opacity:.65;pointer-events:none}
.settings .btn--primary{background:var(--brand-blue);color:#fff}
.settings .btn--primary:hover{background:#003dcc;border-color:#003ac0}
.settings .btn--sm{padding:.25rem .5rem;font-size:.875rem;border-radius:.25rem}
.settings .btn--danger,.settings [data-settings-logout]{border-color:#dc3545;background:transparent;color:#dc3545}
.settings .btn--danger:hover,.settings [data-settings-logout]:hover{background:#dc3545;color:#fff}

/* security / account rows: one Bootstrap .card each (card-body d-flex justify-content-between gap-3) */
.settings__row{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem;border:1px solid var(--set-border);
  border-radius:.375rem;background:var(--bg)}
.settings__row+.settings__row{margin-top:1rem}
.settings__row>div>p{margin:0}
.settings__row-title{margin:0 0 .25rem !important;font-size:1rem;font-weight:500;line-height:1.2}
.settings__row>.btn,.settings__row>span{flex-shrink:0}
.settings__row--danger{border-color:#f1aeb5}
.settings__row--danger .settings__row-title{color:#dc3545}
:root[data-theme="dark"] .settings__row--danger{border-color:#842029}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .settings__row--danger{border-color:#842029}}
.settings__msg{min-height:1.2em;margin:1rem 0 0;font-size:.875em}
.settings__msg--err{color:#dc3545}

/* profile: a Bootstrap list-group of label / value rows, then «Edit at your account» */
.settings__profile{display:block}
.settings__avatar{display:none}
.settings__dl{display:grid;grid-template-columns:auto 1fr;margin:0 0 1rem;border:1px solid var(--line);border-radius:.375rem}
.settings__dl dt,.settings__dl dd{margin:0;padding:.5rem 1rem;border-top:1px solid var(--line)}
.settings__dl dt:first-of-type,.settings__dl dd:first-of-type{border-top:0}
.settings__dl dt{color:var(--subtext)}
.settings__dl dd{text-align:right;overflow-wrap:anywhere}

/* preferences: form labels and btn-sm chips (chosen = primary, the others outline-secondary) */
.settings__group{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:0 0 1rem}
.settings__label{width:100%;margin:0 0 .5rem !important;font-family:inherit;font-size:1rem;font-weight:400;color:var(--ink)}
.settings__group .btn{padding:.25rem .5rem;font-size:.875rem;border-radius:.25rem}
.settings__group .btn[aria-pressed="true"],.settings__group a.btn[aria-current]{background:var(--brand-blue);border-color:var(--brand-blue);color:#fff}
.settings__group .btn[aria-pressed="false"],.settings__group a.btn:not([aria-current]){background:transparent;border-color:#6c757d;color:#6c757d}
.settings__group .btn[aria-pressed="false"]:hover,.settings__group a.btn:not([aria-current]):hover{background:#6c757d;color:#fff}

/* cookies: bordered rows with a Bootstrap form-switch, then Save (btn-primary btn-sm) and a «Saved» badge */
.settings__consent{display:flex;flex-direction:column;gap:1rem;max-width:560px}
.settings__consent-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem;border:1px solid var(--line);border-radius:.375rem}
.settings__consent-title{font-weight:600}
.settings__consent-desc{font-size:.875em;color:var(--subtext)}
.settings__switch{display:inline-flex;flex-shrink:0}
.settings__switch input{appearance:none;-webkit-appearance:none;width:2em;height:1em;margin:0;font-size:1rem;border:1px solid var(--line);border-radius:2em;
  background:var(--bg) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280,0,0,.25%29'/%3e%3c/svg%3e") left center/contain no-repeat;
  transition:background-position .15s ease-in-out;cursor:pointer}
.settings__switch input:checked{background-color:var(--brand-blue);border-color:var(--brand-blue);background-position:right center;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e")}
.settings__switch input:disabled{opacity:.5;cursor:default}
.settings__switch input:focus-visible{outline:0;border-color:#80a4f8;box-shadow:0 0 0 .25rem rgba(0,72,240,.25)}
.settings__consent-actions{display:flex;align-items:center;gap:.5rem}
.settings__saved[hidden]{display:none}
.settings__saved{display:inline-block;padding:.35em .65em;font-size:.75em;font-weight:700;line-height:1;border-radius:.375rem;background:#00a890;color:#000}

/* form controls: Bootstrap .form-control / .form-select */
.settings__input,.settings__select,.settings__textarea{padding:.375rem .75rem;font-family:inherit;font-size:1rem;line-height:1.5;color:var(--ink);
  background-color:var(--bg);border:1px solid var(--line);border-radius:.375rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}
.settings__select{appearance:none;-webkit-appearance:none;padding-right:2.25rem;background-repeat:no-repeat;background-position:right .75rem center;background-size:16px 12px;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")}
.settings__input:focus,.settings__select:focus,.settings__textarea:focus{border-color:#80a4f8;outline:0;box-shadow:0 0 0 .25rem rgba(0,72,240,.25)}
.settings__input{flex:1 1 220px;min-width:0}
.settings__textarea{display:block;width:100%;box-sizing:border-box;margin:.5rem 0;font:14px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace;resize:vertical}
.settings__field{display:flex;flex-direction:column;gap:.5rem;margin:.75rem 0}

/* admin panels (overview, messages, users, comments, corrections) — @eliertech/admin-angular */
.settings__toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:0 0 1.25rem}
[data-admin-panel] .btn,.settings__toolbar .btn{padding:.4rem .8rem;font-size:.875rem;border:1px solid var(--set-border);border-radius:.5rem;
  background:transparent;color:inherit}
[data-admin-panel] .btn:hover,.settings__toolbar .btn:hover{background:var(--set-hover);color:inherit}
.settings__toolbar .btn[aria-pressed="true"]{background:var(--brand-blue);border-color:var(--brand-blue);color:#fff}
[data-admin-panel] .btn--danger,.settings__toolbar .btn--danger{border-color:#d99;color:#b00020}
[data-admin-panel] .btn--danger:hover,.settings__toolbar .btn--danger:hover{background:#fdecec;color:#b00020}
.settings__cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:1rem}
.settings__card{display:flex;flex-direction:column;gap:.35rem;padding:1.25rem;border:1px solid var(--set-soft);border-radius:.75rem;
  background:transparent;color:inherit;text-decoration:none;transition:border-color .15s,box-shadow .15s}
.settings__card:hover{border-color:var(--brand-blue);box-shadow:0 2px 12px rgba(0,72,240,.08)}
.settings__card:active{transform:translateY(1px)}
.settings__card-label{order:-1;font-size:.85rem;font-weight:600;opacity:.75}
.settings__card-num{font-size:2rem;font-weight:700;line-height:1;color:var(--brand-blue)}
.settings__card .settings__muted{font-size:.8rem;opacity:.8}
.settings__strong{font-weight:700}
.settings__list{list-style:none;margin:0;padding:0;border:1px solid var(--set-soft);border-radius:.75rem;overflow:hidden}
.settings__item{border-bottom:1px solid var(--set-hair)}
.settings__item:last-child{border-bottom:0}
.settings__item-head{display:grid;grid-template-columns:.5rem 1fr auto;gap:.75rem;width:100%;padding:.75rem 1rem;background:none;
  border:0;color:inherit;font:inherit;text-align:left;cursor:pointer}
.settings__item-head:hover{background:var(--set-hover)}
.settings__dot{width:.5rem;height:.5rem;margin-top:.45rem;border-radius:50%;background:var(--brand-blue)}
.settings__dot--read{background:transparent}
.settings__item-body{padding:0 1rem 1rem 2.25rem}
.settings__item-head--corr{grid-template-columns:auto 1fr auto;align-items:start}
.settings__item-head--corr .settings__badge{margin:2px 0 0}
.settings__item-head--static{cursor:default}
.settings__item-head--static:hover{background:none}
.settings__diff{margin:10px 0;padding:10px 12px;max-height:22em;overflow:auto;border:1px solid var(--line);border-radius:.375rem;
  background:var(--bg);font:13px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}
.settings__diff del{background:color-mix(in srgb,#c0392b 18%,transparent);text-decoration:line-through}
.settings__diff ins{background:color-mix(in srgb,#1e7e34 20%,transparent);text-decoration:none}
.settings__pre{margin:8px 0;white-space:pre-wrap;overflow-wrap:anywhere}
.settings__badge{display:inline-block;margin-left:.4rem;padding:.12rem .45rem;border-radius:.4rem;font-size:.72rem;font-weight:600;line-height:1.4;
  background:var(--set-soft);color:inherit}
.settings__badge--ok{background:#e6f4ea;color:#1e7e34}
.settings__badge--warn{background:#fff3cd;color:#8a6d3b}
.settings__table-wrap{overflow-x:auto;border:1px solid var(--set-soft);border-radius:.75rem}
.settings__table{width:100%;border-collapse:collapse;font-size:.9rem}
.settings__table th,.settings__table td{padding:.6rem .85rem;border-bottom:1px solid var(--set-hair);text-align:left;vertical-align:middle}
.settings__table tr:last-child td{border-bottom:0}
.settings__table th{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;opacity:.6}
.settings__mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.85rem;opacity:.6}
.settings__comment{padding:.85rem 1rem;border:1px solid var(--set-soft);border-radius:.75rem}
.settings__comment+.settings__comment{margin-top:.75rem}
.settings__comment-meta{margin:0 0 .4rem;font-size:.8rem}
@media (max-width:767.98px){.settings__sidebar{flex:none}.settings__row{flex-direction:column;align-items:flex-start}}

/* ---- navbar search (island) ---- */
.ctl--icon{font-size:15px;line-height:1;padding:7px 11px}
.search-overlay{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.32);
  display:flex;justify-content:center;align-items:flex-start;padding:14vh 16px 16px}
.search-panel{width:100%;max-width:560px;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.28);overflow:hidden}
.search-input{width:100%;box-sizing:border-box;border:none;border-bottom:1px solid var(--line);
  background:transparent;color:var(--ink);font:17px/1.4 var(--font-sans,system-ui),sans-serif;padding:16px 18px}
.search-input:focus{outline:none}
.search-results{list-style:none;margin:0;padding:6px;max-height:56vh;overflow-y:auto}
.search-hit{display:flex;flex-direction:column;gap:1px;text-decoration:none;
  padding:9px 12px;border-radius:9px}
.search-hit:hover,.search-hit--sel{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.search-hit__label{color:var(--ink);font-size:15px}
.search-hit__sub{color:var(--muted);font-family:var(--font-sans,system-ui),sans-serif;font-size:12.5px}
.search-empty{margin:0;padding:16px 18px;color:var(--muted);font-family:var(--font-sans,system-ui),sans-serif;font-size:14px}
.search-all{display:block;padding:11px 18px;border-top:1px solid var(--line);text-decoration:none;
  color:var(--accent);font-family:var(--font-sans,system-ui),sans-serif;font-size:13.5px;font-weight:600}
.search-all:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}

/* ---- search page (/{lang}/search|buscar) ---- */
.search-page{padding:32px 0 64px}
.srch__bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.srch__input{flex:1 1 260px;box-sizing:border-box;font:18px/1.4 var(--font-sans,system-ui),sans-serif;
  color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:12px 15px}
.srch__input:focus{outline:2px solid var(--accent);border-color:var(--accent)}
.srch__scope{display:flex;gap:0;border:1px solid var(--line);border-radius:999px;overflow:hidden;flex:none}
.srch__scope-btn{font:13px/1 var(--font-sans,system-ui),sans-serif;cursor:pointer;color:var(--ink-soft);
  background:transparent;border:none;padding:9px 15px}
.srch__scope-btn.is-active{background:var(--accent);color:var(--on-accent)}
.srch__facets{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.srch__facet{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.srch__facet-label{font:12px/1 var(--font-sans,system-ui),sans-serif;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);margin-right:4px}
.srch__chip{font:13px/1 var(--font-sans,system-ui),sans-serif;cursor:pointer;color:var(--ink-soft);
  background:transparent;border:1px solid var(--line);border-radius:999px;padding:6px 11px}
.srch__chip:hover{border-color:var(--accent)}
.srch__chip.is-active{background:color-mix(in srgb,var(--accent) 16%,transparent);
  border-color:var(--accent);color:var(--ink)}
.srch__chip-n{color:var(--muted);font-size:11.5px}
.srch__meta{font-family:var(--font-sans,system-ui),sans-serif;font-size:13px;color:var(--muted);margin:0 0 10px}
.srch__results{list-style:none;padding:0;margin:0}
.srch__hit{border-bottom:1px solid var(--line)}
.srch__hit-link{display:block;text-decoration:none;padding:12px 0}
.srch__hit-title{display:inline;font-size:19px;color:var(--accent)}
.srch__hit-link:hover .srch__hit-title{text-decoration:underline}
.srch__hit-author{display:block;font-family:var(--font-sans,system-ui),sans-serif;font-size:13px;color:var(--ink-soft);margin-top:1px}
.srch__hit-snippet{display:block;color:var(--muted);font-size:14.5px;line-height:1.5;margin-top:6px}
.srch__hit-snippet mark{background:color-mix(in srgb,var(--accent) 24%,transparent);color:var(--ink);
  padding:0 1px;border-radius:2px}
.srch__empty{list-style:none;color:var(--muted);font-family:var(--font-sans,system-ui),sans-serif;padding:14px 0}
.srch__pager{display:flex;align-items:center;gap:14px;justify-content:center;margin-top:22px}
.srch__page{font:13px/1 var(--font-sans,system-ui),sans-serif;cursor:pointer;color:var(--ink-soft);
  background:transparent;border:1px solid var(--line);border-radius:999px;padding:8px 16px}
.srch__page:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.srch__page:disabled{opacity:.4;cursor:default}
.srch__page-info{font-family:var(--font-sans,system-ui),sans-serif;font-size:13px;color:var(--muted)}

/* ---- cookie/consent banner (island) ----
   Same shape as the Angular sites' (ng-site-shell `.etc-banner`): a floating card at the bottom,
   [Accept] [Essential only] [Preferences]; Preferences opens layer 2 (one row per category,
   Essential always on) with [Save selection]. */
.consent{position:fixed;left:0;right:0;bottom:12px;z-index:1045;margin:0 auto;
  width:calc(100% - 24px);max-width:760px;box-sizing:border-box;padding:16px 18px;
  background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 16px 48px rgba(0,0,0,.18);font-family:var(--font-sans,system-ui),sans-serif}
.consent__title{margin:0 0 6px;font-size:16px;font-weight:700;line-height:1.3;color:var(--ink);font-family:var(--font-sans,system-ui),sans-serif}
.consent__desc{margin:0 0 8px;font-size:14px;line-height:1.5;color:var(--ink-soft)}
.consent__link{color:var(--accent);text-decoration:underline;white-space:nowrap}
.consent__cats{display:flex;flex-direction:column;gap:8px;margin:8px 0 12px;padding-top:8px;border-top:1px solid var(--line)}
.consent__cat{display:flex;align-items:center;justify-content:space-between;gap:16px}
.consent__cat-text{display:flex;flex-direction:column}
.consent__cat-title{font-size:13.5px;font-weight:600;color:var(--ink)}
.consent__cat-desc{font-size:12.5px;color:var(--ink-soft)}
.consent__switch{appearance:none;-webkit-appearance:none;flex:none;width:2em;height:1em;margin:0;border-radius:1em;
  background:var(--accent);position:relative;opacity:.55;cursor:not-allowed}
.consent__switch::after{content:"";position:absolute;top:2px;right:2px;width:calc(1em - 4px);height:calc(1em - 4px);border-radius:50%;background:#fff}
.consent__actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.consent__btn{appearance:none;font:inherit;font-size:14px;line-height:1.5;padding:4px 10px;border-radius:6px;cursor:pointer;
  border:1px solid var(--line);background:transparent;color:var(--ink-soft)}
.consent__btn:hover{border-color:var(--ink-soft);color:var(--ink)}
.consent__btn--primary{background:var(--accent);border-color:var(--accent);color:#fff}
.consent__btn--primary:hover{filter:brightness(1.1);color:#fff;border-color:var(--accent)}
.consent__btn--outline{border-color:var(--accent);color:var(--accent)}
.consent__btn--link{border-color:transparent;color:var(--accent)}
.consent__btn--link:hover{border-color:transparent;color:var(--accent);text-decoration:underline}
.consent__btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:575.98px){.consent{width:calc(100% - 16px);bottom:8px}.consent__actions .consent__btn{flex:1 1 auto}}

/* ---- terms gate (blocking clickwrap after sign-in; appended to <body>) ---- */
html.terms-gate-open{overflow:hidden}
.terms-gate{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:16px;
  background:rgba(0,0,0,.55)}
.terms-gate__card{width:100%;max-width:520px;max-height:calc(100vh - 32px);overflow:auto;padding:24px 26px;border-radius:14px;
  background:var(--bg);color:var(--ink);border:1px solid var(--line);box-shadow:0 18px 48px rgba(0,0,0,.35)}
.terms-gate__title{margin:0 0 10px;font-size:1.3rem}
.terms-gate__body{margin:0 0 16px;color:var(--ink-soft);line-height:1.5}
.terms-gate__error{margin:0 0 12px;color:#c0392b}
.terms-gate__footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:12px 20px}
.terms-gate__footer .btn{margin-top:0}
.terms-gate__link{margin-right:auto;color:var(--accent)}

/* ---- notifications bell (navbar, opt-in auth.notifications) ---- */
.nav-auth{gap:4px}
.nav-bell{position:relative}
.nav-bell__btn{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:.35rem;
  border:none;border-radius:6px;background:transparent;color:var(--chrome-fg);cursor:pointer}
.nav-bell__btn svg{width:1.25rem;height:1.25rem}
.nav-bell__btn:hover,.nav-bell__btn[aria-expanded="true"]{color:var(--brand-blue)}
.nav-bell__badge{position:absolute;top:2px;right:0;min-width:16px;height:16px;padding:0 4px;border-radius:8px;
  background:#c0392b;color:#fff;font:700 10px/16px var(--font-sans,system-ui),sans-serif;text-align:center}
.nav-bell__panel{position:absolute;top:calc(100% + 8px);right:0;z-index:45;width:min(360px,calc(100vw - 24px));
  max-height:min(70vh,520px);overflow:auto;background:var(--panel);color:var(--ink);border:1px solid var(--line);
  border-radius:11px;box-shadow:0 14px 34px rgba(0,0,0,.24);font:14px/1.35 var(--font-sans,system-ui),sans-serif}
.nav-bell__head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line)}
.nav-bell__all,.nav-bell__more{background:none;border:0;color:var(--accent);font:inherit;font-size:13px;cursor:pointer;padding:4px}
.nav-bell__more{display:block;width:100%;padding:10px}
.nav-bell__list{list-style:none;margin:0;padding:4px}
.nav-bell__item{display:flex;align-items:flex-start;gap:4px;border-radius:8px}
.nav-bell__item:hover{background:var(--bg)}
.nav-bell__open{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;text-align:left;background:none;border:0;
  color:inherit;font:inherit;padding:8px 10px;cursor:pointer}
.nav-bell__t{font-weight:600}
.nav-bell__item.is-unread .nav-bell__t::before{content:"";display:inline-block;width:7px;height:7px;margin-right:6px;
  border-radius:50%;background:var(--accent);vertical-align:middle}
.nav-bell__b{color:var(--ink-soft);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.nav-bell__d{color:var(--muted);font-size:12px}
.nav-bell__x{flex:none;background:none;border:0;color:var(--muted);font-size:18px;line-height:1;padding:8px;cursor:pointer}
.nav-bell__x:hover{color:var(--ink)}
.nav-bell__empty{padding:14px;color:var(--muted)}

/* ---- moderators' text editor under a reading page (text_editor.dart, strofia-textos) ---- */
.text-editor[hidden],.text-editor [hidden]{display:none!important}
.text-editor{margin:40px 0 0;font-family:var(--font-sans,system-ui),sans-serif}
.text-editor .btn{margin-top:0;cursor:pointer;font:600 14px/1.2 var(--font-sans,system-ui),sans-serif}
.text-editor__panel{padding:18px 20px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.text-editor__title{margin:0 0 8px;font-size:1.25rem}
.text-editor__intro,.text-editor__help{margin:0 0 12px;color:var(--ink-soft);font-size:14px;line-height:1.5}
.text-editor__header{margin:0 0 14px;font-size:14px}
.text-editor__header summary{cursor:pointer;color:var(--muted)}
.text-editor__header pre{margin:8px 0 0;padding:10px 12px;overflow:auto;border:1px solid var(--line);border-radius:8px;
  background:var(--bg);color:var(--ink-soft);font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap}
.text-editor__label{display:block;margin:12px 0 6px;font-weight:600;font-size:14px}
.text-editor__body,.text-editor__note{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--line);
  border-radius:8px;background:var(--bg);color:var(--ink);resize:vertical}
.text-editor__body{min-height:18em;font:15px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;tab-size:4}
.text-editor__note{font:15px/1.5 var(--font-sans,system-ui),sans-serif}
.text-editor__body:focus,.text-editor__note:focus{outline:2px solid var(--accent);outline-offset:1px}
.text-editor__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.text-editor__status{margin:12px 0 0;color:var(--muted);font-size:14px}
.text-editor__status:empty{display:none}
.text-editor__undo{margin-top:8px}
.text-editor__bar{display:flex;flex-wrap:wrap;gap:10px}
.text-editor__report{padding:18px 20px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.text-editor__where{width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid var(--line);border-radius:8px;
  background:var(--bg);color:var(--ink);font:15px/1.4 var(--font-sans,system-ui),sans-serif}
.text-editor__where:focus{outline:2px solid var(--accent);outline-offset:1px}
.text-editor__field{width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid var(--line);border-radius:8px;
  background:var(--bg);color:var(--ink);font:15px/1.4 var(--font-sans,system-ui),sans-serif;resize:vertical}
.text-editor__field[data-field="slug"]{font:14px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.text-editor__field:focus{outline:2px solid var(--accent);outline-offset:1px}
.text-editor__slug-from-title{margin-left:6px;padding:2px 10px;font-size:13px}
.book-editor__list{margin:12px 0;padding-left:1.6em}
.book-editor__item{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:6px 0;border-bottom:1px solid var(--line)}
.book-editor__item .btn{padding:2px 10px;font-size:13px}
.book-editor__title{flex:1 1 14em}
.book-editor__item--removed .book-editor__title{color:var(--muted);text-decoration:line-through}
.book-editor__add{margin-top:16px}
.book-editor__add summary{cursor:pointer;font-weight:600}
.history{margin-top:14px;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.history__title{margin:0 0 8px;font-size:16px}
.history__list{margin:0;padding:0;list-style:none}
.history__item{padding:10px 0;border-bottom:1px solid var(--line)}
.history__item:last-child{border-bottom:0}
.history__head{margin:0 0 4px}
.history__badge{display:inline-block;padding:1px 8px;border-radius:999px;border:1px solid var(--line);font-size:12px}
.history__badge--warn{border-color:var(--accent);color:var(--accent)}
.history__note{margin:4px 0;white-space:pre-wrap}
.history__later{margin:4px 0 4px 12px;padding-left:8px;border-left:2px solid var(--line);white-space:pre-wrap}
.history__muted{color:var(--muted);font-size:13px}
.history__bar{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.history__bar .btn{padding:2px 10px;font-size:13px}
.history__diff{margin:8px 0 0;padding:10px 12px;overflow:auto;border:1px solid var(--line);border-radius:8px;background:var(--bg);
  font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap}
.history__diff ins{background:color-mix(in srgb,var(--accent) 22%,transparent);text-decoration:none}
.history__diff del{color:var(--muted)}
.history__msg:empty{display:none}
.text-editor__turnstile{margin-top:12px}

/* ---- comments under a reading page ---- */
/* `hidden` must win over the display these blocks set (load-more buttons, flash, badge). */
.comments [hidden],.nav-bell [hidden]{display:none!important}
.comments{margin:48px 0 16px;padding-top:28px;border-top:1px solid var(--line);font-family:var(--font-sans,system-ui),sans-serif}
.comments__title{margin:0 0 16px;font-size:1.35rem}
.comments__status{color:var(--muted)}
.comments__login{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;padding:16px 18px;border:1px solid var(--line);
  border-radius:10px;background:var(--panel)}
.comments__login p{margin:0;flex:1 1 220px}
.comments .btn{margin-top:0;cursor:pointer;font:600 14px/1.2 var(--font-sans,system-ui),sans-serif}
.comments__more{display:block;margin:18px auto 0}
.cmt-form{margin:0 0 20px}
.cmt-form__input{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--line);border-radius:8px;
  background:var(--bg);color:var(--ink);font:15px/1.5 var(--font-sans,system-ui),sans-serif;resize:vertical}
.cmt-form__input:focus{outline:2px solid var(--accent);outline-offset:1px}
.cmt-form__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px;margin-top:8px}
.cmt-form__count{margin-right:auto;color:var(--muted);font-size:12px}
.cmt-form__error{flex-basis:100%;margin:0;color:#c0392b;font-size:14px}
.cmt{padding:14px 0;border-top:1px solid var(--line)}
.comments__list>.cmt:first-child{border-top:0}
.cmt--target{background:color-mix(in srgb,var(--accent) 8%,transparent);border-radius:8px;padding-left:10px;padding-right:10px}
.cmt__head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:14px}
.cmt__avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:none}
.cmt__avatar--initial{display:inline-flex;align-items:center;justify-content:center;font-weight:700;background:var(--accent);color:var(--on-accent)}
.cmt__author{font-weight:600}
.cmt__you,.cmt__time,.cmt__edited{color:var(--muted);font-weight:400}
.cmt__body{margin:6px 0 0 42px;line-height:1.55;overflow-wrap:anywhere}
.cmt__body p{margin:0 0 8px}
.cmt__body a{color:var(--accent)}
.cmt__gone{color:var(--muted);font-style:italic}
.cmt__actions{display:flex;flex-wrap:wrap;gap:4px 14px;margin:4px 0 0 42px}
.cmt__act{background:none;border:0;padding:2px 0;color:var(--muted);font:13px/1.4 var(--font-sans,system-ui),sans-serif;cursor:pointer}
.cmt__act:hover:not(:disabled){color:var(--accent)}
.cmt__act:disabled{cursor:default}
.cmt__vote.is-on{color:var(--accent);font-weight:600}
.cmt__slot{margin-left:42px}
.cmt__slot .cmt-form{margin:10px 0 4px}
.cmt__flash{margin:6px 0 0;color:var(--ink-soft);font-size:14px}
.cmt__replies{margin:8px 0 0 42px;border-left:2px solid var(--line);padding-left:14px}
.cmt--reply{padding:10px 0}
.cmt-report fieldset{margin:10px 0 0;padding:12px 14px;border:1px solid var(--line);border-radius:8px}
.cmt-report legend{padding:0 4px;font-weight:600}
.cmt-report__opt{display:block;margin:4px 0}
.cmt-report textarea{margin-top:8px}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:575px){.cmt__body,.cmt__actions,.cmt__slot{margin-left:0}.cmt__replies{margin-left:8px}}
/* «Help improve this text» above the report / propose / history bar (2026-10-11). */
.text-editor__help-title{margin:0 0 4px;font-size:18px;font-weight:600;color:var(--ink);font-family:inherit}
.text-editor__help-intro{margin:0 0 12px;color:var(--muted);font:14.5px/1.5 var(--font-sans,system-ui),sans-serif}
/* Member works (moderators): the work's facts and its full text in a scrolling, reading-like box. */
.mq__dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;margin:0 0 12px;font-size:14px}
.mq__dl dt{margin:0;color:var(--subtext)}
.mq__dl dd{margin:0;overflow-wrap:anywhere}
/* The quotes queue (strofia «Settings · Quotes», 2026-10-16): the check against the text, the passage around the quote. */
.qq__text{font:18px/1.5 var(--font-serif,Georgia,serif)}
.qq__snip{font-family:var(--font-serif,Georgia,serif);font-size:17px}
.qq__check{margin:8px 0 12px;padding:12px 14px;border-radius:12px;font-size:14px}
.qq__check p{margin:0 0 4px}
.qq__check--ok{background:var(--teal-soft,#E6F4F2);color:var(--teal-ink,#0B4F4A)}
.qq__check--warn{background:color-mix(in srgb,#f0c36d 22%,var(--bg));color:color-mix(in srgb,#6b4200 85%,var(--ink))}
.qq__ctx{margin:6px 0 0;padding:8px 10px;border-radius:8px;background:var(--bg);color:var(--ink);font:15px/1.55 var(--font-serif,Georgia,serif)}
.qq__ctx mark{background:#FDF0C4;color:inherit;padding:0 2px;border-radius:3px}
.qq__row{display:flex;flex-wrap:wrap;gap:0 16px}
.qq__row .settings__field{flex:1 1 220px}
.qq__feat{display:flex;align-items:center;gap:8px;margin:4px 0 8px;font-size:14px}
.mq__title{font-family:var(--font-serif,Georgia,serif);font-size:18px}
.mq__text{max-height:300px;overflow:auto;margin:0 0 12px;padding:16px 18px;border-radius:12px;border:1px solid var(--line);background:var(--panel);
  font-family:var(--font-serif,Georgia,serif);font-size:18px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
/* ── Legal mode of the document shell (page_layout: "policy", design «One reader», 2026-10-29): the same .doc as a
   work or an article — header in the body column, index on the left, reading panel on the right — with the terms and
   policies in a card above «On this page», and the text in the sans face (it still follows the size control). ── */
.doc__index--rail{display:flex;flex-direction:column;gap:22px}
.doc__toc{font-family:var(--font-sans,system-ui),sans-serif}
.policy__nav{display:flex;flex-direction:column;gap:2px;padding:12px;border-radius:14px;
  background:var(--panel);border:1px solid var(--line);font-family:var(--font-sans,system-ui),sans-serif}
.policy__nav-label{margin:0 0 6px;padding:0 10px;font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.policy__nav-link{display:flex;align-items:center;min-height:40px;padding:0 12px;border-radius:10px;border:1px solid transparent;
  color:var(--ink-soft);text-decoration:none;font-size:14.5px;line-height:1.3}
.policy__nav-link:hover{background:var(--bg);color:var(--ink)}
.policy__nav-link[aria-current="page"]{background:var(--bg);border-color:var(--line);color:var(--accent);font-weight:700}
.doc--legal .article__title{font-family:var(--font-serif,Georgia,serif);font-weight:600;font-size:clamp(34px,5vw,46px);line-height:1.08;color:var(--ink)}
.article__updated{margin:10px 0 0;font:15px/1.4 var(--font-sans,system-ui),sans-serif;color:var(--muted)}
.doc--legal .doc__body{font-family:var(--font-sans,system-ui),sans-serif}
.doc--legal .doc__body>*{max-width:var(--bodyw);margin-left:auto;margin-right:auto}
.doc--legal .article__section-title{font-family:var(--font-sans,system-ui),sans-serif;font-weight:700}
.doc--legal .article__content{font-family:var(--font-sans,system-ui),sans-serif;line-height:1.65}
.policy__summary{padding:18px 22px;margin-bottom:8px;border-radius:14px;background:var(--accent-soft);font-family:var(--font-sans,system-ui),sans-serif;font-size:var(--fs)}
.policy__summary-title{margin:0 0 6px;font-size:17px;font-weight:700;color:var(--ink)}
.policy__summary-text p{margin:0}
.policy__summary-text p+p{margin-top:8px}
.policy__note{margin-top:28px;padding-top:20px;border-top:1px solid var(--line);font-size:15px;color:var(--muted)}
.policy__note p{margin:0}
/* Narrow screens fold the index away; a legal page keeps its rail (the terms and policies, then the index) above the
   text, as the old one-column template did. */
@media (max-width:1099px){
  .doc--legal{grid-template-areas:"head" "rule" "index" "aspect" "body"}
  .doc--legal .doc__index--rail{display:flex;position:static;margin:0 0 18px}
}
@media print{.policy__nav,.doc__toc{display:none}.policy__summary{background:none;border:1px solid #000}}
/* ── Article mode of the document shell (page_layout: "article", design «One reader», 2026-10-29): the label above
   the title, a meta line (who · when · minutes), and the text in the serif at a work's three sizes (18 / 21 / 25px). ── */
.article__kicker{margin:0 0 10px;font:700 12.5px/1 var(--font-sans,system-ui),sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-ink,var(--accent))}
.article__meta{margin:12px 0 0;font:16px/1.4 var(--font-sans,system-ui),sans-serif;color:var(--muted)}
.article__byline{font-weight:600;color:var(--ink-soft)}
.doc--article .article__title{font-family:var(--font-serif,Georgia,serif);font-weight:600;font-size:clamp(34px,5vw,50px);line-height:1.08;color:var(--ink)}
.doc--article .article__content{font-family:var(--font-serif,Georgia,"Times New Roman",serif);font-size:21px;line-height:1.7;color:var(--ink)}
.doc--article[data-fs="small"] .article__content{font-size:18px}
.doc--article[data-fs="large"] .article__content{font-size:25px}
.doc--article .article__section-title{font-family:var(--font-serif,Georgia,serif);font-weight:600}
.doc--article .article-footer{margin-top:36px;padding-top:20px;border-top:1px solid var(--line);font-family:var(--font-sans,system-ui),sans-serif;font-size:14px}
@media print{.article__kicker{color:#000}.doc--article .article__content{font-size:12pt}}
/* Settings · Member works: withdrawing a published work with its rule, and the author's review (design 29-10-2026). */
.mw-wd,.mw-appeal{display:flex;flex-direction:column;gap:12px;margin-top:12px;padding:14px 16px;border:1px solid var(--line);border-radius:12px}
.mw-appeal{background:color-mix(in srgb,var(--accent) 6%,var(--bg))}
.mw-appeal p{margin:0}
.mw-wd__set{margin:0;padding:0;border:0;display:flex;flex-direction:column;gap:6px}
.mw-wd__opt{display:flex;gap:8px;align-items:flex-start;font-size:15px}
.mw-wd__preview{padding:12px 14px;border-radius:10px;background:var(--panel)}
.mw-wd__preview p{margin:0 0 6px}
.mw-wd__mail{margin:0;white-space:pre-wrap;font:14px/1.55 var(--font-sans,system-ui),sans-serif;color:var(--ink-soft)}

/* ===== karaoke_content/styles/karaoke.css ===== */
/* karaoke_content — FreeKaraoke's own section styles. Concatenated after site_core's engine.css
   into the site's single stylesheet by scripts/sync-lib-assets.cjs.

   Ported from the Angular site's section sheets (hero-elier, search-box, home-trending,
   home-picks, catalog-facets, song-player). Everything is under `fk-`; the page colours come from
   engine.css's tokens (--bg, --ink, --muted, --line, --accent, --panel), so light and dark
   follow the engine's theme switch. The illustrated tiles, the hero, the season band and the
   playlists call keep their own dark grounds in BOTH themes, as on www: the artwork is drawn
   for a dark ground and the white copy over it carries its own contrast. */

/* ---- theme-dependent accents (deep in light, bright in dark) ---------------------------- */
:root{
  --fk-band-bg:var(--bg);
  --fk-c1:#b3125a; --fk-c2:#0b6fa4; --fk-c3:#9a5b00; --fk-c4:#6a3fd4; --fk-c5:#1f7a46;
  --fk-d1:#c2185b; --fk-d2:#0b6fa4; --fk-d3:#b26b00; --fk-d4:#6a3fd4; --fk-d5:#1f8a4c;
  --fk-e1:#9a5b00; --fk-e2:#6a3fd4; --fk-e3:#b3125a; --fk-e4:#0b6fa4; --fk-e5:#1f7a46; --fk-e6:#a8430f; --fk-e7:#0f766e;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --fk-c1:#ff8fab; --fk-c2:#38bdf8; --fk-c3:#ffd166; --fk-c4:#c9a6ff; --fk-c5:#7be495;
    --fk-d1:#ff5c8a; --fk-d2:#38bdf8; --fk-d3:#ffb627; --fk-d4:#8a63ff; --fk-d5:#2ecc71;
    --fk-e1:#ffb627; --fk-e2:#c9a6ff; --fk-e3:#ff5c8a; --fk-e4:#38bdf8; --fk-e5:#7be495; --fk-e6:#ff9a62; --fk-e7:#5eead4;
  }
}
:root[data-theme="dark"]{
  --fk-c1:#ff8fab; --fk-c2:#38bdf8; --fk-c3:#ffd166; --fk-c4:#c9a6ff; --fk-c5:#7be495;
  --fk-d1:#ff5c8a; --fk-d2:#38bdf8; --fk-d3:#ffb627; --fk-d4:#8a63ff; --fk-d5:#2ecc71;
  --fk-e1:#ffb627; --fk-e2:#c9a6ff; --fk-e3:#ff5c8a; --fk-e4:#38bdf8; --fk-e5:#7be495; --fk-e6:#ff9a62; --fk-e7:#5eead4;
}

/* The config's section backgrounds (www's surface-quiet / surface-tint), on the engine's
   page and panel colours. --fk-band-bg is the band's own surface (the timeline pins' ring). */
.sec--surface-quiet{--fk-band-bg:var(--bg);background:var(--bg)}
.sec--surface-tint{--fk-band-bg:var(--panel);background:var(--panel)}

/* Any fk list toggled with [hidden] must actually hide, whatever its display. */
.fk-week [hidden],.fk-shelf [hidden],.fk-facets [hidden],.fk-picks [hidden],.fk-picks[hidden]{display:none!important}

/* ---- shared section header --------------------------------------------------------------- */
.fk-sec__header{text-align:center;margin-bottom:2rem}
.fk-sec__title{margin:0 0 .35rem;color:var(--ink);font-size:calc(1.325rem + .9vw);font-weight:500;line-height:1.2}
@media (min-width:1200px){.fk-sec__title{font-size:2rem}}
.fk-sec__subtitle{margin:0;color:var(--muted)}

/* =========================================================================================
   HERO (hero-elier + the hero search box)
   ========================================================================================= */
.sec.fk-hero{padding:0;--fk-hero-h:720px;--fk-hero-h-m:70vh}
.fk-hero__panel{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;height:var(--fk-hero-h);padding:0 1rem;box-sizing:border-box;
  background-image:var(--fk-hero-img,none);background-repeat:no-repeat;background-size:cover;
  /* The navy the illustration is drawn on, so a crop or a slow load shows no seam. */
  background-color:#122347}
:root[data-theme="dark"] .fk-hero__panel{background-image:var(--fk-hero-img-dark,var(--fk-hero-img,none))}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fk-hero__panel{background-image:var(--fk-hero-img-dark,var(--fk-hero-img,none))}}
.fk-hero__panel--bottom{justify-content:flex-end;padding-bottom:4.5rem}
.fk-hero__panel--top{justify-content:flex-start;padding-top:3rem}
.fk-hero__veil{position:absolute;inset:0;background:#000;pointer-events:none}
.fk-hero__inner{position:relative;z-index:1;max-width:46rem}
.fk-hero__inner--scrim{padding:1.5rem 1.75rem 1.75rem;border-radius:14px;background:rgba(18,35,71,.82);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 10px 40px rgba(0,0,0,.25)}
.fk-hero__title{margin:0;color:#fff;font-weight:300;font-size:clamp(1.5rem,1.1rem + 1.6vw,2.25rem);
  line-height:1.25;text-shadow:0 1px 12px rgba(0,0,0,.35)}
.fk-hero__accent{color:#7fd1e8}
.fk-hero__subtitle{margin:.5rem 0 0;color:rgba(255,255,255,.92);font-weight:300;
  font-size:clamp(1rem,.95rem + .4vw,1.25rem);text-shadow:0 1px 10px rgba(0,0,0,.35)}
.fk-hero__inner--search{width:100%;max-width:46rem}
.fk-hero__inner--search .fk-hero__title{font-weight:800;font-size:clamp(2rem,1.4rem + 2.4vw,3.4rem);
  line-height:1.05;letter-spacing:-.01em}
.fk-hero__btn{display:inline-block;margin-top:1.5rem;padding:.5rem 1.25rem;font-size:1.125rem;text-decoration:none;
  color:#122347;background:#fff;border:1px solid #fff;border-radius:8px;font-weight:500;
  transition:background-color .15s ease-in-out,color .15s ease-in-out}
.fk-hero__btn:hover,.fk-hero__btn:focus-visible{color:#fff;background:#1b3b7a}
.fk-hero__btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.fk-hero__chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin:1rem 0 0;padding:0;list-style:none}
.fk-hero__chip{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:0 1rem;box-sizing:border-box;
  border-radius:999px;background:rgba(27,42,85,.92);border:1px solid #2c3d72;color:#f4f8ff;
  font-weight:700;font-size:.95rem;text-decoration:none}
.fk-hero__chip:hover,.fk-hero__chip:focus-visible{background:#243668;color:#fff}
.fk-hero__chip-dot{width:9px;height:9px;border-radius:50%;background:#ffd166;flex:none}

/* The search box: a light pill on the navy band, in both themes. */
.fk-search{display:flex;align-items:center;max-width:40rem;border-radius:999px}
.fk-search--hero{gap:.5rem;margin:1.25rem auto 0;padding:.4rem;background:#f4f8ff;box-shadow:0 14px 36px rgba(0,0,0,.35)}
.fk-search--hero:focus-within{outline:3px solid #ffd166;outline-offset:2px}
.fk-search__icon{flex-shrink:0;margin-left:.75rem;color:#5a6488}
.fk-search__input{flex:1 1 auto;min-width:0;border:0;background:transparent;outline:none;
  color:#0e1630;font-family:inherit;font-weight:600;font-size:1.1rem;line-height:1.4;padding:0 .25rem}
.fk-search__input::placeholder{color:#5a6488;opacity:1}
.fk-search__input::-webkit-search-cancel-button{-webkit-appearance:none}
/* #c2185b, not the brand pink: white on #FF5C8A is 3.0:1; this keeps the hue at 5.9:1. */
.fk-search__btn{flex:0 0 auto;min-height:48px;padding:0 1.5rem;border:0;border-radius:999px;background:#c2185b;
  color:#fff;font-family:inherit;font-weight:800;font-size:1.05rem;line-height:1;cursor:pointer}
.fk-search__btn:hover{background:#a3134b}
.fk-search__btn:focus-visible{outline:2px solid #0e1630;outline-offset:2px}
.fk-search__btn-icon{display:none;vertical-align:middle}
/* The microphone /voice.js adds where the browser can listen (production's .voice-search): record-red and a slow
   pulse while it listens. */
.fk-voice{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;
  border:0;border-radius:50%;background:transparent;color:#5a6488;cursor:pointer;transition:background-color .15s,color .15s}
.fk-voice[hidden]{display:none}
.fk-voice:hover{background:rgba(90,100,136,.12)}
.fk-voice:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.fk-voice--listening{color:#fff;background:#d62839;animation:fk-voice-pulse 1.4s ease-out infinite}
.fk-voice--listening:hover{background:#b81f2f}
@keyframes fk-voice-pulse{0%{box-shadow:0 0 0 0 rgba(214,40,57,.55)}100%{box-shadow:0 0 0 12px rgba(214,40,57,0)}}
@media (prefers-reduced-motion:reduce){.fk-voice--listening{animation:none}}

@media (max-width:768px){
  .fk-hero__panel{height:var(--fk-hero-h-m)}
  /* A wide illustration in a portrait panel: show it WHOLE (the matte is its own navy). */
  .fk-hero__panel--bottom,.fk-hero__panel--top{background-size:contain}
  .fk-hero__panel--bottom{padding-bottom:2.5rem}
  .fk-hero__panel--top{padding-top:1.5rem}
  .fk-hero__inner--scrim{padding:1.15rem 1.25rem 1.35rem}
  /* Search hero on a phone: content height, the copy starting right under the
     letterboxed art (1920×740 → 740/1920 of the width) — no empty navy band. */
  .fk-hero__panel--bottom:has(.fk-hero__inner--search){height:auto;justify-content:flex-start;
    padding-top:calc(100vw * 740 / 1920 + .75rem);padding-bottom:2rem}
  .fk-search--hero{margin-top:1rem}
  .fk-search__icon{display:none}
  .fk-search--hero .fk-search__input{padding-left:.85rem}
  .fk-search__btn{width:48px;padding:0;display:inline-flex;align-items:center;justify-content:center}
  .fk-search__btn-text{display:none}
  .fk-search__btn-icon{display:block}
  /* One scrollable row of chips: wrapped chips would push the box off the first screen. */
  .fk-hero__chips{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;margin-left:-1rem;margin-right:-1rem;
    padding:0 1rem .25rem;scrollbar-width:none}
  .fk-hero__chip{white-space:nowrap}
}

/* =========================================================================================
   TRENDING — the band (.fk-week: in the lede's place, or any non-cards layout) and the big
   shelf (.fk-shelf). Logical properties only, so an RTL page needs no extra rule.
   ========================================================================================= */
.sec.fk-week{box-sizing:border-box;display:flex;align-items:center;padding-block:2.5rem}
/* In the lede's place under the hero: the lede band's tint and its exact height. */
.sec.fk-week--compact{--lede-h:6.5rem;height:var(--lede-h);overflow:hidden;padding-block:.6rem;
  background:color-mix(in srgb,var(--accent) 8%,var(--bg))}
.sec.fk-week--compact.fk-week--cards{--lede-h:12rem}
.sec.fk-week--compact.fk-week--ranking{--lede-h:7.5rem}
@media (max-width:767.98px){
  .sec.fk-week--compact{--lede-h:8.5rem}
  .sec.fk-week--compact.fk-week--cards{--lede-h:13.5rem}
  .sec.fk-week--compact.fk-week--ranking{--lede-h:10.25rem}
}
/* Desktop: navbar + hero + band share one screen, as the lede does. */
@media (min-width:992px){
  .sec.fk-week--compact{height:auto;min-height:max(var(--lede-h),min(100svh - 60px - min(72vh,640px),210px))}
}
.fk-week__inner{width:100%;display:flex;align-items:center;gap:1.25rem;box-sizing:border-box}
.fk-week__header{flex:0 0 clamp(10rem,16vw,14rem);min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:.4rem}
.fk-week__title{margin:0;color:var(--ink);font-size:clamp(1.05rem,1.25vw,1.3rem);font-weight:800;line-height:1.2;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-width:0}
.fk-week__tools{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem .75rem}
.fk-week__voice{margin:0}
.fk-week__voice select{min-height:2rem;padding:.15rem 2rem .15rem .75rem;border:1px solid var(--line);border-radius:999px;
  background-color:var(--bg);color:var(--ink);font-family:inherit;font-weight:600;font-size:.875rem;line-height:1.5;cursor:pointer}
.fk-week__all{font-weight:700;font-size:.95rem;white-space:nowrap;min-height:2rem;display:inline-flex;align-items:center;
  gap:.25rem;color:var(--accent);text-decoration:none}
.fk-week__all:hover{text-decoration:underline}
.fk-week__arrow{display:inline-block}
[dir="rtl"] .fk-week__arrow{transform:scaleX(-1)}
.fk-week__row{flex:1 1 auto;min-width:0;list-style:none;margin:0;padding:0 0 .35rem;display:grid;grid-auto-flow:column;
  grid-auto-columns:15.5rem;gap:.75rem;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;
  overscroll-behavior-x:contain;scrollbar-width:thin}
.fk-week__item{scroll-snap-align:start;min-width:0}
.fk-week__song{display:flex;align-items:center;gap:.6rem;min-height:3.5rem;color:var(--ink);text-decoration:none;border-radius:10px}
.fk-week__song:hover,.fk-week__song:focus-visible{color:var(--ink)}
.fk-week__song:hover .fk-week__song-title,.fk-week__song:focus-visible .fk-week__song-title{text-decoration:underline}
.fk-week__song:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fk-week__thumb{position:relative;flex:0 0 6.25rem;aspect-ratio:16/9;overflow:hidden;border-radius:8px;background:#1c2a55}
.fk-week__thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fk-week__rank{position:absolute;inset-inline-start:.25rem;inset-block-start:.25rem;min-width:1.35rem;padding:0 .3rem;
  box-sizing:border-box;border-radius:6px;background:rgba(11,18,41,.88);color:#fff;font-weight:800;font-size:.8rem;
  line-height:1.45;text-align:center}
.fk-week__text{display:flex;flex-direction:column;min-width:0}
.fk-week__song-title{font-weight:800;font-size:.92rem;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.fk-week__artist{font-size:.8rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* cards (default): the cover on top, title and artist under it. */
.fk-week--cards .fk-week__row{grid-auto-columns:11rem;gap:1rem;align-items:start}
.fk-week--cards .fk-week__song{flex-direction:column;align-items:stretch;gap:.4rem;min-height:0}
.fk-week--cards .fk-week__thumb{flex:none;width:100%;border-radius:10px}
.fk-week--cards .fk-week__thumb img{transition:transform .2s ease}
.fk-week--cards .fk-week__song:hover .fk-week__thumb img,.fk-week--cards .fk-week__song:focus-visible .fk-week__thumb img{transform:scale(1.04)}
.fk-week--cards .fk-week__song-title{font-size:.95rem}
/* ranking: numbered, two rows filled column by column. */
.fk-week--ranking .fk-week__row{grid-template-rows:repeat(2,auto);grid-auto-columns:calc((100% - 2 * 1.25rem) / 3);gap:.6rem 1.25rem}
.fk-week--ranking .fk-week__song{min-height:0;gap:.6rem}
.fk-week__num{flex:0 0 1.6rem;text-align:center;font-weight:800;font-size:1.25rem;line-height:1;font-variant-numeric:tabular-nums;color:var(--muted)}
.fk-week--ranking .fk-week__thumb{flex:0 0 4.5rem;border-radius:6px}
.fk-week--ranking .fk-week__song-title{-webkit-line-clamp:1}
@media (max-width:991.98px){.fk-week--ranking .fk-week__row{grid-auto-columns:calc((100% - 1.25rem) / 2)}}
@media (max-width:767.98px){
  .fk-week__inner{flex-direction:column;align-items:stretch;gap:.45rem}
  .fk-week__header{flex:0 0 auto;flex-direction:row;align-items:center;gap:.75rem}
  .fk-week__title{-webkit-line-clamp:1;flex:1 1 auto}
  .fk-week__tools{flex:0 0 auto;flex-wrap:nowrap}
}
@media (max-width:575.98px){
  .fk-week__row{grid-auto-columns:13.5rem;gap:.6rem;margin-inline:-12px;padding-inline:12px;scroll-padding-inline:12px}
  .fk-week--cards .fk-week__row{grid-auto-columns:9.5rem;gap:.7rem}
  .fk-week--ranking .fk-week__row{grid-auto-columns:85%;gap:.6rem .9rem}
}

/* The big shelf. */
.sec.fk-shelf{padding-block:3rem}
.fk-shelf__row{list-style:none;margin:0;padding:0 0 .5rem;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(13.5rem,1fr);
  gap:1.1rem;overflow-x:auto;scroll-snap-type:x proximity;overscroll-behavior-x:contain;scrollbar-width:thin}
.fk-shelf__item{scroll-snap-align:start}
.fk-shelf__song{display:flex;flex-direction:column;gap:.15rem;color:var(--ink);text-decoration:none}
.fk-shelf__song:hover,.fk-shelf__song:focus-visible{color:var(--ink)}
.fk-shelf__song:hover .fk-shelf__title,.fk-shelf__song:focus-visible .fk-shelf__title{text-decoration:underline}
.fk-shelf__song:hover .fk-shelf__thumb img,.fk-shelf__song:focus-visible .fk-shelf__thumb img{transform:scale(1.04)}
.fk-shelf__song:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:14px}
.fk-shelf__thumb{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;margin-bottom:.5rem;
  overflow:hidden;border-radius:14px;background:#1c2a55}
.fk-shelf__thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .2s ease}
.fk-shelf__rank{position:absolute;inset-inline-start:.5rem;inset-block-start:.5rem;z-index:1;min-width:2rem;padding:.1rem .45rem;
  box-sizing:border-box;border-radius:8px;background:rgba(11,18,41,.88);color:#fff;font-weight:800;font-size:1.15rem;line-height:1.5;text-align:center}
.fk-shelf__play{position:relative;z-index:1;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.fk-shelf__title{font-weight:800;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fk-shelf__artist{font-size:.9rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fk-shelf__voices{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin:0 0 1.25rem}
.fk-shelf__voice{min-height:44px;padding:0 1rem;border-radius:999px;border:1px solid var(--line);background:transparent;
  color:var(--ink);font-family:inherit;font-weight:600;font-size:.95rem;line-height:1;cursor:pointer}
.fk-shelf__voice:hover,.fk-shelf__voice:focus-visible{border-color:var(--ink)}
.fk-shelf__voice.is-active{background:var(--ink);border-color:var(--ink);color:var(--bg)}
@media (max-width:575.98px){
  .fk-shelf__row{grid-auto-columns:12.5rem;gap:.75rem;margin-inline:-12px;padding-inline:12px;scroll-padding-inline:12px}
}

/* =========================================================================================
   PICKS — bento, mood/faith cards, season band, screens, playlists call
   ========================================================================================= */
.sec.fk-picks{padding-block:3rem}
.sec.fk-picks--season{padding-block:1.5rem}
.fk-picks ul{list-style:none;margin:0;padding:0}
/* Artwork as a variable: --pick in both themes, --pick-light (when given) in the light one. */
.fk-art{background-image:var(--pick,none)}
:root:not([data-theme="dark"]) .fk-art{background-image:var(--pick-light,var(--pick,none))}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fk-art{background-image:var(--pick,none)}}

.fk-picks__bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:13rem;gap:1rem}
.fk-picks__bento>li{display:flex}
.fk-picks__bento .fk-picks__cell--big{grid-column:span 2;grid-row:span 2}
.fk-picks__bento .fk-picks__cell--wide{grid-column:span 2}
.fk-picks__tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;width:100%;overflow:hidden;
  border-radius:20px;background-color:#18264d;background-size:cover;background-position:center 30%;background-repeat:no-repeat;
  color:#fff;text-decoration:none;transition:transform .25s cubic-bezier(.2,.9,.25,1.1),box-shadow .25s ease}
.fk-picks__tile:hover,.fk-picks__tile:focus-visible{color:#fff;transform:translateY(-4px);box-shadow:0 18px 36px -14px rgba(14,22,48,.55)}
.fk-picks__tile:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.fk-picks__scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(18,35,71,0) 30%,rgba(18,35,71,.35) 60%,rgba(18,35,71,.72) 100%)}
.fk-picks__cap{position:relative;z-index:1;display:flex;flex-direction:column;gap:.15rem;padding:0 1.25rem 1.1rem}
.fk-picks__cap .fk-picks__label,.fk-picks__cap .fk-picks__desc{paint-order:stroke fill;-webkit-text-stroke:3px rgba(11,22,46,.9);
  text-shadow:0 1px 4px rgba(0,0,0,.55)}
.fk-picks__cap .fk-picks__desc{-webkit-text-stroke-width:2px;color:rgba(255,255,255,.9)}
.fk-picks__label{font-weight:800;font-size:1.4rem;line-height:1.1}
.fk-picks__desc{font-size:.92rem;line-height:1.4}
.fk-picks__cell--big .fk-picks__label{font-size:clamp(1.6rem,1.1rem + 1.4vw,2.25rem)}
@media (max-width:991.98px){
  .fk-picks__bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:10.5rem}
  .fk-picks__bento .fk-picks__cell--big{grid-row:span 1}
}
@media (max-width:575.98px){
  .fk-picks__bento{grid-auto-rows:9.5rem}
  .fk-picks__cap{padding:0 1rem .85rem}
  .fk-picks__label{font-size:1.15rem}
  .fk-picks__bento li:not(.fk-picks__cell--big) .fk-picks__desc{display:none}
}

.fk-picks__moods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.fk-picks__mood{display:flex;align-items:stretch;min-height:9rem;height:100%;box-sizing:border-box;overflow:hidden;border-radius:20px;
  border:1px solid var(--line);background:var(--bg);color:var(--ink);text-decoration:none;transition:border-color .15s ease}
.fk-picks__mood:hover,.fk-picks__mood:focus-visible{border-color:var(--accent);color:var(--ink)}
.fk-picks__mood:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fk-picks__pic{flex:0 0 42%;background-color:#18264d;background-size:cover;background-position:center 35%}
.fk-picks__mood-text{display:flex;flex-direction:column;justify-content:center;gap:.2rem;padding:1rem 1.25rem}
.fk-picks__mood-text .fk-picks__desc{color:var(--muted)}
@media (max-width:991.98px){
  .fk-picks__moods{grid-template-columns:minmax(0,1fr);gap:.65rem}
  .fk-picks__mood{min-height:5.25rem;border-radius:14px}
  .fk-picks__pic{flex-basis:7rem}
  .fk-picks__mood-text{padding:.6rem 1rem}
  .fk-picks__mood-text .fk-picks__label{font-size:1.15rem}
  .fk-picks__mood-text .fk-picks__desc{font-size:.85rem}
}

.fk-picks__season{display:flex;align-items:center;flex-wrap:wrap;gap:0 1.75rem;overflow:hidden;border-radius:24px;
  background:#0a2e26;border:1px solid #1f6b55;color:#f4f8ff;text-decoration:none}
.fk-picks__season:hover,.fk-picks__season:focus-visible{color:#f4f8ff;border-color:#7be495}
.fk-picks__season:focus-visible{outline:3px solid #7be495;outline-offset:2px}
.fk-picks__season-pic{flex:0 0 18.75rem;align-self:stretch;min-height:10.5rem;background-size:cover;background-position:center 30%}
.fk-picks__season-text{flex:1 1 18rem;display:flex;flex-direction:column;gap:.25rem;padding:1.25rem 0}
.fk-picks__season-text .fk-picks__desc{color:#bfd9d0;font-size:1rem}
.fk-picks__eyebrow{color:#7be495;font-weight:800;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em}
.fk-picks__season-title{font-weight:800;font-size:clamp(1.4rem,1rem + 1.2vw,2rem);line-height:1.1}
.fk-picks__cta{display:inline-flex;align-items:center;min-height:48px;margin-inline-end:1.75rem;padding:0 1.5rem;border-radius:999px;
  background:#2ecc71;color:#08251d;font-weight:800}
@media (max-width:575.98px){
  .fk-picks__season{position:relative;flex-wrap:nowrap;min-height:7.5rem;border-radius:16px}
  .fk-picks__season-pic{position:absolute;top:0;right:0;bottom:0;width:46%;min-height:0}
  .fk-picks__season-text{position:relative;max-width:56%;padding:1rem}
  .fk-picks__season-text .fk-picks__desc{display:none}
  .fk-picks__season-title{font-size:1.3rem}
  .fk-picks__cta{display:none}
}

.fk-picks__screens{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.fk-picks__screen{display:flex;align-items:center;gap:1.1rem;height:100%;box-sizing:border-box;padding:1.1rem 1.25rem;
  border:1px solid var(--line);border-radius:18px;background:var(--bg);color:inherit;text-decoration:none;
  transition:border-color .15s ease,transform .25s cubic-bezier(.2,.9,.25,1.1)}
.fk-picks__screen:hover,.fk-picks__screen:focus-visible{border-color:var(--accent);transform:translateY(-3px)}
.fk-picks__screen:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fk-picks__badge{flex:0 0 76px;height:70px;display:flex;align-items:center;justify-content:center;background:#ffb627;
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.fk-picks__screen-text{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.fk-picks__screen-title{font-size:1.5rem;font-weight:800;line-height:1.1;color:var(--ink)}
.fk-picks__screen .fk-picks__desc{color:var(--muted)}
@media (max-width:991.98px){
  .fk-picks__screens{grid-template-columns:minmax(0,1fr);gap:.75rem}
  .fk-picks__screen{padding:.85rem 1rem}
}
@media (max-width:575.98px){
  .fk-picks__badge{flex-basis:60px;height:56px}
  .fk-picks__badge img{width:28px;height:28px}
}

.fk-picks__cta-card{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem 2.5rem;padding:2.75rem;border-radius:28px;
  background:#1b1450;border:1px solid #3a2f8a;color:#f4f8ff}
.fk-picks__cta-text{flex:1 1 24rem;min-width:0}
.fk-picks__cta-title{margin:0 0 .6rem;font-size:clamp(1.6rem,1.1rem + 1.6vw,2.4rem);font-weight:800;line-height:1.05;color:#f4f8ff}
.fk-picks__cta-desc{margin:0;color:#c9c2f0;font-size:1.1rem}
.fk-picks__cta-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 2rem;border-radius:999px;
  background:#ffd166;color:#1a1340;font-weight:800;text-decoration:none}
.fk-picks__cta-btn:hover{background:#ffe29a;color:#1a1340}
.fk-picks__cta-btn:focus-visible{outline:3px solid #ffe29a;outline-offset:3px}
@media (max-width:575.98px){
  .fk-picks__cta-card{padding:1.5rem;border-radius:20px}
  .fk-picks__cta-btn{width:100%}
}

/* =========================================================================================
   FACETS — greetings (languages), featured (genres), timeline (decades), chips/cards
   ========================================================================================= */
.sec.fk-facets{padding-block:3rem}
.fk-facets__grid{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.65rem;justify-content:center}
.fk-facets__grid--cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(13.5rem,1fr));gap:.85rem;justify-content:stretch}
.fk-facets__grid--cards.fk-facets__grid--decades{display:flex;flex-wrap:wrap;justify-content:center}
.fk-facets__grid--cards.fk-facets__grid--decades>li{flex:0 1 calc((100% - 3 * .85rem) / 4);min-width:0}
@media (max-width:991.98px){.fk-facets__grid--cards.fk-facets__grid--decades>li{flex-basis:calc((100% - 2 * .85rem) / 3)}}
@media (max-width:575.98px){.fk-facets__grid--cards.fk-facets__grid--decades{gap:.65rem}
  .fk-facets__grid--cards.fk-facets__grid--decades>li{flex-basis:calc((100% - .65rem) / 2)}}
.fk-facets__tile{display:flex;align-items:baseline;gap:.55rem;min-height:2.85rem;box-sizing:border-box;padding:.6rem 1.05rem;
  border:1px solid var(--line);border-radius:999px;background:var(--bg);text-decoration:none;color:var(--ink);
  transition:border-color .15s ease,transform .25s cubic-bezier(.2,.9,.25,1.1),box-shadow .25s ease}
.fk-facets__tile:hover,.fk-facets__tile:focus-visible{border-color:var(--accent);transform:translateY(-3px);
  box-shadow:0 12px 26px -14px rgba(14,22,48,.45)}
.fk-facets__tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fk-facets__grid--cards .fk-facets__tile{flex-direction:column;align-items:flex-start;gap:.2rem;min-height:6rem;border-radius:12px;padding:.95rem 1.1rem}
.fk-facets__grid--cards .fk-facets__tile--art{position:relative;overflow:hidden;min-height:11.5rem;padding:0;justify-content:flex-end;
  border-color:transparent;background-color:#18264d;background-size:cover;background-position:center;background-repeat:no-repeat}
.fk-facets__tile--art .fk-facets__label,.fk-facets__tile--art .fk-facets__desc,.fk-facets__tile--art .fk-facets__count{
  position:relative;z-index:1;color:#fff;padding-inline:1.1rem;paint-order:stroke fill;-webkit-text-stroke:3px rgba(11,22,46,.9);
  text-shadow:0 1px 4px rgba(0,0,0,.55)}
.fk-facets__tile--art .fk-facets__desc,.fk-facets__tile--art .fk-facets__count{-webkit-text-stroke-width:2px}
.fk-facets__tile--art .fk-facets__label{padding-top:.15rem}
.fk-facets__tile--art .fk-facets__desc{color:rgba(255,255,255,.88)}
.fk-facets__tile--art .fk-facets__count{padding-bottom:.95rem;margin-top:.15rem}
.fk-facets__tile--art.fk-facets__tile--nocount .fk-facets__desc:last-child,
.fk-facets__tile--art.fk-facets__tile--nocount .fk-facets__label:last-child{padding-bottom:.95rem}
.fk-facets__scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(18,35,71,0) 14%,rgba(18,35,71,.18) 38%,rgba(18,35,71,.42) 60%,rgba(18,35,71,.58) 100%)}
.fk-facets__label{font-weight:600}
.fk-facets__desc{font-size:.85rem;line-height:1.45;color:var(--muted)}
.fk-facets__count{font-variant-numeric:tabular-nums;font-size:.8rem;color:var(--accent);margin-inline-start:auto}
.fk-facets__grid--cards .fk-facets__count{margin-inline-start:0;margin-top:auto}

/* greetings: "hello" in each language, in its own script. */
.fk-facets__grid--greetings{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:.85rem}
.fk-facets__grid--greetings .fk-facets__tile{--greet:var(--accent);flex-direction:column;justify-content:space-between;
  align-items:flex-start;gap:.75rem;height:100%;min-height:8rem;padding:1rem 1.1rem;border-radius:16px;container-type:inline-size}
.fk-facets__grid--greetings .fk-facets__label{font-weight:700;display:inline-flex;align-items:center;gap:.45rem}
.fk-facets__flag{width:20px;height:15px;flex:none;border-radius:2px;object-fit:cover;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.fk-facets__grid--greetings .fk-facets__item:nth-child(5n+1) .fk-facets__tile{--greet:var(--fk-c1)}
.fk-facets__grid--greetings .fk-facets__item:nth-child(5n+2) .fk-facets__tile{--greet:var(--fk-c2)}
.fk-facets__grid--greetings .fk-facets__item:nth-child(5n+3) .fk-facets__tile{--greet:var(--fk-c3)}
.fk-facets__grid--greetings .fk-facets__item:nth-child(5n+4) .fk-facets__tile{--greet:var(--fk-c4)}
.fk-facets__grid--greetings .fk-facets__item:nth-child(5n+5) .fk-facets__tile{--greet:var(--fk-c5)}
.fk-facets__greeting{display:block;color:var(--greet);font-weight:800;line-height:1.25;max-width:100%;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
  /* As big as the tile allows: its inner width over the word's estimated width in ems. */
  font-size:min(clamp(1.35rem,1rem + 1vw,1.85rem),calc(100cqi / var(--greet-em,4)))}
@media (max-width:575.98px){.fk-facets__grid--greetings{grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}}

.fk-facets__more{display:flex;justify-content:center;margin-top:1.25rem}
.fk-facets__more-btn{min-height:48px;padding:0 1.5rem;border-radius:999px;border:1px solid var(--line);background:var(--bg);
  color:var(--accent);font-family:inherit;font-weight:800;font-size:1rem;line-height:1;cursor:pointer}
.fk-facets__more-btn:hover,.fk-facets__more-btn:focus-visible{border-color:var(--accent)}
.fk-facets__more-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* featured: the biggest genres as pictures, the rest as dotted chips. */
.fk-facets__grid--featured{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:1.1rem}
.fk-facets__grid--featured .fk-facets__tile--art{min-height:12.5rem}
.fk-facets__grid--featured .fk-facets__label{font-size:1.35rem;font-weight:800}
@media (max-width:991.98px){.fk-facets__grid--featured{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:575.98px){.fk-facets__grid--featured{gap:.65rem}
  .fk-facets__grid--featured .fk-facets__tile--art{min-height:7.5rem}
  .fk-facets__grid--featured .fk-facets__label{font-size:1.15rem}}
.fk-facets__grid--chips .fk-facets__tile{align-items:center;min-height:44px;font-weight:700}
.fk-facets__grid--chips .fk-facets__label{font-weight:700}
.fk-facets__grid--chips .fk-facets__item:nth-child(5n+1){--dot:var(--fk-d1)}
.fk-facets__grid--chips .fk-facets__item:nth-child(5n+2){--dot:var(--fk-d2)}
.fk-facets__grid--chips .fk-facets__item:nth-child(5n+3){--dot:var(--fk-d3)}
.fk-facets__grid--chips .fk-facets__item:nth-child(5n+4){--dot:var(--fk-d4)}
.fk-facets__grid--chips .fk-facets__item:nth-child(5n+5){--dot:var(--fk-d5)}
.fk-facets__dot{width:9px;height:9px;flex:none;border-radius:50%;background:var(--dot,var(--accent))}

/* timeline: one stop per decade on a rail. */
.fk-facets__timeline{position:relative}
.fk-facets__rail{position:absolute;left:6%;right:6%;top:calc(4.2rem + 90px);height:4px;border-radius:2px;background:var(--line)}
.fk-facets__eras{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.5rem}
.fk-facets__eras>li:nth-child(7n+1){--era:var(--fk-e1)}
.fk-facets__eras>li:nth-child(7n+2){--era:var(--fk-e2)}
.fk-facets__eras>li:nth-child(7n+3){--era:var(--fk-e3)}
.fk-facets__eras>li:nth-child(7n+4){--era:var(--fk-e4)}
.fk-facets__eras>li:nth-child(7n+5){--era:var(--fk-e5)}
.fk-facets__eras>li:nth-child(7n+6){--era:var(--fk-e6)}
.fk-facets__eras>li:nth-child(7n+7){--era:var(--fk-e7)}
.fk-facets__era{display:flex;flex-direction:column;align-items:center;gap:.6rem;height:100%;box-sizing:border-box;
  padding:.5rem .35rem .75rem;border-radius:16px;text-align:center;text-decoration:none;color:var(--ink);
  transition:transform .25s cubic-bezier(.2,.9,.25,1.1)}
.fk-facets__era:hover,.fk-facets__era:focus-visible{transform:translateY(-3px)}
.fk-facets__era:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fk-facets__era-icon{width:84px;height:84px;background:var(--era);mask-repeat:no-repeat;mask-position:center;mask-size:72px 72px;
  -webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:72px 72px}
.fk-facets__era-year{font-size:2.5rem;font-weight:800;line-height:1;color:var(--era)}
.fk-facets__pin{position:relative;z-index:1;width:16px;height:16px;border-radius:50%;background:var(--era);
  box-shadow:0 0 0 4px var(--fk-band-bg,var(--bg))}
.fk-facets__era-desc{color:var(--muted);font-size:.9rem;line-height:1.35}
@media (max-width:991.98px){
  .fk-facets__rail,.fk-facets__pin{display:none}
  .fk-facets__eras{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:1.25rem}
}
@media (max-width:575.98px){
  .fk-facets__eras{display:flex;gap:.75rem;overflow-x:auto;margin-inline:-12px;padding:0 12px .4rem;scroll-snap-type:x proximity;
    scroll-padding-inline:12px}
  .fk-facets__eras>li{flex:0 0 8.25rem;scroll-snap-align:start}
  .fk-facets__era{padding:1rem .6rem;border:1px solid var(--line);background:var(--bg);gap:.4rem}
  .fk-facets__era-icon{width:56px;height:56px;mask-size:48px 48px;-webkit-mask-size:48px 48px}
  .fk-facets__era-year{font-size:2rem}
}

@media (prefers-reduced-motion:reduce){
  .fk-picks__tile,.fk-picks__screen,.fk-facets__tile,.fk-facets__era,.fk-week__thumb img,.fk-shelf__thumb img{transition:none}
}

/* =========================================================================================
   SONG PAGE (song-page; song-player.component.scss, 2026-10-19 redesign). A night-blue band for
   the song itself — the same navy in BOTH themes, like the hero — and the page's own colours for
   where to go next. Mobile first: one column; the side rail moves beside the stage at 992px.
   ========================================================================================= */
.sec.fk-song{padding:0}
.fk-song [hidden]{display:none!important}
.fk-song__band{background:#122347;color:#fff;padding:1.5rem 0 2.5rem}
.fk-song__band a{color:#ffd166}
.fk-song__band-light{padding:2.5rem 0;background:var(--bg)}
.fk-song__band-tint{padding:2.5rem 0;background:var(--panel)}

.fk-song__crumbs{display:flex;flex-wrap:wrap;gap:.45rem;font-size:.85rem;color:#c3cce8;margin-bottom:1rem}
.fk-song__band .fk-song__crumbs a{color:#c3cce8;text-decoration:none}
.fk-song__band .fk-song__crumbs a:hover,.fk-song__band .fk-song__crumbs a:focus-visible{color:#fff;text-decoration:underline}

.fk-song__header{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem 2rem;margin-bottom:1.5rem}
.fk-song__heading{min-width:0;flex:1 1 22rem}
.fk-song__type{display:inline-block;margin:0 0 .35rem;font-size:.72rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:#ffd166}
.fk-song__title{margin:0 0 .4rem;color:#fff;font-weight:900;font-size:clamp(1.9rem,1.2rem + 2.4vw,3rem);line-height:1.05;
  overflow-wrap:anywhere}
.fk-song__artist{display:flex;align-items:center;flex-wrap:wrap;gap:.35rem .6rem;margin:0;font-size:1.1rem;font-weight:600;color:#fff}
.fk-song__band .fk-song__artist-link{color:#fff;text-decoration:none}
.fk-song__band .fk-song__artist-link:hover,.fk-song__band .fk-song__artist-link:focus-visible{color:#ffd166;text-decoration:underline}
.fk-song__avatar{flex:none;display:block;width:40px;height:40px;border-radius:50%;overflow:hidden;border:2px solid #ffd166;background:#24365f}
.fk-song__avatar img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.fk-song__avatar.is-logo{border-radius:8px;background:#fff}
.fk-song__avatar.is-logo img{object-fit:contain;padding:3px;box-sizing:border-box}
.fk-song__from{margin:.3rem 0 0;font-size:.95rem;color:#c3cce8}
.fk-song__band .fk-song__from a{color:inherit;text-decoration:underline}
.fk-song__band .fk-song__from a:hover{color:#ffd166}
.fk-song__medley{margin:.55rem 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.35rem}
.fk-song__medley li{font-size:.8rem;padding:.18rem .5rem;border-radius:6px;background:rgba(255,255,255,.08);color:#c3cce8}
.fk-song__chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.fk-song__chip{padding:.3rem .75rem;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);
  font-size:.85rem;font-weight:600;font-variant-numeric:tabular-nums}

/* Watch layout: the stage, and the side rail under it (beside it from 992px). */
.fk-song__watch{display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem}
@media (min-width:992px){.fk-song__watch{grid-template-columns:minmax(0,1fr) 22rem;align-items:start}}
.fk-song__main{min-width:0}

.fk-song__tabs{display:flex;gap:.25rem;margin-bottom:.75rem;border-bottom:1px solid rgba(255,255,255,.22);overflow-x:auto;scrollbar-width:none}
.fk-song__tab{appearance:none;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:.5rem .9rem;
  min-height:44px;font:inherit;font-weight:600;color:#c3cce8;cursor:pointer;white-space:nowrap;transition:color .15s ease,border-color .15s ease}
.fk-song__tab:hover{color:#fff}
.fk-song__tab:focus-visible{outline:2px solid #ffd166;outline-offset:-2px}
.fk-song__tab.is-active{color:#ffd166;border-bottom-color:#ffd166}

/* The stage keeps its 16:9 box from the first paint, never taller than ~55% of the window. */
.fk-song__stage{position:relative;width:100%;max-width:min(100%,calc(55vh * 16 / 9));margin-inline:auto;aspect-ratio:16/9;
  border-radius:12px;overflow:hidden;background:#000;box-shadow:0 24px 50px -24px rgba(0,0,0,.7)}
.fk-song__stage:fullscreen{max-width:none;border-radius:0;aspect-ratio:auto;height:100%}
.fk-song__poster,.fk-song__mount,.fk-song__stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.fk-song__poster{object-fit:cover}
.fk-song__gate{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.fk-song__gate-body{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;
  box-sizing:border-box;width:100%;height:100%;padding:1.5rem;text-align:center;color:#fff;background:rgba(0,0,0,.55)}
.fk-song__gate-title{font-weight:600}
.fk-song__gate-desc{font-size:.9rem;opacity:.85;max-width:34rem}
.fk-song__gate-btn{padding:.5rem 1.2rem;border:0;border-radius:999px;background:#fff;color:#111;font:inherit;font-weight:600;
  text-decoration:none;cursor:pointer;min-height:44px;display:inline-flex;align-items:center}
.fk-song__band .fk-song__gate-btn{color:#111}
.fk-song__gate-btn:focus-visible{outline:3px solid #ffd166;outline-offset:2px}
.fk-song__gate--refused{background:rgba(0,0,0,.8)}
.fk-song__gate--refused .fk-song__gate-body{background:none}
@media (max-width:575.98px){
  .fk-song__gate-body{padding:.75rem;gap:.4rem}
  .fk-song__gate-desc{font-size:.8rem}
}
/* Which gate shows: consent until embeds are allowed (<html data-fk-embeds>), then the Sing disc while
   idle, nothing while playing, the refusal once every version refused. */
html[data-fk-embeds="1"] .fk-song__gate--consent{display:none}
.fk-song__gate--sing,.fk-song__gate--refused{display:none}
html[data-fk-embeds="1"] .fk-song__stage[data-state="idle"] .fk-song__gate--sing{display:flex}
.fk-song__stage[data-state="refused"] .fk-song__gate--refused{display:flex}
.fk-song__stage[data-state="refused"] .fk-song__gate--consent{display:none}

/* The page's primary action: a play disc, 72px (a real touch target). */
.fk-song__sing{display:grid;place-items:center;width:4.5rem;height:4.5rem;padding:0;border:0;border-radius:50%;
  background:#ffd166;color:#122347;cursor:pointer;box-shadow:0 4px 18px rgba(0,0,0,.35);transition:transform .15s ease,box-shadow .15s ease}
.fk-song__sing svg{width:46%;height:46%;margin-left:6%;fill:currentColor}
.fk-song__sing:hover,.fk-song__sing:focus-visible{transform:scale(1.06);box-shadow:0 6px 22px rgba(0,0,0,.45)}
.fk-song__sing:focus-visible{outline:3px solid #fff;outline-offset:3px}

.fk-song__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:1rem}
.fk-song__vote-count{font-size:.9rem}

/* Side rail. */
.fk-song__rail{display:flex;flex-direction:column;gap:1rem;min-width:0}
.fk-song__card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:1rem}
.fk-song__card-title{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 .75rem;font-size:1.1rem;font-weight:800;color:#fff}
.fk-song__card-count{font-size:.85rem;font-weight:600;color:#c3cce8}
.fk-song__versions{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem;max-height:26rem;overflow-y:auto}
.fk-song__version{appearance:none;display:grid;grid-template-columns:6rem minmax(0,1fr);gap:.75rem;align-items:center;width:100%;
  padding:.35rem;border:1px solid transparent;border-radius:10px;background:none;color:#fff;font:inherit;text-align:left;cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease}
.fk-song__version:hover:not(:disabled){background:rgba(255,255,255,.08)}
.fk-song__version:focus-visible{outline:2px solid #ffd166;outline-offset:2px}
.fk-song__version:disabled{cursor:default}
.fk-song__version.is-current{border-color:rgba(255,209,102,.6);background:rgba(255,209,102,.08)}
.fk-song__version-thumb{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:6px;background:rgba(255,255,255,.08)}
.fk-song__version-text{display:flex;flex-direction:column;min-width:0}
.fk-song__version-channel{font-weight:600;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fk-song__version-meta{font-size:.78rem;color:#c3cce8}
.fk-song__facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.45rem 1rem;margin:0;font-size:.9rem}
.fk-song__facts dt{color:#c3cce8;font-weight:500}
.fk-song__facts dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.fk-song__key-hint{margin:.75rem 0 0;font-size:.75rem;color:#c3cce8;line-height:1.4}
.fk-song__message{margin:0;padding:3rem 0 1rem;text-align:center;color:#c3cce8}
.fk-song__message+.fk-song__message{padding-top:0}

/* Below the band: the page's own colours, light or dark. */
.fk-song__section-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.5rem 1rem}
.fk-song__section-title{margin:0 0 1rem;color:var(--ink);font-weight:800;font-size:clamp(1.35rem,1.1rem + .8vw,1.75rem);line-height:1.2}
.fk-song__section-sub{margin:-.6rem 0 1.25rem;color:var(--muted)}
.fk-song__section-link{margin-bottom:1rem;font-weight:600;color:var(--accent);text-decoration:none}
.fk-song__section-link:hover{text-decoration:underline}
.fk-song__card-link{display:flex;flex-direction:column;color:var(--ink);text-decoration:none}
.fk-song__card-link:hover .fk-song__card-name{color:var(--accent)}
.fk-song__card-link:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:.5rem}
.fk-song__thumb{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:.5rem;background:var(--panel)}
.fk-song__card-name{margin-top:.5rem;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fk-song__card-artist{font-size:.85rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* «More by»: one swipeable row on a phone, six across from 768px. */
.fk-song__shelf{list-style:none;margin:0;padding:0 0 .25rem;display:grid;grid-auto-flow:column;grid-auto-columns:10.5rem;gap:1rem;
  overflow-x:auto;scroll-snap-type:x proximity}
.fk-song__shelf>li{scroll-snap-align:start}
@media (min-width:768px){.fk-song__shelf{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(6,minmax(0,1fr));overflow:visible;padding:0}}
.fk-song__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem}
.fk-song__collections{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:1rem}
.fk-song__collection{position:relative;display:flex;align-items:flex-end;min-height:8rem;padding:1rem;box-sizing:border-box;border-radius:16px;
  overflow:hidden;background-color:#24365f;background-size:cover;background-position:center 30%;color:#fff;text-decoration:none;
  transition:transform .25s cubic-bezier(.2,.9,.25,1.1),box-shadow .25s ease}
.fk-song__collection:hover,.fk-song__collection:focus-visible{color:#fff;transform:translateY(-3px);box-shadow:0 16px 30px -16px rgba(14,22,48,.55)}
.fk-song__collection:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.fk-song__collection-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,16,36,0) 35%,rgba(10,16,36,.85))}
.fk-song__collection-name{position:relative;font-weight:800;font-size:1.1rem}

@media (prefers-reduced-motion:reduce){
  .fk-song__sing,.fk-song__version,.fk-song__collection,.fk-song__tab{transition:none}
}

/* =========================================================================================
   CATALOGUE HUBS (catalog-hub; catalog-grid.component.scss). An artist gets the night-blue band
   (the same navy in BOTH themes, like the song page), its most-sung songs and duets, then the full
   list on the tint; genre, collection and source hubs a centred header above the list. Mobile
   first: one column of rows; the grid fills out with `auto-fill` as the screen widens.
   ========================================================================================= */
.sec.fk-hub{padding:0}
.fk-hub [hidden]{display:none!important}
.fk-hub__band{background:#122347;color:#fff;padding:1.75rem 0 2rem}
.fk-hub__hero{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem 2.25rem}
.fk-hub__photo{margin:0;flex:none;width:8.5rem;display:flex;flex-direction:column;align-items:center;gap:.4rem}
@media (min-width:768px){.fk-hub__photo{width:10rem}}
.fk-hub__photo img{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;object-position:50% 25%;
  border:4px solid #ffd166;background:#24365f;box-sizing:border-box}
.fk-hub__photo.is-logo img{border-radius:.75rem;object-fit:contain;padding:.75rem;background:#fff}
.fk-hub__photo-link{display:block;width:100%;border-radius:50%}
.fk-hub__photo.is-logo .fk-hub__photo-link{border-radius:.75rem}
.fk-hub__photo-link:focus-visible{outline:2px solid #ffd166;outline-offset:3px}
.fk-hub__credit{font-size:.68rem;line-height:1.3;color:#b8c3e6;text-align:center;overflow-wrap:anywhere;max-width:100%}
.fk-hub__intro{flex:1 1 18rem;min-width:0;display:flex;flex-direction:column}
.fk-hub__eyebrow{margin:0;font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#ffd166}
.fk-hub__title{margin:.2rem 0 .5rem;color:#fff;font-weight:900;font-size:clamp(2rem,1.3rem + 2.6vw,3.4rem);line-height:1.02;overflow-wrap:anywhere}
.fk-hub__profile{margin:0;font-size:1.05rem;color:#d3dbf2;font-variant-numeric:tabular-nums}
.fk-hub__aka{margin:.4rem 0 0;font-size:.9rem;color:#c3cce8}
.fk-hub__links{margin:.75rem 0 0}
.fk-hub__band a{color:#ffd166;font-weight:600;text-decoration:none}
.fk-hub__band a:hover,.fk-hub__band a:focus-visible{text-decoration:underline}
.fk-hub__about{margin:.9rem 0 0;max-width:40rem;order:2;background:rgba(255,255,255,.06);border-radius:12px;padding:.75rem .9rem}
.fk-hub__about-toggle{font-weight:700;cursor:pointer;color:#fff;min-height:44px;display:flex;align-items:center;justify-content:space-between;
  gap:.75rem;list-style:none}
.fk-hub__about-toggle::-webkit-details-marker{display:none}
.fk-hub__about-toggle::after{content:"";width:.55rem;height:.55rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .15s ease}
.fk-hub__about[open]>.fk-hub__about-toggle::after{transform:translateY(2px) rotate(225deg)}
.fk-hub__about-toggle:focus-visible{outline:2px solid #ffd166;outline-offset:2px;border-radius:6px}
.fk-hub__bio{margin:0;color:#d3dbf2;line-height:1.55}
.fk-hub__bio a{white-space:nowrap}
.fk-hub__bio-credit{margin:.35rem 0 0;font-size:.78rem;color:#b8c3e6}
.fk-hub__band .fk-hub__bio-credit a{color:inherit;font-weight:400;text-decoration:underline}
/* From 768px the lead simply reads under the name (open, its summary hidden); a phone folds it under the button. */
@media (min-width:768px){
  .fk-hub__about{order:0;background:none;padding:0}
  .fk-hub__about[open]>.fk-hub__about-toggle{display:none}
}
.fk-hub__actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.25rem;order:1}
@media (min-width:768px){.fk-hub__actions{order:3}}
.fk-hub__band .fk-hub__play{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:46px;padding:0 1.4rem;
  border-radius:999px;background:#c2185b;color:#fff;font-weight:700;text-decoration:none;transition:background-color .15s ease;flex:1 1 100%}
@media (min-width:576px){.fk-hub__band .fk-hub__play{flex:0 0 auto}}
.fk-hub__band .fk-hub__play:hover{background:#a3134c;color:#fff;text-decoration:none}
.fk-hub__band .fk-hub__play:focus-visible{outline:2px solid #ffd166;outline-offset:3px}

/* Most sung + duets (artist, page 1). */
.fk-hub__highlights{padding:2.25rem 0;background:var(--bg)}
.fk-hub__highlights-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem 3rem}
@media (min-width:992px){.fk-hub__highlights-grid.has-collabs{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}}
.fk-hub__section-title{margin:0 0 1rem;color:var(--ink);font-weight:800;font-size:clamp(1.35rem,1.1rem + .8vw,1.75rem);line-height:1.2}
.fk-hub__section-sub{margin:-.6rem 0 1rem;color:var(--muted)}
.fk-hub__top{list-style:none;margin:0;padding:0}
.fk-hub__top>li+li{border-top:1px solid var(--line)}
.fk-hub__top-link{display:grid;grid-template-columns:1.6rem 6rem minmax(0,1fr);gap:.85rem;align-items:center;padding:.6rem .25rem;
  border-radius:10px;color:var(--ink);text-decoration:none;transition:background-color .15s ease}
.fk-hub__top-link--compact{grid-template-columns:6rem minmax(0,1fr)}
@media (min-width:576px){
  .fk-hub__top-link{grid-template-columns:2rem 7.5rem minmax(0,1fr) auto;gap:1rem}
  .fk-hub__top-link--compact{grid-template-columns:6.5rem minmax(0,1fr)}
}
.fk-hub__top-link:hover,.fk-hub__top-link:focus-visible{background:var(--panel)}
.fk-hub__top-link:hover .fk-hub__song{color:var(--accent)}
.fk-hub__top-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fk-hub__top-rank{font-weight:900;font-size:1.4rem;text-align:center;color:var(--fk-c1)}
.fk-hub__top-thumb{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:8px;background:var(--panel)}
.fk-hub__top-text{display:flex;flex-direction:column;min-width:0}
.fk-hub__top-dur{display:none;font-size:.9rem;color:var(--muted);font-variant-numeric:tabular-nums}
@media (min-width:576px){.fk-hub__top-dur{display:inline}}

/* The list. */
.fk-hub__body{padding:2.25rem 0 3.5rem;background:var(--bg)}
.fk-hub--artist .fk-hub__body{background:var(--panel)}
.fk-hub__header{text-align:center;margin-bottom:1.75rem}
.fk-hub__heading{margin:0 0 .35rem;color:var(--ink);font-weight:800;font-size:clamp(1.75rem,1.3rem + 1.8vw,2.6rem);line-height:1.1;overflow-wrap:anywhere}
.fk-hub__tagline{margin:0 auto .35rem;max-width:40rem;color:var(--muted)}
.fk-hub__count{margin:0;font-size:.9rem;font-variant-numeric:tabular-nums;color:var(--muted)}

.fk-hub__tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.6rem;margin-bottom:.9rem}
.fk-hub__search{display:flex;flex:1 1 16rem;min-width:0;border:1px solid var(--line);border-radius:999px;background:var(--bg);overflow:hidden}
.fk-hub__search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.fk-hub__search-input{flex:1 1 auto;min-width:0;min-height:42px;padding:0 1rem;border:0;background:none;color:var(--ink);font:inherit}
.fk-hub__search-input:focus{outline:none}
.fk-hub__search-input::placeholder{color:var(--muted)}
.fk-hub__search-btn{flex:none;padding:0 1.1rem;border:0;background:var(--accent);color:var(--on-accent);font:inherit;font-weight:600;cursor:pointer}
.fk-hub__search-btn:focus-visible{outline:2px solid var(--ink);outline-offset:-4px}
.fk-hub__views{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.fk-hub__view{display:inline-flex;align-items:center;gap:.4rem;min-height:40px;padding:0 .85rem;border:0;background:none;color:var(--muted);
  font:inherit;font-size:.85rem;cursor:pointer}
.fk-hub__view.is-on{background:var(--accent);color:var(--on-accent)}
.fk-hub__view:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* Rows (the default): a small square thumbnail with the title and artist beside it. */
.fk-hub__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr));gap:.15rem 1.5rem}
.fk-hub__link{display:flex;align-items:center;gap:.85rem;height:100%;padding:.5rem .25rem;border-bottom:1px solid var(--line);
  color:var(--ink);text-decoration:none;box-sizing:border-box;transition:background-color .15s ease,border-color .15s ease}
.fk-hub__link:hover,.fk-hub__link:focus-visible{background:var(--panel-2)}
.fk-hub__link:hover .fk-hub__song{color:var(--accent)}
.fk-hub__link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fk-hub__thumb{position:relative;flex:0 0 auto;display:block;width:3.25rem;height:3.25rem;border-radius:6px;overflow:hidden;background:var(--line)}
.fk-hub__thumb img{display:block;width:100%;height:100%;object-fit:cover}
.fk-hub__duration,.fk-hub__versions{display:none;position:absolute;bottom:.4rem;padding:.05rem .4rem;border-radius:6px;background:rgba(0,0,0,.72);
  color:#fff;font-size:.72rem;line-height:1.5;font-variant-numeric:tabular-nums}
.fk-hub__duration{right:.4rem}
.fk-hub__versions{left:.4rem}
.fk-hub__meta{display:flex;flex-direction:column;min-width:0}
.fk-hub__song{font-weight:600;line-height:1.35;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;line-clamp:1;overflow:hidden;min-width:0}
.fk-hub__list .fk-hub__song{font-size:.95rem}
.fk-hub__artist{color:var(--muted);font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fk-hub__badge{display:none;align-self:flex-start;margin-top:.3rem;padding:.05rem .5rem;border:1px solid var(--line);border-radius:999px;
  font-size:.72rem;color:var(--muted)}
/* Cards: the 16/9 cover on top, its overlays, the badge. */
.fk-hub__list[data-layout="cards"]{grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:1.25rem}
.fk-hub__list[data-layout="cards"] .fk-hub__link{flex-direction:column;align-items:stretch;gap:0;padding:0;border:1px solid var(--line);
  border-radius:12px;background:var(--bg);overflow:hidden}
.fk-hub__list[data-layout="cards"] .fk-hub__link:hover,.fk-hub__list[data-layout="cards"] .fk-hub__link:focus-visible{border-color:var(--accent);background:var(--bg)}
.fk-hub__list[data-layout="cards"] .fk-hub__thumb{width:auto;height:auto;aspect-ratio:16/9;border-radius:0}
.fk-hub__list[data-layout="cards"] .fk-hub__duration,.fk-hub__list[data-layout="cards"] .fk-hub__versions{display:inline}
.fk-hub__list[data-layout="cards"] .fk-hub__meta{gap:.15rem;padding:.7rem .85rem .85rem}
.fk-hub__list[data-layout="cards"] .fk-hub__song{font-size:1rem}
.fk-hub__list[data-layout="cards"] .fk-hub__badge{display:inline-block}
.fk-hub__empty{padding:2.5rem 0;text-align:center;color:var(--muted)}

/* The pager: every page a link. */
.fk-hub__pager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.35rem;margin-top:2rem}
.fk-hub__page{display:inline-flex;align-items:center;justify-content:center;min-width:2.75rem;height:2.75rem;padding:0 .5rem;box-sizing:border-box;
  border-radius:999px;color:var(--ink);text-decoration:none;font-variant-numeric:tabular-nums}
.fk-hub__page:hover{background:var(--panel-2)}
.fk-hub__page.is-current{background:var(--accent);color:var(--on-accent);font-weight:600}
.fk-hub__page:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fk-hub__page--step{font-size:1.3rem;line-height:1}
.fk-hub__gap{padding:0 .15rem;color:var(--muted)}

/* «Si cantas a X, prueba con»: a row that scrolls sideways on a phone, six across on a desktop. */
.fk-hub__similar{margin-top:3rem}
.fk-hub__similar-list{list-style:none;margin:0;padding:0 0 .4rem;display:flex;gap:.9rem;overflow-x:auto;scroll-snap-type:x proximity}
.fk-hub__similar-list>li{flex:0 0 6.25rem;scroll-snap-align:start}
@media (min-width:576px){
  .fk-hub__similar-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem;overflow:visible;padding:0}
}
@media (min-width:992px){.fk-hub__similar-list{grid-template-columns:repeat(6,minmax(0,1fr))}}
.fk-hub__similar-link{display:flex;flex-direction:column;align-items:center;gap:.45rem;padding:.5rem .25rem;border-radius:12px;text-align:center;
  color:var(--ink);text-decoration:none}
.fk-hub__similar-link:hover .fk-hub__similar-name{color:var(--accent)}
.fk-hub__similar-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fk-hub__similar-photo{width:84px;height:84px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:#24365f;color:#fff;font-weight:900;font-size:1.9rem;box-sizing:border-box}
@media (min-width:576px){.fk-hub__similar-photo{width:110px;height:110px;font-size:2.4rem}}
.fk-hub__similar-photo img{width:100%;height:100%;object-fit:cover}
.fk-hub__similar-photo.is-logo{border-radius:14px;background:#fff}
.fk-hub__similar-photo.is-logo img{object-fit:contain;padding:8px;box-sizing:border-box}
/* Dark: the band photo's yellow ring, so the faces read as one family on the dark page. */
:root[data-theme="dark"] .fk-hub__similar-photo{border:3px solid #ffd166}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fk-hub__similar-photo{border:3px solid #ffd166}}
.fk-hub__similar-name{font-weight:700;line-height:1.25;overflow-wrap:anywhere}
.fk-hub__similar-count{font-size:.85rem;color:var(--muted);margin-top:-.25rem;font-variant-numeric:tabular-nums}

/* Sibling collections. */
.fk-hub__related{margin-top:3rem;padding-top:1.75rem;border-top:1px solid var(--line)}
.fk-hub__related-title{margin:0 0 .85rem;font-size:1.15rem;color:var(--ink)}
.fk-hub__related-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.fk-hub__related-link{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:0 .9rem;box-sizing:border-box;
  border:1px solid var(--line);border-radius:999px;color:var(--ink);text-decoration:none}
.fk-hub__related-link:hover,.fk-hub__related-link:focus-visible{border-color:var(--accent)}
.fk-hub__related-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fk-hub__related-count{font-size:.78rem;font-variant-numeric:tabular-nums;color:var(--muted)}

@media (prefers-reduced-motion:reduce){
  .fk-hub__band .fk-hub__play,.fk-hub__top-link,.fk-hub__link,.fk-hub__about-toggle::after{transition:none}
}

/* ── The search page (catalog-search): the hubs' list and pager, plus its box, filter bar and chips. ── */
.fk-search--page{gap:.5rem;margin:0 auto 1.25rem;padding:.35rem;background:var(--bg);border:1px solid var(--line)}
.fk-search--page:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.fk-search--page .fk-search__icon{color:var(--muted)}
.fk-search--page .fk-voice{color:var(--muted)}
.fk-search--page .fk-search__input{color:var(--ink);font-size:1.05rem;min-height:44px}
.fk-search--page .fk-search__input::placeholder{color:var(--muted)}
.fk-search--page .fk-search__btn{min-height:44px}
@media (max-width:768px){.fk-search--page .fk-search__input{padding-left:.85rem}}
.fk-search-page__filterbar{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-bottom:.75rem}
.fk-search-page__filters[open]{flex:1 0 100%}
.fk-search-page__toggle{display:inline-flex;align-items:center;gap:.45rem;min-height:40px;padding:0 .9rem;box-sizing:border-box;
  border:1px solid var(--line);border-radius:999px;color:var(--ink);font-weight:600;cursor:pointer;list-style:none;user-select:none}
.fk-search-page__toggle::-webkit-details-marker{display:none}
.fk-search-page__toggle:hover{border-color:var(--accent)}
.fk-search-page__toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fk-search-page__filters[open]>.fk-search-page__toggle{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.fk-search-page__when-open{display:none}
.fk-search-page__filters[open] .fk-search-page__when-open{display:inline}
.fk-search-page__filters[open] .fk-search-page__when-closed{display:none}
.fk-search-page__panel{margin-top:.9rem;padding:1rem;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.fk-search-page__axis+.fk-search-page__axis{margin-top:1rem}
.fk-search-page__axis-title{margin:0 0 .5rem;font-size:.85rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.fk-search-page__chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.fk-search-page__chip{display:inline-flex;align-items:center;gap:.4rem;min-height:40px;padding:0 .85rem;box-sizing:border-box;
  border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--ink);text-decoration:none;font-size:.92rem}
.fk-search-page__chip:hover{border-color:var(--accent)}
.fk-search-page__chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fk-search-page__chip.is-on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.fk-search-page__chip-count{font-size:.78rem;font-variant-numeric:tabular-nums;opacity:.75}
.fk-search-page__chip-x{font-size:1.1rem;line-height:1}
.fk-search-page__status{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem;margin-bottom:.5rem}
.fk-search-page__count{margin:0;font-size:.9rem;color:var(--muted);font-variant-numeric:tabular-nums}
.fk-search-page__clear{color:var(--accent);font-weight:600;font-size:.9rem}
.fk-hub--search .fk-hub__tools{margin-top:-.25rem}

/* ---- fase 5: the source indexes (screen-index.component.scss) --------------------------- */
.fk-screens__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.85rem}
@media (max-width:575.98px){.fk-screens__list{grid-template-columns:minmax(0,1fr);gap:.6rem}}
.fk-screens__card{display:flex;flex-direction:column;gap:.3rem;height:100%;box-sizing:border-box;padding:1rem 1.15rem;
  border:1px solid var(--line);border-radius:14px;background:var(--bg);color:inherit;text-decoration:none;
  transition:border-color .15s ease,transform .25s cubic-bezier(.2,.9,.25,1.1)}
.fk-screens__card:hover,.fk-screens__card:focus-visible{border-color:var(--accent);transform:translateY(-2px)}
.fk-screens__card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fk-screens__name{font-size:1.15rem;font-weight:800;line-height:1.2;color:var(--ink);overflow-wrap:anywhere}
.fk-screens__meta{display:flex;flex-wrap:wrap;gap:.35rem .9rem;color:var(--muted);font-size:.9rem;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.fk-screens__card{transition:none}}

/* ---- fase 5: playing in order — the list beside the stage (song-player __playlist) ------- */
.fk-song__playlist{display:flex;flex-direction:column;min-width:0;max-height:min(36rem,80vh);border:1px solid rgba(255,255,255,.14);
  border-radius:16px;background:rgba(255,255,255,.06);overflow:hidden}
.fk-song__pl-head{padding:.85rem 1rem;border-bottom:1px solid rgba(255,255,255,.14)}
.fk-song__pl-from{margin:0 0 .35rem;font-weight:800;font-size:1rem;color:#fff;overflow-wrap:anywhere}
.fk-song__pl-bar{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.fk-song__pl-pos{font-size:.85rem;color:#c3cce8;font-variant-numeric:tabular-nums}
.fk-song__band .fk-song__pl-next{display:inline-flex;align-items:center;min-height:40px;padding:0 1rem;border-radius:999px;
  background:#ffd166;color:#122347;font-weight:700;font-size:.9rem;text-decoration:none}
.fk-song__band .fk-song__pl-next:hover{background:#ffe08f}
.fk-song__pl-next:focus-visible{outline:3px solid #fff;outline-offset:2px}
.fk-song__pl-items{position:relative;list-style:none;margin:0;padding:.35rem;overflow-y:auto;overscroll-behavior:contain}
.fk-song__pl-item{border-radius:10px}
.fk-song__pl-item.is-current{background:rgba(255,209,102,.12)}
.fk-song__band .fk-song__pl-link{display:grid;grid-template-columns:1.5rem 6.5rem minmax(0,1fr);gap:.6rem;align-items:center;
  padding:.35rem;border-radius:10px;color:#fff;text-decoration:none}
.fk-song__pl-link:hover{background:rgba(255,255,255,.08)}
.fk-song__pl-link:focus-visible{outline:2px solid #ffd166;outline-offset:-2px}
.fk-song__pl-index{display:grid;place-items:center;font-size:.8rem;color:#c3cce8;font-variant-numeric:tabular-nums}
.fk-song__pl-index svg{width:1rem;height:1rem;fill:#ffd166}
.fk-song__pl-thumb{display:block;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:rgba(255,255,255,.08)}
.fk-song__pl-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.fk-song__pl-text{display:flex;flex-direction:column;min-width:0}
.fk-song__pl-title{font-weight:600;font-size:.9rem;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fk-song__pl-artist{font-size:.78rem;color:#c3cce8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fk-song__pl-item.is-current .fk-song__pl-title{color:#ffd166}
@media (max-width:991.98px){.fk-song__playlist{max-height:24rem}}

/* ---- fase 5: a shared playlist («Play all») -------------------------------------------- */
.fk-hub--playlist .fk-hub__tools{justify-content:space-between}
.fk-playlist__play{display:inline-flex;align-items:center;min-height:44px;padding:0 1.25rem;border-radius:999px;background:var(--accent);
  color:var(--on-accent);font-weight:700;text-decoration:none}
.fk-playlist__play:hover{filter:brightness(1.08)}
.fk-playlist__play:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ── fase 6: signed-in features (song actions + picker, my playlists) ────────────────────────────── */
/* Keep / vote / add: pills on the night band, filled when on (song-player __fav/__vote/__playlist-btn). */
.fk-song__act{display:inline-flex;align-items:center;gap:.45rem;min-height:40px;padding:.4rem 1.05rem;border:1px solid rgba(255,255,255,.35);
  border-radius:999px;background:transparent;color:#fff;font:inherit;font-weight:600;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.fk-song__act:hover{border-color:#ffd166}
.fk-song__act:focus-visible{outline:3px solid #ffd166;outline-offset:2px}
.fk-song__act[disabled]{opacity:.7;cursor:progress}
.fk-song__act.is-on{background:#ffd166;border-color:#ffd166;color:#122347}
.fk-song__act-icon{font-size:1.05em;line-height:1}
.fk-song__picker{margin-top:.75rem;max-width:26rem;padding:.75rem;border:1px solid rgba(255,255,255,.18);border-radius:12px;background:rgba(255,255,255,.06)}
.fk-song__picker-msg{margin:.25rem 0;color:#c3cce8;font-size:.9rem}
.fk-song__picker-list{list-style:none;margin:0 0 .5rem;padding:0;max-height:16rem;overflow-y:auto}
.fk-song__picker-item{display:flex;align-items:center;gap:.5rem;width:100%;min-height:40px;padding:.4rem .6rem;border:0;border-radius:8px;
  background:transparent;color:#fff;font:inherit;text-align:left;cursor:pointer}
.fk-song__picker-item:hover:not([disabled]){background:rgba(255,255,255,.1)}
.fk-song__picker-item:focus-visible{outline:2px solid #ffd166;outline-offset:-2px}
.fk-song__picker-item[disabled]{cursor:default}
.fk-song__picker-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fk-song__picker-star{color:#ffd166}
.fk-song__picker-tick{color:#7be495;font-weight:700}
.fk-song__picker-suggest{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.6rem}
.fk-song__picker-new{display:flex;gap:.4rem;margin-bottom:.5rem}
.fk-song__picker-new .fk-mylists__input{flex:1;min-width:0}
.fk-song__band .fk-song__picker-link{font-size:.9rem}
.fk-song__band .fk-chip{border-color:rgba(255,255,255,.35);background:transparent;color:#fff}
.fk-chip{display:inline-flex;align-items:center;min-height:32px;padding:.2rem .75rem;border:1px solid var(--line,rgba(0,0,0,.18));border-radius:999px;
  background:var(--panel);color:var(--ink);font:inherit;font-size:.9rem;cursor:pointer}
.fk-chip:hover:not([disabled]){border-color:var(--accent)}
.fk-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fk-song__comments{max-width:52rem}

/* «My playlists» (playlists.component): the lists, one list, and the managed view of a shared one. */
.fk-mylists__msg{margin:1rem 0;text-align:center;color:var(--muted)}
.fk-mylists__msg[hidden]{display:none}
.fk-mylists__signin{text-align:center}
.fk-mylists__form{display:flex;flex-wrap:wrap;gap:.5rem;max-width:32rem;margin:0 auto 1rem}
.fk-mylists__input{flex:1;min-width:10rem;min-height:40px;padding:.4rem .75rem;border:1px solid var(--line,rgba(0,0,0,.2));border-radius:8px;
  background:var(--bg);color:var(--ink);font:inherit}
.fk-mylists__input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.fk-mylists__btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 1.1rem;border:1px solid var(--accent);
  border-radius:999px;background:var(--accent);color:var(--on-accent);font:inherit;font-weight:700;text-decoration:none;cursor:pointer}
.fk-mylists__btn:hover:not([disabled]){filter:brightness(1.08)}
.fk-mylists__btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.fk-mylists__btn[disabled]{opacity:.6;cursor:default}
.fk-mylists__btn--ghost,.fk-mylists__btn.is-on{background:transparent;color:var(--accent)}
.fk-mylists__suggest{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4rem;margin:0 auto 1.5rem;max-width:40rem}
.fk-mylists__suggest-label{font-size:.85rem;color:var(--muted)}
.fk-mylists__list,.fk-mylists__songs{list-style:none;max-width:40rem;margin:0 auto 1rem;padding:0}
.fk-mylists__item,.fk-mylists__song{display:flex;align-items:center;gap:.75rem;padding:.35rem .5rem;border-bottom:1px solid var(--line,rgba(0,0,0,.1))}
.fk-mylists__link,.fk-mylists__song-link{display:flex;align-items:center;gap:.6rem;flex:1;min-width:0;min-height:44px;color:var(--ink);text-decoration:none}
.fk-mylists__link:hover .fk-mylists__name,.fk-mylists__song-link:hover .fk-mylists__song-name{color:var(--accent)}
.fk-mylists__link:focus-visible,.fk-mylists__song-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.fk-mylists__name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fk-mylists__star{color:#e0a800;margin-right:.35rem}
.fk-mylists__tag{padding:.05rem .5rem;border-radius:999px;background:var(--panel);font-size:.75rem;color:var(--muted)}
.fk-mylists__count{font-size:.85rem;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.fk-mylists__x{flex:none;width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:1.4rem;line-height:1;cursor:pointer}
.fk-mylists__x:hover{background:var(--panel);color:var(--ink)}
.fk-mylists__x:focus-visible{outline:2px solid var(--accent)}
.fk-mylists__thumb{flex:none;width:96px;height:54px;object-fit:cover;border-radius:6px;background:var(--panel)}
.fk-mylists__song-text{display:flex;flex-direction:column;min-width:0}
.fk-mylists__song-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fk-mylists__song-artist{font-size:.85rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fk-mylists__back{max-width:40rem;margin:0 auto 1rem}
.fk-mylists__head{display:flex;flex-direction:column;align-items:center;gap:.5rem}
.fk-mylists__share{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;max-width:40rem;margin:0 auto 1.25rem}
.fk-mylists .fk-hub__tools{max-width:40rem;margin-left:auto;margin-right:auto;justify-content:flex-start}
@media (max-width:480px){.fk-mylists__thumb{width:72px;height:40px}}