/* One dye bath. Every colour on the site is indigo at a different depth, the way
   cloth darkens with each dip. On the home page the ground deepens section by
   section as the reader goes further down. One serif, Newsreader, throughout.

   System rules:
   - Space comes only from the --s scale (4px base). Related things sit closer
     than unrelated things: inside a group s-2 to s-4, between groups s-5 to s-7,
     between sections s-9 and s-10.
   - Type comes only from the --t scale (ratio 1.125, 16px root, 18px body).
     Leading tightens as size grows.
   - Running text is held to about 65 characters. Everything shares one left edge.
   - Interactive targets are at least 44px tall. */
:root {
  --dip-0: #283252;   /* the opening */
  --dip-1: #252f4d;
  --dip-2: #232c49;
  --dip-3: #212a45;
  --dip-4: #1f2742;
  --dip-5: #1d253e;
  --dip-6: #1b223b;
  --dip-7: #192037;
  --dip-8: #171d33;
  --dip-9: #12172a;   /* the footer */

  --ground: #1d253e;  /* inner pages */
  --raised: #262f4c;  /* dialog */
  --rule: rgba(201, 210, 236, 0.16);
  --mark: #c9d2ec;    /* the pen stroke, focus, footnote marks */
  --quiet: #a3aed0;   /* secondary text */
  --text: #edf0f7;    /* unbleached */

  --serif: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;

  /* Type scale, ratio 1.125 */
  --t--1: 0.889rem;   /* 14.2 */
  --t-0: 1rem;        /* 16 */
  --t-1: 1.125rem;    /* 18, body */
  --t-3: 1.424rem;    /* 22.8 */
  --t-5: 1.802rem;    /* 28.8 */
  --t-7: 2.281rem;    /* 36.5 */
  --t-9: 2.887rem;    /* 46.2 */
  --t-11: 3.653rem;   /* 58.5 */
  --t-15: 5.852rem;   /* 93.6 */

  /* Space scale, 4px base */
  --s-1: 0.25rem;  /* 4 */
  --s-2: 0.5rem;   /* 8 */
  --s-3: 0.75rem;  /* 12 */
  --s-4: 1rem;     /* 16 */
  --s-5: 1.5rem;   /* 24 */
  --s-6: 2rem;     /* 32 */
  --s-7: 3rem;     /* 48 */
  --s-8: 4rem;     /* 64 */
  --s-9: 6rem;     /* 96 */
  --s-10: 8rem;    /* 128 */

  --measure: 65ch;
  --page: 76rem;
  --gutter: max(var(--s-5), 6vw);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: var(--t-1);
  line-height: 1.65;
}
img { max-width: 100%; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 300; text-wrap: balance; }

a { color: inherit; text-decoration-color: rgba(201, 210, 236, 0.45); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--mark); }
:focus-visible { outline: 1px solid var(--mark); outline-offset: var(--s-1); }

.skip { position: absolute; left: -999px; }
.skip:focus { left: var(--s-4); top: var(--s-4); background: var(--raised); padding: var(--s-2) var(--s-3); z-index: 20; }

.wrap {
  max-width: var(--page);
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

.muted { color: var(--quiet); }
.label { font-size: var(--t-0); color: var(--quiet); font-style: italic; }

/* Header */
.site-header { position: relative; z-index: 2; }
.header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-6);
  padding-block: var(--s-7) var(--s-5);
}
.brand { display: inline-block; text-decoration: none; }
.wordmark-mark {
  display: block;
  width: 7.25rem;
  aspect-ratio: 800 / 270;
  background: var(--text);
  -webkit-mask: url(wordmark.png) center / contain no-repeat;
          mask: url(wordmark.png) center / contain no-repeat;
}
.header-row nav { margin-left: auto; }
.nav { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--s-6); font-size: var(--t-0); }

/* Menus: each top item is a <details> whose panel hangs under its own trigger
   as a small sheet in the footer's deepest dip. The pen stroke draws across the
   top of the sheet as it opens. Hover opens it on pointer devices (script);
   click, Enter and Space open it everywhere. */
