/* ===========================================================================
   RAMKO TECH CONSULTING LTD — ramkotech.pro
   Company No. 17022162 · England and Wales · SIC 62020
   ---------------------------------------------------------------------------
   Design direction — "the survey sheet".

   The company files one activity and one only: 62020, information technology
   consultancy. So the site is built like a surveyor's report rather than a
   product page — a pale stone ground, a dark olive-black basalt ink,
   and a single olive-bronze accent used for rules, ticks, numerals and links.

   Two devices carry the identity: the MARGIN INDEX, a fixed left-hand rail
   that lists the sections of the page as a bound report lists its folios and
   marks the one you are reading; and the ENTRY, a ruled two-column row with a
   hanging mono label at the left and prose at the right — used everywhere a
   card or a tile would otherwise appear. There are no cards, no shadows and
   no rounded boxes anywhere on this site; emphasis comes from rule, weight
   and space.

   Type: Instrument Serif for display, Public Sans for text, Red Hat Mono for
   labels, numerals and filed data.

   One stylesheet. No build step, no framework. Order: tokens → reset →
   layout → header → rail → components → pages → motion → responsive.
   =========================================================================== */


/* ---------- 1. Tokens ---------------------------------------------------- */

:root {
  /* Stone — the sheet. A pale mineral grey with a faint green cast, never white. */
  --stone:    #edefe9;   /* page ground */
  --stone-2:  #e3e6dd;   /* tinted band */
  --stone-3:  #d7dbd0;   /* deepest tint, rules on tint */
  --sheet:    #f5f7f2;   /* lifted surface */
  --sheet-2:  #fbfcf9;   /* the brightest surface */

  /* Basalt — the ink. A near-black carrying the same olive cast. */
  --basalt:   #181a14;   /* headings, the inverted ground */
  --basalt-2: #1f221b;
  --basalt-3: #292c23;   /* lifted surface inside an inverted band */
  --basalt-4: #383c31;

  /* Type on stone */
  --ink:   #181a14;
  --ink-2: #434639;      /* body copy */
  --ink-3: #5f6355;      /* quietest tone; clears 4.5:1 on --stone-2 as well */

  /* Type on basalt */
  --on-dark:   #f2f4ec;
  --on-dark-2: #bfc3b4;
  --on-dark-3: #8f9384;  /* quietest tone; clears 4.5:1 on --basalt-3 */

  /* Olive-bronze — the only chromatic colour on the site */
  --olive-800: #3f4418;
  --olive-700: #545a1f;  /* accent on stone: links, marks, numerals */
  --olive-600: #6b7328;
  --olive-500: #8a9432;
  --olive-400: #a8b354;  /* accent on basalt */
  --olive-300: #c9d38c;
  --olive-haze: rgba(138, 148, 50, 0.13);
  --olive-haze-2: rgba(138, 148, 50, 0.22);

  /* Rules — hairlines do all the structural work here */
  --rule:        rgba(24, 26, 20, 0.13);
  --rule-soft:   rgba(24, 26, 20, 0.07);
  --rule-2:      rgba(24, 26, 20, 0.24);
  --rule-3:      rgba(24, 26, 20, 0.46);
  --rule-olive:  rgba(107, 115, 40, 0.42);
  --rule-dark:      rgba(242, 244, 236, 0.15);
  --rule-dark-soft: rgba(242, 244, 236, 0.075);
  --rule-dark-2:    rgba(242, 244, 236, 0.30);

  /* Type */
  --display: "Instrument Serif", "Iowan Old Style", "Palatino Linotype",
             Palatino, Georgia, "Times New Roman", serif;
  --body:    "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
             Roboto, Helvetica, Arial, sans-serif;
  --mono:    "Red Hat Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
             Consolas, "Liberation Mono", monospace;

  /* Metrics */
  --measure:  1140px;
  --narrow:   740px;
  --pad:      clamp(20px, 5vw, 48px);
  --nav-h:    72px;
  --step:     clamp(56px, 8vw, 112px);   /* vertical rhythm between sheets */
}


