/* ============================================================
   iSee.mn — redesign prototype
   Design system: clean editorial, navy brand (#031634)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600;700;800;900&display=swap');

:root {
  /* Brand + ink */
  --color-brand:        #031634;
  --color-brand-hover:    #06224a;
  --ink:         #10212f;
  --ink-2:       #4b5663;
  --ink-3:       #6b7280;
  --ink-4:       #8b95a2;

  /* Surfaces */
  --paper:       #ffffff;
  --paper-2:     #f6f7f9;
  --paper-3:     #eef0f3;
  --line:        #e4e7ec;
  --line-2:      #d4d9e0;

  /* Accent — editorial red, used sparingly */
  --accent:      oklch(0.55 0.19 27);     /* breaking / live / active */
  --accent-ink:  oklch(0.46 0.18 27);
  --accent-wash: oklch(0.96 0.04 27);

  /* semantic */
  --success:      oklch(0.52 0.13 152);
  --success-wash: oklch(0.95 0.05 152);
  --warning:      oklch(0.62 0.14 75);
  --warning-wash: oklch(0.96 0.06 75);
  --error:        oklch(0.52 0.19 22);
  --error-wash:   oklch(0.95 0.05 22);

  /* Navy washes */
  --color-brand-wash:   #eef1f6;
  --color-brand-tint:   #dbe2ec;

  /* Type */
  --sans: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* type scale (industry-standard Tailwind steps, base 16) */
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.25rem;
  --fs-2xl:  1.5rem;
  --fs-3xl:  1.875rem;
  --fs-4xl:  2.25rem;

  --lh-tight: 1.2;
  --lh-snug:  1.35;
  --lh-body:  1.6;


  --r-sm: 4px;
  --r:    8px;
  --r-lg: 14px;

  --maxw: 1240px;
  --gut: 28px;


  /* spacing scale (4px base) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-9:  36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;

  /* z-index scale — prevents the "z-index war" */
  --z-nav:      40;
  --z-sticky:   50;
  --z-dropdown: 80;
  --z-scrim:    90;
  --z-drawer:   100;
  --z-overlay:  110;
  --z-modal:    150;
  --z-toast:    200;
  --z-progress: 250;

  /* motion */
  --duration-fast: 150ms;
  --duration:      200ms;
  --duration-slow: 300ms;
  --duration-page: 350ms;
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* spec-standard semantic aliases (role-named surface/text layer) */
  --bg:         var(--paper);
  --surface:    var(--paper-2);
  --surface-2:  var(--paper-3);
  --fg:         var(--ink);
  --fg-muted:   var(--ink-2);
  --fg-subtle:  var(--ink-3);
  --border:     var(--line);
  --border-strong: #8f97a3;   /* form controls — non-text contrast >= 3:1 */
  --accent-fg:  #ffffff;

  --shadow-1: 0 1px 2px rgba(16,33,47,.06), 0 1px 3px rgba(16,33,47,.05);
  --shadow-2: 0 6px 22px rgba(16,33,47,.10), 0 2px 6px rgba(16,33,47,.06);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

img { display: block; max-width: 100%; }

