@charset "utf-8";

/* ============================================================
   VEXBE LTD / joinery.css
   Naming universe: joinery and mechanical fitting.
   mortise, tenon, keystone, coupling, chase, gasket, stile,
   dovetail, rebate, notch, sill, fixing, kerf, setout, shim,
   casement, scarf, tack, scribe, jig.

   Surface: light. Texture: monospace. Display: sans.
   Decoration: flat. Corner radius: 0 throughout, no exceptions.
   ============================================================ */

/* ---- 1. TOKENS ------------------------------------------- */

:root {
  /* Surface and ink. Ratios measured against the stated pair. */
  --paper:      #EFEEE9;  /* page surface                          */
  --panel:      #FFFFFF;  /* raised sheet, ink on panel = 17.79:1  */
  --ink:        #16181B;  /* ink on paper  = 15.31:1               */
  --ink-mid:    #4A4F55;  /* mid on paper  =  7.11:1               */
  --ink-soft:   #5C6268;  /* soft on paper =  5.31:1               */
  --rule:       #C6C3BA;  /* 1.52:1, decorative rule only          */
  --rule-hard:  #16181B;  /* structural rule                        */
  --seam:       #0E4B44;  /* accent on paper = 8.57:1              */
  --seam-deep:  #0B3A35;  /* accent on paper = 10.82:1             */
  --on-seam:    #FFFFFF;  /* white on accent =  9.96:1             */
  --on-ink:     #EFEEE9;  /* paper on ink    = 15.31:1             */
  --on-ink-mid: #A8ADB2;  /* muted on ink    =  7.86:1             */
  --on-ink-seam:#7FD1C4;  /* accent on ink   = 10.01:1             */
  --focus:      #0E4B44;

  /* One corner radius system: zero. Declared so it stays zero. */
  --fit: 0;

  /* Type */
  --face-mono: "Azeret Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --face-sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --t-micro: 0.6875rem;
  --t-small: 0.8125rem;
  --t-body:  0.9375rem;
  --t-lead:  clamp(1rem, 0.94rem + 0.3vw, 1.1875rem);
  --t-h4:    1.0625rem;
  --t-h3:    clamp(1.1875rem, 1.1rem + 0.4vw, 1.4375rem);
  --t-h2:    clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem);
  --t-h1:    clamp(2.0625rem, 1.4rem + 3.1vw, 3.75rem);

  /* Spacing */
  --gap-1: 0.375rem;
  --gap-2: 0.75rem;
  --gap-3: 1.25rem;
  --gap-4: 2rem;
  --gap-5: 3rem;
  --gap-6: 4.5rem;
  --gap-7: 6.5rem;

  --edge: clamp(1.25rem, 4vw, 3.5rem);
  --span: 74rem;
}

/* ---- 2. RESET AND BASE ----------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--face-mono);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: -0.005em;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--face-sans);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); font-weight: 800; letter-spacing: -0.045em; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h4); letter-spacing: -0.02em; }

p { margin: 0 0 var(--gap-3); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 var(--gap-3); padding-left: 1.35em; }
li { margin-bottom: var(--gap-1); }
li:last-child { margin-bottom: 0; }

a { color: var(--seam-deep); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

img, svg { max-width: 100%; height: auto; }

strong, b { font-weight: 700; }

code, kbd { font-family: var(--face-mono); font-size: 0.9em; background: var(--panel); padding: 0.05em 0.3em; border: 1px solid var(--rule); }

hr { border: 0; border-top: 1px solid var(--rule); margin: var(--gap-4) 0; }

::selection { background: var(--seam); color: var(--on-seam); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.gasket :focus-visible,
.sill :focus-visible { outline-color: var(--on-ink-seam); }

/* ---- 3. STRUCTURE ---------------------------------------- */

.mortise {
  width: 100%;
  max-width: var(--span);
  margin-inline: auto;
  padding-inline: var(--edge);
}
.mortise--tight { max-width: 58rem; }
.mortise--prose { max-width: 46rem; }

.silent {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.seamskip {
  position: absolute;
  left: var(--gap-2); top: -6rem;
  z-index: 60;
  background: var(--ink);
  color: var(--on-ink);
  padding: 0.7rem 1.1rem;
  font-size: var(--t-small);
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--fit);
  transition: top 120ms linear;
}
.seamskip:focus { top: var(--gap-2); }

.scribe { border: 0; border-top: 1px solid var(--rule); margin: 0; }
.scribe--hard { border-top: 2px solid var(--rule-hard); }