.nav-link a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--quiet);
  text-decoration: none;
}
.nav-link a:hover, .nav-link a[aria-current="page"] { color: var(--text); }
.nav-link a[aria-current="page"] { font-style: italic; }
.menu { position: relative; }
.menu summary {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  color: var(--quiet);
  cursor: pointer;
  list-style: none;
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after {
  content: "";
  width: 0.4em;
  height: 0.4em;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-0.15em) rotate(45deg);
  transition: transform 0.2s ease;
}
.menu details[open] summary::after { transform: translateY(0.1em) rotate(-135deg); }
.menu summary:hover, .menu details[open] summary, .menu .here summary { color: var(--text); }
.menu-panel {
  position: absolute;
  top: 100%;
  left: calc(-1 * var(--s-5));
  z-index: 3;
  width: 22rem;
  max-width: calc(100vw - 2 * var(--gutter));
  padding: var(--s-3) var(--s-5) var(--s-5);
  display: grid;
  gap: var(--s-3);
  background: var(--dip-9);
  border: 1px solid var(--rule);
  border-radius: 2px;
  box-shadow: 0 var(--s-4) var(--s-7) rgba(10, 13, 26, 0.5);
}
.menu-wide .menu-panel { width: 33rem; }
.menu-end .menu-panel { left: auto; right: calc(-1 * var(--s-5)); }
.menu details[open] .menu-panel { animation: menu-in 0.16s ease-out; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px); } }
.menu .menu-stroke { width: 70%; }
.menu-stroke path { animation: none; }
.menu details[open] .menu-stroke path { animation: draw 0.7s cubic-bezier(.6, .05, .3, 1) .05s forwards; }
.menu-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--s-4) var(--s-6); }
.menu-group { display: grid; gap: var(--s-2); align-content: start; }
.menu-title { font-style: italic; color: var(--quiet); font-size: var(--t-0); padding-bottom: var(--s-2); border-bottom: 1px solid var(--rule); }
.menu-title a { text-decoration: none; }
.menu-title a:hover { color: var(--text); }
.menu-group ul { list-style: none; margin: 0; padding: 0; display: grid; }
.menu-group li a { display: grid; gap: 2px; padding-block: var(--s-2); text-decoration: none; }
.menu-label { color: var(--text); font-size: var(--t-1); line-height: 1.3; }
.menu-desc { color: var(--quiet); font-size: var(--t--1); line-height: 1.4; }
.menu-group li a:hover .menu-desc { color: var(--text); }
.menu-group li a[aria-current="page"] .menu-label { color: var(--mark); font-style: italic; }

/* Buttons: unbleached cloth on indigo */
.button, .button-chrome {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font: inherit;
  font-size: var(--t-0);
  font-weight: 500;
  line-height: 1.2;
  color: var(--dip-6);
  background: var(--text);
  border: 1px solid var(--text);
  border-radius: 2px;
  padding: var(--s-3) var(--s-5);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.button:hover, .button-chrome:hover { background: var(--mark); border-color: var(--mark); color: var(--dip-6); }
.nav-cta { min-height: 44px; padding-block: var(--s-2); }

/* Home: the opening. Three groups: headline with its stroke, the paragraph,
   the actions. The block sits a little above centre. */
.home .site-header, .home main > .hero { background: var(--dip-0); }
.hero .wrap {
  min-height: calc(100svh - 7.5rem);
  display: grid;
  align-content: center;
  justify-items: start;
  padding-block: var(--s-7) var(--s-10);
}
.hero h1 { font-size: clamp(var(--t-9), 7.2vw, var(--t-15)); line-height: 1.02; letter-spacing: -0.02em; max-width: 15ch; }
.stroke { width: min(22rem, 70%); height: auto; overflow: visible; }
.stroke path {
  fill: none;
  stroke: var(--mark);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  animation: draw 2.4s cubic-bezier(.6, .05, .3, 1) .4s forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
.hero .stroke { margin-top: var(--s-2); }
.hero .lede { margin-top: var(--s-6); max-width: 34rem; font-size: clamp(var(--t-1), 1.6vw, var(--t-3)); line-height: 1.5; color: var(--quiet); }
.hero-actions { margin-top: var(--s-7); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); }
.hero-actions a:not(.button) { display: inline-flex; align-items: center; min-height: 44px; color: var(--quiet); font-size: var(--t-0); }

/* Home: each problem in its own band, a dip deeper than the one above */
.band { padding-block: var(--s-10); }
.band .wrap {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--s-5) var(--s-8);
  align-items: start;
}
.band h2 { font-size: clamp(var(--t-5), 3.4vw, var(--t-9)); line-height: 1.12; letter-spacing: -0.01em; }
.band-body { display: grid; gap: var(--s-5); max-width: var(--measure); color: var(--quiet); }
.band-body p:first-child { color: var(--text); }
.band-body .aside { font-size: var(--t-0); }
.offer { list-style: none; margin: 0; padding: 0; display: grid; }
.offer li { display: grid; gap: var(--s-1); padding-block: var(--s-4); border-top: 1px solid var(--rule); }
.offer li:first-child { border-top: 0; padding-top: 0; }
.offer a { color: var(--text); font-size: var(--t-3); line-height: 1.3; }
.home main > .band:nth-of-type(2) { background: var(--dip-1); }
.home main > .band:nth-of-type(3) { background: var(--dip-2); }
.home main > .band:nth-of-type(4) { background: var(--dip-3); }
.home main > .band:nth-of-type(5) { background: var(--dip-4); }
.home main > .band:nth-of-type(6) { background: var(--dip-5); }
.home main > .band:nth-of-type(7) { background: var(--dip-6); }
.home main > .band:nth-of-type(8) { background: var(--dip-7); }

