/*
 * hwt.css — the hwi.net stylesheet
 * © Copyright 2026 David Davis LLC - All Rights Reserved
 *
 * Purpose: the HWT design guide (v0.4) as one stylesheet for the 2026
 * static site. Tokens, base type, and the components the guide names
 * are copied from the guide's specimen page (hwt-design-guide.html)
 * and renamed per its Naming table (.site-header, .site-footer, ...).
 * Guide-only demo styles (swatches, specimens, logo tiles) are left out.
 *
 * When this file and the guide disagree, the guide wins: fix this file.
 */

/* ============ fonts, self-hosted (guide, Part 3) ============
 * IBM Plex, SIL Open Font License 1.1 (fonts/LICENSE.txt). Latin subset;
 * Sans is one variable file covering 400-600, Mono is one file per weight. */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============ tokens (guide, Part 2, Tokens) ============ */
:root {
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  --paper: #ffffff;
  --ink: #000000;
  --gray-70: #4d4d4d;   /* secondary text; WIRED in the wordmark; lightest text color */
  --gray-50: #8a8a8a;   /* placeholders, disabled, large text only */
  --gray-20: #d9d9d9;   /* table rules, hairlines, hover rows */
  --gray-10: #f2f2f2;   /* surfaces: data blocks, code, notes, zebra rows */
  --blue: #1650e8;      /* interactive; the logo flags */
  --red:  #d62828;      /* emphasis, identity, attention; never interactive */
  --sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --u: 8px;
  --measure: 68ch;            /* prose never wider than this */
  --page: 1280px;             /* the reading column */
  --gutter: 24px;
  --bp-phone: 720px;          /* below: phone */
  --bp-wide: 1280px;          /* above: wide */
  --fast: 120ms;              /* state changes only */
  --shadow-1: 0 2px 8px rgba(0,0,0,.18);     /* menus, popovers, tooltips, toasts */
  --shadow-2: 0 12px 40px rgba(0,0,0,.28);   /* dialogs, lightbox */
  --overlay: rgba(0,0,0,.6);
}

