/* ============================================================================
   XYZ BIM — interior page layer
   v1 · press kit, site map and error pages.

   Loads AFTER brand.css and chrome.css. chrome.css dresses the home page;
   this file dresses the standing pages that are not the home page. It binds
   tokens only — no raw hex, no font request, nothing a site could not restyle
   by re-binding a token.

   Adding a file under /v1/ is not a breaking change; changing what an existing
   token means is, and becomes /v2/.
   ========================================================================= */

.page{
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(32px, 6vw, 96px) var(--pad) 0;
}

.page > section{
  padding-block: clamp(28px, 5vw, 64px);
  border-top: 1px solid var(--rule-2);
}
.page > section:first-child{ border-top: 0; padding-top: 0; }

.page h1{
  font-size: clamp(30px, 5.2vw, 64px);
  line-height: 1.02;
  letter-spacing: -.02em;
  margin-bottom: .4em;
}
.page h2{
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.12;
  letter-spacing: -.01em;
  margin-bottom: .6em;
}
.page h3{ font-size: 16px; line-height: 1.25; margin-bottom: .4em; }

.page p{ margin: 0 0 1em; max-width: 68ch; color: var(--ink-2); }
.page .lede{
  font-size: clamp(16px, 1.7vw, 21px);
  line-height: 1.45;
  color: var(--ink);
  max-width: 60ch;
}
.page a:not(.btn){ color: inherit; text-decoration: underline; text-underline-offset: .18em;
  text-decoration-color: var(--rule); transition: text-decoration-color var(--tr-fast); }
.page a:not(.btn):hover{ text-decoration-color: var(--accent); }

.page__meta{ display: flex; gap: 18px; flex-wrap: wrap; align-items: baseline; margin-bottom: 8px; }

/* ------------------------------------------------------------- press kit -- */

.kit__two{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--grid-gap);
  align-items: start;
}

.kit__panel{
  border: 1px solid var(--rule);
  background: var(--bg-2);
  padding: clamp(18px, 2.4vw, 32px);
}

/* The mark, shown on its own ground. */
.kit__markbox{
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--rule);
  background: var(--bg);
  color: var(--ink);
  padding: 12%;
}
.kit__markbox--invert{ background: var(--accent-2); color: var(--bg); }
[data-theme="dark"] .kit__markbox--invert{ background: var(--ink); color: var(--bg); }
.kit__markbox svg{ width: 100%; height: auto; max-width: 190px; }

.kit__caption{
  display: flex; justify-content: space-between; gap: 12px;
  padding-top: 10px; align-items: baseline;
}

/* Clear-space diagram: the padding IS the rule being described. */
.kit__clearspace{
  display: grid; place-items: center;
  border: 1px solid var(--rule);
  background: var(--bg);
  padding: clamp(20px, 4vw, 48px);
}
/* The diagram states the rule by obeying it: the hatched band is exactly half
   the mark's height on every side, and the dashed line sits on the mark's
   bounding box.

   --mark drives all of it, in pixels. Percentage padding would be the obvious
   way to write this and is a trap: percentages resolve against the CONTAINING
   BLOCK's inline size, not the element's own, so `padding: 25%` on a 340px box
   inside a 900px column resolves to 224px a side - wider than the box, leaving
   a zero-width content area and an invisible mark. */
.kit__clearspace-inner{
  --mark: clamp(96px, 18vw, 160px);
  display: grid; place-items: center;
  width: calc(var(--mark) * 2);
  height: calc(var(--mark) * 2);
  padding: calc(var(--mark) / 2);
  background:
    repeating-linear-gradient(45deg,
      var(--rule-2) 0 6px, transparent 6px 12px);
  outline: 1px dashed var(--rule);
  outline-offset: calc(var(--mark) / -2);
}
.kit__clearspace-inner svg{
  width: var(--mark);
  height: auto;
  color: var(--ink);
}

/* Swatches. The hex is text in the HTML; the colour is a token. */
.kit__swatches{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.kit__swatch{
  border: 1px solid var(--rule);
  background: var(--bg);
  text-align: left;
  padding: 0;
  display: block;
  width: 100%;
  cursor: copy;
  transition: border-color var(--tr-fast);
}
.kit__swatch:hover{ border-color: var(--accent); }
.kit__swatch:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
/* display:block is load-bearing - .kit__chip is a <span>, and height does
   nothing on an inline box, so the colour never appears. */
.kit__chip{ display: block; height: 76px; border-bottom: 1px solid var(--rule-2); }
.kit__swatch dl{ margin: 0; padding: 9px 11px 11px; }
.kit__swatch dt{ font-size: 12px; color: var(--ink); margin-bottom: 3px; }
.kit__swatch dd{ margin: 0; font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); }
.kit__swatch[data-copied="1"] dd::after{ content: " ✓"; color: var(--accent); }

/* Type specimens. */
.kit__specimen{ border-top: 1px solid var(--rule-2); padding: 16px 0; }
.kit__specimen:first-of-type{ border-top: 0; }
.kit__specimen p{ margin: 0; color: var(--ink); }
.kit__spec-sans{ font-family: var(--f-sans); font-size: clamp(20px, 3vw, 34px); line-height: 1.15; }
.kit__spec-mono{ font-family: var(--f-mono); font-size: clamp(13px, 1.5vw, 17px); letter-spacing: .01em; }
.kit__spec-serif{ font-family: "Fraunces", Georgia, serif; font-size: clamp(20px, 3vw, 34px); line-height: 1.15; }

