@import url('assets/fonts.css');
@import url('assets/tokens.css');

/* ============================================================================
   The Haven kit reference: the brand rendering itself.

   Every value here resolves to a kit token. Type comes from the five styles,
   color from the palette, spacing from the one ratio, division from the single
   hairline. Nothing on the page carries a radius, a shadow or a gradient,
   because the geometry is doing the work and anything decorative on top reads
   as noise against it.

   The page is read as a set of blocks on a grid. Content sits on a block; the
   block sits on the grid. Where the order needs to show, a hairline shows it.
   ============================================================================ */

:root {
  /* The four sizes the system leaves to the surface, set once, here, beside the
     spacing base. Every heading on the page reads its size off these. */
  --text-h1: clamp(36px, 4.4vw, 64px);
  --text-h2: clamp(24px, 2.4vw, 36px);
  --text-h3: 24px;
  --text-eyebrow: 12px;

  /* The grid the page is read on. Loose paragraphs take one column of it, so
     a paragraph above a row of columns lines up with the columns below it. */
  --gcols: 3;

  /* The surface's own side margin. It is never narrower than the clear space of
     the largest logo on the page, and every block edge registers against it. */
  --margin: clamp(var(--space-x), 5vw, var(--space-6x));

  --rail-w: 216px;
  --tile: 80px;
  --rule: var(--rule-weight) solid var(--rule-color);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--space-2x);
}

body {
  margin: 0;
  background: var(--off-white);
  color: var(--carbon);
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--text-p3);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
}

/* ── the five type styles ───────────────────────────────────────────────── */

.h1, .h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-display);
  text-transform: uppercase;
  margin: 0;
}
.h1 { font-size: var(--text-h1); letter-spacing: var(--tracking-h1); }
.h2 { font-size: var(--text-h2); letter-spacing: var(--tracking-h2); }

.h3 {
  font-family: var(--font-body);
  font-weight: var(--weight-body-bold);
  font-size: var(--text-h3);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-h3);
  margin: 0;
}

.eyebrow {
  font-family: var(--font-mono);
  font-weight: var(--weight-mono);
  font-size: var(--text-eyebrow);
  line-height: var(--leading-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  margin: 0;
}

p { margin: 0; }
.lead { font-size: var(--text-p2); }
.note { font-size: var(--text-p3); color: var(--neutral-70); }
.statement { font-size: var(--text-p1); }
.statement--caps { text-transform: uppercase; }
.muted { color: var(--neutral-70); }

code {
  font-family: var(--font-mono);
  font-weight: var(--weight-mono);
  font-size: 0.85em;
  letter-spacing: var(--tracking-eyebrow);
}

a { color: inherit; text-decoration: none; }
em, i { font-style: italic; }

/* ── the rail ───────────────────────────────────────────────────────────── */

/* The page's own chrome. It is the quietest surface here: no fill, no shadow,
   and a single hairline holding it off the work. The carbon tile at its head is
   the one place the mark sits in a filled square, and it runs flush to the top
   and left the way the navigation component seats it. */
.shell { display: flex; align-items: flex-start; }

.rail {
  position: sticky;
  top: 0;
  z-index: 40;
  width: var(--rail-w);
  flex: 0 0 var(--rail-w);
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--off-white);
  border-right: var(--rule);
}

.rail__tile {
  width: var(--tile);
  height: var(--tile);
  flex: 0 0 var(--tile);
  background: var(--carbon);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rail__tile img { width: 48px; height: 48px; display: block; }

.rail__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-2x);
  padding: var(--space-2x) var(--space-2x) var(--space-2x) var(--space-x);
  overflow-y: auto;
}
.rail__group { display: flex; flex-direction: column; }
.rail__group .eyebrow { color: var(--neutral-50); margin-bottom: var(--space-half-x); }

