/* Bookflix Words — white paper, black ink, Jost. */
:root {
  --ink: #0A0A0A;
  --paper: #FFFFFF;
  --accent: #E5322D;
  --hair: 1px solid var(--ink);
  --faint: rgba(10, 10, 10, 0.35);
}
* { box-sizing: border-box; }

/* Stage 25: the hidden attribute always wins. Classes like .pill and .btn set
 * their own display, and author CSS silently overrides the browser's default
 * [hidden] { display: none } — this is exactly why the meetings live pill and
 * the Join button ignored their hidden state. One rule ends the whole class
 * of bugs, for every current and future toggle on the platform. */
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Jost', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.45;
  font-weight: 400;
}
a { color: var(--ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Stage 28 (хвост 4): no grey flash over tapped cards and links on phones —
   the whole site answers a tap quietly. Keyboard focus keeps its outline. */
a, button, summary, label { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- header (core 3.5) ----------
 * Sticky bar: hamburger — search — CLUB / MAGAZINE on the left, the logo
 * dead-centre (absolute, so the flanks never push it around), pulse and
 * avatar on the right. Same order on the phone, only tighter. */
.site-head {
  --head-h: 58px;
  position: sticky; top: 0; z-index: 80; background: var(--paper);
  display: flex; align-items: center; gap: 6px 20px;
  min-height: var(--head-h); padding: 0 20px; border-bottom: var(--hair);
}
.head-left { display: flex; align-items: center; gap: 16px; min-width: 0; }
.head-icon { display: inline-flex; align-items: center; color: var(--ink); cursor: pointer; padding: 4px 2px; }
.head-icon:hover { color: var(--accent); text-decoration: none; }
.head-icon svg { display: block; }
.head-sections { display: flex; gap: 18px; margin-left: 6px; }
.head-sections a { font-size: 13px; text-transform: uppercase; letter-spacing: 0.16em; padding-bottom: 2px; }
.head-sections a.on { border-bottom: 2px solid var(--ink); }
.wordmark { display: inline-flex; align-items: center; }
.wordmark:hover { text-decoration: none; }
.wordmark .logo { height: 30px; width: auto; display: block; }
.head-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.site-auth { margin-left: auto; font-size: 14px; display: flex; gap: 8px; align-items: center; }
.site-auth .hi { color: var(--faint); }
.site-auth .dot { color: var(--faint); }

/* the hamburger: one menu, two columns — the club and the magazine */
.ham-menu { position: relative; }
.ham-menu > summary { list-style: none; }
.ham-menu > summary::-webkit-details-marker { display: none; }
.ham-menu[open] > summary { color: var(--accent); }
.ham-drop {
  position: absolute; left: -10px; top: calc(100% + 15px); z-index: 90;
  background: var(--paper); border: var(--hair); display: flex;
}
.ham-col { padding: 16px 24px 18px; min-width: 170px; }
.ham-col + .ham-col { border-left: var(--hair); }
.ham-group { font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--faint); margin: 0 0 8px; }
.ham-col a { display: block; padding: 5px 0; font-size: 15px; white-space: nowrap; }
.ham-col a.on { text-decoration: underline; text-underline-offset: 3px; }
.ham-sep { display: block; height: 1px; background: rgba(10, 10, 10, 0.18); margin: 9px 0; }

/* the search veil: full-screen overlay off the magnifier; /search without JS */
.search-veil {
  position: fixed; inset: 0; z-index: 100; overflow-y: auto;
  background: rgba(255, 255, 255, 0.97); padding: 16vh 24px 60px;
}
.search-box { max-width: 620px; margin: 0 auto; }
.search-form { display: flex; align-items: center; gap: 14px; border-bottom: 2px solid var(--ink); padding-bottom: 10px; }
.search-form input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-family: inherit; font-size: 24px; font-weight: 300; color: var(--ink);
}
.search-form input::placeholder { color: var(--faint); }
.search-close { font-size: 17px; }
.search-results { padding-top: 8px; }
.sr-group { font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--faint); margin: 22px 0 6px; }
.sr-item { display: block; padding: 7px 0; font-size: 17px; }
.sr-item:hover { text-decoration: underline; text-underline-offset: 3px; }
.search-meta { color: var(--faint); font-size: 13px; margin-left: 10px; }
.search-hint { color: var(--faint); font-style: italic; padding-top: 20px; }
.search-page-form { display: flex; gap: 10px; max-width: 460px; margin-bottom: 22px; }
.search-list { list-style: none; padding: 0; margin: 0 0 12px; }
.search-list li { padding: 6px 0; }

/* ---------- layout ---------- */
.wrap { --wrap-top: 26px; max-width: 980px; margin: 0 auto; padding: var(--wrap-top) 20px 80px; }
.wrap-embed { padding: 14px 14px 30px; max-width: 720px; }
.page-title { font-size: clamp(30px, 6vw, 46px); font-weight: 500; letter-spacing: -0.01em; margin: 0 0 14px; line-height: 1.05; }
.section-title { font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; margin: 34px 0 12px; }
/* Stage 27 — collapsible guide categories: a details element whose summary
   is the familiar section title plus a small chevron. No labels, no noise. */
.g-fold { margin: 34px 0 0; }
.g-fold > summary.section-title { margin: 0; cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: 9px; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent; }
.g-fold > summary.section-title::-webkit-details-marker { display: none; }
.g-fold .fold-ic { flex: none; opacity: 0.55; transition: transform 0.18s ease; }
.g-fold[open] .fold-ic { transform: rotate(180deg); }
.g-fold > summary.section-title:hover .fold-ic { opacity: 1; }
.g-fold > .g-fold-body { margin-top: 12px; }
.label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--faint); }
.crumbs { font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--faint); margin: 0 0 10px; }
.crumbs a { color: var(--faint); }
.byline { margin: -6px 0 20px; font-style: italic; color: var(--faint); }
.empty { color: var(--faint); font-style: italic; }
.err { color: var(--accent); }
.toast { border: var(--hair); display: inline-block; padding: 4px 12px; font-size: 14px; }
.hp { position: absolute; left: -9999px; }
.caption { font-style: italic; color: var(--faint); max-width: 640px; font-size: 15px; margin-top: 18px; }
.mono { font-family: ui-monospace, monospace; font-size: 13px; }

/* ---------- buttons / chips / inputs ---------- */
.btn {
  display: inline-block; border: var(--hair); background: var(--paper); color: var(--ink);
  font: inherit; font-size: 14px; text-transform: uppercase; letter-spacing: 0.1em;
  padding: 8px 18px; cursor: pointer; transition: background 0.12s, color 0.12s;
}
.btn:hover { background: var(--ink); color: var(--paper); text-decoration: none; }
.btn-solid { background: var(--ink); color: var(--paper); }
.btn-solid:hover { background: var(--paper); color: var(--ink); }
.btn-sm { padding: 5px 12px; font-size: 12px; }
.chip {
  display: inline-block; border: none; background: none; color: var(--faint); font: inherit;
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em;
  padding: 3px 0; margin-right: 16px; cursor: pointer; border-bottom: 2px solid transparent;
}
.chip.on { color: var(--ink); border-bottom-color: var(--ink); }
.chip:hover { color: var(--ink); text-decoration: none; }
.input {
  width: 100%; border: var(--hair); background: var(--paper); color: var(--ink);
  font: inherit; padding: 8px 10px; margin: 4px 0 14px;
}
.linkish { border: none; background: none; font: inherit; font-size: inherit; cursor: pointer; padding: 0; color: var(--ink); }
.linkish:hover { text-decoration: underline; }
.inline { display: inline; }
.hint { font-size: 13px; color: var(--faint); max-width: 420px; }

/* ---------- books ---------- */
.book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 26px 20px; }
.book-card:hover { text-decoration: none; }
.book-card:hover .book-title { text-decoration: underline; text-underline-offset: 3px; }
.cover { width: 100%; aspect-ratio: 2/3; object-fit: cover; border: none; display: block; }
.cover-blank { display: flex; align-items: center; justify-content: center; border: var(--hair); }
.cover-blank span { font-size: 52px; font-weight: 300; }
.book-meta { padding-top: 8px; }
.book-title { font-weight: 500; line-height: 1.2; }
.book-author { font-size: 14px; font-style: italic; color: var(--faint); }
.book-meta .label { margin-top: 4px; }
.part-list { list-style: none; padding: 0; margin: 26px 0 0; }
.part-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: var(--hair); }
.part-link { font-size: 19px; }
.scope-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 18px 0 6px; }
.term-list { list-style: none; padding: 0; margin: 26px 0 0; column-width: 180px; column-gap: 30px; }
.term-list li { padding: 4px 0; break-inside: avoid; }

/* ---------- study ---------- */
.pickers { margin: 6px 0 18px; }
.picker { margin-bottom: 4px; }
.embed-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.stage-cw { min-height: 0; }
.study-note { margin-top: 14px; max-width: 640px; }
.cw-note { margin-top: 18px; max-width: 640px; }
.stage { border: var(--hair); padding: 22px 18px; min-height: 320px; display: flex; flex-direction: column; }
.progress { font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--faint); margin-bottom: 14px; }
.flashcard {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; cursor: pointer; user-select: none; gap: 14px; padding: 10px 0;
}
.fc-term { font-size: clamp(28px, 7vw, 44px); font-weight: 500; }
.fc-def { font-size: 19px; max-width: 520px; }
.fc-ex { font-style: italic; color: var(--faint); max-width: 520px; }
.fc-gif img, .fc-gif iframe { max-width: 240px; max-height: 180px; border: var(--hair); }
.fc-hint { font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--faint); }
.fc-actions { display: flex; justify-content: center; gap: 14px; margin-top: 18px; }
.choice-q { font-size: 20px; margin: 6px 0 4px; }
.choice-ex { font-style: italic; color: var(--faint); }
.choice-opts { display: grid; gap: 10px; margin-top: 20px; }
/* color + appearance reset are explicit: iOS Safari paints bare <button> text
   in system blue and rounds the corners — desktop browsers hid this. */
.choice-opt { border: var(--hair); background: var(--paper); color: var(--ink); font: inherit; font-size: 18px; padding: 12px; cursor: pointer; text-align: left; transition: background 0.1s, color 0.1s; -webkit-appearance: none; appearance: none; border-radius: 0; }
.choice-opt:not(:disabled):hover { background: var(--ink); color: var(--paper); }
/* The right answer speaks ink, not accent — red is reserved for "not quite". */
.choice-opt.good { border: 2px solid var(--ink); padding: 11px; color: var(--ink); font-weight: 700;
  background: var(--paper); position: relative; padding-right: 44px; }
.choice-opt.good::after { content: ""; position: absolute; right: 11px; top: 50%; margin-top: -11px;
  width: 22px; height: 22px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5 9-10'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 12px 12px; }
.choice-opt.bad { color: var(--faint); text-decoration: line-through; background: var(--paper); }
.choice-actions { margin-top: 14px; min-height: 44px; }
.feedback { min-height: 24px; margin-top: 12px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.14em; }
.feedback.ok { color: var(--ink); }
.feedback.no { color: var(--accent); }
.session-end { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.session-end h2 { font-size: 30px; font-weight: 500; margin: 0; }

/* ---------- cloud ---------- */
.cloud-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.cloud-controls .input { width: 220px; margin: 0; }
.legend { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--faint); display: inline-flex; align-items: center; gap: 6px; }
.lg { display: inline-block; width: 10px; height: 10px; border: 1px solid var(--ink); margin-left: 10px; }
.lg-known { background: var(--ink); }
.lg-unknown { background: var(--paper); border-color: var(--faint); }
.cloud { border: var(--hair); padding: 22px 18px; text-align: center; line-height: 1.15; }
.cloud-word { display: inline-block; margin: 2px 9px; cursor: pointer; font-weight: 400; }
.cloud-word:hover { text-decoration: underline; text-underline-offset: 4px; }
.cloud-word.st-known { font-weight: 700; color: var(--ink); }
.cloud-word.st-unknown { color: var(--faint); }
.word-panel {
  position: fixed; right: 0; top: 0; bottom: 0; width: min(400px, 92vw);
  background: var(--paper); border-left: var(--hair); padding: 24px 22px; overflow-y: auto; z-index: 20;
}
.panel-close { position: absolute; top: 10px; right: 14px; border: none; background: none; font-size: 26px; cursor: pointer; }
.wp-term { font-size: 30px; font-weight: 500; margin: 6px 0 2px; }
.wp-status { font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); }
.wp-def { margin: 12px 0 4px; }
.wp-ex { font-style: italic; color: var(--faint); }
.wp-gif img, .wp-gif iframe { max-width: 100%; border: var(--hair); margin-top: 10px; }
.wp-books { list-style: none; padding: 0; margin: 8px 0 0; }
.wp-books li { padding: 8px 0; border-bottom: var(--hair); display: flex; align-items: center; gap: 10px; }
.wp-books .bi { flex: 1; min-width: 0; }
.wp-books .p { display: block; font-size: 13px; color: var(--faint); }
.wp-cover { width: 26px; height: 39px; object-fit: cover; flex: none; }
.wp-cover-blank { width: 26px; height: 39px; border: 1px solid var(--faint); flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--faint); }

/* ---------- stats / timeline ---------- */
.stat-section { margin-bottom: 40px; }
.timeline-box { border: var(--hair); overflow-x: auto; padding: 10px 0; }
.timeline-box svg { display: block; }
.tl-arc { fill: none; stroke: var(--ink); stroke-linecap: round; opacity: 0.16; transition: opacity 0.12s; }
.tl-arc.dim { opacity: 0.04; }
.tl-arc.hot { opacity: 0.95; stroke: var(--accent); }
.tl-book { cursor: pointer; }
.tl-book circle { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.tl-book.hot circle { fill: var(--ink); }
.tl-title { font-size: 12px; }
.tl-meta { font-size: 10px; fill: var(--faint); letter-spacing: 0.08em; text-transform: uppercase; }
.timeline-info { border: var(--hair); border-top: none; padding: 12px 16px; font-size: 14px; }
.timeline-info b { font-weight: 600; }
.tops { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .tops { grid-template-columns: 1fr 1fr; } }
.top-list { list-style: none; padding: 0; margin: 0; counter-reset: top; }
.top-list li { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: var(--hair); counter-increment: top; }
.top-list li::before { content: counter(top, decimal-leading-zero); color: var(--faint); font-size: 12px; margin-right: 12px; align-self: center; }
.top-list .t { flex: 1; }
.top-list .n { color: var(--faint); font-size: 14px; }
.wonder-list { line-height: 1.9; }

/* ---------- crossword ---------- */
.cw-layout { display: grid; gap: 26px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .cw-layout { grid-template-columns: auto 1fr; align-items: start; } }
:root { --cw-cell: 34px; }
.cw-scroll { max-width: 100%; overflow-x: auto; }
.cw-grid { display: grid; gap: 1px; width: max-content; background: var(--ink); border: 3px solid var(--ink); }
.cw-cell { position: relative; width: var(--cw-cell); height: var(--cw-cell); background: var(--paper); }
.cw-cell input {
  width: 100%; height: 100%; border: none; background: transparent; color: var(--ink);
  font: inherit; font-size: 17px; font-weight: 500; text-align: center; text-transform: uppercase; padding: 0;
}
.cw-cell input:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.cw-cell.active { background: #E9E9E9; }
.cw-cell.wrong input { color: var(--accent); }
.cw-cell .n { position: absolute; top: 0; left: 2px; font-size: 8px; pointer-events: none; }
.cw-blk { background: var(--ink); }
.cw-clues h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.14em; margin: 0 0 8px; }
.cw-clues ol { list-style: none; padding: 0; margin: 0 0 20px; }
.cw-clues li { padding: 4px 0; font-size: 15px; cursor: pointer; }
.cw-clues li.on { border-left: 2px solid var(--ink); padding-left: 8px; }
.cw-clues li.done { color: var(--faint); text-decoration: line-through; }
.cw-clues .cn { font-weight: 600; margin-right: 6px; }
.cw-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 16px 0 0; }
.cw-solved { font-size: 26px; font-weight: 500; margin: 10px 0 4px; }

/* ---------- crossword of the day (daily mode) ---------- */
.cw-top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.cw-layout > div, .cw-clues { min-width: 0; }
.cw-scroll .cw-grid { margin: 0 auto; }   /* leftover pixels split evenly — the grid sits centred */
@media (max-width: 640px) {
  .stage-cw { padding-top: 6px; padding-left: 6px; padding-right: 6px; }   /* the grid gets almost the full frame */
}
/* JS sets --cw-cell from the real container width, so the grid always fits
 * the phone; iOS likes to round input corners — flatten them */
.cw-cell input { -webkit-appearance: none; appearance: none; border-radius: 0; line-height: 1;
  font-size: clamp(16px, calc(var(--cw-cell) * 0.55), 17px); }   /* >=16px: iOS won't auto-zoom */
.cw-cell input[readonly] { pointer-events: none; }
.cw-cell.done { background: #F3F1EC; }
.cw-reveal-note { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink); }
.cw-status { margin-top: 18px; border-top: var(--hair); padding-top: 14px; }
.cw-status .cw-solved { margin-top: 0; }
.cw-flag-note { font-size: 14px; color: var(--faint); margin: 2px 0 0; }
.cw-streak { display: inline-block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--faint); margin-top: 6px; }
.cw-solvers { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 12px; }
.cw-solvers-cap { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--faint);
  margin-right: 6px; }
.cw-solver .avatar { display: block; width: 24px; height: 24px; border-radius: 50%; }
.cw-solver .avatar-blank { font-size: 11px; text-align: center; }

/* the home-page line: one quiet row in the left column, glyph aligned with
 * the What's-next date column */
.hd-cw { grid-area: cw; margin-top: -6px; }
.hd-cw-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center;
  column-gap: 0; padding: 10px 2px 18px; }
.hd-cw-row:hover { text-decoration: none; }
.hd-cw-row:hover .hd-cw-title { text-decoration: underline; text-underline-offset: 3px; }
.hd-cw-ico { line-height: 0; }
.hd-cw-title { display: block; font-size: 20px; font-weight: 500; line-height: 1.25; }
.hd-cw-meta { display: block; font-size: 14px; color: var(--faint); margin-top: 2px; }
.hd-cw .hd-play { color: var(--ink); }
@media (max-width: 900px) {
  .hd-cw { margin-top: 8px; }
}
@media (max-width: 640px) {
  .hd-cw-row { grid-template-columns: 40px minmax(0, 1fr) auto; padding: 14px 2px; }
  .hd-cw-title { font-size: 17px; }
  .hd-cw-meta { font-size: 13px; }
}

/* ---------- leaderboard ---------- */
.tabs { margin-bottom: 16px; }
.board { width: 100%; border-collapse: collapse; }
.board th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; padding: 8px 10px 8px 0; border-bottom: var(--hair); }
.board td { padding: 9px 10px 9px 0; border-bottom: var(--hair); }
.board tr.me td { font-weight: 600; }
.you { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; border: 1px solid var(--accent); color: var(--accent); padding: 1px 6px; margin-left: 8px; }

/* ---------- auth ---------- */
.auth-box { max-width: 380px; }
.switch { margin-top: 18px; }

/* ---------- admin ---------- */
.admin-nav { display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; border-bottom: var(--hair); padding-bottom: 12px; margin-bottom: 22px; font-size: 14px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 15px; margin-bottom: 10px; }
.admin-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; padding: 6px 8px 6px 0; border-bottom: var(--hair); }
.admin-table td { padding: 7px 8px 7px 0; border-bottom: var(--hair); vertical-align: top; }
.cell-wrap { max-width: 320px; }
.row-actions { white-space: nowrap; }
.row-actions a, .row-actions .linkish { margin-right: 10px; font-size: 13px; }
.admin-form { max-width: 640px; }
.two-col { display: grid; gap: 0 18px; grid-template-columns: 1fr 1fr; }
.form-actions { display: flex; gap: 10px; margin-top: 6px; }
.import-modes { display: grid; gap: 30px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .import-modes { grid-template-columns: 1fr 1fr; } }
.preview-table .input { margin: 0; padding: 5px 7px; font-size: 14px; }
tr.warn td { background: rgba(229, 50, 45, 0.06); }
.ac-wrap { position: relative; }
.ac { position: absolute; left: 0; right: 0; top: 100%; margin-top: -14px; background: var(--paper); border: var(--hair); z-index: 10; }
.ac div { padding: 7px 10px; cursor: pointer; font-size: 15px; }
.ac div:hover { background: var(--ink); color: var(--paper); }
.ac .in { color: var(--faint); font-size: 12px; margin-left: 8px; }
.ac div:hover .in { color: var(--paper); }
.mg-book { border: var(--hair); padding: 12px 16px; margin-bottom: 14px; }
.mg-book summary { cursor: pointer; font-weight: 500; }
.mg-book summary .label { margin-left: 10px; }
.conflict { color: var(--accent); font-size: 13px; margin-left: 10px; }
.conflict-choice label { margin-right: 16px; }
.summary { font-size: 19px; }

/* ---------- mobile ---------- */
@media (max-width: 640px) {
  .site-head { --head-h: 52px; padding: 0 12px; gap: 10px; }
  .head-left { gap: 9px; }
  .head-icon { padding: 4px 0; }
  .head-sections { gap: 9px; margin-left: 2px; white-space: nowrap; }
  .head-sections a { font-size: 10.5px; letter-spacing: 0.1em; }
  .wordmark .logo { height: 20px; }
  .ham-drop { position: fixed; left: 0; right: 0; top: var(--head-h, 52px); border-left: none; border-right: none; }
  .ham-col { flex: 1 1 0; min-width: 0; }
  .ham-col a { white-space: normal; }
  .search-veil { padding: 12vh 18px 50px; }
  .search-form input { font-size: 19px; }
  .wrap { --wrap-top: 20px; padding: var(--wrap-top) 16px 60px; }
  /* Stage 26 (правка 9): grid children refuse to shrink below the intrinsic
     width of a datetime-local input — the Ends field then pokes past the
     right edge and the whole page wobbles sideways. min-width: 0 lets the
     columns compress; the narrowest phones stack the pair (below). */
  .two-col > * { min-width: 0; }
  .two-col .input { max-width: 100%; min-width: 0; }
  /* Stage 26 (правка 11) + Stage 29: the drop cap read too heavy on a phone
     screen — regular weight keeps the size, loses the shout. !important because
     the base .f-dropcap rule sits later in the file and would otherwise win the
     cascade on small screens (and inside the installed app). */
  .mag-text.f-dropcap > p:first-child::first-letter { font-weight: 400 !important; }
}
@media (max-width: 480px) {
  .two-col { grid-template-columns: 1fr; } /* Stage 26 (правка 9) */
}
/* the narrowest phones: keep the centred logo clear of the flanks */
@media (max-width: 400px) {
  .head-sections a { font-size: 10px; letter-spacing: 0.06em; }
  .wordmark .logo { height: 18px; }
  .stage { padding: 16px 12px; min-height: 380px; }
  :root { --cw-cell: min(30px, calc((100vw - 60px) / var(--cw-w, 12) - 1px)); }
  .cw-cell input { font-size: 14px; }
  .word-panel { width: 100vw; border-left: none; border-top: var(--hair); top: auto; max-height: 70vh; }
}

/* ================= platform core additions ================= */

/* ---------- hero (book of the month) ---------- */
.hero { display: grid; grid-template-columns: 220px 1fr; gap: 30px; align-items: start; margin-bottom: 12px; }
.hero-cover .cover { max-width: 220px; }
.hero-meta .page-title a:hover { text-decoration: none; }
@media (max-width: 640px) { .hero { grid-template-columns: 1fr; } .hero-cover .cover { max-width: 180px; } }

/* ---------- book page ---------- */
.book-page { display: grid; grid-template-columns: 240px 1fr; gap: 34px; align-items: start; }
.book-side .cover { max-width: 240px; height: auto; }
@media (max-width: 640px) { .book-page { grid-template-columns: 1fr; } .book-side .cover { max-width: 200px; } }

