/* ==========================================================================
   Marvus Advisory — container, grid, section shells, surface themes
   ========================================================================== */

/* ---------- Container ----------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Narrow reading column, but still hung off the main container's left edge so
   it lines up with the logo and the section rules rather than floating in the
   middle of the page. */
.container--narrow > * { max-width: 800px; }

/* ---------- 12-column grid ------------------------------------------------ */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  gap: var(--grid-gap);
}

/* Mobile first: one column until a breakpoint says otherwise. :where() keeps
   this at zero specificity so the column classes below simply override it. */
.grid > :where(*) { grid-column: 1 / -1; }

@media (min-width: 768px) {
  .col-6\@md  { grid-column: span 6; }
  .col-12\@md { grid-column: span 12; }
}

@media (min-width: 1024px) {
  .col-3\@lg  { grid-column: span 3; }
  .col-4\@lg  { grid-column: span 4; }
  .col-5\@lg  { grid-column: span 5; }
  .col-6\@lg  { grid-column: span 6; }
  .col-7\@lg  { grid-column: span 7; }
  .col-8\@lg  { grid-column: span 8; }
  .col-start-7\@lg { grid-column: 7 / -1; }
  .col-start-8\@lg { grid-column: 8 / -1; }
}

/* ---------- Surface themes ------------------------------------------------
   Every dark block re-points the semantic tokens; components never hard-code
   a colour for one background or the other.                                 */
.is-light {
  --surface: var(--c-white);
  --ink: var(--c-blue);
  --ink-muted: var(--c-blue-60);
  --ink-faint: var(--c-blue-40);
  --rule: var(--c-blue-12);
  --rule-soft: var(--c-blue-08);
  --field: var(--c-blue-04);
  --field-edge: rgba(0, 24, 47, 0.5);
  --hatch-base: var(--c-blue-04);
  --hatch-line: var(--c-blue-08);
  background-color: var(--surface);
  color: var(--ink);
}

.is-dark {
  --surface: var(--c-blue);
  --ink: var(--c-white);
  --ink-muted: var(--c-white-60);
  --ink-faint: var(--c-white-40);
  --rule: var(--c-white-12);
  --rule-soft: var(--c-white-08);
  --field: var(--c-white-04);
  --field-edge: var(--c-white-40);
  --hatch-base: var(--c-white-04);
  --hatch-line: var(--c-white-08);
  background-color: var(--surface);
  color: var(--ink);
}

/* ---------- Section ------------------------------------------------------- */
.section {
  padding-block: var(--section-y);
  position: relative;
}
.section--tight { padding-block: var(--section-y-tight); }
.section--flush-top { padding-block-start: 0; }

/* Signature element: a hairline across the container carrying an orange tick
   and a bracketed index label. Repeats in every section on both surfaces. */
.section-marker {
  max-width: none;
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  padding-block-start: var(--s-2);
  border-block-start: var(--hairline) solid var(--rule);
  margin-block-end: var(--s-6);
  position: relative;
}
.section-marker::before {
  content: "";
  position: absolute;
  inset-block-start: calc(var(--tick) / -2);
  inset-inline-start: 0;
  width: var(--tick);
  height: var(--tick);
  background: var(--c-orange);
}
.section-marker__label {
  padding-inline-start: calc(var(--tick) + var(--s-2));
  color: var(--ink-muted);
}
.section-marker__label .u-index { color: var(--c-orange); }

@media (min-width: 1024px) {
  .section-marker { margin-block-end: var(--s-10); }
}

/* Section head: label rail on the left, heading and lead on the right. */
.section-head {
  display: grid;
  gap: var(--s-4);
  margin-block-end: var(--s-8);
}
.section-head__lead { max-width: 56ch; }

@media (min-width: 1024px) {
  .section-head {
    grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
    gap: var(--grid-gap);
    align-items: end;
    margin-block-end: var(--s-12);
  }
  .section-head__title { grid-column: 1 / span 6; }
  .section-head__lead  { grid-column: 7 / -1; padding-block-end: 0.35em; }
}

/* ---------- Page shell for the inner (legal/text) pages ------------------- */
.page-head {
  padding-block: calc(var(--s-12) + 64px) var(--section-y-tight);
}
/* Inner pages carry a smaller top line than the landing hero. */
.page-head h1 { font-size: var(--fs-h2); }
.page-head__meta { margin-block-start: var(--s-3); color: var(--ink-muted); }

.prose { max-width: 800px; }
.prose > * + * { margin-block-start: var(--s-3); }
.prose h2 {
  font-size: var(--fs-h3);
  margin-block-start: var(--s-10);
  padding-block-start: var(--s-3);
  border-block-start: var(--hairline) solid var(--rule);
}
.prose h3 {
  font-size: var(--fs-h4);
  margin-block-start: var(--s-6);
}
.prose h2:first-child { margin-block-start: 0; border: 0; padding-block-start: 0; }
.prose p, .prose li { color: var(--ink-muted); }
.prose ul, .prose ol { padding-inline-start: var(--s-3); }
.prose li + li { margin-block-start: var(--s-1); }
.prose a { color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; }
.prose a:hover { color: var(--c-orange); }