/* Shared type helpers */
.kerf {
  font-family: var(--face-mono);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--seam-deep);
  margin: 0 0 var(--gap-2);
  display: block;
}
.kerf--quiet { color: var(--ink-mid); font-weight: 500; }
.kerf--pale  { color: var(--on-ink-seam); }

.setout {
  font-size: var(--t-lead);
  line-height: 1.65;
  color: var(--ink-mid);
  max-width: 44ch;
}
.setout--wide { max-width: 62ch; }

.tack {
  font-family: var(--face-mono);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.tbc {
  font-family: var(--face-mono);
  font-size: 0.85em;
  font-weight: 700;
  background: #FFF4CE;
  color: #4A3B00;
  border: 1px solid #4A3B00;
  padding: 0.05em 0.4em;
  border-radius: var(--fit);
}

/* ---- 4. FIXING (buttons) --------------------------------- */

.fixing {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--face-mono);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.85rem 1.4rem;
  border: 2px solid var(--rule-hard);
  border-radius: var(--fit);
  background: var(--ink);
  color: var(--on-ink);
  transition: background 130ms linear, color 130ms linear;
}
.fixing:hover { background: var(--seam); border-color: var(--seam); color: var(--on-seam); }

.fixing--flush {
  background: transparent;
  color: var(--ink);
}
.fixing--flush:hover { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }

.fixing--pale {
  background: transparent;
  color: var(--on-ink);
  border-color: var(--on-ink-mid);
}
.fixing--pale:hover { background: var(--on-ink); color: var(--ink); border-color: var(--on-ink); }

.jig {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-2);
  align-items: center;
}

/* ---- 5. TENON (masthead) --------------------------------- */

.tenon {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 2px solid var(--rule-hard);
}

.tenon__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-3);
  min-height: 4.25rem;
}

.tenon__word {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--ink);
}
.tenon__mark {
  font-family: var(--face-sans);
  font-weight: 800;
  font-size: 1.1875rem;
  letter-spacing: -0.04em;
}
.tenon__num {
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--ink-mid);
}

.tenon__nav ul {
  display: flex;
  gap: var(--gap-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.tenon__link {
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
}
.tenon__link:hover { border-bottom-color: var(--seam); }
.tenon__link[aria-current="page"] { border-bottom-color: var(--ink); font-weight: 700; }

.tenon__catch {
  display: none;
  font-family: var(--face-mono);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--rule-hard);
  border-radius: var(--fit);
  padding: 0.55rem 0.85rem;
  cursor: pointer;
}

@media (max-width: 47.9375rem) {
  .tenon__catch { display: inline-block; }
  .tenon__nav {
    display: none;
    width: 100%;
    border-top: 1px solid var(--rule);
    padding: var(--gap-2) 0 var(--gap-3);
  }
  .tenon__nav.is-open { display: block; }
  .tenon__nav ul { flex-direction: column; gap: 0; }
  .tenon__nav li { border-bottom: 1px solid var(--rule); margin: 0; }
  .tenon__link { display: block; padding: 0.75rem 0; border-bottom: 0; }
  .tenon__row { flex-wrap: wrap; }
}

/* ---- 6. FAMILY A: KEYSTONE (opening) --------------------- */

.keystone {
  border-bottom: 2px solid var(--rule-hard);
  padding: var(--gap-6) 0 0;
}
.keystone__title { margin-bottom: var(--gap-3); max-width: 17ch; }
.keystone__title em { font-style: normal; color: var(--seam); }
.keystone__setout { margin-bottom: var(--gap-4); max-width: 54ch; }
.keystone__note {
  font-size: var(--t-small);
  color: var(--ink-soft);
  max-width: 62ch;
  margin-top: var(--gap-3);
}

.keystone__strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 2px solid var(--rule-hard);
  margin-top: var(--gap-6);
}
.keystone__datum {
  padding: var(--gap-3) var(--gap-3) var(--gap-4) 0;
  border-right: 1px solid var(--rule);
}
.keystone__datum:last-child { border-right: 0; }
.keystone__datum dt {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mid);
  margin-bottom: var(--gap-1);
}
.keystone__datum dd {
  margin: 0;
  font-family: var(--face-sans);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.keystone__datum dd span {
  display: block;
  font-family: var(--face-mono);
  font-size: var(--t-micro);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-soft);
  margin-top: 0.25rem;
}