/* ---------- avatars ---------- */
.avatar { border-radius: 50%; object-fit: cover; display: inline-block; vertical-align: middle; }
.avatar-blank { background: var(--paper); border: var(--hair); text-align: center; font-weight: 500; border-radius: 50%; }
.me-link { display: inline-flex; align-items: center; gap: 8px; }
.me-link:hover { text-decoration: none; }
.me-link:hover span { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- profile ---------- */
.profile-grid { display: grid; grid-template-columns: 180px 1fr; gap: 34px; align-items: start; }
.profile-ava { text-align: left; }
.profile-ava .avatar { font-size: 44px; }
@media (max-width: 640px) { .profile-grid { grid-template-columns: 1fr; } }
.person { display: flex; gap: 24px; align-items: flex-start; }
.person .avatar { font-size: 30px; flex: none; }

/* ---------- access pills ---------- */
.pill { display: inline-block; border: var(--hair); padding: 1px 8px; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.12em; }
.pill-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pill-admin { border-color: var(--accent); color: var(--accent); }
.pill-expired { color: var(--faint); border-color: var(--faint); }
.pill-free_demo { color: var(--faint); border-style: dashed; }
.pill-current { background: var(--ink); color: var(--paper); }
.pill-archive { color: var(--faint); }
.pill-draft { color: var(--faint); border-style: dashed; }

/* ---------- comments ---------- */
.comments { max-width: 680px; }
.comment { padding: 16px 0 10px; border-bottom: var(--hair); }
.c-head { display: flex; align-items: center; gap: 10px; }
.c-name { font-weight: 500; }
.c-when { font-size: 12px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.1em; }
.c-del { margin-left: auto; }
.c-del .linkish { font-size: 12px; color: var(--faint); }
.c-body { margin: 8px 0 6px; overflow-wrap: break-word; }
.c-body a { text-decoration: underline; text-underline-offset: 3px; }
.c-gif { max-width: 260px; max-height: 220px; border: var(--hair); display: block; margin: 6px 0; }
.c-foot { margin-top: 2px; }
.heart { border: none; background: none; font: inherit; cursor: pointer; padding: 2px 0;
  display: inline-flex; align-items: center; gap: 5px; color: var(--faint); }
.heart .h-ic { font-size: 16px; line-height: 1; }
.heart.on { color: var(--accent); }
.heart:disabled { cursor: default; }
.heart:not(:disabled):hover { color: var(--accent); }
.c-tools { margin-left: auto; display: inline-flex; align-items: baseline; gap: 12px; }
.c-tools .linkish, .c-tools .c-del .linkish { font-size: 12px; color: var(--faint);
  padding: 0; line-height: 1.4; vertical-align: baseline; }
.c-tools .c-del { margin-left: 0; display: inline-flex; }
.c-foot { display: flex; align-items: center; gap: 16px; }
.c-reply { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }
.c-reply:hover { color: var(--ink); }

/* the reply quote — a sliver of the original above the reply */
.c-quote { display: block; margin: 8px 0 2px; padding: 6px 12px; border-left: 2px solid var(--ink);
  background: rgba(10,10,10,0.035); text-decoration: none; color: inherit; cursor: pointer;
  max-width: 560px; }
.c-quote:hover { background: rgba(10,10,10,0.07); }
.c-quote-name { display: block; font-size: 12px; font-weight: 500; letter-spacing: 0.04em; }
.c-quote-text { display: block; font-size: 13px; color: var(--faint); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.c-quote-gone { border-left-color: var(--faint); cursor: default; }

/* the popup with the original comment */
.c-popup { position: fixed; inset: 0; z-index: 60; background: rgba(10,10,10,0.45);
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.c-popup-card { position: relative; background: var(--paper); border: var(--hair);
  padding: 20px 24px 14px; max-width: 560px; width: 100%; max-height: 80vh; overflow: auto; }
.c-popup-card .panel-close { position: absolute; top: 10px; right: 12px; }
.c-popup-card .comment { border-bottom: none; padding-bottom: 0; }

/* inline images and spoilers inside a comment body */
.c-img { max-width: 340px; max-height: 300px; border: var(--hair); display: block; margin: 6px 0; }

/* Stage 20: the spoiler is Telegram-style drifting static — a shimmer of
   dots instead of a slab of ink. Lines wrapped mid-spoiler each keep their
   own rounded strip (box-decoration-break) with air between them. */
.spoiler { color: transparent; cursor: pointer; border-radius: 3px; padding: 1px 5px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background-color: rgba(10,10,10,0.10);
  background-image:
    radial-gradient(rgba(10,10,10,0.85) 0.8px, transparent 1.1px),
    radial-gradient(rgba(10,10,10,0.55) 0.8px, transparent 1.1px),
    radial-gradient(rgba(10,10,10,0.35) 0.9px, transparent 1.2px);
  background-size: 6px 6px, 9px 9px, 13px 13px;
  animation: spoiler-static 0.8s steps(5) infinite;
}
.spoiler::selection { color: var(--paper); background: var(--ink); }
@keyframes spoiler-static {
  to { background-position: 6px 3px, -9px 6px, 13px -7px; }
}
@media (prefers-reduced-motion: reduce) { .spoiler { animation: none; } }
.spoiler.open { animation: none; background: rgba(10,10,10,0.06); color: inherit; }
/* inside the live editor the author must see their own words: text visible,
   just a whisper of static and a dashed floor to mark the hidden span */
.spoiler.live { color: inherit; animation: none; background-color: rgba(10,10,10,0.06);
  background-image: radial-gradient(rgba(10,10,10,0.28) 0.8px, transparent 1.1px);
  background-size: 7px 7px; border-bottom: 1px dashed var(--faint); }

/* ---------- the composer ---------- */
.comment-form { margin-top: 20px; position: relative; }
.comment-form .c-input { margin: 0; resize: none; overflow: hidden; min-height: 42px;
  transition: min-height 0.15s ease; }
.comment-form.is-open .c-input { min-height: 74px; overflow: auto; }
/* with JS the textarea steps behind the live editor but still posts the form */
.c-input.c-input-shadow { display: none; }
.c-editor { width: 100%; border: var(--hair); background: var(--paper); color: var(--ink);
  font: inherit; padding: 8px 10px; margin: 0; min-height: 42px; cursor: text;
  overflow-wrap: break-word; white-space: pre-wrap; transition: min-height 0.15s ease; }
.comment-form.is-open .c-editor { min-height: 74px; }
.c-editor:focus { outline: none; border-color: var(--ink); }
.c-editor:empty::before { content: attr(data-ph); color: var(--faint); pointer-events: none; }
.c-editor img { max-width: 220px; max-height: 180px; border: var(--hair); display: block; margin: 6px 0; }
.c-editor div { min-height: 0; }
.comment-form .c-form-foot { display: none; }
.comment-form.is-open .c-form-foot { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.c-post { margin-left: auto; opacity: 0.35; transition: opacity 0.15s ease; }
.c-post.has-text { opacity: 1; }
.c-attach { cursor: pointer; color: var(--faint); display: inline-flex; }
.c-attach:hover { color: var(--ink); }
.c-attach .c-file { display: none; }
.c-gifbtn { border: var(--hair); background: var(--paper); font: inherit; font-size: 11px;
  letter-spacing: 0.08em; padding: 3px 7px; cursor: pointer; color: var(--faint); }
.c-gifbtn:hover { border-color: var(--ink); color: var(--ink); }
.c-gif-hint, .c-uploading { font-size: 12px; color: var(--faint); font-style: italic; }
.c-gif-hint[hidden], .c-uploading[hidden] { display: none; }

/* the formatting tools — one quiet row with the paperclip and GIF (Stage 20) */
.c-fmt { display: inline-flex; gap: 2px; align-items: center; margin-right: 2px;
  padding-right: 12px; border-right: var(--hair); }
.tb { border: none; background: none; font: inherit; font-size: 14px; color: var(--faint);
  width: 28px; height: 26px; cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; padding: 0;
  -webkit-appearance: none; appearance: none; border-radius: 0; }
.tb:hover { color: var(--ink); }
.tb svg { display: block; width: 18px; height: 18px; flex: none;
  stroke: currentColor; fill: none; }

/* "Replying to" — hidden until armed, then a preview of the quoted comment */
.c-replying { margin-bottom: 8px; font-size: 13px; color: var(--faint); }
.c-replying[hidden] { display: none; }
.c-replying-label { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.c-replying-name { color: var(--ink); font-weight: 500; }
.c-replying-quote { margin: 0; }

/* editing in place */
.c-editing { margin: 8px 0 6px; }
.c-editing .c-input { resize: vertical; overflow: auto; }
.c-editing .c-form-foot { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.comment-edit-page .c-form-foot { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.comment-edit-page .c-input { resize: vertical; overflow: auto; }

/* ---------- admin ---------- */
.admin-nav a.on-tab { border-bottom: 2px solid var(--ink); }
.admin-table-narrow { width: auto; min-width: 380px; }
.admin-table-narrow th, .admin-table-narrow td { padding-right: 28px; }
.search-inline { max-width: 300px; display: inline-block; }
.u-actions { position: relative; }
.u-actions summary { list-style: none; }
.u-actions summary::-webkit-details-marker { display: none; }
.u-panel { position: absolute; right: 0; top: 100%; z-index: 15; background: var(--paper);
  border: var(--hair); padding: 14px 16px; min-width: 260px; text-align: left; }
.u-panel .input { margin: 2px 0 10px; }
.u-panel form { margin-bottom: 8px; }
.linkish.err, .linkish.err:hover { color: var(--accent); }
.faint { color: var(--faint); }
select.input { appearance: none; border-radius: 0; }

@media (max-width: 760px) {
  .admin-table { display: block; overflow-x: auto; }
  .u-panel { position: fixed; left: 16px; right: 16px; top: auto; min-width: 0; }
}

/* ================= guide module ================= */

/* ---------- book head ---------- */
.g-head { display: grid; grid-template-columns: 140px 1fr; gap: 26px; align-items: start; margin-bottom: 30px; }
/* ход 4 (правка владельца): the meta column grew (shelves, faces) — bottom
 * alignment was sliding the cover down; it stands level with the title now */
.g-cover .cover { max-width: 140px; }
@media (max-width: 640px) { .g-head { grid-template-columns: 96px 1fr; gap: 16px; } .g-cover .cover { max-width: 96px; } }

/* ---------- trajectory ---------- */
.trajectory { max-width: 680px; }
.g-block { display: block; border: var(--hair); padding: 20px 22px; margin: 0 0 26px; position: relative; }
.g-block::after { /* connector down to the next stop */
  content: ""; position: absolute; left: 50%; bottom: -27px; width: 1px; height: 26px; background: var(--ink); opacity: 0.35;
}
.trajectory > :last-child::after { display: none; }
a.g-block { color: var(--ink); }
/* Block D (точечная правка 1): no full inversion on hover — the line thickens,
 * the paper tints a touch, the title underlines. Inversion stays for buttons. */
a.g-block:hover { text-decoration: none; box-shadow: inset 0 0 0 1px var(--ink); background: rgba(10,10,10,0.035); }
a.g-block:hover .g-part-title, a.g-block:hover .g-title { text-decoration: underline; text-underline-offset: 4px; }
.g-block.dim { opacity: 0.38; border-style: dashed; }
.g-part-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
.g-part-title { font-size: 24px; font-weight: 500; }
.g-read { font-size: 14px; font-style: italic; color: var(--faint); }
.g-read-big { font-size: 20px; font-style: italic; margin: -6px 0 22px; }
.g-meta { margin: 8px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--faint); }
.g-meta a { color: var(--faint); }
.g-intro .g-title { font-size: 26px; font-weight: 500; margin: 0 0 10px; }
.g-body { max-width: 640px; overflow-wrap: break-word; }
.g-body img.c-gif, .g-body .c-gif { max-width: 300px; border: var(--hair); display: block; margin: 8px 0; }
.g-stub .g-part-title { font-size: 19px; }

/* ---------- video circles ---------- */
.g-video { text-align: center; margin: 0 0 26px; position: relative; }
.g-video::after { content: ""; position: absolute; left: 50%; bottom: -27px; width: 1px; height: 26px; background: var(--ink); opacity: 0.35; }
.trajectory > .g-video:last-child::after { display: none; }
.vc { position: relative; width: 210px; height: 210px; margin: 0 auto; border-radius: 50%;
  overflow: hidden; border: var(--hair); cursor: pointer; background: #000; }
.vc video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vc-blank { display: flex; align-items: center; justify-content: center; background: var(--paper); cursor: default; }
.vc-blank span { font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--faint); }
.g-video.dim .vc-blank { border-style: dashed; }
.vc-bar { width: 210px; height: 14px; margin: 6px auto 0; cursor: pointer; position: relative; }
.vc-bar::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: rgba(10,10,10,0.15); }
.vc-bar span { position: absolute; left: 0; top: 6px; height: 2px; width: 0; background: var(--accent); }
@media (max-width: 640px) { .vc { width: 170px; height: 170px; } .vc-bar { width: 170px; } }

.pw-masked { -webkit-text-security: disc; } /* Stage 23 (A1): Safari's own-password field */

/* ---------- materials ---------- */
.mat-list { list-style: none; padding: 0; margin: 0; max-width: 560px; }
.mat-list li { border-bottom: var(--hair); }
.mat { display: flex; width: 100%; align-items: baseline; gap: 14px; padding: 12px 2px;
  border: none; background: none; font: inherit; font-size: 17px; cursor: pointer; text-align: left; color: var(--ink); }
.mat:hover .mat-title { text-decoration: underline; text-underline-offset: 3px; }
a.mat:hover { text-decoration: none; }
.mat-type { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--faint); flex: none; width: 46px; }
.mat-title { flex: 1; }
.mat-arr { color: var(--faint); }
.mat-img { max-width: 100%; border: var(--hair); }

/* ---------- side panel (the “Seen in” pattern) ---------- */
.side-panel {
  position: fixed; right: 0; top: 0; bottom: 0; width: min(420px, 92vw);
  background: var(--paper); border-left: var(--hair); padding: 26px 24px; overflow-y: auto; z-index: 95; /* over the sticky header */
}
@media (max-width: 640px) {
  .side-panel { width: 100vw; border-left: none; border-top: var(--hair); top: auto; max-height: 76vh; }
}

/* ---------- words embed ---------- */
.words-embed { border: var(--hair); max-width: 680px; }
.words-embed iframe { display: block; width: 100%; height: 560px; border: none; }
@media (max-width: 640px) { .words-embed iframe { height: 500px; } }

/* ---------- guide admin ---------- */
.pill-kind { color: var(--faint); }
tr.row-dim td { opacity: 0.45; }

/* ---------- trajectory: desktop = horizontal booklet pages (like the pace-guide PDF) ---------- */
@media (min-width: 761px) {
  .trajectory { max-width: none; display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; }
  .trajectory .g-block, .trajectory .g-video { margin: 0; }
  .trajectory .g-block::after, .trajectory .g-video::after { display: none; } /* no vertical connectors */

  .g-intro { flex: 1 1 100%; }                        /* the opening spread — full width */

  /* part & stub = a little "page" */
  .g-part, .g-stub { width: 208px; min-height: 272px; display: flex; flex-direction: column; padding: 18px; }
  .g-part .g-part-head, .g-stub .g-part-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .g-part .g-part-title, .g-stub .g-part-title { font-size: 21px; }
  .g-part .g-meta, .g-stub .g-meta { margin-top: auto; padding-top: 14px; }

  /* a video circle sits in the flow between pages */
  .g-video { display: flex; flex-direction: column; justify-content: center; min-height: 272px; }
  .g-video .vc { width: 176px; height: 176px; }
  .g-video .vc-bar { width: 176px; }

  .g-video-page { min-height: 0; align-items: flex-start; margin-bottom: 24px; }
}

/* ================= shelves module ================= */

/* ---------- status picker (chip row under the byline) ---------- */
.shelf-picker { display: flex; align-items: flex-start; gap: 8px; margin: -6px 0 22px; }
.shelf-picker-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--faint); margin-right: 4px; padding-top: 7px; white-space: nowrap; }
/* the chips wrap inside their own span — a second row (DNF / TBR on phones)
 * lines up under the first chips, not under the label */
.shelf-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.shelf-chip {
  border: var(--hair); background: var(--paper); color: var(--ink); font: inherit;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
  padding: 4px 12px; cursor: pointer; transition: background 0.1s, color 0.1s;
}
.shelf-chip.on { background: var(--ink); color: var(--paper); }
/* Stage 25: hover styles only where hover really exists. Touch screens keep
 * the :hover state stuck after a tap, and the inverted .on:hover colours made
 * a freshly-toggled chip look like it lost its state until a reload. */
@media (hover: hover) {
  .shelf-chip:hover { background: var(--ink); color: var(--paper); }
  .shelf-chip.on:hover { background: var(--paper); color: var(--ink); }
}
.g-head .shelf-picker { margin: 10px 0 0; }

/* ---------- status pill on cards ---------- */
.shelf-pill { display: inline-block; border: var(--hair); padding: 1px 8px; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.12em; margin-top: 6px; }
.shelf-reading { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.shelf-read { color: var(--ink); }
.shelf-dnf { color: var(--faint); border-color: var(--faint); text-decoration: line-through; }
.shelf-tbr { color: var(--accent); border-color: var(--accent); }
.shelf-none { color: var(--faint); border-style: dashed; }

/* ---------- reading now (home quick access) ---------- */
.reading-now { margin: 6px 0 4px; }
.reading-now .section-title { margin-top: 22px; }
.rn-row { display: flex; gap: 18px; overflow-x: auto; padding-bottom: 6px; }
.rn-item { flex: none; width: 96px; }
.rn-item:hover { text-decoration: none; }
.rn-item:hover .rn-title { text-decoration: underline; text-underline-offset: 3px; }
.rn-title { font-size: 13px; line-height: 1.25; padding-top: 6px; }

/* ---------- archive page ---------- */
.shelf-tabs { margin-bottom: 14px; }
.shelf-tabs .chip { text-decoration: none; }
.tab-n { color: var(--faint); font-size: 11px; margin-left: 3px; }
.archive-search { max-width: 340px; margin-bottom: 8px; }
.archive-search .input { margin-bottom: 10px; }
.archive-card .archive-cover { display: block; }
.book-title-link:hover { text-decoration: none; }
.book-title-link:hover .book-title { text-decoration: underline; text-underline-offset: 3px; }

/* card shelf dropdown */
.shelf-dd { position: relative; }
.shelf-dd summary { list-style: none; cursor: pointer; display: inline-block; }
.shelf-dd summary::-webkit-details-marker { display: none; }
.shelf-menu { position: absolute; left: 0; top: 100%; z-index: 15; background: var(--paper);
  border: var(--hair); padding: 8px; display: grid; gap: 6px; min-width: 120px; }
.shelf-menu .shelf-chip { width: 100%; }

/* ================= meetings module ================= */

/* ---------- shared bits ---------- */
.meet-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.meet-when { margin: 4px 0; font-size: 14px; }
.meet-when .m-utc { letter-spacing: 0.02em; }
.meet-when .m-local { color: var(--faint); margin-left: 8px; font-style: italic; }
.meet-host { display: inline-flex; align-items: center; gap: 8px; }
a.meet-host:hover { text-decoration: none; }
a.meet-host:hover .avatar + * { text-decoration: underline; }
.meet-mode { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--faint); }
.meet-book { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-style: italic; }
.meet-book-cover { width: 20px; height: 30px; object-fit: cover; border: none; flex: none; } /* Stage 17 (правка 8) */
.meet-meta-row { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; margin-top: 8px; font-size: 14px; }

/* ---------- upcoming: official big cards ---------- */
.meet-big { display: block; border: 2px solid var(--ink); margin: 0 0 26px; color: var(--ink); }
.meet-big:hover { text-decoration: none; }
.meet-big:hover .meet-big-title { text-decoration: underline; text-underline-offset: 4px; }
.meet-big-banner { display: block; width: 100%; max-height: 320px; object-fit: cover; aspect-ratio: auto; }
.meet-big-body { padding: 18px 22px 20px; }
.meet-big-title { font-size: clamp(24px, 4vw, 34px); font-weight: 500; line-height: 1.1; margin: 4px 0 6px; }

/* ---------- upcoming: member meetup grid ---------- */
.meet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px; margin-bottom: 26px; }
.meet-card { display: block; border: var(--hair); color: var(--ink); }
.meet-card:hover { text-decoration: none; }
.meet-card:hover .meet-card-title { text-decoration: underline; text-underline-offset: 3px; }
.meet-banner { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.meet-banner-blank { display: flex; align-items: center; justify-content: center; border-bottom: var(--hair); }
.meet-banner-blank span { font-size: 40px; font-weight: 300; color: var(--faint); }
.meet-card-body { padding: 12px 14px 14px; }
.meet-card-title { font-size: 18px; font-weight: 500; line-height: 1.2; }
.meet-card .meet-book { margin-top: 8px; }

/* ---------- past list ---------- */

/* ---------- Stage 24 (A3): live cards, countdowns, Join ---------- */
.meet-live-wrap { display: inline-flex; align-items: center; gap: 10px; }
.meet-live-row { margin: 6px 0 0; min-height: 0; }
.meet-live-row:has(> .meet-live-wrap:empty) { display: none; }
/* Stage 25: the live sign is a small blinking red dot (the size of the
 * notification dots), not a solid pill; the meeting page adds a quiet
 * accent word next to it. */
.meet-live-ind { display: inline-flex; align-items: center; gap: 7px;
  animation: meet-pulse 2.2s ease-in-out infinite; }
.meet-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.meet-live-word { color: var(--accent); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; }
@keyframes meet-pulse { 50% { opacity: 0.55; } }
.meet-count { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); }
.mat-row { border: var(--hair); padding: 14px; margin: 0 0 12px; }
.mat-row .mat-body { margin-top: 10px; }
.mat-add-p { margin: 0 0 20px; }
.meet-join-btn { position: relative; z-index: 2; }
.meet-mode-pill { text-transform: uppercase; }
.meet-strip-tags { display: inline-flex; gap: 8px; align-items: center; margin-top: 4px; }
.meet-page-live { margin: 0 0 14px; }
.meet-page-live .meet-join-btn { font-size: 14px; padding: 8px 18px; }

/* The in-person Join popup: the address and a warm "come on over". */
.meet-modal { position: fixed; inset: 0; background: rgba(10,10,10,0.45); z-index: 300;
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.meet-modal-card { position: relative; background: var(--paper); border: var(--hair);
  max-width: 420px; width: 100%; padding: 28px 30px; }
.meet-modal-addr { font-size: 19px; line-height: 1.4; margin: 8px 0 10px; }

.meet-past { list-style: none; padding: 0; margin: 0; max-width: 680px; }
.meet-past li { border-bottom: var(--hair); }
.meet-past-link { display: flex; align-items: baseline; gap: 14px; padding: 11px 2px; }
.meet-past-link:hover { text-decoration: none; }
.meet-past-link:hover .meet-past-title { text-decoration: underline; text-underline-offset: 3px; }
.meet-past-date { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--faint); flex: none; width: 92px; }
.meet-past-title { flex: 1; }
.meet-past-mat { font-size: 12px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.08em; }

/* ---------- meeting page ---------- */
.meet-hero { display: block; width: 100%; max-height: 380px; object-fit: cover; border: var(--hair); margin-bottom: 20px; height: auto; }
.meet-facts { margin: 6px 0 8px; }
.meet-fact { margin: 8px 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.meet-fact-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--faint); width: 52px; flex: none; }
.meet-join { margin-left: 4px; }
.meet-descr { margin: 18px 0; }
.meet-recap { margin: 12px 0 18px; }
.meet-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin: 14px 0; max-width: 680px; }
.meet-photos img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border: var(--hair); display: block; }
/* Часть 2, п.4 — the photo lightbox */
.plb { position: fixed; inset: 0; z-index: 240; display: flex; align-items: center; justify-content: center; }
.plb-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.92); }
.plb-img { position: relative; max-width: min(92vw, 1100px); max-height: 84vh; object-fit: contain;
  box-shadow: 0 12px 48px rgba(0,0,0,0.5); }
.plb-close { position: absolute; top: 14px; right: 18px; z-index: 2; background: none; border: 0;
  color: #fff; font-size: 34px; line-height: 1; cursor: pointer; opacity: 0.8; padding: 6px; }
.plb-close:hover { opacity: 1; }
.plb-arr { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; background: none;
  border: 0; color: #fff; font-size: 30px; cursor: pointer; opacity: 0.75; padding: 18px 14px; }
.plb-arr:hover { opacity: 1; }
.plb-arr:disabled { opacity: 0.2; cursor: default; }
.plb-prev { left: 6px; } .plb-next { right: 6px; }
.plb-bar { position: absolute; bottom: 16px; left: 0; right: 0; z-index: 2; display: flex;
  justify-content: center; gap: 22px; color: rgba(255,255,255,0.85); font-size: 13px;
  letter-spacing: 0.06em; }
.plb-bar a { color: rgba(255,255,255,0.85); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.35); }
.plb-bar a:hover { color: #fff; border-color: #fff; }
@media (max-width: 640px) { .plb-arr { display: none; } .plb-img { max-width: 96vw; } }
.meet-photo-cell { position: relative; }
.meet-photo-cell form { position: absolute; right: 6px; top: 6px; background: var(--paper); padding: 1px 6px; border: var(--hair); }

/* ---------- form ---------- */
.meet-mode-row { display: flex; align-items: center; gap: 18px; margin: 2px 0 12px; }
.meet-radio { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; cursor: pointer; }
.meet-banner-preview { max-width: 280px; border: var(--hair); }

/* ---------- home strip ---------- */
.meet-strip { margin: 6px 0 4px; }
.meet-strip .section-title { margin-top: 22px; }
.meet-strip-row { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 6px; }
.meet-strip-item { flex: none; display: flex; align-items: center; gap: 12px; border: var(--hair);
  padding: 10px 16px 10px 12px; min-width: 240px; max-width: 340px; }
.meet-strip-item.is-official { border-width: 2px; }
.meet-strip-item:hover { text-decoration: none; }
.meet-strip-item:hover .meet-strip-title { text-decoration: underline; text-underline-offset: 3px; }
.meet-strip-date { flex: none; text-align: center; line-height: 1; border-right: var(--hair); padding-right: 12px; }
.meet-strip-date .d { display: block; font-size: 24px; font-weight: 500; }
.meet-strip-date .m { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--faint); margin-top: 3px; }
.meet-strip-title { display: block; font-weight: 500; line-height: 1.2; }
.meet-strip-info .meet-when { margin: 3px 0 0; font-size: 12px; }

@media (max-width: 640px) {
  .meet-big-banner { max-height: 200px; }
  .meet-fact-label { width: 100%; }
}

/* ================= quizzes module ================= */

/* ---------- shared bits ---------- */
.pill-live { border-color: var(--accent); color: var(--accent); }
.qz-meta { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--faint); margin: 10px 0; }
.qz-rules { font-size: 14px; }
.qz-countdown { font-size: 14px; color: var(--accent); margin-left: 8px; }
.qz-descr { margin: 4px 0 10px; }

/* ---------- list: live cards ---------- */
.qz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; margin-bottom: 26px; }
.qz-card { display: flex; gap: 14px; border: var(--hair); padding: 14px; color: var(--ink); }
.qz-card:hover { text-decoration: none; }
.qz-card:hover .qz-card-title { text-decoration: underline; text-underline-offset: 3px; }
.qz-live { border-left: 4px solid var(--accent); }
.qz-cover { width: 54px; height: 80px; object-fit: cover; flex: none; }
.qz-card-body { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.qz-card-title { font-size: 19px; font-weight: 500; line-height: 1.2; }
.qz-book { font-size: 14px; font-style: italic; color: var(--faint); }
.qz-card .qz-meta { margin: 2px 0 0; }

/* ---------- list: finished ---------- */
.qz-past { list-style: none; padding: 0; margin: 0; max-width: 680px; }
.qz-past li { border-bottom: var(--hair); }
.qz-past-link { display: flex; align-items: baseline; gap: 14px; padding: 11px 2px; }
.qz-past-link:hover { text-decoration: none; }
.qz-past-link:hover .qz-past-title { text-decoration: underline; text-underline-offset: 3px; }
.qz-past-date { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--faint); flex: none; width: 92px; }
.qz-past-title { flex: 1; }
.qz-past-mat { font-size: 12px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.08em; }

/* ---------- quiz page ---------- */
.qz-cta { margin: 18px 0 8px; }
.qz-cta .hint { max-width: 560px; }
.qz-score { margin: 20px 0 6px; }
.qz-score-big { font-size: clamp(34px, 7vw, 52px); font-weight: 500; letter-spacing: -0.01em; }
.qz-score-sub { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--faint); margin-top: 2px; }

/* ---------- final standings ---------- */
.qz-board { border-collapse: collapse; width: 100%; max-width: 680px; font-size: 15px; }
.qz-board th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--faint); font-weight: 500; padding: 6px 10px 6px 2px; border-bottom: var(--hair); }
.qz-board td { padding: 9px 10px 9px 2px; border-bottom: var(--hair); vertical-align: middle; }
.qz-th-place { width: 34px; } .qz-th-num { width: 90px; }
.qz-place { color: var(--faint); }
.qz-num { font-variant-numeric: tabular-nums; }
.qz-row-late td { opacity: 0.55; }
.qz-row-me td { background: rgba(229, 50, 45, 0.05); }
.qz-board .pill { margin-left: 8px; }

/* ---------- the lobby: the ceremonial start screen ---------- */
.qz-lobby { border: 3px solid var(--ink); padding: clamp(26px, 5vw, 52px) clamp(18px, 4vw, 40px);
  margin: 22px 0 14px; max-width: 680px; text-align: center; position: relative; }
.qz-lobby-live { box-shadow: 6px 6px 0 rgba(229, 50, 45, 0.16); }
.qz-lobby-badge { font-size: 12px; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--accent); margin: 0 0 10px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.qz-lobby-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  animation: qz-pulse 1.6s ease-in-out infinite; }
.qz-lobby-title { font-size: clamp(26px, 5vw, 38px); font-weight: 500; letter-spacing: -0.01em;
  line-height: 1.15; margin: 0 0 22px; }
.qz-lobby-stats { display: flex; justify-content: center; gap: clamp(18px, 5vw, 46px); margin: 0 0 20px; }
.qz-lobby-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.qz-lobby-stat b { font-size: clamp(24px, 4vw, 32px); font-weight: 500; line-height: 1; }
.qz-lobby-stat i { font-style: normal; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--faint); }
.qz-lobby-hint { font-size: 14px; color: var(--faint); max-width: 460px; margin: 0 auto 24px; line-height: 1.55; }
.qz-start { font-size: 17px; padding: 14px 40px; }
.qz-lobby-live .qz-start { animation: qz-breathe 2.6s ease-in-out infinite; }
@keyframes qz-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes qz-breathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(229, 50, 45, 0.35); }
  50% { box-shadow: 0 0 0 8px rgba(229, 50, 45, 0); } }