.rail__link {
  font-family: var(--font-mono);
  font-weight: var(--weight-mono);
  font-size: var(--text-eyebrow);
  line-height: 2;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--neutral-70);
}
.rail__link:hover { color: var(--carbon); }
.rail__link.is-current { color: var(--orange); }

.rail__toggle {
  display: none;
  appearance: none;
  border: 0;
  background: none;
  color: inherit;
  padding: 0 var(--space-x);
  font-family: var(--font-mono);
  font-weight: var(--weight-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  cursor: pointer;
}

main { flex: 1; min-width: 0; }

/* ── navigation bar ─────────────────────────────────────────────────────── */

/* The component, drawn at rest. A solid carbon square holds the logomark, flush
   to the top and left of the bar and running its full height. */
.navbar {
  min-width: 640px;
  height: var(--tile);
  display: flex;
  align-items: center;
  gap: var(--space-2x);
  padding-right: var(--space-2x);
  background: var(--off-white);
  border: var(--rule);
  width: 100%;
}

.navbar__tile {
  width: var(--tile);
  height: var(--tile);
  flex: 0 0 var(--tile);
  background: var(--carbon);
  display: flex;
  align-items: center;
  justify-content: center;
}
.navbar__tile img { width: 48px; height: 48px; display: block; }

.navbar__wordmark, .navbar__wordmark img { display: block; height: 20px; width: auto; }

.navbar__links {
  margin-left: auto;
  display: flex;
  gap: var(--space-2x);
  font-family: var(--font-mono);
  font-weight: var(--weight-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

/* ── bands ──────────────────────────────────────────────────────────────── */

/* A section is a band. Bands are divided by a hairline, never by a fill, and
   they sit apart on the large interval. */
.band { border-top: var(--rule); }

/* A band, a group and a section head are all read on the page's own column
   count. Everything in them spans the full measure; a loose paragraph takes a
   single column, so it starts and ends where the columns beneath it do. */
.band__inner {
  padding: var(--space-12x) var(--margin);
  display: grid;
  grid-template-columns: repeat(var(--gcols), minmax(0, 1fr));
  column-gap: 0;
  row-gap: var(--space-6x);
}
.band__inner > * { grid-column: 1 / -1; }
.band__inner > .note, .band__inner > .lead, .band__inner > .statement {
  grid-column: 1 / span 1;
  padding-right: var(--space-2x);
}

.band--dark { background: var(--carbon); color: var(--off-white); }
.band--dark .note { color: var(--neutral-30); }
.band--dark .eyebrow { color: var(--orange); }

.head {
  display: grid;
  grid-template-columns: repeat(var(--gcols), minmax(0, 1fr));
  column-gap: 0;
  row-gap: var(--space-2x);
}
.head > * { grid-column: 1 / -1; }
.head > .lead { grid-column: 1 / span 1; padding-right: var(--space-2x); }
.head .eyebrow { margin-bottom: calc(var(--space-half-x) - var(--space-2x)); }

.group {
  display: grid;
  grid-template-columns: repeat(var(--gcols), minmax(0, 1fr));
  column-gap: 0;
  row-gap: var(--space-2x);
}
.group > * { grid-column: 1 / -1; }
.group > .note, .group > .statement {
  grid-column: 1 / span 1;
  padding-right: var(--space-2x);
}
.stack { display: grid; row-gap: var(--space-6x); }

.cols { display: grid; gap: var(--space-6x); align-items: start; }
.cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cols--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cols--tight { gap: var(--space-2x); }
.cols--icons { align-items: end; }

/* A row of text columns is ruled, not spaced: one hairline runs across the
   whole row, and a hairline stands between the columns. The columns sit flush
   so neither line is ever broken by a gutter. */
.cols--ruled { column-gap: 0; row-gap: 0; }
.cols--ruled > * {
  border-top: var(--rule);
  border-left: var(--rule);
  padding: var(--space-2x) var(--space-2x) var(--space-6x);
}
.cols--ruled.cols--2 > *:nth-child(2n + 1),
.cols--ruled.cols--3 > *:nth-child(3n + 1),
.cols--ruled.cols--4 > *:nth-child(4n + 1) { border-left: 0; padding-left: 0; }
.band--dark .cols--ruled > * { border-color: var(--neutral-80); }

/* Images butt up against one another, so a set reads as one field. */
.cols--flush { column-gap: 0; }
.cols--flush .shot { margin-left: calc(var(--rule-weight) * -1); }
.cols--flush.cols--2 > *:nth-child(2n + 1) .shot,
.cols--flush.cols--4 > *:nth-child(4n + 1) .shot { margin-left: 0; }
.cols--flush .eyebrow, .cols--flush .note { padding-right: var(--space-2x); }

/* One stack, used wherever a block holds a label, a heading and prose. The
   eyebrow belongs to what follows it, so it sits on the small interval; every
   other step in the stack sits on the larger one. */
.piece, .layer, .face, .rule-cell, .numbered, .stat, .icon-cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-2x);
}
.piece > .eyebrow:not(:last-child), .layer > .eyebrow:not(:last-child),
.face > .eyebrow:not(:last-child), .rule-cell > .eyebrow:not(:last-child),
.numbered > .eyebrow:not(:last-child), .stat > .eyebrow:not(:last-child),
.icon-cell > .eyebrow:not(:last-child) {
  margin-bottom: calc(var(--space-half-x) - var(--space-2x));
}

/* ── hero ───────────────────────────────────────────────────────────────── */

.hero { background: var(--carbon); color: var(--off-white); }
.hero .band__inner { row-gap: 0; min-height: 72vh; align-content: center; }
.hero__lockup { width: min(320px, 40%); display: block; margin-bottom: var(--space-6x); }
/* The descriptor is the one place H3 sets in caps, and it sits half a step
   above the headline it introduces. */
.hero__descriptor { margin-bottom: var(--space-half-x); color: var(--orange); text-transform: uppercase; }
/* The headline is set on the columns, not on the full measure, so it turns
   where the layout turns rather than running the width of the page. */
.hero .h1 { max-width: 15ch; }
.hero .lead { margin-top: var(--space-6x); color: var(--neutral-20); }
.hero .cta { margin-top: var(--space-2x); justify-self: start; }

/* ── call to action ─────────────────────────────────────────────────────── */

/* One button, three treatments. Square corners, a mono label in all caps on
   even padding, and no border, shadow or gradient. */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-x) var(--space-2x);
  font-family: var(--font-mono);
  font-weight: var(--weight-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  border: 0;
  cursor: pointer;
}
.cta--accent { background: var(--orange); color: var(--carbon); }
.cta--solid { background: var(--carbon); color: var(--off-white); }
.cta--quiet { background: var(--off-white); color: var(--carbon); }
.cta--accent:hover { background: var(--carbon); color: var(--off-white); }
.cta--quiet:hover { background: var(--orange); }
.cta--solid:hover { background: var(--neutral-90); }