@media (max-width: 47.9375rem) {
  .keystone { padding-top: var(--gap-5); }
  .keystone__strip { grid-template-columns: repeat(2, 1fr); }
  .keystone__datum:nth-child(2) { border-right: 0; }
  .keystone__datum:nth-child(1), .keystone__datum:nth-child(2) { border-bottom: 1px solid var(--rule); }
}
@media (max-width: 25rem) {
  .keystone__strip { grid-template-columns: 1fr; }
  .keystone__datum { border-right: 0; border-bottom: 1px solid var(--rule); }
  .keystone__datum:last-child { border-bottom: 0; }
}

/* ---- 7. FAMILY B: COUPLING (numbered rows) --------------- */

.coupling { padding: var(--gap-6) 0; }
.coupling__head { margin-bottom: var(--gap-5); max-width: 52ch; }
.coupling__head h2 { margin-bottom: var(--gap-2); }

.coupling__row {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--gap-3) var(--gap-4);
  padding: var(--gap-4) 0;
  border-top: 1px solid var(--rule);
  align-items: start;
}
.coupling__row:last-of-type { border-bottom: 1px solid var(--rule); }

.coupling__idx {
  font-family: var(--face-sans);
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--seam);
  font-variant-numeric: tabular-nums;
}
.coupling__name { margin-bottom: var(--gap-2); }
.coupling__body { color: var(--ink-mid); }
.coupling__body p { margin-bottom: var(--gap-2); }
.coupling__list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--t-small);
}
.coupling__list li {
  padding-left: 1.2rem;
  position: relative;
  color: var(--ink-mid);
  margin-bottom: var(--gap-1);
}
.coupling__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.72em;
  width: 0.6rem; height: 2px;
  background: var(--seam);
}

@media (max-width: 61.9375rem) {
  .coupling__row { grid-template-columns: 3.5rem minmax(0, 1fr); }
  .coupling__idx { font-size: 1.5rem; }
}

/* ---- 8. FAMILY C: CHASE (data table) --------------------- */

.chase { padding: var(--gap-6) 0; }
.chase__head { margin-bottom: var(--gap-4); max-width: 54ch; }
.chase__head h2 { margin-bottom: var(--gap-2); }

.chase__scroll {
  overflow-x: auto;
  border: 2px solid var(--rule-hard);
  background: var(--panel);
}
.chase__scroll table {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
  font-size: var(--t-small);
}
.chase__scroll caption {
  caption-side: top;
  text-align: left;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mid);
  padding: 0 0 var(--gap-2);
}
.chase__scroll th,
.chase__scroll td {
  text-align: left;
  vertical-align: top;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--rule);
}
.chase__scroll thead th {
  background: var(--ink);
  color: var(--on-ink);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 0;
}
.chase__scroll tbody th {
  font-weight: 700;
  color: var(--ink);
  width: 22%;
}
.chase__scroll tbody tr:last-child th,
.chase__scroll tbody tr:last-child td { border-bottom: 0; }
.chase__note {
  font-size: var(--t-small);
  color: var(--ink-soft);
  margin-top: var(--gap-3);
  max-width: 68ch;
}

/* ---- 9. FAMILY D: GASKET (inverted band) ----------------- */

.gasket {
  background: var(--ink);
  color: var(--on-ink);
  padding: var(--gap-6) 0;
}
.gasket h2 { color: var(--on-ink); margin-bottom: var(--gap-3); }
.gasket p { color: var(--on-ink-mid); }
.gasket a { color: var(--on-ink-seam); }
.gasket__inner { max-width: 56rem; }
.gasket__setout {
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--on-ink);
  max-width: 50ch;
  margin-bottom: var(--gap-4);
}
.gasket__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-4);
  border-top: 1px solid #3A3F44;
  padding-top: var(--gap-4);
  margin-top: var(--gap-4);
}
.gasket__pair h3 { color: var(--on-ink); font-size: var(--t-h4); margin-bottom: var(--gap-2); }
@media (max-width: 47.9375rem) {
  .gasket__pair { grid-template-columns: 1fr; }
}

/* ---- 10. FAMILY E: STILE (stepped sequence) -------------- */

.stile { padding: var(--gap-6) 0; }
.stile__head { margin-bottom: var(--gap-5); max-width: 52ch; }
.stile__head h2 { margin-bottom: var(--gap-2); }