/* ---------- the arena: one question in focus ---------- */
.qz-game { max-width: 720px; margin: 6px auto 34px; }
.qz-game-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.qz-game-quit { font-size: 13px; color: var(--faint); }
.qz-timer { font-size: 22px; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.qz-progress { height: 4px; background: rgba(10, 10, 10, 0.12); margin-bottom: 0; }
.qz-progress-bar { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.35s ease; }
.qz-stage { border: 3px solid var(--ink); border-top: none; min-height: min(520px, 68vh);
  padding: clamp(20px, 4.5vw, 46px); display: flex; overflow: hidden; }
.qz-round { width: 100%; margin: auto; }
.qz-round-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--accent); margin: 0 0 14px; }
.qz-round-of { color: var(--faint); }
.qz-round-q { font-size: clamp(21px, 3.6vw, 28px); font-weight: 500; line-height: 1.25; margin: 0 0 24px; }
.qz-answer { display: block; width: 100%; text-align: left; font: inherit; font-size: 16px;
  line-height: 1.4; padding: 13px 16px; margin: 10px 0; border: var(--hair);
  background: var(--paper); color: var(--ink); cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease; }
.qz-answer:hover:not(:disabled) { background: var(--ink); color: var(--paper); transform: translateX(4px); }
.qz-answer:disabled { cursor: default; }
.qz-answer.is-right { background: #1E7B34; border-color: #1E7B34; color: var(--paper); }
.qz-answer.is-wrong { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.is-locked .qz-answer:not(.is-right):not(.is-wrong) { opacity: 0.45; }
.qz-verdict { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-top: 22px; }
.qz-verdict-word { font-size: 19px; font-weight: 500; }
.qz-verdict-word.is-yes { color: #1E7B34; }
.qz-verdict-word.is-no { color: var(--accent); }
.qz-pop { animation: qz-pop-in 0.28s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes qz-pop-in { from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to { opacity: 1; transform: none; } }

/* round transitions: the old card slides off left, the new one lands from the right */
.qz-round.qz-out { animation: qz-slide-out 0.2s ease-in forwards; }
.qz-round.qz-in { animation: qz-slide-in 0.3s cubic-bezier(0.2, 1, 0.4, 1); }
@keyframes qz-slide-out { to { opacity: 0; transform: translateX(-36px); } }
@keyframes qz-slide-in { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: none; } }

/* the in-arena finale */
.qz-final { text-align: center; }
.qz-final-score { font-size: clamp(52px, 11vw, 88px); font-weight: 500; letter-spacing: -0.02em;
  line-height: 1; margin: 6px 0 4px; }
.qz-final-score span { font-size: 0.45em; color: var(--faint); }
.qz-final-time { font-size: 15px; font-variant-numeric: tabular-nums; margin: 0 0 14px; }
.qz-final-note { font-size: 14px; color: var(--faint); max-width: 420px; margin: 0 auto 24px; line-height: 1.55; }

/* ---------- review (after the close) ---------- */
.qz-q { border: var(--hair); padding: 16px 18px; margin: 0 0 18px; }
.qz-q-body { font-size: 18px; font-weight: 500; margin: 0 0 10px; padding: 0 4px; }
.qz-q-n { color: var(--faint); font-weight: 400; margin-right: 4px; }
.qz-opt { display: block; margin: 6px 0; padding: 8px 12px; border: var(--hair); font-size: 15px; }
.qz-review { max-width: 640px; }
.qz-opt-correct { border-color: var(--ink); border-left: 4px solid var(--ink); }
.qz-opt-mine:not(.qz-opt-correct) { border-left: 4px solid var(--accent); }
.qz-mark { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--faint); margin-left: 10px; }
.qz-mark-miss { color: var(--accent); }

/* ---------- home strip ---------- */
.qz-strip { margin: 6px 0 10px; }
.qz-strip-item { display: flex; align-items: center; gap: 14px; border: var(--hair);
  border-left: 4px solid var(--accent); padding: 12px 16px; margin: 0 0 10px; color: var(--ink); max-width: 680px; }
.qz-strip-item:hover { text-decoration: none; }
.qz-strip-item:hover .qz-strip-title { text-decoration: underline; text-underline-offset: 3px; }
.qz-strip-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.qz-strip-title { font-size: 18px; font-weight: 500; }
.qz-strip-item .qz-meta { margin: 0; }
.qz-strip-cta { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); flex: none; }

/* ---------- the champion: quiz page crown + home-page glory ---------- */
.qz-crown { display: flex; align-items: center; gap: 14px; border: var(--hair);
  border-left: 4px solid #D4A017; padding: 14px 18px; margin: 20px 0 6px; max-width: 680px; }
.qz-crown-mine { border: 3px solid #D4A017; box-shadow: 6px 6px 0 rgba(212, 160, 23, 0.22); }
.qz-crown-cup { font-size: 26px; flex: none; }
.qz-crown-info { display: flex; flex-direction: column; gap: 2px; }
.qz-crown-name { font-size: 18px; font-weight: 500; }
.qz-crown-sub { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--faint); }
.qz-champ-strip { margin: 6px 0 10px; }
.qz-champ { display: flex; align-items: center; gap: 14px; border: var(--hair);
  border-left: 4px solid #D4A017; padding: 12px 16px; margin: 0 0 10px; color: var(--ink); max-width: 680px; }
.qz-champ:hover { text-decoration: none; }
.qz-champ:hover .qz-champ-name { text-decoration: underline; text-underline-offset: 3px; }
.qz-champ-cup { font-size: 22px; flex: none; }
.qz-champ-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.qz-champ-name { font-size: 17px; font-weight: 500; }
.qz-champ-sub { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--faint); }

/* confetti for the champion (JS builds the pieces, see app.js) */
.qz-confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 60; }
.qz-confetti i { position: absolute; top: -20px; display: block;
  animation: qz-confetti-fall linear forwards; }
@keyframes qz-confetti-fall {
  to { transform: translateY(105vh) rotate(720deg); opacity: 0.7; } }

/* ---------- guide trajectory: the live quiz block ---------- */
.qz-stub.qz-open { border-left: 4px solid var(--accent); } /* Stage 23 (A1): stripe for a live game only */
a.qz-stub:hover .g-meta { color: var(--paper); opacity: 0.75; }

/* ---------- admin builder ---------- */
.qz-builder-q { border: var(--hair); padding: 14px 16px; margin: 0 0 16px; }
.qz-builder-opt { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.qz-builder-opt input[type="radio"] { flex: none; }

/* ================= notes module: culture notes ================= */
/* The one warm color outside the palette — a direct quote of the yellow
   highlighter from the club's paper notebooks. Used only on marker cards. */
:root { --nmarker: #F7E7A1; }

/* ---------- Pinterest-style masonry feed ---------- */
.notes-feed { columns: 3 240px; column-gap: 18px; margin: 6px 0 10px; }
.notes-feed-one { columns: 1; max-width: 340px; }
.note-tile { break-inside: avoid; margin: 0 0 18px; }
.nc-open { display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none;
           text-align: left; cursor: pointer; font: inherit; color: inherit; }
.nc-open:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---------- the card ---------- */
.note-card { border: var(--hair); background: var(--paper); overflow: hidden;
             transition: transform 0.15s ease, box-shadow 0.15s ease; }
.nc-open:hover .note-card { transform: translateY(-2px); box-shadow: 0 6px 0 -3px var(--ink); }
.nc-inner { padding: 16px 18px 18px; }
.nc-bleed { display: block; width: 100%; height: auto; }
.nc-float { padding: 20px 18px 0; text-align: center; }
.nc-float img { max-width: 82%; height: auto; }
.nc-term { margin: 0 0 8px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.12;
           font-size: 22px; }
.nc-sc-s .nc-term { font-size: 17px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; }
.nc-sc-l .nc-term { font-size: clamp(28px, 4.5vw, 40px); font-weight: 500; letter-spacing: -0.02em; }
.nc-def { font-size: 15.5px; line-height: 1.5; }
.nc-def b { font-weight: 600; }
.nc-clamp { display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.nc-credit { font-size: 11.5px; color: var(--faint); margin: 6px 0 0; letter-spacing: 0.02em; }

/* style: marker — the term under a highlighter stroke */
.nc-marker .nc-term span { background: var(--nmarker); padding: 1px 7px 2px; margin-left: -7px;
                           -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* style: ink — inverted */
.nc-ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.nc-ink a { color: var(--paper); }
.nc-ink .nc-credit { color: rgba(255,255,255,0.45); }
.nc-open:hover .nc-ink { box-shadow: 0 6px 0 -3px var(--faint); }
/* style: accent — Bookflix red term + red top rule */
.nc-accent { border-top: 3px solid var(--accent); }
.nc-accent .nc-term { color: var(--accent); }

@media (max-width: 560px) {
  .notes-feed { columns: 2; column-gap: 12px; }
  .note-tile { margin-bottom: 12px; }
  .nc-inner { padding: 12px 13px 14px; }
  .nc-term { font-size: 18px; }
  .nc-sc-l .nc-term { font-size: 24px; }
  .nc-def { font-size: 14px; }
  .nc-clamp { -webkit-line-clamp: 6; }
}

/* ---------- notebook viewer (popup) ---------- */
.nv { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; } /* Stage 17: over the sticky header (z 80) */
.nv[hidden] { display: none; }
.nv-backdrop { position: absolute; inset: 0; background: rgba(10,10,10,0.55); }
.nv-book { position: relative; width: min(880px, calc(100vw - 48px)); max-height: calc(100vh - 64px);
           display: flex; flex-direction: column; }
.nv-stage { position: relative; perspective: 1800px; }
.nv-leaf { position: relative; transform-origin: left center; will-change: transform;
           backface-visibility: hidden; }
.nv-leaf.flip-out { transition: transform 0.16s ease-in; transform: rotateY(-88deg); }
.nv-leaf.flip-in-start { transition: none; transform: rotateY(88deg); }
.nv-leaf.flip-in { transition: transform 0.18s ease-out; transform: rotateY(0deg); }
.nv-leaf.flip-out-r { transition: transform 0.16s ease-in; transform: rotateY(88deg); transform-origin: right center; }
.nv-leaf.flip-in-start-r { transition: none; transform: rotateY(-88deg); transform-origin: right center; }
@media (prefers-reduced-motion: reduce) {
  .nv-leaf { transition: none !important; transform: none !important; }
}

/* the spread: two "pages" with a stitched seam, like the paper notebook */
.nv-spread { display: grid; grid-template-columns: 1fr 1fr; background: var(--paper);
             border: var(--hair); position: relative; overflow: auto;
             max-height: calc(100vh - 150px); }
.nv-spread::before { /* stitching seam */
  content: ""; position: absolute; top: 10px; bottom: 10px; left: 50%;
  border-left: 1px dashed var(--faint); z-index: 1; pointer-events: none;
}
.nv-spread::after { /* little red bookmark ribbon */
  content: ""; position: absolute; top: 0; right: 26px; width: 7px; height: 34px;
  background: var(--accent);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);
}
.nv-left, .nv-right { padding: 34px 34px 30px; min-width: 0; }
.nv-left { display: flex; flex-direction: column; justify-content: flex-start; gap: 14px; }
.nv-left .nc-bleed { margin: -34px -34px 0; width: calc(100% + 68px); max-width: none; }
.nv-left .nc-float { padding: 0; }
.nv-left .nc-float img { max-width: 88%; }
.nv-spread .nc-term { font-size: 30px; margin: 4px 0 0; }
.nv-spread.nc-sc-s .nc-term { font-size: 19px; }
.nv-spread.nc-sc-l .nc-term { font-size: clamp(34px, 5vw, 48px); }
.nv-spread .nc-def { font-size: 17px; line-height: 1.55; }
.nv-spread .nc-credit { margin-top: 2px; }
/* card styles inside the spread */
.nv-spread.nc-marker .nc-term span { background: var(--nmarker); padding: 1px 8px 2px; margin-left: -8px;
                                     -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.nv-spread.nc-ink { background: var(--ink); color: var(--paper); }
.nv-spread.nc-ink::before { border-left-color: rgba(255,255,255,0.4); }
.nv-spread.nc-ink a { color: var(--paper); }
.nv-spread.nc-ink .nc-credit { color: rgba(255,255,255,0.45); }
.nv-spread.nc-accent .nc-term { color: var(--accent); }
/* no image: the term page stays airy and centered */
.nv-spread:not(.has-img) .nv-left { justify-content: center; }

.nv-close { position: absolute; top: -14px; right: -14px; z-index: 3;
            width: 34px; height: 34px; border: var(--hair); background: var(--paper);
            color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer;
            padding: 0; -webkit-appearance: none; appearance: none; border-radius: 0;
            box-sizing: border-box; }
.nv-bar { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 12px; }
.nv-arr { border: 1px solid var(--paper); background: none; color: var(--paper);
          font-size: 20px; padding: 4px 16px; cursor: pointer; }
.nv-arr:hover { background: var(--paper); color: var(--ink); }
.nv-arr[disabled] { opacity: 0.3; cursor: default; }
.nv-arr[disabled]:hover { background: none; color: var(--paper); }
.nv-count { color: var(--paper); font-size: 13px; letter-spacing: 0.14em; }

@media (max-width: 700px) {
  .nv { align-items: stretch; }
  .nv-book { width: 100vw; max-height: none; height: 100%; padding: 0; }
  .nv-stage { flex: 1; display: flex; min-height: 0; }
  .nv-leaf { flex: 1; display: flex; min-height: 0; }
  .nv-spread { grid-template-columns: 1fr; flex: 1; max-height: none; border: 0;
               padding-bottom: 20px; }
  .nv-spread::before { display: none; }
  /* the close button sits at right 10..44px here — park the ribbon beside it,
     never underneath (on desktop the button floats outside the card instead) */
  .nv-spread::after { right: 56px; }
  .nv-left, .nv-right { padding: 24px 22px 0; }
  .nv-left .nc-bleed { margin: -24px -22px 0; width: calc(100% + 44px); }
  .nv-right { padding-bottom: 26px; }
  .nv-close { top: 10px; right: 10px; z-index: 5; }
  .nv-bar { position: absolute; bottom: 0; left: 0; right: 0; margin: 0; padding: 10px 0;
            background: var(--ink); }
  .nv-spread { padding-bottom: 64px; }
}

/* ---------- notes admin ---------- */
.notes-base-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
                    justify-content: space-between; margin: 0 0 18px; }
.inline-form { display: flex; gap: 8px; align-items: center; }
.inline-form .input { width: auto; min-width: 220px; }
.notes-attach-tools { margin-top: 16px; }
.notes-found { list-style: none; padding: 0; margin: 12px 0 0; }
.notes-found li { display: flex; gap: 10px; align-items: baseline; padding: 8px 0;
                  border-bottom: 1px solid rgba(10,10,10,0.12); }
.notes-editor { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 34px; align-items: start; }
.notes-preview { position: sticky; top: 78px; } /* clears the sticky header */
@media (max-width: 860px) { .notes-editor { grid-template-columns: 1fr; } }
.nowrap { white-space: nowrap; }

/* ================= magazine module =================
   The magazine is the platform's slow-reading territory: body and headlines
   in EB Garamond (self-hosted, Cyrillic included; Georgia fallback while it
   loads), kickers / bylines / captions stay in Jost. Everything black &
   white + the accent. */
:root { --mag-serif: "eb-garamond", "adobe-caslon-pro", Georgia, "Times New Roman", serif; }
body { overflow-x: clip; } /* full-bleed figures use the 50vw trick */

.mag { --hairfaint: 1px solid rgba(10,10,10,0.18); }

/* ---------- shared type ---------- */
.mag-kicker { font-size: 12px; text-transform: uppercase; letter-spacing: 0.18em; margin: 0 0 10px; }
.mag-imprint.imprint-bookflix { color: var(--accent); }
.mag-imprint.imprint-narratoscope { color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 1px; }
.mag-kicker-dot { color: var(--faint); margin: 0 2px; }
.mag-rubric-tag { color: var(--faint); }
.mag-demo-tag { color: var(--faint); border: 1px solid rgba(10,10,10,0.3); padding: 1px 7px; margin-left: 8px; font-size: 10px; }
.mag-headline { font-family: var(--mag-serif); font-weight: 600; line-height: 1.08; letter-spacing: -0.005em; margin: 0 0 8px; }
.mag-dek { font-family: var(--mag-serif); font-style: italic; font-size: 19px; line-height: 1.4; color: rgba(10,10,10,0.72); margin: 0 0 10px; }
.mag-byline { font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; margin: 0; }
.mag-byline .mag-date { color: var(--faint); }
.mag-caption { font-family: var(--mag-serif); font-style: italic; color: rgba(10,10,10,0.72); font-size: 15px; margin: 8px 0 0; }
.mag-credit { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--faint); margin: 6px 0 0; }

/* ---------- the front ---------- */
.mag-front-head { padding: 8px 0 4px; }
.mag-front-title { font-family: var(--mag-serif); font-weight: 600; font-size: clamp(36px, 6vw, 54px); margin: 0; letter-spacing: -0.01em; }
.mag-front-sub { font-family: var(--mag-serif); font-style: italic; color: var(--faint); margin: 4px 0 0; }
.mag-filters { display: flex; flex-wrap: wrap; gap: 4px 28px; align-items: baseline; border-bottom: var(--hair); padding: 14px 0 10px; margin-bottom: 4px; }
.mag-rubric-chips .chip { text-transform: none; letter-spacing: 0.04em; font-size: 14px; }

/* The lead (Stage 20.1): a split hero — the fresh piece's image takes the
   right half of the screen, flush against the header and the right edge;
   the words hold the left half, centered. */
.mag-lead { display: block; padding: 34px 0 40px; border-bottom: var(--hairfaint); }
.mag-lead:hover { text-decoration: none; }
.mag-lead:hover .mag-headline { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.mag-lead.has-img { display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  align-items: center; padding: 0 0 40px; }
.mag-lead.has-img .mag-lead-txt { order: 1; padding: 24px clamp(24px, 4vw, 72px) 24px 0; }
.mag-lead.has-img .mag-lead-img { order: 2;
  margin: calc(-1 * var(--wrap-top, 26px)) calc(-1 * var(--gutter, 20px)) 0 0;
  /* the freshest piece owns the first screen: header (58px + hairline) to
     the bottom edge; svh keeps it honest when browser chrome shows */
  height: calc(100vh - 59px);
  height: calc(100svh - 59px); }
.mag-lead-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mag-lead-txt { text-align: center; max-width: 780px; margin: 0 auto; }
/* an active filter puts a note above the lead — the hero yields the flush top */
.mag-filter-note ~ .mag-lead .mag-lead-img { margin-top: 0; }
.mag-headline-lead { font-size: clamp(28px, 3.6vw, 42px); }

.mag-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 36px; }
.mag-card { display: block; padding: 28px 0 26px; border-bottom: var(--hairfaint); }
.mag-card:hover { text-decoration: none; }
.mag-card:hover .mag-headline { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.mag-card-img { margin-bottom: 14px; }
.mag-card-img img { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; }
.mag-card .mag-headline { font-size: 23px; }
.mag-dek-card { font-size: 16.5px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- home strip ---------- */
.mag-home-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 30px; }
.mag-home-item { display: block; }
.mag-home-item:hover { text-decoration: none; }
.mag-home-item:hover .mag-headline-sm { text-decoration: underline; text-underline-offset: 4px; }
.mag-home-img { width: 100%; aspect-ratio: 5/3; object-fit: cover; display: block; margin-bottom: 10px; }
.mag-headline-sm { display: block; font-size: 19px; margin-top: 2px; }

/* ---------- article: hero ---------- */
.mag-article { font-size: 17px; }
.mag-draft-note { border: 1px dashed var(--faint); color: var(--faint); display: inline-block; padding: 4px 12px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em; }
.mag-title { font-family: var(--mag-serif); font-weight: 600; font-size: clamp(34px, 5.4vw, 58px); line-height: 1.04; letter-spacing: -0.012em; margin: 0 0 16px; }
.mag-title.t-words { font-size: clamp(40px, 7.5vw, 78px); }
.mag-hero { margin: 18px 0 40px; }
.mag-hero-titles.al-center { text-align: center; }
.mag-hero-titles.al-center .mag-dek { margin-left: auto; margin-right: auto; }
.mag-hero-titles.al-right { text-align: right; }
.mag-hero-titles .mag-dek { max-width: 620px; font-size: 21px; }
.mag-hero-classic .mag-hero-titles { max-width: 760px; margin: 30px auto 34px; }
.mag-hero-fig { margin-top: 0; }
.mag-hero-split { display: grid; grid-template-columns: 4fr 6fr; gap: 48px; align-items: center; min-height: 46vh; }
.mag-hero-split.flip .mag-hero-titles { order: 2; }
.mag-hero-split.flip .mag-hero-art { order: 1; }
.mag-hero-split .mag-hero-art img { width: 100%; display: block; }
.mag-hero-poster { margin-top: calc(-1 * var(--wrap-top, 26px)); } /* Stage 17 (правка 5): постер прижат к линии хедера */
.mag-hero-poster .mag-poster-art { width: 100vw; margin-left: calc(50% - 50vw); }
.mag-hero-poster .mag-poster-art img { width: 100%; max-height: 82vh; object-fit: cover; display: block; }
.mag-credit-poster { padding: 0 20px; max-width: 980px; margin: 8px auto 0; }
.mag-hero-poster .mag-hero-titles { max-width: 760px; margin: 34px auto 0; }
.mag-hero-words { padding: 8vh 0 4vh; }
.mag-hero-words .mag-hero-titles { max-width: 860px; margin: 0 auto; }

/* ---------- article: body & blocks ---------- */
.mag-body { position: relative; }
.mag-body p { font-family: var(--mag-serif); font-size: 20px; line-height: 1.58; margin: 0 0 1.1em; }
.mag-body a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.mag-text { margin: 0 0 6px; }
.mag-text.v-classic { max-width: 680px; margin-left: auto; margin-right: auto; }
.mag-text.v-left  { width: min(60%, 620px); }
.mag-text.v-right { width: min(60%, 620px); margin-left: auto; }
.mag-text.f-lede > p:first-child { font-size: 23px; line-height: 1.5; }
/* Stage 17 (правка 1): буквица. Верхний край вровень с верхом первой строки,
   рост — три строки; для коротких первых абзацев (< 3 строк) JS вешает .dc2 и
   буквица становится двухстрочной. Точную посадку делает initial-letter (все
   актуальные браузеры); ниже — настроенный float-фолбэк для остальных. */
.mag-text.f-dropcap > p:first-child::first-letter {
  font-family: var(--mag-serif); font-weight: 600; float: left;
  font-size: 4.1em; line-height: 0.94; padding: 0 12px 0 0; margin-top: 0.02em;
}
.mag-text.f-dropcap > p.dc2:first-child::first-letter { font-size: 2.75em; line-height: 0.92; }
@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
  .mag-text.f-dropcap > p:first-child::first-letter {
    float: none; font-size: inherit; line-height: inherit; margin: 0; padding: 0 12px 0 0;
    -webkit-initial-letter: 3; initial-letter: 3;
  }
  .mag-text.f-dropcap > p.dc2:first-child::first-letter { -webkit-initial-letter: 2; initial-letter: 2; }
}
/* the measuring state: JS strips the cap for a moment to count the lines */
.mag-text.f-dropcap > p.dc-measure:first-child::first-letter {
  float: none; font-size: inherit; line-height: inherit; margin: 0; padding: 0;
  -webkit-initial-letter: normal; initial-letter: normal;
}

.mag-h { font-family: var(--mag-serif); font-weight: 600; clear: both; margin: 54px auto 26px; max-width: 680px; }
.mag-h.v-caps { font-size: 19px; text-transform: uppercase; letter-spacing: 0.2em; }
.mag-h.v-display { font-size: 33px; line-height: 1.15; }
.mag-h.al-left { text-align: left; } .mag-h.al-center { text-align: center; } .mag-h.al-right { text-align: right; }

.mag-fig { margin: 36px auto; }
.mag-fig img { width: 100%; display: block; }
.mag-fig figcaption { max-width: 680px; margin: 0 auto; }
.mag-fig figcaption .mag-caption { display: block; }
.mag-fig figcaption .mag-credit { display: block; }
.mag-fig.v-center { max-width: 680px; }
.mag-fig.v-wide { max-width: 920px; }
.mag-fig.v-full { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.mag-fig.v-full figcaption { padding: 0 20px; }
.mag-fig.v-float-left  { float: left;  width: min(44%, 420px); margin: 6px 34px 18px 0; }
.mag-fig.v-float-right { float: right; width: min(44%, 420px); margin: 6px 0 18px 34px; }
.mag-fig.v-bleed-left  { float: left;  width: min(58vw, 660px); margin: 6px 40px 20px calc(50% - 50vw); }
.mag-fig.v-bleed-left figcaption { padding-left: 20px; margin-left: 0; }
.mag-fig.v-bleed-right { float: right; width: min(58vw, 660px); margin: 6px calc(50% - 50vw) 20px 40px; }
.mag-fig.v-bleed-right figcaption { padding-right: 20px; margin-right: 0; text-align: right; }

.mag-pull { clear: both; position: relative; max-width: 640px; margin: 56px auto; text-align: center; }
.mag-pull p { font-family: var(--mag-serif); font-style: italic; font-size: clamp(24px, 3.4vw, 31px); line-height: 1.32; margin: 0; }
.mag-pull.v-ring { padding: 34px 30px; }
.mag-pull.v-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotate(-2.4deg); pointer-events: none; }
.mag-pull.v-ring ellipse { fill: none; stroke: var(--ink); stroke-width: 1.1; vector-effect: non-scaling-stroke;
  stroke-dasharray: 300; stroke-dashoffset: 0; }
.mag-pull.v-ring ellipse.pre { stroke-dashoffset: 300; }
.mag-pull.v-ring ellipse.draw { stroke-dashoffset: 0; transition: stroke-dashoffset 1.5s cubic-bezier(.4,0,.2,1); }
.mag-pull.v-rules { border-top: var(--hair); border-bottom: var(--hair); padding: 30px 12px; }
.mag-pull.v-ink { max-width: none; width: 100vw; margin-left: calc(50% - 50vw); background: var(--ink); color: var(--paper); padding: 58px 20px; }
.mag-pull.v-ink p { max-width: 720px; margin: 0 auto; }

.mag-excerpt { clear: both; max-width: 620px; margin: 40px auto; padding: 4px 0 4px 28px; border-left: var(--hair); }
.mag-excerpt p { font-style: italic; font-size: 19px; }
.mag-excerpt p:last-child { margin-bottom: 0; }

.mag-break { clear: both; }
.mag-break.v-line { width: 90px; border-top: var(--hair); margin: 52px auto; }
.mag-break.v-asterisks { text-align: center; font-family: var(--mag-serif); font-size: 22px; letter-spacing: 0.4em; margin: 48px 0; }
.mag-break.v-space { height: 56px; }

/* ---------- the pair: offset column + live margin ---------- */
.mag-pair { position: relative; display: flex; gap: 44px; align-items: flex-start; margin: 0 0 6px; }
.mag-pair .mag-text { flex: 0 0 auto; margin-left: 0; margin-right: 0; }
.mag-pair.pair-left  .mag-text { order: 1; }
.mag-pair.pair-left  .mag-aside { order: 2; }
.mag-pair.pair-right .mag-aside { order: 1; }
.mag-pair.pair-right .mag-text { order: 2; margin-left: auto; }
.mag-aside { flex: 1 1 0; min-width: 0; position: sticky; top: 76px; align-self: flex-start;
  font-size: 14px; line-height: 1.5; }
.mag-aside p { font-family: 'Jost', system-ui, sans-serif; font-size: 14px; line-height: 1.5; margin: 0 0 0.8em; }
.mag-aside img { max-width: 100%; display: block; }
.mag-aside .mn-img { max-width: 130px; margin-bottom: 12px; }
.mag-aside.aside-ghost { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 0; }
.mag-aside.aside-ghost img { width: min(62%, 560px); max-width: none; opacity: 0.94; }
.mag-pair .mag-text { position: relative; z-index: 1; }
.mag-aside-flow { max-width: 380px; margin: 30px auto; border-left: 2px solid var(--ink); padding-left: 18px; position: static; }

/* ---------- article: chrome ---------- */
.mag-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--ink); z-index: 85; } /* rides over the sticky header's top edge */
.mag-foot { clear: both; }
/* Stage 29 (правка 1): the end-of-article asterisk is set in Jost, not the
   article serif — that's how it read before. */
.mag-endmark { text-align: center; font-size: 22px; margin: 56px 0 10px; color: var(--ink);
  font-family: 'Jost', system-ui, sans-serif; }
.mag-discussion { max-width: 680px; margin: 0 auto; }

/* scroll reveal (JS adds .mag-will, then .mag-in when visible) */
.mag-will { opacity: 0; transform: translateY(14px); transition: opacity 0.7s ease, transform 0.7s ease; }
.mag-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .mag-will { opacity: 1; transform: none; } }

