/* ============================================================================
   LAYOUT — container, article grid, sidebar behaviour
   ========================================================================= */

.ll-wrap {
  width: 100%;
  max-width: var(--ll-container);
  margin-inline: auto;
  padding-inline: var(--ll-gutter);
}

.ll-main { display: block; }

/* ---------------------------------------------------------------------------
   ARTICLE GRID
   Mobile first: one column, sidebar contents dissolve into the flow.
   At 1000px the sidebar appears at 280px with a 96px gutter.
   ------------------------------------------------------------------------ */

.ll-article-wrap { padding-block: var(--sp-5) var(--sp-8); }

.ll-article-grid { display: grid; gap: var(--sp-7); }

.ll-article { min-width: 0; }

.ll-article__head { margin-bottom: var(--sp-5); }

/* Below 1000px the sidebar carries nothing: the TOC has already rendered as a
   collapsed <details> in the flow, and the newsletter renders inline after the
   author bio. Hiding the aside avoids a duplicate. */
.ll-side { display: none; }
.ll-article__mobile-newsletter { margin-bottom: var(--sp-7); }

@media (min-width: 620px) {
  :root { --ll-gutter: var(--ll-gutter-lg); }
}

@media (min-width: 1000px) {
  .ll-article-grid {
    grid-template-columns: minmax(0, 1fr) var(--ll-sidebar);
    gap: var(--sp-9);
    align-items: start;
  }

  .ll-side {
    display: grid;
    gap: var(--sp-6);
    align-content: start;
    position: sticky;
    top: var(--sp-5);
  }

  /* The inline TOC and the inline newsletter are mobile-only. */
  .ll-toc-inline,
  .ll-article__mobile-newsletter { display: none; }

  .ll-article-wrap { padding-block: var(--sp-6) var(--sp-9); }
}

/* ---------------------------------------------------------------------------
   STATIC PAGES (1.0.1)
   Same reading measure and typography as an article, no sidebar and no
   modules. A policy page is read once, top to bottom.
   ------------------------------------------------------------------------ */

.ll-page-wrap { padding-block: var(--sp-5) var(--sp-8); }
.ll-page { min-width: 0; max-width: var(--ll-column); }
.ll-page__head { margin-bottom: var(--sp-6); }
.ll-page__meta {
  font-size: var(--fs-meta);
  color: var(--ll-muted);
  border-top: 1px solid var(--ll-rule);
  border-bottom: 1px solid var(--ll-rule);
  padding-block: var(--sp-3);
  margin: 0;
}

@media (min-width: 1000px) {
  .ll-page-wrap { padding-block: var(--sp-6) var(--sp-9); }
}

/* ---------------------------------------------------------------------------
   LISTING (archives, search, author) — Phase 1 placeholder layout
   ------------------------------------------------------------------------ */

.ll-listing { padding-block: var(--sp-5) var(--sp-8); }
.ll-listing__head { margin-bottom: var(--sp-7); }
.ll-listing__intro { max-width: var(--ll-measure); color: var(--ll-ink-2); }
.ll-listing__intro p { margin-bottom: var(--sp-4); }

.ll-empty { max-width: var(--ll-measure); color: var(--ll-muted); }
.ll-empty p { margin-bottom: var(--sp-4); }

/* ---------------------------------------------------------------------------
   AD INSERTION POINTS
   The point exists structurally from launch; the HEIGHT RESERVATION does not.
   With no provider enabled these are zero-height and reserve no space, so the
   page has no blank gaps. Setting LL_ADS_ENABLED adds data-reserved and the
   reservation switches on, giving zero CLS once ads are live.
   ------------------------------------------------------------------------ */

.ll-ad { display: block; }

.ll-ad[data-reserved] {
  margin-block: var(--sp-7);
  min-height: 280px;
  display: grid;
  place-items: center;
}

@media (min-width: 1000px) {
  .ll-ad[data-reserved] { min-height: 250px; }
  .ll-ad[data-slot="sidebar-sticky"][data-reserved] { min-height: 600px; }
}