/* ---------- 2. Reset & base ---------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--stone);
  color: var(--ink-2);
  font-family: var(--body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.72;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.012em;
}

h1 { font-size: clamp(2.9rem, 7vw, 5.1rem); }
h2 { font-size: clamp(2.1rem, 4.4vw, 3.3rem); }
h3 { font-size: clamp(1.4rem, 2.3vw, 1.85rem); line-height: 1.16; }
h4 {
  font-family: var(--body);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.002em;
}

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

a { color: var(--olive-700); text-decoration: none; }
a:hover { color: var(--olive-800); }

ul, ol { margin: 0 0 1.05em; padding-left: 1.2em; }
li { margin-bottom: 0.42em; }
li:last-child { margin-bottom: 0; }

strong { color: var(--ink); font-weight: 600; }
em { font-style: italic; }

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

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

::selection { background: var(--olive-haze-2); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--olive-600);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--basalt);
  color: var(--on-dark);
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 18px;
}
.skip-link:focus { left: 0; }


/* ---------- 3. Shared type devices ---------------------------------------- */

/* A small mono label — the site's connective tissue. */
.tag {
  display: block;
  font-family: var(--mono);
  font-size: 0.685rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--olive-700);
}
.tag--quiet { color: var(--ink-3); }
.tag--dark  { color: var(--olive-400); }
.tag--dark-quiet { color: var(--on-dark-3); }

/* Mono data: company numbers, dates, addresses, codes. */
.data {
  font-family: var(--mono);
  font-size: 0.845em;
  font-weight: 400;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

/* Larger introductory paragraph. */
.lede {
  font-size: clamp(1.09rem, 1.7vw, 1.26rem);
  line-height: 1.6;
  color: var(--ink-2);
  font-weight: 300;
}
.lede strong { font-weight: 500; }

.serif-note {
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.5vw, 1.95rem);
  line-height: 1.3;
  color: var(--ink);
  letter-spacing: -0.005em;
}

/* An inline link that carries the olive underline. */
.link {
  color: var(--olive-700);
  border-bottom: 1px solid var(--rule-olive);
  padding-bottom: 1px;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.link:hover { color: var(--olive-800); border-bottom-color: var(--olive-700); }

.link--dark { color: var(--olive-300); border-bottom-color: rgba(201, 211, 140, 0.4); }
.link--dark:hover { color: var(--on-dark); border-bottom-color: var(--olive-300); }


/* ---------- 4. Layout ---------------------------------------------------- */

.measure {
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.sheet {
  padding: var(--step) 0;
  border-top: 1px solid var(--rule);
}
.sheet--flush { border-top: 0; }

/* The tinted sheet — a sheet laid on a slightly darker desk. */
.sheet--tint { background: var(--stone-2); border-top-color: var(--rule-soft); }

/* The inverted sheet — one per page, no more. */
.sheet--dark {
  background: var(--basalt);
  color: var(--on-dark-2);
  border-top: 0;
}
.sheet--dark h1,
.sheet--dark h2,
.sheet--dark h3,
.sheet--dark h4 { color: var(--on-dark); }
.sheet--dark strong { color: var(--on-dark); }

/* The folio: every section opens with one. Numeral, title, standfirst. */
.folio {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(20px, 4vw, 56px);
  align-items: end;
  padding-bottom: 26px;
  margin-bottom: clamp(30px, 4vw, 52px);
  border-bottom: 1px solid var(--rule-2);
  position: relative;
}
.folio::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 76px;
  height: 2px;
  background: var(--olive-600);
}
.sheet--dark .folio { border-bottom-color: var(--rule-dark-2); }
.sheet--dark .folio::after { background: var(--olive-400); }

.folio__num {
  display: block;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--olive-700);
  margin-bottom: 14px;
}
.sheet--dark .folio__num { color: var(--olive-400); }

.folio__title { max-width: 15ch; }
.folio__stand {
  font-size: 1.02rem;
  line-height: 1.62;
  color: var(--ink-3);
  padding-bottom: 6px;
}
.sheet--dark .folio__stand { color: var(--on-dark-3); }

/* A narrow prose column for legal pages and long copy. */
.column { max-width: 68ch; }


/* ---------- 5. Header ---------------------------------------------------- */