.closing { background: var(--dip-8); padding-block: var(--s-10); }
.closing .wrap { display: grid; justify-items: start; }
.closing h2 { font-size: clamp(var(--t-7), 5vw, var(--t-11)); line-height: 1.06; letter-spacing: -0.015em; max-width: 16ch; }
.closing p { max-width: var(--measure); color: var(--quiet); }
.closing h2 + p { margin-top: var(--s-6); }
.closing p + p { margin-top: var(--s-6); }
.closing .note { margin-top: var(--s-4); font-size: var(--t-0); }



/* Inner pages */
.opening { padding-block: var(--s-9) var(--s-7); }
.opening .wrap { display: grid; gap: var(--s-5); }
.opening h1 { font-size: clamp(var(--t-7), 5vw, var(--t-11)); line-height: 1.06; letter-spacing: -0.015em; max-width: 18ch; }
.opening .lede { font-size: clamp(var(--t-1), 1.6vw, var(--t-3)); line-height: 1.5; max-width: 38rem; color: var(--quiet); }
.opening-cta { margin-top: var(--s-2); }

.clauses { padding-block: var(--s-4) var(--s-9); }
.clause {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: var(--s-4) var(--s-7);
  padding-block: var(--s-7);
  border-top: 1px solid var(--rule);
}
.clause-mark { font-style: italic; color: var(--quiet); font-size: var(--t-0); padding-top: var(--s-2); }
.clause-body { min-width: 0; max-width: var(--measure); display: grid; gap: var(--s-4); }
.clause-body h2 { font-size: clamp(var(--t-3), 2.6vw, var(--t-7)); line-height: 1.15; }
.clause-body ul, .clause-body ol { margin: 0; padding-left: var(--s-5); display: grid; gap: var(--s-2); }
.clause-body li::marker { color: var(--quiet); }

.steps { list-style: none; padding: 0; margin: 0; display: grid; counter-reset: step; }
.clause-body .steps { padding: 0; gap: 0; }
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: var(--s-6) minmax(0, 1fr);
  gap: var(--s-4);
  padding-block: var(--s-4);
  border-top: 1px solid var(--rule);
}
.steps li:first-child { border-top: 0; padding-top: 0; }
.steps li::before { content: counter(step); font-size: var(--t-3); color: var(--mark); line-height: 1.3; }
.steps strong { display: block; font-weight: 500; }

.portrait {
  width: 9rem;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  border-radius: 50%;
  filter: grayscale(1) contrast(1.05);
  mix-blend-mode: luminosity;
}
.partner h2 { font-size: clamp(var(--t-5), 3.4vw, var(--t-9)); }
/* Partner profile: portrait and name, then the narrative and facts on the left
   with a dated timeline on the right, as on a printed profile. */
