/* Latimp.net's components on the tokens in tokens.css. Written by `python -I design/design-system/gen/theme.py` from
   design/design-system/project/components/bundle.css: change them there, run the command, then publish the design system. */

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--ink); font: 400 17px/1.55 var(--font-sans); background: var(--paper); }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-deep); text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.nav :focus-visible, .hall :focus-visible, .site-foot :focus-visible { outline-color: var(--focus-on-night); }
img { max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; color: var(--ink); text-wrap: balance; letter-spacing: -.005em; }
.wrap { max-width: var(--layout-wrap); margin: 0 auto; padding-inline: var(--space-4); }
.num { font-variant-numeric: tabular-nums; }
.sr, .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip:focus { position: fixed; left: var(--space-3); top: var(--space-3); width: auto; height: auto; clip: auto; z-index: 100; background: var(--card); color: var(--blue); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
@media (prefers-reduced-motion: no-preference) {
  .shelf-tile, .poster .cover, .cta, .btn-line { transition: transform .15s, background-color .15s, box-shadow .15s; }
}

/* Kinds: the colour of a kind of content, shown only as a dot before its name */
[data-kind="s"] { --kind: var(--kind-series); --tint: var(--tint-series); }
[data-kind="d"] { --kind: var(--kind-docs); --tint: var(--tint-docs); }
[data-kind="c"] { --kind: var(--kind-books); --tint: var(--tint-books); }
[data-kind="t"] { --kind: var(--kind-radio); --tint: var(--tint-radio); }
[data-kind="b"] { --kind: var(--kind-blogs); --tint: var(--tint-blogs); }
[data-kind="u"] { --kind: var(--kind-useful); --tint: var(--tint-useful); }
[data-kind="v"] { --kind: var(--kind-video); --tint: var(--tint-video); }
:is(.nav, .hall) [data-kind="s"] { --kind: var(--kind-series-on-night); }
:is(.nav, .hall) [data-kind="d"] { --kind: var(--kind-docs-on-night); }
:is(.nav, .hall) [data-kind="c"] { --kind: var(--kind-books-on-night); }
:is(.nav, .hall) [data-kind="t"] { --kind: var(--kind-radio-on-night); }
:is(.nav, .hall) [data-kind="b"] { --kind: var(--kind-blogs-on-night); }
:is(.nav, .hall) [data-kind="u"] { --kind: var(--kind-useful-on-night); }
:is(.nav, .hall) [data-kind="v"] { --kind: var(--kind-video-on-night); }
.dot { display: inline-flex; align-items: center; }
.dot::before, .kick[data-kind]::before, .page-head[data-kind] .kick::before, .sec-chip::before, .card[data-kind] > .card-head h2::before,
.path::before, .pill[data-kind]::before, .nav [data-kind] > a::before, .shelf-tile .lbl::before, .tile span::before {
  content: ""; display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--kind, var(--muted)); margin-right: var(--space-2); transform: translateY(-1px); }

/* Header: logo, search, account; then the menu bar on night */
.top { background: var(--card); border-bottom: 1px solid var(--rule); }
.top .wrap { display: flex; align-items: center; gap: var(--space-4); padding-block: var(--space-2); }
.logo img { display: block; height: 44px; width: auto; }
/* The logo's dark version, and the Zi/Noapte switch (a sun in the dark theme, a moon in the light one). */
.logo .on-dark { display: none; }
:root[data-theme="dark"] .logo .on-light { display: none; }
:root[data-theme="dark"] .logo .on-dark { display: block; }
.theme-btn { flex: none; width: var(--tap-min); height: var(--tap-min); display: grid; place-items: center; padding: 0; color: var(--ink); background: var(--card); border: 1px solid var(--rule); border-radius: 50%; cursor: pointer; }
.theme-btn:hover { background: var(--paper-2); }
.theme-btn[hidden] { display: none; }
.theme-btn svg { width: 20px; height: 20px; fill: currentColor; }
.theme-btn .sun, .theme-btn[aria-pressed="true"] .moon { display: none; }
.theme-btn[aria-pressed="true"] .sun { display: block; }
.account { display: flex; align-items: center; gap: var(--space-2); }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--night); color: var(--lamp); font: 700 14px var(--font-sans); }
.who { font: 600 15px var(--font-sans); color: var(--ink); }
.menu-btn { display: none; min-height: var(--tap-min); font: 600 15px var(--font-sans); color: var(--ink); background: var(--paper-2); border: 0; border-radius: var(--radius-md); padding: 0 var(--space-3); cursor: pointer; }

