/* STEP 1 fonts. Self-hosted OFL subsets, axes narrowed
   (tools/subset_fonts.py), font-display:swap. Nothing here is preloaded except what _font_preloads() names. */
@font-face{font-family:'Noto Serif Display';font-style:normal;font-weight:500 700;font-display:swap;src:url(/css/site/fonts/s1/NotoSerifDisplay-normal-cyrillic-ext.s1.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Noto Serif Display';font-style:normal;font-weight:500 700;font-display:swap;src:url(/css/site/fonts/s1/NotoSerifDisplay-normal-cyrillic.s1.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Noto Serif Display';font-style:normal;font-weight:500 700;font-display:swap;src:url(/css/site/fonts/s1/NotoSerifDisplay-normal-latin-ext.s1.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Noto Serif Display';font-style:normal;font-weight:500 700;font-display:swap;src:url(/css/site/fonts/s1/NotoSerifDisplay-normal-latin.s1.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400 600;font-display:swap;src:url(/css/site/fonts/s1/SourceSerif4-normal-cyrillic-ext.s1.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400 600;font-display:swap;src:url(/css/site/fonts/s1/SourceSerif4-normal-cyrillic.s1.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400 600;font-display:swap;src:url(/css/site/fonts/s1/SourceSerif4-normal-latin-ext.s1.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400 600;font-display:swap;src:url(/css/site/fonts/s1/SourceSerif4-normal-latin.s1.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400 700;font-display:swap;src:url(/css/site/fonts/s1/InterTight-normal-cyrillic-ext.s1.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400 700;font-display:swap;src:url(/css/site/fonts/s1/InterTight-normal-cyrillic.s1.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400 700;font-display:swap;src:url(/css/site/fonts/s1/InterTight-normal-latin-ext.s1.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400 700;font-display:swap;src:url(/css/site/fonts/s1/InterTight-normal-latin.s1.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Noto Naskh Arabic';font-style:normal;font-weight:400 700;font-display:swap;src:url(/css/site/fonts/s1/NotoNaskhArabic-normal-arabic.s1.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC}
@font-face{font-family:'Noto Naskh Arabic';font-style:normal;font-weight:400 700;font-display:swap;src:url(/css/site/fonts/s1/NotoNaskhArabic-normal-latin-ext.s1.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Noto Naskh Arabic';font-style:normal;font-weight:400 700;font-display:swap;src:url(/css/site/fonts/s1/NotoNaskhArabic-normal-latin.s1.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:400 600;font-display:swap;src:url(/css/site/fonts/s1/SourceSerif4-italic-cyrillic-ext.s1.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:400 600;font-display:swap;src:url(/css/site/fonts/s1/SourceSerif4-italic-cyrillic.s1.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:400 600;font-display:swap;src:url(/css/site/fonts/s1/SourceSerif4-italic-latin-ext.s1.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:400 600;font-display:swap;src:url(/css/site/fonts/s1/SourceSerif4-italic-latin.s1.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* metric-matched fallbacks: the page lays out in these until the web font swaps in -> no reflow (CLS) */
@font-face{font-family:'Noto Serif Display Fallback';src:local('Times New Roman'),local('TimesNewRomanPSMT'),local('Liberation Serif'),local('Tinos');size-adjust:113.17%;ascent-override:94.46%;descent-override:25.89%;line-gap-override:0%}
@font-face{font-family:'Noto Serif Display Fallback A';src:local('Noto Serif'),local('NotoSerif');size-adjust:99.46%;ascent-override:107.48%;descent-override:29.46%;line-gap-override:0%}
@font-face{font-family:'Source Serif 4 Fallback';src:local('Times New Roman'),local('TimesNewRomanPSMT'),local('Liberation Serif'),local('Tinos');size-adjust:109.04%;ascent-override:95.01%;descent-override:30.72%;line-gap-override:0%}
@font-face{font-family:'Source Serif 4 Fallback A';src:local('Noto Serif'),local('NotoSerif');size-adjust:93.25%;ascent-override:111.1%;descent-override:35.93%;line-gap-override:0%}
@font-face{font-family:'Inter Tight Fallback';src:local('Arial'),local('ArialMT'),local('Liberation Sans'),local('Arimo');size-adjust:98.96%;ascent-override:97.9%;descent-override:24.38%;line-gap-override:0%}
@font-face{font-family:'Inter Tight Fallback A';src:local('Roboto'),local('Roboto-Regular');size-adjust:98.41%;ascent-override:98.44%;descent-override:24.51%;line-gap-override:0%}

/* Demo pages (Storefront = v2 simple home; Reader = v1 feed) + checkout + admin. */
:root {
  --bg: #F7F3EA; --surface: #FBF8F1; --card: #FFFCF7; --ink: #1C1A17; --muted: #5F584D; --rule: #E2DACB;
  --link: #1C1A17; --brand: #D6391F;
  --btn-bg: #111111; --btn-fg: #FBFAF7; --mark: rgba(17,17,17,.12);   /* Design 4 Oct 2026: CTAs ink, no gold; red = the one accent */
  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  --max: 1080px; color-scheme: light;
}
[data-theme="night"] { --bg: #14120F; --surface: #1C1A16; --card: #211E19; --ink: #EDE6D8; --muted: #ABA292; --rule: #34302A; --link: #EDE6D8; --btn-bg: #EDE6D8; --btn-fg: #14120F; --mark: rgba(237,230,216,.24); color-scheme: dark; }
[data-theme="mono"] { --bg: #FFFFFF; --surface: #F6F6F6; --card: #FFFFFF; --ink: #111111; --muted: #555555; --rule: #E4E4E4; --link: #111111; --btn-bg: #111111; --btn-fg: #FFFFFF; --brand: #111111; --bar-brand: #EDE6D8;
  --serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; }
:lang(ar) { --serif: 'Noto Naskh Arabic', 'Amiri', 'Times New Roman', serif; --sans: 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }   /* UPSELL §0: safety net against an iOS-widened layout viewport */
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.6 var(--serif); -webkit-font-smoothing: antialiased; padding-bottom: 76px; }
img { max-width: 100%; display: block; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.wrap { max-width: var(--max); margin: 0 auto; padding-inline: 24px; }
.wrap-narrow { max-width: 680px; margin: 0 auto; padding-inline: 16px; }
[dir="rtl"] .arr { display: inline-block; transform: scaleX(-1); }
.btn-ink { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 24px; border-radius: 0; border: 0; cursor: pointer;
  background: var(--btn-bg); color: var(--btn-fg); box-shadow: none; font: 600 15.5px/1 var(--sans); white-space: nowrap; }
.btn-ink:hover { text-decoration: underline; text-underline-offset: 3px; }
.btn-ink:hover .arr { text-decoration: none; }   /* Design: the underline stops before the gap + arrow. An underline set on the
   button would still run under the arrow (decorations propagate into flex items), so the label carries it instead: */
.btn-ink:hover:has(.lbl) { text-decoration: none; }
.btn-ink:hover .lbl { text-decoration: underline; text-underline-offset: 3px; }
.btn-ink[disabled] { opacity: .6; cursor: progress; }
.demo-cta .btn-ink { background: #FBFAF7; color: #111111; }   /* the demo bar is dark in every theme: the inverted ink button */

/* demo chrome (ink links in every theme, Design re-audit 3 Oct: no teal / blue) */
.demo-bar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 16px;
  background: #1C1A17; color: #EDE6D8; font: 14px/1.2 var(--sans); }
.demo-brand { color: #EDE6D8; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.demo-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bar-brand, var(--brand)); }   /* brand red #D6391F; Mono: paper #EDE6D8 on the dark bar; flat, no ring (Design re-audit 8) */
.segs { display: inline-flex; padding: 0; border: 1px solid rgba(237,230,216,.4); border-radius: 0; background: none; margin-inline: auto; }   /* Design 4 Oct (05:38): no pills; a thin rule, the current option filled */
.seg { color: #CFC6B5; padding: 6px 14px; border-radius: 0; font-weight: 600; }
.seg:hover { text-decoration: none; color: #fff; }
.seg[aria-current] { background: #EDE6D8; color: #1C1A17; }
.demo-exp { color: #ABA292; font-size: 13px; }
.demo-cta { position: fixed; inset-inline: 0; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px max(16px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgba(28,26,23,.94); backdrop-filter: blur(8px); color: #EDE6D8; font: 14px/1.2 var(--sans); }
.wm { font-weight: 600; letter-spacing: .02em; }
.wm::before { content: "●"; color: var(--bar-brand, var(--brand)); margin-inline-end: 8px; font-size: 10px; vertical-align: 2px; }
.wm-layer { position: fixed; inset: 0; pointer-events: none; z-index: 25; opacity: .05;
  /* onelang-1016: the word in the page language (demo.wm_mark) via ::before attr(), upper-cased here;
     same 320x200 tile, -24deg, Arial 700 22px as the old 'DEMO' SVG */
  display: grid; grid-template-columns: repeat(auto-fill, 320px); grid-auto-rows: 200px; overflow: hidden;
  font: 700 22px/1 Arial, sans-serif; color: #1C1A17; text-transform: uppercase; user-select: none; }
.wm-layer > i { place-self: center; transform: rotate(-24deg); white-space: nowrap; font-style: normal; }
.wm-layer > i::before { content: attr(data-wm-mark); }   /* QA note 3: no text node, so not in Ctrl+F / page text */
[data-theme="night"] .wm-layer { filter: invert(1); }
.cta-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.btn-tg { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px; border-radius: 0; border: 1px solid rgba(237,230,216,.35);
  color: #EDE6D8; font: 600 14.5px/1 var(--sans); white-space: nowrap; }
.btn-tg:hover { border-color: #EDE6D8;   /* re-audit 11 F6a-1: paper, not Telegram blue */ color: #fff; text-decoration: none; }
.tg-ico { width: 18px; height: 18px; border-radius: 50%; background: currentColor; flex: none;
  /* Design 4 Oct (06:06): the Telegram mark is ink, no blue anywhere: a currentColor disc (the button's paper text on
     the dark bar) with the plane cut out in the bar colour, i.e. inverted ink. The bar is dark in every theme, Night too. */
  -webkit-mask: none; box-shadow: none; position: relative; }
.tg-ico::after { content: ""; position: absolute; inset: 5px 4px 5px 5px; background: #1C1A17; clip-path: polygon(0 45%, 100% 0, 75% 100%, 45% 70%); }
@media (max-width: 560px) {
  .demo-bar { padding: 8px 12px; gap: 8px; }
  .demo-exp { display: none; }
  .segs { margin-inline: auto 0; }
  .seg { padding: 6px 11px; font-size: 13px; }
  .wm { font-size: 12px; max-width: 30%; }
  .demo-cta .btn-ink { height: 44px; padding: 0 16px; font-size: 14.5px; }
  .demo-cta:has(.cta-actions) .wm { display: none; }
  .cta-actions { flex: 1; }
  .cta-actions > a { flex: 1 1 auto; justify-content: center; height: 42px; padding: 0 12px; font-size: 14px; }
  body:has(.cta-actions) { padding-bottom: 124px; }
  html:not([style*="--bar-h"]) .site-head { position: relative; top: 0; }
}

/* site header */
/* F7: --bar-h = the demo bar's measured height (demo.js, ResizeObserver); without JS: 48px (the 1-row bar at 1280 is 47px), not sticky on phones */
.site-head { position: sticky; top: var(--bar-h, 48px); z-index: 20; background: var(--bg); border-bottom: 1px solid var(--rule); }
.head-row { height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.site-brand { display: flex; align-items: center; gap: 12px; color: var(--ink); font: 600 18px/1.1 var(--serif); min-width: 0; }
.site-brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-brand:hover { text-decoration: none; }
.av { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; }
.av-letter { display: grid; place-items: center; background: var(--btn-bg); color: var(--btn-fg); font: 700 16px var(--sans); }
.head-tools { display: flex; align-items: center; gap: 8px; flex: none; }   /* Design 9 Oct (AUDIT CSS-2): the brand gets the room */
.theme-btn { min-width: 44px; min-height: 44px; height: auto; padding: 0 12px; border-radius: 0; border: 1px solid var(--rule); background: var(--surface); color: var(--ink); font: 500 14px var(--sans); cursor: pointer; white-space: nowrap; }   /* Design 4 Oct 2026: a word, not ◐ */
/* re-audit 10 F3e: both words are in the HTML and CSS shows the right one from the first paint (the head script sets
   data-theme), so a late demo.js never leaves «Тёмная» on a Night page */
.theme-btn .l-light { display: none; }
[data-theme="night"] .theme-btn .l-dark { display: none; }
[data-theme="night"] .theme-btn .l-light { display: inline; }
.search input { height: 40px; width: min(260px, 42vw); padding: 0 12px; border: 1px solid var(--rule); border-radius: 0; background: var(--card);
  color: var(--ink); font: 15px var(--sans); }

/* storefront */
.hero { padding-top: 64px; padding-bottom: 48px; }
.kicker { margin: 0 0 16px; font: 14px/1.4 var(--sans); color: var(--muted); }
.hero h1 { margin: 0 0 20px; font: 500 clamp(36px, 5.2vw, 56px)/1.12 var(--serif); letter-spacing: -.01em; max-width: 17em; }
.voice { margin: 0 0 32px; max-width: 36em; font-size: 20px; line-height: 1.5; color: var(--muted); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin: 0 0 20px; }
.quiet { font: 15px/1.4 var(--sans); }
.meta { margin: 0; font: 14px/1.4 var(--sans); color: var(--muted); }
.shelf { padding-top: 40px; padding-bottom: 8px; position: relative; }
.shelf::before { content: ""; position: absolute; top: 0; inset-inline: 24px; border-top: 1px solid var(--rule); }
/* Design re-audit 2 (3 Oct): every demo section heading is sentence case, as written (no uppercase, no tracking) */
.shelf h2 { margin: 0 0 20px; font: 600 13px/1 var(--sans); color: var(--muted); }
:lang(ar) .shelf h2 { letter-spacing: 0; font-size: 15px; }
.count { font-weight: 400; opacity: .7; margin-inline-start: 6px; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--rule); border-radius: 0; color: var(--ink); overflow: hidden; }
.card:hover { text-decoration: none; border-color: #cbbfa8; }
.card-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-bottom: 1px solid var(--rule); }
.card-body { padding: 20px; }
.card time { font: 13px var(--sans); color: var(--muted); }
.card h3 { margin: 8px 0 8px; font: 600 19px/1.3 var(--serif); text-wrap: balance; overflow-wrap: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }   /* Design 9 Oct (CSS-5): card headings max 2 lines, the post page shows it whole; most-read list stays unclamped (NAKA 3 Oct) */
.card p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.g-item { position: relative; display: block; aspect-ratio: 1; border-radius: 0; overflow: hidden; background: var(--surface); }
.g-item > img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.g-item:hover > img { transform: scale(1.04); }
.vids .g-item { aspect-ratio: 16/10; }
.play { position: absolute; inset: 0; margin: auto; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 18px; }
.dur { position: absolute; inset-inline-end: 6px; bottom: 6px; font: 600 12px var(--sans); color: #fff; background: rgba(0,0,0,.6); padding: 2px 6px; border-radius: 0; font-variant-numeric: tabular-nums; }
.dur:empty { display: none; }   /* Design re-audit F2: no empty duration chip */
.links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.links li { display: flex; align-items: stretch; background: var(--card); border: 1px solid var(--rule); border-radius: 0; min-width: 0; }
.links li > a:first-child { flex: 1; display: flex; align-items: center; gap: 12px; padding: 12px; color: var(--ink); min-width: 0; }
.links li > a:first-child:hover { text-decoration: none; background: var(--surface); }
.links img, .l-fav { width: 52px; height: 52px; border-radius: 0; object-fit: cover; flex: none; }
.l-fav { display: grid; place-items: center; background: var(--surface); border: 1px solid var(--rule); font: 700 20px var(--sans); color: var(--muted); }
.l-body { display: flex; flex-direction: column; min-width: 0; }
.l-title { display: block; font: 600 15.5px/1.35 var(--serif); text-wrap: pretty; overflow-wrap: break-word; }
/* Design re-audit T1 (3 Oct): no clamp on titles at all - Chrome draws «…» under any -webkit-line-clamp, whatever
   text-overflow says. The server already sends a complete title; data-long only marks it as over the 90-char budget. */
.l-title[data-long] { display: block; overflow: visible; -webkit-line-clamp: unset; }
.hero .voice { white-space: normal; }
.site-foot .sig { color: var(--muted); font-size: 14px; }
.l-dom { font: 13px var(--sans); color: var(--muted); }
.l-src { display: grid; place-items: center; width: 40px; border-inline-start: 1px solid var(--rule); color: var(--muted); font-family: var(--sans); }
.pop-n { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 0; background: var(--btn-bg); color: var(--btn-fg); font: 700 14px var(--sans); }   /* Design 9 Oct (CSS-6): square, radius-0 standard */
.pop-n { background: var(--surface); color: var(--ink); border: 1px solid var(--rule); }
.topic-row { display: flex; flex-wrap: wrap; gap: 8px 20px; font: 16px var(--sans); }
@media (max-width: 800px) { .cards { grid-template-columns: 1fr; } .links { grid-template-columns: 1fr; } .gallery { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .wrap { padding-inline: 16px; } .shelf::before { inset-inline: 16px; } .hero { padding-top: 40px; } .voice { font-size: 18px; } .gallery { grid-template-columns: repeat(2, 1fr); } .search input { width: 38vw; } }
/* Design 9 Oct FIX-1 (t1008m-verify D2): ≤560px the demo name may take 2 lines; the search goes to row 2 only when
   a search box exists (Library demos). The demo header is not sticky on phones, so the extra row adds no sticky chrome. */
@media (max-width: 560px) {
  .site-head .head-row { height: auto; min-height: 60px; padding-block: 8px; }
  .site-head .site-brand { flex: 1 1 0; min-width: 0; }
  .site-head .site-brand span { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.15; }
  .site-head .head-row:has(.search) { flex-wrap: wrap; row-gap: 8px; }
  .site-head .head-row:has(.search) .site-brand { flex: 1 1 100%; }
  .site-head .head-tools:has(.search) { flex: 1 1 100%; }
  .site-head .head-tools .search { flex: 1; min-width: 0; }
  .site-head .head-tools .search input { width: 100%; }
}
.site-foot { margin-top: 56px; padding: 32px 0 24px; border-top: 1px solid var(--rule); font: 14px/1.5 var(--sans); color: var(--muted); }
.full-note { padding: 14px 16px; border-radius: 0; background: var(--surface); border: 1px dashed #cdbf9f; color: var(--ink); }

/* reader */
.feed { padding-top: 20px; }
.feed-intro { font: 14px/1.5 var(--sans); color: var(--muted); margin: 8px 0 12px; }
.day { position: sticky; top: 104px; z-index: 5; text-align: center; margin: 18px 0 10px; pointer-events: none; }
.day time { display: inline-block; padding: 4px 12px; border: 1px solid var(--rule); border-radius: 0; background: var(--card); color: var(--ink); font: 600 12.5px var(--sans); }   /* no pill: a square dateline on paper */
.post { background: var(--card); border: 1px solid var(--rule); border-radius: 0; padding: 16px 18px 12px; margin: 0 0 12px; box-shadow: none; scroll-margin-top: 120px; }   /* re-audit 11 F6a-3: no (blue-tinted) shadow */
.post:target { border-color: var(--rule); box-shadow: inset 3px 0 0 var(--brand); }   /* a start rule like tr-notice, no glow; Mono: ink (Design re-audit 8 F1) */
[dir="rtl"] .post:target { box-shadow: inset -3px 0 0 var(--brand); }   /* re-audit 9 F1-RTL: the start side is the right */
.text { font-size: 17px; line-height: 1.62; overflow-wrap: anywhere; }
.text a { word-break: break-word; }
.text blockquote { margin: 8px 0; padding-inline-start: 12px; border-inline-start: 3px solid var(--ink); color: var(--muted); }
.text pre, .text code { font: 14px/1.45 ui-monospace, Menlo, Consolas, monospace; background: var(--surface); border-radius: 0; }
.text pre { padding: 10px; overflow-x: auto; }
.photos { display: grid; gap: 4px; margin: -4px -6px 12px; border-radius: 0; overflow: hidden; }
.ph-n { grid-template-columns: 1fr 1fr; }
.photos img { width: 100%; height: 100%; max-height: 520px; object-fit: cover; }
.ph-n img { aspect-ratio: 1; }
.video { position: relative; display: block; margin: -4px -6px 12px; border-radius: 0; overflow: hidden; background: #000; min-height: 120px; }
.video > img { width: 100%; opacity: .85; }   /* legacy markup; video posters are .vf frames now (below) */
.vlabel { position: absolute; inset-inline-start: 0; bottom: 0; z-index: 1; color: var(--bg); font: 600 13px/1.25 var(--sans); background: var(--ink); padding: 5px 9px; border-radius: 0; }   /* Design 8 Oct: same ink box as .w-lbl (JS-off / 15 s fallback / Library view) */
.audio { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 0 0 12px; border-radius: 0; background: var(--surface); border: 1px solid var(--rule); color: var(--ink); }
.audio:hover { text-decoration: none; }
.preview { display: flex; gap: 12px; margin: 12px 0 4px; padding: 10px 12px; border-inline-start: 3px solid var(--link); background: var(--surface); border-radius: 0; color: var(--ink); font-family: var(--sans); font-size: 14px; }
.preview:hover { text-decoration: none; }
.preview img { width: 64px; height: 64px; object-fit: cover; border-radius: 0; flex: none; order: 2; }
.preview > span { display: flex; flex-direction: column; min-width: 0; }
.preview b { color: var(--link); }
.pv-t { font-weight: 600; }
.pv-d { color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fw, .poll { font: 14px var(--sans); color: var(--muted); margin: 0 0 8px; }
.post-foot { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--rule); font: 13px var(--sans); color: var(--muted); }
.post-foot a { font-weight: 600; margin-inline-end: auto; }
.no-results { text-align: center; color: var(--muted); font-family: var(--sans); padding: 32px 0; }
.post.hide, .day.hide { display: none; }
mark { background: var(--mark, rgba(17,17,17,.12)); color: inherit; border-radius: 0; }   /* neutral ink tint, not gold */

/* gone */
.v-gone { padding-bottom: 0; }
.gone { padding-top: 18vh; }
.gone h1 { font: 500 40px/1.15 var(--serif); margin: 0 0 16px; }

/* admin */
.v-admin { padding: 0; font-family: var(--sans); }
.admin { padding: 24px; }
.admin h1 { font: 600 26px var(--serif); }
.admin h2 { font: 600 16px var(--sans); margin-top: 32px; }
.tbl { overflow-x: auto; }
.admin table { border-collapse: collapse; font-size: 13.5px; min-width: 100%; background: var(--card); }
.admin th, .admin td { border: 1px solid var(--rule); padding: 6px 8px; text-align: start; white-space: nowrap; }
.admin th { background: var(--surface); }
/* translation queue: demo shows the latest N posts translated + upgrade note */
.tr-notice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-block: 12px; padding: 12px 16px; border: 1px solid var(--rule); border-inline-start: 3px solid var(--ink); border-radius: 0; background: var(--surface); font: 15px/1.5 var(--sans); }
.tr-notice p { margin: 0; min-width: 0; }
.tr-notice a { font-weight: 600; white-space: nowrap; }

/* --- demo features 2026-09-30 (Site Platform): interface-language switcher (demo bar; server-rendered by
   cs_platform/demo_langs.py, which carries its own CSS) + full-version teaser (footer; added by static/js/demo.js) --- */
.lang-sw { display: inline-flex; align-items: baseline; font: 600 12.5px/1.2 var(--sans); letter-spacing: .03em; }
.lang-opt { color: #CFC6B5; padding: 6px 2px; }
.lang-opt:hover { color: #EDE6D8; text-decoration: underline; }
.lang-opt[aria-current] { color: #EDE6D8; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.lang-sw .dot { color: #8C8474; padding: 0 5px; }
@media (max-width: 560px) { .lang-opt { font-size: 12px; } }
@media (min-width: 1100px) { .pop li:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* Video without a picture (Design 3 Oct 2026): text tile, no play glyph / icon / accent; same 16:10 slot */
.g-item.vt-item { border-radius: 0; background: none; }
.video.video--tile { background: none; border-radius: 0; min-height: 0; margin: 0 0 12px; }
.video--na .vlabel { background: var(--bg); color: var(--muted); }   /* not a button: no ink box */
.video--na .vna { display: block; margin-top: 4px; color: var(--muted); font: 13px/1.3 var(--sans); }   /* QA t1008e #1: t.me «Post not found» */
/* VIDEO_THUMBS (NAKA 8 Oct 2026, _pending/VIDEO_THUMBS.md): Telegram serves video posters at 320 px max. Never upscale
   past 1.25x (the <img> carries width/height = 1.25 x natural; CSS caps it to the slot); the rest of the slot is the same
   file blurred + darkened. clip-path, not overflow:hidden, and no min-height: either one stops the 16:9 box from growing
   to fit a portrait poster. */
.vf { position: relative; display: flex; align-items: center; justify-content: center; clip-path: inset(0); background: #141311; aspect-ratio: 16/9; width: 100%; box-sizing: border-box; border-radius: 0; }
.vf > .vf-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(22px) brightness(.5) saturate(1.15); transform: scale(1.15); pointer-events: none; }
.vf > .vf-fg { position: relative; display: block; max-width: 100%; max-height: 440px; height: auto; object-fit: contain; border-radius: 0; }
.g-item .vf { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
.card .vf > .vf-fg, .g-item .vf > .vf-fg { position: absolute; inset: 0; margin: auto; max-height: 100%; }   /* fixed slots never grow */
.vf--fill > .vf-fg { width: 100%; height: 100%; max-height: none; object-fit: cover; }   /* poster ~ slot shape (cards, Watch) */
@media (max-width: 560px) { .g-item .vf > .vf-fg { width: 100%; height: 100%; object-fit: cover; } }   /* phone Watch tiles <= 230 px: cover stays <= 1.28x */
/* QA 8 Oct 2026 / Design t1008c / QA#8: video on /p/<id>/ is click-to-load (demo_post + demo.js). With JS the poster
   (or text tile; 1px rule, radius 0) is itself the <button>, with the ink label «Смотреть видео 0:50» at its bottom start
   corner; the Telegram frame replaces it once it reports its height (scaled to 100 % width under 320 px). Without JS
   (or after a failed load): the «Смотреть в Telegram» link. No glyphs. */
.tg-embed { position: relative; margin: 0 0 12px; }
.tg-embed > .video { margin-bottom: 0; }
.tg-embed.is-js > .video { display: none; }
.tg-embed > .tg-play { position: relative; display: block; width: 100%; margin: 0; padding: 0; border: 1px solid var(--rule); border-radius: 0; background: var(--surface); color: inherit; font: inherit; text-align: start; cursor: pointer; overflow: hidden; }
.tg-embed > .tg-play > .vf { display: flex; }
.tg-embed > .tg-play > img { display: block; width: 100%; height: auto; }
.tg-embed > .tg-play--text { border: 0; }
.tg-embed > .tg-play:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.tg-embed > .tg-play:hover .w-lbl { text-decoration: underline; text-underline-offset: 3px; }
.tg-embed > .tg-play[aria-busy="true"] { cursor: progress; }
.tg-embed > .tg-play[aria-busy="true"] .w-lbl { background-color: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background-image: linear-gradient(var(--ink), var(--ink)); background-repeat: no-repeat; background-size: 40% 3px; background-position: -70% 100%; animation: tg-busy 1.2s linear infinite; }
@keyframes tg-busy { from { background-position: -70% 100%; } to { background-position: 170% 100%; } }
@media (prefers-reduced-motion: reduce) {
.tg-embed > .tg-play[aria-busy="true"] .w-lbl { animation: none; background-size: 100% 3px; background-position: 0 100%; }
}
.tg-embed > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; opacity: 0; pointer-events: none; background: transparent; }
.tg-embed.is-live { overflow: hidden; }
.tg-embed.is-live > iframe { position: static; display: block; max-width: none; opacity: 1; pointer-events: auto; }
.tg-embed.is-live > .video, .tg-embed.is-live > .tg-play { display: none; }
.tg-embed.is-failed > .tg-play { display: none; }
.tg-tile { margin: 0 0 12px; }   /* QA t1008e #1 + Design 8 Oct: a too-big video = the playable tile's look, linking to t.me */
.tg-tile > .video { margin: 0; min-height: 0; border: 1px solid var(--rule); background: var(--surface); color: inherit; }
.tg-tile > .video.video--tile { border: 0; background: none; }
.tg-tile > .video:hover { text-decoration: none; }
.tg-tile > .video:hover .vlabel { text-decoration: underline; text-underline-offset: 3px; }
.tg-tile > .video:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* QA#8: «Смотреть видео 0:50» on the /p/ poster and on Watch tiles: ink box, paper text, radius 0, no glyph */
.w-lbl { position: absolute; inset-inline-start: 0; bottom: 0; z-index: 1; max-width: 100%; box-sizing: border-box; padding: 5px 9px; border-radius: 0; background: var(--ink); color: var(--bg); font: 600 13px/1.25 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.g-item .w-lbl { padding: 3px 7px; font-size: 12px; }
/* QA#1: «Читать свежее» on Showcase scrolls to «Свежее» under the sticky bar + header */
#latest { scroll-margin-top: calc(var(--bar-h, 48px) + 72px); }
.vt{display:grid;place-items:center;width:100%;height:100%;aspect-ratio:16/10;box-sizing:border-box;background:#F1EEE7;border:1px solid var(--rule,#E2DACB);border-radius:0;box-shadow:none}
[data-theme=night] .vt{background:#1C1B19}   /* data-theme only: no prefers-color-scheme (paper page on a dark-mode phone) */
.vt-l{font:600 13px/1 'Inter Tight',var(--sans,system-ui),sans-serif;font-variant-numeric:tabular-nums;color:var(--ink,#1C1A17);letter-spacing:0}
[data-theme=night] .vt-l{color:#EDE6D8}   /* re-audit 4 V1: the label always takes the tile's theme */

/* =====================================================================
   BORDERS p1 (design/launch-review/BORDERS.md §2/§4, p1/css/borders-demo.css; shipped t1008g)
   Three rule tiers, all 1px: --hair (rows inside a block) / --frame (block edges) / --rule-strong (structure).
   --rule stays as an alias of --hair. No shadows, no radius, no new hues. Video poster backdrop untouched.
   ===================================================================== */
/* §A palette alignment: demo Paper on the approved paper #FBFAF7, ink #111; Night on #17140F */
:root { --bg: #FBFAF7; --surface: #F3F1EC; --card: #FFFFFF; --ink: #111111; --muted: #5E5B56; --link: #111111; }
[data-theme="night"] { --bg: #17140F; --surface: #201C16; --card: #201C16; --ink: #EAE4D8; --muted: #A69D8D; --link: #EAE4D8; --btn-bg: #EAE4D8; --btn-fg: #17140F; }
[data-theme="mono"] { --bg: #FFFFFF; --surface: #F6F6F6; --card: #FFFFFF; --ink: #111111; --muted: #555555; --link: #111111; }
/* §B rule tiers */
:root                { --hair: #CFCBC3; --frame: #BDB7AC; --rule-strong: #111111; --rule: var(--hair); }
[data-theme="night"] { --hair: #4A443B; --frame: #5A544B; --rule-strong: #A69D8D; --rule: var(--hair); }
[data-theme="mono"]  { --hair: #C4C4C4; --frame: #A6A6A6; --rule-strong: #111111; --rule: var(--hair); }
/* structure: strong */
.site-head { border-bottom: 1px solid var(--rule-strong); }
.shelf::before { border-top-color: var(--rule-strong); }
.site-foot { border-top-color: var(--rule-strong); }
/* block edges: frame */
.card, .links li, .post, .audio, .day time, .l-fav, .pop-n, .theme-btn, .search input, .admin th, .admin td, .vt { border-color: var(--frame); }
.tr-notice { border-color: var(--frame); border-inline-start-color: var(--ink); }
.post:target { border-color: var(--frame); }
.card:hover, .links li:hover { border-color: var(--ink); }          /* hover: the frame goes ink (no tan #cbbfa8) */
.full-note { border: 1px solid var(--frame); }                         /* was 1px dashed (gold) */
/* inside a block: hair */
.card-img { border-bottom-color: var(--hair); }
.l-src { border-inline-start-color: var(--hair); }
.post-foot { border-top-color: var(--hair); }
/* the bars are dark in every theme; on Night they need their own edge against the page */
.demo-bar { border-bottom: 1px solid #4A443B; }
.demo-cta { border-top: 1px solid #5A544B; }
/* end BORDERS p1 */
/* BORDERS follow-ups (borders-verify O1/O2):
   O1 the stuck site header (demo.js sets .is-stuck) drops to the hair tier in Paper and Mono, so it no longer doubles
      the strong shelf rule ~12px below it; Night keeps its strong edge. O2 the video poster button is a framed tile. */
:root:not([data-theme="night"]) .site-head.is-stuck { border-bottom-color: var(--hair); }
.tg-embed > .tg-play { border-color: var(--frame); }

/* ============================================================
   yourtimes · demo exit quiz («Удалить демо») — drop-in for static/css/demo.css (load after demo.css + upsell.css)
   Spec: data/outreach/exit_quiz/final_v1.md · copy: copy_final_v1.md + copy_final_v1_tr.md
   Uses live tokens: --bg --ink --muted --hair --frame --rule-strong --btn-bg --btn-fg --sans --serif (BORDERS tiers, live since t1008).
   Radius 0, no shadow, no icons, no pills, no red.
   ============================================================ */
:root{--xq-backdrop:rgba(17,17,17,.4);--xq-display:var(--display,"Noto Serif Display",var(--serif))}
:lang(ar){--xq-display:var(--serif)}
[data-theme="night"]{--xq-backdrop:rgba(17,17,17,.6)}

/* ---------- entry point: footer ---------- */
.xq-entry{margin:8px 0 0}
html:not(.xq-js) .xq-entry,html:not(.xq-js) .xq-menu-sep{display:none}   /* P3 FIX-3: JS off -> no dead 'Delete demo' entries; demo.js adds html.xq-js */
.xq-panel:focus:not(:focus-visible){outline:none}   /* P3 FIX-2: the panel takes focus on a plain-text tap (tabindex=-1) */
.xq-link{display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding:0;margin:0;background:none;border:0;
  font:500 14px/1.3 var(--sans);color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;cursor:pointer}
.xq-link:hover{text-decoration-thickness:2px}
.xq-link:focus-visible,.xq :focus-visible,.xq-menu :focus-visible,.xq-menu-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:0}

/* ---------- entry point: bar menu (the dark bar, all themes) ---------- */
.xq-menu-wrap{position:relative;margin-inline-start:auto}
.xq-menu-btn{min-height:44px;min-width:44px;padding:0 4px;background:none;border:0;color:#EDE6D8;font:600 13px/1 var(--sans);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.xq-menu-btn:focus-visible,.xq-menu :focus-visible{outline-color:#EDE6D8}
.xq-menu{position:absolute;inset-inline-end:0;top:calc(100% + 2px);z-index:60;min-width:240px;background:#1C1A17;
  border:1px solid #5A544B;padding:4px 0;list-style:none;margin:0}
.xq-menu[hidden]{display:none}
.xq-menu a,.xq-menu button{display:flex;align-items:center;min-height:44px;padding:0 16px;width:100%;background:none;border:0;
  color:#EDE6D8;font:500 14px/1.2 var(--sans);text-align:start;text-decoration:none;cursor:pointer}
.xq-menu a:hover{text-decoration:underline}
.xq-menu .xq-menu-sep{border-top:1px solid #4A443B;margin-top:4px;padding-top:4px}   /* hair rule above the last row */
.xq-menu .xq-menu-sep button{text-decoration:underline;text-underline-offset:3px}

/* ---------- sheet ---------- */
.xq{position:fixed;inset:0;z-index:2147483000}   /* above the bottom CTA bar and the watermark */
.xq[hidden]{display:none}
.xq-backdrop{position:absolute;inset:0;background:var(--xq-backdrop)}
.xq-panel{position:absolute;inset-inline:0;bottom:0;max-height:90vh;max-height:90dvh;display:flex;flex-direction:column;
  background:var(--bg);color:var(--ink);border-top:1px solid var(--rule-strong,var(--ink));border-radius:0;box-shadow:none}
@media (min-width:600px){
  .xq-panel{inset:auto;top:50%;left:50%;transform:translate(-50%,-50%);width:480px;max-height:min(90vh,820px);
    border:1px solid var(--frame);border-top:1px solid var(--rule-strong,var(--ink))}
}
.xq-scroll{overflow-y:auto;overscroll-behavior:contain;padding:22px 20px 8px;min-height:0}
@media (min-width:600px){.xq-scroll{padding:28px 28px 8px}}
.xq-title{font:600 25px/1.2 var(--xq-display);margin:0 0 8px;overflow-wrap:anywhere}
:lang(ar) .xq-title{font-size:23px;line-height:1.5}
.xq-line{font:400 16px/1.5 var(--serif);margin:0 0 22px;color:var(--ink)}
:lang(ar) .xq-line{line-height:1.8}
.xq-q{font:600 15px/1.35 var(--sans);margin:0 0 10px;color:var(--ink)}
:lang(ar) .xq-q{font-size:16px}
.xq-group{margin:0 0 24px}
.xq-group:focus{outline:none}

/* rows: Q1 (radio) and Q2 (checkbox) — full width, one column, 1px frame, collapsed edges */
.xq-rows{display:flex;flex-direction:column}
.xq-row{display:flex;align-items:center;min-height:44px;padding:10px 14px;border:1px solid var(--frame);margin-top:-1px;
  background:var(--bg);color:var(--ink);font:400 16px/1.3 var(--sans);text-align:start;cursor:pointer;
  -webkit-tap-highlight-color:transparent;position:relative}
:lang(ar) .xq-row{font-size:17px;line-height:1.5;padding-block:7px}
.xq-row:first-child{margin-top:0}
.xq-row:hover{border-color:var(--ink);z-index:1}
.xq-row[aria-checked="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink);z-index:1}   /* ink fill, paper text */
.xq-row:focus-visible{z-index:2}
.xq-note{font:400 14px/1.45 var(--sans);color:var(--ink);margin:8px 0 0;padding-inline-start:12px;border-inline-start:2px solid var(--ink)}
.xq-note[hidden]{display:none}
.xq-note a{color:inherit;text-decoration:underline;text-underline-offset:3px;padding-block:14px;margin-block:-14px}   /* mailto, no target; inline padding = 44px hit area without changing the line */
:lang(ar) .xq-count{text-align:left}

/* segments: Q4, Q3 — equal widths, one row */
.xq-segs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.xq-seg{display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px 8px;border:1px solid var(--frame);
  margin-inline-start:-1px;background:var(--bg);color:var(--ink);font:400 14.5px/1.25 var(--sans);text-align:center;
  overflow-wrap:anywhere;cursor:pointer;position:relative}
:lang(ar) .xq-seg{font-size:15.5px;line-height:1.45}
.xq-seg:first-child{margin-inline-start:0}
.xq-seg:hover{border-color:var(--ink);z-index:1}
.xq-seg[aria-checked="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink);z-index:1}
.xq-seg:focus-visible{z-index:2}

/* free text */
.xq-ta{display:block;width:100%;box-sizing:border-box;min-height:calc(3 * 1.45em + 22px);padding:10px 12px;resize:vertical;
  border:1px solid var(--frame);border-radius:0;background:var(--bg);color:var(--ink);font:400 16px/1.45 var(--sans)}
:lang(ar) .xq-ta{font-size:17px;line-height:1.6}
.xq-ta::placeholder{color:var(--muted);opacity:1}
.xq-ta:focus-visible{outline:2px solid var(--ink);outline-offset:0;border-color:var(--ink)}
.xq-count{display:block;margin-top:6px;font:400 13px/1.3 var(--sans);color:var(--muted);text-align:end;font-variant-numeric:tabular-nums}

/* muted line under Q1 (spec: «Остальные вопросы необязательны») */
.xq-optional{font:400 14px/1.4 var(--sans);color:var(--muted);margin:0 0 20px}
.xq-group:has(#xq-q1){margin-bottom:10px}

/* reveal: Q2–Q4 after the first Q1 tap — 150ms height, none under reduced motion */
.xq-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows 150ms ease-out;visibility:hidden}
.xq-more>div{overflow:hidden;min-height:0}
.xq-more.is-open{grid-template-rows:1fr;visibility:visible}
@media (prefers-reduced-motion:reduce){.xq-more{transition:none}}

/* sticky footer */
.xq-foot{flex:none;border-top:1px solid var(--hair);padding:12px 20px calc(14px + env(safe-area-inset-bottom));background:var(--bg)}
@media (min-width:600px){.xq-foot{padding:14px 28px 18px}}
.xq-hint{margin:0 0 10px;font:400 14px/1.4 var(--sans);color:var(--muted);text-align:end}
.xq-hint[hidden]{display:none}
.xq-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px 20px}
.xq-keep{min-height:44px;min-width:44px;padding:0 4px;background:none;border:0;color:var(--ink);font:500 15px/1.2 var(--sans);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.xq-del{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 22px;border:1px solid var(--btn-bg);
  background:var(--btn-bg);color:var(--btn-fg);font:600 15.5px/1 var(--sans);border-radius:0;cursor:pointer}
:lang(ar) .xq-keep,:lang(ar) .xq-del{font-size:16px}
@media (max-width:599.98px){.xq-del{flex:1 1 auto}}
/* required-Q1 state: calm, not red — muted outline + muted text (≥3:1), focusable, aria-disabled */
.xq-del[aria-disabled="true"]{background:transparent;color:var(--muted);border-color:var(--muted);cursor:default}

/* confirmation */
.xq-done .xq-title{margin-bottom:12px}
.xq-done p{font:400 16px/1.5 var(--serif);margin:0 0 8px}
.xq-done a,.xq-tomb a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.xq-done a{display:inline-flex;align-items:center;min-height:44px}   /* 44px target even inside the sentence */
.xq-done h2:focus{outline:none}

/* tombstone page */
.xq-tomb{padding-block:72px 96px}
.xq-tomb>*{max-width:640px}
.xq-tomb h1{font:500 clamp(30px,5vw,44px)/1.15 var(--xq-display);margin:0 0 14px}
:lang(ar) .xq-tomb h1{line-height:1.5;font-weight:600}
.xq-tomb p{font:400 17px/1.55 var(--serif);margin:0}
.xq-tomb a{display:inline-flex;align-items:center;min-height:44px}
body.is-tomb{padding-bottom:0}

html.xq-lock,html.xq-lock body{overflow:hidden}

/* tombstone restore is a POST form; the button looks like the body link */
.xq-link--body{font:400 17px/1.55 var(--serif)}
.xq-tomb form{margin:0}

.xq-err{color:var(--ink);font:400 15px/1.45 var(--sans)}

/* ===== STEP 1 (design/rails-proposal/step1/patch/demo-step1.css) ===== */
/* =====================================================================================================================
   STEP 1: brand fonts, chrome shrink, 44px targets.
   Append AFTER the last rule of static/css/demo.css (it overrides FIX-1 lines 145-156 on phones on purpose, see §S1-C).
   No rails, no carousels, no block-order change on demos. Palette, BORDERS tiers, radius 0, no shadows: unchanged.
   ===================================================================================================================== */

/* §S1-F type: Noto Serif Display (masthead, headings, card titles) / Source Serif 4 (body) / Inter Tight (UI).
   The metric-matched "… Fallback" faces (fonts-step1.css) hold the layout until the swap. */
:root {
  --display: 'Noto Serif Display', 'Noto Serif Display Fallback', 'Noto Serif Display Fallback A', Georgia, serif;
  --serif: 'Source Serif 4', 'Source Serif 4 Fallback', 'Source Serif 4 Fallback A', Georgia, serif;
  --sans: 'Inter Tight', 'Inter Tight Fallback', 'Inter Tight Fallback A', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}
[data-theme="mono"] { --serif: var(--sans); --display: var(--sans); }   /* Mono stays a sans page (as before), now Inter Tight */
:lang(ar) { --display: 'Noto Naskh Arabic', 'Noto Serif Display', Georgia, serif; --serif: 'Noto Naskh Arabic', 'Source Serif 4', Georgia, serif;
  --sans: 'Noto Naskh Arabic', 'Inter Tight', 'Segoe UI', Tahoma, sans-serif; }
.lang-opt:lang(ar) { font-family: 'Inter Tight', 'Inter Tight Fallback', Arial, sans-serif; }   /* «AR» in the switch is Latin: no Naskh download */
.hero h1, .site-brand, .card h3, .l-title, .gone h1, .admin h1, .pv-t { font-family: var(--display); }
.hero h1 { font-weight: 600; letter-spacing: -.015em; }
.site-brand { font-weight: 600; }
.card h3 { font-weight: 600; }

/* §S1-T 44px targets everywhere (desktop + phone). Bars keep one row on desktop: demo bar 48px (was 47.8), header 61px. */
.demo-bar { padding-block: 2px; }
.demo-brand, .seg { min-height: 44px; display: inline-flex; align-items: center; }
.segs { align-self: center; }
.seg { padding-block: 0; }
.demo-bar .lang-sw.lang-sw--text, .yt-sheet .lang-sw.lang-sw--text { align-items: center; }
.demo-bar .lang-sw.lang-sw--text .lang-opt, .yt-sheet .lang-sw.lang-sw--text .lang-opt {   /* beats cs_platform/demo_langs.py's inline <style> */
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 4px; }
.demo-bar .lang-sw--text .dot, .yt-sheet .lang-sw--text .dot { padding: 0 1px; }
.site-brand { min-height: 44px; }
.quiet, .post-foot a, .site-foot a, .tr-notice a, .hero-actions a:not(.btn-ink) { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.post-foot { padding-top: 0; row-gap: 0; }
.search input { height: 44px; }
.l-src { width: 44px; }
.btn-tg, .demo-cta .btn-ink { min-height: 44px; }
.rsx .rs__t { display: flex; align-items: center; min-height: 44px; }
.rsx .rs__m a { display: inline-flex; align-items: center; min-height: 44px; }
.rsx .rs__m { margin-top: 0; }

/* §S1-R «Полезные ресурсы» on demo Library pages: collapsed in place (cs_platform/resources/demos.py wraps the shelf in
   <details class="rs-fold">), so the first post is in the first viewport. Same order, same content, one tap to open. */
.rs-fold { margin: 8px 0 4px; border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--frame); }
.rs-fold > summary { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 10px; min-height: 48px; padding: 4px 0; cursor: pointer; list-style: none; }
.rs-fold > summary::-webkit-details-marker { display: none; }
.rs-fold__t { font: 700 1.14em/1.2 var(--display); color: var(--ink); }
.rs-fold__n { font: 500 13px/1.4 var(--sans); color: var(--muted); }
.rs-fold__a { margin-inline-start: auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border: 1px solid var(--frame);
  font: 600 14px/1 var(--sans); color: var(--ink); }
.rs-fold > summary:hover .rs-fold__a { border-color: var(--ink); }
.rs-fold > summary:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.rs-fold .l-hide, .rs-fold[open] .l-show { display: none; }
.rs-fold[open] .l-hide { display: inline; }
.rs-fold[open] > summary { border-bottom: 1px solid var(--hair); }
.rs-fold > .shelf-res > .shelf-res__h { display: none; }                 /* the summary is the heading now */
.rs-fold > .shelf-res { margin-top: 0; }

/* §S1-C chrome. Desktop (>560px): the demo bar + header as today; the menu, «Демо» tag and in-feed search are phone-only. */
.yt-menu, .yt-tag, .yt-search { display: none; }

@media (max-width: 560px) {
  /* one 48px bar = the site header; the dark demo bar's contents live in the Menu sheet */
  .demo-bar { display: none; }
  .site-head { position: sticky; top: 0; z-index: 30; transition: transform .2s ease; }
  html:not([style*="--bar-h"]) .site-head { position: relative; }          /* JS off: static (as today), never covers text */
  .site-head.yt-hidden { transform: translateY(-100%); }
  .site-head .head-row, .site-head .head-row:has(.search) { height: 47px; min-height: 0; padding-block: 0; gap: 8px; flex-wrap: nowrap; }
  .site-head .site-brand, .site-head .head-row:has(.search) .site-brand { flex: 1 1 0; min-width: 0; gap: 8px; font-size: 15px; }
  .site-head .site-brand span { line-height: 1.15; }                         /* FIX-1 kept: 2 lines, then «…» */
  .site-head .av { width: 28px; height: 28px; }
  .site-head .av-letter { font-size: 13px; }
  .site-head .head-tools, .site-head .head-tools:has(.search) { flex: none; gap: 6px; }
  .site-head .head-tools > .theme-btn, .site-head .head-tools > .search { display: none; }   /* in the sheet / in the feed */
  .yt-tag { display: inline-flex; align-items: center; flex: none; height: 22px; padding: 0 6px; border: 1px solid var(--frame);
    font: 600 11.5px/1 var(--sans); color: var(--muted); letter-spacing: .02em; white-space: nowrap; }
  .yt-tag::before { content: ""; width: 6px; height: 6px; margin-inline-end: 5px; border-radius: 50%; background: var(--bar-brand, var(--brand)); }
  /* Menu: <details>, works without JS */
  .yt-menu { display: block; flex: none; }
  .yt-menu > summary { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 10px;
    border: 1px solid var(--frame); background: var(--surface); color: var(--ink); font: 600 14px/1 var(--sans); cursor: pointer; list-style: none; }
  .yt-menu > summary::-webkit-details-marker { display: none; }
  .yt-menu[open] > summary { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }
  .yt-menu > summary:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
  .yt-sheet { position: fixed; inset-inline: 0; top: 48px; z-index: 29; max-height: calc(100vh - 48px - 64px); max-height: calc(100dvh - 48px - 64px); overflow: auto;
    display: grid; gap: 0; padding: 4px 16px 12px; background: #1C1A17; color: #EDE6D8; border-top: 1px solid #4A443B; border-bottom: 1px solid #5A544B;
    font: 14px/1.3 var(--sans); }
  html:not([style*="--bar-h"]) .yt-sheet { position: absolute; }          /* JS off: under the static header */
  .yt-sheet > * { min-height: 48px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid #4A443B; margin: 0; }
  .yt-sheet > :last-child { border-bottom: 0; }
  .yt-sheet .yt-row-k { flex: none; min-width: 6.5em; color: #ABA292; font-size: 13px; }
  .yt-sheet .segs { margin: 0; }
  .yt-sheet .seg { min-height: 44px; }
  .yt-sheet .theme-btn { min-height: 44px; background: none; color: #EDE6D8; border-color: rgba(237,230,216,.4); }
  .yt-sheet .btn-tg { flex: 1; justify-content: center; height: 44px; }
  .yt-sheet .demo-exp { display: inline; color: #ABA292; font-size: 13px; }
  /* bottom: one 56px bar (+ safe area), ONE ink button */
  .demo-cta { gap: 8px; padding: 6px max(12px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  .demo-cta .btn-tg { display: none; }
  .demo-cta:has(.cta-actions) .wm { display: none; }
  .demo-cta .cta-actions { flex: 1; }
  .demo-cta .btn-ink, .cta-actions > a.btn-ink { flex: 1 1 auto; justify-content: center; height: 44px; padding: 0 16px; font-size: 15px; }
  body, body:has(.cta-actions) { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  /* reader: the search row sits on top of the feed (FIX-1: own row, only where a search box exists) - not sticky chrome */
  .yt-search { display: block; margin: 12px 0 4px; }
  .yt-search input { width: 100%; height: 44px; }
  .day { position: static; }                                                /* was sticky at 104px: +28px of chrome */
  .post { scroll-margin-top: 60px; }
  #latest { scroll-margin-top: 60px; }
}
@media (max-width: 560px) and (prefers-reduced-motion: reduce) { .site-head { transition: none; } }
@media print { .yt-menu, .yt-sheet, .yt-tag { display: none !important; } }
/* end STEP 1 */
/* LG3 exit quiz in the STEP 1 menu: the last row, its own section below a hair rule, 44px target (Platform t1008x) */
@media (max-width: 560px) {
  .yt-sheet > .xq-menu-sep { border-top: 1px solid #4A443B; border-bottom: 0; margin-top: 4px; padding-top: 4px; }
  .yt-sheet .xq-menu-sep button { min-height: 44px; min-width: 44px; padding: 0; background: none; border: 0; color: #EDE6D8; font: inherit;
    text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: start; }
  .yt-sheet .xq-menu-sep button:focus-visible { outline: 2px solid #EDE6D8; outline-offset: 2px; }
}

/* r1.5 nav.skip: skip link, first focusable element */
.skip { position: absolute; inset-inline-start: 8px; top: -60px; z-index: 100; background: var(--ink); color: var(--bg); padding: 8px 14px; min-height: 44px; display: inline-flex; align-items: center; }
.skip:focus { top: 8px; }