/* ---------- admin ---------- */
.mag-new-form { display: flex; gap: 12px; align-items: flex-start; max-width: 560px; margin-bottom: 24px; }
.mag-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; max-width: 900px; }
.mb-ed { border: var(--hair); padding: 14px 16px 16px; margin-bottom: 16px; max-width: 900px; }
.mb-ed-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.mb-ed-tools { display: flex; gap: 12px; align-items: baseline; }
.mb-ed-opts { display: flex; gap: 8px 22px; flex-wrap: wrap; align-items: baseline; margin-bottom: 6px; }
.mb-ed-opts .input { width: auto; min-width: 240px; }
.mb-add { display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; margin: 22px 0 40px; }

/* ---------- mobile ---------- */
@media (max-width: 860px) {
  .mag-grid { grid-template-columns: repeat(2, 1fr); gap: 0 26px; }
  .mag-home-row { grid-template-columns: 1fr; }
  .mag-hero-split { grid-template-columns: 1fr; gap: 22px; min-height: 0; }
  .mag-hero-split .mag-hero-titles { order: 2; }
  .mag-hero-split .mag-hero-art { order: 1; }
}
@media (max-width: 700px) {
  .mag-lead { padding: 24px 0 30px; }
  .mag-lead.has-img { display: block; padding: 0 0 30px; }
  .mag-lead.has-img .mag-lead-txt { padding: 0 8px; }
  .mag-lead.has-img .mag-lead-img { margin: calc(-1 * var(--wrap-top, 20px)) calc(50% - 50vw) 20px;
    height: auto; max-height: 60vh; overflow: hidden; }
  .mag-lead.has-img .mag-lead-img img { height: auto; max-height: 60vh; }
  .mag-grid { grid-template-columns: 1fr; }
  .mag-body p { font-size: 18.5px; }
  .mag-text.v-left, .mag-text.v-right { width: 100%; }
  .mag-pair { display: block; }
  .mag-aside { position: static; border-left: 2px solid var(--ink); padding-left: 16px; margin: 0 0 22px; max-width: 420px; }
  .mag-aside.aside-ghost { position: static; border-left: 0; padding-left: 0; display: block; margin: 0 0 20px; }
  .mag-aside.aside-ghost img { width: 84%; margin: 0 auto; display: block; opacity: 1; }
  .mag-fig.v-float-left, .mag-fig.v-float-right,
  .mag-fig.v-bleed-left, .mag-fig.v-bleed-right { float: none; width: 100%; margin: 30px 0; padding: 0; }
  .mag-pull.v-ring { padding: 26px 14px; }
  .mag-settings-grid { grid-template-columns: 1fr; }
}

/* ================= reviews module ================= */

/* the "Reviews" button under the byline of a book page */
.rv-book-action { margin: 12px 0 0; }
/* ход 4 (правка владельца): the review action is a tender feather link */
.rv-book-link { display: inline-flex; align-items: center; gap: 8px; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.12em; }
.rv-book-link .rv-feather { width: 17px; height: 17px; flex: none; }
.rv-book-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* the no-ratings principle line */
.rv-no-stars { font-style: italic; color: var(--faint); max-width: 560px; margin: 0 0 18px; }

/* book reviews page header (cover + title, like the trajectory head) */
.rv-page-head { display: flex; gap: 24px; align-items: flex-start; margin: 6px 0 30px; }
.rv-page-cover { flex: none; width: 130px; }
.rv-page-cover .cover { width: 100%; height: auto; display: block; border: none; } /* Stage 17 (правка 8) */
@media (max-width: 640px) {
  .rv-page-head { gap: 16px; }
  .rv-page-cover { width: 92px; }
}

/* review cards */
.rv-list { display: flex; flex-direction: column; gap: 22px; max-width: 720px; }
.rv-card { border: var(--hair); padding: 18px 20px 14px; }
.rv-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.rv-who { display: flex; flex-direction: column; line-height: 1.25; }
.rv-name { font-weight: 500; }
.rv-when { font-size: 13px; color: var(--faint); }
.rv-body { max-width: 640px; }
.rv-body .c-gif { max-width: 320px; display: block; margin: 10px 0; border: var(--hair); }
.rv-figure { margin: 14px 0 4px; }
.rv-figure img { max-width: 100%; height: auto; display: block; border: var(--hair); }

/* embedded Goodreads review — rebuilt in our markup at save time */
.rv-goodreads { margin: 14px 0 4px; }
.rv-gr-embed { border: var(--hair); padding: 16px 18px; }
.rv-gr-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 10px; }
.rv-gr-cover { width: 64px; height: auto; flex: none; border: var(--hair); display: block; }
.rv-gr-title { display: flex; flex-direction: column; gap: 3px; }
.rv-gr-book { font-weight: 500; }
.rv-gr-text { max-width: 640px; font-size: 16px; }
.rv-gr-text p { margin: 0 0 12px; }
.rv-gr-text p:last-child { margin-bottom: 0; }
.rv-gr-link { margin: 6px 0 0; font-size: 14px; }
.rv-gr-link a { color: var(--faint); }
.rv-gr-link a:hover { color: var(--ink); }

/* a plain Goodreads link -> a card that opens the review in a new tab */
.rv-gr-card { display: flex; flex-direction: column; gap: 4px; border: var(--hair);
  padding: 14px 18px; max-width: 480px; }
.rv-gr-card:hover { text-decoration: none; background: rgba(10, 10, 10, 0.03); }
.rv-gr-card-t { font-weight: 500; }
.rv-gr-kept { margin: -8px 0 14px; }

.rv-foot { display: flex; align-items: center; gap: 16px; margin-top: 12px;
  padding-top: 10px; border-top: 1px solid rgba(10, 10, 10, 0.12); }
.rv-comments-link { font-size: 14px; }
.rv-open { font-size: 13px; margin-left: auto; }

.rv-edit-row { margin: 14px 0 0; }

/* the live review card on the guide trajectory */
.rv-stub { border-style: solid; }
.rv-pill { border-color: var(--accent); color: var(--accent); }

/* write / edit form */
.rv-form .c-toolbar { margin: 6px 0; display: inline-flex; }
.rv-form-image { display: flex; align-items: center; gap: 14px; margin: 8px 0; }
.rv-form-image img { width: 110px; height: auto; display: block; border: var(--hair); }
.rv-remove { font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.rv-gr-help { margin: -6px 0 18px; font-size: 15px; max-width: 640px; }
.rv-gr-help summary { cursor: pointer; color: var(--faint); }
.rv-gr-help summary:hover { color: var(--ink); }
.rv-gr-help ol { margin: 10px 0 6px; padding-left: 22px; }
.rv-gr-help li { margin-bottom: 6px; }
.rv-form-actions { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.rv-delete { margin-top: 26px; }

/* "Latest reviews" strip at the bottom of the home page */
.rv-strip { margin-top: 44px; }
.rv-strip-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.rv-strip-item { border: var(--hair); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.rv-strip-item:hover { text-decoration: none; background: rgba(10, 10, 10, 0.03); }
.rv-strip-head { display: flex; align-items: center; gap: 8px; }
.rv-strip-who { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.rv-strip-name { font-weight: 500; font-size: 15px; }
.rv-strip-book { font-size: 13px; color: var(--faint); font-style: italic;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-strip-excerpt { font-size: 15px; line-height: 1.4; }
.rv-strip-meta { font-size: 13px; color: var(--faint); margin-top: auto; }
@media (max-width: 720px) {
  .rv-strip-row { grid-template-columns: 1fr; }
}

/* ================= core 3.3: header account menu ================= */

.me-menu { position: relative; }
.me-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.me-menu > summary::-webkit-details-marker { display: none; }
.me-menu > summary:hover .me-name { text-decoration: underline; text-underline-offset: 3px; }
.me-drop {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40;
  background: var(--paper); border: var(--hair); min-width: 160px; padding: 6px 0;
}
.me-drop a { display: block; padding: 7px 16px; font-size: 14px; }
.me-drop a:hover { background: var(--ink); color: var(--paper); text-decoration: none; }
.site-auth { position: relative; }
@media (max-width: 640px) {
  .site-head { align-items: center; }
  .site-auth { margin-left: auto; }
  .me-name { display: none; }           /* on the phone the avatar alone sits at the right edge */
}

/* ================= pulse module ================= */

.pulse-link {
  position: relative; display: inline-flex; align-items: center;
  padding: 2px; margin-right: 6px; color: var(--ink); align-self: center;
}
.pulse-link:hover { color: var(--accent); text-decoration: none; }
.pulse-link svg { display: block; }
.pulse-dot {
  position: absolute; top: 0; right: -1px; width: 7px; height: 7px;
  background: var(--accent); border-radius: 50%;
}

.pulse-panel .panel-head {
  display: flex; align-items: center; gap: 14px; margin-bottom: 14px;
}
.pulse-panel .panel-head .panel-close { margin-left: auto; }
.pulse-all { margin: 18px 0 0; font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; }

.pulse-list { list-style: none; margin: 0; padding: 0; }
.pl-item { border-bottom: 1px solid rgba(10, 10, 10, 0.12); }
.pl-item:last-child { border-bottom: none; }
.pl-to-me { border-left: 2px solid var(--accent); }
.pl-to-me .pl-link { padding-left: 12px; }
.pl-link { display: flex; gap: 12px; padding: 12px 0; align-items: flex-start; }
.pl-link:hover { text-decoration: none; }
.pl-link:hover .pl-text { text-decoration: underline; text-underline-offset: 3px; }
.pl-side { flex: none; width: 28px; }
.pl-kind {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border: var(--hair); font-size: 13px; font-weight: 500;
}
.pl-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pl-text { font-size: 15px; line-height: 1.35; }
.pl-snippet { font-size: 14px; color: var(--faint); font-style: italic; line-height: 1.35; }
.pl-spoiler-note { opacity: 0.8; }
.pl-thumb { max-width: 120px; max-height: 90px; border: 1px solid rgba(10,10,10,0.12);
  display: block; margin: 4px 0 2px; object-fit: cover; }
.pl-when { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--faint); margin-top: 2px; }
.pulse-page { max-width: 560px; }

/* ================= reviews: collapsed previews in lists ================= */

.rv-card.rv-clamped .rv-main {
  max-height: 260px; overflow: hidden; position: relative;
}
.rv-card.rv-clamped .rv-main::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 90px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--paper));
}
.rv-toggle {
  border: none; background: none; font: inherit; cursor: pointer; padding: 0;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink);
  border-bottom: 1px solid var(--ink); margin: 6px 0 2px;
}
.rv-toggle:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ================= guide 2.4: read marks ================= */

/* a published part on the trajectory gets a wrapper so the circle can sit
   on the corner of the plate without living inside the <a> */
.g-part-wrap { position: relative; margin: 0 0 26px; }
.g-part-wrap > .g-block { margin: 0; }
.g-part-wrap > .g-part { padding-right: 56px; }
.trajectory > :last-child .g-block::after { display: none; }

.gr-form { position: absolute; top: 12px; right: 12px; margin: 0; line-height: 0; z-index: 2; }
.gr-mark {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--faint);
  background: var(--paper); color: transparent; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.gr-mark svg { display: block; }
.gr-mark:hover { border-color: var(--ink); color: var(--faint); }
.gr-mark.on { background: var(--ink); border-color: var(--ink); color: var(--paper); } /* Stage 17 (правка 6): чёрный, галочка белая */
.gr-mark.on:hover { color: var(--paper); }
.gr-mark.pop { animation: gr-pop .4s ease; }
@keyframes gr-pop { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* the row on a part page: the circle + a quiet label */
.gr-row { display: flex; align-items: center; gap: 10px; margin: -8px 0 24px; }
.gr-row .gr-form { position: static; }
.gr-text { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--faint); }

@media (min-width: 761px) {
  /* the wrapper behaves like the plate did in the horizontal booklet layout */
  .trajectory .g-part-wrap { margin: 0; display: flex; }
  .g-part-wrap > .g-part { flex: 1 1 auto; }
}

/* ================= meetings 4.1: guide stub + RSVP ================= */

.mt-stub-list { list-style: none; padding: 0; margin: 12px 0 0;
  max-height: 132px; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; } /* Stage 17 (правка 7): ~3.5 строки видно, дальше — скролл */
.mt-stub-list li { border-top: 1px solid rgba(10, 10, 10, 0.14); }
.mt-stub-list li:first-child { border-top: none; }
.mt-stub-list a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 8px 0; color: var(--ink); }
.mt-stub-list a:hover { text-decoration: none; }
.mt-stub-list a:hover .mt-stub-title { text-decoration: underline; text-underline-offset: 3px; }
.mt-stub-date { flex: none; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); }
.mt-stub-title { flex: 1; min-width: 0; }
.mt-stub-going { flex: none; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--faint); }
.mt-stub .g-meta a { color: var(--faint); }

.meet-rsvp { margin: 4px 0 24px; }
.rsvp-btn.is-in { background: var(--paper); color: var(--ink); }
.rsvp-head { margin: 14px 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--faint); }
.rsvp-people { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.rsvp-person { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
.rsvp-person:hover { text-decoration: none; }
.rsvp-person:hover .rsvp-name { text-decoration: underline; text-underline-offset: 3px; }
.rsvp-empty { margin: 12px 0 0; }

/* ================= Stage 13 — Words module ================= */

/* inline study widget on a guide part: native block, natural height, no inner scroll */
.words-widget { max-width: 680px; }
.w-pickers { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 22px; margin: 6px 0 14px; }
.w-pickers .picker { margin-bottom: 0; }
.w-pickers .chip { background: none; font: inherit; cursor: pointer; }
.w-stats-link { font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--faint); margin-left: auto; }
.w-stats-link:hover { color: var(--ink); }
.w-stage { min-height: 340px; }

/* stats & cloud popup */
.w-pop { position: fixed; inset: 0; z-index: 120; background: rgba(0, 0, 0, 0.35); padding: 4vh 3vw; } /* Stage 17: over the sticky header */
.w-pop-card {
  position: relative; background: var(--paper); border: var(--hair);
  max-width: 980px; margin: 0 auto; height: 92vh; overflow-y: auto; padding: 30px 30px 40px;
}
.w-pop-card > .panel-close { position: sticky; top: 0; float: right; z-index: 2; background: var(--paper); }
.w-pop .page-title { margin-top: 0; }
.w-pop .stat-section { margin: 30px 0; }
.w-pop .tops { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.w-pop .top-list { padding-left: 20px; margin: 10px 0 0; }
.w-pop .top-list li { padding: 3px 0; }
.w-pop .top-list .n { color: var(--faint); font-size: 13px; margin-left: 8px; }
.w-pop .wonder-list { color: var(--faint); line-height: 1.7; }
.w-pop .cloud-controls { display: flex; align-items: center; gap: 16px; margin: 10px 0 12px; }
.w-pop .cloud-controls .input { max-width: 300px; }
.w-pop-word { position: fixed; z-index: 130; }
@media (max-width: 640px) {
  .w-pop { padding: 0; }
  .w-pop-card { height: 100vh; max-width: none; border: none; padding: 22px 16px 40px; }
  .w-pop .tops { grid-template-columns: 1fr; }
}

/* ---------- home archive strip (core 3.4): two slow ribbons ---------- */
.arch-title { color: inherit; }
.arch-title:hover { text-decoration: underline; text-underline-offset: 4px; }
.arch-strip { display: grid; gap: 26px; }
.arch-row { overflow-x: auto; scrollbar-width: none; }
.arch-row::-webkit-scrollbar { display: none; }
.arch-row.moving { overflow: hidden; }
.arch-track { display: flex; width: max-content; }
.arch-set { display: flex; gap: 20px; flex: none; }
.arch-row.moving .arch-set { padding-right: 20px; }
.arch-card { flex: none; width: 132px; }
.arch-card .book-title { font-size: 14px; }
.arch-card .book-author { font-size: 12px; }
.arch-row.moving .arch-track { animation: arch-scroll var(--arch-dur, 60s) linear infinite; }
.arch-row.moving[data-dir="right"] .arch-track { animation-direction: reverse; }
.arch-row.moving:hover .arch-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .arch-row.moving .arch-track { animation: none; } }
@keyframes arch-scroll { to { transform: translateX(-50%); } }

/* ================= wide grid (core 3.5) =================
 * Home and the magazine front run edge to edge like the New Yorker front:
 * the container opens to the full viewport with a slim gutter. Inner pages
 * keep the classic reading column — only the two fronts are wide. */
body.page-wide { overflow-x: clip; --gutter: clamp(20px, 3.5vw, 64px); }
.page-wide .wrap { max-width: none; padding: var(--wrap-top, 26px) var(--gutter) 80px; }

/* the drifting archive ribbons break out of the gutter completely:
 * books slide in from beyond one screen edge and leave past the other */
.page-wide .arch-strip { margin-inline: calc(-1 * var(--gutter)); }
.page-wide .arch-row:not(.moving) .arch-set { padding-inline: var(--gutter); }

/* Stage 26 (правка 13): Reading now and Upcoming meetings run to the right
   edge of the screen like the archive ribbons — cards scroll out past the
   edge instead of stopping at the gutter. A flex spacer at the end keeps the
   last card off the edge when scrolled all the way (browsers ignore
   padding-right inside a scroll container). */
.page-wide .rn-row, .page-wide .meet-strip-row { margin-right: calc(-1 * var(--gutter)); }
.page-wide .rn-row::after, .page-wide .meet-strip-row::after {
  content: ''; flex: none; width: 1px; margin-left: calc(var(--gutter) - 1px);
}

/* ---------- magazine front on the wide grid ---------- */
/* Stage 17 (правка 2): the Atlantic way, honestly this time — hairlines that
 * never touch. Verticals are ::before strips inset from the card's top and
 * bottom; horizontals are ::after strips inset from the verticals. The old
 * border-left / border-bottom «cage» is gone. */
.page-wide .mag-grid { grid-template-columns: repeat(4, 1fr); gap: 0; }
.page-wide .mag-card { position: relative; border-left: none; border-bottom: none;
                       padding-left: 28px; padding-right: 28px; }
.page-wide .mag-card::before { /* vertical divider, shy of both ends */
  content: ""; position: absolute; left: 0; top: 34px; bottom: 34px;
  width: 1px; background: rgba(10, 10, 10, 0.18);
}
.page-wide .mag-card::after {  /* horizontal rule under the card, shy of the verticals */
  content: ""; position: absolute; left: 28px; right: 28px; bottom: 0;
  height: 1px; background: rgba(10, 10, 10, 0.12);
}
.page-wide .mag-card:nth-child(4n + 1) { padding-left: 0; }
.page-wide .mag-card:nth-child(4n + 1)::before { display: none; }
.page-wide .mag-card:nth-child(4n + 1)::after { left: 0; }
.page-wide .mag-card:nth-child(4n) { padding-right: 0; }
.page-wide .mag-card:nth-child(4n)::after { right: 0; }
@media (max-width: 1200px) {
  .page-wide .mag-grid { grid-template-columns: repeat(3, 1fr); }
  .page-wide .mag-card,
  .page-wide .mag-card:nth-child(4n + 1) { padding-left: 24px; padding-right: 24px; }
  .page-wide .mag-card:nth-child(4n + 1)::before { display: block; }
  .page-wide .mag-card::after,
  .page-wide .mag-card:nth-child(4n + 1)::after, .page-wide .mag-card:nth-child(4n)::after { left: 24px; right: 24px; }
  .page-wide .mag-card:nth-child(3n + 1) { padding-left: 0; }
  .page-wide .mag-card:nth-child(3n + 1)::before { display: none; }
  .page-wide .mag-card:nth-child(3n + 1)::after { left: 0; }
  .page-wide .mag-card:nth-child(3n) { padding-right: 0; }
  .page-wide .mag-card:nth-child(3n)::after { right: 0; }
}
@media (max-width: 860px) {
  .page-wide .mag-grid { grid-template-columns: repeat(2, 1fr); }
  .page-wide .mag-card,
  .page-wide .mag-card:nth-child(3n + 1), .page-wide .mag-card:nth-child(4n + 1) { padding-left: 20px; padding-right: 20px; }
  .page-wide .mag-card:nth-child(3n + 1)::before, .page-wide .mag-card:nth-child(4n + 1)::before { display: block; }
  .page-wide .mag-card::after,
  .page-wide .mag-card:nth-child(3n + 1)::after, .page-wide .mag-card:nth-child(4n + 1)::after,
  .page-wide .mag-card:nth-child(3n)::after, .page-wide .mag-card:nth-child(4n)::after { left: 20px; right: 20px; }
  .page-wide .mag-card:nth-child(2n + 1) { padding-left: 0; }
  .page-wide .mag-card:nth-child(2n + 1)::before { display: none; }
  .page-wide .mag-card:nth-child(2n + 1)::after { left: 0; }
  .page-wide .mag-card:nth-child(2n) { padding-right: 0; }
  .page-wide .mag-card:nth-child(2n)::after { right: 0; }
}
@media (max-width: 700px) {
  .page-wide .mag-grid { grid-template-columns: 1fr; }
  .page-wide .mag-card { padding-left: 0 !important; padding-right: 0 !important; }
  .page-wide .mag-card::before { display: none !important; }
  .page-wide .mag-card::after { left: 0 !important; right: 0 !important; }
}

/* filtered view: a small note names the active filter, with a way back */
.mag-filter-note { display: flex; gap: 14px; align-items: baseline; padding: 12px 0 4px; margin: 0; font-size: 15px; }
.mag-filter-clear { color: var(--faint); font-size: 13px; }
.mag-filter-clear:hover { color: var(--accent); }

/* ======================================================================
   Stage 15 — the landing, the demo layer, the article preview.
   ====================================================================== */

/* Mobile header: CLUB / MAGAZINE leave the bar (they live in the hamburger). */
@media (max-width: 640px) {
  .head-sections { display: none; }
}

/* EN | RU switcher (landing pages pass it into the header). */
.lang-switch { display: inline-flex; align-items: center; gap: 7px; margin-right: 12px; }
.lang-switch a { font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--faint); }
.lang-switch a.on { color: var(--ink); border-bottom: 2px solid var(--ink); padding-bottom: 1px; }
.lang-switch .dot { color: var(--faint); }

/* Book-of-the-month synopsis (home hero + landing). */
.hero-synopsis { max-width: 560px; margin: 10px 0 4px; color: rgba(10,10,10,0.78); }

/* Sign-up: the chosen plan. */
.plan-note { border: var(--hair); padding: 10px 14px; font-size: 15px; margin: 0 0 14px; }

/* ---------- the landing ---------- */

.land { --band-pad: clamp(44px, 8vw, 110px); }
.land-sec { padding: clamp(36px, 6vw, 84px) 0; border-bottom: 1px solid rgba(10,10,10,0.14); }
.land-sec:last-child { border-bottom: 0; }

/* Full-bleed black bands — the white logo lives here. */
.land-band {
  margin-inline: calc(-1 * var(--gutter));
  padding: var(--band-pad) var(--gutter);
  background: var(--ink);
  color: var(--paper);
  text-align: center;
}
.land-hero { margin-top: -26px; }
.land-band a { color: var(--paper); }
.land-logo { width: min(320px, 60vw); display: block; margin: 0 auto 26px; }
.land-logo-mark { width: 120px; opacity: 0.9; margin-bottom: 18px; }

.land-kicker { font-size: 12px; text-transform: uppercase; letter-spacing: 0.2em; margin: 0 0 14px; color: var(--faint); }
.land-kicker-light { color: rgba(255,255,255,0.55); }
.land-h1 {
  font-weight: 300; font-size: clamp(30px, 5.4vw, 58px); line-height: 1.12;
  letter-spacing: -0.01em; margin: 0 auto 18px; max-width: 21ch;
}
.land-big {
  font-weight: 300; font-size: clamp(26px, 4.6vw, 48px); line-height: 1.16;
  letter-spacing: -0.008em; margin: 0 auto 16px; max-width: 26ch;
}
.land-big-light { color: var(--paper); }
.land-statement { text-align: center; }
.land-statement .land-body, .land-band .land-body { max-width: 620px; margin: 0 auto; }
.land-body p { margin: 0 0 12px; font-size: 18px; line-height: 1.55; }
.land-body p:last-child { margin-bottom: 0; }
.land-body-light p { color: rgba(255,255,255,0.82); }

.land-actions { margin: 26px 0 0; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.btn-land { background: var(--accent); border: 1px solid var(--accent); color: #fff; padding: 12px 26px; font-size: 15px; }
.btn-land:hover { background: #c9271f; border-color: #c9271f; text-decoration: none; }
.btn-land-ghost { border: 1px solid rgba(255,255,255,0.6); color: var(--paper); padding: 12px 26px; font-size: 15px; }
.btn-land-ghost:hover { border-color: var(--paper); text-decoration: none; }

.land-head { max-width: 720px; margin: 0 0 30px; }
.land-title { font-weight: 400; font-size: clamp(24px, 3.4vw, 36px); line-height: 1.18; margin: 0 0 12px; letter-spacing: -0.006em; }

/* Feature — text and image split. */
.land-feature { display: grid; gap: clamp(24px, 4vw, 64px); align-items: center; }
.land-feature .land-head { margin-bottom: 0; }
.land-feature-img img { width: 100%; display: block; }
@media (min-width: 800px) {
  .land-feature { grid-template-columns: 1fr 1fr; }
  .land-feature.v-left .land-feature-img { order: -1; }
}

/* Live · book of the month. */
.land-book-live { display: grid; grid-template-columns: minmax(150px, 240px) 1fr; gap: clamp(20px, 4vw, 56px); align-items: start; }
.land-book-cover .cover { width: 100%; }
.land-book-title { font-weight: 400; font-size: clamp(24px, 3vw, 34px); margin: 4px 0 6px; }
.land-synopsis { max-width: 560px; color: rgba(10,10,10,0.78); margin: 12px 0 0; }
@media (max-width: 640px) { .land-book-live { grid-template-columns: 1fr; } .land-book-cover .cover { max-width: 200px; } }

/* Live rows reuse the strip look, but stay unlinked for guests. */
.land-meet-item, .land-rev-item { cursor: default; }
.land-meet-book { display: block; font-size: 13px; color: var(--faint); }
.land-more { margin: 22px 0 0; font-size: 15px; }
.land-mag-grid { margin-top: 6px; }

/* The archive ribbon breaks out to the screen edges on the landing too. */
.land-page .land-arch .arch-strip { margin-inline: calc(-1 * var(--gutter)); }

/* Plans. */
.land-plans { text-align: center; }
.plan-grid { display: grid; gap: 22px; margin: 26px auto 0; max-width: 900px; }
.plan-grid.plans-1 { max-width: 460px; }
@media (min-width: 720px) { .plan-grid:not(.plans-1) { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }
.plan-card { border: var(--hair); padding: 30px 26px 26px; text-align: left; display: flex; flex-direction: column; }
.plan-card.is-featured { border-width: 2px; }
.plan-name { font-weight: 500; font-size: 20px; margin: 0 0 8px; }
.plan-price { font-weight: 300; font-size: 40px; letter-spacing: -0.01em; margin: 0 0 16px; }
.plan-period { font-size: 14px; color: var(--faint); letter-spacing: 0; font-weight: 400; }
.plan-list { list-style: none; margin: 0 0 20px; padding: 0; }
.plan-list li { padding: 9px 0; border-top: 1px solid rgba(10,10,10,0.14); font-size: 15.5px; line-height: 1.4; }
.plan-cta { margin: auto 0 0; }
.plan-cta .btn { width: 100%; text-align: center; padding: 11px 0; }
.plan-note-line { font-size: 13px; color: var(--faint); margin: 12px 0 0; }

/* /join */
.land-join { max-width: 900px; margin: 0 auto; }
.land-join-head { margin-bottom: 8px; }

/* ---------- the Atlantic-style article preview ---------- */

.mag-preview { position: relative; overflow: hidden; }
.mag-preview .mag-text:last-child { max-height: 220px; overflow: hidden; }
.mag-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 180px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--paper) 78%);
  pointer-events: none;
}
.mag-wall { max-width: 560px; margin: 8px auto 60px; text-align: center; border: 2px solid var(--ink); padding: 34px 28px 30px; }
.mag-wall-kicker { font-size: 12px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--faint); margin: 0 0 10px; }
.mag-wall-title { font-family: var(--mag-serif); font-weight: 600; font-size: clamp(22px, 3vw, 30px); line-height: 1.15; margin: 0 0 12px; }
.mag-wall-body { font-size: 16px; color: rgba(10,10,10,0.78); margin: 0 0 20px; }
.mag-wall-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 0; }