.nav { background: var(--night); border-bottom: 1px solid var(--night-2); }
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav > .wrap > ul { display: flex; flex-wrap: wrap; }
.nav li { position: relative; }
.nav a { display: flex; align-items: center; min-height: 44px; color: var(--on-night); font: 600 15px var(--font-sans); padding: 0 var(--space-3); border-bottom: 3px solid transparent; border-top: 3px solid transparent; white-space: nowrap; }
.nav a:hover { color: var(--on-night); background: var(--night-2); text-decoration: none; }
.nav a.on, .nav a[aria-current="page"] { border-bottom-color: var(--lamp); }
.nav .has > a::after { content: ""; margin-left: 6px; border: 4px solid transparent; border-top-color: currentColor; transform: translateY(2px); }
.nav .drop { display: none; position: absolute; left: 0; top: 100%; min-width: 270px; background: var(--card); border-radius: 0 0 var(--radius-lg) var(--radius-lg); box-shadow: var(--shadow-lg); padding: 6px; z-index: 30; }
.nav .drop a { min-height: 40px; color: var(--ink); font-weight: 400; border: 0; border-radius: var(--radius-md); padding: 0 var(--space-3); white-space: normal; justify-content: space-between; gap: var(--space-3); }
.nav .drop a small { color: var(--muted); font-size: 14px; }
.nav .drop a:hover { color: var(--ink); background: var(--paper-2); }
.nav .has:hover > .drop, .nav .has:focus-within > .drop, .nav .has.open > .drop { display: block; }

/* Search: one pill, the button inside it; suggestions float under it */
.search { position: relative; display: flex; align-items: center; background: var(--card); border: 1px solid var(--field-line); border-radius: var(--radius-full); padding: 3px 3px 3px var(--space-4); }
.search:focus-within { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 16px; padding: 6px var(--space-1); color: var(--ink); }
.search input::placeholder { color: var(--muted); opacity: 1; }
.search input:focus { outline: none; }
.search button { min-height: 36px; font: 600 15px var(--font-sans); background: var(--lamp); color: var(--on-lamp); border: 0; border-radius: var(--radius-full); padding: 0 var(--space-5); cursor: pointer; }
.search button:hover { background: var(--lamp-deep); }
.top .search { flex: 1; max-width: 460px; margin-left: auto; }
.suggest { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 50; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 6px; text-align: left; }
.suggest a { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); color: var(--ink); }
.suggest a:hover, .suggest a:focus, .suggest a[aria-selected="true"] { background: var(--paper-2); color: var(--ink); text-decoration: none; }
.suggest .s-title { display: block; font: 600 16px/1.35 var(--font-sans); }
.suggest .s-path { display: flex; align-items: center; font-size: 14px; color: var(--muted); }
.suggest .s-all { color: var(--blue); font: 600 15px var(--font-sans); border-top: 1px solid var(--line); border-radius: 0 0 var(--radius-md) var(--radius-md); margin-top: var(--space-1); }
mark { background: var(--lamp-soft); color: inherit; border-radius: 2px; padding: 0 1px; }

/* Page frame */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--layout-side); gap: var(--space-8); padding-block: var(--space-6) var(--space-12); align-items: start; }
.main { min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.side { display: flex; flex-direction: column; gap: var(--space-5); position: sticky; top: var(--space-4); }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; color: var(--muted); }
.crumbs a { color: var(--ink-soft); }

/* The hall: the homepage's night band, lit by the lamp */
.hall { position: relative; color: var(--on-night); background-color: var(--night);
  background-image: radial-gradient(ellipse 60% 90% at 12% -10%, color-mix(in srgb, var(--lamp) 28%, transparent), transparent 70%),
                    radial-gradient(ellipse 50% 80% at 100% 110%, color-mix(in srgb, var(--blue) 30%, transparent), transparent 70%); }
.hall .wrap { display: grid; gap: var(--space-4); padding-block: var(--space-8); }
.kicker { justify-self: start; font: 700 12px/16px var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--lamp); }
.hall h1 { margin: 0; color: var(--on-night); font-size: 42px; line-height: 48px; letter-spacing: -.01em; max-width: 26ch; }
.hall .search { max-width: 660px; border-color: transparent; padding: 4px 4px 4px var(--space-5); }
.hall .search input { font-size: 17px; padding-block: 10px; }
.hall .search button { min-height: 44px; font-size: 15px; padding: 0 var(--space-6); }
.shelves { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-3); }
.shelf-tile { display: grid; justify-items: center; align-content: start; gap: 2px; text-align: center; color: var(--on-night); background: color-mix(in srgb, var(--on-night) 6%, transparent); border: 1px solid color-mix(in srgb, var(--on-night) 16%, transparent); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-2); }
.shelf-tile:hover { color: var(--on-night); text-decoration: none; background: color-mix(in srgb, var(--on-night) 12%, transparent); transform: translateY(-2px); }
.shelf-tile .lbl { display: inline-flex; align-items: center; font: 700 12px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: var(--on-night-muted); }
.shelf-tile .lbl::before { margin-right: 6px; }
.shelf-tile strong { font: 600 28px/1.15 var(--font-display); color: var(--on-night); }
.shelf-tile small { font-size: 14px; line-height: 1.3; color: var(--on-night-muted); }
.hall .stats { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); color: var(--on-night-muted); font-size: 15px; }
.hall .stats b { color: var(--on-night); font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) 0; font-size: 15px; }
.chips > span { color: var(--on-night-muted); margin-right: var(--space-2); }
.chips a { color: var(--on-night); }
.chips a + a::before { content: "·"; display: inline-block; margin: 0 10px; color: var(--on-night-muted); }