/* ============ base ============ */
html { scroll-padding-top: env(safe-area-inset-top, 0px); }
*, *::before, *::after { box-sizing: inherit; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
/* the page column: header, main, and footer share it */
.page { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter) calc(var(--u)*6); min-height: 100vh; display: flex; flex-direction: column; }
.page > main { flex: 1 0 auto; padding: calc(var(--u)*6) 0 calc(var(--u)*12); }
.wide { max-width: none; }
p { max-width: var(--measure); margin: 0 0 calc(var(--u)*2); }
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; margin: 0; }
h1 { font-size: 34px; margin-bottom: calc(var(--u)*2); }
h2 { font-size: 27px; margin: calc(var(--u)*10) 0 calc(var(--u)*2); }
h3 { font-size: 21px; margin: calc(var(--u)*5) 0 var(--u); }
h4 { font-size: 17px; margin: calc(var(--u)*3) 0 var(--u); }
.display { font-size: 44px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.1; }
.lead { font-size: 21px; line-height: 1.4; max-width: 52ch; }
a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--fast); }
a:hover { color: var(--blue); }
a[href^="tel:"] { white-space: nowrap; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.mono { font-family: var(--mono); font-size: 15px; line-height: 1.6; }
.small { font-family: var(--mono); font-size: 13px; line-height: 1.6; color: var(--gray-70); }
.muted { color: var(--gray-70); }
.em { color: var(--red); }
.domain { font-family: var(--mono); font-weight: 500; color: var(--red); text-decoration: none; }
.domain:hover { color: var(--red); }
ul, ol { padding-left: 1.2em; max-width: var(--measure); }
li { margin-bottom: 4px; }
code { font-family: var(--mono); font-size: 0.92em; background: var(--gray-10); padding: 1px 5px; }
hr { border: 0; height: 1px; background: var(--ink); margin: calc(var(--u)*12) 0 0; }
/* skip link: the first focusable thing on every page, invisible until focused */
.skip { position: absolute; left: -9999px; top: 8px; font-family: var(--mono); font-size: 13px; background: var(--ink); color: var(--paper); padding: 8px 12px; text-decoration: none; z-index: 3; }
.skip:focus { left: 8px; }

/* ============ logo ============
 * Inline SVG with these classes; the colorway comes from the tokens.
 * The mark (cube and flags) is used at 32px in the header and as the
 * favicon; the lockup has a 96px floor on screen. */
.logo { display: block; width: auto; }
.lg-body, .lg-word { fill: var(--ink); }
.lg-glyph { fill: var(--paper); }
.lg-word2 { fill: var(--gray-70); }
.lg-flag { fill: var(--blue); }
/* the lockup on the home page: well above its 96px floor, 120px on a phone */
.lockup { height: 144px; margin-bottom: calc(var(--u)*6); }

/* ============ header and footer (guide, Part 3) ============ */
/* the masthead rule: 1px gray-70, softer than the footer's ink; the page is bracketed top and bottom */
.site-header { display: flex; justify-content: space-between; align-items: center; gap: calc(var(--u)*3); padding: calc(var(--u)*2) 0; border-bottom: 1px solid var(--gray-70); }
.site-header .logo { height: 32px; }
.site-header nav { display: flex; gap: calc(var(--u)*4); font-family: var(--mono); font-size: 15px; }
.site-header nav a { text-decoration: none; }
.site-header nav a:hover, .site-header nav a[aria-current] { text-decoration: underline; text-underline-offset: 5px; }
.site-footer { border-top: 1px solid var(--ink); font-family: var(--mono); font-size: 13px; color: var(--gray-70); display: flex; flex-wrap: wrap; gap: calc(var(--u)*3); justify-content: space-between; padding-top: calc(var(--u)*3); }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer a.domain:hover { text-decoration: none; }
.site-footer .contact { display: flex; flex-wrap: wrap; gap: calc(var(--u)*3); align-items: flex-start; }
.site-footer .contact a { display: inline-flex; align-items: flex-start; gap: 6px; }
.site-footer .ico { width: 16px; height: 16px; margin-top: 2px; }

/* ============ components (guide, Part 2, Components) ============ */
/* inventory: a mono list of things that exist */
ul.inventory { list-style: none; padding: 0; margin: 0 0 calc(var(--u)*3); font-family: var(--mono); font-size: 15px; line-height: 1.6; max-width: var(--measure); }
ul.inventory li { margin: 0; }
ul.inventory.bullets li { padding-left: 2ch; text-indent: -2ch; }
ul.inventory.bullets li::before { content: "-"; display: inline-block; width: 2ch; text-indent: 0; }
ol.inventory { font-family: var(--mono); font-size: 15px; line-height: 1.6; padding-left: 3ch; margin: 0 0 calc(var(--u)*3); }
ol.inventory li { margin: 0; }

/* data block: gray-10 surface, mono, one copy button top-right */
.data { background: var(--gray-10); padding: calc(var(--u)*3); font-family: var(--mono); font-size: 15px; line-height: 1.6; max-width: 48ch; position: relative; }
.data b { font-weight: 500; }
.data a { text-decoration: none; }
.data a:hover { text-decoration: underline; }
.data .line { display: flex; align-items: flex-start; gap: var(--u); }
.data .line .ico { margin-top: 2px; }   /* the 24px line box of mono 15, icon 20px: top-aligned to the first line */
/* a line that continues the one above (second address line, a note under the hours): indented past the icon */
.data .line.cont { padding-left: calc(20px + var(--u)); }
/* a block whose lines wrap gets hyphen bullets, like the inventory; the .head line stays plain */
.data.bullets .line { display: block; padding-left: 2ch; text-indent: -2ch; }
.data.bullets .line::before { content: "-"; display: inline-block; width: 2ch; text-indent: 0; }
.data.bullets .line.head { padding-left: 0; text-indent: 0; }
.data.bullets .line.head::before { content: none; }
main > .data { margin-bottom: calc(var(--u)*3); }   /* a block standing alone, not in a split */
.data[data-copyable] { padding-right: 9ch; }   /* room for the copy button */
.copy { font: inherit; font-family: var(--mono); font-size: 13px; color: var(--gray-70); background: none; border: 0; padding: 2px 4px; cursor: pointer; transition: color var(--fast); }
.copy:hover, .copy.done { color: var(--blue); }
[data-copyable] { position: relative; }
[data-copyable] > .copy { position: absolute; top: calc(var(--u)*1.5); right: calc(var(--u)*1.5); }

/* code block: same recipe, scrolls instead of wrapping */
.codeblock { background: var(--gray-10); padding: calc(var(--u)*3); margin: 0 0 calc(var(--u)*3); max-width: 100%; overflow-x: auto; }
.codeblock pre { margin: 0; font-family: var(--mono); font-size: 14px; line-height: 1.6; }
.codeblock code { background: none; padding: 0; font-size: inherit; }
/* highlight.js theme in system colors (only loaded on pages with code) */
.hljs { color: var(--ink); background: transparent; }
.hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-type, .hljs-literal, .hljs-title.function_, .hljs-title.class_, .hljs-section, .hljs-attr, .hljs-name { color: var(--ink); font-weight: 500; }
.hljs-string, .hljs-regexp, .hljs-template-tag, .hljs-symbol, .hljs-addition { color: var(--blue); }
.hljs-number, .hljs-variable, .hljs-params, .hljs-attribute, .hljs-meta, .hljs-title { color: var(--ink); }
.hljs-comment, .hljs-quote, .hljs-doctag { color: var(--gray-50); }
.hljs-punctuation, .hljs-operator, .hljs-tag { color: var(--gray-70); }
.hljs-deletion { color: var(--red); }
.hljs-emphasis { font-style: normal; } .hljs-strong { font-weight: 500; }

/* button: one filled per view; quiet variant is the outline */
.btn { display: inline-flex; align-items: flex-start; gap: var(--u); font-family: var(--mono); font-size: 15px; font-weight: 500; padding: calc(var(--u)*1.5) calc(var(--u)*3); background: var(--ink); color: var(--paper); border: 0; text-decoration: none; cursor: pointer; border-radius: 0; transition: background var(--fast), color var(--fast), box-shadow var(--fast); }
.btn .ico { margin-top: 2px; }
.btn:hover { background: var(--blue); color: #fff; }
.btn.quiet { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.btn.quiet:hover { color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); background: transparent; }
.btn:disabled, .btn.quiet:disabled { background: var(--gray-20); color: var(--gray-50); box-shadow: none; cursor: default; }
.actions { display: flex; gap: calc(var(--u)*2); align-items: center; flex-wrap: wrap; }

/* icons: 20px, 2px stroke, square caps, currentColor */
.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; stroke-miterlimit: 2; flex: none; }
/* an icon beside a heading: the word stays the heading, the icon marks it */
h2.icon, h3.icon { display: flex; align-items: flex-start; gap: calc(var(--u)*1.5); }
h2.icon .ico { width: 24px; height: 24px; margin-top: 4px; }
h3.icon .ico { margin-top: 3px; }
.iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: none; border: 0; color: var(--ink); cursor: pointer; position: relative; transition: color var(--fast); padding: 0; }
.iconbtn:hover { color: var(--blue); }
[data-tip]::after { content: attr(data-tip); position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%); background: var(--paper); color: var(--ink); font-family: var(--mono); font-size: 13px; padding: 4px 8px; white-space: nowrap; box-shadow: var(--shadow-1), inset 0 0 0 1px var(--gray-20); opacity: 0; pointer-events: none; transition: opacity var(--fast); z-index: 2; }
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; }