/* ---------- the guide as a guest sees it ---------- */

.g-guest-note { border: var(--hair); padding: 12px 16px; font-size: 15px; margin: 0 0 22px; }
.g-locked { opacity: 0.75; }
.g-lock-meta { color: var(--faint); }
/* 22.2: the demo window badge on the first part of the current book */
.g-demo-badge { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); border: 1px solid currentColor; border-radius: 2px;
  padding: 1px 7px; align-self: center; flex: none; }

.g-lock { color: var(--accent); font-size: 9px; vertical-align: 2px; }
.land-admin-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }

/* ===== Stage 16 — header account/language drops, footer, billing ===== */

/* Guests: text pair on desktop, the person icon ≤640px. */
.user-menu { display: none; }
.user-menu > summary { padding: 4px 2px; }
@media (max-width: 640px) {
  .auth-links { display: none; }
  .user-menu { display: block; }
}

/* Landing language: inline EN | RU on desktop, one-language drop ≤640px. */
.lang-menu { display: none; margin-right: 4px; }
.lang-cur { font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; display: inline-flex; align-items: center; gap: 4px; }
.lang-menu .me-drop a.on { color: var(--faint); }
@media (max-width: 640px) {
  .lang-switch { display: none; }
  .lang-menu { display: block; }
}

/* Header drops share one skin. */
.me-menu[open] > summary { color: var(--accent); }

/* ---- footer: white, the header's 1px language ---- */
.site-foot { border-top: var(--hair); margin-top: 56px; background: var(--paper); }
.foot-inner { max-width: 980px; margin: 0 auto; padding: 30px 24px 34px;
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.foot-mark .logo { height: 20px; display: block; }
.foot-links { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.12em; }
.foot-links a:hover { color: var(--accent); text-decoration: none; }
.foot-note { margin-left: auto; font-size: 12.5px; color: var(--faint); }
@media (max-width: 640px) {
  .foot-inner { flex-direction: column; align-items: flex-start; gap: 14px; padding: 24px 18px 28px; }
  .foot-note { margin-left: 0; }
}

/* ---- billing ---- */
.bill-card { border: var(--hair); padding: 20px 22px; margin: 0 0 22px; max-width: 560px; }
.bill-plan { font-size: 18px; font-weight: 500; margin: 0 0 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bill-sum { font-size: 26px; font-weight: 500; margin: 0 0 8px; }
.bill-facts { margin: 0 0 14px; }
.bill-facts > div { display: flex; gap: 12px; margin: 4px 0; font-size: 15px; }
.bill-facts dt { color: var(--faint); min-width: 150px; }
.bill-facts dd { margin: 0; }
.bill-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 4px; }
.bill-agree { display: flex; gap: 9px; align-items: flex-start; margin: 14px 0; font-size: 14.5px; text-transform: none; letter-spacing: 0; }
.bill-agree input { margin-top: 3px; }
.bill-switch { margin: 0 0 26px; max-width: 560px; }
.bill-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border: var(--hair); padding: 12px 16px; margin: 0 0 10px; font-size: 15px; }
.bill-history { max-width: 760px; }
.bill-refund { display: flex; gap: 6px; align-items: center; }
.bill-refund .input { width: 84px; padding: 5px 8px; }
.bill-profile { margin-top: 12px; }
.err-inline { color: var(--accent); font-size: 12.5px; }
.bill-checkout .bill-card { margin-top: 8px; }
.page-wide .foot-inner { max-width: none; padding-inline: var(--gutter); }

/* ---------- Stage 21: the card-crop picker (admin forms) ---------- */
.focus-frame { position: relative; overflow: hidden; border: var(--hair); max-width: 420px;
  cursor: grab; touch-action: none; user-select: none; background: #f4f4f4; margin: 4px 0 6px; }
.focus-frame.dragging { cursor: grabbing; }
.focus-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  display: block; pointer-events: none; }
.focus-3x2  { aspect-ratio: 3 / 2; }
.focus-16x9 { aspect-ratio: 16 / 9; }
/* corner ticks — a quiet reminder that the frame is the crop */
.focus-frame::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }

/* ================= Stage 22 — mail, tour, messages ================= */

/* ---------- the "confirm your email" strip (A5) ----------
 * A quiet ribbon under the header: paper, hairline, no drama. */
.verify-strip {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  padding: 9px 20px; border-bottom: var(--hair);
  background: #FBF7EE; font-size: 14.5px;
}
.verify-strip .linkish { text-decoration: underline; text-underline-offset: 3px; }
.verify-sent { color: var(--faint); }
.wrap-toast { display: block; width: fit-content; max-width: calc(100% - 32px);
  margin: 18px auto 0; padding: 8px 16px; } /* 22.2: air on every side */

/* the create-account invite checkbox breathes a little */
.inv-check { display: block; margin: 6px 0 10px; }

/* ---------- Admin → Mail (A5) ---------- */
.mail-grid { display: grid; grid-template-columns: minmax(260px, 380px) 1fr; gap: 12px 48px; align-items: start; }
@media (max-width: 900px) { .mail-grid { grid-template-columns: 1fr; } }
.mail-table td { vertical-align: top; }

/* ---------- the tour (A6) ----------
 * One veil; its transparent window (the hole) glides between targets thanks
 * to a huge box-shadow doing the dimming. The card is plain paper with the
 * hairline and one red kicker. */