/* Catalogue cards: the kind's dot before the heading, hairlines between rows */
.card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; }
.card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-4); padding: var(--space-4) var(--space-5) var(--space-3); border-bottom: 1px solid var(--rule); }
.card-head h2 { display: flex; align-items: center; flex: 1 1 240px; min-width: 0; margin: 0; font-size: 20px; line-height: 26px; }
.card-head h2 a { color: var(--ink); }
.card-head .count { color: var(--muted); font-size: 14px; }
.card-head .more { font: 600 15px var(--font-sans); }
.row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; padding: var(--space-3) var(--space-5); border-top: 1px solid var(--line); }
.row:first-child, .card-head + .row { border-top: 0; }
.row:hover { background: var(--row-hover); }
.row .what { display: grid; gap: 2px; min-width: 0; }
.row .what > a { font: 600 16px/1.35 var(--font-sans); color: var(--blue); }
.row .what > a:hover { color: var(--blue-deep); }
.row .by { font-size: 15px; color: var(--ink-soft); }
.row .desc, .row .latest { font-size: 14px; color: var(--muted); }
.row .latest { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .latest a { color: var(--ink-soft); }
.tally { min-width: 76px; text-align: right; line-height: 1.2; }
.tally b { display: block; font: 600 16px var(--font-sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.tally small { font-size: 14px; color: var(--muted); }
.mobile-tally { display: none; font-size: 14px; color: var(--muted); }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--space-3); font-size: 14px; color: var(--muted); }
.meta > span + span::before { content: "·"; margin-right: var(--space-3); }
.empty { margin: 0; padding: var(--space-5); color: var(--muted); }
.show-all { display: none; width: 100%; min-height: var(--tap-min); font: 600 15px var(--font-sans); color: var(--blue); background: var(--row-hover); border: 0; border-top: 1px solid var(--line); padding: 0 var(--space-5); cursor: pointer; text-align: left; }

/* Cover strips: series and books 2:3, videos 16:9 */
.posters { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-4); padding: var(--space-4) var(--space-5) var(--space-5); }
.posters.wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.posters.wide .cover { aspect-ratio: 16 / 9; }
.poster { display: grid; align-content: start; gap: 6px; min-width: 0; color: var(--ink); }
.poster:hover { color: var(--ink); text-decoration: none; }
.poster:hover .ptitle { color: var(--blue); }
.poster:hover .cover { box-shadow: 0 0 0 2px var(--kind, var(--blue)), var(--shadow-md); }
.poster .meta { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cover { position: relative; display: block; aspect-ratio: 2 / 3; border-radius: var(--radius-md); overflow: hidden; background: var(--night-2); box-shadow: var(--shadow-sm); }
.cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cover .ph { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--space-3) 10px 30px; text-align: center; color: var(--on-night); font: 600 18px/1.2 var(--font-display); text-wrap: balance; overflow-wrap: anywhere; }
.cover .ep { position: absolute; left: 6px; bottom: 6px; background: color-mix(in srgb, var(--night) 90%, transparent); color: var(--on-night); font: 700 12px/16px var(--font-sans); padding: 2px 7px; border-radius: var(--radius-sm); }
.ptitle { font: 600 15px/1.3 var(--font-sans); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Section pages */
.page-head { display: grid; gap: 6px; }
.page-head .kick, .kick { display: flex; align-items: center; font: 700 12px/16px var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.page-head h1 { margin: 0; font-size: 36px; line-height: 42px; }
.page-head p { margin: 0; color: var(--ink-soft); }
.sec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--space-3); padding: var(--space-4) var(--space-5) var(--space-5); }
.sec-card { display: block; padding: var(--space-3); border: 1px solid var(--rule); border-radius: var(--radius-md); color: var(--ink); }
.sec-card:hover { color: var(--ink); text-decoration: none; border-color: var(--kind, var(--blue)); background: var(--row-hover); }
.sec-card b { display: block; font: 600 16px/1.3 var(--font-sans); color: var(--blue); }
.sec-card small { display: block; font-size: 14px; color: var(--muted); }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--line); font-size: 15px; color: var(--muted); }
.filters label { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
select, .filters select { min-height: var(--pill-min); font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--field-line); border-radius: var(--radius-md); padding: 0 var(--space-2); }
.pill { display: inline-flex; align-items: center; min-height: var(--pill-min); font: 600 15px var(--font-sans); color: var(--ink-soft); background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-full); padding: 0 14px; cursor: pointer; }
.pill:hover { color: var(--ink); text-decoration: none; border-color: var(--field-line); }
.pill[aria-pressed="true"], .pill.on { background: var(--ink); color: var(--card); border-color: var(--ink); }
.pill small { margin-left: 6px; font-size: 14px; font-weight: 400; opacity: .8; }
.tabs-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.az { display: flex; flex-wrap: wrap; gap: 2px; padding: 10px var(--space-4); border-bottom: 1px solid var(--line); }
.az button { width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: var(--ink); font: 600 16px var(--font-display); cursor: pointer; }
.az button:hover:not(:disabled) { background: var(--paper-2); }
.az button[aria-pressed="true"] { background: var(--ink); color: var(--card); }
.az button:disabled { color: var(--muted); opacity: .45; cursor: default; }
.authors { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); column-gap: var(--space-6); padding: var(--space-2) var(--space-5) var(--space-4); }
.author-chip { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: var(--space-2) 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--ink); }
.author-chip small { font-size: 14px; color: var(--muted); }
.author-chip:hover { color: var(--blue); text-decoration: none; }
.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: var(--space-4); border-top: 1px solid var(--line); }
.pager a, .pager span { min-width: var(--tap-min); height: var(--tap-min); display: grid; place-items: center; padding: 0 var(--space-2); border: 1px solid var(--rule); border-radius: var(--radius-md); font-weight: 600; color: var(--ink); }
.pager a:hover { border-color: var(--field-line); background: var(--row-hover); text-decoration: none; }
.pager .on, .pager [aria-current="page"] { background: var(--ink); color: var(--card); border-color: var(--ink); }
.pager span.gap { border: 0; }

