/* ============================================================
   Layout — the grid, the vertical rhythm, and the page chrome.

   THE GRID LAW. 12 columns, 8px gutters, 8px page margins.
   Columns 1–3 are a true margin: only full-bleed film and
   photography may enter them. All type and all inset artefacts
   (including the phone) start at column 4 or later.

   Every `.aN` start class used in index.html is 4 or greater.
   If you find yourself reaching for .a1/.a2/.a3 on a type block,
   the answer is no.
   ============================================================ */

.g {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
}

.g > * {
  min-width: 0;
}

.pad {
  padding-left: var(--margin);
  padding-right: var(--margin);
}

/* column starts — 4 and up only, by law (see above) */
.a4  { grid-column-start: 4; }
.a5  { grid-column-start: 5; }
.a6  { grid-column-start: 6; }
.a7  { grid-column-start: 7; }
.a8  { grid-column-start: 8; }
.a9  { grid-column-start: 9; }
.a10 { grid-column-start: 10; }
.a11 { grid-column-start: 11; }

/* spans */
.s2  { grid-column-end: span 2; }
.s3  { grid-column-end: span 3; }
.s4  { grid-column-end: span 4; }
.s5  { grid-column-end: span 5; }
.s6  { grid-column-end: span 6; }
.s7  { grid-column-end: span 7; }
.s8  { grid-column-end: span 8; }
.s12 { grid-column-end: span 12; }

/* ---- whitespace lives in the vertical axis ---- */
.pt-xl { padding-top: var(--space-xl); }
.pb-xl { padding-bottom: var(--space-xl); }
.pt-l  { padding-top: var(--space-l); }
.pb-l  { padding-bottom: var(--space-l); }

/* Block rhythm between the parts of a section. These five steps are the
   whole vocabulary — the prototype's inline `margin-top` values, named.
   Reach for an existing step before inventing a sixth. */
.stack-xs { margin-top: 20px; }
.stack-sm { margin-top: 36px; }
.stack-l  { margin-top: 64px; }
.stack-md { margin-top: 72px; }
.stack-lg { margin-top: 96px; }

/* Row gaps for grids that wrap on the way down to mobile. */
.gap-rows    { row-gap: 20px; }
.gap-rows-lg { row-gap: 24px; }

/* Drop a UA margin where the element is positioned by its container. */
.flush { margin: 0; }

/* Mobile: everything drops to a simple stack on the same rhythm.
   The grid law is suspended below 800px because there is no
   margin to protect — the page is one column. */
@media (max-width: 800px) {
  .m-full { grid-column: 1 / -1 !important; }
  .m-half { grid-column: span 6 !important; }
}

/* ---- nav: corners anchored, caption-sized, over the film ---- */
nav.top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px var(--margin);
  color: #fff;
}

nav.top .mark svg {
  display: block;
  height: 14px;
  width: auto;
  color: currentColor;
}

nav.top .links {
  display: flex;
  gap: 22px;
  font-size: var(--t-12);
  letter-spacing: 0.02em;
}

@media (max-width: 640px) {
  nav.top .links .hide-s { display: none; }
}

/* brand lock-up: wordmark + one-line descriptor */
nav.top .brand {
  display: flex;
  align-items: center;
}

nav.top .brand .descriptor {
  font-size: var(--t-12);
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 400;
  margin: 0;
}

nav.top .brand .descriptor::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 11px;
  background: rgba(255, 255, 255, 0.42);
  margin: 0 14px -1px;
}

@media (max-width: 640px) {
  nav.top .brand .descriptor { display: none; }
}

/* ---- footer ---- */
footer {
  padding: 16px var(--margin) 22px;
}

footer .row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}

footer .mark svg {
  display: block;
  height: 10px;
  width: auto;
  color: var(--ink);
}

footer .legal {
  display: flex;
  gap: 16px;
}