.tour-lock { overflow: hidden; }
.tour-veil {
  position: fixed; inset: 0; z-index: 200;
  opacity: 0; transition: opacity 0.35s ease;
}
.tour-veil.on { opacity: 1; }
.tour-hole {
  position: fixed; border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(10, 10, 10, 0.62);
  transition: left 0.35s ease, top 0.35s ease, width 0.35s ease, height 0.35s ease, opacity 0.35s ease;
  pointer-events: none;
}
.tour-card {
  position: fixed; z-index: 201; background: var(--paper);
  border: var(--hair); border-top: 3px solid var(--ink);
  padding: 18px 20px 14px; box-shadow: 0 18px 50px rgba(10, 10, 10, 0.28);
  transition: left 0.35s ease, top 0.35s ease;
}
.tour-card.centered {
  left: 50%; top: 42%; transform: translate(-50%, -50%);
  width: min(360px, calc(100vw - 32px));
}
.tour-card.sheet {
  left: 12px; right: 12px; bottom: 12px; top: auto; width: auto;
}
.tour-kicker {
  margin: 0 0 6px; font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent);
}
.tour-title { margin: 0 0 6px; font-size: 19px; font-weight: 600; line-height: 1.25; }
.tour-text { margin: 0 0 14px; font-size: 15px; line-height: 1.5; }
.tour-foot { display: flex; align-items: center; gap: 12px; }
.tour-dots { display: flex; gap: 5px; margin-left: auto; margin-right: 12px; }
.tour-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(10, 10, 10, 0.2); }
.tour-dot.on { background: var(--accent); }
.tour-next { white-space: nowrap; }
.tour-replay { margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { .tour-hole, .tour-card, .tour-veil { transition: none; } }

/* ---------- messages (A7) ---------- */
.msg-intro { max-width: 560px; }
.msg-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.msg-title-mail { font-weight: 400; }
.msg-thread { max-width: 680px; margin: 22px 0 6px; }
.msg-day { display: flex; align-items: center; gap: 14px; margin: 22px 0 14px;
           font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.msg-day::before, .msg-day::after { content: ''; flex: 1; border-top: 1px solid rgba(10, 10, 10, 0.12); }
.msg-row { display: flex; gap: 10px; margin: 0 0 14px; }
.msg-row.mine { justify-content: flex-end; }
.msg-ava { flex: 0 0 auto; padding-top: 2px; }
.msg-bubble { max-width: 78%; border: 1px solid rgba(10, 10, 10, 0.16); padding: 9px 13px 10px; }
.msg-row.mine .msg-bubble { background: #F6F4F0; border-color: transparent; }
.msg-who { margin: 0 0 3px; font-size: 12.5px; font-weight: 500; }
.msg-when { color: var(--faint); font-weight: 400; margin-left: 8px; font-size: 11.5px; }
.msg-body { font-size: 15.5px; line-height: 1.5; overflow-wrap: anywhere; }
.msg-body img.c-img, .msg-body img.c-gif { max-width: 100%; display: block; margin: 6px 0 2px; }
.msg-form { max-width: 680px; }

/* the speech bubble at the foot of the Club column: icon + a small label,
   so the door reads as a door (Stage 22.1) */
.menu-msg {
  display: flex !important; align-items: center; gap: 8px;
  margin-top: 14px; padding: 4px 0 0 !important; color: var(--ink);
}
.menu-msg:hover { color: var(--accent); text-decoration: none !important; }
.menu-msg-ic { position: relative; display: inline-flex; }
.menu-msg-label { font-size: 13px !important; letter-spacing: 0.04em; color: inherit; }
.msg-dot {
  position: absolute; top: -2px; right: -4px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--accent);
}
.msg-list-row .msg-dot { position: static; display: inline-block; margin-left: 7px; }
.ham-menu > summary { position: relative; }
.ham-menu > summary.has-msg::after {
  content: ''; position: absolute; top: 2px; right: -2px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}

/* admin thread list */
.msg-list { max-width: 760px; border-top: var(--hair); }
.msg-list-row {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 4px; border-bottom: 1px solid rgba(10, 10, 10, 0.12);
}
.msg-list-row:hover { text-decoration: none; background: #FAF9F7; }
.msg-list-main { min-width: 0; flex: 1; }
.msg-list-name { display: block; font-weight: 500; }
.msg-list-row.unread .msg-list-name { font-weight: 600; }
.msg-list-snippet { display: block; color: var(--faint); font-size: 14.5px;
                    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-list-row.unread .msg-list-snippet { color: var(--ink); }
.msg-list-when { flex: 0 0 auto; }

/* ================= crm module (Stage 31, Block C) =================
   Campaigns, segments, the member card, the unsubscribe page. */
.crm-counts td, .crm-counts th { text-align: center; }
.crm-seg-cols { display: flex; gap: 34px; flex-wrap: wrap; margin: 6px 0 12px; }
.crm-check { display: block; margin: 4px 0; font-size: 14.5px; }
.crm-check.crm-inline { display: inline-block; margin-right: 14px; }
.crm-composer textarea { font-family: inherit; }
.crm-user-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px; margin: 6px 0 10px; }
.crm-kv { border-collapse: collapse; width: 100%; }
.crm-kv td { padding: 3px 0; vertical-align: top; font-size: 14.5px; }
.crm-kv td:first-child { color: var(--faint); width: 108px; padding-right: 10px; white-space: nowrap; }
.crm-thread { max-width: 680px; }
.unsub-page { max-width: 560px; margin: 40px auto; }
.unsub-page form { margin-top: 16px; }

/* ================= pwa module (Stage 25, block A8) =================
   Everything below only fires when the pwa module injects its markup —
   drop the module and these selectors simply never match. */

/* ---------- the install strip (Block C: every page until installed) ----------
   Louder than the old card-only whisper on purpose: a red spine, solid ink
   border, a promise in small caps that installing makes it go away. */
.pwa-strip {
  display: flex; align-items: center; gap: 12px;
  border: 1.5px solid var(--ink); border-left: 5px solid var(--accent);
  background: #FFFDF6;
  padding: 11px 14px; margin: 0 0 18px;
}
.pwa-strip-text { flex: 1; font-size: 13.5px; line-height: 1.45; }
.pwa-strip-note { display: block; margin-top: 2px; font-size: 12px;
  letter-spacing: 0.04em; color: var(--faint); }
.pwa-strip-x { flex: none; color: var(--faint); }

/* ---------- the how-to-install modal ---------- */
.pwa-modal {
  position: fixed; inset: 0; z-index: 90; background: rgba(17,17,17,0.45);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.pwa-modal-card {
  position: relative; background: var(--paper); border: var(--hair);
  max-width: 380px; width: 100%; padding: 22px 24px;
}
.pwa-modal-card ol { margin: 12px 0; padding-left: 20px; line-height: 1.7; }

/* ---------- the App desk on the profile ---------- */
.pwa-desk { margin-top: 14px; }
.pwa-desk-line { margin: 8px 0 0; font-size: 14px; }

/* ================= app mode (standalone display) ================= */

/* the header slims down: Pulse moved to the bottom bar */
body.app-mode .pulse-link { display: none; }

/* the header hides on scroll down, returns on scroll up; the bar stays */
body.app-mode .site-head {
  position: sticky; top: 0; z-index: 60; background: var(--paper);
  transition: transform 0.22s ease;
  padding-top: env(safe-area-inset-top);
}
body.app-mode.head-away .site-head { transform: translateY(-100%); }

/* ---------- the bottom bar ---------- */
.app-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: flex; background: var(--paper); border-top: var(--hair);
  padding-bottom: env(safe-area-inset-bottom);
}
.app-bar-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 0 7px; color: var(--faint); text-decoration: none;
  /* Stage 26 (правка 2): no grey flash on the whole button when tapped —
     the icon itself switches to the active colour instead (see pwa.js). */
  -webkit-tap-highlight-color: transparent;
}
.app-bar-item.on { color: var(--ink); }
.app-bar-item:hover { text-decoration: none; }
.app-bar-ic { position: relative; display: block; }
.app-bar-dot {
  position: absolute; top: -1px; right: -3px; width: 7px; height: 7px;
  background: var(--accent); border-radius: 50%;
}
.app-bar-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; }
body.has-app-bar { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
/* Stage 29 (правка 1): the footer is a website convention — inside the
   installed app there is no footer at all. The class is set before first
   paint (see the boot script), so it never flashes in. */
html.app-mode .site-foot, body.app-mode .site-foot { display: none; }

/* ---------- reading an article in the app: bare chrome ---------- */
body.app-mode.mag-article .ham-menu,
body.app-mode.mag-article #search-open,
body.app-mode.mag-article .head-sections { display: none; }
.app-back { margin-right: 2px; }

/* ================= legal module (Stage 26, правка 7) ================= */
.legal-page { max-width: 680px; margin: 0 auto; }
.legal-body h2 { font-size: 19px; font-weight: 500; margin: 40px 0 14px; }
.legal-body p { margin: 0 0 12px; line-height: 1.65; }
.foot-legal a { color: var(--faint); }
.foot-legal a:hover { color: var(--ink); }

/* ================= Stage 28 — приложение (Часть 3) + хвосты ================= */

/* хвост 2: воздух между Description и Banner image в форме встречи */
.meet-banner-field { display: block; margin-top: 22px; }

/* п.9: в приложении новая точка живёт только на спичбабле нижнего бара —
   гамбургер и пункт меню молчат. На мобильном сайте всё по-старому. */
body.app-mode .ham-menu > summary.has-msg::after { display: none; }
body.app-mode .menu-msg .msg-dot { display: none; }

/* п.12: в приложении экскурсии нет — и ссылка «Replay the site tour» тоже
   не показывается. html-класс ставится ещё до первой отрисовки. */
html.app-mode .tour-replay, body.app-mode .tour-replay { display: none; }

/* п.10: сплэш запуска — чёрный экран и наш знак по центру. Классы вешает
   крошечный скрипт в <head> ещё до отрисовки страницы, поэтому белой
   вспышки нет вовсе; pwa.js плавно гасит сплэш, когда страница готова. */
html.app-splash { background: #fff; }              /* корень тоже белый, чтобы не мигнуло */

html.app-splash::before {
  content: ''; position: fixed; inset: 0; z-index: 9998; background: #000;
}
html.app-splash::after {
  content: ''; position: fixed; left: 50%; top: 50%; z-index: 9999;
  width: 132px; height: 168px; margin: -92px 0 0 -66px;
  background: url(icons/splash.svg) center / contain no-repeat;
  animation: bf-splash-in 0.55s ease both;
}
html.app-splash.app-splash-out::before,
html.app-splash.app-splash-out::after {
  opacity: 0; transition: opacity 0.8s ease;
}
html.app-splash.app-splash-out::after {
  animation: none;        /* отпускаем opacity, чтобы transition смог погасить иконку */
}
@keyframes bf-splash-in {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

/* п.8: подсказка в разделе The app, когда пушам не хватает системы */
.pwa-desk-line.hint { color: var(--faint); font-size: 13px; }

/* ================= Stage 29 — правки перед запуском ================= */
/* Admin compose boxes (write-first message, bulk push) on the Messages page. */
.admin-box { border: var(--hair); border-radius: 10px; padding: 12px 16px; margin: 14px 0; }
.admin-box > summary { cursor: pointer; font-weight: 500; }
.admin-box[open] > summary { margin-bottom: 12px; }
.admin-box .stack { display: flex; flex-direction: column; gap: 10px; max-width: 560px; }
.admin-box .stack label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.form-error { color: #b00020; font-size: 14px; margin: 8px 0; }

/* правка 8 (mobile): the meetings form shows ONE caption under both time
   fields — the per-field hints are hidden, the shared line does the job. */
.meet-time-hint { display: none; color: var(--faint); font-size: 13px; margin: 6px 0 0; }
@media (max-width: 640px) {
  .two-col .field-starts .hint, .two-col .field-ends .hint { display: none; }
  .meet-time-hint { display: block; }
}

/* правка 2: a member's shelf on their profile — full-width section below the
   profile card, styled exactly like the Archive (chips + cover grid, its own
   page-title heading). Reuses .tabs.shelf-tabs / .book-grid.archive-grid. */
.profile-shelf { margin-top: 44px; }
.profile-shelf .page-title { margin-bottom: 14px; }

/* правка 3: a deep-link (push tap) centres its target and flashes it briefly,
   so the eye lands on the exact comment/review. */
@keyframes bf-focus-flash {
  0%   { background: rgba(255, 214, 0, 0.34); }
  100% { background: transparent; }
}
.bf-focus-flash { animation: bf-focus-flash 2.4s ease-out; border-radius: 6px; }
/* clickable names/avatars everywhere: the profile link is invisible until hover */
a.u-link { color: inherit; text-decoration: none; }
a.u-link:hover .c-name, a.u-link:hover .rv-name { text-decoration: underline; }
/* keep the existing flex layout of the head — the link is transparent to it */
a.u-link.c-user, a.u-link.rv-user { display: contents; }

/* ===================================================================
   Landing v3 — the ink-on-paper editorial redesign (Claude Design v3).
   Everything below is scoped to .land3 / l3- classes; the legacy land-*
   rules above keep serving hand-added old blocks and /join.
   =================================================================== */

.land3 { --l3-line: rgba(10,10,10,0.12); margin-top: calc(-1 * var(--wrap-top, 26px)); }
.land3 em { font-family: 'eb-garamond', Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: 0; }

/* Sections: full-bleed hairlines, a 1120px content column inside. */
.l3s { margin-inline: calc(-1 * var(--gutter)); padding: clamp(44px, 6vw, 88px) var(--gutter);
  border-bottom: 1px solid var(--l3-line); }
.land3 .l3s:last-child { border-bottom: 0; padding-bottom: clamp(30px, 4vw, 56px); }
.l3s-bleed { padding-inline: 0; overflow: hidden; }
.l3s-bleed > .l3-in { padding-inline: var(--gutter); }
.l3-in { max-width: 1120px; margin: 0 auto; }

/* --- type --- */
.l3-kicker { margin: 0 0 12px; font-family: 'eb-garamond', Georgia, serif; font-style: italic;
  font-size: 19px; color: rgba(10,10,10,0.55); }
.l3-kicker em { font-style: italic; }
.l3-title { font-weight: 300; font-size: clamp(28px, 3.6vw, 42px); line-height: 1.16;
  letter-spacing: -0.01em; margin: 0 0 18px; max-width: 30ch; }
.l3-title-lg { font-size: clamp(30px, 4.2vw, 48px); line-height: 1.12; letter-spacing: -0.012em; }
.l3-h1 { font-weight: 300; font-size: clamp(34px, 4.6vw, 56px); line-height: 1.12;
  letter-spacing: -0.012em; margin: 0 0 24px; max-width: 22ch; }
.l3-h1 em { font-weight: 500; }
.l3-big { font-weight: 300; font-size: clamp(30px, 5vw, 54px); line-height: 1.12;
  letter-spacing: -0.014em; margin: 0 auto 8px; max-width: 22ch; }
.l3-body p { font-size: 18px; line-height: 1.55; color: rgba(10,10,10,0.75); margin: 0 0 14px; max-width: 54ch; }
.l3-body p:last-child { margin-bottom: 0; }
.l3-head { margin: 0 0 clamp(28px, 4vw, 52px); }
.l3-head .l3-title { margin-bottom: 10px; }
.l3-overline { margin: 0 0 14px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(10,10,10,0.4); }
.l3-cap-serif { font-family: 'eb-garamond', Georgia, serif; font-style: italic; font-size: 19px; }
.l3-mono-hint { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 12px; color: rgba(10,10,10,0.45); margin: 0; }
.l3-stars { margin: 0 0 10px; font-size: 18px; text-align: center; }
.l3-statement { text-align: center; }
.l3-statement .l3-big { margin: 0 auto 6px; }
.l3-statement-body { max-width: 600px; margin: 16px auto 0; }
.l3-statement-body p { max-width: none; color: rgba(10,10,10,0.68); }

/* --- buttons & serif links --- */
.l3-btn { display: inline-block; padding: 14px 30px; font-size: 15px; text-transform: uppercase;
  letter-spacing: 0.1em; border: 1px solid var(--ink); color: var(--ink); }
.l3-btn:hover { background: var(--ink); color: var(--paper); text-decoration: none; }
.l3-btn-solid { background: var(--ink); color: var(--paper); }
.l3-btn-solid:hover { background: var(--paper); color: var(--ink); }
.l3-link-serif { font-family: 'eb-garamond', Georgia, serif; font-style: italic; font-size: 18px;
  border-bottom: 1px solid rgba(10,10,10,0.4); }
.l3-link-serif:hover { text-decoration: none; border-color: var(--ink); }

/* --- animations --- */
@keyframes l3spin  { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes l3float { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-10px) rotate(1deg); } }
@keyframes l3blink { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@keyframes l3left  { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes l3right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes l3coverA { 0%, 42% { opacity: 1; } 50%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes l3coverB { 0%, 42% { opacity: 0; } 50%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes l3word { 0% { opacity: 0; transform: translateY(8px); } 3%, 14% { opacity: 1; transform: none; } 17%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes l3note { 0% { opacity: 0; clip-path: inset(0 100% 0 0); } 6%, 42% { opacity: 1; clip-path: inset(0 0 0 0); } 50%, 100% { opacity: 0; } }
@keyframes l3day  { 0%, 100% { background: transparent; color: var(--ink); } 12%, 88% { background: var(--ink); color: var(--paper); } }
@keyframes l3feed { 0%, 12% { transform: translateY(0); } 30%, 48% { transform: translateY(-28%); } 64%, 82% { transform: translateY(-52%); } 100% { transform: translateY(0); } }

/* --- reveal on scroll (JS adds .l3-hide below the fold, .l3-on in view) --- */
.l3-hide { opacity: 0; transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.l3-hide.l3-on { opacity: 1; transform: none; }

/* --- hero --- */
.l3-hero { overflow: hidden; }
.l3-hero-grid { display: grid; gap: clamp(30px, 5vw, 70px);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: center; }
.l3-hero-kicker { margin-bottom: 22px; }
.l3-hero-body p { font-size: 19px; line-height: 1.5; color: rgba(10,10,10,0.68); max-width: 38ch; }
.l3-hero-actions { display: flex; gap: 14px 18px; flex-wrap: wrap; align-items: center; margin: 30px 0 0; }
.l3-hero-book { position: relative; display: flex; justify-content: center; padding: 20px 0 6px; }
.l3-hero-fig { margin: 0; width: min(340px, 78vw); }
.l3-spark { position: absolute; animation: l3blink 3.4s ease-in-out infinite; }
.l3-spark.s1 { top: 6%; left: 4%; font-size: 22px; }
.l3-spark.s2 { bottom: 8%; right: 6%; font-size: 16px; animation-duration: 4.2s; animation-delay: 1s; }
.l3-ringbox { position: relative; aspect-ratio: 1; display: grid; place-items: center; }
.l3-ring { position: absolute; inset: 0; animation: l3spin 26s linear infinite; }
.l3-ring svg { width: 100%; height: 100%; display: block; }
.l3-ring text { font-family: 'Jost', sans-serif; font-size: 13px; letter-spacing: 0.34em;
  text-transform: uppercase; fill: rgba(10,10,10,0.5); }
.l3-hero-cover { width: 52%; display: block; height: auto;
  box-shadow: 0 24px 50px -18px rgba(10,10,10,0.45); animation: l3float 7s ease-in-out infinite; }
div.l3-hero-cover { aspect-ratio: 2 / 3; }
/* The ring is inset from the box edge and the caption sits well below it —
   the spinning line never cuts into «книга месяца» (правка 1). */
.l3-hero-cap { margin: 30px 0 0; text-align: center; display: grid; gap: 4px; }
.l3-hero-cap a { font-size: 12px; text-transform: uppercase; letter-spacing: 0.18em; color: rgba(10,10,10,0.55); }

/* --- how we read: Раз / Два / Три --- */
.l3-how-grid { display: grid; gap: clamp(22px, 3vw, 40px);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }
.l3-step { border-top: 2px solid var(--ink); padding-top: 18px; display: grid; gap: 14px; }
.l3-step-num { margin: 0; font-family: 'eb-garamond', Georgia, serif; font-style: italic;
  font-size: clamp(34px, 4vw, 46px); line-height: 1; }
.l3-step-txt { margin: 0; font-size: 17.5px; line-height: 1.45; color: rgba(10,10,10,0.8); }
.l3-demo { border: 1px solid rgba(10,10,10,0.18); padding: 18px; min-height: 218px;
  display: grid; align-content: start; gap: 12px; background: var(--paper);
  box-shadow: 0 14px 30px -20px rgba(10,10,10,0.3); }
.l3-demo-top { display: flex; justify-content: space-between; gap: 10px; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.16em; color: rgba(10,10,10,0.45); }
.l3-demo-top span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l3-demo-top span + span { flex: none; }

.l3-fc-window { position: relative; height: 132px; border: 1px solid rgba(10,10,10,0.14); }
.l3-fc-slide { position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
  gap: 7px; padding: 12px; opacity: 0; animation: l3word var(--l3t, 24s) ease-in-out infinite; }
.l3-fc-term { font-family: 'eb-garamond', Georgia, serif; font-size: 26px; line-height: 1.1; }
.l3-fc-def { font-size: 13.5px; line-height: 1.4; color: rgba(10,10,10,0.7); }
.l3-fc-ex { font-size: 12px; font-style: italic; color: rgba(10,10,10,0.5); }
.l3-fc-hint { font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--faint); }
.l3-fc-chips { display: flex; gap: 6px; }
.l3-fc-chips span { border: 1px solid rgba(10,10,10,0.3); padding: 3px 10px; font-size: 11px; }
.l3-fc-chips span.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.l3-note-window { position: relative; height: 152px; }
.l3-note-slide { position: absolute; inset: 0; display: grid; grid-template-columns: 56px 1fr;
  gap: 12px; align-content: start; opacity: 0; animation: l3note var(--l3t, 14s) ease-in-out infinite; }
.l3-note-img { aspect-ratio: 3 / 4; overflow: hidden; border: 1px solid rgba(10,10,10,0.14); }
.l3-note-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.l3-note-term { margin: 0 0 6px; font-family: 'eb-garamond', Georgia, serif; font-style: italic;
  font-size: 17px; line-height: 1.3; }
.l3-note-def { margin: 0; font-size: 13px; line-height: 1.5; color: rgba(10,10,10,0.65); }

.l3-pace { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.l3-pace span { aspect-ratio: 1; border: 1px solid rgba(10,10,10,0.2); display: grid;
  place-content: center; font-size: 11px; animation: l3day var(--l3t, 16s) linear infinite; }
.l3-pace-foot { display: flex; justify-content: space-between; gap: 8px; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.14em; color: rgba(10,10,10,0.45); }

/* --- drifting ribbons (notes, archive, photos) --- */
.l3-mq { display: flex; width: max-content; animation: l3left 70s linear infinite; }
.l3-mq:hover { animation-play-state: paused; }
.l3-mq-set { display: flex; gap: 18px; flex: none; padding-right: 18px; align-items: flex-start; }
.l3-mq-r { animation: l3right 96s linear infinite; }
.l3-mq-l { animation-duration: 80s; }
.l3-ribbon-head { padding-bottom: clamp(26px, 4vw, 44px); }
.l3-ribbon-head .l3-head { margin-bottom: 0; }
.l3-serif-lede p { font-family: 'eb-garamond', Georgia, serif; font-size: clamp(21px, 2.6vw, 28px);
  line-height: 1.4; max-width: 44ch; margin: 0 0 10px; color: var(--ink); }
.l3-ribbon-head .l3-mono-hint { margin-top: 4px; }
.l3-mq-notes .l3-mq-set { gap: 20px; padding-right: 20px; }
.l3-mq-note { width: 250px; flex: none; }
/* Ribbon cards keep their natural height — nothing is chopped: images render
   whole, long definitions clamp to whole lines with an ellipsis. */
.l3-mq-note .nc-clamp { -webkit-line-clamp: 4; }
.l3-arch { display: grid; gap: 18px; }
.l3-arch-cover { flex: none; display: block; }
.l3-arch-cover img { width: 150px; height: auto; display: block; border: 0;
  box-shadow: 0 12px 26px -14px rgba(10,10,10,0.35); }
.l3-photo { width: 260px; aspect-ratio: 4 / 3; object-fit: cover; display: block; flex: none; }

/* --- two-column story sections --- */
.l3-two { display: grid; gap: clamp(26px, 5vw, 64px);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
.l3-two-center { align-items: center; }

/* the club in short: numbered rows + the live book */
.l3-numlist { display: grid; margin-top: 6px; }
.l3-numrow { display: flex; gap: 18px; align-items: baseline; padding: 15px 0;
  border-top: 1px solid rgba(10,10,10,0.14); font-size: 17px; line-height: 1.45; }
.l3-numrow:last-child { border-bottom: 1px solid rgba(10,10,10,0.14); }
.l3-num { font-family: 'eb-garamond', Georgia, serif; font-style: italic; font-size: 20px; min-width: 26px; }
.l3-book-live { display: grid; gap: 24px; grid-template-columns: minmax(120px, 170px) 1fr; align-items: start; }
.l3-book-cover img { width: 100%; display: block; box-shadow: 0 18px 36px -16px rgba(10,10,10,0.4); }
.l3-book-title { margin: 0 0 8px; font-family: 'eb-garamond', Georgia, serif; font-weight: 500;
  font-size: clamp(24px, 2.8vw, 32px); line-height: 1.15; }
.l3-book-by { margin: 0 0 14px; font-family: 'eb-garamond', Georgia, serif; font-style: italic;
  font-size: 18px; color: rgba(10,10,10,0.55); }
.l3-book-syn { margin: 0; font-size: 16px; line-height: 1.55; color: rgba(10,10,10,0.75); }

/* --- the magazine story: two covers of one issue --- */
.l3-mag-body p { max-width: 52ch; }
.l3-tagline { margin: 24px 0 0; padding-top: 18px; border-top: 1px solid rgba(10,10,10,0.14);
  font-family: 'eb-garamond', Georgia, serif; font-style: italic; font-size: 17px; color: rgba(10,10,10,0.5); }
.l3-mag-fig { margin: 0; max-width: 360px; width: 100%; justify-self: center; }
.l3-mag-covers { position: relative; aspect-ratio: 3 / 4; }
.l3-mag-covers img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  box-shadow: 0 22px 44px -18px rgba(10,10,10,0.4); }
.l3-mag-covers.is-two .ca { animation: l3coverA 9s ease-in-out infinite; }
.l3-mag-covers.is-two .cb { animation: l3coverB 9s ease-in-out infinite; }
.l3-mag-fig .l3-mono-hint { margin-top: 12px; text-align: center; }

/* --- fresh from the magazine --- */
.l3-row-head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  flex-wrap: wrap; margin-bottom: clamp(22px, 3vw, 36px); }
.l3-row-head .l3-title { margin: 0; }
.l3-mag-grid { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.l3-art { display: grid; gap: 12px; align-content: start; }
.l3-art:hover { text-decoration: none; }
.l3-art:hover .l3-art-title { text-decoration: underline; text-underline-offset: 3px; }
.l3-art-img { aspect-ratio: 4 / 3; overflow: hidden; }
.l3-art-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.l3-art-kicker { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(10,10,10,0.45); }
.l3-art-title { margin: 0; font-family: 'eb-garamond', Georgia, serif; font-weight: 500; font-size: 21px; line-height: 1.2; }
.l3-art-dek { margin: 0; font-size: 15px; line-height: 1.45; color: rgba(10,10,10,0.65); }

/* --- the app: real platform in a phone shell --- */
.l3-tags { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.l3-tags span { border: 1px solid var(--ink); padding: 9px 16px; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.14em; }
.l3-phone-fig { margin: 0; display: flex; justify-content: center; }
.l3-phone { width: 260px; border: 1px solid var(--ink); border-radius: 34px; padding: 10px;
  background: var(--paper); box-shadow: 0 24px 48px -22px rgba(10,10,10,0.35); }
.l3-phone-scr { aspect-ratio: 9 / 19; border-radius: 25px; border: 1px solid rgba(10,10,10,0.1);
  overflow: hidden; position: relative; }
.l3-phone-head { position: absolute; top: 0; left: 0; right: 0; z-index: 2; background: var(--paper);
  border-bottom: 1px solid rgba(10,10,10,0.12); display: flex; align-items: center;
  justify-content: space-between; padding: 10px 12px 8px; }
.l3-phone-head img { height: 13px; width: auto; display: block; }
.l3-ph-ic { display: inline-flex; gap: 8px; color: var(--ink); }
/* The phone flips between real sections; the bottom tab bar follows along. */
.l3-ph-screen { position: absolute; inset: 40px 12px 52px; display: grid; gap: 10px;
  align-content: start; overflow: hidden; opacity: 0; animation: l3scr 24s ease-in-out infinite; }
@keyframes l3scr { 0% { opacity: 0; transform: translateX(16px); }
  4%, 21% { opacity: 1; transform: none; }
  25%, 100% { opacity: 0; transform: translateX(-12px); } }
.l3-ph-tabbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; background: var(--paper);
  border-top: 1px solid rgba(10,10,10,0.12); display: flex; padding: 8px 6px 10px; }
.l3-ph-tab { flex: 1; display: grid; gap: 3px; justify-items: center; font-size: 7.5px;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink); opacity: 0.3;
  animation: l3tab 24s ease-in-out infinite; }
.l3-ph-tab svg { display: block; }
@keyframes l3tab { 0%, 2% { opacity: 0.3; } 5%, 21% { opacity: 1; } 25%, 100% { opacity: 0.3; } }
.l3-ph-head2 { margin: 0 0 2px; font-size: 9px; text-transform: uppercase; letter-spacing: 0.14em;
  color: rgba(10,10,10,0.45); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l3-ph-read { font-size: 8.5px; color: rgba(10,10,10,0.45); font-weight: 400; }
.l3-ph-fc { border: 1px solid rgba(10,10,10,0.18); min-height: 130px; display: grid;
  place-content: center; text-align: center; gap: 7px; padding: 12px;
  box-shadow: 0 10px 22px -16px rgba(10,10,10,0.3); }
.l3-ph-fc-term { font-family: 'eb-garamond', Georgia, serif; font-size: 22px; line-height: 1.1; }
.l3-ph-fc-hint { font-size: 8px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--faint); }
.l3-ph-center { text-align: center; }
.l3-ph-chips { display: flex; gap: 5px; justify-content: center; }
.l3-ph-chips span { border: 1px solid rgba(10,10,10,0.3); padding: 3px 9px; font-size: 8.5px; }
.l3-ph-chips span.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.l3-ph-art-img { aspect-ratio: 4 / 3; overflow: hidden; margin: 0 0 8px; }
.l3-ph-art-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.l3-ph-art-title { margin: 0 0 4px; font-family: 'eb-garamond', Georgia, serif; font-weight: 600;
  font-size: 13.5px; line-height: 1.25; }
.l3-ph-card { border: 1px solid rgba(10,10,10,0.14); padding: 10px; }
.l3-ph-hero { display: grid; grid-template-columns: 48px 1fr; gap: 10px; align-items: start; }
.l3-ph-hero img { width: 100%; display: block; }
.l3-ph-label { margin: 0 0 4px; font-size: 9px; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(10,10,10,0.45); }
.l3-ph-title { margin: 0 0 2px; font-family: 'eb-garamond', Georgia, serif; font-weight: 600; font-size: 13px; line-height: 1.25; }
.l3-ph-title2 { margin: 0 0 3px; font-size: 11.5px; line-height: 1.4; font-weight: 500; }
.l3-ph-meta { margin: 0; font-size: 10px; color: rgba(10,10,10,0.55); line-height: 1.4; }
.l3-ph-btn { display: inline-block; margin-top: 6px; background: var(--ink); color: var(--paper);
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.12em; padding: 4px 9px; }
.l3-ph-word { margin: 0; font-family: 'eb-garamond', Georgia, serif; font-size: 14px; }
.l3-ph-word span { font-family: 'Jost', sans-serif; font-size: 10.5px; color: rgba(10,10,10,0.55); }
.l3-ph-note { margin: 0; font-size: 11px; font-family: 'eb-garamond', Georgia, serif; font-style: italic; line-height: 1.45; }

/* --- FAQ --- */
.l3-faq-in { max-width: 860px; }
.l3-faq-head { margin-bottom: clamp(24px, 4vw, 44px); }
.l3-faq-head .l3-cap-serif { color: rgba(10,10,10,0.5); margin: 0; }
.l3-faq-title { font-weight: 300; font-size: clamp(34px, 6vw, 64px); line-height: 1; margin: 0; letter-spacing: -0.02em; }
.l3-faq { border-top: 1px solid var(--ink); }
.l3-faq details { border-bottom: 1px solid rgba(10,10,10,0.18); }
.l3-faq summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 16px;
  padding: 20px 0; font-size: clamp(19px, 2.2vw, 24px); font-weight: 400; }
.l3-faq summary::-webkit-details-marker { display: none; }
.l3-faq-num { font-family: 'eb-garamond', Georgia, serif; font-style: italic; font-size: 19px;
  color: rgba(10,10,10,0.45); min-width: 30px; }
.l3-faq-q { flex: 1; }
.l3-faq-plus { font-size: 22px; font-weight: 300; color: rgba(10,10,10,0.4); transition: transform 0.2s; }
.l3-faq details[open] .l3-faq-plus { transform: rotate(45deg); }
.l3-faq-a { padding: 0 0 24px 46px; max-width: 62ch; }
.l3-faq-a p { margin: 0; font-size: 17px; line-height: 1.6; color: rgba(10,10,10,0.78); }
@media (max-width: 540px) { .l3-faq-a { padding-left: 0; } }

/* --- plans (v3 look; /join inherits the card skin) --- */
.l3-plans-head { text-align: center; margin-bottom: clamp(26px, 4vw, 48px); }
.l3-plans-head .l3-kicker { margin-bottom: 12px; }
.l3-plans-head .l3-title { margin: 0 auto; max-width: 26ch; }
.land3 .plan-grid { max-width: none; margin-top: 0; }
.plan-card { position: relative; border-color: rgba(10,10,10,0.35); }
.plan-card.is-featured { border-color: var(--ink); }
.plan-badge { position: absolute; top: -13px; left: 24px; background: var(--paper);
  border: 1px solid var(--ink); font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em;
  padding: 5px 12px; }

/* --- closing call --- */
.l3-cta { text-align: center; }
.l3-cta-mark { width: 110px; height: auto; display: block; margin: 0 auto 22px; }
.l3-cta .l3-big { margin: 0 auto 14px; }
.l3-cta-act { margin: 30px 0 0; }

/* the landing runs edge to edge into the footer — no orphan bottom padding */
body.land-page .wrap { padding-bottom: 0; }
body.land-page .site-foot { margin-top: 0; }

/* landing admin: the photo-ribbon thumbnails */
.land-admin-photos { display: flex; gap: 12px; flex-wrap: wrap; margin: 6px 0 14px; }
.land-admin-photo { display: grid; gap: 4px; justify-items: center; }
.land-admin-photo img { width: 110px; height: 82px; object-fit: cover; display: block; border: var(--hair); }
/* a note demo without an image spans the whole window */
.l3-note-slide > .l3-note-txt:only-child { grid-column: 1 / -1; }

/* ---------- Shop module (Block S) ---------- */
.shop-head { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin-bottom: 8px; }
.shop-head .page-title { margin-bottom: 0; }
.shop-links { font-size: 14px; color: var(--faint); margin: 0; }
.shop-links a { color: var(--ink); }
.shop-links .dot { margin: 0 6px; }
.shop-month { display: grid; grid-template-columns: 300px 1fr; gap: 36px; align-items: start; margin: 18px 0 8px; padding: 22px 0 26px; border-top: var(--hair); border-bottom: var(--hair); }
.shop-month-cover { position: relative; }
.shop-fig { width: 100%; }
.shop-fig .l3-hero-cover.shop-secret { display: grid; place-items: center; aspect-ratio: 2 / 3; }
.shop-secret-cap .l3-cap-serif { font-size: 12px; color: var(--faint); }
.shop-cd-label { margin: 0 0 2px; }
.shop-more { margin-top: 18px; max-width: 620px; }
.shop-more > summary { cursor: pointer; list-style: none; font-size: 13px; text-transform: uppercase; letter-spacing: 0.14em; border-bottom: var(--hair); display: inline-block; padding-bottom: 2px; }
.shop-more > summary::-webkit-details-marker { display: none; }
.shop-more > summary::after { content: ' ↓'; }
.shop-more[open] > summary::after { content: ' ↑'; }
.shop-more-body { padding-top: 14px; }
.shop-more-body p { margin: 0 0 10px; line-height: 1.55; }
.shop-more-body .section-title { margin-top: 18px; }
.shop-secret { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.shop-secret span { font-size: 96px; font-weight: 300; }
.shop-secret-cap { font-size: 12px; color: var(--faint); margin: 8px 0 0; max-width: 220px; }
.shop-title { font-size: clamp(28px, 5vw, 42px); font-weight: 500; letter-spacing: -0.01em; margin: 4px 0 6px; line-height: 1.05; }
.shop-blurb { font-size: 18px; margin: 0 0 12px; }
.shop-window { margin: 14px 0 12px; padding: 12px 16px; border: var(--hair); max-width: 560px; }
.shop-window-line { margin: 0 0 6px; font-size: 16px; }
.shop-countdown { margin: 0 0 8px; }
.shop-cd { font-variant-numeric: tabular-nums; font-size: 30px; letter-spacing: 0.04em; font-weight: 500; }
.shop-window-hint { max-width: none; margin: 0; }
.shop-price { font-size: 20px; margin: 10px 0 12px; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.shop-price b { font-size: 28px; font-weight: 500; }
.shop-rub { font-size: 16px; }
.shop-price-note { font-size: 13px; flex-basis: 100%; }
.shop-buy { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; margin: 6px 0 8px; }
.shop-buy .label { display: block; margin-bottom: 4px; }
.shop-qty { width: 84px; margin: 0; }
.shop-closed { border: 1px dashed var(--faint); padding: 12px 16px; max-width: 560px; }
.shop-closed p { margin: 0 0 6px; }
.shop-why { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; margin: 8px 0 30px; }
.shop-why p { margin: 0 0 10px; line-height: 1.55; }
.shop-steps { padding-left: 20px; margin: 0 0 12px; }
.shop-steps li { margin: 0 0 8px; line-height: 1.5; }
.shop-why .hint { max-width: none; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 26px 20px; }
.shop-card { display: block; }
.shop-card:hover { text-decoration: none; }
.shop-card:hover .book-title { text-decoration: underline; text-underline-offset: 3px; }
.shop-card-price { font-size: 14px; margin-top: 4px; }
.shop-product .shop-price { margin-top: 4px; }
@media (max-width: 720px) {
  .shop-month { grid-template-columns: 1fr; gap: 16px; }
  .shop-month-cover { max-width: 260px; margin: 0 auto; }
  .shop-why { grid-template-columns: 1fr; }
}
/* orders */
.shop-order { display: grid; grid-template-columns: 84px 1fr; gap: 18px; padding: 16px 0; border-bottom: var(--hair); }
.shop-order-cover .cover { max-width: 84px; }
.shop-order-cover .shop-secret span { font-size: 40px; }
.shop-order-title { margin: 0 0 6px; font-size: 18px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.shop-order-state { margin: 0 0 8px; font-size: 14px; }
.shop-order-facts { margin: 0 0 8px; }
.shop-order-facts > div { display: flex; gap: 12px; margin: 3px 0; font-size: 14px; }
.shop-order-facts dt { color: var(--faint); min-width: 130px; }
.shop-order-facts dd { margin: 0; }
.shop-order .hint { max-width: 560px; }
.shop-archive summary { cursor: pointer; }
/* details */
.shop-details-hint { max-width: 640px; margin-bottom: 18px; }
.shop-mode { display: flex; gap: 22px; margin: 4px 0 14px; }
.shop-mode label { display: flex; gap: 6px; align-items: center; cursor: pointer; }
.shop-city-wrap { position: relative; }
.shop-suggest { position: absolute; z-index: 20; left: 0; right: 0; background: var(--paper); border: var(--hair); max-height: 260px; overflow: auto; }
.shop-suggest button { display: block; width: 100%; text-align: left; border: none; background: none; font: inherit; padding: 8px 12px; cursor: pointer; }
.shop-suggest button:hover { background: rgba(10,10,10,0.05); }
.shop-pvz-list { border: var(--hair); max-height: 300px; overflow: auto; margin: 4px 0 8px; }
.shop-pvz { display: block; padding: 8px 12px; border-bottom: 1px solid rgba(10,10,10,0.08); cursor: pointer; font-size: 14px; }
.shop-pvz:last-child { border-bottom: none; }
.shop-pvz.on { background: rgba(10,10,10,0.06); }
.shop-pvz .faint { display: block; font-size: 12px; margin-left: 20px; }
/* checkout */
.shop-checkout { max-width: 560px; }
.shop-checkout .bill-facts dt { min-width: 130px; }
/* peek (standalone English page) */
.shop-peek { max-width: 820px; margin: 0 auto; padding: 24px 0 60px; }
.shop-peek-head { display: flex; align-items: center; gap: 16px; margin: 0 0 30px; padding-bottom: 14px; border-bottom: var(--hair); }
.shop-peek-head .logo { height: 30px; width: auto; display: block; }
.shop-peek-facts { margin: 12px 0 18px; }
.shop-peek .btn[disabled] { opacity: 0.4; cursor: not-allowed; }
/* legal */
.shop-offer ul { padding-left: 20px; }
.shop-offer li { margin: 0 0 8px; line-height: 1.55; }
/* admin */
.shop-admin-links { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 14px; }
.shop-admin-form { max-width: 720px; }
.shop-admin-cover { max-width: 120px; margin: 4px 0 8px; }
.shop-admin-actions form { margin: 0 6px 4px 0; }
.shop-orders-table .input, .shop-batch-table .input { margin: 4px 0 0; padding: 4px 8px; font-size: 14px; }
.shop-ff-stats { padding-left: 18px; margin: 0 0 14px; }
.shop-ff-stats li { margin: 0 0 4px; }
/* the stage: items when the month book is off the shelf */
.shop-stage { display: grid; gap: 30px 40px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); margin: 18px 0 30px; padding-top: 22px; border-top: var(--hair); }
.shop-stage-item { display: grid; grid-template-columns: 240px 1fr; gap: 26px; align-items: start; }
.shop-stage-cover { display: block; }
.shop-stage-cover:hover { text-decoration: none; }
.shop-stage-meta .shop-title { font-size: clamp(24px, 3.6vw, 32px); }
.shop-stage-meta .shop-title a:hover { text-decoration: none; }
.shop-window-sm { margin: 10px 0 12px; padding: 10px 14px; max-width: 420px; }
.shop-window-sm .shop-cd { font-size: 24px; }
.shop-card-cd { font-size: 12px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.shop-price s { font-size: 16px; }
@media (max-width: 640px) {
  .shop-stage-item { grid-template-columns: 1fr; }
  .shop-stage-cover { max-width: 240px; margin: 0 auto; }
}

/* ===== Block G — gift memberships & promo codes ===== */
.gift-page { max-width: 620px; margin: 0 auto; padding: 8px 0 40px; text-align: center; }
.gift-kicker { margin: 0 0 6px; font-family: 'eb-garamond', Georgia, serif; font-style: italic; font-size: 18px; color: rgba(10,10,10,0.7); }
.gift-kicker .ast, .shop-gift .gift-kicker .ast { color: var(--accent); font-style: normal; }
.gift-ring { padding: 6px 0 0; }
.gift-fig { width: min(300px, 72vw); margin: 0 auto; }
.gift-core { position: relative; width: 52%; aspect-ratio: 1; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; align-content: center; gap: 2px; }
.gift-core.is-done { background: var(--accent); }
.gift-core-mark { font-size: 56px; line-height: 1; font-weight: 300; }
.gift-core-period { font-family: 'eb-garamond', Georgia, serif; font-size: clamp(26px, 6vw, 34px); line-height: 1; }
.gift-core-sub { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.7; }
.gift-title { font-family: 'eb-garamond', Georgia, serif; font-style: italic; font-weight: 400; font-size: clamp(30px, 6vw, 44px); line-height: 1.08; margin: 18px 0 10px; letter-spacing: -0.01em; }
.gift-lead { font-size: 17px; line-height: 1.5; margin: 0 auto 18px; max-width: 520px; }
.gift-fromto { font-family: 'eb-garamond', Georgia, serif; font-size: 22px; margin: 0 0 14px; }
.gift-fromto .dot { color: var(--faint); }
.gift-msg { font-family: 'eb-garamond', Georgia, serif; font-style: italic; font-size: 21px; line-height: 1.45; margin: 0 auto 18px; max-width: 520px; quotes: "«" "»"; }
.gift-msg::before { content: open-quote; } .gift-msg::after { content: close-quote; }
.gift-what { font-size: 15px; line-height: 1.5; color: rgba(10,10,10,0.75); max-width: 520px; margin: 0 auto 22px; }
.gift-activate { border: var(--hair); padding: 20px 22px 8px; max-width: 420px; margin: 0 auto; text-align: left; }
.gift-form { margin: 0 0 12px; }
.gift-form-code { max-width: 380px; margin: 0 auto 12px; text-align: left; }
.gift-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.12em; text-transform: uppercase; font-size: 17px; }
.gift-btn { width: 100%; margin-top: 8px; }
.gift-acct { margin: 0 0 12px; font-size: 15px; }
.gift-err { max-width: 480px; margin: 10px auto; }
.gift-how { font-size: 13.5px; color: var(--faint); max-width: 440px; margin: 8px auto 0; line-height: 1.5; }
.gift-cta { margin: 6px 0 14px; }
.gift-thanks { font-family: 'eb-garamond', Georgia, serif; font-style: italic; font-size: 18px; color: rgba(10,10,10,0.7); }
.gift-lang { margin: 26px 0 0; font-size: 13px; }
.gift-lang a { color: var(--faint); border-bottom: 1px solid rgba(10,10,10,0.25); }
.gift-tab-radio { position: absolute; left: -9999px; }
.gift-tabs { display: flex; gap: 0; margin: 0 0 16px; border-bottom: var(--hair); }
.gift-tab { flex: 1; text-align: center; padding: 8px 4px 10px; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
#gtab-signup:checked ~ .gift-tabs .t-signup, #gtab-login:checked ~ .gift-tabs .t-login { color: var(--ink); border-bottom-color: var(--ink); }
.gift-form-signup, .gift-form-login { display: none; }
#gtab-signup:checked ~ .gift-form-signup, #gtab-login:checked ~ .gift-form-login { display: block; }
/* kiosk: the gift product */
.shop-gift .page-title { font-family: 'eb-garamond', Georgia, serif; font-style: italic; font-weight: 400; font-size: clamp(28px, 5vw, 38px); }
.shop-gift-cover span, .shop-stage-gift .shop-gift-cover span { color: var(--accent); font-size: 64px; }
.shop-card-gift .cover.shop-gift-cover { background: var(--ink); display: grid; place-items: center; }
.shop-card-gift .cover.shop-gift-cover span { font-size: 48px; color: var(--accent); }
.gift-buy-form textarea.input { min-height: 96px; resize: vertical; }
.shop-gift-done .gift-kicker { text-align: left; }
.gift-code-big { display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 22px; letter-spacing: 0.1em; padding: 8px 14px; border: var(--hair); margin-top: 4px; }
/* checkout: «I have a promo code» */
.bill-promo { margin: 14px 0 4px; border-top: 1px solid rgba(10,10,10,0.15); padding-top: 10px; }
.bill-promo summary { cursor: pointer; font-size: 14.5px; list-style: none; }
.bill-promo summary::-webkit-details-marker { display: none; }
.bill-promo summary::before { content: '+'; display: inline-block; width: 16px; color: var(--faint); }
.bill-promo[open] summary::before { content: '−'; }
.bill-promo-row { display: flex; gap: 8px; margin: 10px 0 6px; }
.bill-promo-row .input { flex: 1; min-width: 0; }
.bill-promo-err { margin: 6px 0; font-size: 14px; }
.bill-promo-ok { margin: 6px 0 0; font-size: 15px; line-height: 1.5; }
/* admin */
.promo-table code, .promo-facts code { font-size: 14px; }
.promo-search { margin: 0 0 12px; }
.promo-batch-form { max-width: 520px; }

/* ================= Block D: club life & connections (ход 3) ================= */

/* ---------- home (макеты 3a/3b): white hero + rail, one What's next list ---------- */
.homeD { display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas:
  "hero rail-shelf" "next rail-rating" "next ." "cw ."; column-gap: 48px; align-items: start; }
.hd-hero { grid-area: hero; padding-bottom: 4px; }
.hd-next { grid-area: next; padding-top: 28px; }
.hd-shelf { grid-area: rail-shelf; }
.hd-rating { grid-area: rail-rating; border-top: 1px solid var(--ink); margin-top: 24px; padding-top: 20px; }
@media (max-width: 900px) {
  .homeD { grid-template-columns: minmax(0, 1fr); grid-template-areas: "hero" "next" "cw" "rail-shelf" "rail-rating"; }
  .hd-shelf { border-top: 1px solid var(--ink); margin-top: 26px; padding-top: 20px; }
  .hd-rating { margin-top: 22px; padding-top: 16px; }
}

.hd-label { margin: 0 0 14px; }
/* the cover spans the rows; on phones the bar and the button break out to
 * full width under the grid (макет 3b) */
.hd-hero-grid { display: grid; grid-template-columns: 196px minmax(0, 1fr);
  column-gap: 34px; align-items: start; }
.hd-cover { grid-column: 1; grid-row: 1 / span 3; }
.hd-hero-meta { grid-column: 2; }
.hd-cover .cover { width: 100%; max-width: 196px; display: block; }
.hd-cover .cover-blank { width: 196px; height: 294px; display: flex; align-items: center;
  justify-content: center; font-size: 44px; border: var(--hair); background: var(--paper); }
.hd-title { margin: -6px 0 2px; }
.hd-title a:hover { text-decoration: none; }
.hd-synopsis { max-width: 540px; color: rgba(10,10,10,0.72); margin: 10px 0 0; }
.hd-progress { grid-column: 2; display: flex; align-items: center; gap: 14px; max-width: 540px; margin: 18px 0 0; }
.hd-bar { flex: 1; height: 3px; background: rgba(10,10,10,0.12); position: relative; }
.hd-bar span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink); }
.hd-bar-cap { flex: none; font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--faint); }
.hd-cta { grid-column: 2; margin: 18px 0 0; }
@media (max-width: 640px) {
  .hd-hero-grid { grid-template-columns: 132px minmax(0, 1fr); column-gap: 16px; }
  .hd-cover { grid-row: 1; }
  .hd-progress, .hd-cta { grid-column: 1 / -1; }
  .hd-progress { margin-top: 18px; max-width: none; }
  .hd-cover .cover { max-width: 132px; }
  .hd-cover .cover-blank { width: 132px; height: 198px; font-size: 30px; }
  .hd-title { font-size: 26px; }
  .hd-synopsis { font-size: 14px; }
  .hd-cta .btn { display: block; text-align: center; }
}

.hd-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 12px; }
.hd-sec-title { font-size: 26px; font-weight: 500; letter-spacing: -0.01em; margin: 0; }
.hd-sec-link { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--faint); }

.hd-next-list { border-top: 1px solid var(--ink); }
.hd-next-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center; gap: 4px 18px; padding: 15px 2px;
  border-bottom: 1px solid rgba(10,10,10,0.12); }
.hd-next-row:last-child { border-bottom: none; }
.hd-next-row:hover { text-decoration: none; }
.hd-next-row:hover .hd-next-title { text-decoration: underline; text-underline-offset: 3px; }
.hd-date { text-align: center; line-height: 1; }
.hd-date .d { display: block; font-size: 26px; font-weight: 500; }
.hd-date .m { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--faint); margin-top: 4px; }
.hd-next-info { min-width: 0; }
.hd-next-title { display: block; font-size: 20px; font-weight: 500; line-height: 1.25; }
.hd-next-title .label { margin-left: 8px; }
.hd-next-meta { display: block; font-size: 14px; color: var(--faint); margin-top: 2px; }
.hd-next-side { display: inline-flex; align-items: center; gap: 10px; }
.hd-play { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); }
.hd-soon { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--faint); }
@media (max-width: 640px) {
  /* three tiers in one column: the title wraps free, one short local-time
   * line, then the glyphs left + the red countdown right (макет 3b) */
  .hd-next-row { grid-template-columns: 40px minmax(0, 1fr); align-items: start; padding: 14px 2px; }
  .hd-date .d { font-size: 22px; }
  .hd-next-title { font-size: 17px; }
  .hd-next-meta { font-size: 13px; margin-top: 3px; }
  .hd-next-meta .m-utc, .hd-next-meta .m-sep { display: none; }
  .hd-next-side { grid-column: 2; display: flex; width: 100%; margin-top: 8px; }
  .hd-next-side .hd-next-cue, .hd-next-side .hd-play { margin-left: auto; }
}

/* ход 4a (правка владельца): the emptiness stays empty — a watermark in the
   centre of the free column height: pale wreath mark, pale caption, one
   button. No strips, no borders. Desktop only — phones skip the block. */
.hd-quiet { align-self: stretch; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 16px; text-align: center; }
.hd-quiet-mark { width: 56px; height: 56px; opacity: 0.18; }
.hd-quiet-cap { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: 0.14em;
  color: rgba(10,10,10,0.30); }
.hd-quiet-btn { border: 1px solid rgba(10,10,10,0.35); }
@media (max-width: 900px) { .hd-quiet { display: none; } }

.hd-shelf-row { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; }
.hd-mini { width: 88px; flex: none; }
@media (max-width: 640px) {
  /* the fourth cover peeks past the edge — the hint that the shelf scrolls */
  .hd-shelf-row { margin-right: -16px; }
  .hd-mini { width: 92px; }
}
.hd-mini:hover { text-decoration: none; }
.hd-mini:hover .hd-mini-title { text-decoration: underline; text-underline-offset: 3px; }
.hd-mini .cover { width: 100%; aspect-ratio: 2/3; object-fit: cover; display: block; }
.hd-mini .cover-blank { width: 100%; aspect-ratio: 2/3; display: flex; align-items: center;
  justify-content: center; border: var(--hair); font-size: 22px; }
.hd-mini-title { display: block; font-size: 14px; line-height: 1.25; padding-top: 8px; }
.hd-mini-cap { display: block; font-size: 12px; color: var(--faint); }

.hd-rt-rows { display: flex; flex-direction: column; }
.hd-rt-row { display: flex; align-items: center; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid rgba(10,10,10,0.12); }
.hd-rt-row:hover { text-decoration: none; }
.hd-rt-row:hover .hd-rt-name { text-decoration: underline; text-underline-offset: 3px; }
.hd-rt-rank { width: 18px; font-size: 14px; color: var(--faint); flex: none; }
.hd-rt-name { flex: 1; font-size: 16px; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-rt-score { font-size: 16px; }
.hd-rt-mine { font-size: 14px; color: var(--faint); margin: 10px 0 0; padding-top: 2px; }
@media (max-width: 900px) {
  .hd-rt-row:nth-child(n+4) { display: none; }
  .hd-rt-row:nth-child(3) { border-bottom: none; }
  .hd-rt-mine { border-top: 1px solid rgba(10,10,10,0.12); padding-top: 12px; }
  .hd-rt-morespan, .hd-rt-only-more { display: none; }
  .hd-rating { border-bottom: 1px solid var(--ink); padding-bottom: 20px; }
}

.hd-arch-head { margin-top: 36px; }
.hd-arch-title { font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; margin: 0; }

/* ---------- who's reading (shelves counts + faces) ---------- */
.shelf-crowd-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 10px 0 0; }
.shelf-crowd-counts { font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--faint); }
.shelf-crowd-counts .dot { margin: 0 5px; }
.shelf-crowd-faces { display: inline-flex; flex-wrap: wrap; row-gap: 5px; }
.shelf-face { display: inline-block; margin-left: -6px; border-radius: 50%;
  border: 2px solid var(--paper); line-height: 0; }
.shelf-face:first-child { margin-left: 0; }
.shelf-face:hover { position: relative; z-index: 1; }
/* ход 4b: the row never scrolls — 6 faces + a black "+N" counter on desktop,
   4 + counter on phones; a tap on the counter unfolds the full list (app.js) */
.shelf-crowd-faces:not(.is-open) .shelf-face-7up { display: none; }
.shelf-more { box-sizing: content-box; width: 28px; height: 28px; padding: 0;
  background: var(--ink); color: var(--paper); font-family: inherit; font-size: 12px;
  font-weight: 500; line-height: 1; display: inline-flex; align-items: center;
  justify-content: center; cursor: pointer; }
.shelf-more-m { display: none; }
.shelf-crowd-faces.is-open .shelf-more { display: none; }
.shelf-less { display: none; }
.shelf-crowd-faces.is-open .shelf-less { display: inline-flex; align-items: center; gap: 5px;
  width: 100%; justify-content: flex-start; margin: 8px 0 0; padding: 0; border: none;
  background: none; cursor: pointer; font-family: inherit; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--faint);
  text-decoration: underline; text-underline-offset: 3px; }