/* Buttons: one lamp action per view, one outlined secondary */
.cta, .btn-line, .more-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; font: 600 15px var(--font-sans); border-radius: var(--radius-full); padding: 0 var(--space-5); cursor: pointer; text-decoration: none; }
.cta { color: var(--on-lamp); background: var(--lamp); border: 0; }
.cta:hover { color: var(--on-lamp); background: var(--lamp-deep); text-decoration: none; }
.btn-line, .more-btn { color: var(--ink); background: var(--card); border: 1.5px solid var(--ink-soft); }
.btn-line:hover, .more-btn:hover { color: var(--ink); background: var(--paper-2); text-decoration: none; }
.cta svg, .btn-line svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.cta[disabled], .btn-line[disabled] { opacity: .5; cursor: not-allowed; }
.more-wrap { display: grid; padding: var(--space-4); border-top: 1px solid var(--line); }
.more-btn { justify-self: center; }

/* Post pages */
.article-head { display: grid; gap: var(--space-2); }
.article-head h1 { margin: 0; font-size: 36px; line-height: 42px; overflow-wrap: anywhere; }
.byline { margin: -2px 0 0; font: italic 400 20px/28px var(--font-display); color: var(--ink-soft); }
.byline a { color: var(--ink); font-style: normal; font-weight: 600; }
.sec-chip { justify-self: start; display: inline-flex; align-items: center; font: 700 12px/16px var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); background: var(--tint, var(--tint-none)); border-radius: var(--radius-full); padding: 6px var(--space-3); }
.head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); margin-top: var(--space-1); }
.actions .or { color: var(--muted); font-size: 15px; }
.stamp { display: inline-grid; justify-items: center; gap: 1px; padding: 4px 10px 3px; font: 700 12px/1.15 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; color: var(--stamp); border: 4px double currentColor; border-radius: 5px; transform: rotate(-4deg); }
.stamp b { font-size: 14px; letter-spacing: .08em; }
.hand-note { display: inline-block; margin-right: 6px; font: 700 12px/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--stamp); }
.scan-note { margin: 0; padding: var(--space-3) var(--space-4); background: var(--lamp-soft); border-radius: var(--radius-md); font-size: 15px; color: var(--ink); }
.scan-note b { display: block; font: 700 12px/16px var(--font-sans); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 2px; }
.fmt { font: 700 12px/1 var(--font-sans); letter-spacing: .04em; padding: 3px 5px; border-radius: var(--radius-sm); color: var(--file-other); border: 1px solid currentColor; }
.fmt.pdf { color: var(--file-pdf); } .fmt.doc, .fmt.docx { color: var(--file-doc); }

/* Files to download: one box ringed in lamp, a badge per file in its type's colour */
.files { background: var(--card); border-radius: var(--radius-lg); box-shadow: 0 0 0 2px var(--lamp), var(--shadow-md); overflow: hidden; scroll-margin-top: var(--space-4); }
.files-head { display: flex; align-items: center; gap: 10px; padding: var(--space-4) var(--space-5); background: var(--lamp-soft); }
.files-head h2 { margin: 0; font-size: 20px; line-height: 26px; }
.files-head svg { width: 22px; height: 22px; fill: var(--ink); flex: none; }
.file { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; padding: var(--space-4) var(--space-5); border-top: 1px solid var(--line); }
.files-head + .file { border-top: 0; }
.ftype { width: 44px; height: 54px; display: grid; align-content: end; justify-items: center; padding-bottom: 7px; border-radius: var(--radius-md) 14px var(--radius-md) var(--radius-md); font: 700 12px var(--font-sans); color: var(--on-file); background: var(--file-other); }
.t-pdf { background: var(--file-pdf); } .t-doc { background: var(--file-doc); } .t-ppt { background: var(--file-ppt); } .t-xls { background: var(--file-xls); } .t-zip { background: var(--file-zip); }
.fname { font-weight: 600; overflow-wrap: anywhere; }
.finfo { font-size: 14px; color: var(--muted); }
.fhint { font-size: 14px; color: var(--ink-soft); }

/* Reading: the text on a sheet; size and colours behind "Aa". Until a sheet is chosen it follows the site; a chosen
   sheet sets its own text, link and line colours, whatever the site's theme (all 5:1 or more on their sheet). */
