/* layout.css — one named-line grid, declared once on <main>, used by every page;
 * the band (a horizontal section) and the band head (a broadsheet section
 * masthead: kicker, title, dek, on a double rule).
 *
 * Five tracks; three of them carry content:
 *
 *   bleed | rail 152 | main 720 | aside 320 | bleed
 *           <------------ 1256 total ------------>
 *
 * The space beside a ranked list is a real track carrying real content — the
 * method and provenance apparatus this product writes — not leftover.
 */

.canvas {
  display: grid;
  grid-template-columns:
    [bleed-start] minmax(var(--s-gutter), 1fr)
    [rail-start]  minmax(0, var(--w-rail))
    [rail-end main-start]  minmax(0, var(--w-main))
    [main-end aside-start] minmax(0, var(--w-aside))
    [aside-end]   minmax(var(--s-gutter), 1fr)
    [bleed-end];
  column-gap: var(--col-gap);
  align-content: start;
  min-height: 60vh;
}

/* A page that has not been rebuilt on bands yet mounts plain nodes straight
 * into the canvas. Without this, auto-placement would deal them out one per
 * track like cards. Each one spans the content width instead, and stacks. */
.canvas > :not(.band) {
  grid-column: rail-start / aside-end;
  min-width: 0;
}
.canvas > :not(.band):first-child { margin-top: var(--s-6); }
.canvas > :not(.band) + :not(.band) { margin-top: var(--s-5); }

/* The three content tracks shrink on their own below ~1320px, because their min
 * is 0 and only the outer gutter tracks have a floor. No media query is needed
 * until the STRUCTURE has to change. */

/* --------------------------------------------------------------- spans */

.col-bleed { grid-column: bleed-start / bleed-end; }  /* full width         */
.col-page  { grid-column: rail-start  / aside-end; }  /* 1256 — hero, boards */
.col-wide  { grid-column: main-start  / aside-end; }  /* 1072 — wide tables */
.col-lede  { grid-column: rail-start  / main-end;  }  /*  904 — display head*/
.col-main  { grid-column: main-start  / main-end;  }  /*  720 — ranked lists*/
.col-rail  { grid-column: rail-start  / rail-end;  }  /*  152 — labels      */
.col-aside { grid-column: aside-start / aside-end; }  /*  320 — method notes*/
.col-text  { grid-column: main-start  / main-end; max-width: var(--w-text); }

.col-page, .col-wide, .col-lede, .col-main, .col-rail, .col-aside, .col-text { min-width: 0; }

/* ---------------------------------------------------------------- bands
 *
 * A band is a horizontal section of the page. It spans the full bleed and
 * RE-PROJECTS the parent's columns with subgrid, so a rail label, a main column
 * and an aside sit on one row with no nested track maths anywhere. */

.band {
  grid-column: bleed-start / bleed-end;
  display: grid;
  grid-template-columns: subgrid;
  column-gap: var(--col-gap);
  align-items: start;
  padding-block: var(--s-section);
}

/* A full-bleed hairline between bands. */
.band + .band { border-top: var(--edge); }

/* Optically align the note's first baseline with the body's. */
.band > .col-aside { padding-top: 0.35rem; }

/* Subgrid is Chrome 117+, Safari 16+, Firefox 71+. The fallback re-declares the
 * identical explicit template, so the band is correct either way. */
@supports not (grid-template-columns: subgrid) {
  .band {
    grid-template-columns:
      [bleed-start] minmax(var(--s-gutter), 1fr)
      [rail-start]  minmax(0, var(--w-rail))
      [rail-end main-start]  minmax(0, var(--w-main))
      [main-end aside-start] minmax(0, var(--w-aside))
      [aside-end]   minmax(var(--s-gutter), 1fr)
      [bleed-end];
  }
}

/* The display band: more air above and below than a section. */
.band-lede { padding-block: var(--s-lede); }
.band-lede + .band { border-top: var(--edge); }

/* Stacked children inside a band column. */
.band > * > * + * { margin-top: var(--s-4); }
.band > .col-rail > * + * { margin-top: var(--s-2); }

/* ------------------------------------------------------------ band head
 *
 * The broadsheet section masthead. A 4px double rule, a kicker, the title in
 * Fraunces, an optional dek, and an optional "meta" slot on the right for an
 * as-of stamp or a control. Built by bandHead() in js/ui/layout.js; every
 * section of every page opens with one. */
.band-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'kicker meta'
    'title  meta'
    'dek    dek';
  column-gap: var(--s-5);
  row-gap: var(--s-2);
  align-items: end;
  padding-top: var(--s-3);
  border-top: var(--edge-double);
  margin-bottom: var(--s-5);
}
.band-head-kicker { grid-area: kicker; }
.band-head-title  { grid-area: title; }
.band-head-meta   { grid-area: meta; justify-self: end; align-self: end; }
.band-head-dek    { grid-area: dek; margin-top: var(--s-1); }
.band-head-title:focus { outline: none; }

@media (max-width: 44.9375rem) {
  .band-head {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'kicker' 'title' 'meta' 'dek';
  }
  .band-head-meta { justify-self: start; }
}

/* An explicit hairline node, for a rule INSIDE a band that must stop at the
 * content edge. weight=2 marks an emphasis break, not a section break. */
.rule {
  height: 0;
  border-top: var(--edge-soft);
  margin-block: var(--s-5);
}
.rule[data-weight='2'] { border-top: var(--edge-strong); }
.rule[data-weight='double'] { border-top: var(--edge-double); }

/* ------------------------------------------------------------ 1100px
 *
 * Two tracks. The aside drops below its band's main content and spans the full
 * content width, restyled as a ruled NOTE rather than a column. */
@media (max-width: 68.6875rem) {
  :root { --w-rail: 7rem; }

  .band > .col-aside {
    grid-column: rail-start / aside-end;
    margin-top: var(--s-5);
    padding-top: var(--s-3);
    border-top: var(--edge-soft);
  }
}

/* ------------------------------------------------------------- 720px
 *
 * One track. The rail label becomes an eyebrow above the content. */
@media (max-width: 44.9375rem) {
  .band > .col-rail,
  .band > .col-main,
  .band > .col-wide,
  .band > .col-page,
  .band > .col-lede,
  .band > .col-text { grid-column: rail-start / aside-end; }

  .band > .col-rail { margin-bottom: var(--s-3); }
  .band > .col-aside { grid-column: rail-start / aside-end; }
  .band { padding-block: var(--s-7); }
  .band-lede { padding-block: var(--s-6); }
}

/* -------------------------------------------------------------- 480px */
@media (max-width: 29.9375rem) {
  :root { --w-rank: 1.5rem; }
}