/* Topline — the filed identity, always first, scrolls away. */
.topline {
  background: var(--basalt);
  color: var(--on-dark-3);
  font-family: var(--mono);
  font-size: 0.665rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
}
.topline__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding-top: 11px;
  padding-bottom: 11px;
}
.topline span + span { white-space: nowrap; }
.topline b { color: var(--olive-400); font-weight: 500; }

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(237, 239, 233, 0.94);
  backdrop-filter: saturate(150%) blur(9px);
  -webkit-backdrop-filter: saturate(150%) blur(9px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.nav.is-stuck {
  border-bottom-color: var(--rule-2);
  background: rgba(237, 239, 233, 0.97);
}

.nav__inner {
  min-height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* Wordmark — set, not drawn. An olive tick precedes the name. */
.wordmark {
  display: flex;
  align-items: baseline;
  gap: 11px;
  color: var(--ink);
  line-height: 1;
}
.wordmark__tick {
  width: 13px;
  height: 13px;
  flex: none;
  align-self: center;
  border-left: 2px solid var(--olive-600);
  border-bottom: 2px solid var(--olive-600);
  transform: translateY(-1px);
}
.wordmark__name {
  font-family: var(--display);
  font-size: 1.62rem;
  letter-spacing: 0.02em;
}
.wordmark__sub {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 30px);
}
/* `:not(.act)` matters: the enquire button in the nav is an .act and must keep
   its own colour and border rather than inheriting the plain link treatment. */
.nav__links a:not(.act) {
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--ink-2);
  letter-spacing: 0.01em;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.16s ease, border-color 0.16s ease;
}
.nav__links a:not(.act):hover { color: var(--ink); border-bottom-color: var(--rule-2); }
.nav__links a.is-current { color: var(--ink); border-bottom-color: var(--olive-600); }

.nav__toggle {
  display: none;
  width: 42px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--rule-2);
  background: transparent;
  cursor: pointer;
  position: relative;
}
.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after {
  position: absolute;
  left: 11px;
  width: 18px;
  height: 1.5px;
  background: var(--ink);
  content: "";
  transition: transform 0.22s ease, opacity 0.22s ease;
}
.nav__toggle span { top: 16px; }
.nav__toggle span::before { left: 0; top: -6px; }
.nav__toggle span::after  { left: 0; top: 6px; }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }


/* ---------- 6. The margin index ------------------------------------------ */
/* A fixed left rail listing the sections of the page, as a bound report
   lists its folios. Desktop only; hidden entirely below 1320px.            */

.index-rail {
  position: fixed;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: none;
  padding-left: 13px;
  border-left: 1px solid var(--rule-2);
}
.index-rail ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.index-rail li { margin: 0; }
.index-rail a {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
  opacity: 0.62;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.index-rail a::before {
  content: "";
  width: 10px;
  height: 1px;
  background: currentColor;
  transition: width 0.22s ease;
}
.index-rail a:hover { opacity: 1; color: var(--ink); }
.index-rail a.is-active {
  opacity: 1;
  color: var(--olive-700);
}
.index-rail a.is-active::before { width: 22px; background: var(--olive-600); height: 2px; }


/* ---------- 7. The opening (hero) ---------------------------------------- */

.opening {
  position: relative;
  padding: clamp(56px, 9vw, 108px) 0 clamp(48px, 7vw, 88px);
  overflow: hidden;
}
/* A faint ruled baseline grid — the survey sheet under the type. */
.opening::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--rule-soft) 0 1px,
    transparent 1px 38px
  );
  opacity: 0.85;
  pointer-events: none;
}
.opening > * { position: relative; }

.opening__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(30px, 5vw, 72px);
  align-items: start;
}

.opening h1 { margin-bottom: 0.34em; }
.opening h1 em {
  font-style: italic;
  color: var(--olive-700);
}

.opening__rule {
  width: 100%;
  height: 1px;
  background: var(--rule-2);
  margin: clamp(26px, 4vw, 42px) 0 24px;
  position: relative;
}
.opening__rule::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 120px;
  height: 3px;
  background: var(--olive-600);
}

.opening__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

/* The filed strip — the registry facts, stated up front. */
.strip {
  border-top: 1px solid var(--rule-2);
  padding-top: 22px;
}
.strip dl {
  margin: 0;
  display: grid;
  gap: 0;
}
.strip div {
  display: grid;
  grid-template-columns: 8.5em minmax(0, 1fr);
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.strip div:last-child { border-bottom: 0; }
.strip dt {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 3px;
}
.strip dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.79rem;
  line-height: 1.6;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}