/* Do / don't. Colour is never the only signal — each item carries a glyph. */
.kit__rules{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--grid-gap); }
.kit__rules ul{ list-style: none; margin: 0; padding: 0; }
.kit__rules li{
  display: grid; grid-template-columns: 1.4em 1fr; gap: 8px;
  padding: 9px 0; border-top: 1px solid var(--rule-2); color: var(--ink-2);
}
.kit__rules li::before{ font-family: var(--f-mono); font-size: 13px; line-height: 1.5; }
.kit__do li::before{ content: "✓"; color: var(--accent); }
.kit__dont li::before{ content: "✕"; color: var(--ink-3); }

/* Name examples. */
.kit__names{ display: flex; gap: 10px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.kit__names li{
  font-family: var(--f-mono); font-size: 13px;
  border: 1px solid var(--rule); padding: 6px 10px;
}
.kit__names--wrong li{ color: var(--ink-3); text-decoration: line-through; }

/* Boilerplate blocks, meant to be selected and pasted. */
.kit__quote{
  border-left: 2px solid var(--accent);
  padding: 2px 0 2px 16px;
  margin: 0 0 18px;
}
.kit__quote p{ color: var(--ink); }

/* Legal table. */
.kit__legal{ margin: 0; display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 0; }
.kit__legal dt{
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-3); padding: 10px 0; border-top: 1px solid var(--rule-2);
}
.kit__legal dd{ margin: 0; padding: 10px 0; border-top: 1px solid var(--rule-2); color: var(--ink); }

/* Downloads. */
.kit__dl{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.kit__dlcard{
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  border: 1px solid var(--rule); padding: 15px 17px; text-decoration: none !important;
  transition: border-color var(--tr-fast), background var(--tr-fast);
}
.kit__dlcard:hover{ border-color: var(--accent); background: var(--bg-2); }
.kit__dlcard strong{ font-weight: 500; font-size: 14px; display: block; }
.kit__dlcard span{ font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); }

/* ------------------------------------------------------------- site map --- */

/* The tree is narrow and tall - about forty leaves. Fitting it into a
   fixed-height viewport scaled it to a third of legible size, so instead the
   diagram takes the full width it needs and the PAGE scrolls. That also means
   no pan/zoom JavaScript, no wheel handler fighting the page scroll, and a
   diagram that prints. min-width keeps it readable on a phone, where the
   wrapper scrolls sideways instead. */
.smap__wrap{
  border: 1px solid var(--rule);
  background: var(--bg-2);
  position: relative;
  overflow-x: auto;
  padding: 8px;
}
/* The layout is computed in CSS pixels, so capping the width at the diagram's
   natural size renders it 1:1 - node text lands at the 12px it was designed
   for instead of being stretched to 23px on a wide monitor. Below that width
   it scales down, and min-width hands the wrapper a sideways scroll on a
   phone rather than shrinking the labels past reading. */
.smap__svg{
  display: block;
  width: 100%;
  max-width: 760px;
  min-width: 620px;
  height: auto;
  margin: 0 auto;
}

.smap__edge{ fill: none; stroke: var(--rule); stroke-width: 1.2; transition: stroke var(--tr-fast); }
.smap__node.is-hot ~ .smap__edge{ stroke: var(--accent); }

.smap__node{ cursor: pointer; }
.smap__node rect{
  fill: var(--bg); stroke: var(--rule); stroke-width: 1.2;
  transition: stroke var(--tr-fast), fill var(--tr-fast);
}
.smap__node:hover rect, .smap__node:focus-visible rect{ stroke: var(--accent); fill: var(--bg-2); }
.smap__node:focus-visible{ outline: none; }
.smap__node text{
  font-family: var(--f-sans); font-size: 12px; fill: var(--ink);
  dominant-baseline: middle; pointer-events: none;
}
.smap__node .smap__sub{ font-family: var(--f-mono); font-size: 9.5px; fill: var(--ink-3); }
.smap__node--root rect{ fill: var(--accent-2); stroke: var(--accent-2); }
.smap__node--root text{ fill: var(--bg); }
[data-theme="dark"] .smap__node--root rect{ fill: var(--ink); stroke: var(--ink); }
[data-theme="dark"] .smap__node--root text{ fill: var(--bg); }
.smap__node--ext rect{ stroke-dasharray: 3 3; }
.smap__dot{ fill: var(--accent); }

.smap__legend{ display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; }
.smap__legend span{ display: inline-flex; align-items: center; gap: 7px; }
.smap__key{ width: 18px; height: 12px; border: 1px solid var(--rule); background: var(--bg); }
.smap__key--root{ background: var(--accent-2); border-color: var(--accent-2); }
[data-theme="dark"] .smap__key--root{ background: var(--ink); border-color: var(--ink); }
.smap__key--ext{ border-style: dashed; }
.smap__dot-legend{ color: var(--accent); font-style: normal; font-size: 15px; line-height: 1; }

/* The same tree as a plain nested list: the accessible view, and what a
   crawler or a printer sees. Not hidden from anyone — the graph is the
   optional enhancement, not the other way round. */
.smap__outline ul{ list-style: none; margin: 0; padding-left: 18px; }
.smap__outline > ul{ padding-left: 0; }
.smap__outline li{ padding: 5px 0; border-top: 1px solid var(--rule-2); }
.smap__outline > ul > li > a{ font-size: 15px; }
.smap__outline .smap__url{ font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-3); margin-left: 8px; }

@media print{
  .nav, .theme-toggle{ display: none !important; }
  .smap__wrap{ break-inside: avoid; }
}

/* ----------------------------------------------------------------- 404 ---- */

.err__actions{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.err__langs{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--grid-gap); }
.err__lang h2{ font-size: 19px; }
.err__lang p{ font-size: 14px; }