.reader { position: relative; background: var(--sheet, var(--card)); color: var(--ink); border: 1px solid var(--sheet-rule, var(--rule)); border-radius: var(--radius-lg); }
.reader.day { --sheet: #fffdf8; --sheet-rule: #e2d9c6; --ink: #1a2740; --ink-soft: #4a5468; --muted: #5d6476; --blue: #1f55d6; --blue-deep: #163e9e; --rule: #e2d9c6; --line: #ebe3d3; }
.reader.sepia { --sheet: #f4ead5; --sheet-rule: #dccdae; --ink: #3b2f22; --ink-soft: #5a4a38; --muted: #6b5a45; --blue: #1f55d6; --blue-deep: #163e9e; --rule: #dccdae; --line: #dccdae; }
.reader.dark { --sheet: #141b26; --sheet-rule: #2a3446; --ink: #e1e5ec; --ink-soft: #bac2d0; --muted: #9aa3b5; --blue: #8fb0ff; --blue-deep: #b8ccff; --rule: #2a3446; --line: #2a3446; }
.reader-opts { position: absolute; top: 10px; right: 10px; z-index: 2; }
.reader-opts summary { list-style: none; cursor: pointer; width: 44px; height: 40px; display: grid; place-items: center; border: 1px solid var(--sheet-rule, var(--rule)); border-radius: var(--radius-md); background: var(--sheet, var(--card)); font: 600 17px var(--font-display); color: inherit; }
.reader-opts summary::-webkit-details-marker { display: none; }
.reader-opts[open] summary { background: var(--ink); color: var(--sheet, var(--card)); }
.reader-opts .opts { position: absolute; right: 0; top: calc(100% + 6px); display: grid; gap: var(--space-2); width: max-content; background: var(--sheet, var(--card)); border: 1px solid var(--sheet-rule, var(--rule)); border-radius: var(--radius-lg); padding: 10px; box-shadow: var(--shadow-lg); }
.seg { display: inline-flex; border: 1px solid var(--sheet-rule, var(--field-line)); border-radius: var(--radius-full); overflow: hidden; }
.seg button { flex: 1; min-height: var(--pill-min); font: 600 15px var(--font-sans); color: inherit; background: transparent; border: 0; padding: 0 var(--space-3); cursor: pointer; }
.seg button + button { border-left: 1px solid var(--sheet-rule, var(--rule)); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--sheet, var(--card)); }
.prose { max-width: 66ch; margin: 0 auto; padding: var(--space-8) 28px 30px; font: 400 var(--read-size, 19px)/1.75 var(--font-display); overflow-wrap: anywhere; }
.prose p { margin: 0 0 .85em; }
.prose > p:first-child { margin-bottom: 1.4em; text-align: center; font: 700 .7em/1.4 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; }
.prose.article > p:first-child { margin-bottom: .85em; text-align: left; font: inherit; letter-spacing: normal; text-transform: none; }
.prose table { display: block; overflow-x: auto; max-width: 100%; border-collapse: collapse; }
.parts { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-4) var(--space-5) var(--space-5); border-top: 1px solid var(--sheet-rule, var(--rule)); font-size: 15px; }
.parts button, .parts a { min-height: var(--pill-min); display: inline-grid; place-items: center; font: 600 15px var(--font-sans); color: inherit; background: transparent; border: 1px solid var(--sheet-rule, var(--rule)); border-radius: var(--radius-md); padding: 0 var(--space-3); cursor: pointer; }
.parts a:hover { text-decoration: none; border-color: currentColor; }
.parts button[aria-pressed="true"], .parts a[aria-current] { background: var(--ink); color: var(--sheet, var(--card)); border-color: transparent; }

/* Series: poster beside the title; episode tiles, only the newest filled */
.series-head { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.series-head .cover { border-radius: var(--radius-lg); }
.series-head.wide { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); }
.series-head.wide .cover { aspect-ratio: 16 / 9; }
.synopsis { margin: 0; max-width: 70ch; font: 400 18px/1.65 var(--font-display); color: var(--ink-soft); overflow-wrap: anywhere; }
.eps { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: var(--space-2); padding: var(--space-4) var(--space-5) var(--space-5); }
.eps.collapsible:not(.expanded) .extra { display: none; }
.ep-tile { position: relative; display: grid; place-items: end center; height: 52px; padding-bottom: 8px; border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--card); color: var(--ink); font: 700 16px/1 var(--font-sans); font-variant-numeric: tabular-nums; }
.ep-tile:hover { border-color: var(--kind-series); color: var(--kind-series); text-decoration: none; }
.ep-tile.last { background: var(--kind-series); border-color: var(--kind-series); color: var(--on-series); }
.ep-tile.dead { background: transparent; border-style: dashed; color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; cursor: default; }
.ep-tile.dead:hover { border-color: var(--rule); color: var(--muted); }
.ep-tile small { position: absolute; top: 5px; left: 6px; font: 700 12px/1 var(--font-sans); letter-spacing: .06em; }
.ep-tile .mirrors { position: absolute; top: 5px; right: 6px; font: 600 12px/1 var(--font-sans); color: var(--muted); }
.ep-tile.last .mirrors { color: inherit; }
.eps.pairs { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.ep-tile.pair { font-size: 15px; white-space: nowrap; }
.eps-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 0 var(--space-5) var(--space-4); font-size: 14px; color: var(--muted); }