::selection { background: var(--color-brand); color: #fff; }

button { font-family: inherit; cursor: pointer; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }

/* ===================== Top utility bar ===================== */
.utility {
  background: var(--color-brand);
  color: #cdd6e3;
  font-size: var(--fs-xs);
  letter-spacing: .01em;
}
.utility .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 38px;
}
.utility .u-left, .utility .u-right { display: flex; align-items: center; gap: 20px; }
.datestrip { display: flex; align-items: center; gap: 16px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.datestrip::-webkit-scrollbar { display: none; }
.ds-day { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; font-size: var(--fs-xs); color: #8295ad; transition: color .15s var(--ease-out); }
.ds-day b { color: #cdd6e3; font-weight: 700; font-size: var(--fs-xs); }
.ds-day:hover { color: #e9eef5; }
.ds-day:hover b { color: #fff; }
.ds-day.active b { color: #fff; }
.ds-day.active { color: var(--accent); }
.utility .u-right { gap: 12px; }

/* Login button */
.btn-login {
  display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.26); background: transparent;
  color: #e9eef5; font-family: inherit; font-size: var(--fs-xs); font-weight: 700; transition: all .15s var(--ease-out); white-space: nowrap;
}
.btn-login:hover { background: #fff; color: var(--color-brand); border-color: #fff; }
.btn-login svg { width: 14px; height: 14px; }

/* Profile chip + dropdown */
.profile { position: relative; }
.profile-chip {
  display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px 0 3px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06);
  color: #e9eef5; font-family: inherit; font-size: var(--fs-xs); font-weight: 700; transition: all .15s var(--ease-out); cursor: pointer;
}
.profile-chip:hover { background: rgba(255,255,255,.14); }
.profile-chip .profile-name { white-space: nowrap; }
.profile-chip svg { width: 14px; height: 14px; color: #9fb0c6; transition: transform .2s var(--ease-out); }
.profile.open .profile-chip svg { transform: rotate(180deg); }
.profile-menu {
  position: absolute; top: calc(100% + 10px); right: 0; width: 272px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-2);
  padding: 8px; z-index: var(--z-dropdown); color: var(--ink); display: none; transform-origin: top right;
}
.profile.open .profile-menu { display: block; }
@media (prefers-reduced-motion: no-preference) { .profile.open .profile-menu { animation: pmpop .18s ease; } }
@keyframes pmpop { from { opacity: .3; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
.pm-head { display: flex; align-items: center; gap: 12px; padding: 12px 12px 16px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.pm-id { min-width: 0; }
.pm-id b { display: block; font-size: var(--fs-sm); font-weight: 700; }
.pm-id span { display: block; font-size: var(--fs-xs); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-item {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 12px; border: none;
  background: transparent; border-radius: var(--r); font-family: inherit; font-size: var(--fs-sm); font-weight: 600;
  color: var(--ink); text-align: left; transition: background .14s var(--ease-out); cursor: pointer;
}
.pm-item:hover { background: var(--paper-2); }
.pm-ic { display: inline-flex; color: var(--ink-3); }
.pm-ic svg { width: 18px; height: 18px; }
.pm-div { height: 1px; background: var(--line); margin: 8px 4px; }
.pm-out { color: var(--accent-ink); }
.pm-out .pm-ic { color: var(--accent-ink); }

/* Google sign-in modal */
.gmodal-scrim { position: fixed; inset: 0; background: rgba(3,22,52,.5); backdrop-filter: blur(3px); z-index: var(--z-scrim); display: none; }
.gmodal-scrim.open { display: block; }
.gmodal {
  position: fixed; top: 50%; left: 50%; width: 400px; max-width: 92vw; background: #fff; z-index: var(--z-modal);
  border-radius: 16px; box-shadow: var(--shadow-2); padding: 36px 32px 24px; text-align: center;
  transform: translate(-50%, -50%); display: none;
}
.gmodal.open { display: block; }
@media (prefers-reduced-motion: no-preference) { .gmodal.open { animation: gpop .2s ease; } }
@keyframes gpop { from { opacity: .4; transform: translate(-50%, -47%) scale(.96); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.gm-brand { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; }
.gm-g { width: 26px; height: 26px; border-radius: 50%; background: var(--color-brand); color: #fff; font-weight: 700; font-size: var(--fs-base); display: inline-flex; align-items: center; justify-content: center; }
.gm-gname { font-size: var(--fs-lg); font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.gm-title { font-size: var(--fs-xl); font-weight: 600; margin: 8px 0 4px; letter-spacing: -.01em; }
.gm-sub { font-size: var(--fs-sm); color: var(--ink-2); margin: 0 0 24px; }
.gm-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.gm-account { display: flex; align-items: center; gap: 16px; padding: 16px 16px; border: none; background: #fff; font-family: inherit; text-align: left; cursor: pointer; transition: background .14s var(--ease-out); border-bottom: 1px solid var(--line); }
.gm-account:last-child { border-bottom: none; }
.gm-account:hover { background: var(--paper-2); }
.gm-acc { min-width: 0; }
.gm-acc b { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.gm-acc span { display: block; font-size: var(--fs-sm); color: var(--ink-3); }
.gm-plus { width: 38px; height: 38px; border-radius: 50%; border: 1px dashed var(--line-2); display: inline-flex; align-items: center; justify-content: center; color: var(--ink-3); }
.gm-plus svg { width: 18px; height: 18px; }
.gm-foot { font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.5; margin: 20px 4px 0; }
.util-date { color: #e9eef5; font-weight: 600; text-transform: capitalize; }
.util-link { color: #9fb0c6; transition: color .15s var(--ease-out); }
.util-link:hover { color: #fff; }
.util-weather { display: flex; align-items: center; gap: 8px; color: #cdd6e3; }
.util-weather b { color: #fff; font-weight: 600; }
.util-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; }
.util-live { display: flex; align-items: center; gap: 8px; color: #fff; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: var(--fs-xs); }
.util-live .util-dot { animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

/* Language switch */
.lang-switch { display: inline-flex; align-items: center; gap: 8px; }
.lang-globe { display: inline-flex; align-items: center; color: #7e92ab; }
.lang-globe svg { width: 15px; height: 15px; }
.lang-opt { border: none; background: transparent; padding: 0; font-family: inherit; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; color: #7e92ab; transition: color .15s var(--ease-out); line-height: 1; }
.lang-opt:not(.active):hover { color: #e9eef5; }
.lang-opt.active { color: #fff; }
.lang-sep { color: #3f5570; font-size: var(--fs-xs); user-select: none; }

/* Drawer block variant — segmented pill */
.lang-switch.lang-block { display: flex; gap: 0; width: 100%; border: 1px solid var(--line-2); border-radius: 999px; padding: 3px; margin-bottom: 12px; }
.lang-switch.lang-block .lang-globe, .lang-switch.lang-block .lang-sep { display: none; }
.lang-switch.lang-block .lang-opt { flex: 1; padding: 8px 0; border-radius: 999px; color: var(--ink-2); font-size: var(--fs-sm); transition: all .15s var(--ease-out); }
.lang-switch.lang-block .lang-opt.active { background: var(--color-brand); color: #fff; }
.lang-switch.lang-block .lang-opt:not(.active):hover { color: var(--color-brand); }

/* ===================== Masthead ===================== */
.masthead {
  background: var(--color-brand);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.masthead .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
}
.mast-right { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }

.wordmark {
  display: inline-flex; align-items: baseline; gap: 1px;
  font-weight: 700; letter-spacing: -.03em; line-height: 1;
  font-size: var(--fs-4xl); color: #fff;
}
.wordmark .dot { color: var(--accent); }
.wordmark .mn { font-size: var(--fs-base); font-weight: 700; color: #9fb0c6; letter-spacing: 0; margin-left: 2px; }
.mast-tagline {
  font-size: var(--fs-xs); letter-spacing: .22em; text-transform: uppercase;
  color: #8295ad; margin-top: 8px; font-weight: 600;
}
.masthead .icon-btn { color: #e9eef5; }
.masthead .icon-btn:hover { background: rgba(255,255,255,.12); }
.mast-brand { display: flex; flex-direction: column; align-items: flex-start; }
.brand-row { display: inline-flex; align-items: center; }
.brand-logo { height: 44px; width: auto; display: block; }
.brand-logo.hide { display: none; }
.brand-fallback { display: none; }
.brand-logo.hide + .brand-fallback { display: inline-flex; }

.icon-btn {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid transparent; background: transparent; color: var(--ink);
  transition: background .15s, border-color .15s var(--ease-out);
}
.icon-btn:hover { background: var(--paper-2); }
.icon-btn svg { width: 20px; height: 20px; }

.btn-sub {
  height: 40px; padding: 0 20px; border-radius: 999px; border: none;
  background: var(--color-brand); color: #fff; font-weight: 700; font-size: var(--fs-sm);
  letter-spacing: .01em; transition: transform .12s, background .15s var(--ease-out); white-space: nowrap;
}
.btn-sub:hover { background: #06224a; transform: translateY(-1px); }

.menu-toggle { display: none; }
#searchOpenM { display: none; }

/* ===================== Category nav ===================== */
.catnav {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.catnav.shrunk { box-shadow: var(--shadow-1); }
.catnav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 2px; height: 50px; overflow-x: auto; scrollbar-width: none; }
.catnav .wrap::-webkit-scrollbar { display: none; }
.catnav-mini {
  display: none; align-items: center; font-weight: 700; font-size: var(--fs-xl);
  color: var(--color-brand); letter-spacing: -.02em; margin-right: 16px;
}
.catnav-mini .dot { color: var(--accent); }
.cat-link {
  position: relative; white-space: nowrap; padding: 16px 12px; font-size: var(--fs-sm);
  font-weight: 600; color: var(--ink-2); transition: color .15s var(--ease-out); flex: none;
}
.cat-link:hover { color: var(--color-brand); }
.cat-link.active { color: var(--color-brand); }
.cat-link.active::after {
  content: ''; position: absolute; left: 13px; right: 13px; bottom: 0; height: 3px;
  background: var(--accent); border-radius: 3px 3px 0 0;
}
.cat-link.home { color: var(--color-brand); }
.cat-link.home svg { width: 16px; height: 16px; vertical-align: -2px; }

/* ===================== Page / main ===================== */
main { min-height: 60vh; }
.page { animation: none; }
@media (prefers-reduced-motion: no-preference) {
  .page { animation: rise .4s ease both; }
}
@keyframes rise { from { transform: translateY(8px); } to { transform: none; } }

.section-pad { padding-block: 36px; }

/* Section header */
.sec-head {
  display: flex; align-items: center; gap: 16px; margin: 0 0 20px;
}
.sec-head h2 {
  margin: 0; font-size: var(--fs-base); font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; color: var(--color-brand); white-space: nowrap;
}
.sec-head .rule { flex: 1; height: 1px; background: var(--line-2); }
.sec-head .more { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); display: inline-flex; align-items: center; gap: 4px; }
.sec-head .more:hover { color: var(--accent-ink); }
.sec-head .more svg { width: 14px; height: 14px; }
.sec-head .accent-bar { width: 4px; height: 16px; border-radius: 2px; background: var(--accent); }

/* ===================== Category label ===================== */
.cat-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--accent-ink);
}
.cat-tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cat-tag.muted { color: var(--ink-3); }

/* ===================== Image placeholder fallback ===================== */
.thumb { position: relative; }
.ph-label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-4); background:
    repeating-linear-gradient(135deg, var(--paper-2) 0 12px, var(--paper-3) 12px 24px);
  text-align: center; padding: 8px; z-index: 0;
}
.thumb img { position: relative; z-index: 1; }
.thumb img.img-fail { opacity: 0; }
img.rthumb.img-fail { background:
  repeating-linear-gradient(135deg, var(--paper-2) 0 8px, var(--paper-3) 8px 16px); }
.thumb-badge {
  position: absolute; left: 10px; bottom: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px 5px 8px;
  background: rgba(3,22,52,.82); color: #fff; border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em; backdrop-filter: blur(4px);
}
.thumb-badge svg { width: 13px; height: 13px; }

/* ===================== Article card ===================== */
.card { display: block; }
.card[data-href] { cursor: pointer; }
.card .thumb {
  position: relative; overflow: hidden; border-radius: var(--r);
  background: var(--paper-3); aspect-ratio: 16/10;
}
.card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.card:hover .thumb img { transform: scale(1.05); }
.card .title { color: var(--ink); transition: color .15s var(--ease-out); text-wrap: pretty; }
.card:hover .title { color: var(--accent-ink); }
.card .meta { display: flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: var(--fs-xs); }
.card .meta .author { color: var(--ink-2); font-weight: 600; }
.card .meta .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-4); }

/* Hero lead */
.hero { display: grid; grid-template-columns: 1.55fr 1fr; gap: 32px; padding: 32px 0 8px; }
.hero-lead .thumb { aspect-ratio: 16/10; margin-bottom: 16px; }
.hero-lead .title { font-size: var(--fs-4xl); line-height: 1.16; font-weight: 600; letter-spacing: -.02em; margin: 12px 0 12px; }
.hero-lead .dek { font-size: var(--fs-base); color: var(--ink-2); line-height: 1.55; margin: 0 0 16px; max-width: 60ch; }
.hero-side { display: flex; flex-direction: column; }
.hero-side .side-item { display: grid; grid-template-columns: 1fr 104px; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.hero-side .side-item:first-child { border-top: none; padding-top: 0; }
.hero-side .side-item .title { font-size: var(--fs-lg); font-weight: 600; line-height: 1.22; margin: 8px 0 0; letter-spacing: -.01em; }
.hero-side .side-item .thumb { aspect-ratio: 1; border-radius: var(--r); }

/* Feed grid */
.feed-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 28px; }
.feed-grid .card .thumb { margin-bottom: 12px; }
.feed-grid .card .title { font-size: var(--fs-lg); font-weight: 600; line-height: 1.24; letter-spacing: -.01em; margin: 8px 0 8px; }

/* Two-column main + sidebar */
.layout { display: grid; grid-template-columns: 1fr 340px; gap: 48px; align-items: start; }

/* List rows (latest) */
.row-item {
  display: grid; grid-template-columns: 150px 1fr; gap: 20px;
  padding: 20px 0; border-top: 1px solid var(--line);
}
.row-item:first-child { border-top: none; }
.row-item .thumb { aspect-ratio: 16/11; border-radius: var(--r); }
.row-item .title { font-size: var(--fs-xl); font-weight: 600; line-height: 1.3; letter-spacing: -.01em; margin: 8px 0 12px; }
.row-item .dek { display: none; }

/* Compact list (no image) */
.compact { display: flex; flex-direction: column; }
.compact .c-item { padding: 12px 0; border-top: 1px solid var(--line); }
.compact .c-item:first-child { border-top: none; }
.compact .c-item .title { font-size: var(--fs-base); font-weight: 600; line-height: 1.32; }
.compact .c-item .meta { margin-top: 8px; }

/* ===================== Sidebar ===================== */
.aside-box { margin-bottom: 36px; }
.aside-box.sticky { position: sticky; top: 64px; }

/* Most-read numbered */
.ranked { display: flex; flex-direction: column; }
.rank-item {
  display: grid; grid-template-columns: 34px 1fr auto; gap: 16px; align-items: start;
  padding: 16px 0; border-top: 1px solid var(--line);
}
.rank-item:first-child { border-top: none; padding-top: 4px; }
.rank-num { font-size: var(--fs-2xl); font-weight: 700; line-height: 1; color: var(--color-brand-tint); font-feature-settings: 'tnum'; }
.rank-item:hover .rank-num { color: var(--accent); }
.rank-item .title { font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; }
.rank-item .rthumb { width: 56px; height: 56px; border-radius: var(--r-sm); object-fit: cover; background: var(--paper-3); }
.rank-comments { font-size: var(--fs-xs); color: var(--ink-3); display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; }
.rank-comments svg { width: 13px; height: 13px; }

/* Tabs */
.tabs { display: flex; gap: 4px; background: var(--paper-2); padding: 4px; border-radius: 999px; margin-bottom: 8px; }
.tab {
  flex: 1; border: none; background: transparent; padding: 8px 12px; border-radius: 999px;
  font-size: var(--fs-sm); font-weight: 700; color: var(--ink-2); transition: all .15s var(--ease-out);
}
.tab.active { background: var(--paper); color: var(--color-brand); box-shadow: var(--shadow-1); }

/* Poll */
.poll { background: var(--color-brand); color: #fff; border-radius: var(--r-lg); padding: 24px; }
.poll .poll-eyebrow { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8fa3bd; display: flex; align-items: center; gap: 8px; }
.poll .poll-q { font-size: var(--fs-lg); font-weight: 700; line-height: 1.35; margin: 12px 0 20px; }
.poll-opt {
  display: block; width: 100%; text-align: left; position: relative; overflow: hidden;
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05); color: #fff;
  border-radius: var(--r); padding: 12px 16px; margin-bottom: 8px; font-size: var(--fs-sm); font-weight: 600;
  transition: background .15s, border-color .15s var(--ease-out);
}
.poll-opt:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); }
.poll-opt .fill { position: absolute; inset: 0; background: var(--accent); opacity: .32; width: 0; transition: width .7s cubic-bezier(.2,.7,.2,1); z-index: 0; }
.poll-opt .opt-row { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 12px; }
.poll-opt .pct { opacity: 0; transition: opacity .3s var(--ease-out); font-variant-numeric: tabular-nums; }
.poll.voted .poll-opt .pct { opacity: 1; }
.poll-total { font-size: var(--fs-xs); color: #8fa3bd; margin-top: 12px; }

/* Newsletter / ad slot */
.promo {
  border: 1px dashed var(--line-2); border-radius: var(--r-lg); padding: 24px;
  background: var(--paper-2); text-align: center;
}
.promo .ttl { font-weight: 700; font-size: var(--fs-base); margin: 0 0 8px; color: var(--color-brand); }
.promo p { margin: 0 0 16px; font-size: var(--fs-sm); color: var(--ink-2); }
.promo .news-form { display: flex; gap: 8px; }
.promo input {
  flex: 1; height: 42px; border: 1px solid var(--line-2); border-radius: var(--r); padding: 0 12px;
  font-family: inherit; font-size: var(--fs-sm); background: #fff; color: var(--ink);
}
.promo input:focus { outline: 2px solid var(--color-brand); outline-offset: -1px; }
.promo .go { height: 42px; padding: 0 16px; border: none; border-radius: var(--r); background: var(--color-brand); color: #fff; font-weight: 700; }

.ad-slot {
  border: 1px solid var(--line); border-radius: var(--r); background:
    repeating-linear-gradient(45deg, var(--paper-2) 0 10px, var(--paper-3) 10px 20px);
  display: flex; align-items: center; justify-content: center; color: var(--ink-3);
  font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
  min-height: 250px;
}

/* ===================== Category strip (color block band) ===================== */
.cat-band { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* ===================== Article page ===================== */
.article { max-width: 760px; margin: 0 auto; padding: 40px 0 20px; }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--ink-3); margin-bottom: 20px; }
.breadcrumb a:hover { color: var(--accent-ink); }
.breadcrumb svg { width: 13px; height: 13px; }
.art-title { font-size: var(--fs-4xl); line-height: 1.16; font-weight: 600; letter-spacing: -.02em; margin: 12px 0 20px; text-wrap: balance; }
.art-dek { font-size: var(--fs-xl); color: var(--ink-2); line-height: 1.55; margin: 0 0 24px; font-weight: 600; }
.art-byline { display: flex; align-items: center; gap: 12px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.art-byline .av { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--color-brand-wash); }
.art-byline .bl-info { flex: 1; }
.art-byline .bl-name { font-weight: 700; font-size: var(--fs-sm); }
.art-byline .bl-date { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 2px; }
.art-share { display: flex; gap: 8px; }
.share-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-2); background: #fff; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2); transition: all .15s var(--ease-out); }
.share-btn:hover { background: var(--color-brand); color: #fff; border-color: var(--color-brand); }
.share-btn svg { width: 17px; height: 17px; }

.art-hero { margin: 28px 0; }
.art-hero img { width: 100%; border-radius: var(--r); background: var(--paper-3); }
.art-hero figcaption { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 8px; padding-left: 2px; }

.art-body { font-size: var(--fs-lg); line-height: 1.72; color: #1c2a38; }
.art-body p { margin: 0 0 24px; }
.art-body p:first-child::first-letter { initial-letter: 2.4; font-weight: 700; margin-right: 12px; color: var(--color-brand); }
.art-body h3 { font-size: var(--fs-base); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--color-brand); margin: 36px 0 12px; line-height: 1.35; }
.art-body strong { font-weight: 700; color: var(--ink); }
.art-body a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.art-body blockquote {
  margin: 28px 0; padding: 4px 0 4px 24px; border-left: 4px solid var(--accent);
  font-size: var(--fs-xl); line-height: 1.5; font-weight: 600; color: var(--ink);
}
.art-body figure { margin: 28px 0; }
.art-body figure img { width: 100%; border-radius: var(--r); background: var(--paper-3); }
.art-body figure figcaption { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 8px; }

.art-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 32px 0; }
.tag-chip { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; transition: all .15s var(--ease-out); }
.tag-chip:hover { border-color: var(--color-brand); color: var(--color-brand); }

.art-footer-share { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 8px 0 0; }
.art-footer-share .label { font-weight: 700; }

/* related */
.related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.related-grid .card .thumb { margin-bottom: 12px; aspect-ratio: 16/11; }
.related-grid .card .title { font-size: var(--fs-base); font-weight: 600; line-height: 1.26; margin: 8px 0; }

/* comments preview */
.comment-cta { display: flex; align-items: center; gap: 16px; background: var(--paper-2); border-radius: var(--r-lg); padding: 20px 24px; margin: 8px 0; }
.comment-cta .cc-num { font-size: var(--fs-3xl); font-weight: 700; color: var(--color-brand); }
.comment-cta .cc-txt b { display: block; font-size: var(--fs-base); }
.comment-cta .cc-txt span { font-size: var(--fs-sm); color: var(--ink-2); }
.comment-cta .cc-btn { margin-left: auto; }

/* ===================== Comments ===================== */
.comments { margin: 20px 0 8px; scroll-margin-top: 72px; }
.cm-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 2px solid var(--color-brand); margin-bottom: 24px; }
.cm-title { margin: 0; font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -.01em; color: var(--color-brand); }
.cm-title span { color: var(--ink-3); font-weight: 700; }
.cm-sort { display: flex; gap: 4px; background: var(--paper-2); padding: 4px; border-radius: 999px; }
.cm-sort-btn { border: none; background: transparent; padding: 8px 16px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 700; color: var(--ink-2); transition: all .15s var(--ease-out); white-space: nowrap; }
.cm-sort-btn.active { background: #fff; color: var(--color-brand); box-shadow: var(--shadow-1); }

.cm-form { display: grid; grid-template-columns: 40px 1fr; gap: 16px; margin-bottom: 32px; }
.cm-form-body { min-width: 0; }
.cm-form textarea {
  width: 100%; border: 1px solid var(--line-2); border-radius: var(--r); padding: 12px 16px;
  font-family: inherit; font-size: var(--fs-base); line-height: 1.5; color: var(--ink); resize: vertical;
  min-height: 48px; transition: border-color .15s, box-shadow .15s var(--ease-out); background: #fff;
}
.cm-form textarea:focus { outline: none; border-color: var(--color-brand); box-shadow: 0 0 0 3px var(--color-brand-wash); }
.cm-form-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; }
.cm-note { font-size: var(--fs-xs); color: var(--ink-3); }
.cm-submit { height: 40px; padding: 0 24px; border: none; border-radius: 999px; background: var(--color-brand); color: #fff; font-weight: 700; font-size: var(--fs-sm); transition: background .15s, transform .12s var(--ease-out); }
.cm-submit:hover { background: var(--color-brand-hover); transform: translateY(-1px); }

.cm-list { display: flex; flex-direction: column; }
.comment { display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding: 20px 0; border-top: 1px solid var(--line); }
.comment:first-child { border-top: none; }
.comment.is-reply { grid-template-columns: 34px 1fr; padding: 16px 0 4px; border-top: none; }
.cm-body { min-width: 0; }
.cm-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cm-name { font-weight: 700; font-size: var(--fs-sm); color: var(--ink); white-space: nowrap; }
.cm-time { font-size: var(--fs-xs); color: var(--ink-3); white-space: nowrap; }
.cm-text { margin: 8px 0 12px; font-size: var(--fs-base); line-height: 1.6; color: #233140; text-wrap: pretty; }
.cm-actions { display: flex; align-items: center; gap: 20px; }
.cm-like, .cm-reply { display: inline-flex; align-items: center; gap: 8px; border: none; background: transparent; padding: 0; font-family: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); transition: color .15s var(--ease-out); }
.cm-like svg { width: 16px; height: 16px; }
.cm-like:hover, .cm-reply:hover { color: var(--accent-ink); }
.cm-like.liked { color: var(--accent); }
.cm-like.liked svg { fill: var(--accent-wash); }
.cm-replies { margin-top: 8px; padding-left: 8px; border-left: 2px solid var(--line); }
.cm-replybox { display: grid; grid-template-columns: 34px 1fr; gap: 12px; margin-top: 12px; }
.cm-replybox textarea { width: 100%; border: 1px solid var(--line-2); border-radius: var(--r); padding: 12px 12px; font-family: inherit; font-size: var(--fs-sm); resize: vertical; min-height: 40px; }
.cm-replybox textarea:focus { outline: none; border-color: var(--color-brand); }
.cm-replybox .cm-submit { height: 36px; padding: 0 16px; font-size: var(--fs-sm); margin-top: 8px; }
.comment.cm-new { animation: cmIn .4s ease; }
@keyframes cmIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.comment.cm-hidden { display: none; }
.cm-more {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  margin-top: 20px; padding: 16px; border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--paper-2); color: var(--color-brand); font-family: inherit; font-weight: 700; font-size: var(--fs-sm);
  transition: all .15s var(--ease-out);
}
.cm-more:hover { background: var(--color-brand); color: #fff; border-color: var(--color-brand); }
.cm-more svg { width: 17px; height: 17px; }
.cm-more-n { font-variant-numeric: tabular-nums; }

/* ===================== Category / Search pages ===================== */
.page-header { padding: 40px 0 28px; border-bottom: 1px solid var(--line); margin-bottom: 32px; }
.page-header .ph-kicker { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); }
.page-header h1 { font-size: var(--fs-4xl); font-weight: 600; letter-spacing: -.02em; margin: 8px 0 8px; }
.page-header p { margin: 0; color: var(--ink-2); font-size: var(--fs-base); }

.search-bar { display: flex; gap: 12px; max-width: 600px; }
.search-bar input { flex: 1; height: 52px; border: 1px solid var(--line-2); border-radius: var(--r); padding: 0 20px; font-size: var(--fs-lg); font-family: inherit; color: var(--ink); }
.search-bar input:focus { outline: 2px solid var(--color-brand); outline-offset: -1px; }
.search-bar .sb-go { height: 52px; padding: 0 28px; border: none; border-radius: var(--r); background: var(--color-brand); color: #fff; font-weight: 700; font-size: var(--fs-base); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 8px; }
.chip { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; transition: all .15s var(--ease-out); }
.chip:hover { border-color: var(--color-brand); color: var(--color-brand); }
.chip.active { background: var(--color-brand); color: #fff; border-color: var(--color-brand); }

.empty { text-align: center; padding: 60px 20px; color: var(--ink-3); }
.empty svg { width: 48px; height: 48px; margin-bottom: 16px; color: var(--ink-4); }

/* archive day pills */
.daystrip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.daystrip::-webkit-scrollbar { display: none; }
.daypill { flex: none; text-align: center; border: 1px solid var(--line); border-radius: var(--r); padding: 12px 16px; min-width: 76px; transition: all .15s var(--ease-out); }
.daypill:hover { border-color: var(--color-brand); }
.daypill.active { background: var(--color-brand); color: #fff; border-color: var(--color-brand); }
.daypill .dp-day { font-size: var(--fs-xl); font-weight: 600; line-height: 1; }
.daypill .dp-wd { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 4px; }
.daypill.active .dp-wd { color: #9fb0c6; }

/* ===================== Misc layout helpers ===================== */
.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  border-radius: 50%; background: var(--c, var(--color-brand)); color: #fff; font-weight: 600;
  letter-spacing: -.01em;
}
.main-col { min-width: 0; }
.aside { min-width: 0; }
.home-sec { margin-bottom: 40px; }
.home-sec:last-child { margin-bottom: 0; }
.sec-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 24px; }
.sec-grid .card .thumb { margin-bottom: 12px; }
.sec-grid .card .title { font-size: var(--fs-base); font-weight: 600; line-height: 1.26; margin: 8px 0; letter-spacing: -.01em; }
.row-body { min-width: 0; }
.side-body { min-width: 0; }
.cat-lead { margin-bottom: 8px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.cat-lead .hero-lead .title { font-size: var(--fs-3xl); }
.cat-list { margin-top: 4px; }
.home-layout { margin-top: 36px; border-top: 1px solid var(--line); padding-top: 32px; padding-bottom: 40px; }
.home-poll { margin-top: 32px; }
.home-poll .aside-box { margin-bottom: 0; }
.feed-hidden { display: none; }

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px);
  background: var(--color-brand); color: #fff; padding: 12px 20px; border-radius: 999px;
  font-size: var(--fs-sm); font-weight: 600; box-shadow: var(--shadow-2); z-index: var(--z-toast);
  opacity: 0; pointer-events: none; transition: all .25s var(--ease-out); white-space: nowrap;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }




/* Horizontal ad banner */
.ad-banner {
  margin: 36px 0 8px; min-height: 110px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--r);
  background: repeating-linear-gradient(45deg, var(--paper-2) 0 10px, var(--paper-3) 10px 20px);
  color: var(--ink-3); font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
}

/* Featured top-3 (isee-style) */
.featured-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 28px; }
.featured-3 .card .thumb { aspect-ratio: 16/10; margin-bottom: 12px; }
.featured-3 .card .title { font-size: var(--fs-xl); font-weight: 600; line-height: 1.26; letter-spacing: -.01em; margin: 8px 0; }


/* Article two-column layout */
.article-layout { align-items: start; }
.article-layout .article { max-width: none; margin: 0; }

/* Sidebar search */
.aside-search { display: flex; border: 1px solid var(--line-2); border-radius: 999px; overflow: hidden; background: #fff; }
.aside-search input { flex: 1; min-width: 0; border: none; padding: 0 20px; height: 48px; font-family: inherit; font-size: var(--fs-sm); color: var(--ink); background: transparent; }
.aside-search input:focus { outline: none; }
.aside-search button { border: none; background: var(--color-brand); color: #fff; width: 52px; display: flex; align-items: center; justify-content: center; transition: background .15s var(--ease-out); }
.aside-search button:hover { background: var(--color-brand-hover); }
.aside-search button svg { width: 18px; height: 18px; }

/* Sidebar mini-list (Шинэ мэдээ) */
.mini-list { display: flex; flex-direction: column; }
.mini-item { display: grid; grid-template-columns: 74px 1fr; gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--line); }
.mini-item:first-child { border-top: none; padding-top: 0; }
.mini-thumb { width: 74px; height: 55px; border-radius: var(--r-sm); object-fit: cover; background: var(--paper-3); }
.mini-thumb.img-fail { background: repeating-linear-gradient(135deg, var(--paper-2) 0 8px, var(--paper-3) 8px 16px); }
.mini-body { min-width: 0; }
.mini-item .title { font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; }
.mini-item .meta { margin-top: 5px; }

/* Trending widget (with images) */
.trend-list { display: flex; flex-direction: column; }
.trend-lead { padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.trend-lead .thumb { aspect-ratio: 16/10; margin-bottom: 12px; }
.trend-lead .cat-tag { margin-bottom: 0; }
.trend-lead .title { font-size: var(--fs-lg); font-weight: 600; line-height: 1.3; letter-spacing: -.01em; margin: 8px 0 0; }
.trend-row { display: grid; grid-template-columns: 88px 1fr; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.trend-row:first-child { border-top: none; }
.trend-thumb { width: 88px; height: 62px; border-radius: var(--r-sm); object-fit: cover; background: var(--paper-3); }
.trend-thumb.img-fail { background: repeating-linear-gradient(135deg, var(--paper-2) 0 8px, var(--paper-3) 8px 16px); }
.trend-body { min-width: 0; }
.trend-row .title { font-size: var(--fs-sm); font-weight: 600; line-height: 1.34; margin-top: 5px; }

/* ===================== Account: profile + saved ===================== */
.pm-count { margin-left: auto; background: var(--color-brand); color: #fff; font-size: var(--fs-xs); font-weight: 700; min-width: 20px; height: 20px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; }

.save-btn.is-saved { background: var(--color-brand); border-color: var(--color-brand); color: #fff; }
.save-btn.is-saved svg { fill: currentColor; }

.acct-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.acct-tabs { display: flex; gap: 8px; background: var(--paper-2); padding: 5px; border-radius: 999px; }
.acct-tab { padding: 8px 20px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 700; color: var(--ink-2); transition: all .15s var(--ease-out); white-space: nowrap; }
.acct-tab:hover { color: var(--color-brand); }
.acct-tab.active { background: #fff; color: var(--color-brand); box-shadow: var(--shadow-1); }

.acct-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.acct-note { font-size: var(--fs-sm); color: var(--ink-2); }

.btn-ghost { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: var(--r); border: 1px solid var(--line-2); background: #fff; color: var(--ink-2); font-family: inherit; font-size: var(--fs-sm); font-weight: 700; transition: all .15s var(--ease-out); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-ink); }
.btn-ghost svg { width: 15px; height: 15px; }
.btn-ghost-full { width: 100%; justify-content: center; margin-top: 16px; }

/* saved grid */
.saved-card { position: relative; }
.unsave { position: absolute; top: 10px; right: 10px; z-index: 3; width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(3,22,52,.78); color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.9); transition: all .18s var(--ease-out); backdrop-filter: blur(4px); }
.saved-card:hover .unsave { opacity: 1; transform: none; }
.unsave:hover { background: var(--accent); }
.unsave svg { width: 16px; height: 16px; }

/* sign-in wall + big empty */
.wall, .empty-lg { text-align: center; padding: 80px 20px 92px; }
.wall-ic { display: inline-flex; align-items: center; justify-content: center; width: 68px; height: 68px; border-radius: 50%; background: var(--color-brand-wash); color: var(--color-brand); margin-bottom: 20px; }
.wall-ic svg { width: 30px; height: 30px; }
.wall h1 { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -.02em; margin: 0 0 8px; }
.wall p { color: var(--ink-2); margin: 0 0 24px; }
.empty-lg .empty-t { font-size: var(--fs-xl); font-weight: 600; color: var(--ink); margin: 0 0 8px; }
.empty-lg .empty-s { font-size: var(--fs-sm); color: var(--ink-2); margin: 0 0 24px; }
.empty-lg .btn-sub, .wall .btn-sub { display: inline-flex; align-items: center; }

/* profile identity */
.prof-id { display: flex; align-items: center; gap: 24px; padding: 28px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper-2); margin-bottom: 24px; flex-wrap: wrap; }
.prof-id-body { flex: 1; min-width: 180px; }
.prof-id-body h2 { margin: 0; font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -.02em; }
.prof-id-body p { margin: 4px 0 0; color: var(--ink-2); font-size: var(--fs-sm); }
.prof-since { display: inline-block; margin-top: 12px; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }

/* stats */
.prof-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 40px; }
.prof-stats .stat { display: flex; flex-direction: column; gap: 4px; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; transition: all .15s var(--ease-out); }
.prof-stats a.stat:hover { border-color: var(--color-brand); transform: translateY(-2px); }
.prof-stats .stat b { font-size: var(--fs-3xl); font-weight: 700; color: var(--color-brand); line-height: 1; font-variant-numeric: tabular-nums; }
.prof-stats .stat span { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); }

/* profile columns */
.prof-cols { display: grid; grid-template-columns: 1fr 340px; gap: 48px; align-items: start; padding-bottom: 20px; }
.prof-main { min-width: 0; }
.prof-side { min-width: 0; }

/* preference rows + switch */
.pref-list { display: flex; flex-direction: column; }
.pref-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 0; border-top: 1px solid var(--line); cursor: pointer; }
.pref-row:first-child { border-top: none; }
.pref-txt { display: flex; flex-direction: column; gap: 3px; }
.pref-txt b { font-size: var(--fs-base); font-weight: 700; }
.pref-txt span { font-size: var(--fs-sm); color: var(--ink-2); }
.switch { flex: none; width: 46px; height: 26px; border-radius: 999px; background: var(--line-2); position: relative; transition: background .2s var(--ease-out); cursor: pointer; }
.switch .knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-1); transition: transform .2s var(--ease-out); }
.switch.on { background: var(--color-brand); }
.switch.on .knob { transform: translateX(20px); }




/* ===================== Pagination ===================== */
.pager { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 36px 0 8px; flex-wrap: wrap; }
.pg-nums { display: flex; align-items: center; gap: 8px; }
.pg-num {
  min-width: 40px; height: 40px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2); border-radius: var(--r); background: #fff; color: var(--ink);
  font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; transition: all .15s var(--ease-out);
}
.pg-num:hover { border-color: var(--color-brand); color: var(--color-brand); }
.pg-num.active { background: var(--color-brand); border-color: var(--color-brand); color: #fff; }
.pg-num.disabled { opacity: .4; cursor: not-allowed; }
.pg-arrow { gap: 8px; padding: 0 16px; color: var(--ink-2); font-weight: 700; }
.pg-arrow svg { width: 15px; height: 15px; }
.pg-gap { color: var(--ink-4); padding: 0 2px; font-weight: 700; }



/* ===================== Footer ===================== */
.site-footer { background: var(--color-brand); color: #b9c4d4; margin-top: 60px; }
.site-footer .wrap { padding: 50px var(--gut) 30px; }
.foot-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,.1); }
.foot-brand .wordmark { color: #fff; font-size: var(--fs-3xl); }
.foot-brand p { font-size: var(--fs-sm); line-height: 1.6; max-width: 36ch; margin: 16px 0 20px; }
.foot-social { display: flex; gap: 12px; }
.foot-social a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); display: inline-flex; align-items: center; justify-content: center; color: #cdd6e3; transition: all .15s var(--ease-out); }
.foot-social a:hover { background: #fff; color: var(--color-brand); border-color: #fff; }
.foot-social svg { width: 18px; height: 18px; }
.foot-col h4 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .12em; color: #7e8ea3; margin: 0 0 16px; font-weight: 700; }
.foot-col a { display: block; font-size: var(--fs-sm); padding: 8px 0; color: #c5cfdc; transition: color .15s var(--ease-out); }
.foot-col a:hover { color: #fff; }
.foot-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 24px; font-size: var(--fs-xs); color: #7e8ea3; }
.foot-bottom .fb-links { display: flex; gap: 20px; }
.foot-bottom a:hover { color: #fff; }

/* ===================== Mobile menu drawer ===================== */
.scrim { position: fixed; inset: 0; background: rgba(3,22,52,.5); backdrop-filter: blur(2px); z-index: var(--z-scrim); opacity: 0; pointer-events: none; transition: opacity .25s var(--ease-out); }
.scrim.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 320px; max-width: 86vw; background: #fff; z-index: var(--z-drawer);
  transform: translateX(100%); transition: transform .3s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column;
  box-shadow: var(--shadow-2);
}
.drawer.open { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px; border-bottom: 1px solid var(--line); }
.drawer-head .wordmark { font-size: var(--fs-2xl); }
.drawer-nav { padding: 8px 0; overflow-y: auto; flex: 1; }
.drawer-nav a { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; font-size: var(--fs-base); font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--paper-2); }
.drawer-nav a:hover, .drawer-nav a.active { background: var(--paper-2); color: var(--color-brand); }
.drawer-nav a svg { width: 16px; height: 16px; color: var(--ink-4); }
.drawer-foot { padding: 20px 20px; border-top: 1px solid var(--line); }
.drawer-foot .btn-sub { width: 100%; justify-content: center; }

/* search overlay */
.search-overlay { position: fixed; inset: 0; background: rgba(255,255,255,.98); z-index: var(--z-overlay); display: none; flex-direction: column; padding-top: 14vh; }
.search-overlay.open { display: flex; }
.search-overlay .so-inner { width: 100%; max-width: 680px; margin: 0 auto; padding: 0 24px; }
.search-overlay .so-close { position: absolute; top: 24px; right: 24px; }
.search-overlay .so-label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 16px; }
.search-overlay input { width: 100%; border: none; border-bottom: 3px solid var(--color-brand); font-size: var(--fs-3xl); font-weight: 700; padding: 12px 0; font-family: inherit; color: var(--ink); background: transparent; letter-spacing: -.02em; }
.search-overlay input:focus { outline: none; }
.so-suggest { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; }

/* back to top */
.totop { position: fixed; right: 22px; bottom: 22px; width: 46px; height: 46px; border-radius: 50%; background: var(--color-brand); color: #fff; border: none; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-2); opacity: 0; pointer-events: none; transform: translateY(10px); transition: all .25s var(--ease-out); z-index: var(--z-sticky); }
.totop.show { opacity: 1; pointer-events: auto; transform: none; }
.totop svg { width: 20px; height: 20px; }

/* progress bar (article reading) */
.read-progress { position: fixed; top: 0; left: 0; height: 3px; background: var(--accent); width: 0; z-index: var(--z-progress); transition: width .1s linear var(--ease-out); }

/* ===================== Responsive ===================== */





/* ===================== a11y helpers ===================== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; font-size: var(--fs-base); }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, .card:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm);
}
.card:focus-visible { outline-offset: 4px; }

/* ===================== Breaking band ===================== */
.breaking-band { background: var(--accent); color: #fff; }
.breaking-band .wrap { display: flex; align-items: center; gap: 16px; padding: 11px var(--gut); }
.bb-label { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; flex: none; }
.bb-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: pulse 1.4s infinite; }
.bb-link { flex: 1; min-width: 0; font-size: var(--fs-sm); font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.bb-close { flex: none; width: 28px; height: 28px; border: none; background: rgba(255,255,255,.16); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background .15s var(--ease-out); }
.bb-close:hover { background: rgba(255,255,255,.34); }
.bb-close svg { width: 14px; height: 14px; }


/* ===================== Theme button ===================== */
.theme-btn { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); background: transparent; color: #cdd6e3; display: inline-flex; align-items: center; justify-content: center; transition: all .15s var(--ease-out); }
.theme-btn:hover { background: #fff; color: var(--color-brand); border-color: #fff; }
.theme-btn svg { width: 15px; height: 15px; }
.theme-btn.theme-block { width: 46px; height: 44px; border-radius: var(--r); border-color: var(--line-2); color: var(--ink-2); }
.theme-btn.theme-block:hover { background: var(--color-brand); color: #fff; border-color: var(--color-brand); }

/* ===================== Feed tabs (interests) ===================== */
.feed-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.feed-head .sec-head { flex: 1; min-width: 180px; margin-bottom: 20px; }
.feed-tabs { display: flex; gap: 4px; background: var(--paper-2); padding: 4px; border-radius: 999px; margin-bottom: 20px; }
.feed-tab { padding: 8px 16px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 700; color: var(--ink-2); white-space: nowrap; transition: all .15s var(--ease-out); }
.feed-tab:hover { color: var(--color-brand); }
.feed-tab.active { background: var(--paper); color: var(--color-brand); box-shadow: var(--shadow-1); }

/* ===================== Article prev/next ===================== */
.art-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 28px 0 8px; }
.art-nav-item { display: flex; flex-direction: column; gap: 8px; padding: 20px 20px; border: 1px solid var(--line); border-radius: var(--r-lg); transition: all .18s var(--ease-out); min-width: 0; }
.art-nav-item:hover { border-color: var(--color-brand); background: var(--paper-2); }
.art-nav-item.empty { border: none; }
.an-dir { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
.an-dir svg { width: 14px; height: 14px; }
.an-title { font-size: var(--fs-base); font-weight: 600; line-height: 1.32; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.art-nav-item.next { text-align: right; align-items: flex-end; }


/* ===================== Search filter bar ===================== */
.filter-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 28px; flex-wrap: wrap; }
.filter-field { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 700; color: var(--ink-2); }
.filter-field select {
  height: 40px; padding: 0 36px 0 12px; border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5663' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 15px;
  font-family: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); appearance: none; cursor: pointer;
}
.filter-sort { display: flex; gap: 4px; background: var(--paper-2); padding: 4px; border-radius: 999px; }
.fs-opt { padding: 8px 16px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 700; color: var(--ink-2); white-space: nowrap; transition: all .15s var(--ease-out); }
.fs-opt:hover { color: var(--color-brand); }
.fs-opt.active { background: var(--paper); color: var(--color-brand); box-shadow: var(--shadow-1); }

/* ===================== Author page ===================== */
.author-id { display: flex; align-items: center; gap: 20px; margin-top: 12px; flex-wrap: wrap; }
.author-id h1 { margin: 0 0 4px; }
.author-id p { margin: 0; color: var(--ink-2); font-size: var(--fs-base); }
.bl-name a:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }

/* ===================== Drawer auth ===================== */
.drawer-auth { display: flex; flex-direction: column; gap: 2px; margin-bottom: 16px; }
.btn-sub-full { width: 100%; justify-content: center; gap: 8px; }
.btn-sub-full svg { width: 16px; height: 16px; }
.da-user { display: flex; align-items: center; gap: 12px; padding: 4px 2px 12px; }
.da-id { min-width: 0; }
.da-id b { display: block; font-size: var(--fs-sm); font-weight: 700; }
.da-id span { display: block; font-size: var(--fs-xs); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; }
.da-link { display: flex; align-items: center; gap: 12px; padding: 12px 4px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); border: none; background: none; font-family: inherit; text-align: left; width: 100%; border-radius: var(--r); transition: all .15s var(--ease-out); }
.da-link:hover { background: var(--paper-2); padding-left: 12px; }
.da-link svg { width: 16px; height: 16px; color: var(--ink-3); }
.da-out { color: var(--accent-ink); }
.da-out svg { color: currentColor; }
.drawer-row { display: flex; gap: 12px; align-items: stretch; }
.drawer-row .lang-switch.lang-block { margin-bottom: 0; }

/* ===================== Dark theme ===================== */
[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0d1520;
  --paper-2: #141e2c;
  --paper-3: #1b2637;
  --line: #22314a;
  --line-2: #2e3f59;
  --ink: #e9eef5;
  --ink-2: #a8b6c8;
  --ink-3: #93a2b6;
  --ink-4: #5c6a7d;
  --color-brand: #0a1526;
  --color-brand-hover: #123058;
  --color-brand-wash: #16233a;
  --color-brand-tint: #2b3b53;
  --accent: oklch(0.66 0.145 27);
  --accent-ink: oklch(0.75 0.13 27);
  --accent-wash: oklch(0.28 0.06 27);
  --success: oklch(0.70 0.11 152);
  --success-wash: oklch(0.26 0.05 152);
  --warning: oklch(0.76 0.11 75);
  --warning-wash: oklch(0.28 0.05 75);
  --error: oklch(0.68 0.15 22);
  --error-wash: oklch(0.27 0.06 22);
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 8px 26px rgba(0,0,0,.55);
}
[data-theme="dark"] .utility, [data-theme="dark"] .masthead { background: #060d17; }
[data-theme="dark"] .masthead { border-bottom-color: var(--line); }
[data-theme="dark"] .catnav { background: rgba(13,21,32,.93); border-bottom-color: var(--line); }
[data-theme="dark"] .cat-band { background: var(--paper-2); }
[data-theme="dark"] .site-footer { background: #060d17; }
[data-theme="dark"] .art-body { color: #dbe3ee; }
[data-theme="dark"] .art-body strong, [data-theme="dark"] .art-body blockquote { color: var(--ink); }
[data-theme="dark"] .art-body p:first-child::first-letter { color: #cfe0ff; }
[data-theme="dark"] .art-body h3 { color: #cfe0ff; }
[data-theme="dark"] .sec-head h2, [data-theme="dark"] .promo .ttl { color: #cfe0ff; }
[data-theme="dark"] .rank-num { color: var(--color-brand-tint); }
[data-theme="dark"] .pg-num,
[data-theme="dark"] .btn-ghost,
[data-theme="dark"] .aside-search,
[data-theme="dark"] .prof-stats .stat,
[data-theme="dark"] .promo input,
[data-theme="dark"] .share-btn,
[data-theme="dark"] .filter-field select,
[data-theme="dark"] .chip,
[data-theme="dark"] .tag-chip { background: var(--paper-2); color: var(--ink); border-color: var(--line-2); }
[data-theme="dark"] .tab.active, [data-theme="dark"] .acct-tab.active, [data-theme="dark"] .feed-tab.active, [data-theme="dark"] .fs-opt.active { background: var(--paper-3); color: #cfe0ff; }
[data-theme="dark"] .tabs, [data-theme="dark"] .acct-tabs, [data-theme="dark"] .feed-tabs, [data-theme="dark"] .filter-sort { background: #0a121d; }
[data-theme="dark"] .search-overlay { background: rgba(13,21,32,.985); }
[data-theme="dark"] .search-overlay input { border-bottom-color: #cfe0ff; color: var(--ink); }
[data-theme="dark"] .profile-menu, [data-theme="dark"] .gmodal, [data-theme="dark"] .drawer { background: var(--paper-2); }
[data-theme="dark"] .drawer-nav a { border-bottom-color: var(--paper-3); }
[data-theme="dark"] .prof-id { background: var(--paper-2); }
[data-theme="dark"] .btn-sub { background: #1c3f74; }
[data-theme="dark"] .btn-sub:hover { background: #24528f; }
[data-theme="dark"] .cm-more { background: var(--paper-2); color: #cfe0ff; }
[data-theme="dark"] .cm-more:hover { background: var(--color-brand-hover); color: #fff; border-color: var(--color-brand-hover); }
[data-theme="dark"] .cm-form textarea, [data-theme="dark"] .search-bar input, [data-theme="dark"] .aside-search input { background: var(--paper-2); color: var(--ink); }
[data-theme="dark"] .comment-cta, [data-theme="dark"] .promo { background: var(--paper-2); }
[data-theme="dark"] .switch .knob { background: #e9eef5; }
[data-theme="dark"] .brand-logo { filter: none; }
[data-theme="dark"] ::selection { background: #cfe0ff; color: #0d1520; }


/* ===================== Subscription ===================== */
.btn-subscribe {
  display: inline-flex; align-items: center; height: 28px; padding: 0 16px; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .01em;
  transition: all .15s var(--ease-out); white-space: nowrap;
}
.btn-subscribe:hover { background: #fff; color: var(--color-brand); }

.premium-pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 999px;
  background: linear-gradient(100deg, #c9a227, #eccb5a); color: #2b2000;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .09em;
}
.premium-pill svg { width: 12px; height: 12px; fill: currentColor; }
.premium-pill.hd { height: 28px; padding: 0 12px; }
.premium-pill.sm { margin-left: 8px; vertical-align: 3px; }

.thumb-prem {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 999px;
  background: linear-gradient(100deg, #c9a227, #eccb5a); color: #2b2000;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em;
}
.thumb-prem svg { width: 11px; height: 11px; fill: currentColor; }

/* plans */
.sub-header { text-align: center; border-bottom: none; padding-bottom: 12px; }
.sub-header h1 { max-width: 22ch; margin-inline: auto; text-wrap: balance; }
.sub-header p { max-width: 52ch; margin-inline: auto; }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-bottom: 60px; align-items: stretch; }
.plan {
  position: relative; display: flex; flex-direction: column; padding: 32px 28px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper);
}
.plan-hi { border-color: var(--color-brand); box-shadow: var(--shadow-2); }
.plan-active { border-color: #c9a227; }
.plan-flag {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--color-brand); color: #fff; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; padding: 5px 12px; border-radius: 999px; white-space: nowrap;
}
.plan-name { margin: 0 0 12px; font-size: var(--fs-base); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-2); }
.plan-price { display: flex; align-items: baseline; gap: 4px; }
.plan-price b { font-size: var(--fs-4xl); font-weight: 600; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.plan-price span { font-size: var(--fs-sm); color: var(--ink-3); font-weight: 600; }
.plan-save { display: inline-block; margin-top: 8px; font-size: var(--fs-xs); font-weight: 700; color: var(--accent-ink); }
.plan-save-sp { display: block; height: 21px; }
.plan-feats { list-style: none; margin: 24px 0 28px; padding: 0; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.plan-feats li { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-sm); color: var(--ink); line-height: 1.4; }
.plan-feats svg { width: 16px; height: 16px; color: var(--accent); flex: none; margin-top: 3px; }
.plan-cta { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 46px; border-radius: var(--r); font-size: var(--fs-base); }
.plan-cur { background: var(--paper-2); color: var(--ink-2); font-weight: 700; border: 1px solid var(--line); }


/* payment modal */
.pay-scrim { position: fixed; inset: 0; background: rgba(3,22,52,.6); backdrop-filter: blur(3px); z-index: var(--z-scrim); opacity: 0; pointer-events: none; transition: opacity .2s var(--ease-out); }
.pay-scrim.open { opacity: 1; pointer-events: auto; }
.pay-modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.97);
  width: 430px; max-width: calc(100vw - 32px); max-height: calc(100vh - 40px); overflow-y: auto;
  background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--shadow-2);
  padding: 32px 28px 28px; z-index: var(--z-modal); opacity: 0; pointer-events: none; transition: all .2s var(--ease-out);
}
.pay-modal.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.pay-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--paper-2); color: var(--ink-2); display: flex; align-items: center; justify-content: center; }
.pay-close:hover { background: var(--paper-3); }
.pay-close svg { width: 15px; height: 15px; }
.pay-title { margin: 0 0 20px; font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.01em; }
.pay-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px; background: var(--paper-2); border-radius: var(--r); margin-bottom: 20px; }
.ps-plan { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 700; }
.ps-plan svg { width: 14px; height: 14px; color: #c9a227; fill: currentColor; }
.ps-price { font-size: var(--fs-xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.ps-price small { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 600; }

.pay-form { display: flex; flex-direction: column; gap: 16px; }
.pf-field { display: flex; flex-direction: column; gap: 8px; }
.pf-field > span { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-2); }
.pf-field input {
  height: 46px; border: 1px solid var(--line-2); border-radius: var(--r); padding: 0 12px;
  font-family: inherit; font-size: var(--fs-base); color: var(--ink); background: var(--paper);
  font-variant-numeric: tabular-nums; letter-spacing: .02em; width: 100%;
}
.pf-field input:focus { outline: 2px solid var(--color-brand); outline-offset: -1px; }
.pf-input-wrap { position: relative; display: block; }
.pf-brand { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); font-size: var(--fs-xs); font-weight: 700; color: var(--ink-2); letter-spacing: .02em; }
.pf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pf-err { margin: -4px 0 0; font-size: var(--fs-sm); font-weight: 600; color: var(--accent-ink); }
.pay-submit { height: 48px; margin-top: 4px; gap: 8px; }
.pay-submit svg { width: 15px; height: 15px; }
.pf-note { display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 0; font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.45; }
.pf-note svg { width: 13px; height: 13px; flex: none; margin-top: 2px; }

.pay-step[data-step="load"], .pay-step[data-step="done"] { text-align: center; padding: 28px 0 12px; }
.pay-spin { width: 44px; height: 44px; margin: 0 auto 18px; border: 3px solid var(--line); border-top-color: var(--color-brand); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.pay-loadtxt { color: var(--ink-2); font-size: var(--fs-base); margin: 0; }
.pay-ok { display: inline-flex; align-items: center; justify-content: center; width: 62px; height: 62px; border-radius: 50%; background: var(--accent-wash); color: var(--accent); margin-bottom: 16px; }
.pay-ok svg { width: 30px; height: 30px; }
.pay-donetxt { color: var(--ink-2); margin: 0 0 24px; font-size: var(--fs-sm); line-height: 1.5; }

/* paywall */
.paywall { position: relative; margin-top: -72px; }
.paywall-fade { height: 130px; background: linear-gradient(to bottom, transparent, var(--paper) 78%); }
.paywall-box {
  text-align: center; padding: 32px 28px 36px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--paper-2);
}
.paywall-box h3 { margin: 16px 0 8px; font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -.01em; }
.paywall-box p { margin: 0 auto 20px; font-size: var(--fs-base); color: var(--ink-2); max-width: 42ch; line-height: 1.55; }
.paywall-box .btn-sub { display: inline-flex; align-items: center; height: 46px; padding: 0 32px; font-size: var(--fs-base); }
.paywall-login { display: block; margin: 14px auto 0; border: none; background: none; font-family: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.paywall-login:hover { color: var(--accent-ink); }

/* billing */
.bill-cols { display: grid; grid-template-columns: 1fr 340px; gap: 48px; align-items: start; padding-bottom: 20px; }
.bill-main { min-width: 0; }
.bill-side { min-width: 0; }
.bill-card { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper-2); flex-wrap: wrap; }
.bill-plan h2 { margin: 12px 0 8px; font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -.02em; }
.bill-plan h2 span { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-3); }
.bill-plan p { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); }
.bill-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-danger { color: var(--accent-ink); }
.btn-danger:hover { border-color: var(--accent); background: var(--accent-wash); }
.bill-pm { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--r); flex-wrap: wrap; }
.pm-brand { font-size: var(--fs-sm); font-weight: 700; letter-spacing: .03em; padding: 5px 12px; border-radius: var(--r-sm); background: var(--color-brand); color: #fff; }
.pm-num { font-size: var(--fs-base); font-weight: 600; letter-spacing: .06em; font-variant-numeric: tabular-nums; flex: 1; }
.bill-inv { display: flex; flex-direction: column; }
.inv-row { display: grid; grid-template-columns: 120px 1fr auto 24px; gap: 16px; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.inv-row:first-child { border-top: none; }
.inv-date { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.inv-plan { font-weight: 600; }
.inv-amt { font-weight: 700; font-variant-numeric: tabular-nums; }
.inv-ok { color: var(--accent); display: flex; }
.inv-ok svg { width: 17px; height: 17px; }




/* dark overrides */
[data-theme="dark"] .plan, [data-theme="dark"] .pay-modal, [data-theme="dark"] .pf-field input { background: var(--paper-2); }
[data-theme="dark"] .plan-hi { border-color: #cfe0ff; }
[data-theme="dark"] .plan-flag { background: #1c3f74; }
[data-theme="dark"] .pay-summary, [data-theme="dark"] .paywall-box, [data-theme="dark"] .bill-card { background: var(--paper-3); }
[data-theme="dark"] .paywall-fade { background: linear-gradient(to bottom, transparent, var(--paper) 78%); }
[data-theme="dark"] .btn-subscribe:hover { background: #fff; color: #0d1520; }


/* ===================== 5. Accent-led CTAs + semantic colours ===================== */
/* primary conversion actions carry the brand accent; navy stays structural */
.plan .plan-cta.btn-sub,
.paywall-box .btn-sub,
.pay-submit,
.cm-submit,
.sb-go {
  background: var(--accent);
}
.plan .plan-cta.btn-sub:hover,
.paywall-box .btn-sub:hover,
.pay-submit:hover,
.cm-submit:hover,
.sb-go:hover { background: var(--accent-ink); }

/* semantic usage */
.pay-ok { background: var(--success-wash); color: var(--success); }
.inv-ok { color: var(--success); }
.plan-feats svg { color: var(--success); }
.pf-err { color: var(--error); }
.toast.ok { background: var(--success); }
.toast.warn { background: var(--warning); color: #241a00; }
.toast.err { background: var(--error); }
[data-theme="dark"] .plan .plan-cta.btn-sub,
[data-theme="dark"] .paywall-box .btn-sub,
[data-theme="dark"] .pay-submit,
[data-theme="dark"] .cm-submit,
[data-theme="dark"] .sb-go { background: var(--accent); color: #14060a; }
[data-theme="dark"] .plan .plan-cta.btn-sub:hover,
[data-theme="dark"] .paywall-box .btn-sub:hover,
[data-theme="dark"] .pay-submit:hover,
[data-theme="dark"] .cm-submit:hover,
[data-theme="dark"] .sb-go:hover { background: var(--accent-ink); }


/* ===================== Fluid display sizes (clamp) ===================== */
.art-title       { font-size: clamp(1.625rem, 1rem + 2.2vw, 2.5rem); }
.page-header h1  { font-size: clamp(1.6875rem, 1.05rem + 2.1vw, 2.375rem); }
.hero-lead .title{ font-size: clamp(1.4375rem, 0.95rem + 1.7vw, 2.125rem); }
.cat-lead .hero-lead .title { font-size: clamp(1.375rem, 1rem + 1.5vw, 1.875rem); }
.sub-header h1   { font-size: clamp(1.625rem, 1.1rem + 2vw, 2.25rem); }
.search-overlay input { font-size: clamp(1.5rem, 0.9rem + 2.3vw, 2.125rem); }
.cm-title        { font-size: clamp(1.25rem, 1.05rem + 1.2vw, 1.5rem); }
.wall h1, .prof-id-body h2, .paywall-box h3 { font-size: clamp(1.3125rem, 1.1rem + 1.3vw, 1.625rem); }
.bill-plan h2    { font-size: clamp(1.25rem, 1.05rem + 1.2vw, 1.5rem); }
.plan-price b    { font-size: clamp(1.875rem, 1.5rem + 1.8vw, 2.25rem); }

/* form controls never below 16px — iOS zooms on smaller inputs */
input, textarea, select, .filter-field select,
.search-bar input, .aside-search input, .promo input,
.pf-field input, .cm-form textarea { font-size: var(--fs-base); }


/* ===================== Touch targets (44x44 minimum) ===================== */
/* visual size is unchanged — an invisible centred hit area does the work */
.lang-opt, .theme-btn, .ds-day, .profile-chip, .share-btn, .icon-btn,
.tab, .feed-tab, .fs-opt, .acct-tab, .pg-num, .daypill, .chip,
.cm-like, .cm-reply, .cm-sort-btn, .bb-close, .pay-close, .unsave,
.foot-social a, .util-link, .pm-item, .da-link, .lang-sep + .lang-opt { position: relative; }

.theme-btn::after, .profile-chip::after,
.share-btn::after, .icon-btn::after, .pg-num::after, .daypill::after,
.cm-like::after, .cm-reply::after, .bb-close::after,
.pay-close::after, .unsave::after, .foot-social a::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: max(100%, 44px); height: max(100%, 44px);
  transform: translate(-50%, -50%);
}
/* the hit area must not eat clicks meant for the element itself */
.theme-btn::after, .profile-chip::after,
.share-btn::after, .icon-btn::after, .pg-num::after, .daypill::after,
.cm-like::after, .cm-reply::after, .bb-close::after,
.pay-close::after, .unsave::after, .foot-social a::after { z-index: 0; }
.lang-opt > *, .theme-btn > *, .profile-chip > *, .share-btn > * { position: relative; z-index: 1; }


/* text links inside prose get vertical padding instead (44px would break the line box) */
.pm-item, .da-link { min-height: 44px; }
.util-link { padding-block: 12px; }


/* ===================== Dark-theme: navy-as-text is unreadable ===================== */
[data-theme="dark"] .cat-link.home,
[data-theme="dark"] .cat-link.active,
[data-theme="dark"] .cat-link:hover,
[data-theme="dark"] .catnav-mini,
[data-theme="dark"] .sec-head .more:hover,
[data-theme="dark"] .pg-num:hover,
[data-theme="dark"] .daypill:hover,
[data-theme="dark"] .chip:hover,
[data-theme="dark"] .tag-chip:hover,
[data-theme="dark"] .feed-tab:hover,
[data-theme="dark"] .acct-tab:hover,
[data-theme="dark"] .fs-opt:hover,
[data-theme="dark"] .tab:hover,
[data-theme="dark"] .cm-name,
[data-theme="dark"] .prof-stats .stat b,
[data-theme="dark"] .comment-cta .cc-num,
[data-theme="dark"] .daypill .dp-day,
[data-theme="dark"] .wall-ic { color: #cfe0ff; }

[data-theme="dark"] .wall-ic { background: var(--paper-3); }
[data-theme="dark"] .plan-cur { background: var(--paper-3); color: var(--ink-2); }
[data-theme="dark"] .catnav-mini .dot { color: var(--accent); }
[data-theme="dark"] .pm-brand, [data-theme="dark"] .chip.active,
[data-theme="dark"] .daypill.active, [data-theme="dark"] .pg-num.active { background: #1c3f74; border-color: #1c3f74; color: #fff; }

/* ===================== Article sidebar alignment ===================== */
.article-layout .aside { padding-top: 40px; }


/* ===================== Remaining touch targets ===================== */
.foot-col a, .foot-bottom .fb-links a { min-height: 44px; display: flex; align-items: center; }
.poll-opt { min-height: 44px; }


/* ===================== B. Reduced motion (global) ===================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===================== A. Form control borders (non-text >= 3:1) ===================== */
input, textarea, select,
.search-bar input, .aside-search, .promo input, .pf-field input,
.cm-form textarea, .filter-field select, .btn-ghost, .pg-num, .daypill, .chip, .tag-chip {
  border-color: var(--border-strong);
}
.aside-search { border-color: var(--border-strong); }

/* ===================== A. Skip link ===================== */
.skip-link {
  position: fixed; top: 0; left: 50%; transform: translate(-50%, -120%);
  z-index: var(--z-toast); background: var(--color-brand); color: #fff;
  padding: var(--space-3) var(--space-6); border-radius: 0 0 var(--r) var(--r);
  font-size: var(--fs-sm); font-weight: 700; transition: transform var(--duration) var(--ease-out);
}
.skip-link:focus-visible { transform: translate(-50%, 0); outline-offset: -3px; }

/* ===================== F. Error text with icon ===================== */
.pf-err { display: flex; align-items: center; gap: var(--space-2); }
.pf-err[hidden] { display: none; }
.pf-err svg { width: 16px; height: 16px; flex: none; }

/* ===================== F. Toast: dismissible errors ===================== */
.toast { display: flex; align-items: center; gap: var(--space-3); }
.toast-close {
  border: none; background: rgba(255,255,255,.22); color: inherit; width: 22px; height: 22px;
  border-radius: 50%; display: none; align-items: center; justify-content: center; flex: none;
}
.toast.err .toast-close { display: flex; }
.toast-close svg { width: 12px; height: 12px; }

/* target spacing >= 8px between adjacent small controls */
.lang-switch { gap: var(--space-1); padding-inline: var(--space-1); }
.art-share { gap: var(--space-2); }


/* ============================================================
   Mobile-first responsive layer
   base = phone · 640 = large phone · 768 = tablet
   1024 = laptop · 1280 = desktop
   ============================================================ */

/* ---------- base: phone ---------- */
:root { --gut: 20px; }

.hero { grid-template-columns: 1fr; gap: 24px; }
.layout { grid-template-columns: 1fr; gap: 0; }
.aside-box.sticky { position: static; }
.article-layout .aside { padding-top: 0; }

.featured-3 { grid-template-columns: 1fr; gap: 24px; }
.feed-grid { grid-template-columns: 1fr; gap: 24px; }
.sec-grid { grid-template-columns: 1fr; gap: 24px; }
.related-grid { grid-template-columns: 1fr; gap: 24px; }
.art-nav { grid-template-columns: 1fr; }
.art-nav-item.next { text-align: left; align-items: flex-start; }
.art-nav-item.empty { display: none; }

.row-item { grid-template-columns: 116px 1fr; gap: 16px; }

.masthead .wrap { height: 64px; }
.wordmark { font-size: var(--fs-3xl); }
.brand-logo { height: 34px; }
.mast-tagline { display: none; }
.menu-toggle { display: inline-flex; }
#searchOpenM { display: inline-flex; }
.catnav-mini { display: flex; }
.util-weather { display: none; }

.foot-top { grid-template-columns: 1fr; gap: 32px; }
.foot-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }

.prof-cols { grid-template-columns: 1fr; gap: 36px; }
.prof-stats { grid-template-columns: repeat(2, 1fr); }
.bill-cols { grid-template-columns: 1fr; gap: 36px; }
.bill-card { flex-direction: column; align-items: flex-start; }
.acct-header { align-items: flex-start; }
.unsave { opacity: 1; transform: none; }
.plans { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
.inv-row { grid-template-columns: 1fr auto; }
.inv-plan, .inv-ok { display: none; }

.pg-arrow { padding: 0 12px; }
.pg-arrow span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.bb-link { white-space: normal; line-height: 1.35; }
.breaking-band .wrap { align-items: flex-start; }
.bb-label { margin-top: 2px; }

/* ---------- >= 640px: large phone ---------- */
@media (min-width: 640px) {
  .feed-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .sec-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }
  .related-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .row-item { grid-template-columns: 150px 1fr; gap: 20px; }
  .art-nav { grid-template-columns: 1fr 1fr; }
  .art-nav-item.next { text-align: right; align-items: flex-end; }
  .art-nav-item.empty { display: block; }
  .foot-top { grid-template-columns: 1fr 1fr; }
  .foot-bottom { flex-direction: row; align-items: center; }
  .util-weather { display: flex; }
  .inv-row { grid-template-columns: 120px 1fr auto 24px; }
  .inv-plan, .inv-ok { display: block; }
  .inv-ok { display: flex; }
  .pg-arrow { padding: 0 16px; }
  .pg-arrow span { position: static; width: auto; height: auto; clip: auto; }
}

/* ---------- >= 768px: tablet ---------- */
@media (min-width: 768px) {
  :root { --gut: 28px; }
  .featured-3 { grid-template-columns: repeat(3, 1fr); gap: 32px 28px; }
  .plans { grid-template-columns: repeat(3, 1fr); max-width: none; }
  .masthead .wrap { height: 84px; }
  .wordmark { font-size: var(--fs-4xl); }
  .brand-logo { height: 44px; }
  .mast-tagline { display: block; }
  .menu-toggle { display: none; }
  #searchOpenM { display: none; }
  .catnav-mini { display: none; }
  .acct-header { align-items: flex-end; }
  .bill-card { flex-direction: row; align-items: center; }
  .unsave { opacity: 0; transform: scale(.9); }
  .saved-card:hover .unsave { opacity: 1; transform: none; }
  .bb-link { white-space: nowrap; }
  .breaking-band .wrap { align-items: center; }
  .bb-label { margin-top: 0; }
}

/* ---------- >= 1024px: laptop ---------- */
@media (min-width: 1024px) {
  .hero { grid-template-columns: 1.55fr 1fr; gap: 32px; }
  .layout { grid-template-columns: 1fr 300px; gap: 36px; }
  .aside-box.sticky { position: sticky; top: 64px; }
  .article-layout .aside { padding-top: 40px; }
  .feed-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .sec-grid { grid-template-columns: repeat(4, 1fr); gap: 28px 24px; }
  .related-grid { grid-template-columns: repeat(4, 1fr); }
  .prof-cols { grid-template-columns: 1fr 300px; gap: 36px; }
  .prof-stats { grid-template-columns: repeat(4, 1fr); }
  .bill-cols { grid-template-columns: 1fr 300px; gap: 36px; }
  .foot-top { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
}

/* ---------- >= 1280px: desktop ---------- */
@media (min-width: 1280px) {
  .layout { grid-template-columns: 1fr 340px; gap: 48px; }
  .prof-cols { grid-template-columns: 1fr 340px; gap: 48px; }
  .bill-cols { grid-template-columns: 1fr 340px; gap: 48px; }
}


/* ============================================================
   Touch targets inside clipping rails — real height, not ::after
   (a 44px pseudo-box cannot escape a scroll rail or a pill track)
   ============================================================ */
/* utility bar grows so its controls can genuinely reach 44px */
.utility .wrap { height: 48px; gap: var(--space-4); }
.datestrip { overflow-x: auto; overflow-y: hidden; padding-right: var(--space-2); }
.ds-day { min-height: 44px; align-items: center; }
.ds-day b { line-height: 1; }

.lang-switch { align-items: stretch; }
.lang-opt { min-height: 44px; min-width: 44px; padding-inline: var(--space-2); border-radius: 999px; }
.lang-globe, .lang-sep { align-self: center; }
.theme-btn { width: 36px; height: 36px; }

/* pill tracks: give the control the height instead of clipping a pseudo-box */
.tab, .feed-tab, .fs-opt, .acct-tab, .cm-sort-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.tabs, .feed-tabs, .filter-sort, .acct-tabs, .cm-sort { align-items: stretch; }

/* the drawer's stacked switch keeps its own sizing */
.lang-switch.lang-block .lang-opt { min-height: 44px; }


/* ============================================================
   Category nav: make all 11 links FIT instead of silently clipping
   (11 links need ~1055px; content box is viewport - 2*gut)
   ============================================================ */
/* below 1024 the rail is real — give the clip a visible affordance */
.catnav .wrap {
  justify-content: flex-start;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent 100%);
          mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent 100%);
}
.catnav .wrap::after { content: ''; flex: none; width: var(--space-4); }

/* 1024-1279: shrink the links so every category fits, no rail at all */
@media (min-width: 1024px) {
  .cat-link { padding-inline: var(--space-2); font-size: var(--fs-xs); }
  .catnav .wrap {
    -webkit-mask-image: none; mask-image: none;
    overflow-x: visible; justify-content: space-between;
  }
  .catnav .wrap::after { display: none; }
}

/* >=1280: full comfortable spacing, evenly distributed */
@media (min-width: 1280px) {
  .cat-link { padding-inline: 13px; font-size: var(--fs-sm); }
}

/* ============================================================
   Error toast close button — the only exit from a persistent
   toast, so it needs a real 44px target (fixed pos, no clipping)
   ============================================================ */
.toast-close { width: 28px; height: 28px; position: relative; }
.toast-close::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}
.toast-close svg { position: relative; z-index: 1; }


/* ============================================================
   Every horizontal rail gets the same clip affordance —
   an edge fade + trailing spacer, so a cut label reads as
   "more to the right" instead of a severed word
   ============================================================ */
.datestrip {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent 100%);
          mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent 100%);
}
.datestrip::after { content: ''; flex: none; width: var(--space-4); }

/* wide enough for all seven days: no clip, so no fade */
@media (min-width: 1280px) {
  .datestrip { -webkit-mask-image: none; mask-image: none; }
  .datestrip::after { display: none; }
}


/* ============================================================
   Card hover: slow cinematic image push-in + a gentle lift
   ============================================================ */
.card .thumb { overflow: hidden; }
.card .thumb img {
  transform: scale(1.001);
  transition: transform 900ms cubic-bezier(0.16, 0.72, 0.24, 1),
              filter 500ms var(--ease-out);
  will-change: transform;
}
.card:hover .thumb img,
.card:focus-visible .thumb img {
  transform: scale(1.07);
  filter: saturate(1.06) contrast(1.02);
}

/* the card itself rises a touch — reads as "this one is live" */
.card { transition: transform 320ms var(--ease-out); }
.featured-3 .card:hover,
.feed-grid .card:hover,
.sec-grid .card:hover,
.related-grid .card:hover,
.trend-lead:hover { transform: translateY(-3px); }

/* small thumbnails in rails get the same push-in, scaled down */
.trend-thumb, .mini-thumb, .rthumb {
  transition: transform 700ms cubic-bezier(0.16, 0.72, 0.24, 1);
  will-change: transform;
}
.card:hover .trend-thumb,
.card:hover .mini-thumb,
.card:hover .rthumb { transform: scale(1.06); }
.trend-row, .mini-item, .rank-item { overflow: hidden; border-radius: var(--r-sm); }

/* row cards: image pushes in, no lift (they sit in a list) */
.row-item:hover { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .card:hover .thumb img, .card:focus-visible .thumb img,
  .card:hover .trend-thumb, .card:hover .mini-thumb, .card:hover .rthumb { transform: none; }
  .featured-3 .card:hover, .feed-grid .card:hover,
  .sec-grid .card:hover, .related-grid .card:hover, .trend-lead:hover { transform: none; }
}