/* UNO.TEAM editorial layer (2026-11-10) – Varti Studio's design language for every generated component.
   One place for the tokens: Varti's own colour variables, Libre Baskerville 400 for headings, Poppins for text,
   hairlines (--blue-divider) between things, no tinted boxes, no dark slabs, no pills on labels.
   Real buttons keep Varti's own shape (100px radius, serif label). Linked from every page by scripts/editorial.py;
   tests/test_editorial.js guards against drift (Tailwind violet/slate, Inter/Plus Jakarta, 999px pills, uppercase eyebrows).
   PT Serif: (c) 2010 ParaType Ltd., SIL Open Font License 1.1 (/fonts/PTSerif-OFL.txt) – Cyrillic only, so RU/UK
   headings get a matching serif while Latin text keeps Libre Baskerville. */

:root{--black:#171717;--black-70:#171717b3;--black-50:#17171780;--purple-hover:#9452eb;--purple-50:#9452eb80;--purple-12:#9452eb1f;
  --light-purple-35:#dbc0ff59;--blue-divider:#e9e1f5;--light-orange-bg:#fff2ee;--ligh-blue-bg:#f7f2ff;
  --uno-serif:Librebaskerville,'Libre Baskerville','PT Serif',Georgia,serif;--uno-sans:Poppins,Montserrat,Arial,sans-serif;
  --uno-hair:1px solid var(--blue-divider)}

