/* ==========================================================================
   LLB UI KIT v1.0  —  news-magazine / daily-news UI kit
   Prefix: .llb-*   |  Vanilla CSS, no build step, no dependencies.
   Style: centered masthead, dark nav bar, breaking-news hero,
          content + right sidebar, category blocks with READ MORE bars.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --llb-brand:       #cf102d;   /* red — flags, section markers, links */
  --llb-brand-dark:  #a30c23;
  --llb-brand-soft:  #fdecef;
  --llb-navy:        #14181f;   /* nav bar + footer */
  --llb-navy-2:      #1e232c;   /* hover rows in nav/footer */

  /* Ink & surface */
  --llb-ink:         #16181d;
  --llb-ink-2:       #3f434c;
  --llb-ink-3:       #757a85;
  --llb-ink-4:       #a3a8b2;
  --llb-surface:     #ffffff;
  --llb-surface-2:   #f2f3f5;   /* page background behind cards */
  --llb-surface-3:   #e6e8ec;   /* placeholders */

  /* Lines */
  --llb-line:        #e0e2e6;
  --llb-line-soft:   #eef0f2;
  --llb-line-strong: #16181d;

  /* Type */
  --llb-font-display: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  --llb-font-body:    "Lora", Georgia, "Times New Roman", serif;
  --llb-font-ui:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --llb-fs-eyebrow: 0.6875rem;
  --llb-fs-meta:    0.75rem;
  --llb-fs-sm:      0.8125rem;
  --llb-fs-base:    0.9375rem;
  --llb-fs-lg:      1.0625rem;
  --llb-fs-h6:      1rem;
  --llb-fs-h5:      1.125rem;
  --llb-fs-h4:      1.3125rem;
  --llb-fs-h3:      1.625rem;
  --llb-fs-h2:      2rem;
  --llb-fs-h1:      2.625rem;
  --llb-fs-hero:    3.25rem;

  --llb-lh-tight: 1.14;
  --llb-lh-snug:  1.26;
  --llb-lh-body:  1.65;

  /* Space (4pt) */
  --llb-1:4px; --llb-2:8px;  --llb-3:12px; --llb-4:16px; --llb-5:20px;
  --llb-6:24px; --llb-8:32px; --llb-10:40px; --llb-12:48px; --llb-16:64px;

  /* Layout */
  --llb-container:    1220px;
  --llb-container-nr: 800px;
  --llb-gutter:       18px;
  --llb-gap:          24px;
  --llb-rail:         320px;

  /* Shape & depth — sharp corners, newspaper feel */
  --llb-radius:   0px;
  --llb-shadow-1: 0 1px 3px rgba(20,24,31,.10);
  --llb-shadow-2: 0 8px 30px rgba(20,24,31,.14);

  /* Motion */
  --llb-t-fast: 120ms ease;
  --llb-t:      200ms ease;

  /* Z */
  --llb-z-nav:    100;
  --llb-z-drawer: 200;
  --llb-z-sticky: 300;
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
body {
  margin: 0;
  background: var(--llb-surface-2);
  color: var(--llb-ink-2);
  font-family: var(--llb-font-ui);
  font-size: var(--llb-fs-base);
  line-height: var(--llb-lh-body);
  -webkit-font-smoothing: antialiased;
}
img, video, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1,h2,h3,h4,h5,h6 { margin:0; font-family: var(--llb-font-display); color: var(--llb-ink); font-weight: 700; line-height: var(--llb-lh-tight); }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:where(a,button,input,select,textarea,[tabindex]):focus-visible { outline: 2px solid var(--llb-brand); outline-offset: 2px; }

