/* Stellar Engineering · site.css · the shared system (every page uses it)

   TOKENS
   Colour     --bg     #ffffff   the ground: pure white
              --ink    #111214   type, rules and drawings: a neutral near-black
              --grey   #5b5e63   the one secondary grey: 6.5:1 on white (nav at rest, descriptions, credentials, footer)
              --plan   #c9cbce   drawing only: the plan grid under the gridshell
              No accent colour. Dark appears only as trim: type, drawings and the mark.
   Type       Host Grotesk (fonts/, OFL), weight 400 only. Two sizes on a page:
              --t/--tl  text     17/24 px desktop, 16/23 px phone
              --d/--dl  display  28/34 px desktop, 22/27 px phone, tracked -0.014em
              No italics, no capitals for labels, no mono. Figures are tabular by default in this face.
   Space      --u      the spacing unit, one text line (24 px desktop, 23 px phone); vertical gaps are multiples of it
              --m      outer margin 28 px (16 px phone); --g gutter 20 px (12 px phone); 12 columns on desktop
   Line       drawings: struts 3 px, cables 1 px, open nodes r 4 px with a 1.25 px rim, supports as hairline triangles;
              what a drawing's own surface hides is drawn behind it, 0.75 px in --plan grey
   Motion     --spring  the step response of one damped oscillator (damping 0.45, 1.8 Hz) sampled into linear();
                        written by _build/build.cjs from assets/motif.js so the CSS and the scripts share one motion.
              Links: the underline is a cable (.cab) that hangs with a sag and pulls taut on hover or focus
                     (a transition of the path's own geometry, CSS d; motif.js plays the same spring where d is unsupported).
              Nav: grey to ink over 0.25 s. Everything is instant under prefers-reduced-motion or ?still=1.

   COMPONENTS a.u / span.u   a link with the cable underline (motif.js adds the <svg class="cab"> if it is missing)
              .hd / .ft      shared header and footer (copy the markup verbatim from index.html)
              .grid          the 12-column grid, at most 1600 px wide; .dw a drawing host (pan-y, svg fills it); .vh visually hidden
              demo controls  one kit for every experiment page (selects, number fields, buttons, the drawn checkbox,
                             nudge arrows, "Method and limits"): see the end of this file
   Rendering  header, main and footer each sit on their own compositing layer (will-change), so Chromium draws
              their text with greyscale anti-aliasing: Windows' ClearType colour fringes turned thin grey type
              orange-brown. No visual change elsewhere.
   Focus      a 1 px ink ring. On links padded to a 44 px target (the name, the nav, cable links) it is drawn
              3 px round the line of text, not round the padded box, so it never crosses the line above.  */