/* split: sans prose beside a mono data block, 3:2 for the prose */
.split { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: calc(var(--u)*6); align-items: start; margin: 0 0 calc(var(--u)*4); }
.split.data-left { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.split h3 { margin-top: 0; }
.split p:last-child { margin-bottom: 0; }
.split .data { margin-bottom: calc(var(--u)*3); }
.split .data:last-child { margin-bottom: 0; }

/* table: mono, hairlines, numbers right in .n; .large adds zebra and hover */
table { border-collapse: collapse; font-family: var(--mono); font-size: 15px; margin: 0 0 calc(var(--u)*3); width: 100%; max-width: 640px; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: var(--u) calc(var(--u)*2) var(--u) 0; border-bottom: 1px solid var(--gray-20); vertical-align: top; }
th { font-weight: 500; }
td.n, th.n { text-align: right; padding-right: 0; }
table.large { max-width: none; }
table.large tbody tr:nth-child(even) { background: var(--gray-10); }
table.large tbody tr { transition: background var(--fast); }
table.large tbody tr:hover { background: var(--gray-20); }
table.large th, table.large td { padding-left: calc(var(--u)*1.5); padding-right: calc(var(--u)*1.5); }
.wrap { overflow-x: auto; }

/* note, warning, quote */
.note { background: var(--gray-10); padding: calc(var(--u)*2) calc(var(--u)*3); margin: 0 0 calc(var(--u)*2); max-width: calc(var(--measure) + 48px); }
.note p { margin: 0; }
.note.warning { border-left: 2px solid var(--red); }
blockquote.quote { margin: 0 0 calc(var(--u)*3); padding-left: calc(var(--u)*3); border-left: 2px solid var(--ink); }
blockquote.quote p { margin: 0 0 var(--u); }
blockquote.quote footer { font-family: var(--mono); font-size: 13px; color: var(--gray-70); }

/* tile and tag: the portfolio unit and its filter bar */
.tags { display: flex; flex-wrap: wrap; gap: var(--u); margin: 0 0 calc(var(--u)*3); }
.tag { font: inherit; font-family: var(--mono); font-size: 13px; line-height: 1; padding: 6px 10px; background: var(--paper); color: var(--ink); border: 0; box-shadow: inset 0 0 0 1px var(--gray-20); cursor: pointer; transition: box-shadow var(--fast), color var(--fast); }
.tag:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.tag.active { color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: calc(var(--u)*3); margin: 0 0 calc(var(--u)*2); align-items: start; }
.tile { margin: 0; }
.tile img { display: block; width: 100%; height: auto; transition: outline-color var(--fast); outline: 2px solid transparent; }
.tile:hover img { outline-color: var(--blue); }
.tile figcaption { margin-top: var(--u); }
.tile figcaption b { display: block; font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--ink); }
.tile figcaption span { display: block; font-family: var(--mono); font-size: 13px; color: var(--gray-70); }
.tile.hidden { display: none; }