.llb-skip { position:absolute; left:-9999px; top:0; z-index: var(--llb-z-sticky); background: var(--llb-navy); color:#fff; padding: var(--llb-3) var(--llb-4); }
.llb-skip:focus { left: var(--llb-3); top: var(--llb-3); }

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.llb-container { width:100%; max-width: var(--llb-container); margin-inline:auto; padding-inline: var(--llb-gutter); }
.llb-container--narrow { max-width: var(--llb-container-nr); }

.llb-section { padding-block: var(--llb-8); }
.llb-section--tight { padding-block: var(--llb-5); }
.llb-section--white { background: var(--llb-surface); }
.llb-section--dark { background: var(--llb-navy); color: #c9ccd3; }

/* main + right rail — poori site ka base layout */
.llb-shell { display: grid; grid-template-columns: minmax(0,1fr) var(--llb-rail); gap: var(--llb-8); align-items: start; }

.llb-grid { display: grid; gap: var(--llb-gap); }
.llb-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.llb-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.llb-grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.llb-grid--hero { grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); }

.llb-stack > * + * { margin-top: var(--llb-4); }
.llb-stack--sm > * + * { margin-top: var(--llb-2); }
.llb-stack--lg > * + * { margin-top: var(--llb-8); }

.llb-row { display:flex; align-items:center; gap: var(--llb-3); flex-wrap: wrap; }
.llb-row--between { justify-content: space-between; }

.llb-divided > * + * { border-top: 1px solid var(--llb-line); padding-top: var(--llb-4); margin-top: var(--llb-4); }
.llb-divided--tight > * + * { padding-top: var(--llb-3); margin-top: var(--llb-3); }

/* White content card — LLB ka har block iske andar baithta hai */
.llb-box { background: var(--llb-surface); border: 1px solid var(--llb-line); padding: var(--llb-6); }
.llb-box--flush { padding: 0; }
.llb-box--pad-sm { padding: var(--llb-4); }

/* --------------------------------------------------------------------------
   4. TYPOGRAPHY
   -------------------------------------------------------------------------- */
.llb-kicker {
  display:inline-block; font-family: var(--llb-font-ui); font-size: var(--llb-fs-eyebrow);
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--llb-brand); margin-bottom: var(--llb-2);
}
.llb-kicker--muted { color: var(--llb-ink-3); }

.llb-hero-title { font-size: var(--llb-fs-hero); }
.llb-h1{font-size:var(--llb-fs-h1)} .llb-h2{font-size:var(--llb-fs-h2)}
.llb-h3{font-size:var(--llb-fs-h3)} .llb-h4{font-size:var(--llb-fs-h4)}
.llb-h5{font-size:var(--llb-fs-h5);line-height:var(--llb-lh-snug)}
.llb-h6{font-size:var(--llb-fs-h6);line-height:var(--llb-lh-snug)}

.llb-excerpt { font-family: var(--llb-font-body); font-size: var(--llb-fs-base); color: var(--llb-ink-2); line-height: 1.6; }
.llb-standfirst { font-family: var(--llb-font-body); font-size: var(--llb-fs-lg); color: var(--llb-ink-2); line-height: 1.55; }

.llb-prose { font-family: var(--llb-font-body); font-size: 1.0625rem; line-height: 1.75; color: var(--llb-ink-2); }
.llb-prose h2 { font-size: var(--llb-fs-h3); margin: var(--llb-8) 0 var(--llb-3); }
.llb-prose h3 { font-size: var(--llb-fs-h4); margin: var(--llb-6) 0 var(--llb-2); }
.llb-prose a { color: var(--llb-brand); text-decoration: underline; text-underline-offset: 2px; }
.llb-prose ul { list-style: disc; padding-left: 1.2em; margin-bottom: 1em; }
.llb-prose li { margin-bottom: .4em; }

/* byline — "by Author  ·  date" */
.llb-byline { font-family: var(--llb-font-ui); font-size: var(--llb-fs-meta); color: var(--llb-ink-3); }
.llb-byline a { color: var(--llb-brand); font-weight: 600; }
.llb-byline a:hover { text-decoration: underline; }
.llb-byline__sep::before { content:"·"; margin: 0 6px; color: var(--llb-ink-4); }
.llb-date { font-family: var(--llb-font-ui); font-size: var(--llb-fs-meta); color: var(--llb-ink-3); }

