/* ============================================================
   FOX WILLIAMS — PROFESSIONAL SERVICES GROUP
   v4 — dark ground, large type, lime in fields not flecks.

   Set in the firm's own faces: Playfair Display carries every
   display line; Open Sans does body, tabular data and labels.

   The register is loud on purpose. What has been stripped is the
   fingerprint, not the ambition:
     no clamp() on individual elements — fixed steps, re-declared
     no cubic-bezier(.16, 1, .3, 1)
     no feTurbulence noise layer, no scroll progress bar
     no pulsing dot, no marquee, no tilt cards, no magnetic buttons
     no gradients, no glows, no coloured shadows anywhere
     no all-caps kicker stamped above every heading
     no uniform fade-up on every section
     no font-feature declarations these faces cannot honour — see
       the note at .rec__yr; both were measured, not assumed
     body text at full contrast — dark grounds with mid-grey type
       are the actual failure everyone keeps naming
   ============================================================ */

/* ---- 1. Faces ---------------------------------------------- */

@font-face {
  font-family: 'Playfair Display';
  font-style: normal; font-weight: 400 900; font-display: block;
  src: url('../fonts/playfair-display-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic; font-weight: 400 900; font-display: swap;
  src: url('../fonts/playfair-display-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal; font-weight: 300 800; font-display: swap;
  src: url('../fonts/open-sans-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic; font-weight: 300 800; font-display: swap;
  src: url('../fonts/open-sans-italic.woff2') format('woff2');
}

/* ---- 2. Tokens --------------------------------------------- */

:root {
  --display: 'Playfair Display', Georgia, serif;
  --text: 'Open Sans', system-ui, sans-serif;

  --ink:    #041418;
  --navy:   #003f5f;
  --lime:   #8dc63f;
  --bone:   #eef0e9;
  --bone-2: #adb8b1;   /* ~8:1 on ink — metadata only, never body */
  --rule:        rgba(238, 240, 233, 0.20);
  --rule-strong: rgba(238, 240, 233, 0.42);

  /* Six sizes, with a deliberately violent jump from 24 to 76 to
     150. The scale contrast IS the design; a smooth ramp is what
     makes a page read as generated. */
  --s1: 12px;
  --s2: 14px;
  --s3: 19px;
  --s4: 24px;
  --s5: 76px;
  --s6: 150px;

  --lh1: 1.3;
  --lh2: 1.4;
  --lh3: 1.55;
  --lh4: 1.3;
  --lh5: 0.88;
  --lh6: 0.82;   /* display set tighter than solid */

  --tr1:  0.14em;
  --tr2:  0.01em;
  --tr3:  0;
  --tr4: -0.01em;
  --tr5: -0.028em;
  --tr6: -0.035em;

  --line: calc(var(--s3) * var(--lh3));
  --sp-h: calc(var(--line) * 0.5);
  --sp-1: var(--line);
  --sp-2: calc(var(--line) * 2);
  --sp-3: calc(var(--line) * 3);
  --sp-5: calc(var(--line) * 5);

  --pad:   68px;   /* left  */
  --pad-r: 40px;   /* right — unequal on purpose */
  --measure: 60ch;

  --1s: 1ms;       /* motion off by default; see below */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media screen and (prefers-reduced-motion: no-preference) {
  :root { --1s: 1000ms; }
}

@media (max-width: 1180px) {
  :root { --s5: 58px; --s6: 104px; --pad: 44px; --pad-r: 32px; }
}
@media (max-width: 860px) {
  :root {
    --s1: 12px; --s2: 14px; --s3: 18px; --s4: 21px;
    --s5: 42px; --s6: 68px; --pad: 26px; --pad-r: 22px;
  }
}
@media (max-width: 560px) {
  :root {
    --s1: 12px; --s2: 13px; --s3: 17px; --s4: 20px;
    --s5: 33px; --s6: 46px; --pad: 18px; --pad-r: 18px;
  }
}

/* ---- 3. Ground -------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; background: var(--ink); }

body {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--text);
  font-size: var(--s3);
  line-height: var(--lh3);
  overflow-x: hidden;
}

::selection { background: var(--lime); color: var(--ink); }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }

h1, h2, h3 { font-weight: 400; }

a { color: inherit; text-decoration: none; }
p a, .link {
  text-decoration: underline;
  text-decoration-color: var(--lime);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: text-decoration-thickness calc(var(--1s) * 0.12) linear;
}
@media (hover: hover) {
  p a:hover, .link:hover { text-decoration-thickness: 3px; }
}

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

.wrap { padding-left: var(--pad); padding-right: var(--pad-r); }

.label {
  font-size: var(--s1);
  letter-spacing: var(--tr1);
  text-transform: uppercase;
  color: var(--lime);
  font-weight: 600;
}

/* ---- 4. Hero ---------------------------------------------- */

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: var(--sp-2);
  padding-bottom: var(--sp-2);
}

.hero__top {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1.5em;
  font-size: var(--s1); letter-spacing: var(--tr1);
  text-transform: uppercase; color: var(--bone-2);
}
.hero__top strong { color: var(--bone); font-weight: 600; }

.hero__stage {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  margin: var(--sp-2) 0;
  /* The headline is allowed to run past the right edge. Type that
     stops politely inside its container is type nobody decided. */
  margin-right: calc(var(--pad-r) * -1);
}

/* The real headline does the work until the canvas reports ready,
   then hands over. Never display:none — it stays in the a11y tree. */
.hero__h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--s6);
  line-height: var(--lh6);
  letter-spacing: var(--tr6);
  position: relative;
  z-index: 2;
}
.hero__h1 span { display: block; }
.hero__h1 em { font-style: italic; }
.is-canvas .hero__h1 { position: absolute; opacity: 0; pointer-events: none; }

#slab {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1; display: none;
  cursor: crosshair;
}
.is-canvas #slab { display: block; }