.link {
  font-family: var(--font-mono);
  font-weight: var(--weight-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: var(--space-half-x);
}
/* The small chevron the system uses beside a text link, drawn on the same 45
   degree diagonals as everything else. */
.chev {
  width: 6px;
  height: 6px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}
.link:hover { color: var(--orange); }

/* ── copy affordance ────────────────────────────────────────────────────── */

/* Anything carrying a value can be lifted off the page. The affordance stays
   invisible until the pointer is on the specimen, so the resting page is just
   the work. */
.copy {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  display: block;
  width: 100%;
}
.copy:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }

.copy__hint {
  font-family: var(--font-mono);
  font-weight: var(--weight-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--neutral-50);
  opacity: 0;
}
.copy:hover .copy__hint,
.copy:focus-visible .copy__hint { opacity: 1; }
.copy.is-copied .copy__hint { opacity: 1; color: var(--orange); }

/* One toast, bottom left, out of the way of the work. */
.toast {
  position: fixed;
  left: var(--margin);
  bottom: var(--space-2x);
  z-index: 60;
  padding: var(--space-x) var(--space-2x);
  background: var(--carbon);
  color: var(--off-white);
  font-family: var(--font-mono);
  font-weight: var(--weight-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
}
.toast.is-up { opacity: 1; }

/* ── color specimens ───────────────────────────────────────────────────── */

.swatch { display: block; }
.chip { display: block; height: 132px; }
/* A pale chip would otherwise vanish into the off-white ground, so it takes the
   system's own hairline. A chip that reads on its own takes nothing. */
.chip[style*="#FAFAF8"], .chip[style*="#FFFFFF"],
.chip[style*="#EDEEED"], .chip[style*="#D1D4D4"] { border: var(--rule); }

.chip__meta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 var(--space-x);
  margin-top: var(--space-x);
}
.chip__name { font-size: var(--text-p3); }
.chip__value {
  grid-column: 1;
  font-family: var(--font-mono);
  font-weight: var(--weight-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  color: var(--neutral-70);
  text-transform: uppercase;
}
.chip__meta .copy__hint { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

.pair {
  aspect-ratio: 3 / 2;
  padding: var(--space-2x);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.pair__sample {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-p1);
  line-height: var(--leading-display);
  text-transform: uppercase;
}
.pair__label {
  font-family: var(--font-mono);
  font-weight: var(--weight-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}
.pair[style*="--off-white)"] { border: var(--rule); }

/* ── specimen rows ──────────────────────────────────────────────────────── */

.rows { display: flex; flex-direction: column; border-top: var(--rule); }
.row {
  display: grid;
  grid-template-columns: 10ch minmax(0, 1fr) 22ch 8ch;
  gap: var(--space-2x);
  align-items: baseline;
  padding: var(--space-2x) 0;
  border-bottom: var(--rule);
}
.row--space { grid-template-columns: 12ch 18ch minmax(0, 1fr) 8ch 8ch; }
.row__name, .row__spec, .row__role {
  font-family: var(--font-mono);
  font-weight: var(--weight-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}
.row__spec, .row__role { color: var(--neutral-70); }
.row__role { text-transform: none; font-family: var(--font-body); font-weight: var(--weight-body); letter-spacing: var(--tracking-body); font-size: var(--text-p3); }
.row__sample { display: block; overflow: hidden; }
.row__bar { display: block; }
.row__bar > span { display: block; height: var(--space-half-x); background: var(--orange); }
.row .copy__hint { text-align: right; }

.face__name { font-size: 56px; line-height: var(--leading-display); }

.stack-demo { border-top: var(--rule); padding-top: var(--space-2x); }
.stack-demo .h3 { margin-top: var(--space-half-x); }
.stack-demo .note { margin-top: var(--space-2x); }

/* ── figures ────────────────────────────────────────────────────────────── */

.fig { display: block; width: 100%; height: auto; }
.fig line { stroke: var(--rule-color); stroke-width: 0.5; vector-effect: non-scaling-stroke; }
.fig .fill { fill: var(--neutral-10); stroke: var(--rule-color); stroke-width: 0.5; vector-effect: non-scaling-stroke; }
.fig .fill--soft { fill: none; }
.fig .ink { fill: var(--carbon); }
.fig .ink--accent { fill: var(--orange); }

.layer .fig { border: var(--rule); }

.fig-tile {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6x);
  border: var(--rule-weight) solid var(--neutral-80);
}
.fig--grid line { stroke: var(--neutral-70); }
.fig-tile--mark { background: var(--carbon); }
.fig-tile--mark img { width: 100%; display: block; }
.signature { align-items: stretch; }



/* ── logo and imagery tiles ─────────────────────────────────────────────── */

.logo-tile {
  height: calc(var(--space-12x) + var(--space-6x));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6x);
  border: var(--rule);
  background: var(--white);
}
.logo-tile img { max-width: 100%; max-height: 100%; display: block; }
.logo-tile--mark img { max-width: 40%; }
.logo-tile--carbon { background: var(--carbon); border-color: var(--carbon); }
.logo-tile--off-white { background: var(--off-white); }
.logo-tile--orange { background: var(--orange); border-color: var(--orange); }

.shot { border: var(--rule); background: var(--white); }
.shot img { display: block; width: 100%; height: auto; }

/* ── the web module ─────────────────────────────────────────────────────── */

.module {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: var(--rule);
}
.module__image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.module__text {
  padding: var(--space-6x);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.module__text .h3 { margin-top: var(--space-half-x); }
.module__text p:last-of-type { margin-top: var(--space-2x); }
.module__text .cta { margin-top: var(--space-6x); }

/* ── icons ──────────────────────────────────────────────────────────────── */

/* The icons share a height and never a box: the common height is five times the
   label's font size, and each width follows from the icon's own proportions. */
.icon-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6x);
  align-items: end;
}
.icon-cell { align-items: flex-start; }
.icon { display: block; color: var(--carbon); }
.icon svg { display: block; height: 96px; width: auto; }
.icon--web svg { height: calc(var(--text-eyebrow) * 5); }
.band--dark .icon { color: var(--off-white); }

/* ── cards ──────────────────────────────────────────────────────────────── */

/* Cards sit on the grid as equal blocks, separated by thin rules, with a rule
   closing the row beneath them. No border, no radius, no shadow. */
.card-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: var(--rule);
}
.card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-x);
  padding: var(--space-2x) var(--space-2x) var(--space-6x);
  border-left: var(--rule);
}
.card:first-child { border-left: 0; padding-left: 0; }
/* Every card in a row carries the same parts in the same order, so the image
   band is one depth across the row and the headings start on one line. */