@font-face {
  font-family: "Host Grotesk";
  src: url("../fonts/host-grotesk-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {                                   /* Arial resized to Host Grotesk's metrics: no reflow if the font arrives late */
  font-family: "Host Grotesk Fallback";
  src: local("Arial");
  size-adjust: 104.31%;
  ascent-override: 97.3%;
  descent-override: 30.2%;
  line-gap-override: 0%;
}

:root {
  --bg: #ffffff;
  --ink: #111214;
  --grey: #5b5e63;
  --plan: #c9cbce;
  --t: 17px; --tl: 24px;
  --d: 28px; --dl: 34px;
  --track: -0.014em;
  --u: 24px;
  --m: 28px; --g: 20px;
  /*@spring*/
  --spring: linear(0, 0.0301, 0.1103, 0.2257, 0.3623, 0.5078, 0.652, 0.7867, 0.9062, 1.0065, 1.0859, 1.1439, 1.1817, 1.2012, 1.205, 1.1961, 1.1777, 1.1527, 1.124, 1.094, 1.0648, 1.0377, 1.0141, 0.9944, 0.9792, 0.9683, 0.9614, 0.9582, 0.9581, 0.9605, 0.9646, 0.97, 0.976, 0.9821, 0.9881, 0.9935, 0.9981, 1.002, 1.0049, 1.0069, 1);
  --spring-dur: 904ms;
  /*/@spring*/
}

* { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100svh;                          /* the footer rests on the bottom edge of a short page */
  display: flex; flex-direction: column;
  background: var(--bg);
  font: 400 var(--t)/var(--tl) "Host Grotesk", "Host Grotesk Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}
main { flex: 1 0 auto; }
.hd, main, .ft { will-change: transform; }    /* greyscale text anti-aliasing: see Rendering, above */
h1, h2, p, dl, dd, figure, address { margin: 0; font: inherit; }
p, dd { text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
sub, sup { font-size: .8em; line-height: 0; }
/* an exponent drawn from the page's own figures, at the subscripts' size; the Unicode characters stay in the text,
   visually hidden, for screen readers and copying (motif.js, Motif.sup) */
.ex::before { content: attr(data-e); content: attr(data-e) / ""; font-size: .8em; line-height: 0; vertical-align: .45em; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

.vh, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip:focus {                                  /* a white band over the whole header row, its text where the name stands */
  position: fixed; inset: 0 0 auto 0; z-index: 9; height: 58px;
  padding: calc(14px + (44px - var(--tl)) / 2) max(var(--m), calc((100vw - 1600px) / 2 + var(--m))) 0;
  background: var(--bg); outline-offset: -5px;
}
.ph { white-space: nowrap; }                   /* a phrase: lines break between phrases, never inside one */

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--g);
  padding-inline: var(--m);
}
.grid, .hd, .ft { width: 100%; max-width: 1600px; margin-inline: auto; }   /* past 1600 px the page keeps its proportions and centres */

/* ---------- shared header: the name as plain text, three words of nav in grey ---------- */
.hd { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; column-gap: 32px; padding: 14px var(--m) 0; }
.hd-name, .hd-nav a { position: relative; display: inline-block; padding: var(--pb) 0; }      /* 44 px tall */
.hd-nav { display: flex; gap: 22px; }
.hd-nav a { color: var(--grey); transition: color .25s; }
.hd-nav a:hover, .hd-nav a:focus-visible, .hd-nav a[aria-current] { color: var(--ink); }

/* ---------- links: the cable ---------- */
.u { position: relative; display: inline-block; white-space: nowrap; }
.cab { position: absolute; left: 0; top: calc(50% + .62em); width: 100%; height: 8px; overflow: visible; pointer-events: none; }   /* hung just below the descenders */
.cab path {                                   /* the sag is the path itself: motif.js sets it per link; it straightens on the spring */
  fill: none; stroke: currentColor; stroke-width: 1px; vector-effect: non-scaling-stroke;
  transition: d var(--spring-dur, 900ms) var(--spring, ease-out);
}
a:hover .cab path, a:focus-visible .cab path { d: path("M0 1Q50 1 100 1") !important; }
a.u { padding-block: var(--pb); margin-block: calc(-1 * var(--pb)); }   /* a 44 px tall target without moving the text */
/* the focus ring of a padded link: round its line of text (--pb is the padding that makes the 44 px target) */
.hd-name, .hd-nav a, a.u { --pb: calc((44px - var(--tl)) / 2); }
.hd-name:focus-visible, .hd-nav a:focus-visible, a.u:focus-visible { outline: none; }
.hd-name:focus-visible::after, .hd-nav a:focus-visible::after, a.u:focus-visible::after {
  content: ""; position: absolute; inset: calc(var(--pb) - 3px) -4px; outline: 1px solid var(--ink); pointer-events: none;
}

/* ---------- drawings ---------- */
.dw { position: relative; touch-action: pan-y; }
.dw svg { display: block; width: 100%; height: 100%; overflow: visible; }
.dw path { fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.dw .dw-c, .dw .dw-h { stroke-width: 1px; }
.dw .dw-s { stroke-width: 3px; }
.dw .dw-b { stroke-width: 2.5px; }
.dw .dw-g, .dw .dw-l { stroke: var(--grey); stroke-width: 1px; }
.dw .dw-p { stroke: var(--plan); stroke-width: 1px; }
.dw .dw-xb { stroke: var(--plan); stroke-width: .75px; }     /* laths the shell itself hides */
.dw circle { fill: var(--bg); stroke: var(--ink); stroke-width: 1.25px; vector-effect: non-scaling-stroke; }
.dw .dw-nb circle { stroke: var(--plan); }                    /* a support the shell hides */
.dw .dw-r circle { stroke-width: 1px; }
.dw.is-grab { cursor: grab; }
.dw.is-dragging { cursor: grabbing; }
/* with JavaScript, a plate shows from its first drawing at its true size (home.js marks it .drawn), so nothing jumps
   from the drawing written into the page (the no-JS state) to the drawn one; the prism's first drawing is the
   untwisted start of its form-finding, or, still, its rest. The page's head script lifts this after 3 s regardless. */
.dw-wait .dw:not(.drawn) svg { visibility: hidden; }

/* ---------- shared footer: one line and the mark ---------- */
.ft { padding: 0 var(--m) var(--u); color: var(--grey); }
.ft p { display: flex; align-items: center; gap: 12px; }
.ft-mark { flex: none; display: block; width: 20px; height: 20px; }
.ft-mark svg { display: block; overflow: visible; }

/* =================================================================== *
 * Home                                                                *
 * =================================================================== */
.intro { margin-top: calc(var(--u) * 1.5); align-items: baseline; }
.lede { grid-column: 5 / -1; grid-row: 1; font-size: var(--d); line-height: var(--dl); letter-spacing: var(--track); }
.lede .ph { display: block; }                 /* two lines, broken between the phrases, at every width */
.cred { grid-column: 1 / 5; grid-row: 1; color: var(--grey); }

.exps { margin-top: calc(var(--u) * 1.5); }
.plate { margin: 0; min-width: 0; }
.cap { position: relative; width: fit-content; max-width: 100%; margin-top: calc(var(--u) * .75); }   /* the hit area is the caption, not the empty plate beside it */
.cap-t { font-size: var(--d); line-height: var(--dl); letter-spacing: var(--track); }
.cap-t a::after { content: ""; position: absolute; inset: -6px -8px; }    /* the whole caption is the link */
.cap-l { color: var(--grey); max-width: 40em; margin-top: 10px; }        /* clear of the title's hanging cable */
.cap-s { position: relative; z-index: 1; margin-top: 8px; }

/* the plates: the prism on the axis, then the beam to the right and the gridshell to the left,
   the gridshell hung beside the beam's caption (rows shared through subgrid) */
.p1 { grid-column: 5 / 13; grid-row: 1; }
.p1 .dw { height: clamp(380px, calc(100svh - 318px), 640px); }
.p2 { grid-column: 7 / 13; grid-row: 2 / 4; display: grid; grid-template-rows: subgrid; }
.p2 .dw { height: 114px; margin-top: calc(var(--u) * 8); }
.p3 { grid-column: 2 / 7; grid-row: 3 / 5; display: grid; grid-template-rows: subgrid; }
.p3 .dw { aspect-ratio: 565 / 318; margin-top: calc(var(--u) * .75); }
.p2 .cap, .p3 .cap { align-self: start; }

.practice { margin-top: calc(var(--u) * 9); row-gap: calc(var(--u) * 2); }
/* the About: one sentence a line at every width, as the lede is set by its phrases (the longest sentence, 657 px at
   28 px, fits 24em); where a sentence is longer than the column it breaks only between the phrases marked .ph */
.about { grid-column: 5 / -1; max-width: 24em; font-size: var(--d); line-height: var(--dl); letter-spacing: var(--track); }
.about .s { display: block; }
.fields { grid-column: 5 / 13; display: grid; grid-template-columns: subgrid; row-gap: 8px; }   /* on the page's own columns */
.fields dt { grid-column: 1 / 3; }
.fields dd { grid-column: 3 / -1; max-width: 36em; color: var(--grey); }   /* on the column-7 line, as the beam's caption */
.contact { margin-top: calc(var(--u) * 2); }
.contact p { grid-column: 5 / 12; }

.home .ft { margin-top: calc(var(--u) * 8); }

/* ---------- narrower desktops and tablets ---------- */
@media (max-width: 1199px) {                      /* below 1200 px two columns are narrower than the longest term (173 px) */
  .fields dt { grid-column: 1 / 4; }
  .fields dd { grid-column: 4 / -1; }
}
@media (max-width: 1099px) {
  .p2 { grid-column: 6 / 13; }
  .p3 { grid-column: 1 / 6; }
}
@media (max-width: 899px) and (min-width: 761px) {
  .intro { row-gap: 10px; }
  .lede { grid-column: 3 / -1; }
  .cred { grid-column: 3 / -1; grid-row: 2; }
  .p1, .about, .fields, .contact p { grid-column: 3 / -1; }
  .fields dt { grid-column: 1 / 5; }
  .fields dd { grid-column: 5 / -1; }
  .p2 { grid-column: 5 / 13; grid-row: 2; display: block; }
  .p3 { grid-column: 1 / 10; grid-row: 3; display: block; }
  .p3 .dw { margin-top: calc(var(--u) * 5); }
}

/* ---------- phone ---------- */
@media (max-width: 760px) {
  /* the display size follows the width below 390 px, so the positioning line's longer phrase (15.5 em) never
     runs into the 16 px margin; from 390 px up it is 22 px */
  :root { --t: 16px; --tl: 23px; --d: min(22px, calc((100vw - 32px) / 15.8)); --dl: calc(var(--d) * 1.2273); --u: 23px; --m: 16px; --g: 12px; }
  .hd { padding-top: 4px; }
  .hd-nav { gap: 20px; }
  .skip:focus { height: 48px; padding-top: calc(4px + (44px - var(--tl)) / 2); }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .grid > * { grid-column: 1 / -1 !important; }
  .intro { margin-top: var(--u); row-gap: 10px; }
  .lede, .cred { grid-row: auto; }
  .exps { margin-top: var(--u); }
  .p1, .p2, .p3 { grid-row: auto; display: block; }
  .p1 .dw { height: 400px; }
  /* the desktop's asymmetry carried down: the beam runs out to the right edge and its caption follows close; the
     gridshell follows after a longer pause. Every block, drawing and caption, keeps the one 16 px axis */
  .p2 .dw { height: 84px; margin-top: calc(var(--u) * 4); margin-right: calc(-1 * var(--m)); }
  .p2 .cap { margin-top: calc(var(--u) * .5); }
  .p3 .dw { margin-top: calc(var(--u) * 5); }
  .practice { margin-top: calc(var(--u) * 5); row-gap: var(--u); }
  .fields { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .fields dt, .fields dd { grid-column: 1 / -1; }
  .fields dd + dt { margin-top: 12px; }
  .contact { margin-top: var(--u); }
  .home .ft { margin-top: calc(var(--u) * 5); }
  .ft p { align-items: flex-start; }
  .ft-sep { display: none; }                      /* the footer breaks between its phrases, not after a middot */
  .ft .ph { display: block; }
}

/* ---------- the still state: every drawing at rest, every transition instant ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}
.still, .still * { scroll-behavior: auto; }
.still *, .still *::before, .still *::after { transition: none !important; }

/* =================================================================== *
 * Demo controls: one kit for every experiment page                    *
 * Boxed fields with a 1 px ink rule, 44 px tall, no radius; selects   *
 * carry one drawn chevron; buttons invert only while pressed; one     *
 * drawn arrow, turned for each nudge direction; one drawn checkbox.   *
 * =================================================================== */
main select, main input[type=number] {
  display: block; width: 100%; height: 44px; margin: 0; padding: 0 12px;
  font: inherit; font-size: var(--t); line-height: normal; color: var(--ink); background-color: var(--bg);
  border: 1px solid var(--ink); border-radius: 0; -webkit-appearance: none; appearance: none;
}
main select {
  padding-right: 40px; cursor: pointer;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111214' stroke-width='1.25'/%3E%3C/svg%3E") no-repeat right 14px center;
}
main select:focus-visible, main input:focus-visible { outline-offset: 2px; }
main input[type=range] { display: block; width: 100%; height: 44px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
main input[type=range]::-webkit-slider-runnable-track { height: 1px; background: var(--ink); }          /* a cable */
main input[type=range]::-moz-range-track { height: 1px; background: var(--ink); }
main input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -7.5px; border: 1.25px solid var(--ink); border-radius: 50%; background: var(--bg); }   /* an open node */
main input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border: 1.25px solid var(--ink); border-radius: 50%; background: var(--bg); }
main input[type=range]:focus-visible { outline-offset: 0; }
main label > .lab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }   /* a slider's name, and its value at the track's end */
main output { color: var(--ink); white-space: nowrap; }
main button {
  min-height: 44px; min-width: 44px; padding: 0 16px; margin: 0;
  font: inherit; font-size: var(--t); color: var(--ink); background: var(--bg);
  border: 1px solid var(--ink); border-radius: 0; cursor: pointer;
}
main button:active { background: var(--ink); color: var(--bg); }
main input[type=checkbox] {
  flex: none; width: 18px; height: 18px; margin: 0; border: 1px solid var(--ink); border-radius: 0;
  background: var(--bg); -webkit-appearance: none; appearance: none; cursor: pointer;
}
main input[type=checkbox]:checked {
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4.2 9.2 7.6 12.4 13.8 5.6' fill='none' stroke='%23ffffff' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center / 18px 18px;
}
.nudge { display: flex; flex-wrap: wrap; gap: 6px; }              /* the four nudge buttons, in one row */
.nudge button { display: inline-grid; place-items: center; width: 44px; padding: 0; }
.arrow { display: block; flex: none; width: 16px; height: 16px; overflow: visible; }
.arrow path { fill: none; stroke: currentColor; stroke-width: 1.25px; stroke-linecap: round; stroke-linejoin: round; }
.arrow.to-l { transform: rotate(180deg); }
.arrow.to-u { transform: rotate(-90deg); }
.arrow.to-d { transform: rotate(90deg); }
.method summary { display: flex; align-items: center; gap: 10px; width: fit-content; min-height: 44px; list-style: none; cursor: pointer; }
.method summary::-webkit-details-marker { display: none; }
.method summary svg { flex: none; width: 10px; height: 10px; overflow: visible; }
.method[open] summary svg { transform: rotate(90deg); }
.next .nx { color: var(--grey); }                                  /* "Next:" stays outside the link, in grey */
@media (max-width: 359px) {                    /* below 360 px the next link may wrap; a wrapped cable cannot hang, so it is a plain hairline */
  .next a.u { display: inline; white-space: normal; text-decoration: underline 1px; text-underline-offset: 6px; }
  .next .cab { display: none; }
}

/* ---- 13 Oct content pass: practice first, then selected work, experiments, about, contact ----
   Same tokens, type sizes and caption grammar as above; nothing new in the look. */
.sec-h { grid-column: 1 / 5; grid-row: 1; font-size: var(--t); line-height: var(--tl); }   /* plain section names, text size, ink */
.sec-p { grid-column: 5 / 13; grid-row: 1; max-width: 36em; }
.hero { margin-top: calc(var(--u) * 1.5); }
.work { margin-top: calc(var(--u) * 5); row-gap: calc(var(--u) * 3); align-items: start; }
.work-item { margin: 0; min-width: 0; }
.work-img { display: block; }
.work-img img { display: block; width: 100%; height: auto; filter: grayscale(1); transition: filter .6s ease; }
.work-item:hover .work-img img, .work-item:focus-within .work-img img { filter: none; }
.w1 { grid-column: 5 / 13; grid-row: 1; }
.w2 { grid-column: 2 / 7; grid-row: 2; }
.w3 { grid-column: 8 / 13; grid-row: 2; margin-top: calc(var(--u) * 6); }
.more { margin-top: calc(var(--u) * 6); row-gap: calc(var(--u) * 2); }
.more .p2 { grid-row: 2; display: block; }
.more .p2 .dw { margin-top: calc(var(--u) * 2); }
.more .p3 { grid-row: 3; display: block; }
.practice .about { grid-row: 1; }
.practice .bio { grid-row: auto; }
.contact .sec-h { grid-row: 1; }
.contact p { grid-row: 1; }
html.still .work-img img { transition: none; }
@media (max-width: 899px) and (min-width: 761px) {
  .w1, .w2, .w3, .sec-p { grid-column: 3 / -1; grid-row: auto; margin-top: 0; }
  .sec-h { grid-column: 1 / 3; }
  .more .p2, .more .p3 { grid-column: 3 / -1; grid-row: auto; }
}
@media (max-width: 760px) {
  .work { margin-top: calc(var(--u) * 3); row-gap: calc(var(--u) * 2); }
  .w3 { margin-top: 0; }
  .more { margin-top: calc(var(--u) * 3); row-gap: var(--u); }
  .sec-h, .sec-p, .about, .bio, .contact p { grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) { .work-img img { transition: none; } }

/* project pages (work/*.html) */
.proj { margin-top: calc(var(--u) * 1.5); row-gap: calc(var(--u) * 1.5); align-items: start; }
.proj-t { grid-column: 5 / 13; font-size: var(--d); line-height: var(--dl); letter-spacing: var(--track); }
.proj-lede { grid-column: 5 / 13; max-width: 30em; font-size: var(--d); line-height: var(--dl); letter-spacing: var(--track); color: var(--grey); }
.proj-facts { grid-column: 1 / 5; grid-row: 1 / span 3; color: var(--grey); }
.proj-facts dt { color: var(--ink); }
.proj-facts dd + dt { margin-top: 12px; }
.proj-body { grid-column: 5 / 13; display: grid; row-gap: calc(var(--u) * 1.5); }
.proj-body p { max-width: 36em; }
.proj-body p + p { margin-top: calc(var(--u) * -0.75); }
.proj-fig { margin: 0; }
.proj-fig img { display: block; width: 100%; height: auto; }
.proj-fig figcaption { color: var(--grey); margin-top: 10px; max-width: 36em; }
.proj-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--g); }
.proj-narrow { max-width: 62%; }
.proj-next { grid-column: 5 / 13; margin-top: calc(var(--u) * 2); }
.proj-next .lbl { color: var(--grey); }
@media (max-width: 899px) and (min-width: 761px) {
  .proj-t, .proj-lede, .proj-body, .proj-next { grid-column: 3 / -1; }
  .proj-facts { grid-column: 3 / -1; grid-row: auto; }
}
@media (max-width: 760px) {
  .proj-facts { grid-row: auto; }
  .proj-pair { grid-template-columns: 1fr; }
  .proj-narrow { max-width: 100%; }
}

h3 { margin: 0; font-weight: 400; }   /* captions became h3 under the new section headings */

.lede .ls { display: block; }                    /* one sentence per line; long sentences wrap normally */
@media (max-width: 760px) {
  .work > *, .more > *, .practice > *, .contact > *, .proj > * { grid-row: auto !important; }
}
.lede .ls, .proj-lede, .about { text-wrap: balance; }

/* delivery: the home section and the page's subheads */
.deliv { margin-top: calc(var(--u) * 6); }
.proj-h { font-size: var(--t); line-height: var(--tl); margin-bottom: calc(var(--u) * -1); }
@media (max-width: 760px) {
  .deliv { margin-top: calc(var(--u) * 3); row-gap: var(--u); }
  .deliv > * { grid-row: auto !important; }
  .hd-nav { gap: 14px; }
}