.shelf-less svg { width: 10px; height: 10px; flex: none; }
@media (max-width: 640px) {
  .shelf-crowd-faces:not(.is-open) .shelf-face-5up { display: none; }
  .shelf-more-d { display: none; }
  .shelf-crowd-faces:not(.is-open) .shelf-more-m { display: inline-flex; }
}
.shelf-crowd { display: block; font-size: 12px; color: var(--faint); margin-top: 2px; }

/* ---------- invite glyphs (макет 3e): bare at rest, filled + captioned on hover ---------- */
.mb-row { display: inline-flex; align-items: center; gap: 4px; }
.mb { position: relative; width: 30px; height: 30px; display: inline-flex; align-items: center;
  justify-content: center; color: var(--ink); outline: none; }
.mb:hover, .mb:focus, .mb:active, .mb.on { background: var(--ink); color: var(--paper); }
.mb-tip { position: absolute; left: 50%; bottom: 36px; transform: translateX(-50%); display: none;
  background: var(--ink); color: var(--paper); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 6px 10px; white-space: nowrap; z-index: 20; }
.mb:hover .mb-tip, .mb:focus .mb-tip, .mb:active .mb-tip, .mb.on .mb-tip { display: block; }
.meet-yours-row { margin: 6px 0 0; display: flex; align-items: center; gap: 10px; }
.meet-yours-nudge { font-size: 13px; font-style: italic; color: var(--faint); }
.meet-city-field .hint { display: block; margin-top: 4px; }

/* ---------- the club map (макет 3d): every member their own dot ---------- */
.club-map { height: 66vh; min-height: 380px; border: var(--hair); margin-top: 18px;
  position: relative; z-index: 0; /* isolate Leaflet's z-indexes under the site menu */ }
.page-sub { color: var(--faint); margin: -6px 0 0; }
.club-dot-wrap { background: none; border: none; }
/* Small plain dots, one per member — no white ring, so a city reads as a
   cluster of people even from the world-scale opening shot. */
.club-dot { display: block; width: 8px; height: 8px; margin: 4px; border-radius: 50%;
  background: var(--ink); }
.club-dot.me { background: var(--accent); }
.club-map .leaflet-popup-content-wrapper { border-radius: 0; background: var(--ink); color: var(--paper);
  box-shadow: 0 8px 22px rgba(10,10,10,0.3);
  transition: transform 0.15s ease; transform-origin: 50% 100%; }
/* Hover grows the black plaque itself a touch; the counter-scale on the
   content keeps the name, avatar and city exactly their size. */
.club-map .leaflet-popup-content-wrapper:hover { transform: scale(1.06); }
.club-map .leaflet-popup-content-wrapper:hover .club-plaque { transform: scale(0.9434); }
.club-map .leaflet-popup-content { margin: 0; font-family: 'Jost', system-ui, sans-serif; }
.club-map .leaflet-popup-tip { background: var(--ink); }
.club-plaque { display: flex; align-items: center; gap: 8px; padding: 5px 10px 5px 5px;
  color: var(--paper); font-size: 12px; letter-spacing: 0.04em; white-space: nowrap;
  transition: transform 0.15s ease; }
.leaflet-container a.club-plaque { color: var(--paper); }
.club-plaque:hover { text-decoration: none; color: var(--paper); }
.club-plaque-ava { width: 22px; height: 22px; border-radius: 50%; background: #fff; overflow: hidden;
  flex: none; display: inline-flex; align-items: center; justify-content: center; }
.club-plaque-ava img { width: 100%; height: 100%; object-fit: cover; }
.club-plaque-blank { color: var(--ink); font-size: 11px; font-weight: 500; }
.leaflet-container { font-family: 'Jost', system-ui, sans-serif; }
.leaflet-container .leaflet-control-attribution { background: rgba(255,255,255,0.85);
  font-size: 11px; color: rgba(10,10,10,0.5); }
.geo-city-line a { color: var(--faint); }

/* ---------- rating (макет 3c): flags up, top-10, your place writ large ---------- */
.rt-flag { vertical-align: -1px; }
.rt-badge { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.rt-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 22px; }
.rt-head .page-title { margin-bottom: 6px; }
.rt-how { position: relative; }
.rt-how summary { list-style: none; cursor: pointer; font-size: 13px; color: var(--faint); }
.rt-how summary::-webkit-details-marker { display: none; }
.rt-how[open] summary { color: var(--ink); }
.rt-how-pop { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; width: min(420px, 86vw);
  background: var(--paper); border: var(--hair); padding: 16px 18px; box-shadow: 0 14px 30px rgba(10,10,10,0.14); }
.rt-how-title { font-weight: 500; margin: 0 0 6px; }
.rt-how-pop p { font-size: 14px; margin: 0 0 10px; }
.rt-how-table { border-collapse: collapse; font-size: 14px; width: 100%; }
.rt-how-table td { padding: 3px 0; vertical-align: top; }
.rt-how-table td:first-child { font-weight: 500; width: 34px; }
.rt-list { border-top: 1px solid var(--ink); margin-top: 6px; max-width: 640px; }
.rt-row { display: flex; align-items: center; gap: 14px; padding: 12px 2px;
  border-bottom: 1px solid rgba(10,10,10,0.12); }
.rt-row:hover { text-decoration: none; }
.rt-row:hover .rt-name { text-decoration: underline; text-underline-offset: 3px; }
.rt-row.me { background: rgba(10,10,10,0.03); }
.rt-rank { width: 24px; font-size: 15px; color: var(--faint); flex: none; }
.rt-name { flex: 1; font-size: 17px; font-weight: 500; min-width: 0; }
.rt-name .you { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); margin-left: 6px; }
.rt-score { font-size: 17px; width: 44px; text-align: right; }
.rt-more { font-size: 15px; color: var(--faint); margin: 14px 0 0; max-width: 640px;
  border-top: 1px solid rgba(10,10,10,0.12); padding-top: 14px; }
.rt-mine { border: 2px solid var(--ink); margin-top: 22px; padding: 20px 24px;
  display: flex; align-items: center; gap: 18px; max-width: 640px; }
.rt-mine .rt-flag { flex: none; }
.rt-mine-place { display: block; font-size: 24px; font-weight: 500; }
.rt-mine-score { display: block; font-size: 15px; color: var(--faint); margin-top: 2px; }
.rt-hof { list-style: none; padding: 0; margin: 8px 0 0; max-width: 640px; }
.rt-hof li { display: flex; align-items: baseline; gap: 14px; padding: 8px 0; border-bottom: 1px solid rgba(10,10,10,0.12); }
.rt-hof-year { font-weight: 500; }
.rt-person-line a { color: inherit; }

/* ===================== Rooms (Block T) — reading rooms for teachers ===================== */
/* The switch at the top of the hamburger: two quiet segments */
.rm-switch { display: inline-flex; border: var(--hair); margin: 0 0 12px; }
.rm-switch a { padding: 5px 14px; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; text-decoration: none; color: var(--ink); }
.rm-switch a + a { border-left: var(--hair); }
.rm-switch a.on { background: var(--ink); color: var(--paper); }
.rm-profile-line a { color: var(--ink); }
.rm-profile-quiet { color: var(--faint); }
.rm-quiet-link { color: var(--faint); text-decoration: underline; }

/* the wing */
.rm-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 18px; }
.rm-head-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.rm-lead { max-width: 640px; margin-top: 6px; }
.rm-summary { display: flex; gap: 22px; flex-wrap: wrap; align-items: baseline; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); padding: 10px 0 18px; border-bottom: var(--hair); }
.rm-summary b { color: var(--ink); font-weight: 500; }
.rm-summary-admin { border: 0; padding-bottom: 6px; }
.rm-empty { text-align: center; padding: 60px 20px; }
.rm-empty-cap { max-width: 520px; margin: 0 auto 18px; color: rgba(10,10,10,.72); }

/* doors */
.rm-doors { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 26px 22px; margin: 28px 0 36px; }
.rm-door { display: block; text-decoration: none; color: var(--ink); perspective: 900px; }
.rm-door-frame { position: relative; display: block; aspect-ratio: 3 / 4.3; border: var(--hair); background: var(--paper); overflow: hidden; }
.rm-door-leaf { position: absolute; inset: 0; background: var(--paper); border-right: var(--hair); transform-origin: left center; transition: transform .55s cubic-bezier(.2,.7,.2,1); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px 12px; z-index: 2;
  background-image: linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink));
  background-size: 1px calc(100% - 28px), 1px calc(100% - 28px), calc(100% - 28px) 1px, calc(100% - 28px) 1px; background-position: 14px 14px, calc(100% - 14px) 14px, 14px 14px, 14px calc(100% - 14px); background-repeat: no-repeat; }
.rm-door-plate { display: inline-block; border: var(--hair); padding: 6px 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .14em; text-align: center; max-width: 100%; line-height: 1.35; background: var(--paper); }
.rm-door-knob { width: 9px; height: 9px; border-radius: 50%; background: var(--ink); position: absolute; right: 22px; top: 52%; }
.rm-door-meta { font-size: 12px; color: var(--faint); letter-spacing: .04em; }
.rm-door-inside { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px 14px; text-align: center; z-index: 1; background: repeating-linear-gradient(0deg, rgba(10,10,10,.045) 0 1px, transparent 1px 7px); }
.rm-door-cover { width: 62px; height: auto; box-shadow: 0 6px 16px rgba(10,10,10,.18); }
.rm-door-book { font-size: 14px; line-height: 1.3; font-weight: 500; }
.rm-door-quiet { color: var(--faint); font-weight: 400; }
.rm-door-state { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--faint); }
.rm-door-faces { display: flex; gap: 2px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.rm-door-faces .avatar { width: 26px; height: 26px; border: 2px solid var(--paper); }
.rm-face-more { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: 10px; }
.rm-door:hover .rm-door-leaf, .rm-door:focus-visible .rm-door-leaf { transform: rotateY(-78deg); }
.rm-door-new .rm-door-frame { border-style: dashed; }
.rm-door-new .rm-door-plate { border: 0; font-size: 26px; }
.rm-door-new:hover .rm-door-leaf { transform: none; }
.rm-door.is-open .rm-door-leaf { transform: rotateY(-78deg); }
@media (hover: none) { .rm-door:hover .rm-door-leaf { transform: none; } .rm-door.is-open .rm-door-leaf { transform: rotateY(-78deg); } }

/* progress wall + the bar */
.rm-progress-wall { margin: 10px 0 30px; }
.rm-wall-row { display: grid; grid-template-columns: 260px minmax(0,1fr); gap: 22px; align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(10,10,10,.12); }
.rm-wall-room { font-size: 14px; }
.rm-wall-room a { color: var(--ink); text-decoration: none; font-weight: 500; }
.rm-bar { display: flex; flex-direction: column; gap: 10px; }
.rm-bar-line { position: relative; display: block; height: 3px; background: rgba(10,10,10,.12); margin: 22px 13px 8px; }
.rm-bar-plan { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink); }
.rm-bar-tick { position: absolute; top: -4px; width: 1px; height: 11px; background: rgba(10,10,10,.35); transform: translateX(-.5px); }
.rm-bar-tick.is-past { background: var(--ink); }
.rm-bar-face { position: absolute; top: -13px; transform: translateY(-50%); transition: transform .2s; }
.rm-bar-face .avatar { width: 26px; height: 26px; border: 2px solid var(--paper); box-shadow: 0 0 0 1px rgba(10,10,10,.25); display: block; }
.rm-bar-face.is-me .avatar { box-shadow: 0 0 0 2px var(--accent); }
.rm-bar-face:hover { transform: translateY(-50%) scale(1.15); z-index: 3; }
.rm-bar-cap { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--faint); }
.rm-bar-compact .rm-bar-line { margin-top: 18px; }

/* one room */
.rm-room-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 22px; }
.rm-room-pick a { color: var(--faint); text-decoration: none; margin-right: 10px; }
.rm-room-pick a.on { color: var(--ink); text-decoration: underline; }
.rm-host a { color: var(--ink); }
.rm-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.rm-grid { display: grid; grid-template-columns: minmax(0,1fr) 300px; grid-template-areas: "hero side" "next side"; column-gap: 48px; align-items: start; }
.rm-hero { grid-area: hero; }
.rm-next { grid-area: next; padding-top: 28px; }
.rm-side { grid-area: side; border-left: 1px solid rgba(10,10,10,.12); padding-left: 24px; }
.rm-hero-grid .hd-cover { grid-row: 1 / span 3; }
.rm-hero-bar { grid-column: 2; max-width: 560px; margin-top: 14px; }
.rm-pointer-cap { display: inline-block; margin-left: 14px; font-size: 13px; color: rgba(10,10,10,.72); }
.rm-plan-fold { margin-top: 18px; }
.rm-plan-list { list-style: none; margin: 0; padding: 0; }
.rm-plan-list li { display: grid; grid-template-columns: 92px minmax(0,1fr) 20px; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(10,10,10,.1); align-items: baseline; }
.rm-plan-date { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); }
.rm-plan-part { color: var(--ink); text-decoration: none; }
.rm-plan-list li.is-now .rm-plan-part { font-weight: 600; }
.rm-plan-list li.is-now .rm-plan-date { color: var(--ink); }
.rm-plan-list li.is-read .rm-plan-part { color: rgba(10,10,10,.55); }
.rm-plan-list li.is-past .rm-plan-date { color: var(--accent); }
.rm-plan-done { color: var(--ink); }
.rm-route-line .rm-chip { margin-right: 8px; }
.rm-chip { display: inline-block; border: 1px solid rgba(10,10,10,.3); padding: 2px 8px; font-size: 12px; text-decoration: none; color: var(--ink); margin: 2px 4px 2px 0; }
.rm-chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.rm-quiet-hero { text-align: center; padding: 40px 20px 30px; }
.rm-quiet-hero .hd-quiet-mark { opacity: .25; }
.rm-quiet-cap { max-width: 460px; margin: 10px auto 18px; color: rgba(10,10,10,.6); }
.rm-next-quiet { color: var(--faint); padding: 14px 0; }
.rm-next-due .hd-next-cue.rm-done { color: var(--faint); }
.rm-people { list-style: none; margin: 0 0 22px; padding: 0; }
.rm-person { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid rgba(10,10,10,.1); font-size: 14px; }
.rm-person a { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.rm-person-host { border-bottom: var(--hair); }
.rm-flags-box { border: var(--hair); padding: 14px 16px; margin-top: 8px; }
.rm-flags-n { display: flex; align-items: center; gap: 8px; font-size: 20px; margin: 0 0 8px; }
.rm-teacher-note { margin-top: 18px; }
.rm-talk { margin-top: 40px; border-top: var(--hair); padding-top: 12px; }
.rm-lock-tag { color: var(--accent); }
.rm-lock-note { display: block; margin-top: 10px; font-size: 13px; color: rgba(10,10,10,.6); max-width: 420px; }
.rm-rt-note { font-size: 13px; line-height: 1.5; color: rgba(10,10,10,.65); text-transform: none; letter-spacing: 0; }
.rm-list { list-style: none; margin: 0; padding: 0; }
.rm-list li { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid rgba(10,10,10,.1); }
.rm-people-manage .row-actions { margin-left: auto; display: flex; gap: 12px; flex-wrap: wrap; }
.rm-seat-line { font-size: 15px; }
.rm-seat-n { width: 74px; display: inline-block; }
.rm-seat-form { display: inline-flex; gap: 6px; align-items: center; }
.rm-inline-date { display: inline-block; width: 170px; margin: 0 6px; }
.rm-bill-card .bill-facts dd { line-height: 1.45; }

/* planner */
.rm-plan-form { max-width: 760px; }
.rm-cal { border: var(--hair); padding: 14px 18px; margin: 14px 0 6px; }
.rm-cal-list { list-style: none; margin: 8px 0 6px; padding: 0; columns: 2; column-gap: 28px; }
.rm-cal-list li { break-inside: avoid; display: grid; grid-template-columns: 96px minmax(0,1fr); gap: 10px; padding: 5px 0; border-bottom: 1px solid rgba(10,10,10,.1); font-size: 14px; }
.rm-cal-list .rm-cal-date { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); align-self: baseline; }
.rm-cal-list li.is-meet { grid-template-columns: 96px minmax(0,1fr); color: var(--accent); }
.rm-meet-row { border: 1px solid rgba(10,10,10,.25); padding: 12px 14px 4px; margin-bottom: 10px; }
.rm-meet-when { display: grid; grid-template-columns: 1fr 1fr 1fr 2fr; gap: 12px; }
.rm-meet-when label, .rm-meet-row .two-col label { font-size: 13px; }
.rm-route-table td { vertical-align: middle; }

/* flash cards */
.rm-cards-head { margin-bottom: 26px; }
.rm-deck-wrap { display: grid; grid-template-columns: 280px minmax(0,1fr); gap: 40px; align-items: start; }
.rm-deck-side { border-right: 1px solid rgba(10,10,10,.12); padding-right: 24px; }
.rm-deck-book { font-size: 18px; margin: 0 0 14px; }
.rm-deck-people { margin-top: 18px; display: flex; flex-direction: column; gap: 6px; }
.rm-deck-person { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.rm-deck { min-height: 420px; position: relative; }
.rm-deck-pile { position: relative; width: 300px; height: 400px; margin: 10px auto; background: none; border: 0; cursor: pointer; padding: 0; display: block; }
.rm-deck-card { position: absolute; inset: 0; border: var(--hair); background: var(--paper); transition: transform .35s; }
.rm-deck-back { background-image: repeating-linear-gradient(45deg, rgba(10,10,10,.08) 0 2px, transparent 2px 10px); }
.rm-deck-back:nth-child(1) { transform: rotate(-4deg) translate(-8px, 6px); }
.rm-deck-back:nth-child(2) { transform: rotate(3deg) translate(6px, 2px); }
.rm-deck-top { display: flex; align-items: center; justify-content: center; background: var(--paper); }
.rm-deck-top span { border: var(--hair); padding: 10px 18px; font-size: 13px; text-transform: uppercase; letter-spacing: .16em; background: var(--paper); }
.rm-deck-pile:hover .rm-deck-top { transform: translateY(-8px) rotate(-1deg); }
.rm-deck-pile:hover .rm-deck-back:nth-child(1) { transform: rotate(-7deg) translate(-14px, 10px); }
.rm-deck-pile:hover .rm-deck-back:nth-child(2) { transform: rotate(5deg) translate(12px, 4px); }
.rm-card { border: var(--hair); background: var(--paper); padding: 22px 26px 26px; max-width: 640px; box-shadow: 8px 8px 0 rgba(10,10,10,.06); animation: rm-deal .45s cubic-bezier(.2,.7,.2,1); }
@keyframes rm-deal { from { opacity: 0; transform: translateY(24px) rotate(-2deg); } to { opacity: 1; transform: none; } }
.rm-card-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: var(--hair); padding-bottom: 8px; margin-bottom: 14px; }
.rm-card-sec { padding: 12px 0; border-bottom: 1px solid rgba(10,10,10,.1); }
.rm-card-sec:last-child { border-bottom: 0; }
.rm-card-sec h3 { margin: 0 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .14em; font-weight: 500; display: flex; gap: 12px; align-items: baseline; }
.rm-card-sec ol { margin: 6px 0 0; padding-left: 20px; }
.rm-card-sec li { margin: 6px 0; line-height: 1.45; }
.rm-card-sec li .rm-term { font-weight: 600; }
.rm-card-sec li .rm-part { color: var(--faint); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; margin-right: 8px; }
.rm-rules-btn { font-size: 12px; text-transform: none; letter-spacing: 0; }
.rm-gotit-stage { text-align: center; padding: 10px 0 0; }
.rm-gotit-n { font-size: 12px; letter-spacing: .12em; color: var(--faint); margin: 0; }
.rm-gotit-word { font-family: 'eb-garamond', Georgia, serif; font-style: italic; font-size: 40px; line-height: 1.1; margin: 6px 0 4px; }
.rm-gotit-def { color: rgba(10,10,10,.72); margin: 0 auto 6px; max-width: 480px; }
.rm-gotit-faces { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 14px 0 8px; }
.rm-gotit-face { background: none; border: 1px solid transparent; padding: 6px 8px; display: inline-flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; font: inherit; font-size: 12px; color: var(--ink); transition: transform .15s, border-color .15s; }
.rm-gotit-face:hover { border-color: var(--ink); transform: translateY(-2px); }
.rm-gotit-face .avatar { width: 44px; height: 44px; }
.rm-gotit-face.is-hit { border-color: var(--accent); }
.rm-skip-x { display: inline-flex; width: 44px; height: 44px; border-radius: 50%; border: 1px dashed rgba(10,10,10,.4); align-items: center; justify-content: center; font-size: 18px; }
.rm-gotit-log { min-height: 1.4em; font-size: 13px; color: var(--faint); margin: 4px 0 0; }
.rm-gotit-done { text-align: center; padding: 16px 0 4px; color: rgba(10,10,10,.72); }