.stile__track {
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--gap-4);
  border-left: 2px solid var(--rule-hard);
}
.stile__step {
  position: relative;
  padding: 0 0 var(--gap-5) var(--gap-3);
  margin: 0;
}
.stile__step:last-child { padding-bottom: 0; }
.stile__step::before {
  content: "";
  position: absolute;
  left: calc(var(--gap-4) * -1 - 2px);
  top: 0.45rem;
  width: calc(var(--gap-4) + 2px);
  height: 2px;
  background: var(--rule-hard);
}
.stile__num {
  display: block;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--seam-deep);
  margin-bottom: var(--gap-1);
}
.stile__step h3 { margin-bottom: var(--gap-2); font-size: var(--t-h4); }
.stile__step p { color: var(--ink-mid); max-width: 60ch; }

/* ---- 11. FAMILY F: DOVETAIL (asymmetric pair) ------------ */

.dovetail {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--gap-5) var(--gap-6);
  padding: var(--gap-6) 0;
  border-top: 2px solid var(--rule-hard);
  align-items: start;
}
.dovetail--reverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.dovetail__minor h2 { margin-bottom: var(--gap-3); }
.dovetail__minor p { color: var(--ink-mid); }
.dovetail__major > h3 { margin-bottom: var(--gap-3); }

.dovetail__defs { margin: 0; }
.dovetail__defs div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--gap-2) var(--gap-3);
  padding: var(--gap-3) 0;
  border-top: 1px solid var(--rule);
}
.dovetail__defs div:first-child { border-top: 0; padding-top: 0; }
.dovetail__defs dt {
  font-weight: 700;
  font-size: var(--t-small);
  letter-spacing: 0.01em;
}
.dovetail__defs dd { margin: 0; color: var(--ink-mid); font-size: var(--t-small); }

@media (max-width: 61.9375rem) {
  .dovetail,
  .dovetail--reverse { grid-template-columns: 1fr; gap: var(--gap-4); }
  .dovetail__defs div { grid-template-columns: 1fr; gap: var(--gap-1); }
}

/* ---- 12. FAMILY G: REBATE (indented note strip) ---------- */

.rebate {
  border-left: 6px solid var(--seam);
  background: var(--panel);
  padding: var(--gap-4);
  margin: var(--gap-5) 0;
  border-radius: var(--fit);
}
.rebate h2, .rebate h3 { margin-bottom: var(--gap-2); font-size: var(--t-h3); }
.rebate p { color: var(--ink-mid); max-width: 70ch; }
.rebate--wide { max-width: none; }

.shim {
  border: 1px solid var(--rule-hard);
  background: var(--panel);
  padding: var(--gap-3);
  margin: var(--gap-3) 0;
  font-size: var(--t-small);
  border-radius: var(--fit);
}
.shim strong { display: block; margin-bottom: var(--gap-1); }

/* ---- 13. FAMILY H: NOTCH (disclosure list) --------------- */

.notch { padding: var(--gap-6) 0; }
.notch__head { margin-bottom: var(--gap-4); max-width: 52ch; }
.notch__head h2 { margin-bottom: var(--gap-2); }
.notch__set { border-top: 1px solid var(--rule); }

.notch__item { border-bottom: 1px solid var(--rule); }
.notch__item summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap-3);
  cursor: pointer;
  padding: var(--gap-3) 0;
  font-family: var(--face-sans);
  font-size: var(--t-h4);
  font-weight: 700;
  letter-spacing: -0.02em;
  list-style: none;
}
.notch__item summary::-webkit-details-marker { display: none; }
.notch__item summary::after {
  content: "＋";
  font-family: var(--face-mono);
  font-size: 1rem;
  font-weight: 700;
  color: var(--seam);
  flex: 0 0 auto;
}
.notch__item[open] summary::after { content: "－"; }
.notch__item summary:hover { color: var(--seam-deep); }
.notch__body {
  padding: 0 0 var(--gap-4);
  color: var(--ink-mid);
  max-width: 68ch;
}

/* ---- 14. CASEMENT (legal document shell) ----------------- */

.casement { padding: var(--gap-5) 0 var(--gap-6); }
.casement__head {
  border-bottom: 2px solid var(--rule-hard);
  padding-bottom: var(--gap-4);
  margin-bottom: var(--gap-4);
}
.casement__head h1 { margin-bottom: var(--gap-3); max-width: 20ch; }
.casement__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-1) var(--gap-4);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-mid);
  margin: 0;
}