.card__image { width: 100%; aspect-ratio: 4 / 3; }
.card__image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card .h3 { margin-top: var(--space-x); }
.card .link { margin-top: var(--space-x); }

.specimen { padding: var(--space-6x); border: var(--rule); background: var(--white); overflow-x: auto; }
.specimen--row { display: flex; flex-wrap: wrap; gap: var(--space-2x); align-items: center; }

/* ── verbal specimens ───────────────────────────────────────────────────── */

.numbered .eyebrow { color: var(--orange); }

.tiers { display: flex; flex-direction: column; }
.tier {
  display: grid;
  grid-template-columns: calc(100% / 3) minmax(0, 1fr);
  gap: 0;
  padding: var(--space-x) 0;
  border-top: var(--rule);
  align-items: baseline;
}
.tier > *:first-child { padding-right: var(--space-2x); }
/* The hairline between the two columns runs unbroken down the whole list,
   because the rows sit flush and the padding is inside the cell. */
.tier > *:last-child { border-left: var(--rule); padding-left: var(--space-2x); }
.tier:last-child { border-bottom: var(--rule); }

/* The number and its label are one unit, so they sit on the small interval. */
.stat { gap: var(--space-half-x); }
.stat__figure {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-h2);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-h2);
  text-transform: uppercase;
}