/* ---------- 8. Acts (buttons) --------------------------------------------- */

.act {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 0.71rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 14px 22px;
  border: 1px solid var(--rule-3);
  color: var(--ink);
  background: transparent;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.act::after {
  content: "→";
  font-family: var(--body);
  letter-spacing: 0;
  transform: translateX(0);
  transition: transform 0.2s ease;
}
.act:hover { border-color: var(--basalt); color: var(--ink); }
.act:hover::after { transform: translateX(4px); }

.act--solid {
  background: var(--basalt);
  border-color: var(--basalt);
  color: var(--on-dark);
}
.act--solid:hover { background: var(--olive-800); border-color: var(--olive-800); color: #fff; }

.act--olive {
  background: var(--olive-700);
  border-color: var(--olive-700);
  color: #fbfcf9;
}
.act--olive:hover { background: var(--olive-800); border-color: var(--olive-800); color: #fff; }

.act--onDark {
  border-color: var(--rule-dark-2);
  color: var(--on-dark);
}
.act--onDark:hover { border-color: var(--olive-400); color: var(--olive-300); }

.act--sm { padding: 10px 16px; font-size: 0.66rem; }


/* ---------- 9. The entry -------------------------------------------------- */
/* The workhorse. A ruled row: hanging mono label left, prose right.
   Replaces the card everywhere on this site.                                */

.entries { border-top: 1px solid var(--rule-2); }

.entry {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(18px, 4vw, 56px);
  padding: clamp(26px, 3.4vw, 40px) 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.entry::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 0;
  height: 2px;
  background: var(--olive-600);
  transition: width 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.entry:hover::before { width: 100%; }

.entry__key { position: relative; }
.entry__num {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: var(--olive-700);
  margin-bottom: 10px;
}
.entry__title {
  font-family: var(--display);
  font-size: clamp(1.32rem, 2.1vw, 1.72rem);
  line-height: 1.14;
  color: var(--ink);
  letter-spacing: -0.008em;
}
.entry__body > p:first-child { margin-top: 0; }
.entry__meta {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: 0.7rem;
  line-height: 1.7;
  letter-spacing: 0.05em;
  color: var(--ink-3);
}
.entry__meta b { color: var(--olive-700); font-weight: 500; }

/* Inside an inverted sheet */
.sheet--dark .entries { border-top-color: var(--rule-dark-2); }
.sheet--dark .entry { border-bottom-color: var(--rule-dark-soft); }
.sheet--dark .entry::before { background: var(--olive-400); }
.sheet--dark .entry__num { color: var(--olive-400); }
.sheet--dark .entry__title { color: var(--on-dark); }
.sheet--dark .entry__meta { color: var(--on-dark-3); border-top-color: var(--rule-dark-soft); }
.sheet--dark .entry__meta b { color: var(--olive-400); }

/* A tighter variant used where entries are short. */
.entry--tight { padding: 22px 0; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); }


/* ---------- 10. Ticked list ----------------------------------------------- */

.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 9px;
  font-size: 0.955rem;
  line-height: 1.62;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-left: 1.5px solid var(--olive-600);
  border-bottom: 1.5px solid var(--olive-600);
  transform: translateY(-3px);
}
.sheet--dark .ticks li::before { border-color: var(--olive-400); }

.ticks--mono li { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.01em; }


/* ---------- 11. The strata ------------------------------------------------ */
/* A layered read-out of the ground a review covers. Bars, not cards.        */

.strata { border-top: 1px solid var(--rule-2); }
.stratum {
  display: grid;
  grid-template-columns: 3.4em minmax(0, 15em) minmax(0, 1fr) minmax(0, 1.5fr);
  gap: clamp(14px, 2.4vw, 30px);
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
}
.stratum__n {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}
.stratum__name {
  font-family: var(--body);
  font-weight: 500;
  font-size: 1rem;
  color: var(--ink);
  letter-spacing: 0.002em;
}
.stratum__bar {
  height: 8px;
  background: var(--stone-3);
  position: relative;
  overflow: hidden;
}
.stratum__bar i {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  background: var(--olive-600);
  width: var(--w, 50%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.85s cubic-bezier(0.16, 0.84, 0.34, 1);
}
.is-in .stratum__bar i,
.stratum.is-in .stratum__bar i { transform: scaleX(1); }
.stratum__note {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-3);
}


/* ---------- 12. The sequence ---------------------------------------------- */
/* How an engagement runs. A ruled vertical run, marked at each stage.       */

.sequence { display: grid; gap: 0; border-top: 1px solid var(--rule-2); }
.stage {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  gap: clamp(18px, 4vw, 52px);
  padding: clamp(24px, 3vw, 34px) 0;
  border-bottom: 1px solid var(--rule);
}
.stage__mark {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.stage__n {
  font-family: var(--display);
  font-size: clamp(2.1rem, 3.6vw, 3rem);
  line-height: 0.8;
  color: var(--olive-600);
  letter-spacing: -0.02em;
}
.stage__label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.stage h3 { margin-bottom: 10px; }
.stage__out {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 0.71rem;
  letter-spacing: 0.05em;
  color: var(--ink-3);
}
.stage__out b { color: var(--olive-700); font-weight: 500; }


/* ---------- 13. Filed record ---------------------------------------------- */

.record {
  border: 1px solid var(--rule-2);
  background: var(--sheet);
}
.record__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--rule-2);
  background: var(--stone-2);
}
.record__head span {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.record__head b { color: var(--olive-700); font-weight: 500; }
.record dl { margin: 0; padding: 6px 22px 14px; }
.record div {
  display: grid;
  grid-template-columns: 12em minmax(0, 1fr);
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.record div:last-child { border-bottom: 0; }
.record dt {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 3px;
}
.record dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.record dd small {
  display: block;
  font-family: var(--body);
  font-size: 0.85rem;
  color: var(--ink-3);
  letter-spacing: 0;
  margin-top: 3px;
}

/* On an inverted sheet */
.sheet--dark .record { border-color: var(--rule-dark-2); background: var(--basalt-3); }
.sheet--dark .record__head { background: var(--basalt-2); border-bottom-color: var(--rule-dark-2); }
.sheet--dark .record__head span { color: var(--on-dark-3); }
.sheet--dark .record__head b { color: var(--olive-400); }
.sheet--dark .record div { border-bottom-color: var(--rule-dark-soft); }
.sheet--dark .record dt { color: var(--on-dark-3); }
.sheet--dark .record dd { color: var(--on-dark); }
.sheet--dark .record dd small { color: var(--on-dark-3); }


/* ---------- 14. Undertakings ---------------------------------------------- */
/* Written commitments, never measured performance. Stated as such.          */

.undertakings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  border-top: 1px solid var(--rule-dark-2);
  border-left: 1px solid var(--rule-dark-soft);
}
.undertaking {
  padding: 26px 24px;
  border-right: 1px solid var(--rule-dark-soft);
  border-bottom: 1px solid var(--rule-dark-soft);
}
.undertaking__v {
  display: block;
  font-family: var(--display);
  font-size: clamp(2rem, 3.4vw, 2.7rem);
  line-height: 1;
  color: var(--olive-400);
  margin-bottom: 12px;
  letter-spacing: -0.015em;
}
.undertaking p {
  font-size: 0.9rem;
  line-height: 1.58;
  color: var(--on-dark-2);
  margin: 0;
}

/* Light variant */
.undertakings--light {
  border-top-color: var(--rule-2);
  border-left-color: var(--rule);
}
.undertakings--light .undertaking { border-right-color: var(--rule); border-bottom-color: var(--rule); }
.undertakings--light .undertaking__v { color: var(--olive-700); }
.undertakings--light .undertaking p { color: var(--ink-2); }


/* ---------- 15. Q & A ------------------------------------------------------ */

.qa { border-top: 1px solid var(--rule-2); }
.qa__item {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(18px, 4vw, 56px);
  padding: 26px 0;
  border-bottom: 1px solid var(--rule);
}
.qa__q {
  font-family: var(--body);
  font-weight: 500;
  font-size: 1.02rem;
  line-height: 1.45;
  color: var(--ink);
}
.qa__a { font-size: 0.965rem; }


/* ---------- 16. Notes and asides ------------------------------------------ */

.note {
  border-left: 2px solid var(--olive-600);
  padding: 4px 0 4px 20px;
  font-size: 0.955rem;
  line-height: 1.65;
  color: var(--ink-3);
}
.sheet--dark .note { border-left-color: var(--olive-400); color: var(--on-dark-3); }

.plaque {
  background: var(--sheet);
  border: 1px solid var(--rule);
  padding: clamp(24px, 3.4vw, 38px);
}
.plaque h3 { margin-bottom: 14px; }
.sheet--tint .plaque { background: var(--sheet-2); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(26px, 4.6vw, 68px);
  align-items: start;
}
.split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split--wide-left { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }

.sticky-side { position: sticky; top: calc(var(--nav-h) + 34px); }


/* ---------- 17. Closing call ---------------------------------------------- */

.closing {
  background: var(--basalt);
  color: var(--on-dark-2);
  padding: clamp(56px, 8vw, 96px) 0;
  position: relative;
  overflow: hidden;
}
.closing::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--rule-dark-soft) 0 1px,
    transparent 1px 46px
  );
  opacity: 0.6;
  pointer-events: none;
}
.closing > * { position: relative; }
.closing h2 { color: var(--on-dark); margin-bottom: 18px; max-width: 18ch; }
.closing p { color: var(--on-dark-2); }
.closing .act { margin-top: 26px; }
.closing__mail {
  font-family: var(--mono);
  font-size: clamp(0.95rem, 2.1vw, 1.28rem);
  letter-spacing: 0.02em;
  color: var(--olive-300);
  border-bottom: 1px solid rgba(201, 211, 140, 0.34);
  padding-bottom: 3px;
}
.closing__mail:hover { color: var(--on-dark); border-bottom-color: var(--olive-300); }