.hero__foot {
  display: grid;
  grid-template-columns: minmax(0, 46ch) auto;
  gap: var(--sp-1) var(--sp-3);
  align-items: end;
}
.hero__lede {
  font-size: var(--s4); line-height: var(--lh4); letter-spacing: var(--tr4);
}
.hero__hint {
  font-size: var(--s1); letter-spacing: var(--tr1);
  text-transform: uppercase; color: var(--bone-2); text-align: right;
}
@media (max-width: 860px) {
  .hero__foot { grid-template-columns: 1fr; }
  .hero__hint { text-align: left; }
  .hero__stage { margin-right: 0; }
}

/* ---- 5. Section furniture --------------------------------- */

.sect { padding-top: var(--sp-5); padding-bottom: var(--sp-5); }

/* A 3px lime rule across the section head. A field, not a fleck. */
.sect__bar {
  border-top: 3px solid var(--lime);
  padding-top: var(--sp-h);
  margin-bottom: var(--sp-3);
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1.5em;
  font-size: var(--s1); letter-spacing: var(--tr1); text-transform: uppercase;
}
.sect__bar b { color: var(--lime); font-weight: 600; }
.sect__bar span { color: var(--bone-2); }

h2.sect__h {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--s5);
  line-height: var(--lh5);
  letter-spacing: var(--tr5);
  margin-bottom: var(--sp-2);
  max-width: 22ch;
}

.standfirst {
  font-size: var(--s4); line-height: var(--lh4); letter-spacing: var(--tr4);
  max-width: 44ch; margin-bottom: var(--sp-2);
}

p { max-width: var(--measure); }
p + p { margin-top: var(--sp-h); }

/* ---- 6. Positioning statement ----------------------------- */

/* The only italic at size on the page, and it marks the pivot of
   the sentence rather than decorating a noun. */
.stmt {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--s5);
  line-height: var(--lh5);
  letter-spacing: var(--tr5);
  max-width: 30ch;
  padding-bottom: var(--sp-3);
}
.stmt em { font-style: italic; color: var(--lime); }

.creds {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 var(--sp-3);
  border-top: 1px solid var(--rule-strong);
}
.cred { padding-top: var(--sp-1); }
.cred__k {
  display: block;
  font-family: var(--display); font-weight: 700;
  font-size: var(--s5); line-height: 0.95; letter-spacing: var(--tr5);
  color: var(--lime); margin-bottom: var(--sp-h);
}
.cred__v { font-size: var(--s2); line-height: var(--lh2); color: var(--bone); }
@media (max-width: 860px) {
  .creds { grid-template-columns: 1fr; gap: 0; }
  .cred { border-top: 1px solid var(--rule); padding-bottom: var(--sp-1); }
  .cred:first-child { border-top: 0; }
}

/* ---- 7. The record --------------------------------------- */