/* ── tokens ─────────────────────────────────────────────────────────────── */

.scroll { overflow-x: auto; min-width: 0; max-width: 100%; }
.tokens {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-weight: var(--weight-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}
.tokens th, .tokens td {
  text-align: left;
  padding: var(--space-x);
  border-top: var(--rule);
  white-space: nowrap;
}
.tokens th { color: var(--neutral-70); }
.tokens tbody tr { cursor: pointer; }
.tokens tbody tr:hover { background: var(--neutral-10); }
/* The hover state names itself: a rule in the accent down the leading edge, and
   the word for what a click does. Nothing else on the row moves. */
.tokens tbody tr td:first-child { box-shadow: inset 2px 0 0 0 transparent; }
.tokens tbody tr:hover td:first-child { box-shadow: inset 2px 0 0 0 var(--orange); }
.tokens tbody tr .tokens__hint { color: var(--neutral-50); opacity: 0; text-align: right; }
.tokens tbody tr:hover .tokens__hint { opacity: 1; }
.tokens tbody tr.is-copied { background: var(--orange); }
.tokens tbody tr.is-copied .tokens__hint { opacity: 1; color: var(--carbon); }
.tokens tbody tr:last-child td { border-bottom: var(--rule); }
.tokens--vocab { text-transform: none; font-family: var(--font-body); font-weight: var(--weight-body); font-size: var(--text-p3); letter-spacing: var(--tracking-body); }
.tokens--vocab tbody tr { cursor: default; }
.dot { display: inline-block; width: 12px; height: 12px; vertical-align: -1px; margin-right: var(--space-half-x); border: var(--rule); }

/* ── footer ─────────────────────────────────────────────────────────────── */

/* The one interface surface that fills with orange. It carries the wordmark and
   nothing else: the mark spans the band between the side margins, and one
   measure holds it off all four sides, so it sits centred in the band. */
.foot { background: var(--orange); color: var(--carbon); }
.foot__inner { padding: var(--margin); }
.foot__wordmark { display: block; width: 100%; height: auto; }

/* ── responsive ─────────────────────────────────────────────────────────── */

/* A phone layout is its own surface, so it sets its own sizes. */
@media (max-width: 900px) {
  :root {
    --gcols: 2;
    --text-h3: 20px;
    --text-eyebrow: 11px;
    --text-h1: clamp(32px, 8vw, 44px);
    --tile: 56px;
    --rail-w: 100%;
  }
  /* A phone layout is its own surface, so it sets its own sizes. The rail lays
     down into a bar across the top and the sections move behind a toggle. */
  .shell { flex-direction: column; align-items: stretch; }
  main { width: 100%; }
  .rail {
    height: auto;
    flex: none;
    flex-direction: row;
    align-items: center;
    border-right: 0;
    border-bottom: var(--rule);
  }
  .rail__tile img { width: 32px; height: 32px; }
  .rail__toggle { display: inline-block; margin-left: auto; }
  .rail__nav {
    display: none;
    position: absolute;
    top: var(--tile);
    left: 0;
    right: 0;
    padding: var(--space-2x) var(--margin);
    background: var(--off-white);
    border-bottom: var(--rule);
  }
  .rail__nav.is-open { display: flex; }
  .navbar__tile img { width: 32px; height: 32px; }
  .navbar__wordmark, .navbar__wordmark img { height: 16px; }
  .band__inner { padding-top: var(--space-6x); padding-bottom: var(--space-6x); }
  .cols--3, .cols--4, .cols--5, .icon-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols--ruled > * { border-left: var(--rule); padding-left: var(--space-2x); }
  .cols--ruled > *:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
  .cols--flush .shot { margin-left: calc(var(--rule-weight) * -1); }
  .cols--flush > *:nth-child(2n + 1) .shot { margin-left: 0; }
  .module, .card-row { grid-template-columns: minmax(0, 1fr); }
  .card { border-left: 0; padding-left: 0; border-top: var(--rule); }
  .card:first-child { border-top: 0; }
  .row { grid-template-columns: minmax(0, 1fr); gap: var(--space-half-x); }
  .row--space { grid-template-columns: minmax(0, 1fr); }
  .row .copy__hint { text-align: left; }
  .tier { grid-template-columns: minmax(0, 1fr); gap: var(--space-half-x); }
  .face__name { font-size: 40px; }
  .fig-tile, .logo-tile { padding: var(--space-2x); }
  .specimen { padding: var(--space-2x); }
  .module__text { padding: var(--space-2x); }
}

@media (max-width: 560px) {
  :root { --gcols: 1; }
  .cols--2, .cols--3, .cols--4, .cols--5, .icon-row { grid-template-columns: minmax(0, 1fr); }
  .cols--ruled > * { border-left: 0; padding-left: 0; }
  .cols--flush .shot { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}