/* ---------- 18. Colophon (footer) ----------------------------------------- */

.colophon {
  background: var(--basalt-2);
  color: var(--on-dark-3);
  border-top: 1px solid var(--rule-dark-soft);
  padding: clamp(44px, 6vw, 68px) 0 34px;
  font-size: 0.9rem;
}
.colophon a { color: var(--on-dark-2); }
.colophon a:hover { color: var(--olive-300); }

.colophon__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2.4fr));
  gap: clamp(26px, 4vw, 48px);
  padding-bottom: 34px;
  border-bottom: 1px solid var(--rule-dark-soft);
}
.colophon__grid h4 {
  font-family: var(--mono);
  font-size: 0.63rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--olive-400);
  margin-bottom: 16px;
}
.colophon__grid ul { list-style: none; margin: 0; padding: 0; }
.colophon__grid li { margin-bottom: 9px; }
.colophon__brand .wordmark__name { color: var(--on-dark); }
.colophon__brand .wordmark__sub { color: var(--on-dark-3); }
.colophon__brand p {
  margin-top: 16px;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--on-dark-3);
  max-width: 38ch;
}
.colophon__addr {
  font-family: var(--mono);
  font-size: 0.76rem;
  line-height: 1.75;
  font-style: normal;
  color: var(--on-dark-2);
}

