/*
	Direction A "Fieldbook" palette: a warm parchment manuscript rather than a neutral gray
	reading surface. Reasonable Colors' gray scale is dropped entirely for --bg/--surface/--ink
	in favour of fixed sepia/ink hex values — the RC gray ramp has no warm-neutral hue that
	reaches this tone, so the honest move is to state the palette directly rather than force
	an RC alias onto a colour it doesn't own. RC hues remain the source for the five strand
	colours below, chosen for contrast against parchment rather than against white.
	Components reference the aliases only, never --color-{name}-{shade} directly.

	Strand hues keep the earlier assignment (Design/violet as the conceptual pivot,
	Fieldnotes/cinnamon, Ideas/teal, Mechanism/green, Practice/lime) but each now reads
	against --surface (#fbf7ef) rather than white, so shades were re-picked for the new
	background: shade 4 holds AA body-text contrast (4.5:1+) on parchment for every strand.
*/
@import "./reasonable-colors.css";

:root {
	--bg: #efe8da;
	--surface: #fbf7ef;
	--ink: #23201b;
	--muted: #4a4438;
	--faint: #8b8272;
	--line: #ddd4c2;
	--border: #d6cbb4;

	--ink-soft: #6b6459;

	--terra: #8c3b1e;
	--terra-soft: #9a4a24;
	--verd: var(--color-emerald-5);
	--bronze: #9a4a24;

	/* strand hues — see mapping note above; badges derive from these, not from --verd/--bronze */
	--strand-fieldnotes: #9a4a24;
	--strand-fieldnotes-text: #9a4a24;
	--strand-ideas: #2f6b66;
	--strand-design: #3b4a86;
	--strand-mechanism: #4e6b2e;
	--strand-practice: #8a6a13;
	--strand-practice-text: #8a6a13;

	/* code blocks stay a fixed dark reading surface in both themes, so these don't move */
	--code-bg: var(--color-gray-6);
	--code-ink: var(--color-gray-1);
	--code-accent: var(--color-amber-3);

	--serif: "Spectral", "Iowan Old Style", "Palatino Linotype", palatino, "Book Antiqua", georgia, serif;
	--mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Code", menlo, consolas, monospace;
	--shell: 52rem;
	--prose: 46rem;
}
@media (min-width: 1000px) {
	:root { --shell: 64rem; }
}
@media (min-width: 1300px) {
	:root { --shell: 74rem; }
}