.llb-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.llb-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.llb-btn {
  display:inline-flex; align-items:center; justify-content:center; gap: var(--llb-2);
  font-family: var(--llb-font-ui); font-size: var(--llb-fs-sm); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  padding: 11px 22px; border: 1px solid transparent; border-radius: var(--llb-radius);
  background: var(--llb-brand); color:#fff; cursor:pointer;
  transition: background var(--llb-t), color var(--llb-t), border-color var(--llb-t);
}
.llb-btn:hover { background: var(--llb-brand-dark); }
.llb-btn[disabled] { background: var(--llb-surface-3); color: var(--llb-ink-4); cursor: not-allowed; }
.llb-btn--dark { background: var(--llb-navy); }
.llb-btn--dark:hover { background: #000; }
.llb-btn--outline { background: transparent; color: var(--llb-ink); border-color: var(--llb-ink); }
.llb-btn--outline:hover { background: var(--llb-ink); color:#fff; }
.llb-btn--light { background:#fff; color: var(--llb-ink); }
.llb-btn--light:hover { background: var(--llb-surface-2); }
.llb-btn--sm { padding: 7px 14px; font-size: var(--llb-fs-meta); }
.llb-btn--lg { padding: 15px 30px; font-size: var(--llb-fs-base); }
.llb-btn--block { display:flex; width:100%; }

/* READ MORE bar — har category block ke neeche */
.llb-readmore {
  display:block; width:100%; text-align:center;
  font-family: var(--llb-font-ui); font-size: var(--llb-fs-meta); font-weight:800;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 14px; margin-top: var(--llb-5);
  background: var(--llb-navy); color:#fff;
  transition: background var(--llb-t);
}
.llb-readmore:hover { background: var(--llb-brand); }
.llb-readmore--outline { background: transparent; color: var(--llb-ink); border: 1px solid var(--llb-line-strong); }
.llb-readmore--outline:hover { background: var(--llb-ink); color:#fff; }

.llb-iconbtn { width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; background:transparent; border:0; cursor:pointer; color: inherit; }
.llb-iconbtn:hover { color: var(--llb-brand); }
.llb-iconbtn svg { width:20px; height:20px; }

/* --------------------------------------------------------------------------
   6. FLAGS / TAGS / CHIPS
   -------------------------------------------------------------------------- */
.llb-flag {
  display:inline-flex; align-items:center; gap:7px;
  font-family: var(--llb-font-ui); font-size: var(--llb-fs-eyebrow); font-weight:800;
  letter-spacing:.1em; text-transform: uppercase;
  background: var(--llb-brand); color:#fff; padding: 5px 10px;
}
.llb-flag--dark { background: var(--llb-navy); }
.llb-flag--sponsored { background: #6b5a2e; }
.llb-flag--live::before { content:""; width:6px; height:6px; border-radius:50%; background:#fff; animation: llb-pulse 1.6s infinite; }
@keyframes llb-pulse { 0%,100%{opacity:1} 50%{opacity:.25} }

.llb-tag { display:inline-block; font-size: var(--llb-fs-meta); font-weight:600; color: var(--llb-brand); text-transform: uppercase; letter-spacing:.06em; }
.llb-tag:hover { text-decoration: underline; }

.llb-chips { display:flex; gap: var(--llb-2); flex-wrap: wrap; }
.llb-chip { display:inline-block; padding: 6px 12px; border:1px solid var(--llb-line); font-size: var(--llb-fs-sm); font-weight:600; color: var(--llb-ink-2); transition: all var(--llb-t); }
.llb-chip:hover { border-color: var(--llb-ink); }
.llb-chip.is-active { background: var(--llb-navy); border-color: var(--llb-navy); color:#fff; }

/* --------------------------------------------------------------------------
   7. MASTHEAD + NAV BAR
   -------------------------------------------------------------------------- */
.llb-masthead { background: var(--llb-surface); border-bottom: 1px solid var(--llb-line); padding-block: var(--llb-5); }
.llb-masthead__inner { display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap: var(--llb-4); }
.llb-masthead__date { font-size: var(--llb-fs-meta); color: var(--llb-ink-3); text-transform: uppercase; letter-spacing: .08em; }
.llb-masthead__social { display:flex; gap: var(--llb-2); justify-content:flex-end; }
.llb-masthead__social a { width:32px; height:32px; display:grid; place-items:center; border:1px solid var(--llb-line); color: var(--llb-ink-2); }
.llb-masthead__social a:hover { background: var(--llb-brand); border-color: var(--llb-brand); color:#fff; }

.llb-wordmark { display:inline-flex; align-items:baseline; gap:6px; font-family: var(--llb-font-display); font-weight:700; font-size: 2rem; color: var(--llb-ink); letter-spacing:-.01em; text-transform: uppercase; }
.llb-wordmark em { font-style: normal; color: var(--llb-brand); }
.llb-wordmark small { font-family: var(--llb-font-ui); font-size: .6875rem; letter-spacing:.24em; color: var(--llb-ink-3); text-transform: uppercase; }

/* dark nav bar */
.llb-navbar { position: sticky; top: 0; z-index: var(--llb-z-nav); background: var(--llb-navy); }
.llb-navbar.is-stuck { box-shadow: var(--llb-shadow-1); }
.llb-navbar__inner { display:flex; align-items:stretch; gap: var(--llb-1); min-height: 46px; }
.llb-navbar__compact { display:none; align-items:center; gap: var(--llb-2); color:#fff; font-family: var(--llb-font-display); font-weight:700; text-transform: uppercase; }
.llb-navbar.is-stuck .llb-navbar__compact { display:flex; }

.llb-nav { display:flex; align-items:stretch; }
.llb-nav__item { position:relative; display:flex; align-items:stretch; }
.llb-nav__link {
  display:inline-flex; align-items:center; gap:6px; padding: 0 14px;
  font-family: var(--llb-font-ui); font-size: var(--llb-fs-sm); font-weight:600;
  color:#fff; text-transform: uppercase; letter-spacing:.04em;
  transition: background var(--llb-t), color var(--llb-t);
}
.llb-nav__link:hover, .llb-nav__item:focus-within > .llb-nav__link, .llb-nav__link.is-active { background: var(--llb-brand); }
.llb-nav__caret { width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.llb-navbar__end { margin-left:auto; display:flex; align-items:center; gap: var(--llb-1); color:#fff; }

/* dropdown */
.llb-dropdown {
  position:absolute; top:100%; left:0; min-width: 230px; background: var(--llb-surface);
  border:1px solid var(--llb-line); border-top: 3px solid var(--llb-brand); box-shadow: var(--llb-shadow-2);
  padding: var(--llb-2) 0; opacity:0; visibility:hidden; transform: translateY(5px);
  transition: opacity var(--llb-t), transform var(--llb-t), visibility var(--llb-t);
}
.llb-nav__item:hover > .llb-dropdown, .llb-nav__item:focus-within > .llb-dropdown, .llb-dropdown.is-open { opacity:1; visibility:visible; transform: translateY(0); }
.llb-dropdown a { display:block; padding: 9px 16px; font-size: var(--llb-fs-sm); font-weight:600; color: var(--llb-ink); }
.llb-dropdown a:hover { background: var(--llb-surface-2); color: var(--llb-brand); }
.llb-dropdown--wide { min-width: 520px; padding: var(--llb-5); display:grid; grid-template-columns: repeat(2,1fr); gap: var(--llb-2) var(--llb-6); }
.llb-dropdown--wide a { padding: 6px 0; }
.llb-dropdown--wide a:hover { background:none; }

/* search drawer under nav */
.llb-searchbar { display:none; background: var(--llb-navy-2); padding: var(--llb-4) 0; }
.llb-searchbar.is-open { display:block; }
.llb-searchbar form { display:flex; gap: var(--llb-2); }
.llb-searchbar input { flex:1; padding: 12px 14px; border:0; background:#fff; font-size: var(--llb-fs-base); }

/* network switcher — sister sites */
.llb-network { background: var(--llb-surface); border-bottom:1px solid var(--llb-line); }
.llb-network__inner { display:flex; gap: var(--llb-4); align-items:center; min-height: 34px; overflow-x:auto; scrollbar-width:none; }
.llb-network__inner::-webkit-scrollbar { display:none; }
.llb-network__label { font-size: var(--llb-fs-eyebrow); font-weight:800; letter-spacing:.14em; text-transform: uppercase; color: var(--llb-ink-4); flex:none; }
.llb-network a { font-size: var(--llb-fs-meta); font-weight:700; text-transform: uppercase; letter-spacing:.06em; color: var(--llb-ink-3); white-space:nowrap; }
.llb-network a:hover, .llb-network a.is-active { color: var(--llb-brand); }

/* mobile drawer */
.llb-burger { display:none; }
.llb-drawer {
  position:fixed; inset:0 auto 0 0; width:min(86vw,340px); z-index: var(--llb-z-drawer);
  background: var(--llb-navy); color:#fff; transform: translateX(-100%); transition: transform var(--llb-t);
  overflow-y:auto; padding: var(--llb-5);
}
.llb-drawer.is-open { transform: translateX(0); }
.llb-drawer__scrim { position:fixed; inset:0; background: rgba(20,24,31,.6); z-index: calc(var(--llb-z-drawer) - 1); opacity:0; visibility:hidden; transition: opacity var(--llb-t), visibility var(--llb-t); }
.llb-drawer__scrim.is-open { opacity:1; visibility:visible; }
.llb-drawer a { color:#fff; }
.llb-drawer__group summary { cursor:pointer; list-style:none; padding: 12px 0; font-family: var(--llb-font-display); font-size: 1.0625rem; font-weight:700; text-transform: uppercase; border-bottom:1px solid var(--llb-navy-2); display:flex; justify-content:space-between; }
.llb-drawer__group summary::-webkit-details-marker { display:none; }
.llb-drawer__group summary::after { content:"+"; color: var(--llb-brand); }
.llb-drawer__group[open] summary::after { content:"–"; }
.llb-drawer__group ul { padding: var(--llb-3) 0; }
.llb-drawer__group li + li { margin-top: 10px; }
.llb-drawer__group a { font-size: var(--llb-fs-sm); color:#c9ccd3; }

/* --------------------------------------------------------------------------
   8. SECTION HEADINGS (red block + uppercase + rule)
   -------------------------------------------------------------------------- */
.llb-sechead { display:flex; align-items:center; gap: var(--llb-3); margin-bottom: var(--llb-5); }
.llb-sechead__title {
  font-size: var(--llb-fs-h4); text-transform: uppercase; letter-spacing:.02em;
  position:relative; padding-left: var(--llb-3); flex:none;
}
.llb-sechead__title::before { content:""; position:absolute; left:0; top:2px; bottom:2px; width:5px; background: var(--llb-brand); }
.llb-sechead__title a:hover { color: var(--llb-brand); }
.llb-sechead::after { content:""; flex:1; height:1px; background: var(--llb-line); }
.llb-sechead__link { flex:none; font-size: var(--llb-fs-meta); font-weight:700; text-transform: uppercase; letter-spacing:.08em; color: var(--llb-ink-3); }
.llb-sechead__link:hover { color: var(--llb-brand); }
/* filled variant */
.llb-sechead--filled .llb-sechead__title { background: var(--llb-navy); color:#fff; padding: 7px 14px; }
.llb-sechead--filled .llb-sechead__title::before { display:none; }

/* --------------------------------------------------------------------------
   9. MEDIA
   -------------------------------------------------------------------------- */
.llb-media { position:relative; overflow:hidden; background: var(--llb-surface-3); display:block; }
.llb-media::before { content:""; display:block; padding-top: 56.25%; }
.llb-media > img, .llb-media > video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform 400ms ease; }
.llb-media--1x1::before  { padding-top:100%; }
.llb-media--4x3::before  { padding-top:75%; }
.llb-media--3x2::before  { padding-top:66.66%; }
.llb-media--21x9::before { padding-top:42.85%; }
a:hover > .llb-media > img, .llb-story:hover .llb-media > img { transform: scale(1.05); }
.llb-media--ph { background: repeating-linear-gradient(45deg, var(--llb-surface-3) 0 10px, #dfe2e7 10px 20px); }
.llb-media__label { position:absolute; inset:0; display:grid; place-items:center; font-size: var(--llb-fs-meta); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color: var(--llb-ink-3); }
.llb-media__flag { position:absolute; left:0; top:0; z-index:2; }
.llb-media__play { position:absolute; inset:0; display:grid; place-items:center; z-index:2; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.4) 100%); }
.llb-media__play span { width:52px; height:52px; border-radius:50%; background: var(--llb-brand); display:grid; place-items:center; }
.llb-media__play span::after { content:""; border-left:14px solid #fff; border-top:9px solid transparent; border-bottom:9px solid transparent; margin-left:4px; }
.llb-caption { font-size: var(--llb-fs-meta); color: var(--llb-ink-3); margin-top: var(--llb-2); }

/* --------------------------------------------------------------------------
   10. HERO (breaking news)
   -------------------------------------------------------------------------- */
.llb-hero { position:relative; color:#fff; display:block; }
.llb-hero .llb-media::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.08) 35%, rgba(0,0,0,.85) 100%); }
.llb-hero__body { position:absolute; inset:auto 0 0 0; z-index:2; padding: var(--llb-8); }
.llb-hero__title { font-size: var(--llb-fs-h1); color:#fff; max-width: 22ch; margin-top: var(--llb-3); }
.llb-hero:hover .llb-hero__title { text-decoration: underline; text-underline-offset: 4px; }
.llb-hero__meta { color: rgba(255,255,255,.85); font-size: var(--llb-fs-meta); margin-top: var(--llb-3); }
.llb-hero__meta a { color:#fff; font-weight:600; }
.llb-hero--tall .llb-media::before { padding-top: 62%; }

/* --------------------------------------------------------------------------
   11. STORY UNITS
   -------------------------------------------------------------------------- */
.llb-story { display:block; }
.llb-story__body { padding-top: var(--llb-3); }
.llb-story__title { font-size: var(--llb-fs-h5); }
.llb-story__title a:hover, .llb-story:hover .llb-story__title { color: var(--llb-brand); }
.llb-story__excerpt { font-family: var(--llb-font-body); font-size: var(--llb-fs-sm); color: var(--llb-ink-2); margin-top: var(--llb-2); }
.llb-story__meta { margin-top: var(--llb-2); }

/* lead story inside a category block */
.llb-story--lead .llb-story__title { font-size: var(--llb-fs-h3); }
.llb-story--lead .llb-story__excerpt { font-size: var(--llb-fs-base); margin-top: var(--llb-3); }

/* text row with small thumb on the right (LLB list style) */
.llb-story--row { display:grid; grid-template-columns: minmax(0,1fr) 108px; gap: var(--llb-4); align-items:start; }
.llb-story--row .llb-story__body { padding-top:0; }
.llb-story--row .llb-media { order:2; }
.llb-story--row .llb-story__title { font-size: var(--llb-fs-h6); }
/* thumb on the left */
.llb-story--rowleft { grid-template-columns: 108px minmax(0,1fr); }
.llb-story--rowleft .llb-media { order:0; }

/* compact sidebar row */
.llb-story--mini { display:grid; grid-template-columns: 78px minmax(0,1fr); gap: var(--llb-3); align-items:start; }
.llb-story--mini .llb-story__body { padding-top:0; }
.llb-story--mini .llb-story__title { font-size: var(--llb-fs-sm); }

/* headline-only bulleted list (red square marker) */
.llb-headlines > li { position:relative; padding-left: var(--llb-4); padding-block: 10px; border-top: 1px solid var(--llb-line); }
.llb-headlines > li:first-child { border-top:0; }
.llb-headlines > li::before { content:""; position:absolute; left:0; top:17px; width:7px; height:7px; background: var(--llb-brand); }
.llb-headlines a { font-family: var(--llb-font-display); font-size: var(--llb-fs-h6); font-weight:700; color: var(--llb-ink); line-height: var(--llb-lh-snug); }
.llb-headlines a:hover { color: var(--llb-brand); }

/* numbered most-read list */
.llb-mostread { counter-reset: llb-n; }
.llb-mostread > li { counter-increment: llb-n; display:grid; grid-template-columns: 30px minmax(0,1fr); gap: var(--llb-3); align-items:start; }
.llb-mostread > li::before { content: counter(llb-n); font-family: var(--llb-font-display); font-size: 1.5rem; font-weight:700; color: var(--llb-surface-3); line-height:1; }
.llb-mostread > li:hover::before { color: var(--llb-brand); }
.llb-mostread h4 { font-size: var(--llb-fs-sm); line-height: var(--llb-lh-snug); }
.llb-mostread h4 a:hover { color: var(--llb-brand); }

/* author card */
.llb-author { display:flex; gap: var(--llb-3); align-items:center; }
.llb-avatar { width:40px; height:40px; border-radius:50%; background: var(--llb-surface-3); object-fit:cover; flex:none; }
.llb-avatar--lg { width:60px; height:60px; }

/* --------------------------------------------------------------------------
   12. SIDEBAR WIDGETS
   -------------------------------------------------------------------------- */
.llb-widget { background: var(--llb-surface); border:1px solid var(--llb-line); padding: var(--llb-5); }
.llb-widget__title { font-size: var(--llb-fs-h5); text-transform: uppercase; letter-spacing:.04em; padding-bottom: var(--llb-3); margin-bottom: var(--llb-4); border-bottom: 3px solid var(--llb-brand); }
.llb-widget.is-sticky { position: sticky; top: 66px; }

/* network widget — sister-site feed */
.llb-netbox { background: var(--llb-surface); border:1px solid var(--llb-line); }
.llb-netbox__head { background: var(--llb-navy); color:#fff; padding: var(--llb-3) var(--llb-4); display:flex; align-items:center; justify-content:space-between; gap: var(--llb-3); }
.llb-netbox__brand { font-family: var(--llb-font-display); font-weight:700; text-transform: uppercase; letter-spacing:.04em; font-size: 1rem; }
.llb-netbox__brand em { font-style:normal; color: var(--llb-brand); }
.llb-netbox__body { padding: var(--llb-4); }
.llb-netbox__body > * + * { border-top:1px solid var(--llb-line); padding-top: var(--llb-3); margin-top: var(--llb-3); }
.llb-netbox__visit { display:block; text-align:center; padding: 11px; background: var(--llb-surface-2); border-top:1px solid var(--llb-line); font-size: var(--llb-fs-meta); font-weight:700; text-transform: uppercase; letter-spacing:.08em; }
.llb-netbox__visit:hover { background: var(--llb-brand); color:#fff; }

/* signup box */
.llb-signup { background: var(--llb-navy); color:#c9ccd3; padding: var(--llb-6); }
.llb-signup h3 { color:#fff; font-size: var(--llb-fs-h5); text-transform: uppercase; }
.llb-signup p { font-size: var(--llb-fs-sm); margin: var(--llb-2) 0 var(--llb-4); }
.llb-form { display:flex; gap: var(--llb-2); }
.llb-form--stack { flex-direction: column; }
.llb-input { flex:1; padding: 12px 14px; border:1px solid var(--llb-line); background:#fff; font-size: var(--llb-fs-sm); color: var(--llb-ink); }
.llb-input:focus { outline:none; border-color: var(--llb-brand); }
.llb-form__note { font-size: var(--llb-fs-meta); color: var(--llb-ink-4); margin-top: var(--llb-3); }

/* social follow strip */
.llb-follow { display:grid; grid-template-columns: repeat(2,1fr); gap: var(--llb-2); }
.llb-follow a { display:flex; align-items:center; gap: var(--llb-2); padding: 10px 12px; background: var(--llb-surface-2); font-size: var(--llb-fs-meta); font-weight:700; text-transform: uppercase; letter-spacing:.05em; }
.llb-follow a:hover { background: var(--llb-brand); color:#fff; }

/* ads */
.llb-ad { display:grid; place-items:center; background: var(--llb-surface-2); border:1px dashed var(--llb-line); color: var(--llb-ink-4); font-size: var(--llb-fs-meta); text-transform: uppercase; letter-spacing:.12em; min-height: 250px; }
.llb-ad--leader { min-height: 90px; }
.llb-ad--rail { min-height: 600px; }

/* sticky bottom ad with close (LLB pattern) */
.llb-stickyad { position:fixed; left:0; right:0; bottom:0; z-index: var(--llb-z-sticky); background: var(--llb-surface); border-top:1px solid var(--llb-line); box-shadow: 0 -4px 20px rgba(20,24,31,.12); }
.llb-stickyad.is-closed { display:none; }
.llb-stickyad__inner { display:flex; align-items:center; justify-content:center; min-height:90px; padding: var(--llb-2); }
.llb-stickyad__close { position:absolute; right: var(--llb-2); top:-26px; background: var(--llb-navy); color:#fff; border:0; font-size: 10px; font-weight:700; letter-spacing:.1em; text-transform: uppercase; padding: 5px 10px; cursor:pointer; }

/* partners logo strip */
.llb-partners { display:flex; flex-wrap:wrap; gap: var(--llb-6); align-items:center; justify-content:center; }
.llb-partners__item { width: 150px; height: 64px; background: var(--llb-surface-2); border:1px solid var(--llb-line); display:grid; place-items:center; font-size: var(--llb-fs-meta); color: var(--llb-ink-4); filter: grayscale(1); opacity:.75; transition: all var(--llb-t); }
.llb-partners__item:hover { filter:none; opacity:1; }

/* --------------------------------------------------------------------------
   13. ARTICLE EXTRAS
   -------------------------------------------------------------------------- */
.llb-crumbs { display:flex; gap: var(--llb-2); font-size: var(--llb-fs-meta); color: var(--llb-ink-3); flex-wrap:wrap; }
.llb-crumbs li + li::before { content:"›"; margin-right: var(--llb-2); color: var(--llb-ink-4); }
.llb-share { display:flex; gap: var(--llb-2); align-items:center; }
.llb-share__btn { width:36px; height:36px; border:1px solid var(--llb-line); display:grid; place-items:center; color: var(--llb-ink-2); transition: all var(--llb-t); }
.llb-share__btn:hover { background: var(--llb-brand); border-color: var(--llb-brand); color:#fff; }
.llb-pullquote { border-left:5px solid var(--llb-brand); padding-left: var(--llb-5); margin: var(--llb-8) 0; font-family: var(--llb-font-display); font-size: var(--llb-fs-h4); line-height:1.32; color: var(--llb-ink); }
.llb-pager { display:flex; gap: var(--llb-2); justify-content:center; }
.llb-pager a, .llb-pager span { min-width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--llb-line); background:#fff; font-size: var(--llb-fs-sm); font-weight:600; }
.llb-pager a:hover { border-color: var(--llb-ink); }
.llb-pager .is-current { background: var(--llb-brand); border-color: var(--llb-brand); color:#fff; }

/* --------------------------------------------------------------------------
   14. FOOTER
   -------------------------------------------------------------------------- */
.llb-footer { background: var(--llb-navy); color:#9ba1ac; padding-block: var(--llb-12) var(--llb-6); font-size: var(--llb-fs-sm); text-align:center; }
.llb-footer a { color:#d3d6dc; }
.llb-footer a:hover { color:#fff; }
.llb-footer__social { display:flex; gap: var(--llb-3); justify-content:center; margin-bottom: var(--llb-6); }
.llb-footer__social a { width:38px; height:38px; border:1px solid #2b313b; display:grid; place-items:center; }
.llb-footer__social a:hover { background: var(--llb-brand); border-color: var(--llb-brand); color:#fff; }
.llb-footer .llb-wordmark { color:#fff; }
.llb-footer .llb-wordmark small { color:#9ba1ac; }
.llb-footer__links { display:flex; flex-wrap:wrap; gap: var(--llb-5); justify-content:center; margin-top: var(--llb-6); font-size: var(--llb-fs-meta); text-transform: uppercase; letter-spacing:.08em; }
.llb-footer__legal { margin-top: var(--llb-6); padding-top: var(--llb-5); border-top:1px solid #2b313b; font-size: var(--llb-fs-meta); }

.llb-totop { position:fixed; right:18px; bottom:110px; z-index: var(--llb-z-sticky); width:42px; height:42px; background: var(--llb-brand); color:#fff; display:grid; place-items:center; border:0; cursor:pointer; opacity:0; visibility:hidden; transition: all var(--llb-t); }
.llb-totop.is-visible { opacity:1; visibility:visible; }

/* --------------------------------------------------------------------------
   15. UTILITIES
   -------------------------------------------------------------------------- */
.llb-mt-0{margin-top:0}.llb-mt-2{margin-top:var(--llb-2)}.llb-mt-3{margin-top:var(--llb-3)}
.llb-mt-4{margin-top:var(--llb-4)}.llb-mt-5{margin-top:var(--llb-5)}.llb-mt-6{margin-top:var(--llb-6)}
.llb-mt-8{margin-top:var(--llb-8)}.llb-mb-0{margin-bottom:0}.llb-mb-4{margin-bottom:var(--llb-4)}
.llb-text-center{text-align:center}
.llb-muted{color:var(--llb-ink-3)}
.llb-uppercase{text-transform:uppercase;letter-spacing:.08em}
.llb-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}
.llb-only-mob{display:none}

/* --------------------------------------------------------------------------
   16. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  :root { --llb-fs-hero:2.75rem; --llb-fs-h1:2.125rem; --llb-fs-h2:1.75rem; }
  .llb-shell { grid-template-columns: minmax(0,1fr); }
  .llb-widget.is-sticky { position: static; }
  .llb-grid--hero { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 900px) {
  .llb-nav, .llb-masthead__date, .llb-masthead__social { display:none; }
  .llb-burger { display:inline-flex; }
  .llb-masthead__inner { grid-template-columns: 1fr; justify-items:center; text-align:center; }
  .llb-grid--3, .llb-grid--4 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .llb-dropdown--wide { min-width: 320px; grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  :root {
    --llb-fs-hero:1.875rem; --llb-fs-h1:1.75rem; --llb-fs-h2:1.5rem;
    --llb-fs-h3:1.375rem; --llb-fs-h4:1.1875rem; --llb-fs-h5:1.0625rem;
    --llb-gutter:14px; --llb-gap:18px;
  }
  .llb-section { padding-block: var(--llb-6); }
  .llb-grid--2, .llb-grid--3, .llb-grid--4 { grid-template-columns: minmax(0,1fr); }
  .llb-box { padding: var(--llb-4); }
  .llb-hero__body { padding: var(--llb-4); }
  .llb-story--row, .llb-story--rowleft { grid-template-columns: minmax(0,1fr) 96px; }
  .llb-form { flex-direction: column; }
  .llb-follow { grid-template-columns: 1fr; }
  .llb-only-mob { display: revert; }
  .llb-hide-mob { display:none !important; }
  .llb-totop { bottom: 100px; }
}
@media print {
  .llb-navbar, .llb-masthead, .llb-footer, .llb-ad, .llb-stickyad, .llb-totop, .llb-drawer { display:none !important; }
  body { background:#fff; color:#000; }
}