/* Cyrillic serif: the same family names resolve Cyrillic letters to PT Serif (declared after site.css, so it wins for this range) */
@font-face{font-family:Librebaskerville;src:url(/fonts/LibreBaskerville-Regular.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Librebaskerville;src:url(/fonts/PTSerif-cyr-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Librebaskerville;src:url(/fonts/PTSerif-cyr-400i.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Librebaskerville;src:url(/fonts/PTSerif-cyr-700.woff2) format("woff2");font-weight:500 900;font-style:normal;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Libre Baskerville';src:url(/fonts/PTSerif-cyr-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Libre Baskerville';src:url(/fonts/PTSerif-cyr-400i.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Libre Baskerville';src:url(/fonts/PTSerif-cyr-700.woff2) format("woff2");font-weight:500 900;font-style:normal;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'PT Serif';src:url(/fonts/PTSerif-cyr-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'PT Serif';src:url(/fonts/PTSerif-cyr-400i.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'PT Serif';src:url(/fonts/PTSerif-cyr-700.woff2) format("woff2");font-weight:500 900;font-style:normal;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

/* RU/UK templates force Montserrat on every element (!important, from before Libre Baskerville had a Cyrillic partner).
   Give the serif back exactly where Varti's CSS uses Libre Baskerville, plus our own serif components; body text stays Montserrat. */
html[lang="ru"] body :is(h1,h2,h3,h4,.h1-76,.h2-60,.h3-28,.h3-28-cms,.h3-36,.uno-connect .uc-q,.uno-connect .uc-title,.uno-ss-box .t,.lr-page h1,.lr-page h2,.lr-page h3,
  .lr-quotes blockquote,.lr-q p.lr-qt,.uq-quiz .uq-title,.uq-quiz .uq-q,.uq-btn,.uq-score,.lr-quiz-teaser .lr-qt-t):not([class*="w-icon"]),
html[lang="uk"] body :is(h1,h2,h3,h4,.h1-76,.h2-60,.h3-28,.h3-28-cms,.h3-36,.uno-connect .uc-q,.uno-connect .uc-title,.uno-ss-box .t,.lr-page h1,.lr-page h2,.lr-page h3,
  .lr-quotes blockquote,.lr-q p.lr-qt,.uq-quiz .uq-title,.uq-quiz .uq-q,.uq-btn,.uq-score,.lr-quiz-teaser .lr-qt-t):not([class*="w-icon"]){font-family:var(--uno-serif)!important}

/* Thought header: themes as one quiet line (was coloured pills with a tag emoji) */
.theme-badges{display:block;margin-top:14px;font:500 14px/1.5 var(--uno-sans);color:var(--black-50)}
.theme-badge{display:inline;padding:0;background:none;border:0;border-radius:0;font:inherit;color:inherit}
.theme-badge+.theme-badge::before{content:" · "}

/* "Neu" / "Aktualisiert" in the related cards: plain purple text, no pill */
.t-badge{display:inline;padding:0;margin:0;background:none;border-radius:0;font-weight:600;color:var(--purple-hover)}
.t-badge::after{content:" · ";font-weight:400;color:var(--black-50)}

/* Editor's notes and reading tips: margin notes – hairline above, smaller text, no tinted box, no side bar */
aside.ed-note,aside.t-related,aside.werkstatt-present-thread{margin:36px 0;padding:18px 0 0;border:0;border-top:var(--uno-hair);border-radius:0;
  background:none;max-width:62ch;font:400 16px/1.7 var(--uno-sans);color:var(--black-70)}
aside.ed-note>strong:first-child,aside.t-related>strong:first-child{display:block;margin-bottom:4px;font-weight:500;font-size:14px;color:var(--black-50)}
aside.ed-note a,aside.t-related a,aside.werkstatt-present-thread a{color:var(--purple-hover)}
aside.t-related ul{margin:6px 0 0;padding-left:20px}
aside.werkstatt-present-thread h2,aside.werkstatt-present-thread h3{font-family:var(--uno-serif);font-weight:400;color:var(--black)}

/* Name/translation tables inside Thoughts */
.name-table{overflow-x:auto;margin:18px 0 26px}
.name-table table{width:100%;min-width:520px;border-collapse:collapse;font:400 16px/1.5 var(--uno-sans);color:var(--black-70)}
.name-table th{text-align:left;padding:8px 14px 8px 0;font-weight:500;color:var(--black);border-bottom:1px solid var(--black-50)}
.name-table td{padding:8px 14px 8px 0;border-bottom:var(--uno-hair);vertical-align:top}

/* "Drei Wege" after each Thought: question with circle rows, three links as a plain list */
.uno-connect{max-width:760px;margin:56px auto 8px;padding:0 20px;box-sizing:border-box;font-family:var(--uno-sans);color:var(--black-70)}
.uno-connect *{box-sizing:border-box}
.uno-connect .uc-box{margin:0 0 40px;padding:28px 0 0;border-top:var(--uno-hair)}
.uno-connect .uc-eyebrow{display:block;margin:0 0 8px;font:500 15px/1.4 var(--uno-sans);color:var(--black-50)}
.uno-connect .uc-q{margin:0 0 12px;font:400 22px/1.45 var(--uno-serif);color:var(--black)}
.uno-connect .uc-opts{display:grid;gap:2px}
.uno-connect .uc-opt{position:relative;display:block;width:100%;margin:0;padding:9px 0 9px 34px;border:0;background:none;text-align:left;
  font:400 17px/1.5 var(--uno-sans);color:var(--black-70);cursor:pointer}
.uno-connect .uc-opt::before,.uno-quiet-choice::before{content:"";position:absolute;left:2px;top:13px;width:16px;height:16px;box-sizing:border-box;
  border:1.5px solid var(--black-50);border-radius:50%}
.uno-connect .uc-opt:hover{color:var(--black)}.uno-connect .uc-opt:hover::before{border-color:var(--purple-hover)}
.uno-connect .uc-opt[aria-pressed=true]{color:var(--black)}
.uno-connect .uc-opt[aria-pressed=true]::before{border-color:var(--purple-hover);background:var(--purple-hover);box-shadow:inset 0 0 0 3px #fff}
.uno-connect .uc-fb{margin:12px 0 0 34px;font-size:16px;line-height:1.6;color:var(--black-70)}
.uno-connect a{color:var(--purple-hover)}
.uno-connect .uc-links{list-style:none;margin:0;padding:0;border-top:var(--uno-hair)}
.uno-connect .uc-links li{border-bottom:var(--uno-hair)}
.uno-connect .uc-link{display:block;padding:16px 0;text-decoration:none;color:var(--black)}
.uno-connect .uc-kind{display:block;margin-bottom:2px;font:500 14px/1.4 var(--uno-sans);color:var(--black-50)}
.uno-connect .uc-title{display:block;font:400 18px/1.45 var(--uno-serif)}
.uno-connect .uc-title::after{content:" →";color:var(--purple-hover)}
.uno-connect .uc-link:hover .uc-title{color:var(--purple-hover)}
.uno-connect .uc-opt:focus-visible,.uno-connect .uc-link:focus-visible,.uno-ss-box a:focus-visible,.lr-quiz-teaser a:focus-visible{outline:2px solid var(--purple-hover);outline-offset:3px}

/* SafeSpace pointer on selected Thoughts: one line between hairlines (was a dark slab) */
.uno-ss-box{max-width:760px;margin:40px auto 8px;padding:0 20px;box-sizing:border-box;font-family:var(--uno-sans)}
.uno-ss-box a{display:block;padding:18px 0;border-top:var(--uno-hair);border-bottom:var(--uno-hair);text-decoration:none;color:var(--black)}
.uno-ss-box .k{display:block;font:500 14px/1.4 var(--uno-sans);color:var(--black-50)}
.uno-ss-box .t{font:400 19px/1.45 var(--uno-serif)}
.uno-ss-box a:hover .t{color:var(--purple-hover)}

/* /quiz/ pointer to Leben & Recht */
.lr-quiz-teaser .lr-qt-box{max-width:760px;padding:28px 0;border-top:var(--uno-hair);border-bottom:var(--uno-hair);font-family:var(--uno-sans)}
.lr-quiz-teaser .lr-qt-k{display:block;margin-bottom:6px;font:500 15px/1.4 var(--uno-sans);color:var(--black-50)}
.lr-quiz-teaser .lr-qt-t{margin:0 0 8px;font:400 clamp(22px,3vw,28px)/1.3 var(--uno-serif);color:var(--black)}
.lr-quiz-teaser .lr-qt-x{margin:0 0 12px;font-size:18px;line-height:1.6;color:var(--black-70)}
.lr-quiz-teaser .lr-qt-a{font:500 17px/1.4 var(--uno-sans);color:var(--purple-hover);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* Language switch in the light header (home, about, archive, stories): plain DE · EN · RU · UK like the classic navbar */
.site-header .lang-switch{display:inline-flex;gap:2px;padding:0;border:0;border-radius:0;background:none}
.site-header .lang-btn,.site-header .lang-out{display:inline-block;min-width:0;margin:0;padding:6px 7px;border:0;border-radius:0;background:none;box-shadow:none;
  font:500 15px/1 var(--uno-sans);color:var(--black);text-decoration:none;cursor:pointer}
.site-header .lang-btn:hover,.site-header .lang-out:hover{color:var(--purple-hover)}
.site-header .lang-btn[aria-pressed="true"],.site-header .lang-btn[aria-current]{background:none;color:var(--purple-hover);font-weight:600}
.site-header .lang-btn:focus-visible,.site-header .lang-out:focus-visible{outline:2px solid var(--purple-hover);outline-offset:2px}