/*
	Dark palette: ink-ground parchment rather than a mirrored sepia. The mockup itself uses
	exactly this relationship for its topbar and footer (#23201b background, #efe8da text),
	so the dark theme extends that treatment across the whole page instead of inventing an
	unrelated dark scheme. --surface sits one step lighter than --bg, matching the light
	theme's paper/surface relationship (surface = slightly lifted). Strand hues move to
	shade 2 (near the light end of each ramp) for AA contrast against the near-black ground —
	first pass, read against real screens rather than a contrast checker, and worth revisiting
	if a specific hue reads wrong.

	Two blocks, same values: the media-query block follows system preference when no
	explicit choice has been made; the [data-theme="dark"] block is what the toggle sets,
	and wins over system preference either direction once a reader has clicked it.
*/
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg: #23201b;
		--surface: #2c2820;
		--ink: #efe8da;
		--ink-soft: #d6cbb4;
		--muted: #a89e8c;
		--faint: #746b5a;
		--line: #423c30;
		--border: #423c30;

		--terra: var(--color-amber-2);
		--terra-soft: var(--color-amber-3);
		--verd: var(--color-emerald-2);
		--bronze: var(--color-amber-2);

		--strand-fieldnotes: var(--color-cinnamon-2);
		--strand-fieldnotes-text: var(--color-cinnamon-2);
		--strand-ideas: var(--color-teal-2);
		--strand-design: var(--color-violet-2);
		--strand-mechanism: var(--color-green-2);
		--strand-practice: var(--color-lime-2);
		--strand-practice-text: var(--color-lime-2);
	}
}
:root[data-theme="dark"] {
	--bg: #23201b;
	--surface: #2c2820;
	--ink: #efe8da;
	--ink-soft: #d6cbb4;
	--muted: #a89e8c;
	--faint: #746b5a;
	--line: #423c30;
	--border: #423c30;

	--terra: var(--color-amber-2);
	--terra-soft: var(--color-amber-3);
	--verd: var(--color-emerald-2);
	--bronze: var(--color-amber-2);

	--strand-fieldnotes: var(--color-cinnamon-2);
	--strand-fieldnotes-text: var(--color-cinnamon-2);
	--strand-ideas: var(--color-teal-2);
	--strand-design: var(--color-violet-2);
	--strand-mechanism: var(--color-green-2);
	--strand-practice: var(--color-lime-2);
	--strand-practice-text: var(--color-lime-2);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--serif);font-size:16px;line-height:1.58;
  -webkit-font-smoothing:antialiased;
  transition:background-color .15s,color .15s;
}
a{color:var(--terra);text-decoration:none}
a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
code{font-family:var(--mono);font-size:.8em;background:var(--bg);padding:.12em .35em;border-radius:0}
pre{
  background:var(--code-bg);color:var(--code-ink);border-radius:10px;
  padding:1.1rem 1.25rem;overflow-x:auto;font-size:.8rem;line-height:1.55;
  border:1px solid var(--color-gray-6);
}
pre code{background:none;padding:0;font-size:inherit;color:inherit}
pre .k{color:var(--code-accent)}
pre .c{color:var(--color-gray-3);font-style:italic}
pre .s{color:var(--color-green-3)}
pre .n{color:var(--color-amber-2)}
pre .t{color:var(--color-sky-2)}

/* ---------- top bar ---------- */
#topbar{
  position:sticky;top:0;z-index:20;
  background:#23201b;color:#efe8da;
  border-bottom:1px solid #423c30;
}
#topbar .inner{
  max-width:var(--shell);margin:0 auto;padding:.5rem 1.75rem;
  display:flex;align-items:center;gap:1.25rem;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
}
#topbar .site{
  font-weight:600;color:#efe8da;white-space:nowrap;
}
#topbar .site a{color:#efe8da}
#topbar .here{
  color:#a89e8c;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  margin-left:auto;
}
/* topbar sits on a fixed dark bar in both themes (matches the mockup exactly), so a strand
   hue placed there directly fails contrast — every strand colour is tuned against --surface,
   not against #23201b. The mockup's own topbar carries no strand chip at all; this keeps the
   chip but neutralises it to the same muted tone as .here, and the coloured version still
   shows correctly in the .pagenav.pn-top sub-bar just below, which sits on --surface. */
#topbar .strand{color:#a89e8c}
.theme-toggle{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:1.4rem;height:1.4rem;border-radius:2px;border:1px solid #55503f;
  background:transparent;color:#efe8da;cursor:pointer;font-size:.9rem;line-height:1;padding:0;
  letter-spacing:0;
}
.theme-toggle:hover{border-color:#a89e8c}

/* ---------- shared page chrome ---------- */
.wrap{max-width:var(--shell);margin:0 auto;padding:0 1.5rem}
article.wrap{max-width:var(--prose);padding-bottom:2rem}

.kicker{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bronze);margin:2.6rem 0 .6rem;
}
h1{font-family:var(--serif);font-weight:300;font-size:2.1rem;line-height:1.08;margin:.2rem 0 .7rem;letter-spacing:-.015em}
h2{font-size:1.08rem;margin:1.9rem 0 .45rem;padding-top:.7rem;border-top:1px solid var(--line);font-weight:600}
h3{font-size:1.02rem;margin:1.6rem 0 .4rem;font-weight:600}
p{margin:.6rem 0}
.lede{font-size:1.05rem;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:1rem;margin-bottom:1.25rem}
ul,ol{padding-left:1.3rem}
li{margin:.35rem 0}
hr{border:none;border-top:1px solid var(--line);margin:2.2rem 0}