/* Updates, additions, the administrators' box */
.timeline { list-style: none; margin: 0; padding: var(--space-1) var(--space-5) var(--space-3); }
.timeline li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--space-3); padding: 10px 0; border-top: 1px solid var(--line); font-size: 15px; }
.timeline li:first-child { border-top: 0; }
.timeline time { font-size: 14px; color: var(--muted); }
.add { padding: var(--space-3) var(--space-5) var(--space-4); border-top: 1px solid var(--line); }
.card-head + .add { border-top: 0; }
.add > .meta { margin-bottom: var(--space-1); }
.add-text { font-size: 17px; overflow-wrap: anywhere; }
.add-text p { margin: 0 0 .6em; }
.add summary { cursor: pointer; color: var(--blue); font: 600 15px var(--font-sans); }
.reply-box { display: grid; gap: 10px; padding: var(--space-4) var(--space-5) var(--space-5); }
.reply-box textarea, .field input, .field select, .field textarea { min-width: 0; min-height: 44px; font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--field-line); border-radius: var(--radius-md); padding: 10px var(--space-3); }
.reply-box textarea, .field textarea { min-height: 120px; resize: vertical; }
.reply-box textarea:focus, .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue), 0 0 0 4px var(--blue-soft); }
.reply-box .cta, .form .cta { justify-self: start; }

/* Sidebar */
.box { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5) var(--space-3); }
.box h3 { margin: 0 0 6px; padding-bottom: var(--space-2); font-size: 18px; line-height: 24px; border-bottom: 1px solid var(--rule); }
.mini { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: center; padding-block: var(--space-2); border-top: 1px solid var(--line); }
.box h3 + .mini { border-top: 0; }
.mini.ranked { grid-template-columns: 28px minmax(0, 1fr); }
.mini .rank { justify-self: start; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--lamp); color: var(--on-lamp); font: 700 14px/1 var(--font-sans); }
.mini a { font: 600 15px/1.35 var(--font-sans); color: var(--blue); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mini a:hover { color: var(--blue-deep); }
.mini small { font-size: 14px; color: var(--muted); }
.side-list { list-style: none; margin: 0; padding: 0; display: grid; }
.side-list a { display: flex; justify-content: space-between; gap: 10px; padding: var(--space-2) 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 15px; }
.side-list li:last-child a { border-bottom: 0; }
.side-list a small { font-size: 14px; color: var(--muted); }
.side-list a.on, .side-list a[aria-current] { font-weight: 700; color: var(--blue); }
.author-box { text-align: center; }
.author-box h3 { border-bottom: 0; padding-bottom: 0; margin-bottom: 2px; }
.author-box .meta { justify-content: center; margin: 0 0 var(--space-3); }

/* Video */
.vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-4); }
.vcard { display: grid; align-content: start; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; color: var(--ink); }
.vcard:hover { color: var(--ink); text-decoration: none; }
.vcard:hover .vtitle { color: var(--blue); }
.thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--night-2); overflow: hidden; }
.thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.play { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: color-mix(in srgb, var(--on-night) 94%, transparent); box-shadow: var(--shadow-sm); }
.play::after { content: ""; position: absolute; left: 21px; top: 16px; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent var(--night); }
.vbody { display: grid; gap: var(--space-1); padding: 10px var(--space-3) var(--space-3); }
.vtitle { font: 600 15px/1.3 var(--font-sans); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Footer */
.site-foot { background: var(--night); color: var(--on-night-muted); font-size: 15px; }
.site-foot .wrap { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-6); padding-block: var(--space-8); }
.site-foot h4 { margin: 0 0 var(--space-2); font: 600 18px/24px var(--font-display); color: var(--on-night); }
.site-foot a { color: var(--on-night); }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.site-foot .about img { display: block; height: 40px; width: auto; margin-bottom: 10px; }
.site-foot .about-text { margin: 0; max-width: 54ch; }
.site-foot .legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px var(--space-5); padding-top: var(--space-4); border-top: 1px solid color-mix(in srgb, var(--on-night) 15%, transparent); font-size: 14px; }
.site-foot .legal-links { display: flex; flex-wrap: wrap; gap: 6px var(--space-5); list-style: none; margin: 0; padding: 0; }
/* The consent banner (the Complianz plugin): its own variables, set from the tokens, so it reads as part of the
   site in both themes. Accept and refuse look the same: refusing is as easy as accepting. */