/* forms: fields are mono because what goes in them is data */
form { max-width: 48ch; }
.field { margin: 0 0 calc(var(--u)*2); }
.field label { display: block; font-size: 15px; font-weight: 500; margin-bottom: 4px; }
.field input[type=text], .field input[type=email], .field input[type=tel], .field select, .field textarea {
  width: 100%; font-family: var(--mono); font-size: 15px; line-height: 1.4; padding: calc(var(--u)*1.25) calc(var(--u)*1.5);
  color: var(--ink); background: var(--paper); border: 0; box-shadow: inset 0 0 0 1px var(--ink); border-radius: 0; appearance: none; -webkit-appearance: none; transition: box-shadow var(--fast); }
.field select { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; padding-right: 36px; }
.field input::placeholder, .field textarea::placeholder { color: var(--gray-50); }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--blue); outline-offset: 0; box-shadow: inset 0 0 0 1px var(--blue); }
.field input:disabled, .field select:disabled { color: var(--gray-50); box-shadow: inset 0 0 0 1px var(--gray-20); background: var(--gray-10); }
.field.error input, .field.error select, .field.error textarea { box-shadow: inset 0 0 0 1px var(--red); }
.field .msg, .field .msgs { font-family: var(--mono); font-size: 13px; line-height: 1.6; margin: 4px 0 0; color: var(--gray-70); }
.field .msgs { list-style: none; padding: 0; }
.field .msgs li { margin: 0; padding-left: 2ch; text-indent: -2ch; }
.field .msgs li::before { content: "-"; display: inline-block; width: 2ch; text-indent: 0; }
.field.error .msg, .field.error .msgs { color: var(--red); }
.choice { display: flex; flex-wrap: wrap; gap: calc(var(--u)*3); font-size: 15px; margin: 0 0 calc(var(--u)*2); }
.choice label { display: inline-flex; align-items: center; gap: var(--u); }
.choice input { accent-color: var(--blue); width: 16px; height: 16px; margin: 0; }