/* pulse tabs */
.rm-pulse-tabs { display: inline-flex; border: var(--hair); margin: 0 0 14px; }
.rm-pulse-tabs a { padding: 6px 16px; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; text-decoration: none; color: var(--ink); }
.rm-pulse-tabs a + a { border-left: var(--hair); }
.rm-pulse-tabs a.on { background: var(--ink); color: var(--paper); }
.rm-club-fold { margin-top: 30px; }
.rm-club-readonly .comment-form { display: none; }
.rm-teachers-line { margin: 26px 0 0; font-size: 14px; }
.rm-teachers-line a { color: var(--ink); }
.rm-teachers-line span { color: var(--faint); margin-left: 6px; }
.rm-checkout-note { margin: 0 0 10px; }

/* the teachers' landing */
.rm-land-hero { padding-top: 40px; }
.rm-land-h1 em { font-family: 'eb-garamond', Georgia, serif; font-style: italic; font-weight: 400; }
.rm-land-lead { max-width: 720px; }
.rm-land-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin: 22px 0 14px; }
.rm-land-price-line { font-size: 15px; color: rgba(10,10,10,.72); }
.rm-land-steps { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 28px; margin-top: 26px; }
.rm-land-step { border-top: var(--hair); padding-top: 14px; }
.rm-land-num { font-family: 'eb-garamond', Georgia, serif; font-size: 40px; line-height: 1; display: block; margin-bottom: 8px; }
.rm-land-step h3, .rm-land-grid h3 { font-size: 18px; margin: 0 0 8px; font-weight: 500; }
.rm-land-step p, .rm-land-grid p { color: rgba(10,10,10,.75); line-height: 1.5; margin: 0; }
.rm-land-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 26px 32px; margin-top: 26px; }
.rm-land-never { margin-top: 34px; padding: 18px 22px; border: var(--hair); max-width: 760px; color: rgba(10,10,10,.75); }
.rm-land-math { max-width: 760px; margin: 22px auto 0; text-align: center; color: rgba(10,10,10,.72); }
.rm-land-school .l3-big { max-width: 760px; }
.rm-land-cta { text-align: center; }
.rm-land-cta .rm-land-ctas { justify-content: center; }
.rm-land-back { margin-top: 22px; }

@media (max-width: 900px) {
  .rm-grid { grid-template-columns: minmax(0,1fr); grid-template-areas: "hero" "next" "side"; }
  .rm-side { border-left: 0; padding-left: 0; border-top: var(--hair); padding-top: 18px; margin-top: 18px; }
  .rm-wall-row { grid-template-columns: minmax(0,1fr); gap: 6px; }
  .rm-deck-wrap { grid-template-columns: minmax(0,1fr); }
  .rm-deck-side { border-right: 0; padding-right: 0; }
  .rm-land-steps, .rm-land-grid { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 640px) {
  .rm-doors { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px 12px; }
  .rm-hero-grid .hd-cover { grid-row: 1; }
  .rm-hero-bar { grid-column: 1 / -1; }
  .rm-pointer-cap { display: block; margin: 8px 0 0; }
  .rm-cal-list { columns: 1; }
  .rm-meet-when { grid-template-columns: 1fr 1fr; }
  .rm-deck-pile { width: 240px; height: 320px; }
  .rm-gotit-word { font-size: 32px; }
  .rm-summary { gap: 12px 18px; }
}
.rm-land-lead.l3-big { font-size: clamp(19px, 2.1vw, 24px); line-height: 1.45; }
.rm-land-h1 { font-size: clamp(34px, 5vw, 62px); }

/* Rooms — round 2 */
.rm-thread-link { text-decoration: underline; color: var(--ink); }
.rm-thread-hint a { color: var(--ink); }
.comment-form.is-locked .c-input { color: var(--faint); cursor: not-allowed; }
.rm-lock-toast { margin: 0 0 14px; }
.rm-meet-row { position: relative; }
.rm-meet-del { position: absolute; right: 8px; top: 8px; background: none; border: 0; padding: 4px; color: var(--faint); cursor: pointer; }
.rm-meet-del:hover { color: var(--accent); }
.rm-next-more { padding-top: 6px; }
.rm-next-more > summary { list-style: none; cursor: pointer; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--faint); padding: 8px 0; }
.rm-next-more > summary::-webkit-details-marker { display: none; }
.rm-next-more[open] > summary { color: var(--ink); }
.rm-pulse-tabs-panel { margin-left: 14px; }
.rm-pulse-tabs-panel a { padding: 3px 10px; font-size: 11px; }
.panel-head .rm-pulse-tabs { vertical-align: middle; }
.rm-launch { border: var(--hair); padding: 14px 18px; margin: 0 0 22px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.rm-launch.is-on { border-color: rgba(10,10,10,.3); }
.rm-launch p { margin: 0; flex: 1 1 320px; }
.rm-gotit-kind { color: var(--faint); letter-spacing: 0; text-transform: none; }
.rm-soon p { max-width: 520px; }
.meet-dg { border: 1px solid rgba(10,10,10,.25); padding: 10px 14px 6px; margin: 0 0 14px; }
.meet-dg-list { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 6px; }
.meet-dg-item { font-size: 14px; display: inline-flex; gap: 6px; align-items: center; }
.gq-text { font-size: 14px; line-height: 1.45; }
.gq-pick { max-width: 620px; }

/* Rooms — round 3 */
.rm-tools { display: flex; gap: 6px 18px; flex-wrap: wrap; align-items: center; }
.rm-tool { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); font-size: 14px; padding: 8px 2px; border-bottom: 1px solid transparent; }
.rm-tool:hover { border-bottom-color: var(--ink); }
.rm-tool svg { flex: none; opacity: .8; }
.rm-tool-primary { background: var(--ink); color: var(--paper); padding: 10px 18px; font-size: 13px; text-transform: uppercase; letter-spacing: .12em; border: 0; }
.rm-tool-primary:hover { border-bottom-color: transparent; opacity: .9; }
.rm-tool-primary svg { opacity: 1; }
.rm-pulse-tabs-panel { margin-left: 0; }
#pulse-body { transition: min-height .2s; }
.c-new-divider { display: flex; align-items: center; gap: 12px; margin: 14px 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--accent); }
.c-new-divider::before, .c-new-divider::after { content: ''; flex: 1; height: 1px; background: var(--accent); opacity: .5; }
.rm-talk-nav { font-size: 13px; color: var(--faint); margin: 0 0 12px; }
.rm-talk-nav a { color: var(--ink); }
.rm-vote { border: var(--hair); padding: 18px 22px 22px; margin: 0 0 30px; background: repeating-linear-gradient(0deg, rgba(10,10,10,.035) 0 1px, transparent 1px 8px); }
.rm-vote .hd-sec-head { margin-bottom: 8px; }
.rm-vote-pairs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px 24px; margin: 14px 0; }
.rm-vote-pair { border: var(--hair); background: var(--paper); padding: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: relative; }
.rm-vote-book { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 8px 6px; }
.rm-vote-book .cover { width: 84px; height: auto; box-shadow: 0 6px 16px rgba(10,10,10,.16); }
.rm-vote-title { font-size: 14px; line-height: 1.3; font-weight: 500; }
.rm-vote-author { font-size: 12px; color: var(--faint); }
.rm-vote-score { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.rm-vote-pick { cursor: pointer; border: 1px solid transparent; transition: border-color .15s, transform .15s; }
.rm-vote-pick input { position: absolute; opacity: 0; pointer-events: none; }
.rm-vote-pick:hover { transform: translateY(-2px); }
.rm-vote-pick:has(input:checked) { border-color: var(--ink); background: rgba(10,10,10,.03); }
.rm-vote-pair::after { content: 'vs'; position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); font-family: 'eb-garamond', Georgia, serif; font-style: italic; font-size: 20px; color: var(--faint); pointer-events: none; }
.rm-vote-flags { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: 13px; border-top: 1px solid rgba(10,10,10,.1); padding-top: 8px; }
.rm-vote-flags .input { width: 70px; padding: 4px 8px; }
.rm-vote-left { font-size: 13px; color: var(--faint); }
.rm-vote-admin { margin-top: 8px; font-size: 13px; }
.rm-bracket { margin: 4px 0 14px; font-size: 14px; }
.rm-bracket-row { margin: 4px 0; display: flex; gap: 14px; flex-wrap: wrap; align-items: baseline; }
.rm-bracket-pair { display: inline-block; }
.rm-vote-won { margin-bottom: 22px; }
.rm-vote-cta { border: var(--hair); padding: 16px 20px; margin: 0 0 26px; display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; max-width: 760px; }
.rm-vote-start { display: contents; }
.rm-vote-cta-title { margin: 0 0 4px; font-size: 18px; }
.rm-vote-btn { display: inline-flex; align-items: center; gap: 10px; }
.rm-edit-route { border: var(--hair); padding: 14px 18px; margin: 0 0 26px; max-width: 760px; }
.bd-wants { display: flex; flex-wrap: wrap; gap: 6px 22px; }
@media (max-width: 640px) { .rm-vote-pairs { grid-template-columns: minmax(0,1fr); } .rm-tools { gap: 4px 14px; } .rm-tool-primary { width: 100%; justify-content: center; } }

/* Rooms — round 4: the bracket as a tree, the winner's plaque, the flags line */
.rm-vote { border: 0; background: none; padding: 0; margin: 0 0 34px; }
.rm-vote-sum { list-style: none; display: flex; align-items: baseline; gap: 16px; cursor: pointer; border-bottom: var(--hair); padding-bottom: 8px; }
.rm-vote-sum::-webkit-details-marker { display: none; }
.rm-vote-when { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--faint); margin-left: auto; }
.rm-vote-sum .fold-ic { flex: none; transition: transform .2s; }
.rm-vote[open] .rm-vote-sum .fold-ic { transform: rotate(180deg); }
.rm-br { padding-top: 16px; }
.rm-br-label { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--faint); margin: 10px 0 8px; }
.rm-br-row { display: grid; grid-template-columns: repeat(var(--rm-cols), minmax(0, 1fr)); gap: 0 6px; align-items: start; }
.rm-br-slot { grid-column: span var(--span); display: flex; justify-content: center; }
.rm-br-cover { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; width: 100%; max-width: 110px; transition: transform .25s, opacity .4s, filter .4s; }
.rm-br-cover .cover { width: 72px; height: auto; box-shadow: 0 6px 16px rgba(10,10,10,.16); }
.rm-br-title { font-size: 12px; line-height: 1.25; }
.rm-br-cover.is-out { opacity: .28; filter: grayscale(1); }
.rm-br-cover.is-won .cover { box-shadow: 0 0 0 2px var(--ink), 0 6px 16px rgba(10,10,10,.16); }
.rm-br-score { display: block; text-align: center; font-size: 12px; color: var(--faint); margin-top: 4px; }
.rm-br-pick { cursor: pointer; position: relative; display: flex; flex-direction: column; align-items: center; }
.rm-br-pick input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.rm-br-pick:hover .rm-br-cover { transform: translateY(-3px); }
.rm-br-pick:has(input:checked) .rm-br-cover { transform: scale(1.12); }
.rm-br-pick:has(input:checked) .rm-br-title { font-weight: 600; }
.rm-br-flags { display: none; align-items: center; gap: 6px; margin-top: 12px; font-size: 13px; }
.rm-br-pick:has(input:checked) .rm-br-flags { display: inline-flex; }
.rm-br-flag { display: inline-flex; align-items: center; gap: 4px; }
.rm-br-minus, .rm-br-plus { width: 22px; height: 22px; border: var(--hair); border-radius: 50%; background: var(--paper); cursor: pointer; font: inherit; line-height: 1; padding: 0; }
.rm-br-minus:hover, .rm-br-plus:hover { background: var(--ink); color: var(--paper); }
.rm-br-lines { display: grid; grid-template-columns: repeat(var(--rm-cols), minmax(0, 1fr)); gap: 0 6px; height: 40px; margin-top: 8px; }
.rm-br-conn { grid-column: span var(--span); position: relative; }
.rm-br-conn span { position: absolute; background: var(--ink); }
.rm-br-conn-up { top: 0; width: 1px; height: 14px; }
.rm-br-conn-l { left: 25%; } .rm-br-conn-r { left: 75%; }
.rm-br-conn-h { top: 14px; left: 25%; right: 25%; height: 1px; transform-origin: center; }
.rm-br-conn-d { top: 14px; left: 50%; width: 1px; height: 26px; transform-origin: top; }
.rm-br-lines:not(.is-drawn) span { opacity: .25; }
.rm-br-lines.is-just .rm-br-conn-up { animation: rm-grow-y .4s both; }
.rm-br-lines.is-just .rm-br-conn-h  { animation: rm-grow-x .4s .35s both; }
.rm-br-lines.is-just .rm-br-conn-d  { animation: rm-grow-y .4s .7s both; }
.rm-br-round.is-fresh .rm-br-row { animation: rm-pop .6s 1.05s both; }
@keyframes rm-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rm-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes rm-pop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.rm-br-note { margin-top: 14px; }
.rm-br-act { margin: 6px 0 0; }
.rm-vote-admin { margin-top: 10px; font-size: 13px; }
/* the winner's plaque */
.rm-won { display: flex; align-items: center; gap: 22px; margin: 0 0 30px; padding: 6px 0; position: relative; }
.rm-won-cover { position: relative; flex: none; width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; }
.rm-won-cover .cover { width: 58px; height: auto; box-shadow: 0 6px 16px rgba(10,10,10,.2); position: relative; z-index: 1; }
.rm-won-ring { position: absolute; inset: 0; width: 120px; height: 120px; animation: rm-spin 14s linear infinite; }
.rm-won-ring text { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; fill: var(--ink); font-family: Jost, sans-serif; }
@keyframes rm-spin { to { transform: rotate(360deg); } }
.rm-won-text { margin: 0; flex: 1; }
.rm-won-x button { font-size: 16px; color: var(--faint); }
/* the flags line */
.rm-flags-line { border: 0; padding: 0; margin-top: 12px; }
.rm-flags-line .rm-flags-n { font-size: 17px; margin: 0; }
.rm-flags-how { font-size: 12px; margin-left: 8px; }
.rm-flags-note { margin: 6px 0 0; }
@media (max-width: 640px) {
  .rm-br-cover .cover { width: 38px; }
  .rm-br-title { font-size: 10px; }
  .rm-br-cover.is-out .rm-br-title { display: none; }
  .rm-br-flags { flex-wrap: wrap; justify-content: center; }
  .rm-won { gap: 12px; } .rm-won-cover, .rm-won-ring { width: 96px; height: 96px; } .rm-won-cover .cover { width: 46px; }
}

/* Rooms — final touches: played rounds all in quiet grey, bare + / −, prize flags */
.rm-br-round.is-played .rm-br-cover { opacity: .3; filter: grayscale(1); }
.rm-br-round.is-played .rm-br-cover.is-won .cover { box-shadow: 0 6px 16px rgba(10,10,10,.16); }
.rm-br-minus, .rm-br-plus { border: 0; background: none; width: auto; height: auto; padding: 0 4px; font-size: 18px; line-height: 1; border-radius: 0; }
.rm-br-minus:hover, .rm-br-plus:hover { background: none; color: var(--accent); }

/* Rooms — prepaid seats: steppers on the checkout and the landing card, the desk, the reports */
.rm-extras { margin: 12px 0 14px; }
.rm-extra { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid rgba(10,10,10,.12); }
.rm-extra:last-of-type { border-bottom: 1px solid rgba(10,10,10,.12); }
.rm-extra-name { font-size: 14px; line-height: 1.35; }
.rm-extra-name .faint { display: block; font-size: 12px; }
.rm-stepper { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.rm-stepper b { min-width: 18px; text-align: center; font-size: 16px; }
.rm-stepper .rm-br-minus, .rm-stepper .rm-br-plus { font-size: 20px; padding: 0 6px; color: var(--ink); }
.rm-stepper .rm-br-minus:hover, .rm-stepper .rm-br-plus:hover { color: var(--accent); }
.rm-extras-card { margin: 4px 0 14px; }
.rm-extras-card .rm-extra { padding: 6px 0; }
.rm-extras-sum { margin: 8px 0 0; font-size: 14px; }
.rm-seat-preview { font-size: 12px; margin-left: 6px; }
.rm-req-list li { flex-wrap: wrap; }
.rm-req-list .row-actions { display: inline-flex; gap: 10px; align-items: center; }
.rm-thread-head .rm-flags-how { font-size: 12px; margin-left: 10px; letter-spacing: 0; text-transform: none; font-weight: 400; vertical-align: middle; }
.rm-thread-note { margin: -6px 0 12px; }
.rm-report-plaque .rm-won-ring text { fill: var(--accent); }
/* the reports under People */
.rm-report { border-top: var(--hair); padding: 14px 0 6px; }
.rm-report:last-of-type { border-bottom: var(--hair); margin-bottom: 26px; }
.rm-report-sum { list-style: none; display: flex; align-items: center; gap: 16px; cursor: pointer; }
.rm-report-sum::-webkit-details-marker { display: none; }
.rm-report-cover { width: 44px; height: auto; flex: none; box-shadow: 0 4px 12px rgba(10,10,10,.16); }
.rm-report-cover.cover-blank { height: 64px; display: flex; align-items: center; justify-content: center; }
.rm-report-head { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rm-report-title { font-size: 17px; }
.rm-report-meta { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--faint); }
.rm-report-tots { font-size: 13px; color: var(--faint); }
.rm-report .fold-ic { flex: none; transition: transform .2s; }
.rm-report[open] .fold-ic { transform: rotate(180deg); }
.rm-report-body { padding: 12px 0 8px; }
.rm-rep-reader { padding: 12px 0; border-top: 1px solid rgba(10,10,10,.12); }
.rm-rep-who { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.rm-rep-pace { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--faint); margin-left: auto; }
.rm-rep-facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; }
.rm-rep-facts > div { display: flex; gap: 10px; font-size: 14px; line-height: 1.45; }
.rm-rep-facts dt { color: var(--faint); min-width: 118px; flex: none; }
.rm-rep-facts dd { margin: 0; min-width: 0; }
.rm-rep-tbr { display: inline-flex; gap: 6px; vertical-align: middle; margin-left: 4px; flex-wrap: wrap; }
.rm-rep-tbr .cover { width: 22px; height: auto; box-shadow: 0 2px 6px rgba(10,10,10,.16); }
.rm-rep-tbr .cover-blank { height: 32px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; }
@media (max-width: 640px) {
  .rm-rep-facts { grid-template-columns: 1fr; }
  .rm-report-sum { flex-wrap: wrap; }
  .rm-rep-pace { margin-left: 0; width: 100%; }
}

/* Rooms — steppers hold still (tabular digits, fixed width); the switch note on the checkout; the sample report */
.rm-stepper b { min-width: 2.2ch; font-variant-numeric: tabular-nums; display: inline-block; text-align: center; }
.rm-stepper .rm-br-minus, .rm-stepper .rm-br-plus { width: 26px; text-align: center; user-select: none; -webkit-user-select: none; }
.rm-seat-stepper { margin-right: 8px; }
.rm-seat-preview { display: inline-block; min-width: 150px; font-variant-numeric: tabular-nums; }
.rm-seat-form { flex-wrap: wrap; }
.bill-switch-note { border: var(--hair); padding: 12px 16px; margin: 0 0 18px; font-size: 14.5px; line-height: 1.5; }
.bill-switch-note p { margin: 0 0 6px; }
.bill-switch-note p:last-child { margin: 0; }
.rm-report-demo { border: 1px solid var(--accent); color: var(--accent); padding: 1px 6px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; vertical-align: middle; }

/* Rooms — help one tap away: the small «i» and the pale «how it works» unfold a note */
.rm-info { display: inline; }
.rm-info-i { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border: 1px solid var(--faint); border-radius: 50%; background: none; color: var(--faint); font: italic 600 10px/1 Georgia, serif; padding: 0; margin-left: 8px; vertical-align: middle; cursor: pointer; }
.rm-info-i:hover { border-color: var(--ink); color: var(--ink); }
.section-title .rm-info-i, .section-title .rm-flags-how { letter-spacing: 0; text-transform: none; font-weight: 400; }
.section-title .rm-flags-how { font-size: 12px; margin-left: 10px; vertical-align: middle; }
.rm-info-note { display: block; margin: 8px 0 12px; max-width: 640px; font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 13.5px; line-height: 1.5; }
.section-title .rm-info-note { font-family: Jost, sans-serif; }
.rm-card-foot { margin: 6px 0 0; font-size: 14px; }
.rm-form-foot { margin: 10px 0 0; }
.rm-lead .rm-info-note { font-style: normal; }
.rm-sample-form { display: inline; }

.bill-switch-pv { display: block; font-size: 12.5px; margin-top: 2px; }

/* ---------- Block M: Ads & Statistics (module smm) ---------- */
.smm-hint { max-width: 760px; }
.smm-status { border: var(--hair); border-radius: 10px; padding: 14px 18px; margin: 14px 0 6px; display: flex; gap: 18px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.smm-status.is-on { border-color: var(--ink); }
.smm-status.is-killed { border-color: var(--accent); }
.smm-status p { margin: 0 0 8px; }
.smm-status-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.smm-red { border-color: var(--accent); color: var(--accent); }
.smm-red.is-on, .smm-red:hover { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.smm-bar { display: inline-block; vertical-align: middle; width: 160px; height: 6px; border: var(--hair); border-radius: 4px; overflow: hidden; margin-left: 8px; }
.smm-bar i { display: block; height: 100%; background: var(--ink); }
.smm-platforms { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; }
.smm-plat .pill { margin: 0 4px; }
.smm-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 10px 0 6px; }
.smm-tile { border: var(--hair); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.smm-tile b { font-size: 24px; font-weight: 500; line-height: 1.1; }
.smm-tile .faint { font-size: 13px; }
.smm-up { color: #2c6b3f; } .smm-down { color: var(--accent); }
.smm-small { font-size: 12px; }
.smm-queue { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin: 10px 0; }
.smm-queue-camp { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.smm-card { border: var(--hair); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.smm-card:hover { border-color: var(--ink); text-decoration: none; }
.smm-card-img { position: relative; display: block; width: 100%; padding-top: 100%; overflow: hidden; background: #f4efe6; }
.smm-card-img img, .smm-card-img .smm-noimg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.smm-card-img img { object-fit: cover; display: block; }
.smm-formats { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin: 4px 0 10px; }
.smm-formats a { display: flex; flex-direction: column; gap: 3px; text-decoration: none; width: 96px; }
.smm-fmt { display: block; width: 96px; overflow: hidden; border: var(--hair); border-radius: 4px; background: #f4efe6; }
.smm-fmt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.smm-pages { font-size: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.smm-pages b { border-bottom: 2px solid var(--ink); }
.smm-trash { white-space: nowrap; }
.smm-noimg { display: flex; align-items: center; justify-content: center; color: var(--faint); font-style: italic; }
.smm-card-t { padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.smm-card-t b { font-weight: 500; font-size: 14px; }
.smm-plan-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 6px 0 12px; font-size: 14px; }
.smm-sel { width: auto; display: inline-block; }
.smm-ads-det { display: inline-block; font-size: 13px; }
.smm-ads-det summary { list-style: none; }
.smm-log p { margin: 0 0 6px; font-size: 14px; }
.smm-log-warn { color: #8a5a00; } .smm-log-stop { color: var(--accent); }
.smm-log-det { display: inline-block; margin-left: 6px; }
.smm-log-det summary { list-style: none; }
.smm-pre { font-size: 11px; line-height: 1.35; white-space: pre-wrap; word-break: break-all; max-height: 320px; overflow: auto; background: #f4efe6; padding: 8px 10px; border-radius: 6px; color: var(--ink); margin: 6px 0 0; }
.smm-edit-cols { display: grid; grid-template-columns: minmax(280px, 420px) 1fr; gap: 28px; align-items: start; }
.smm-edit .stack { display: flex; flex-direction: column; gap: 10px; }
.smm-edit .stack label, .smm-edit-txt label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.smm-preview { border: var(--hair); border-radius: 8px; margin-bottom: 12px; }
.smm-edit-actions { margin: 18px 0; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.smm-reject { border-top: var(--hair); padding-top: 14px; display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; font-size: 14px; }
.smm-reject label { display: flex; flex-direction: column; gap: 4px; min-width: 320px; flex: 1; }
.smm-period { display: flex; gap: 14px; align-items: baseline; font-size: 14px; flex-wrap: wrap; }
.smm-period a.on { border-bottom: 2px solid var(--ink); text-decoration: none; }
.smm-chart { display: flex; gap: 2px; height: 120px; align-items: flex-end; border-bottom: var(--hair); margin-top: 10px; }
.smm-col { flex: 1; display: flex; gap: 1px; align-items: flex-end; height: 100%; }
.smm-col i { flex: 1; display: block; min-height: 1px; }
.smm-c-r { background: var(--ink); } .smm-c-s { background: #2c6b3f; } .smm-c-a { background: var(--accent); }
.smm-key { display: inline-block; width: 10px; height: 10px; vertical-align: middle; }
.smm-anatoly { border: var(--hair); border-radius: 10px; padding: 14px 18px; margin: 10px 0; }
.smm-anatoly-head { display: flex; gap: 12px; align-items: baseline; margin-bottom: 8px; }
.smm-memo { font-family: 'EB Garamond', Georgia, serif; font-size: 17px; line-height: 1.5; max-width: 720px; margin: 8px 0 14px; }
.smm-chat { max-width: 760px; }
.smm-msg { margin: 0 0 12px; }
.smm-msg p { margin: 4px 0 0; }
.smm-msg-anatoly p { font-family: 'EB Garamond', Georgia, serif; font-size: 17px; line-height: 1.5; }
.smm-msg-user p { color: var(--faint); }
.smm-ask { display: flex; gap: 10px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.smm-ask .input { flex: 1; min-width: 260px; }
@media (max-width: 760px) { .smm-edit-cols { grid-template-columns: 1fr; } .smm-status-actions { align-items: flex-start; } }