.colophon__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  padding-top: 26px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark-3);
}
.colophon__foot nav { display: flex; flex-wrap: wrap; gap: 20px; }


/* ---------- 19. Page header (interior pages) ------------------------------ */

.crown {
  --crown-pb: clamp(34px, 4.5vw, 56px);
  padding: clamp(44px, 7vw, 84px) 0 var(--crown-pb);
  border-bottom: 1px solid var(--rule-2);
}
/* The olive tab hangs off the section's bottom rule but must line up with the
   text column, so it is anchored to the measure rather than to the section. */
.crown .measure { position: relative; }
.crown .measure::after {
  content: "";
  position: absolute;
  left: var(--pad);
  bottom: calc(-1 * var(--crown-pb) - 1px);
  width: 96px;
  height: 2px;
  background: var(--olive-600);
}
.crown h1 { max-width: 16ch; margin-bottom: 0.3em; }
.crown .lede { max-width: 62ch; }

.breadcrumb {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 22px;
}
.breadcrumb a { color: var(--ink-3); }
.breadcrumb a:hover { color: var(--olive-700); }
.breadcrumb span { color: var(--rule-3); margin: 0 8px; }


/* ---------- 20. Legal pages ------------------------------------------------ */

.legal { padding: var(--step) 0; }
.legal h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin: 2.2em 0 0.55em;
  padding-top: 0.7em;
  border-top: 1px solid var(--rule);
}
.legal h2:first-of-type { margin-top: 0; border-top: 0; padding-top: 0; }
.legal h3 {
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 600;
  margin: 1.7em 0 0.5em;
  color: var(--ink);
}
.legal p, .legal li { font-size: 0.99rem; }
.legal ul { padding-left: 1.1em; }
.legal__meta {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 22px;
  margin-bottom: 34px;
  border-bottom: 1px solid var(--rule);
}