/* elevation: only for things that float */
details.menu { position: relative; display: inline-block; font-family: var(--mono); font-size: 15px; }
details.menu summary { list-style: none; cursor: pointer; padding: calc(var(--u)*1.5) calc(var(--u)*3); box-shadow: inset 0 0 0 1px var(--ink); transition: background var(--fast), color var(--fast); }
details.menu summary::-webkit-details-marker { display: none; }
details.menu[open] summary { background: var(--ink); color: var(--paper); }
details.menu .panel { position: absolute; left: 0; top: calc(100% + 4px); min-width: 22ch; background: var(--paper); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--gray-20); padding: var(--u) 0; z-index: 2; }
details.menu .panel a { display: block; padding: 6px calc(var(--u)*3); text-decoration: none; transition: background var(--fast), color var(--fast); }
details.menu .panel a:hover { background: var(--gray-10); color: var(--blue); }
details.popover summary { padding: 0; box-shadow: none; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; }
details.popover[open] summary { background: none; color: var(--blue); }
details.popover .panel.prose { font-family: var(--sans); font-size: 15px; line-height: 1.5; padding: calc(var(--u)*2) calc(var(--u)*2.5); width: 32ch; }
details.popover .panel.prose b { font-family: var(--mono); font-weight: 500; }
dialog { border: 0; padding: 0; background: var(--paper); color: var(--ink); box-shadow: var(--shadow-2); max-width: min(92vw, 1100px); }
dialog::backdrop { background: var(--overlay); }
dialog img { display: block; max-width: 100%; max-height: 80vh; height: auto; }
dialog .bar { display: flex; justify-content: space-between; align-items: center; gap: calc(var(--u)*2); padding: calc(var(--u)*1.5) calc(var(--u)*2); font-family: var(--mono); font-size: 13px; color: var(--gray-70); }
dialog .bar .btn { font-size: 13px; padding: 6px 12px; }
dialog.plain { padding: calc(var(--u)*4); max-width: min(92vw, 52ch); }
dialog.plain p { margin-bottom: calc(var(--u)*3); }
.toast { position: fixed; left: 24px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); background: var(--paper); color: var(--ink); font-family: var(--mono); font-size: 13px; padding: 10px 14px; box-shadow: var(--shadow-1), inset 0 0 0 1px var(--gray-20); opacity: 0; pointer-events: none; transition: opacity var(--fast); z-index: 4; }
.toast.on { opacity: 1; }

/* empty, loading, error */
.state { background: var(--gray-10); padding: calc(var(--u)*3); font-family: var(--mono); font-size: 15px; display: flex; flex-direction: column; gap: calc(var(--u)*2); align-items: flex-start; min-height: 120px; justify-content: center; }
.state .muted { color: var(--gray-70); }
/* the error page: status in mono 500 at display size, one sentence, a link home */
.error-page .display { font-family: var(--mono); font-weight: 500; margin-bottom: calc(var(--u)*2); }