.cmplz-cookiebanner, #cmplz-manage-consent {
  --cmplz_banner_background_color: var(--card);
  --cmplz_banner_border_color: var(--rule);
  --cmplz_banner_border_width: 1px;
  --cmplz_banner_border_radius: var(--radius-lg);
  --cmplz_text_color: var(--ink);
  --cmplz_hyperlink_color: var(--blue);
  --cmplz_title_font_size: 18px;
  --cmplz_text_font_size: 15px;
  --cmplz_link_font_size: 14px;
  --cmplz_category_header_title_font_size: 15px;
  --cmplz_category_header_active_font_size: 13px;
  --cmplz_category_header_always_active_color: var(--ink-soft);
  --cmplz_category_body_font_size: 14px;
  --cmplz_button_font_size: 15px;
  --cmplz_button_border_radius: var(--radius-full);
  --cmplz_button_accept_background_color: var(--lamp);
  --cmplz_button_accept_border_color: var(--lamp);
  --cmplz_button_accept_text_color: var(--on-lamp);
  --cmplz_button_deny_background_color: var(--lamp);
  --cmplz_button_deny_border_color: var(--lamp);
  --cmplz_button_deny_text_color: var(--on-lamp);
  --cmplz_button_settings_background_color: var(--card);
  --cmplz_button_settings_border_color: var(--field-line);
  --cmplz_button_settings_text_color: var(--ink);
  --cmplz_slider_active_color: var(--blue);
  --cmplz_slider_inactive_color: var(--muted);
  --cmplz_slider_bullet_color: var(--card);
}
.cmplz-cookiebanner { font-family: var(--font-sans); }
/* One step more specific than Complianz's own rules, which load after the theme's */
.cmplz-cookiebanner .cmplz-header .cmplz-title { font: 600 18px/24px var(--font-display); }
.cmplz-cookiebanner .cmplz-buttons button.cmplz-btn { font-family: inherit; font-weight: 600; }
.cmplz-cookiebanner .cmplz-categories div.cmplz-category { background-color: var(--paper-2); }
/* "Setări cookie-uri": a button (it reopens the consent banner) that reads as the footer's links. */
.site-foot .consent-link { appearance: none; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: var(--on-night); cursor: pointer; }
.site-foot .consent-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Other pages */
.sheet { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: var(--space-6) 28px; }
.sheet h2 { margin: 1.3em 0 .4em; font-size: 20px; line-height: 26px; }
.sheet h2:first-child { margin-top: 0; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.tile { padding: var(--space-4) 10px; text-align: center; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg); }
.tile b { display: block; font: 600 28px/1.15 var(--font-display); color: var(--ink); }
.tile span { display: inline-flex; align-items: center; font-size: 14px; color: var(--muted); }
.faq details { padding: 14px var(--space-5); border-top: 1px solid var(--line); }
.faq .card-head + details { border-top: 0; }
.faq summary { display: flex; justify-content: space-between; gap: var(--space-3); list-style: none; cursor: pointer; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--blue); font: 600 20px/1 var(--font-sans); }
.faq details[open] summary::after { content: "–"; }
.faq p { margin: var(--space-2) 0 0; color: var(--ink-soft); }
.form { display: grid; gap: var(--space-4); padding: var(--space-5); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.field { display: grid; gap: 6px; }
.field label { font: 600 15px var(--font-sans); }
.form-ok { padding: var(--space-3) var(--space-4); background: var(--paper-2); border-radius: var(--radius-md); font-weight: 600; }
.big404 { justify-self: start; font: 600 120px/.85 var(--font-display); color: var(--lamp); }
.draft { justify-self: start; padding: 4px 10px; font: 700 12px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: var(--lamp-soft); border-radius: var(--radius-full); }

/* Search results */
.query-head { gap: 10px; }
.query-head .search { max-width: none; }
.query-head h1 { font-size: 28px; line-height: 34px; }
.interpret { margin: 0; font-size: 15px; color: var(--ink-soft); }
.try { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); }
.try button { min-height: var(--pill-min); font: inherit; color: var(--blue); background: var(--blue-soft); border: 0; border-radius: var(--radius-full); padding: 0 var(--space-3); cursor: pointer; }
.noresults { display: grid; gap: var(--space-4); padding: var(--space-6); }
.noresults h2 { margin: 0; font-size: 20px; line-height: 26px; }
.noresults ul { margin: 0; padding-left: 20px; color: var(--ink-soft); }
.hall-lede { margin: 0; color: var(--on-night-muted); }
.chips-list { display: grid; }
.chips-list .author-chip:last-child { border-bottom: 0; }
.related { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.related .row { border-top: 1px solid var(--line); }
.related .row:nth-child(odd) { border-right: 1px solid var(--line); }

/* Video pages and players */
.vgrid.compact { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); padding: var(--space-4) var(--space-5); }
.thumb.gone { display: grid; place-items: center; padding: var(--space-3); background: var(--paper-2); color: var(--muted); font-size: 14px; text-align: center; }
.video-gone { margin: 0; padding: var(--space-3) var(--space-4); background: var(--tint-video); border-radius: var(--radius-md); font-size: 15px; color: var(--ink-soft); }
.video-gone b { color: var(--ink); }
.video-head h1 { font-size: 28px; line-height: 34px; }
.vtext { padding: var(--space-5); font-size: 17px; color: var(--ink-soft); overflow-wrap: anywhere; }
.vtext p { margin: 0 0 .7em; }
.doc-text { margin: 0; max-width: none; padding: var(--space-5) var(--space-6); font-size: 18px; }
.player { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: var(--night); cursor: pointer; }
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player:hover { text-decoration: none; }
.prose .player { margin: 0 0 .85em; font: 400 15px/1.4 var(--font-sans); }
.player img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.player .play { width: 84px; height: 84px; margin: -42px 0 0 -42px; }
.player .play::after { left: 33px; top: 25px; border-width: 17px 0 17px 26px; }
.player:hover .play { background: var(--lamp); }
.yt-note { position: absolute; left: var(--space-3); right: var(--space-3); bottom: var(--space-3); padding: 10px var(--space-3); background: color-mix(in srgb, var(--night) 92%, transparent); color: var(--on-night); border-radius: var(--radius-lg); font-size: 15px; }

