/* ==========================================================================
   The inner pages on the home grid (Oct 2026).

   Loaded by every V1 page — home, About, Projects, 404 and every case study —
   after their other layout stylesheets. Not by the frozen v0 home, which is
   why the shared .rail / .rail-offset / .cs-row rules in base.css and
   case-study.css are overridden here rather than edited there.

   Sections 1 and 2 are the inner pages' <main> (the home page has its own
   grid in home.css, so they skip .home-v1). Sections 3 and 4, the footer and
   the nav, are one arrangement on every page.

   For the inner pages' main content:

   1. CENTRED, not leaning right. The content sits on the home page's grid: a
      centred 1200px container (--home-max) with the gutter inside it, so it
      starts at x=160 on a 1440 window, exactly as the home page's does.
      Previously it started at the 20% rail (x=312 at 1440) and ran on to the
      right edge — on the case studies to a 2000px container.

   2. LABELS ARE EYEBROWS. The rail column is gone: every section label sits
      on top of what it labels, on the same line, at every width — what the
      layout already did below 62rem. The stacked spacing is the one those
      narrow layouts already used (--sp-4 for .rail, --cs-label-gap on the case
      studies), not a new number.

   The content's own grids — the case studies' six columns, the About page's
   4-of-6 prose, the projects gallery — are relative to the content box, so
   they come along unchanged; the content box itself barely moves in width
   (1088 -> 1120 at 1440).
   ========================================================================== */

/* --- 1. Centred ------------------------------------------------------------- */
body:not(.home-v1) main .container,
.cs-page main .container {
  max-width: var(--home-max);
}

/* --- 2. Eyebrows ------------------------------------------------------------- */
@media (min-width: 62rem) {
  /* About, Projects, 404: label above content, nothing in the rail. */
  body:not(.home-v1) main .rail {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-4);
  }

  body:not(.home-v1) main .rail > .mono:first-child {
    padding-right: 0;
  }

  body:not(.home-v1) main .rail-offset {
    margin-left: 0;
  }

  /* Case studies: the label stacks above the six-column content, which keeps
     its columns — only the label column goes. The overview, which indented
     itself by the rail to line up with the sections, now starts on the line
     they do. */
  .cs-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--cs-label-gap);
  }

  .cs-row > .cs-col:only-child {
    grid-column: 1;
  }

  .cs-row__label {
    padding-right: 0;
  }

  .cs-overview,
  .cs-overview__cover {
    margin-left: 0;
  }
}


/* --- 3. The footer, every page --------------------------------------------------
   On the page grid, not the rail: the contact block and the closing row start
   at the grid's edge (x=160 at 1440, the gutter below 1200), the same line as
   the content above them on every page. --home-edge is the hero's formula —
   the grid's left edge inside a full-width, gutter-padded container. The block
   takes the grid's width (1120 at the cap), so the headline's 66% is the same
   measure as the home page's About lead. The label is an eyebrow above it.

   "Top" is the hero's scroll arrow answered: the same arrow pointing up, icon
   only (named "Back to top"), ink, with "Top" as its cursor label as "Scroll"
   is the hero's. From 48rem it stands on the hero arrow's line — the page
   gutter — at its height (--hero-arrow-h, tokens.css), and the copyright
   starts on the content line, or one arrow's width along where the grid has
   no margin yet. The home page adds only its full-screen height (home.css). */
.site-footer__inner {
  --home-edge: max(0px, calc((100% + 2 * var(--gutter) - var(--home-max)) / 2));
}

.site-footer__inner > .rail-offset {
  margin-left: var(--home-edge);
  max-width: calc(var(--home-max) - 2 * var(--gutter));
}

.site-footer .home-label {
  margin-bottom: var(--sp-6);
}

/* The arrow's own hit area, as the hero's: it pads itself out and takes the
   same back as negative margin, so the target grows and the arrow stays on
   its line. */
.site-footer .to-top {
  justify-self: start;
  padding: var(--sp-2) 0.625rem;
  margin: calc(-1 * var(--sp-2)) -0.625rem;
  color: var(--color-text);
}

@media (min-width: 48rem) {
  .site-footer__close {
    display: grid;
    grid-template-columns: max(var(--home-edge), var(--sp-10)) minmax(0, 1fr);
    align-items: center;
    gap: 0;
  }

  .site-footer .to-top svg {
    width: auto;
    height: var(--hero-arrow-h);
  }
}


/* --- 4. The nav, every page ------------------------------------------------------
   Three positions, one per kind of screen, and each lands on a line the page
   already draws:

   - From 85rem the nav starts on the page line — the same vertical as the
     content below it (x=160 at 1440). The first LABEL lands on it, not the
     link box: each link carries --nav-pad-x either side for its hover tab, and
     that much comes back off the start. The header is full-width, so the line
     is found the way the hero finds it: the grid's left edge inside a
     gutter-padded container.
   - Below 85rem the line runs into the logo (at 1280 it is x=80 against a logo
     ending at 68), so the nav goes to the right, where the header's flex row
     already puts it: its last label ends on the page's right gutter, the same
     vertical as the hero's "B2B · B2C · AI" (measured equal to the pixel from
     768 to 1359). Nothing to set — that is site.css's own layout.
   - Below 48rem it is the hamburger, also on the right: the menu ends where it
     started its narrowing, on the right. */
@media (min-width: 85rem) {
  .site-header__inner {
    display: grid;
    grid-template-columns:
      max(0px, calc((100% + 2 * var(--gutter) - var(--home-max)) / 2))
      minmax(0, 1fr);
    gap: 0;
  }

  .site-nav {
    justify-self: start;
    margin-left: calc(-1 * var(--nav-pad-x));
  }
}