table{border-collapse:collapse;width:100%;font-size:.88rem;margin:1rem 0}
th{text-align:left;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
   border-bottom:2px solid var(--line);padding:.45rem .6rem .45rem 0}
td{border-bottom:1px solid var(--line);padding:.5rem .6rem .5rem 0;vertical-align:top}

.callout{
  border:1px solid var(--border);background:var(--surface);
  padding:1rem 1.2rem;margin:1.75rem 0 0;font-size:.95rem;
}
.callout.warn{border-color:var(--terra-soft)}
.callout .tag{
  display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--verd);font-weight:600;margin-bottom:.35rem;
}
.callout.warn .tag{color:var(--terra-soft)}

.badge{
  display:inline-block;font-family:var(--mono);font-size:.68rem;font-weight:400;letter-spacing:0;text-transform:lowercase;
  padding:0;vertical-align:middle;
}
/* badges take their own card's group hue, varied by shade for status (darker = more built),
   rather than a sixth colour competing with the five strand hues. Mechanism = green, Practice
   = lime; badges only appear on these two groups' cards today (Design carries none by policy). */
.group-mechanism .badge.shipped{color:var(--strand-mechanism)}
.group-mechanism .badge.partial{color:var(--strand-practice-text)}
.group-mechanism .badge.designed{color:var(--faint)}
.group-practice .badge.shipped{color:var(--strand-mechanism)}
.group-practice .badge.partial{color:var(--strand-practice-text)}
.group-practice .badge.designed{color:var(--faint)}

/* fieldnotes settledness mark — a third badge vocabulary, legitimate here because
   unsettledness is this group's actual subject rather than a caveat on it. Rendered as
   plain ○/● characters rather than built-up circle elements: five rungs of dots plus a
   named rung (itch, hunch, sketch, draft, call, stand — see the fieldnotes headline key). */
.settled{display:inline-flex;align-items:baseline;gap:.5em;font-size:.7rem;vertical-align:middle}
.settled .dots{font-family:var(--mono);letter-spacing:.08em;color:var(--strand-fieldnotes)}
.settled .rung{font-family:var(--mono);font-size:.68rem;letter-spacing:.02em;color:var(--strand-fieldnotes);text-transform:lowercase}

.srcbox{
  margin:2.5rem 0 0;padding:1rem 1.2rem;border:1px solid var(--border);
  background:var(--surface);font-size:.72rem;font-family:var(--mono);color:var(--ink-soft);
}
.srcbox .tag{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);font-weight:600;display:block;margin-bottom:.4rem}
.srcbox code{white-space:nowrap;background:none;padding:0;font-size:inherit}

/* article sub-bar: strand name, "entry N of M", prev/next — sticky beneath the topbar,
   matching the mockup's fixed two-tier header */
.pagenav.pn-top{
  border-top:none;border-bottom:1px solid var(--line);background:var(--surface);
  position:sticky;top:2.3rem;z-index:15;margin:0;
}
.pagenav.pn-top .inner{
  max-width:var(--shell);margin:0 auto;padding:.55rem 1.75rem;
  display:flex;align-items:center;gap:1rem;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;
}
.pagenav.pn-top .pos{color:var(--faint)}
.pagenav.pn-top .links{margin-left:auto;display:flex;gap:1.25rem}
.pagenav.pn-top .links a{color:var(--ink-soft)}

.pagenav{
  max-width:var(--prose);margin:0 auto 3rem;padding:1.2rem 1.5rem 0;
  display:flex;justify-content:space-between;gap:1rem;border-top:1px solid var(--line);
  font-size:.92rem;
}
.pagenav[hidden]{display:none}
.pagenav a{display:block}
.pagenav .dir{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);display:block}
.pagenav .next{text-align:right;margin-left:auto}
.ghead{grid-column:1/-1;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze);margin:.9rem 0 -.1rem;font-weight:600}
.ghead:first-child{margin-top:0}

/* diagrams — dotted paper background matches the mockup's figure treatment */
.diag{
  margin:1.25rem 0;background:var(--bg);border:1px solid var(--border);padding:.9rem .9rem .6rem;overflow-x:auto;
  background-image:radial-gradient(var(--line) 1px,transparent 1px);background-size:9px 9px;
}
.diag svg{display:block;min-width:560px;width:100%}
.diag text{font-family:var(--mono);font-size:10.5px;fill:var(--ink)}
.diag .lab{fill:var(--muted);font-size:9.5px}
.diag .box{fill:var(--surface);stroke:var(--verd);stroke-width:1.1}
.diag .warn{fill:var(--surface);stroke:var(--terra-soft)}
.diag .soft{fill:var(--surface);stroke:var(--faint)}
.diag .gold{fill:var(--surface);stroke:var(--bronze)}
.diag .arrow{stroke:var(--faint);fill:none;stroke-width:1.1}
.diag .bar{fill:color-mix(in srgb,var(--bronze) 45%,transparent)}
.diagcap{font-family:var(--mono);font-size:.68rem;color:var(--muted);margin:.7rem .2rem .3rem;line-height:1.5}

/* ---------- hub ---------- */
.hero{
  max-width:var(--shell);margin:0 auto;padding:2rem 1.75rem 1.5rem;
  display:grid;grid-template-columns:1fr 19rem;gap:2rem;align-items:start;
  border-left:2px solid var(--ink);
}
.hero .text{padding-left:1.5rem}
.hero h1{font-family:var(--serif);letter-spacing:-.015em;max-width:30ch;margin:.2rem 0 .5rem;display:flex;flex-direction:column}
.hero h1 .h1-main{font-weight:600;font-size:2.3rem;line-height:1.05}
.hero h1 .h1-sub{font-weight:300;font-size:1.5rem;line-height:1.15;color:var(--bronze);margin-top:.2rem}
.hero .h1-quote{
  font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--ink-soft);
  max-width:58ch;margin:0 0 1.1rem;
}
.hero .lede{max-width:58ch;border-bottom:none;padding-bottom:0;margin-bottom:.6rem}
.hero .note{margin:0;font-size:.95rem;color:var(--ink-soft);max-width:58ch;font-style:italic}
.hero .over{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bronze);margin-bottom:.6rem;
}
.heroaside{
  border:1px solid var(--border);background:var(--surface);
  padding:1.1rem 1.2rem;font-family:var(--mono);font-size:.72rem;line-height:1.5;
  display:flex;flex-direction:column;gap:1.1rem;
}
.heroaside .hsection:last-child{margin-bottom:0}
.heroaside .htitle{
  letter-spacing:.16em;text-transform:uppercase;color:var(--bronze);font-size:.62rem;
  border-bottom:1px solid var(--border);padding-bottom:.5rem;margin-bottom:.75rem;
  list-style:none;cursor:pointer;user-select:none;display:flex;align-items:center;gap:.5rem;
}
.heroaside .htitle::-webkit-details-marker{display:none}
.heroaside .htitle::before{content:"▸";color:var(--faint);font-size:.85em;transition:transform .15s}
.heroaside .hsection[open] .htitle::before{transform:rotate(90deg)}
.heroaside .hsection:not([open]) .htitle{margin-bottom:0;border-bottom:none;padding-bottom:0}
.statusline{display:grid;grid-template-columns:auto 1fr;gap:.45rem .9rem}
.statusline .lbl{color:var(--faint)}
.heroaside .legend{font-family:var(--serif);font-size:.82rem;color:var(--muted);display:flex;flex-direction:column;gap:.55rem;line-height:1.45}
.heroaside .legend b{font-weight:600;display:block;margin-bottom:.15rem}
@media(max-width:760px){
  .hero{grid-template-columns:1fr}
}

/* "pick a way in" intro block */
.huborient{
  max-width:var(--shell);margin:0 auto;padding:1rem 1.75rem .5rem;
  border-top:2px solid var(--ink);
}
.huborient h3{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);margin:0 0 .5rem;font-weight:400;
}
.huborient .picks{display:flex;flex-direction:column;gap:.25rem;font-size:.95rem}

/* strands: a <details> per strand, collapsed by default. The summary is a single-line
   pill-chip header; opening it reveals the spine gutter + row-list body below. */
.strands{max-width:var(--shell);margin:0 auto;padding:0 1.75rem 3rem;display:flex;flex-direction:column;gap:1rem}
.strandsec{border-top:2px solid var(--ink);padding-top:.8rem}
.strandsec summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:.8rem;
  padding:.15rem 0;user-select:none;
}
.strandsec summary::-webkit-details-marker{display:none}
.strandsec summary::before{
  content:"▸";color:var(--faint);font-size:.75em;transition:transform .15s;flex:none;
}
.strandsec[open] summary::before{transform:rotate(90deg)}
.strandsec .chip{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  padding:.2em .6em;border-radius:4px;
}
.chip.fieldnotes{background:color-mix(in srgb,var(--strand-fieldnotes-text) 16%,transparent);color:var(--strand-fieldnotes-text)}
.chip.ideas{background:color-mix(in srgb,var(--strand-ideas) 16%,transparent);color:var(--strand-ideas)}
.chip.design{background:color-mix(in srgb,var(--strand-design) 16%,transparent);color:var(--strand-design)}
.chip.mechanism{background:color-mix(in srgb,var(--strand-mechanism) 16%,transparent);color:var(--strand-mechanism)}
.chip.practice{background:color-mix(in srgb,var(--strand-practice-text) 20%,transparent);color:var(--strand-practice-text)}
.strandsec summary h2{
  font-family:var(--serif);font-size:1.02rem;font-weight:600;margin:0;letter-spacing:-.005em;
  color:var(--bronze);border-top:none;padding-top:0;
}
.strandsec .scount{
  font-family:var(--mono);font-size:.7rem;color:var(--faint);white-space:nowrap;flex:none;margin-left:auto;
}
.strandbody{display:grid;grid-template-columns:3.25rem 1fr;gap:1.25rem;padding-top:1rem}
.spine{border-right:1px solid var(--border);display:flex;justify-content:flex-end;padding-right:.75rem}
.spine span{
  writing-mode:vertical-rl;font-family:var(--mono);font-size:.68rem;letter-spacing:.28em;
  text-transform:uppercase;font-weight:600;
}
.strandsec .sdesc{margin:0 0 .5rem;font-size:.86rem;color:var(--muted);max-width:62ch}

.rowlist{display:flex;flex-direction:column}
.rowlist a{
  display:grid;grid-template-columns:2.6rem 1fr 8.5rem;gap:1rem;align-items:start;
  padding:.5rem 0;border-top:1px solid var(--line);color:var(--ink);
}
.rowlist a:last-child{border-bottom:1px solid var(--line)}
.rowlist a:hover{text-decoration:none;background:color-mix(in srgb,var(--surface) 60%,transparent)}
.rowlist.wide a{grid-template-columns:2.6rem 1fr}
.rowlist.pipeline a{grid-template-columns:5.5rem 1fr 9rem}
.rowlist .idx{font-family:var(--mono);font-size:.72rem;color:var(--faint)}
.rowlist .idx.start{color:inherit}
.rowlist .topic{font-weight:500}
.rowlist .desc{display:block;color:var(--muted);font-size:.85rem;line-height:1.35;margin-top:.05rem}
.rowlist .stat{font-family:var(--mono);font-size:.7rem;text-align:right;line-height:1.5}
.rowlist .stat.itch,.rowlist .stat.hunch,.rowlist .stat.sketch,.rowlist .stat.draft,.rowlist .stat.call,.rowlist .stat.stand{color:var(--strand-fieldnotes-text)}
.rowlist .stat.shipped{color:var(--strand-mechanism)}
.rowlist .stat.partial{color:var(--strand-practice-text)}
.rowlist .stat.designed,.rowlist .stat.unbuilt{color:var(--faint)}

.repolink{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  border:1px solid var(--border);background:var(--surface);padding:.85rem 1.1rem;margin-bottom:.75rem;
  color:var(--ink);max-width:46rem;text-decoration:none;
}
.repolink:hover{text-decoration:none}
.repolink .lbl{font-weight:500}
.repolink .sub{display:block;font-size:.85rem;color:var(--muted);margin-top:.1rem}
.repolink .go{font-family:var(--mono);font-size:.72rem;color:var(--strand-practice-text);white-space:nowrap}

/* fieldnotes settledness key + ideas worked-example box, the two headline elements */
.settlekey{display:flex;flex-direction:column;gap:.4rem}
.settlekey .row{display:flex;align-items:baseline;gap:.7rem;font-size:.83rem}
.settlekey .rung{font-family:var(--mono);width:4.4em;flex:none;color:var(--strand-fieldnotes-text);font-size:.72rem}
.settlekey .dots{flex:none;width:5.6em;font-family:var(--mono);letter-spacing:.08em;color:var(--strand-fieldnotes-text)}
.settlekey .means{color:var(--muted)}

.workedbox{border:1px solid var(--border);background:var(--surface);padding:1rem 1.2rem;margin:0 0 1rem;max-width:46rem}
.workedbox pre{margin:0;font-family:var(--mono);font-size:.74rem;line-height:1.6;color:var(--muted);white-space:pre-wrap;background:none;padding:0;border:none;color:var(--muted)}
.workedbox .conclusion{font-family:var(--mono);font-size:.68rem;color:var(--bronze);margin-top:.7rem}

/* section strand indicator, used on every subpage and in each hub cardgroup summary */
.strand{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  display:inline-block;padding:0;margin-right:.5rem;
}
.strand.ideas{color:var(--strand-ideas)}
.strand.fieldnotes{color:var(--strand-fieldnotes-text)}
.strand.design{color:var(--strand-design)}
.strand.mechanism{color:var(--strand-mechanism)}
.strand.practice{color:var(--strand-practice-text)}

/* headline element — first item inside each hub cardgroup's .cards grid, spanning full width */
.headline{
  grid-column:1/-1;margin:0 0 .3rem;padding:1.1rem 1.2rem;border:1px solid var(--line);
  border-radius:10px;background:var(--surface);
}
.headline .diag{margin:.4rem 0 0}
.headline .diagcap{margin:.5rem .1rem 0}
.groupnote{grid-column:1/-1;font-size:.85rem;color:var(--muted);margin:-.3rem 0 .2rem;line-height:1.5}

/* nine-segment pipeline status bar — a flat coloured strip, one segment per stage */
/* pipeline node diagram: one box per generation stage, drawn into the hub's Mechanism
   headline. Reuses .diag's dotted-paper figure treatment; stage boxes take the same
   shipped/partial/designed vocabulary as the rowlist .stat classes beside them. */
.pipediag{margin:0}
.pipediag svg{min-width:900px}
.pipediag .stage{stroke-width:1.3}
.pipediag .stage-shipped{fill:color-mix(in srgb,var(--strand-mechanism) 16%,var(--surface));stroke:var(--strand-mechanism)}
.pipediag .stage-partial{fill:color-mix(in srgb,var(--strand-practice-text) 20%,var(--surface));stroke:var(--strand-practice-text)}
.pipediag .stage-designed{fill:var(--surface);stroke:var(--faint)}
.pipediag .arrow{stroke:var(--faint);fill:none;stroke-width:1.1}
.pipediag .cad{fill:var(--muted);font-size:9.5px}

footer{
  background:#23201b;color:#a89e8c;border-top:1px solid var(--border);
}
footer .inner{
  max-width:var(--shell);margin:0 auto;padding:1.5rem 1.75rem 2.5rem;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;
  display:flex;gap:1.5rem;flex-wrap:wrap;
}
footer .inner .push{margin-left:auto}
@media(max-width:600px){
  h1{font-size:1.85rem}
  .hero h1{font-size:2rem}
}