/* ---------- 21. Contact ---------------------------------------------------- */

.channel {
  border-top: 1px solid var(--rule-2);
  padding-top: 26px;
  margin-bottom: 34px;
}
.channel__mail {
  display: inline-block;
  font-family: var(--mono);
  font-size: clamp(1.05rem, 2.6vw, 1.6rem);
  letter-spacing: 0.01em;
  color: var(--ink);
  border-bottom: 2px solid var(--olive-600);
  padding-bottom: 4px;
  margin: 10px 0 18px;
}
.channel__mail:hover { color: var(--olive-800); }


/* ---------- 22. 404 --------------------------------------------------------- */

.lost {
  min-height: 62vh;
  display: flex;
  align-items: center;
  padding: var(--step) 0;
}
.lost__code {
  font-family: var(--display);
  font-size: clamp(5rem, 16vw, 11rem);
  line-height: 0.82;
  color: var(--olive-600);
  letter-spacing: -0.03em;
  margin-bottom: 22px;
}


/* ---------- 23. Motion ------------------------------------------------------ */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .stratum__bar i { transform: scaleX(1); transition: none; }
  .entry::before, .act::after { transition: none; }
}


/* ---------- 24. Responsive -------------------------------------------------- */

/* The rail only appears once the viewport margin is wide enough to hold it
   clear of the measure: (1440 - 1140) / 2 = 150px, against a rail ~124px wide. */
@media (min-width: 1440px) {
  .index-rail { display: block; }
}

@media (max-width: 1080px) {
  .colophon__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 900px) {
  body { font-size: 16.5px; }

  .nav__toggle { display: block; }
  .nav__links {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--stone);
    border-bottom: 1px solid var(--rule-2);
    padding: 6px var(--pad) 18px;
    display: none;
  }
  .nav__links.is-open { display: flex; }
  .nav__links a:not(.act) {
    padding: 13px 0;
    border-bottom: 1px solid var(--rule-soft);
  }
  .nav__links a.is-current { border-bottom-color: var(--rule-soft); color: var(--olive-700); }
  .nav__links .act { justify-content: center; margin-top: 14px; }

  .opening__grid,
  .folio,
  .entry,
  .entry--tight,
  .stage,
  .qa__item,
  .split,
  .split--even,
  .split--wide-left { grid-template-columns: minmax(0, 1fr); }

  .folio { align-items: start; }
  .folio__title { max-width: 20ch; }

  .stratum {
    grid-template-columns: 3em minmax(0, 1fr);
    gap: 8px 16px;
    padding: 18px 0;
  }
  .stratum__bar { grid-column: 2; }
  .stratum__note { grid-column: 2; }

  .sticky-side { position: static; }
  .record div { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .strip div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

@media (max-width: 640px) {
  .topline__inner { font-size: 0.6rem; letter-spacing: 0.1em; }
  .topline span:nth-child(2) { display: none; }
  .wordmark__sub { display: none; }
  .colophon__grid { grid-template-columns: minmax(0, 1fr); }
  .undertakings { grid-template-columns: minmax(0, 1fr); }
}


/* ---------- 25. Print -------------------------------------------------------- */

@media print {
  .nav, .index-rail, .topline, .closing, .skip-link { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .sheet--dark { background: #fff; color: #000; }
  .sheet--dark h1, .sheet--dark h2, .sheet--dark h3 { color: #000; }
  a { color: #000; }
}