.clause-body.partner { max-width: none; }
.partner-head { display: grid; gap: var(--s-4); }
.partner-grid { display: grid; grid-template-columns: minmax(0, var(--measure)) 17rem; gap: var(--s-6) var(--s-8); align-items: start; }
.partner-text { display: grid; gap: var(--s-4); min-width: 0; }
.timeline { list-style: none; margin: 0; padding: var(--s-4) 0 0; display: grid; gap: var(--s-2); border-top: 1px solid var(--rule); font-size: var(--t-0); }
.timeline li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--s-3); }
.timeline.undated li { grid-template-columns: minmax(0, 1fr); }
.timeline .when { color: var(--quiet); font-style: italic; }
.timeline .when:empty::before { content: "\00a0"; }
@media (max-width: 900px) {
  .partner-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Partner facts: a short record under each profile */
.facts { margin: var(--s-2) 0 0; display: grid; gap: var(--s-2); border-top: 1px solid var(--rule); padding-top: var(--s-4); }
.facts div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--s-4); }
.facts dt { color: var(--quiet); font-style: italic; font-size: var(--t-0); }
.facts dd { margin: 0; }

/* Terms: a short record of defined items, as on the engagement page */
.terms { margin: 0; display: grid; border-top: 1px solid var(--rule); }
.terms div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--s-4); padding-block: var(--s-3); border-bottom: 1px solid var(--rule); }
.terms dt { color: var(--quiet); font-style: italic; font-size: var(--t-0); padding-top: 0.15em; }
.terms dd { margin: 0; }
.example { display: grid; gap: var(--s-1); }
.example strong { font-weight: 500; }
.example p:last-child { color: var(--quiet); }

/* Footer */
.site-footer { background: var(--dip-9); color: var(--quiet); font-size: var(--t-0); }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--s-6);
  padding-block: var(--s-8) var(--s-5);
}
.footer-grid > div { display: grid; gap: var(--s-2); align-content: start; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-note { padding-block: 0 var(--s-8); font-size: var(--t--1); }
.footer-note p { max-width: var(--measure); }

/* Entry disclaimer */
.entry {
  width: min(36rem, calc(100vw - 2 * var(--s-4)));
  max-width: none;
  margin: auto;
  border: 1px solid var(--rule);
  background: var(--raised);
  color: var(--text);
  padding: 0;
}
.entry::backdrop { background: rgba(10, 13, 26, 0.7); }
.entry-body { padding: var(--s-6); display: grid; gap: var(--s-4); }
.entry-body h2 { font-size: var(--t-5); }
.entry-body ul { margin: 0; padding-left: var(--s-5); display: grid; gap: var(--s-2); font-size: var(--t-0); color: var(--quiet); }
.entry-actions { display: flex; justify-content: flex-end; }

@media (max-width: 860px) {
  .band { padding-block: var(--s-9); }
  .band .wrap { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .header-row { padding-block: var(--s-6) var(--s-2); }
  .header-row nav { margin-left: 0; order: 3; width: 100%; }
  .nav-cta { margin-left: auto; }
  .nav { position: relative; }
  .menu { position: static; }
  .menu-panel, .menu-end .menu-panel, .menu-wide .menu-panel { left: 0; right: auto; width: 100%; max-width: none; }
  .hero .wrap { min-height: calc(100svh - 9rem); padding-block: var(--s-6) var(--s-8); }
  .band { padding-block: var(--s-8); }
  .closing { padding-block: var(--s-9); }
  .opening { padding-block: var(--s-8) var(--s-6); }
  .clause { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); padding-block: var(--s-6); }
  .clause-mark { padding-top: 0; }
  .entry-body { padding: var(--s-5); }
}
@media (max-width: 520px) {
  .facts div, .terms div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .stroke path, .menu details[open] .menu-stroke path { animation: none; stroke-dashoffset: 0; }
  .menu details[open] .menu-panel { animation: none; }
  * { transition: none !important; }
}