.casement__toc {
  background: var(--panel);
  border: 2px solid var(--rule-hard);
  padding: var(--gap-3) var(--gap-4) var(--gap-4);
  margin-bottom: var(--gap-5);
  border-radius: var(--fit);
}
.casement__toc h2 {
  font-size: var(--t-micro);
  font-family: var(--face-mono);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mid);
  margin-bottom: var(--gap-2);
}
.casement__toc ol {
  columns: 2;
  column-gap: var(--gap-5);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--t-small);
}
.casement__toc li { break-inside: avoid; margin-bottom: 0.3rem; }
.casement__toc a { text-decoration: none; }
.casement__toc a:hover { text-decoration: underline; }
@media (max-width: 47.9375rem) { .casement__toc ol { columns: 1; } }

.casement__body { max-width: 47rem; }
.casement__body p,
.casement__body li { color: var(--ink-mid); }
.casement__body h3 { margin: var(--gap-4) 0 var(--gap-2); font-size: var(--t-h4); }
.casement__body h4 { margin: var(--gap-3) 0 var(--gap-2); font-size: var(--t-body); font-family: var(--face-mono); font-weight: 700; letter-spacing: 0; }
.casement__body .chase__scroll { margin: var(--gap-3) 0; }
.casement__body .chase__scroll table { min-width: 34rem; font-size: var(--t-micro); }
.casement__body .chase__scroll th,
.casement__body .chase__scroll td { padding: 0.6rem 0.75rem; }

.scarf {
  padding: var(--gap-5) 0 0;
  border-top: 1px solid var(--rule);
  margin-top: var(--gap-5);
}
.scarf:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.scarf__num {
  display: block;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--seam-deep);
  margin-bottom: var(--gap-1);
}
.scarf > h2 { font-size: var(--t-h3); margin-bottom: var(--gap-3); }
.scarf__back {
  display: inline-block;
  margin-top: var(--gap-3);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---- 15. SILL (footer) ----------------------------------- */

.sill {
  background: var(--ink);
  color: var(--on-ink);
  padding: var(--gap-6) 0 var(--gap-4);
  border-top: 2px solid var(--rule-hard);
}
.sill a { color: var(--on-ink); text-decoration: none; border-bottom: 1px solid #4E545A; }
.sill a:hover { border-bottom-color: var(--on-ink-seam); color: var(--on-ink-seam); }

.sill__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap: var(--gap-4);
  padding-bottom: var(--gap-5);
}
.sill__word {
  font-family: var(--face-sans);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  margin-bottom: var(--gap-2);
  display: block;
}
.sill__blurb { color: var(--on-ink-mid); font-size: var(--t-small); max-width: 40ch; }
.sill__head {
  font-family: var(--face-mono);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-ink-seam);
  margin: 0 0 var(--gap-2);
}
.sill__col ul { list-style: none; margin: 0; padding: 0; font-size: var(--t-small); }
.sill__col li { margin-bottom: var(--gap-1); }

.sill__legal {
  border-top: 1px solid #3A3F44;
  padding-top: var(--gap-4);
  font-size: var(--t-micro);
  line-height: 1.8;
  color: var(--on-ink-mid);
}
.sill__legal p { margin-bottom: var(--gap-2); max-width: 80ch; }
.sill__legal a { color: var(--on-ink); }

@media (max-width: 61.9375rem) {
  .sill__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 32rem) {
  .sill__grid { grid-template-columns: 1fr; gap: var(--gap-3); }
}

/* ---- 16. MOTION ------------------------------------------ */
/* Inventory and justification, one line each:
   1. seamskip slide (120ms): the skip target must appear to arrive
      from off-canvas so keyboard users see where focus went.
   2. fixing colour shift (130ms): confirms the pointer is on a
      target without moving the target.
   3. tenon nav open (no transition, display toggle): a height
      animation on a sticky bar reflows the page under the reader.
   4. seat reveal (340ms, 10px rise): paces a long single column so
      each section boundary registers as a new unit of the document.
   All motion is suppressed under prefers-reduced-motion. */

.seat {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 340ms ease-out, transform 340ms ease-out;
}
.seat.is-seated { opacity: 1; transform: none; }
.no-js .seat { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .seat { opacity: 1; transform: none; }
}

/* ---- 17. PRINT ------------------------------------------- */

@media print {
  .tenon, .seamskip, .fixing, .sill__grid { display: none; }
  body { background: #FFFFFF; color: #000000; font-size: 10pt; }
  .gasket { background: #FFFFFF; color: #000000; }
  a { color: #000000; }
}