/* ===== 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{
  --bg:#ffffff; --ink:#212529; --ink-soft:#495057; --muted:#6c757d;
  --line:#dee2e6; --accent:#0048f0; --panel:#f8f9fa; --verse:#212529;
  --teal:#00a890; --brand-blue:#0048f0; --accent-soft:#e3eaf9;
  /* 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:#212529; --chrome-muted:#5c636a;
  --chrome-line:#e4e7eb;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#212529; --ink:#dee2e6; --ink-soft:#adb5bd; --muted:#868e96;
    --line:#495057; --accent:#6691f6; --panel:#2a2f34; --verse:#dee2e6;
    --accent-soft:rgba(102,145,246,.17); --band-blue:#17222e; --panel-2:#2a2f34;
    --chrome-bg:#08172b; --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:#868e96;
  --line:#495057; --accent:#6691f6; --panel:#2a2f34; --verse:#dee2e6;
  --accent-soft:rgba(102,145,246,.17); --band-blue:#17222e; --panel-2:#2a2f34;
  --chrome-bg:#08172b; --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}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.6 "Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;-webkit-font-smoothing:antialiased}

/* 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{--chrome-bg:#08172b;--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. */
.chrome>.bar{max-width:none;padding-inline:clamp(24px,3vw,44px)}
.brand{text-decoration:none;display:inline-flex;align-items:center;gap:.5rem}
.brand__logo{width:30px;height:30px;display:block;flex:none}
/* Wordmark (ng-site-shell app-wordmark: STRO blue + FIA teal, on navy chrome) */
.wm{font:700 17.6px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  letter-spacing:.1em;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(--brand-blue)}
.wm__accent{color:var(--teal)}
.nav{display:flex;margin-left:auto;align-items:center}
.nav__panel{display:flex;gap:16px;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}
/* Language toggle in the navbar (inline on desktop, a row in the mobile drawer). */
.nav-lang{display:inline-flex;align-items:center;gap:5px;text-decoration:none;
  color:var(--chrome-muted);font:14px/1 system-ui,sans-serif;padding:8px 6px;white-space:nowrap}