.idx-ctl {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4em 1.2em;
  font-size: var(--s1); letter-spacing: var(--tr1); text-transform: uppercase;
  color: var(--bone-2); margin-bottom: var(--sp-1);
}
button.srt {
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  background: none; border: 0; padding: 0.2em 0;
  color: var(--bone-2); cursor: pointer;
  border-bottom: 2px solid transparent;
}
button.srt[aria-pressed='true'] { color: var(--lime); border-bottom-color: var(--lime); }
@media (hover: hover) { button.srt:hover { color: var(--bone); } }

.rec { border-top: 1px solid var(--rule-strong); }
.rec__row {
  display: grid;
  grid-template-columns: 8ch minmax(0, 1fr) 16ch;
  gap: 0 var(--sp-2);
  padding: var(--sp-1) 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.rec__row:last-child { border-bottom: 0; }

/* The year column aligns, but not because of a feature flag. Measured
   25 Jul 2026: neither Playfair Display nor Open Sans ships 'tnum',
   'onum' or 'smcp' — a width-delta test on all six returns zero. Open
   Sans's digits happen to be uniform-width by default (1111, 8888,
   2017 and 2008 all measure identically), so the column is true here
   and a tabular-nums declaration would be decoration pretending to be
   craft. Playfair's figures are strongly proportional by contrast
   (94.73 vs 140.74 for the same two samples) — so never ask the
   display face to form a column of numbers. */
.rec__yr {
  font-size: var(--s2); color: var(--lime); padding-top: 0.55em;
}
.rec__ttl {
  font-family: var(--display); font-weight: 700;
  font-size: 38px; line-height: 1.0; letter-spacing: -0.02em;
  margin-bottom: var(--sp-h);
}
.rec__ttl cite { font-style: italic; }
/* The citation switches out of the display face: Playfair's figures
   are proportional and a bracketed year set in it reads as ornament
   rather than reference. Open Sans is the right tool for a citation. */
.rec__cit {
  font-family: var(--text); font-size: var(--s2); letter-spacing: 0;
  color: var(--bone-2); white-space: nowrap;
}
/* Entry lengths differ because the matters differ. */
.rec__note { font-size: var(--s3); color: var(--bone); max-width: 56ch; }
.rec__note.brief { color: var(--bone-2); }
.rec__kind {
  font-size: var(--s1); letter-spacing: var(--tr1); text-transform: uppercase;
  color: var(--bone-2); text-align: right; padding-top: 0.9em;
}

@media (max-width: 1180px) { .rec__ttl { font-size: 30px; } }
@media (max-width: 860px) {
  .rec__row { grid-template-columns: 1fr; gap: 0; }
  .rec__yr { padding-top: 0; margin-bottom: 0.3em; }
  .rec__kind { text-align: left; padding-top: var(--sp-h); }
  .rec__ttl { font-size: 26px; }
}

/* ---- 8. What we do --------------------------------------- */

/* Numbering used at size as structure, rather than a 12px "01 —"
   stamped above a heading. */
.svc { border-top: 1px solid var(--rule-strong); }
.svc__item {
  display: grid; grid-template-columns: 4.5ch minmax(0, 1fr);
  gap: 0 var(--sp-2);
  padding: var(--sp-1) 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.svc__item:last-child { border-bottom: 0; }
.svc__n {
  font-family: var(--display); font-weight: 700;
  font-size: 54px; line-height: 0.8; color: var(--lime);
  user-select: none;
}
.svc__name {
  font-family: var(--display); font-weight: 700;
  font-size: 34px; line-height: 1.05; letter-spacing: -0.02em;
  margin-bottom: var(--sp-h);
}
.svc__body { font-size: var(--s3); color: var(--bone); max-width: 56ch; }
.svc__body.tight { max-width: 44ch; color: var(--bone-2); }

@media (max-width: 1180px) { .svc__n { font-size: 40px; } .svc__name { font-size: 27px; } }
@media (max-width: 560px) {
  .svc__item { grid-template-columns: 1fr; gap: 0; }
  .svc__n { font-size: 30px; margin-bottom: 0.2em; }
  .svc__name { font-size: 23px; }
}

/* ---- 9. Who's who ---------------------------------------- */

.ppl { border-top: 1px solid var(--rule-strong); }
.person {
  display: grid; grid-template-columns: minmax(0, 1fr) 22ch;
  gap: 0 var(--sp-2);
  padding: var(--sp-h) 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.person:last-child { border-bottom: 0; }
.person__name {
  font-family: var(--display); font-weight: 400;
  font-size: 40px; line-height: 1.02; letter-spacing: -0.022em;
}
.person__role {
  font-size: var(--s1); letter-spacing: var(--tr1); text-transform: uppercase;
  color: var(--bone-2); text-align: right;
}
.person__bio {
  grid-column: 1;
  font-size: var(--s2); line-height: var(--lh2); color: var(--bone-2);
  max-width: 52ch; margin-top: var(--sp-h);
}
.person--lead .person__name { color: var(--lime); }

@media (max-width: 1180px) { .person__name { font-size: 32px; } }
@media (max-width: 860px) {
  .person { grid-template-columns: 1fr; }
  .person__role { text-align: left; margin-top: 0.25em; }
  .person__name { font-size: 26px; }
}

/* ---- 10. The lime plate ---------------------------------- */

/* One full inversion. This is where the accent stops being an
   accent and becomes the ground. */
.plate {
  background: var(--lime);
  color: var(--ink);
  padding-top: var(--sp-5);
  padding-bottom: var(--sp-5);
}
.plate ::selection { background: var(--ink); color: var(--lime); }
.plate .sect__bar { border-top-color: var(--ink); }
.plate .sect__bar b { color: var(--ink); }
.plate .sect__bar span { color: var(--ink); opacity: 0.62; }
.plate h2.sect__h { color: var(--ink); }
.plate .trio__item { border-top: 1px solid rgba(4, 20, 24, 0.28); }
.plate .trio__item p { color: rgba(4, 20, 24, 0.80); }

.trio {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 var(--sp-3);
}
.trio__item { padding-top: var(--sp-1); }
.trio__item h3 {
  font-family: var(--display); font-weight: 700;
  font-size: 28px; line-height: 1.05; letter-spacing: -0.018em;
  margin-bottom: var(--sp-h);
}
.trio__item p { font-size: var(--s2); line-height: var(--lh2); }
@media (max-width: 860px) { .trio { grid-template-columns: 1fr; gap: 0; } }

/* ---- 11. Contact ----------------------------------------- */

.contact { padding-top: var(--sp-5); padding-bottom: var(--sp-3); }
.contact__mail {
  display: inline-block;
  font-family: var(--display); font-weight: 700;
  font-size: var(--s5); line-height: 1.0; letter-spacing: var(--tr5);
  border-bottom: 3px solid var(--lime);
  padding-bottom: 0.06em;
  margin-bottom: var(--sp-1);
  word-break: break-word;
}
.contact__addr { font-size: var(--s2); color: var(--bone-2); }

/* ---- 12. Notes and colophon ------------------------------ */

.notes { padding-top: var(--sp-2); border-top: 1px solid var(--rule); }
.notes ol { list-style: none; }
.notes li {
  display: grid; grid-template-columns: 3ch minmax(0, 64ch); gap: 0 1.2ch;
  font-size: var(--s2); line-height: var(--lh2); color: var(--bone-2);
  margin-bottom: var(--sp-h);
}
.notes li > span:first-child {
  color: var(--lime); text-align: right;
}
.notes cite { font-style: italic; }

.colophon {
  padding-top: var(--sp-2); padding-bottom: var(--sp-3);
  font-size: var(--s2); line-height: var(--lh2); color: var(--bone-2);
  max-width: 70ch;
}
.colophon p + p { margin-top: var(--sp-h); }

/* ---- 13. Print ------------------------------------------- */

@media print {
  :root {
    --s1: 7pt; --s2: 8pt; --s3: 10pt; --s4: 13pt; --s5: 22pt; --s6: 30pt;
    --ink: #fff; --bone: #000; --bone-2: #444;
    --rule: #bbb; --rule-strong: #666; --lime: #4a7412;
    --pad: 0; --pad-r: 0;
  }
  @page { margin: 15mm 14mm; }
  body { background: #fff; color: #000; }
  .hero { min-height: 0; }
  #slab, .idx-ctl, .hero__hint { display: none !important; }
  .is-canvas .hero__h1 { position: static; opacity: 1; }
  .plate { background: #fff; color: #000; }
  .plate .trio__item p, .plate .sect__bar b, .plate .sect__bar span { color: #000; }
  .sect { padding: 8pt 0; break-inside: avoid; }
  .rec__row, .svc__item, .person, .trio__item { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
  p { orphans: 3; widows: 3; }
  a[href^='http']::after, a[href^='mailto']::after {
    content: ' (' attr(href) ')'; font-size: 7pt; color: #444;
  }
}