/* Legal pages and placeholders */
.legal-doc { counter-reset: sec; }
.legal-doc h2 { counter-increment: sec; scroll-margin-top: 60px; }
.legal-doc h2::before { content: counter(sec) ". "; color: var(--muted); }
.sheet table { display: block; overflow-x: auto; max-width: 100%; margin: 0 0 1em; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.sheet th, .sheet td { padding: var(--space-2) var(--space-3); text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.sheet th { font-weight: 600; border-bottom-color: var(--rule); }
.toc ol { display: grid; gap: 6px; margin: 0; padding-left: 22px; font-size: 15px; }
.todo { padding: 1px 6px; background: var(--lamp-soft); border: 1.5px dashed var(--lamp-deep); border-radius: var(--radius-md); color: var(--ink); font-size: .95em; }

@media (max-width: 980px) {
  .shelves { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .layout { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; }
  .site-foot .wrap { grid-template-columns: 1fr 1fr; }
  .site-foot .about { grid-column: 1 / -1; }
  .series-head { grid-template-columns: 150px minmax(0, 1fr); gap: var(--space-4); }
  .series-head.wide { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .top .wrap { flex-wrap: wrap; gap: 10px var(--space-3); }
  .logo img { height: 38px; }
  .top .search { order: 3; flex-basis: 100%; max-width: none; margin-left: 0; }
  .has-search .top .search { display: none; }
  .theme-btn, .account { margin-left: auto; }
  .theme-btn:not([hidden]) + .account { margin-left: 0; }
  .account .who { display: none; }
  .menu-btn { display: block; }
  .nav { display: none; }
  .nav.open { display: block; }
  .nav > .wrap > ul { flex-direction: column; padding-block: 6px; }
  .nav .drop { display: block; position: static; min-width: 0; padding: 0 0 6px var(--space-4); background: transparent; box-shadow: none; }
  .nav .drop a { color: var(--on-night-muted); }
  .nav .drop a small { color: var(--on-night-muted); }
  .nav .drop a:hover { color: var(--on-night); background: var(--night-2); }
  .hall .wrap { gap: var(--space-3); padding-block: var(--space-5); }
  .hall h1, .page-head h1, .article-head h1 { font-size: 28px; line-height: 34px; }
  .hall .chips { display: none; }
  .shelves { gap: var(--space-2); }
  .shelf-tile { padding: var(--space-2) var(--space-1); }
  .shelf-tile .lbl { white-space: normal; letter-spacing: .04em; line-height: 1.2; }
  .shelf-tile strong { font-size: 22px; }
  .shelf-tile small { display: none; }
  .card-head, .row, .filters { padding-inline: var(--space-4); }
  .posters { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 38%; gap: var(--space-3); padding-inline: var(--space-4); scroll-padding-inline: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .cover .ph { font-size: 15px; padding-inline: 6px; }
  .posters.wide { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow-x: visible; }
  .poster { scroll-snap-align: start; }
  .series-head { grid-template-columns: 112px minmax(0, 1fr); gap: var(--space-3); }
  .row { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .row .tally, .row .fmt-side, .row .latest { display: none; }
  .mobile-tally { display: block; }
  .collapsible:not(.expanded) .row.extra { display: none; }
  .collapsible:not(.expanded) + .show-all { display: block; }
  .tabs-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--space-4)); padding: 2px var(--space-4) 6px; }
  .tabs-row .pill { flex: none; white-space: nowrap; }
  .sec-grid { grid-template-columns: minmax(0, 1fr); padding-inline: var(--space-4); }
  .related { grid-template-columns: minmax(0, 1fr); }
  .related .row:nth-child(odd) { border-right: 0; }
  .vgrid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--space-3); }
  .prose { padding: 56px var(--space-4) var(--space-6); }
  .file { grid-template-columns: 46px minmax(0, 1fr); padding-inline: var(--space-4); }
  .file .cta { grid-column: 1 / -1; }
  .eps { grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); padding: var(--space-4); }
  .timeline li { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .vtitle { font-size: 14px; }
  .vbody { padding: var(--space-2) 10px 10px; }
  .vgrid .play { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
  .vgrid .play::after { left: 16px; top: 12px; border-width: 8px 0 8px 13px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .two { grid-template-columns: minmax(0, 1fr); }
  .sheet { padding: var(--space-5) var(--space-4); }
  .site-foot .wrap { grid-template-columns: 1fr; }
}