.nav-lang:hover{color:var(--accent)}
.nav-lang__icon{font-size:13px;line-height:1}
/* Menu de usuario (site config `auth`): «Entrar» o el desplegable con el nombre. */
.nav-auth{display:inline-flex;align-items:center}
.nav-auth__login{text-decoration:none;color:inherit;font-weight:600}
.nav-auth__login:hover{color:var(--accent)}
.nav-auth__btn{display:inline-flex;align-items:center;gap:6px}
.nav-auth__avatar{width:22px;height:22px;border-radius:50%;object-fit:cover;flex:none}
.nav-auth__avatar--initial{display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;background:var(--accent);color:var(--bg,#fff)}
.nav-auth__name{max-width:12em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-auth__logout{background:none;border:0;width:100%;text-align:left;font:inherit;cursor:pointer}
/* Config-driven navbar dropdown menus */
.nav-dd{position:relative}
.nav-dd__btn{display:inline-flex;align-items:center;gap:5px;cursor:pointer;background:transparent;
  border:none;color:var(--chrome-muted);font:14px/1 system-ui,sans-serif;padding:8px 4px}
.nav-dd__btn:hover,.nav-dd.is-open .nav-dd__btn{color:var(--chrome-fg)}
.nav-dd__caret{font-size:9px;transition:transform .15s ease}
.nav-dd.is-open .nav-dd__caret{transform:rotate(180deg)}
.nav-dd__menu{position:absolute;top:calc(100% + 8px);left:0;min-width:190px;z-index:40;display:none;
  background:var(--panel);border:1px solid var(--line);border-radius:11px;
  box-shadow:0 14px 34px rgba(0,0,0,.24);padding:6px}
.nav-dd.is-open .nav-dd__menu{display:block}
.nav-dd__item{display:block;text-decoration:none;color:var(--ink);
  font:14px/1.3 system-ui,sans-serif;padding:8px 11px;border-radius:8px;white-space:nowrap}
.nav-dd__item:hover{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
/* 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){
  .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 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}
  .nav-lang{width:100%;color:var(--chrome-fg);font-weight:600;padding:12px 0;
    border-top:1px solid var(--chrome-line)}
  .nav{margin-left:auto}
  .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{width:100%;justify-content:space-between;padding:12px 0;color:var(--chrome-fg);
    border-bottom:1px solid var(--chrome-line);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}
  .nav-dd__item{color:var(--chrome-muted);padding:8px 0}
  .nav-dd__item:hover{background:transparent;color:var(--chrome-fg)}
}
.controls{margin-left:18px;display:flex;gap:8px;align-items:center}
.foot .bar{justify-content:space-between;font-family:system-ui,sans-serif;font-size:12.5px;color:var(--chrome-muted)}
.muted{color:var(--muted)}

.ctl{font:13px/1 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 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)}
.ftr__copy{font:12.5px/1 system-ui,sans-serif;color:var(--chrome-muted)}
.ftr__controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.ftr__ctl{font:12.5px/1 system-ui,sans-serif;cursor:pointer;color:var(--chrome-fg);text-decoration:none;
  background:transparent;border:1px solid var(--chrome-line);border-radius:999px;padding:7px 13px}
.ftr__ctl:hover{border-color:var(--chrome-fg)}
.ftr__theme{display:inline-flex;border:1px solid var(--chrome-line);border-radius:999px;overflow:hidden}
.ftr__theme-btn{cursor:pointer;background:transparent;border:none;color:var(--chrome-muted);
  font-size:14px;line-height:1;padding:7px 12px}
.ftr__theme-btn:hover{color:var(--chrome-fg)}
.ftr__theme-btn[aria-pressed="true"]{background:var(--brand-blue);color:#fff}

/* 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: same max-width + side padding as the navbar .bar (1140/28),
   so section content aligns exactly under the logo and menu. */
.wrap{max-width:1140px;margin:0 auto;padding:0 28px}
.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{padding-top:56px;padding-bottom:64px}
/* 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{--chrome-bg:#08172b;--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:8px}
.btn{display:inline-block;margin-top:18px;background:var(--accent);color:#fff;
  text-decoration:none;font-family: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(30px,6.4vw,44px);line-height:1.04;margin:0;font-weight:700;letter-spacing:-.035em}
.hero__accent{color:var(--accent);font-style:italic}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:20px}
/* 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{margin-top:0;font-size:15px;padding:12px 28px;border:2px solid var(--accent)}
.hero__actions .btn--ghost{border:2px solid var(--line)}
/* 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 .btn{width:100%;text-align:center}
}
/* 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(20px,1.7vw,22px);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}
/* 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(2.25rem,8vh,5rem)}
  .hero>.wrap{max-width:820px}
  .hero__title{font-size:clamp(38px,3vw,44px)}
  .sec--lede{display:flex;align-items:center;justify-content:center;
    min-height:min(calc(100svh - 60px - min(72vh,640px)),210px)}
}
.eyebrow{font-family: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:clamp(24px,3.4vw,32px);margin:0 0 16px;font-weight:700;letter-spacing:-.01em}
.sec__sub{color:var(--ink-soft);margin:0 0 26px;font-family:system-ui,sans-serif;font-size:16.8px;line-height:1.6}

.cards{padding:48px 0;text-align:center;background:var(--panel-2)}
/* "What's inside" — a big 40px/600 title and a larger, lighter subtitle, like strofia.com. */
.cards .sec__title{font-size:clamp(30px,4.4vw,40px);font-weight:600}
.cards .sec__sub{font-size:20px;font-weight:300;line-height:1.5}
.cards__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;text-align:left;margin-top:8px}
/* White card centered on the tinted "What's inside" band, like strofia.com:
   uniform 1px border, 16px radius, a soft shadow, centered content and a blue
   40px line icon. */
.card{border:1px solid var(--line);border-radius:16px;padding:24px;background:var(--bg);text-align:center;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
  transition:transform .15s ease,box-shadow .15s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(8,23,43,.08)}
.card__icon{line-height:0;margin-bottom:16px;color:var(--accent)}
.card__icon-svg{width:40px;height:40px}
.card__title{font-size:20px;margin:0 0 8px;font-weight:700}
.card__desc{margin:0;color:var(--ink-soft);font-family:system-ui,sans-serif;font-size:14px;line-height:1.55}

/* CTA band — matches strofia.com's cta-section: a 135deg navy gradient, a
   centered column, a pill button with a file icon and a shield-lock note. */
.cta{padding:40px 0 80px;text-align:center;
  background:linear-gradient(135deg,#08172b 0%,#09265b 50%,#08172b 100%)}
.cta .sec__title{font-size:clamp(28px,3.4vw,34px);margin-bottom:16px}
.cta__body{font-size:16px;line-height:1.5;max-width:580px;margin:0 auto;font-family:system-ui,sans-serif}
.cta__btn{margin-top:24px;padding:14px 48px;font-size:16px;font-weight:700;border-radius:999px;
  background:var(--brand-blue);display:inline-flex;align-items:center;gap:8px}
.cta__btn-icon{width:16px;height:16px;flex:none}
.cta__note{margin:16px 0 0;font-family:system-ui,sans-serif;font-size:12px;
  display:flex;justify-content:center;align-items:center;gap:5px}
.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: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) ---- */
.process{padding:48px 0;text-align:center}
.process__steps{list-style:none;counter-reset:step;padding:0;margin:8px auto 0;display:grid;gap:30px;
  max-width:832px;text-align:left}
.process__step{counter-increment:step;position:relative;padding-left:80px;min-height:56px}
/* Big solid blue-gradient number circle with a white numeral, like strofia.com's
   .process-phase-num (56px, 135deg #0048f0->#0078d8, 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,#0048f0,#0078d8);color:#fff;font-weight:700;font-size:16px;
  box-shadow:0 4px 12px rgba(0,72,240,.25);
  display:grid;place-items:center;font-family:system-ui,sans-serif}
/* vertical connector linking one step's number circle to the next */
.process__step:not(:last-child)::after{content:"";position:absolute;left:27px;top:62px;bottom:-30px;
  width:2px;background:color-mix(in srgb,var(--accent) 30%,transparent)}
.process__step-title{margin:0 0 8px;font-size:18px;font-weight:600}
.process__step-desc{margin:0;color:var(--ink-soft);font-family:system-ui,sans-serif;font-size:15px;line-height:1.6}
.process__legal{max-width:832px;margin:32px auto 0;padding:18px 20px;border:1px solid var(--line);border-radius:12px;background:var(--panel);text-align:left;
  display:flex;gap:14px;align-items:flex-start}
.process__legal-icon{width:18px;height:18px;flex:none;color:var(--accent);margin-top:1px}
.process__legal-text{min-width:0}
.process__legal-title{margin:0 0 8px;font-size:14.5px;font-weight:600}
.process__legal-body{margin:0;color:var(--muted);font-family:system-ui,sans-serif;font-size:14.5px;line-height:1.6}

/* ---- 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: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: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: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: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{padding:48px 0}
/* "Write to us" — a big 40px title with 20px bottom margin, like strofia.com. */
.contact .sec__title{font-size:clamp(30px,4.4vw,40px);margin-bottom:20px}
.contact__grid{display:grid;grid-template-columns:1fr;gap:26px}
@media(min-width:860px){.contact__grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:start}}
/* White card floating on the tint band — same pattern as .poem-card. */
.contact__panel{background:var(--bg);border:1px solid var(--line);border-radius:16px;
  padding:24px;box-shadow:0 12px 34px rgba(8,23,43,.06)}
.contact__form{display:grid;gap:14px;margin:0}
.contact__field{display:grid;gap:5px;font-family:system-ui,sans-serif;font-size:13px;color:var(--ink-soft)}
/* Uppercase field labels, like strofia.com's small-caps form labels. */
.contact__field>span{text-transform:uppercase;letter-spacing:.07em;font-size:11px;color:var(--muted)}
/* Tinted fields on the white card (the card is the surface, the inputs carry the tint). */
.contact__field input,.contact__field textarea{font:15px/1.4 system-ui,sans-serif;color:var(--ink);
  background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:10px 12px;width:100%}
.contact__field input:focus,.contact__field textarea:focus{outline:2px solid var(--accent);border-color:var(--accent)}
.contact__actions{display:flex;justify-content:flex-end;margin-top:2px}
.contact__form .btn{margin-top:0;border:none;cursor:pointer}
.contact__form .btn:disabled{opacity:.6;cursor:default}
.contact-turnstile{min-height:65px}
.contact__status{margin:4px 0 0;font-family: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: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: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 system-ui,sans-serif;margin:0}
.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:9px 18px;font:600 14px/1 system-ui,sans-serif;transition:background .15s ease,color .15s ease}
.article__print:hover{background:var(--accent);color:#fff}
/* ── 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}
/* 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}
.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:system-ui,sans-serif}
.doc-toc__label{font:700 11.5px/1 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:system-ui,sans-serif;display:flex;flex-direction:column;gap:20px}
.aspect__title{font:700 11.5px/1 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 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:#fff}
/* 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: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: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 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 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. */
.lbx__badge{grid-column:3;justify-self:end;display:inline-flex;align-items:center;gap:5px;
  font:12px/1.4 system-ui,sans-serif;color:var(--muted);white-space:nowrap}
.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 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__badge span{display:none} .lbx__img{max-height:70vh} .lbx__prev{left:4px} .lbx__next{right:4px} }
@media (max-width:1099px){
  .doc,.doc--noindex{grid-template-columns:1fr;grid-template-areas:"head" "rule" "aspect" "body";max-width:900px;gap:0}
  .doc__index{display:none}
  .doc__aspect{position:static;flex-direction:row;flex-wrap:wrap;gap:12px 22px;margin:0 0 22px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .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 left to the browser's own "Margins" setting (Default = the
   usual page margins, None = none) — the page must not force them. */
@media print{
  footer.foot,.scroll-btn,.consent,.article__print,.doc__index,.doc__aspect,.novel__pager{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{max-width:none;padding:6px 0 14px}
  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: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:system-ui,sans-serif;font-size:15.5px;line-height:1.55;max-width:62ch}

/* ---- settings (preferences) ---- */
.settings{padding:48px 0}
/* Hub de ajustes: barra lateral de secciones + paneles (Perfil, Preferencias, Seguridad, Cuenta, Cookies). */
.settings__hub{display:grid;grid-template-columns:200px 1fr;gap:32px;margin-top:24px;align-items:start}
.settings__nav{position:sticky;top:80px}
.settings__nav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.settings__nav-link{display:block;padding:8px 10px;border-radius:6px;text-decoration:none;color:var(--ink)}
.settings__nav-link:hover{background:var(--panel)}
.settings__group-title{margin:18px 0 6px;font:600 12px/1.2 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.settings__panels{display:flex;flex-direction:column;gap:28px;min-width:0}
.settings__panel{padding:20px 22px;border:1px solid var(--line);border-radius:10px;background:var(--panel);scroll-margin-top:90px}
.settings__panel-title{margin:0 0 12px;font-size:1.2rem}
.settings__muted{margin:2px 0 0;color:var(--muted);font-size:.92rem}
.settings__row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 0;border-top:1px solid var(--line)}
.settings__row:first-child{border-top:0}
.settings__row-title{margin:0;font-weight:600}
.settings__row--danger .settings__row-title{color:#c0392b}
.btn--danger{border-color:#c0392b;color:#c0392b}
.settings__profile{display:flex;gap:18px;align-items:center}
.settings__avatar{border-radius:50%;object-fit:cover}
.settings__dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0}
.settings__dl dt{color:var(--muted)}
.settings__dl dd{margin:0}
.settings__msg{min-height:1.2em;margin:10px 0 0;font-size:.92rem}
.settings__msg--err{color:#c0392b}
.settings__nav-link[aria-current="page"]{background:var(--panel);color:var(--accent);font-weight:600}
/* admin group (overview, messages, users, comments) */
.settings__toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px}
.settings__toolbar .btn{margin-top:0}
.settings__toolbar .btn[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}
.settings__cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.settings__card{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border:1px solid var(--line);border-radius:10px;
  background:var(--bg);color:var(--ink);text-decoration:none}
.settings__card:hover{border-color:var(--accent)}
.settings__card-num{font-size:1.8rem;font-weight:700;line-height:1.1}
.settings__card-label{font-weight:600}
.settings__strong{font-weight:700}
.settings__list{list-style:none;margin:0;padding:0}
.settings__item{border-top:1px solid var(--line)}
.settings__item:first-child{border-top:0}
.settings__item-head{display:grid;grid-template-columns:12px 1fr auto;gap:10px;width:100%;padding:10px 4px;background:none;
  border:0;color:inherit;font:inherit;text-align:left;cursor:pointer}
.settings__item-head:hover{background:var(--bg)}
.settings__dot{width:8px;height:8px;margin-top:7px;border-radius:50%;background:var(--accent)}
.settings__dot--read{background:transparent}
.settings__item-body{padding:2px 4px 14px 26px}
.settings__pre{margin:8px 0;white-space:pre-wrap;overflow-wrap:anywhere}
.settings__badge{display:inline-block;margin-left:6px;padding:0 8px;border:1px solid var(--line);border-radius:999px;
  font-size:.78rem;line-height:1.6;color:var(--muted)}
.settings__badge--ok{color:#1e7e34;border-color:currentColor}
.settings__badge--warn{color:#c0392b;border-color:currentColor}
.settings__table-wrap{overflow-x:auto}
.settings__table{width:100%;border-collapse:collapse;font-size:.94rem}
.settings__table th,.settings__table td{padding:8px 6px;border-top:1px solid var(--line);text-align:left;vertical-align:top}
.settings__table th{border-top:0;color:var(--muted);font-weight:600}
.settings__input,.settings__select{padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);
  color:var(--ink);font:inherit}
.settings__input{flex:1 1 220px;min-width:0}
.settings__mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.85rem;color:var(--muted)}
.settings__comment{padding:12px 0;border-top:1px solid var(--line)}
.settings__comment:first-of-type{border-top:0}
.settings__comment-meta{margin:0}
@media (max-width:760px){.settings__hub{grid-template-columns:1fr}.settings__nav{position:static}
  .settings__nav-list{flex-direction:row;flex-wrap:wrap}.settings__row{flex-direction:column;align-items:flex-start}}
.settings__group{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px}
.settings__group .btn{margin-top:0}
.settings__label{width:100%;margin:8px 0 0;font-weight:600;color:var(--ink);
  font-family:system-ui,sans-serif;font-size:14px}

/* ---- 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 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:system-ui,sans-serif;font-size:12.5px}
.search-empty{margin:0;padding:16px 18px;color:var(--muted);font-family: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: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 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 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:#fff}
.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 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);margin-right:4px}
.srch__chip{font:13px/1 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: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: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: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 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:system-ui,sans-serif;font-size:13px;color:var(--muted)}

/* ---- cookie/consent banner (island, fixed bottom) ---- */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:var(--panel);border-top:1px solid var(--line);
  box-shadow:0 -6px 24px rgba(0,0,0,.10)}
.consent__inner{max-width:720px;margin:0 auto;padding:16px 22px;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.consent__text{flex:1 1 320px;min-width:0}
.consent__title{margin:0 0 4px;font-size:15px;font-weight:700;color:var(--ink);
  font-family:system-ui,sans-serif}
.consent__desc{margin:0;font-family:system-ui,sans-serif;font-size:12.5px;
  line-height:1.5;color:var(--ink-soft)}
.consent__link{color:var(--accent);text-decoration:none;white-space:nowrap}
.consent__link:hover{text-decoration:underline}
.consent__actions{display:flex;gap:10px;align-items:center;flex:none}
.consent__actions .btn{margin-top:0}
.consent__accept{border:none;cursor:pointer}

/* ---- 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:10px}
.nav-bell{position:relative}
.nav-bell__btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;
  border:none;border-radius:50%;background:transparent;color:var(--chrome-muted);cursor:pointer}
.nav-bell__btn:hover,.nav-bell__btn[aria-expanded="true"]{color:var(--chrome-fg)}
.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 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 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)}

/* ---- 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: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 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 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:#fff}
.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 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}}

/* ===== strofia_content/styles/strofia.css ===== */

.poem{padding:56px 0 8px}
.poem__title{font-size:clamp(30px,6vw,46px);line-height:1.08;margin:0 0 10px;font-weight:600;letter-spacing:-.01em;text-wrap:balance}
.poem__byline{margin:0 0 40px;font-family:system-ui,sans-serif;font-size:16px;color:var(--ink-soft)}
.poem__byline a{color:var(--accent);text-decoration:none}
.poem__byline a:hover{text-decoration:underline}
.poem__dates{color:var(--muted)}
/* Translated edition: «Traducido del X por Y» and «Título original: …» under the byline (BFF #220/#221). The byline's
   gap to the text moves to the last of these lines. */
.poem__byline:has(+ .poem__translator){margin-bottom:4px}
.poem__translator,.poem__original-title{margin:0 0 4px;font-family:system-ui,sans-serif;font-size:14px;color:var(--muted)}
.poem__translator{font-style:italic}
.poem__translator:not(:has(+ .poem__original-title)),.poem__original-title{margin-bottom:36px}
.poem__verse{font-size:19px;color:var(--verse)}
.poem__verse p{margin:0 0 1.5em}
.poem__meta{margin-top:44px;padding-top:18px;border-top:1px solid var(--line);
  font-family:system-ui,sans-serif;font-size:13px;color:var(--muted)}
.poem__credit{font-size:12.5px;line-height:1.5;overflow-wrap:anywhere}
.poem__credit a{color:inherit;text-decoration:underline;text-decoration-color:var(--line)}
.poem-card{max-width:608px;margin:0 auto;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:44px 48px}
.poem-card .poem{max-width:none;margin:0;padding:0}
/* Poem of the day: the baked poem stays invisible (keeping its space) while the
   day's poem is fetched — at most 1.5 s; no JS, no class, baked poem shows. */
.poem-card.is-pending .poem{visibility:hidden}
.poem-card .poem__title{font-size:clamp(28px,4.5vw,40px)}
.poem-card .poem__byline{margin-bottom:26px}
/* poem-of-the-day teaser */
.poem__eyebrow{font-family:system-ui,sans-serif;text-transform:uppercase;letter-spacing:.12em;
  font-size:14px;color:var(--accent);margin:0 0 12px}
.poem__more{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:22px}
.poem__keep{font:14px/1 system-ui,sans-serif;cursor:pointer;color:var(--accent);background:transparent;
  border:1px solid var(--line);border-radius:999px;padding:9px 17px}
.poem__keep:hover{border-color:var(--accent)}
.poem__full{color:var(--teal);text-decoration:none;font-family:system-ui,sans-serif;font-size:13px;font-weight:600}
.poem__full:hover{text-decoration:underline}
/* Reading columns stay narrow inside the wider home sections */
.poem{max-width:820px;margin:0 auto}

/* ---- BFF-rendered poem bodyHtml (eliertech-bff poetry-render.ts classes) ---- */
.poem-section .container{max-width:820px;margin:0 auto;padding:0 22px}
.poem__header{padding-top:56px}
.poem__author{color:var(--ink-soft)}
.poem__origin{font-family:system-ui,sans-serif;font-size:13px;color:var(--muted);margin:6px 0 0}
.poem__body{font-size:19px;color:var(--verse);margin-top:36px}
.poem__stanza{margin:0 0 1.5em}
.poem__line{display:block}
.doc__body .poem-section{padding:0}
.doc__body .poem-section>.container{max-width:var(--bodyw);margin:0 auto;padding:0}
.doc__body .poem__verse,.doc__body .poem__body{font-size:calc(var(--fs) + 2.5px)}
.doc__body .poem-list__title{font-size:calc(var(--fs) + 1.5px)}
/* ── Novel: chapter list (landing) + per-chapter pager ─────────────────────── */
.novel__blurb{margin:0 0 34px;font-size:calc(var(--fs) + 1px);line-height:1.5;color:var(--ink-soft);max-width:60ch}
.novel__toc{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.novel__toc-item{border-bottom:1px solid var(--line)}
.novel__toc-link{display:flex;gap:12px;align-items:baseline;padding:14px 4px;color:var(--ink);
  text-decoration:none;font-size:calc(var(--fs) + 1.5px);line-height:1.3;transition:color .12s ease,padding-left .12s ease}
.novel__toc-link:hover{color:var(--accent);padding-left:10px}
.novel__toc-num{flex:none;color:var(--muted);font-variant-numeric:tabular-nums;font-size:.85em}
.novel__pager{display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin:44px 0 0;padding:20px 0 0;border-top:1px solid var(--line);font-family:system-ui,sans-serif}
.novel__pager-link{color:var(--ink-soft);text-decoration:none;font-size:14.5px;transition:color .12s ease}
.novel__pager-link:hover{color:var(--accent)}
.novel__pager-up{color:var(--muted);font-weight:600;letter-spacing:.02em}
/* Fallback notice (work not translated to the viewing language) + MT offer */
.novel__notice{margin:0 0 30px;padding:14px 16px;border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:10px;background:color-mix(in srgb, var(--accent) 6%, transparent);font-family:system-ui,sans-serif}
.novel__notice-text{margin:0 0 6px;font-size:14.5px;color:var(--ink)}
.novel__notice-actions{margin:0;font-size:14px;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline}
.novel__mt-offer{color:var(--accent);text-decoration:none;font-weight:600}
.novel__mt-offer:hover{text-decoration:underline}
.novel__mt-note{color:var(--muted);font-size:12.5px}
/* Machine-translation banner (shown on an auto-translated, noindex view) */
.novel__mt-banner{margin:0 0 30px;padding:12px 16px;border:1px dashed var(--line);border-radius:10px;
  background:color-mix(in srgb, var(--muted) 8%, transparent);font-family:system-ui,sans-serif}
.novel__mt-banner-title{margin:0 0 4px;font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--ink-soft)}
.novel__mt-banner-note{margin:0;font-size:12.5px;color:var(--muted)}
.novel__mt-link{color:var(--accent);text-decoration:none}
.novel__mt-link:hover{text-decoration:underline}

/* ---- poem-list (author page) ---- */
.poem-list{padding:32px 0}
.poem-list__group{margin-top:18px}
.poem-list__group-title{font-size:16px;font-weight:600;color:var(--ink-soft);margin:0 0 8px;
  font-family:system-ui,sans-serif}
.poem-list__items{list-style:none;padding:0;margin:0;display:grid;gap:2px}
.poem-list__link{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  text-decoration:none;color:var(--accent);padding:8px 0;border-bottom:1px solid var(--line)}
.poem-list__link:hover .poem-list__title{text-decoration:underline}
.poem-list__title{font-size:18px}
.poem-list__year{color:var(--muted);font-family:system-ui,sans-serif;font-size:13px;flex:none}
/* Per-work translation-status badge (author page): human 'translated' vs 'mt' */
.poem-list__badge{margin-right:auto;flex:none;font-family:system-ui,sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.03em;text-transform:uppercase;padding:2px 8px;border-radius:999px;line-height:1.6;white-space:nowrap}
.poem-list__badge--translated{background:color-mix(in srgb, var(--accent) 14%, transparent);color:var(--accent)}
.poem-list__badge--mt{background:color-mix(in srgb, var(--muted) 18%, transparent);color:var(--muted)}

/* ---- authors-index (authors directory) ---- */
.authors-index{padding:40px 0}
.authors-index__group{margin-top:28px}
.authors-index__group-title{font-size:15px;font-weight:600;color:var(--accent);
  text-transform:uppercase;letter-spacing:.08em;margin:0 0 10px;
  font-family:system-ui,sans-serif}
.authors-index__items{list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:2px 20px}
.authors-index__link{display:flex;align-items:baseline;gap:8px;text-decoration:none;
  color:var(--ink);padding:6px 0;border-bottom:1px solid var(--line)}
.authors-index__link:hover .authors-index__name{color:var(--accent);text-decoration:underline}
.authors-index__name{font-size:15px}
.authors-index__dates{color:var(--muted);font-family:system-ui,sans-serif;font-size:12px}
.authors-index__count{margin-left:auto;color:var(--muted);font-family:system-ui,sans-serif;font-size:12px}

/* alpha-nav — la fila de iniciales que abre el catálogo de autores por letra.
   Hereda la tinta y el acento de la página: nada de colores propios, que es la
   regla que ya costó un arreglo en la croma del carrusel de elier.org.
   Centrada, como el título y el lede de la página de Autores que la preceden. */
.alpha-nav .sec__title{text-align:center}
.alpha-nav__items{list-style:none;padding:0;margin:0;
  display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.alpha-nav__link{display:inline-flex;align-items:baseline;gap:5px;text-decoration:none;
  color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:5px 9px;
  min-width:44px;justify-content:center}
.alpha-nav__link:hover{border-color:var(--accent)}
.alpha-nav__link:hover .alpha-nav__letter{color:var(--accent)}
.alpha-nav__link.is-active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.alpha-nav__letter{font-size:15px}
.alpha-nav__count{color:var(--muted);font-family:system-ui,sans-serif;font-size:11px}

/* About: el encabezado de las preguntas frecuentes, centrado como el título de la
   página y el de «Principios». Las preguntas siguen a la izquierda, que se leen
   mejor. Aquí y no en site_core: el FAQ del motor es genérico. */
.faq .sec__title,.faq .sec__sub{text-align:center}

/* Retrato del autor (fichero de Wikimedia Commons que sirve el BFF) con su
   crédito y licencia debajo: las licencias de Commons exigen atribuir. Flota a la
   derecha del nombre; en móvil va centrado encima. */
.author__portrait{float:right;margin:0 0 16px 24px;width:160px;max-width:40%}
.author__portrait img{display:block;width:100%;height:auto;border-radius:8px;border:1px solid var(--line);background:var(--panel)}
.author__credit{margin-top:6px;font-family:system-ui,sans-serif;font-size:11.5px;line-height:1.4;color:var(--muted);overflow-wrap:anywhere}
.author__credit a{color:inherit;text-decoration:underline;text-decoration-color:var(--line)}
.poem__header::after{content:"";display:block;clear:both}
/* Datos de Wikidata del autor (migración 994 del BFF): línea discreta bajo el nombre. */
.author__facts{margin:4px 0 0;font-family:system-ui,sans-serif;font-size:14px;line-height:1.5;color:var(--muted)}
.author__aka{margin:2px 0 0;font-family:system-ui,sans-serif;font-size:13px;line-height:1.5;color:var(--muted)}
.author__links{margin:6px 0 0;font-family:system-ui,sans-serif;font-size:12.5px;color:var(--muted)}
.author__links a{color:inherit;text-decoration:underline;text-decoration-color:var(--line)}
@media (max-width:600px){.author__portrait{float:none;margin:0 auto 16px;width:140px;max-width:60%}}
/* Crédito de una obra con licencia libre (CC BY / BY-SA, OGL): texto, traducción,
   fuente, licencia y aviso de adaptación, bajo el texto. Lo exige la licencia; lo
   pinta el BFF (migración 991) solo para obras con fila en poetry.work_license. */
.work__credit{clear:both;margin-top:40px;padding-top:14px;border-top:1px solid var(--line);font-family:system-ui,sans-serif;font-size:12.5px;line-height:1.5;color:var(--muted);overflow-wrap:anywhere}
.work__credit p{margin:0}
.work__credit .work__credit-note{margin-top:4px;font-size:11.5px}
.work__credit a{color:inherit;text-decoration:underline;text-decoration-color:var(--line)}