/* imagery: hard edges, no frames, mono caption; .shot adds the one hairline */
figure { margin: 0 0 calc(var(--u)*3); }
figure img, figure svg { display: block; max-width: 100%; height: auto; }
figcaption { font-family: var(--mono); font-size: 13px; line-height: 1.6; color: var(--gray-70); margin-top: var(--u); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: calc(var(--u)*2); margin: 0 0 calc(var(--u)*2); align-items: start; }
.gallery button { border: 0; padding: 0; background: none; cursor: pointer; display: block; line-height: 0; }
.gallery img { width: 100%; height: auto; display: block; outline: 2px solid transparent; transition: outline-color var(--fast); }
.gallery button:hover img { outline-color: var(--blue); }
.shot { box-shadow: inset 0 0 0 1px var(--gray-20); }
.diagram { color: var(--ink); }

/* ============ hwi.net pages (guide, Part 3) ============ */
/* home: the lockup beside the opening line, then alternating splits */
.hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: calc(var(--u)*8); align-items: center; margin: calc(var(--u)*3) 0 calc(var(--u)*10); }
.hero .lockup { height: 200px; margin: 0; justify-self: start; }
.hero h1 { margin-bottom: calc(var(--u)*2); }
.hero .small { margin: 0; }
/* section numbers: mono small, two digits, above a heading; numbers are data, not labels */
.num { margin-bottom: 4px; }
/* signposts: short pointers side by side */
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: calc(var(--u)*6) calc(var(--u)*4); margin: calc(var(--u)*10) 0 calc(var(--u)*4); }
.cols h2, .cols h3 { font-size: 21px; margin: 0 0 var(--u); }
.cols p:last-child { margin-bottom: 0; }
/* portrait: one frame, 4:5, hard edges, no caption when the name is beside it.
 * Grayscale at rest; color returns at the one duration when the person's
 * section is under the cursor or scrolled into view (.in-view, set by hwt.js). */
.portrait { margin: 0; max-width: 480px; }
.portrait picture, .portrait img { display: block; width: 100%; height: auto; }
.portrait img { filter: grayscale(1); transition: filter var(--fast); }
.person:hover .portrait img, .person.in-view .portrait img { filter: none; }
/* the terms page (/aiip/): a long legal document, text carried forward unchanged.
 * Dates are metadata (mono small); the document's own hr and doc-footer become
 * gray-20 hairlines, a recorded exception to "the only rules on a page". */
.terms { max-width: var(--measure); }
.terms h2 { margin-top: calc(var(--u)*6); }
.terms .meta { font-family: var(--mono); font-size: 13px; line-height: 1.6; color: var(--gray-70); margin: 0; }
.terms .meta strong { font-weight: 500; }
.terms .meta + p:not(.meta) { margin-top: calc(var(--u)*3); }
.terms strong { font-weight: 600; }
.terms hr { background: var(--gray-20); margin: calc(var(--u)*4) 0; }
.terms ol { padding-left: 3ch; }
.terms .doc-footer { margin-top: calc(var(--u)*5); padding-top: calc(var(--u)*2); border-top: 1px solid var(--gray-20); font-family: var(--mono); font-size: 13px; line-height: 1.6; color: var(--gray-70); }

/* ============ breakpoints and motion ============ */
@media (max-width: 720px) {
  h1 { font-size: 30px; } .display { font-size: 36px; } .lead { font-size: 19px; }
  .lockup, .hero .lockup { height: 120px; }
  .split, .split.data-left { grid-template-columns: 1fr; gap: calc(var(--u)*4); }
  .hero { grid-template-columns: 1fr; gap: calc(var(--u)*4); margin-bottom: calc(var(--u)*6); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }