/* Gilt — the alloy at value. Generated by src/build.mjs; edit src/brand.mjs. */
:root {
  --ground: #F4F0E8;
  --ink: #0F0E0C;
  --ink-2: rgba(15, 14, 12, 0.72);
  --bronze: #A08347;
  --bronze-text: #6B5628;
  --rule: rgba(15, 14, 12, 0.12);
}
:root[data-theme='dark'] {
  --ground: #0F0E0C;
  --ink: #F4F0E8;
  --ink-2: #C8BEA8;
  --bronze: #BFA05C;
  --bronze-text: #BFA05C;
  --rule: rgba(244, 240, 232, 0.12);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --ground: #0F0E0C;
    --ink: #F4F0E8;
    --ink-2: #C8BEA8;
    --bronze: #BFA05C;
    --bronze-text: #BFA05C;
    --rule: rgba(244, 240, 232, 0.12);
  }
}

/* Shared across all three Gord properties. The colour block above this one
   is generated per property by src/build.mjs from src/brand.mjs — the accent
   is the only thing that differs, so there is one stylesheet, not three. */

/* gord.holdings — "Built to Endure"
   Four values. Never more. Palette per design brief v1.0 (July 2026).
   --accent-text darkens bronze for small text in light mode only, to hold
   WCAG AA contrast on parchment; rules and large accents keep true bronze. */

@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('./fonts/eb-garamond-normal-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/eb-garamond-italic-400-latin.woff2') format('woff2');
}




:root {
  --serif: 'EB Garamond', Garamond, Georgia, serif;
  --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace;
  --pad-x: clamp(24px, 8vw, 120px);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.8;
  transition: background 0.4s, color 0.4s;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--bronze); }

/* ---- Header ---- */

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px 32px;
  padding: 40px var(--pad-x) 0;
  /* The positioning context for the section panels, which are full-bleed:
     they span the header rather than hanging off the item that opened them. */
  position: relative;
}

.wordmark {
  font-family: var(--serif);
  font-size: 19px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px clamp(16px, 2.5vw, 36px);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.site-nav a { padding-bottom: 4px; border-bottom: 1px solid transparent; }
.site-nav a[aria-current='page'] { color: var(--bronze-text); border-bottom-color: var(--bronze); }

/* ---- The section panels ----
 *
 * Opened by :hover and :focus-within. No script, on purpose: the top-level
 * item is a link to the section page, so it navigates whether or not anything
 * opens, and the second-tier bar inside the section is the durable path for
 * touch and for a reader with scripting off.
 *
 * Not one box. Each panel is a lead, three named columns and a standing
 * feature — because "The argument", "The four functions" and "Where it is
 * going" are three different questions, and eleven links in a single column is
 * a dropdown rather than a way in.
 */
.navitem { position: static; }

.mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 60;
  background: var(--paper);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--ink);
  box-shadow: 0 30px 60px -30px rgba(20, 18, 14, .34);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
.navitem:hover .mega,
.navitem:focus-within .mega {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity .16s ease, transform .16s ease, visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .mega { transition: none; transform: none; }
  .navitem:hover .mega, .navitem:focus-within .mega { transition: none; }
}

.mega-in {
  display: grid;
  gap: clamp(28px, 3.4vw, 56px);
  padding: clamp(34px, 3.6vw, 56px) var(--pad-x) clamp(38px, 4vw, 60px);
  /* The panel sits inside .site-nav, which is mono, uppercase and letter-spaced
     for a row of four words. Everything below is prose and has to say so, or a
     lead paragraph renders as a wall of tracked-out monospace. */
  font-family: var(--sans);
  text-transform: none;
  letter-spacing: normal;
}
@media (min-width: 940px) { .mega-in { grid-template-columns: 1fr 2.3fr 1.05fr; } }

.mega-lead .k {
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--bronze); display: block; margin-bottom: 14px;
}
.mega-lead h3 { font-family: var(--serif); font-size: clamp(26px, 2.6vw, 34px); font-weight: 500; margin: 0 0 12px; line-height: 1.1; }
.mega-lead p { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); max-width: 30ch; margin: 0; }

.mega-cols { display: grid; gap: 26px 34px; }
@media (min-width: 620px) { .mega-cols { grid-template-columns: repeat(3, 1fr); } }

.mega-col { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.mega-col .hd {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--bronze-text);
  padding-bottom: 9px; border-bottom: 1px solid var(--rule); width: 100%;
}
.mega-col a {
  font-family: var(--sans); font-size: 15px; letter-spacing: normal;
  text-transform: none; color: var(--ink); line-height: 1.35;
  border-bottom: 1px solid transparent; padding-bottom: 1px;
}
.mega-col a:hover { color: var(--bronze-text); border-bottom-color: var(--bronze); }

.mega-feat { border-left: 2px solid var(--bronze); padding-left: 22px; align-self: start; }
.mega-feat .k {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--bronze); display: block; margin-bottom: 11px;
}
.mega-feat h4 { font-family: var(--serif); font-size: 20px; font-weight: 500; margin: 0 0 9px; line-height: 1.2; }
.mega-feat h4 a { color: var(--ink); }
.mega-feat h4 a:hover { color: var(--bronze-text); }
.mega-feat p { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); margin: 0; }

.theme-toggle {
  color: var(--bronze-text);
  background: none;
  border: none;
  padding: 0 0 4px;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.theme-toggle:hover { color: var(--bronze); }

/* ---- Shared page scaffolding ---- */

main { flex: 1; padding: 96px var(--pad-x) 120px; }

.measure { max-width: 900px; margin: 0 auto; }

.kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--bronze-text);
  margin-bottom: 20px;
}

.page-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 5vw, 48px);
  line-height: 1.2;
}

.prose {
  max-width: 58ch;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink-2);
}
.prose p { margin: 0; text-wrap: pretty; }
.prose p + p { margin-top: 28px; }

.rule { height: 1px; background: var(--rule); border: none; margin: 0; }

/* ---- Home ---- */

.hero {
  min-height: 78vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 28px;
  padding: 0;
}

.hero-kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--bronze-text);
}

.hero h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 8vw, 72px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.15;
  text-wrap: balance;
}

.hero-mark { width: 48px; height: 1px; background: var(--bronze); }

.tagline {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(21px, 3vw, 26px);
  color: var(--ink-2);
}

.home-body { max-width: 58ch; margin: 0 auto; padding-top: 48px; }
.home-body .rule { margin: 56px 0; }

.contact-cta {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.contact-cta a { color: var(--bronze-text); }
.contact-cta a:hover { color: var(--bronze); }

/* ---- The Principal ---- */

.principal h1 { margin: 0 0 56px; }

.pull-quote {
  margin: 0;
  max-width: 26ch;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(24px, 3.5vw, 30px);
  line-height: 1.45;
  color: var(--ink);
  text-wrap: balance;
}

.principal .rule { max-width: 58ch; margin: 64px 0; }

.portrait { width: 100%; max-height: 560px; object-fit: cover; margin: 0 0 64px; display: block; }

/* ---- Focus ---- */

.focus h1 { margin: 0 0 80px; max-width: 20ch; }

.discipline {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 40px;
  padding: 48px 0;
  border-top: 1px solid var(--rule);
}

.discipline-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--bronze-text);
  padding-top: 8px;
}

.discipline h2 {
  margin: 0 0 16px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, 3.5vw, 30px);
}

.discipline p {
  margin: 0;
  max-width: 58ch;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* ---- Portfolio ---- */

.portfolio h1 { margin: 0 0 24px; }
.portfolio-intro { margin: 0 0 72px; }

.holding {
  display: grid;
  grid-template-columns: 1fr 220px 110px;
  gap: 32px;
  align-items: baseline;
  padding: 26px 0;
  border-top: 1px solid var(--rule);
}

.holding-name { font-family: var(--serif); font-size: 22px; }

.holding-context {
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-2);
  margin-top: 6px;
  max-width: 52ch;
}

.holding-sector { font-size: 13px; color: var(--ink-2); }

.holding-status {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bronze-text);
  text-align: right;
}
.holding-status.realised { color: var(--ink-2); }

/* ---- Contact ---- */

.contact-main {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

h1.contact-statement, .contact-statement {
  margin: 0 0 56px;
  font-weight: 400;
  max-width: 32ch;
  font-family: var(--serif);
  font-size: clamp(26px, 4vw, 34px);
  line-height: 1.4;
  text-wrap: balance;
}

.contact-main .rule { max-width: 58ch; margin-bottom: 40px; }

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.1em;
}
.contact-details a { color: var(--bronze-text); }
.contact-details a:hover { color: var(--bronze); }

.contact-locations {
  color: var(--ink-2);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ---- Footer ---- */

.site-footer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 32px var(--pad-x) 40px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* ---- Small screens ---- */

@media (max-width: 720px) {
  main { padding-top: 64px; padding-bottom: 80px; }
  .discipline { grid-template-columns: 1fr; gap: 12px; padding: 36px 0; }
  .discipline-num { padding-top: 0; }
  .holding { grid-template-columns: 1fr; gap: 8px; padding: 22px 0; }
  .holding-status { text-align: left; }
  .focus h1 { margin-bottom: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
}

/* The ring — group links, footer and portfolio */
.site-footer { flex-wrap: wrap; }
.footer-ring {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-bottom: 14px;
}
.footer-ring a { color: var(--ink-2); }
.footer-ring a:hover { color: var(--bronze); }
.group-ring { margin-top: 24px; }
.group-ring p { margin: 0 0 12px; }
.group-ring a { color: var(--bronze-text); }

/* ---- The estate map, figures, seats, answers ---- */

.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 32px;
  margin: 56px 0;
}
.figure { display: flex; flex-direction: column; gap: 6px; }
.figure-n { font-family: var(--serif); font-size: clamp(34px, 5vw, 46px); line-height: 1; }
.figure-l {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-2);
}

.function-grid { margin-top: 48px; }
.function-grid .discipline:first-child { border-top: none; }
.discipline h2 a { border-bottom: 1px solid var(--rule); }
.discipline h2 a:hover { border-bottom-color: var(--bronze); }

.section-head {
  margin: 48px 0 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; font-weight: 400; color: var(--bronze-text);
}

.vertical { margin: 56px 0; }
.vertical-name {
  margin: 0 0 8px;
  font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 3vw, 27px);
}

.prop-list { list-style: none; margin: 0; padding: 0; }
.prop {
  display: grid;
  grid-template-columns: 220px 1fr 90px;
  gap: 12px 32px;
  align-items: baseline;
  padding: 20px 0;
  border-top: 1px solid var(--rule);
}
.prop-name { font-family: var(--serif); font-size: 19px; }
.prop-line { font-size: 13px; line-height: 1.7; color: var(--ink-2); text-wrap: pretty; }
.prop-unbuilt { color: var(--ink-2); }
.prop-status {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; text-align: right; color: var(--ink-2);
}
.prop-status.is-live { color: var(--bronze-text); }

/* The delivery board. Two columns rather than three: the title and, beside it,
   the evidence for every rung it has earned. The proof is the reason the page
   exists, so it is set at the same weight as the estate register's status chip
   rather than tucked into a tooltip. */
.deliverable-list { list-style: none; margin: 0; padding: 0; }
.deliverable {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 12px 32px;
  align-items: baseline;
  padding: 20px 0;
  border-top: 1px solid var(--rule);
}
.deliverable-name { font-family: var(--serif); font-size: 19px; text-wrap: pretty; }
.deliverable-proof { list-style: none; margin: 0; padding: 0; }
.deliverable-proof li {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-2); line-height: 2;
}
.deliverable-proof strong { color: var(--bronze-text); font-weight: 400; }

.seat-list { list-style: none; margin: 0; padding: 0; }
.seat {
  display: grid;
  grid-template-columns: 160px 1fr 1fr;
  gap: 10px 32px;
  align-items: baseline;
  padding: 22px 0;
  border-top: 1px solid var(--rule);
}
.seat-name {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--bronze-text);
}
.seat-prop { font-family: var(--serif); font-size: 19px; }
.seat-who { font-size: 13px; color: var(--ink-2); }
.seat-who em { font-style: italic; }

.answer { padding: 40px 0; border-top: 1px solid var(--rule); }
.answer h2 {
  margin: 0 0 14px;
  font-family: var(--serif); font-weight: 400; font-size: clamp(21px, 3vw, 26px);
}
.answer p { margin: 0; max-width: 62ch; font-size: 15px; line-height: 1.8; color: var(--ink-2); text-wrap: pretty; }

.mono { font-family: var(--mono); font-size: 0.88em; }

.footer-ring em { font-style: normal; opacity: 0.6; }

@media (max-width: 860px) {
  .prop { grid-template-columns: 1fr; gap: 4px; padding: 18px 0; }
  .deliverable { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; }
  .prop-status { text-align: left; }
  .seat { grid-template-columns: 1fr; gap: 4px; }
}

/* ---- Second-tier nav ---- */
/* The section index at the foot of a section landing page. It replaced a
   second-tier bar that rendered the same list under the header of every page
   in the section; this is content, on the one page a reader lands on. */
.section-index { padding: 0 var(--pad-x) 96px; }
/* A concept's refusal. Set apart because it is the load-bearing claim on the
   page: what the office declines to do is the falsifiable half. */
.refuses { border-left: 2px solid var(--bronze); padding-left: 22px; margin: 4px 0 8px; }
.refuses p { font-family: var(--serif); font-size: 19px; line-height: 1.5; margin: 0; max-width: 54ch; }
.section-index .section-head { margin-bottom: 22px; }

/* ---- Footer as site map ---- */
.readfurther { display: grid; gap: 26px 34px; margin: 4px 0 8px; }
@media (min-width: 700px) { .readfurther { grid-template-columns: repeat(3, 1fr); } }
.rf-col { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }
.rf-col .hd {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--bronze-text);
  padding-bottom: 9px; border-bottom: 1px solid var(--rule); width: 100%;
}
.rf-col a { font-size: 14.5px; line-height: 1.4; color: var(--ink); border-bottom: 1px solid transparent; }
.rf-col a:hover { color: var(--bronze-text); border-bottom-color: var(--bronze); }

.site-footer { display: block; text-transform: none; letter-spacing: normal; font-size: 13px; }
/* Name to the property's page here; the small mark to the property itself. */
.fprop { display: inline-flex; align-items: baseline; gap: 6px; }
.fout { color: var(--ink-3, var(--ink-2)); font-size: 11px; opacity: .55; }
.fout:hover { color: var(--bronze); opacity: 1; }
.fgrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 34px clamp(20px, 3vw, 44px); padding-bottom: 40px;
}
.fcol { display: flex; flex-direction: column; gap: 7px; }
.fcol h2 {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--bronze-text); font-weight: 400; margin: 0 0 5px;
}
.fcol a { color: var(--ink-2); font-size: 13px; }
.fcol a:hover { color: var(--bronze); }
/* A heading that is also a link keeps heading type: .fcol a would otherwise
   drop it to 13px body size and it would stop reading as a column head. */
.fcol h2 a { font-size: inherit; letter-spacing: inherit; color: inherit; }
.fcol h2 a:hover { color: var(--ink); }
.fcol .unbuilt { color: var(--ink-2); opacity: .55; font-size: 13px; }
.fcol .unbuilt em { font-style: normal; font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
.fbase {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px;
  padding-top: 22px; border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2);
}
.faccount a { color: var(--bronze-text); }

/* ---- Thesis ---- */
.thesis-line {
  font-family: var(--serif); font-size: clamp(25px, 4.2vw, 38px); line-height: 1.28;
  margin: 0 0 34px; max-width: 20ch; text-wrap: balance;
}
.prose.lead { font-size: 17px; color: var(--ink); max-width: 56ch; }
.move { display: grid; grid-template-columns: 128px 1fr; gap: 20px 44px; padding: 46px 0; border-top: 1px solid var(--rule); }
.move:first-of-type { border-top: none; }
.move-n {
  font-family: var(--mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--bronze-text); padding-top: 11px;
}
.move h2 { margin: 0 0 16px; font-family: var(--serif); font-weight: 400; font-size: clamp(23px, 3.3vw, 30px); max-width: 24ch; }
.move p { margin: 0; max-width: 60ch; font-size: 15px; line-height: 1.8; color: var(--ink-2); text-wrap: pretty; }
.move p + p { margin-top: 20px; }

/* ---- The arc ---- */
.arc { padding: 48px 0 8px; }
.arc-head h2 { margin: 0 0 10px; font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 3.4vw, 32px); }
.arc-head p { margin: 0 0 12px; max-width: 56ch; font-size: 15px; color: var(--ink-2); font-family: var(--serif); font-style: italic; font-size: 18px; }
.stages { list-style: none; margin: 30px 0 0; padding: 0; }
.stage { display: grid; grid-template-columns: 62px 1fr; gap: 26px; }
.stage-rail { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.stage-n { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--bronze-text); padding-top: 5px; }
.stage-line { flex: 1; width: 1px; background: var(--rule); min-height: 22px; }
.stage:last-child .stage-line { background: transparent; }
.stage-body { padding-bottom: 34px; }
.stage-body h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 22px; }
.stage-t { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); margin: 5px 0 12px; }
.stage-body p { margin: 0; max-width: 60ch; font-size: 14.5px; line-height: 1.78; color: var(--ink-2); text-wrap: pretty; }
.arc-close {
  margin: 8px 0 0; max-width: 62ch; font-family: var(--serif); font-size: 18px; line-height: 1.62;
  color: var(--ink); padding-left: 22px; border-left: 2px solid var(--bronze); text-wrap: pretty;
}
.cohesion { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin: 34px 0 30px; }
.coh { background: var(--ground); padding: 22px 20px 24px; }
.coh h3 { margin: 0 0 7px; font-family: var(--serif); font-weight: 400; font-size: 19px; }
.coh p { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--ink-2); text-wrap: pretty; }

/* ---- A property's page ---- */
.factbar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 22px;
  margin: 34px 0 40px; padding: 22px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.factbar > div { display: flex; flex-direction: column; gap: 5px; }
.fb-l { font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); }
.fb-v { font-family: var(--serif); font-size: 18px; }
.fb-v.mono { font-family: var(--mono); font-size: 13px; }
.supplies { margin: 26px 0 10px; padding-left: 22px; border-left: 2px solid var(--bronze); }
.supplies h3, .wire h3 {
  margin: 0 0 6px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--bronze-text); font-weight: 400;
}
.supplies p { margin: 0; font-family: var(--serif); font-size: 19px; line-height: 1.5; max-width: 48ch; }
.wires { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 44px; margin-top: 34px; }
.wire p { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.85; }
.wire p.none { color: var(--ink-2); opacity: .6; font-style: italic; }
/* The vertical pages reuse .wires; their h3 needs the same label treatment the
   property pages get, and the index cards need a stat line under the summary. */
.wire h3 { margin: 0 0 7px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--bronze-text); font-weight: 400; }
.wire a { color: var(--bronze-text); }
.coh-count { margin: 9px 0 0 !important; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); opacity: .75; }
.coh h3 a { color: inherit; }
.coh h3 a:hover { color: var(--bronze-text); }
.prop-convened {
  font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--bronze-text); border: 1px solid var(--rule); border-radius: 2px;
  padding: 2px 7px; margin-left: 7px; white-space: nowrap;
}
.prop-name .ext { font-size: 12px; color: var(--ink-2); padding-left: 3px; }
.prop-name .ext:hover { color: var(--bronze); }

@media (max-width: 760px) {
  .move, .wires { grid-template-columns: 1fr; gap: 10px; }
  .move-n { padding-top: 0; }
  .stage { grid-template-columns: 40px 1fr; gap: 16px; }
}

/* ---- The front door: criteria, ladder, lanes ---- */
.crit{list-style:none;margin:26px 0 0;padding:0}
.crit li{padding:24px 0;border-top:1px solid var(--rule)}
.crit h3{margin:0 0 7px;font-family:var(--serif);font-weight:400;font-size:20px;max-width:36ch}
.crit p{margin:0;font-size:14.5px;line-height:1.78;color:var(--ink-2);max-width:62ch;text-wrap:pretty}
.crit.no h3{color:var(--ink-2)}
.crit.no li{opacity:.92}

.rungs{list-style:none;margin:30px 0 0;padding:0;counter-reset:none}
.rung{display:grid;grid-template-columns:112px 1fr 1fr;gap:16px 36px;padding:26px 0;border-top:1px solid var(--rule);align-items:start}
.rung:last-child{border-bottom:1px solid var(--rule)}
.rung-n{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.rung-n span{display:block;margin-top:5px;color:var(--bronze-text)}
.rung-l{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);opacity:.7;display:block;margin-bottom:7px}
.rung-did h2{margin:0 0 8px;font-family:var(--serif);font-weight:400;font-size:20px;max-width:30ch}
.rung-did p,.rung-owed p{margin:0;font-size:14px;line-height:1.75;color:var(--ink-2);text-wrap:pretty}
.rung-cost,.rung-sla{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;display:block;margin-top:11px}
.rung-cost{color:var(--ink-2);opacity:.75}
.rung-sla{color:var(--bronze-text)}
.rung.r3{border-left:2px solid var(--bronze);padding-left:16px}
.rung.r0 .rung-sla{color:var(--ink-2);opacity:.75}

.caution{border-left:2px solid var(--bronze);padding-left:20px;max-width:64ch}
.caution p{color:var(--ink)}

.lanes{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(236px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.lanes li{background:var(--ground);padding:22px 20px 24px}
.lanes h3{margin:0 0 6px;font-family:var(--serif);font-weight:400;font-size:19px}
.lanes .who{margin:0;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);opacity:.75}
.lanes .q{margin:12px 0 0;font-family:var(--serif);font-style:italic;font-size:15.5px;color:var(--ink-2);text-wrap:pretty}

@media(max-width:820px){
  .rung{grid-template-columns:1fr;gap:8px}
  .rung.r3{padding-left:12px}
}

/* ---- The name: four letters, three words each ---- */
.letter{display:grid;grid-template-columns:128px 1fr;gap:20px 44px;padding:46px 0;border-top:1px solid var(--rule)}
.letter:first-of-type{border-top:none}
.letter-rail{padding-top:4px}
.letter-g{font-family:var(--serif);font-weight:400;font-size:76px;line-height:1;color:var(--bronze-text);display:block}
.letter-theme{margin:0 0 26px;font-family:var(--serif);font-style:italic;font-size:18px;color:var(--ink-2);max-width:52ch}
.word{padding:0 0 26px}
.word:last-child{padding-bottom:0}
.word h2{margin:0 0 8px;font-family:var(--serif);font-weight:400;font-size:clamp(21px,2.8vw,26px)}
.word-gloss{margin:0;max-width:62ch;font-size:15.5px;line-height:1.78;color:var(--ink);text-wrap:pretty}
.word-practice{margin:10px 0 0;max-width:62ch;font-size:13.5px;line-height:1.75;color:var(--ink-2);text-wrap:pretty}

.constructions{list-style:none;margin:30px 0 0;padding:0}
.constructions li{padding:20px 0;border-top:1px solid var(--rule)}
.constructions li:first-child{border-top:none}
.cx-line{display:block;font-family:var(--serif);font-size:clamp(19px,2.6vw,24px);color:var(--ink);text-wrap:balance}
.cx-reads{display:block;margin-top:8px;font-size:14px;line-height:1.7;color:var(--ink-2);max-width:62ch;text-wrap:pretty}
.constructions .is-shorthand{border-left:2px solid var(--bronze);padding-left:18px}

/* ---- The roadmap: gates, and how far each one is ---- */
.gate-needs{color:var(--ink-2);font-size:14px;line-height:1.75;text-wrap:pretty}
.gate-state{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;vertical-align:middle;margin-left:10px;padding:3px 8px;border:1px solid var(--rule);border-radius:2px;color:var(--ink-2);white-space:nowrap}
.gate-state.is-met{color:var(--bronze-text);border-color:var(--bronze)}
.gate-state.is-unmet{opacity:.7}
.as-at{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);opacity:.8;max-width:64ch;line-height:2}

@media(max-width:820px){
  .letter{grid-template-columns:1fr;gap:6px;padding:34px 0}
  .letter-g{font-size:56px}
  .gate-state{display:inline-block;margin:6px 0 0}
}

/* bolt/1 — the hunt. One column of rows, each a property and the word it hides.
   Monospace for the inputs because a shard is a token to be transcribed
   exactly, and a proportional font makes O and 0 an argument. */
.hunt { display: grid; gap: 2px; margin: 28px 0 0; }
.hunt-row { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) 11rem; gap: 12px;
  align-items: center; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.hunt-row__n { font-family: var(--mono); font-size: 11px; opacity: .4; }
.hunt-row__site { font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
.hunt-row__in { font-family: var(--mono); font-size: 13px; letter-spacing: .12em;
  text-transform: uppercase; padding: 9px 10px; min-height: 44px; width: 100%;
  color: var(--ink); background: transparent; border: 1px solid var(--rule); border-radius: 3px; }
.hunt-row__in:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.hunt-go { margin-top: 22px; font-family: var(--mono); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; padding: 13px 22px; min-height: 44px; cursor: pointer;
  color: var(--ground); background: var(--accent); border: 0; border-radius: 3px; }
.hunt-out { margin-top: 18px; font-size: 14px; line-height: 1.7; min-height: 1.7em; }
.hunt-out.is-found { color: var(--accent); }
.hunt-out.is-miss { opacity: .65; }
.hunt-fine { margin-top: 18px; font-size: 12px; line-height: 1.7; opacity: .55; }
.hunt-fine code, .hunt-main code { font-family: var(--mono); font-size: .92em; }
@media (max-width: 640px) {
  .hunt-row { grid-template-columns: 1.8rem minmax(0, 1fr); grid-template-areas: "n s" ". i"; }
  .hunt-row__n { grid-area: n; } .hunt-row__site { grid-area: s; } .hunt-row__in { grid-area: i; }
}
.hunt-tiers { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 18px 0 0; font-size: 14px; }
.hunt-tiers dt { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; opacity: .55; }
.hunt-tiers dd { margin: 0; }