/* ============================================================
   FOX WILLIAMS — PROFESSIONAL SERVICES GROUP
   v3 "The Record"

   A document, not a landing page.

   Typeset in the firm's own faces: Playfair Display carries every
   display line, Open Sans does body, tabular data and micro-labels.
   Open Sans never carries the voice — it is the most-used sans in
   professional services and cannot be asked to sound like anyone.

   Rules of this stylesheet, held to deliberately:
     - Fixed size steps, re-declared whole at each breakpoint.
       No per-element clamp(). The page has sizes, not a formula.
     - Tracking and leading are set PER SIZE, not globally.
     - Vertical space is a multiple of one computed body line (--line).
     - Structure is drawn with hairlines, never boxes, shadows or cards.
     - Rules sit ABOVE list items, so a list has a top, not a border.
       The trailing rule is always suppressed.
     - All-caps is for 11px labels only. Never for headings.
     - Nothing animates except at the user's own pointer.
   ============================================================ */

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

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  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, 'Times New Roman', serif;
  --text: 'Open Sans', system-ui, -apple-system, sans-serif;

  /* Fox Williams' own colours. Paper is cooled towards green rather
     than warmed towards cream — the warm-cream register now reads as
     a house style of its own, and the brief is blue and green. */
  --paper:      #f4f5f1;
  --paper-sunk: #eceee6;
  --ink:        #101a1d;
  --navy:       #003f5f;
  --lime:       #8dc63f;   /* structure and marks only, never text  */
  --lime-deep:  #4a7412;   /* the lime, taken to a readable weight  */
  --grey:       #4f5c5d;   /* marginalia, metadata                  */
  --grey-soft:  #8b9691;
  --rule:       #c7ccc2;
  --rule-soft:  #dcdfd6;

  /* Six sizes. That is all there is. */
  --s1: 11px;   /* labels, folio, marginalia, captions   */
  --s2: 13px;   /* index metadata                        */
  --s3: 18px;   /* body                                  */
  --s4: 21px;   /* standfirst — deliberately 21 on 18    */
  --s5: 27px;   /* section titles                        */
  --s6: 42px;   /* the statement. 2.33x body, not 4x.    */

  /* Leading, per size. */
  --lh1: 1.4;
  --lh2: 1.45;
  --lh3: 1.55;
  --lh4: 1.35;
  --lh5: 1.15;
  --lh6: 1.06;

  /* Tracking, per size: negative above text, zero at text,
     positive below. */
  --tr1:  0.11em;
  --tr2:  0.005em;
  --tr3:  0;
  --tr4: -0.005em;
  --tr5: -0.01em;
  --tr6: -0.02em;

  /* One line of body text. Every vertical value derives from it. */
  --line: calc(var(--s3) * var(--lh3));      /* 27.9px */
  --sp-q: calc(var(--line) * 0.25);
  --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);

  /* The spine. Margins are unequal on purpose: the page has a
     left edge it hangs from, not a centre it balances on. */
  --m-left:  96px;
  --m-right: 48px;
  --col-note: 148px;   /* marginalia and hung numbers live here */
  --col-gap:  34px;
  --measure:  62ch;

  /* The right edge of every ruled thing on the page. Measured, not
     derived: note column + gap + measure + the kind column, rounded
     up for air. Every rule, every row and the section marks stop
     here, so the document has one right edge instead of drifting
     out to whatever the window happens to be. */
  --ledger: min(880px, 100%);

  --link-thick: 1px;
  --link-offset: 0.16em;

  /* Motion is off by default and exists only as an enhancement.
     Every duration on this site is expressed in terms of --1s, so
     the resting state of the stylesheet is "nothing moves" rather
     than a `reduce` override bolted on at the end. */
  --1s: 1ms;
}

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

@media (max-width: 1100px) {
  :root {
    --m-left: 56px;
    --m-right: 40px;
    --col-note: 118px;
    --col-gap: 26px;
  }
}

/* Tablet: the whole scale is re-declared, not interpolated. */
@media (max-width: 900px) {
  :root {
    --s1: 11px;
    --s2: 13px;
    --s3: 17px;
    --s4: 20px;
    --s5: 24px;
    --s6: 34px;
    --m-left: 40px;
    --m-right: 32px;
  }
}

/* Phone: again re-declared. Note s1 does not shrink — 11px is the
   floor for a caption, whatever the viewport does. */
@media (max-width: 560px) {
  :root {
    --s1: 11px;
    --s2: 12px;
    --s3: 16px;
    --s4: 19px;
    --s5: 21px;
    --s6: 28px;
    --m-left: 22px;
    --m-right: 22px;
  }
}

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

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

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--s3);
  font-weight: 400;
  line-height: var(--lh3);
  letter-spacing: var(--tr3);
  padding: 0 var(--m-right) var(--sp-5) var(--m-left);
}

::selection { background: var(--lime); color: var(--ink); }

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

/* Links are underlined always, in the accent, at a controlled
   distance. Hover thickens; it does not move, colour-shift or grow. */
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--lime-deep);
  text-decoration-thickness: var(--link-thick);
  text-underline-offset: var(--link-offset);
  text-decoration-skip-ink: auto;
  transition: text-decoration-thickness calc(var(--1s) * 0.12) linear;
}
@media (hover: hover) {
  a:hover { text-decoration-thickness: 2px; }
}

h1, h2, h3 { font-weight: 400; }
em, cite, i { font-style: italic; }

/* Read by screen readers, absent from the page. The × between two
   merging firms is a typographic mark, not a word, so it is hidden
   from assistive technology and "and" is supplied instead. */
.vh {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Footnote markers. Small, raised a little, in the accent — and
   never so large that they interrupt the line they sit on. */
sup {
  font-size: 0.62em;
  line-height: 0;
  vertical-align: super;
  color: var(--lime-deep);
  letter-spacing: 0;
  padding-left: 0.12em;
}

/* ---- 4. The document grid --------------------------------- */

/* Four columns: marginalia, gap, text, and slack. The slack column
   is what keeps the text off centre at every width — the page has a
   spine on the left rather than a midline. */
.doc {
  position: relative;
  display: grid;
  grid-template-columns:
    var(--col-note)
    var(--col-gap)
    minmax(0, var(--measure))
    1fr;
  column-gap: 0;
}

/* One hairline, running the full height of the document, dividing
   margin from text. It costs nothing, carries no content, and is
   the single thing that makes the page read as a set page rather
   than a stack of blocks. */
/* Drawn once, on the outermost document only. Sections repeat the
   same grid, so if this were not scoped the line would restart at
   every section and break exactly where it should be continuous. */
main.doc::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--col-note) + (var(--col-gap) / 2));
  width: 1px;
  background: var(--rule-soft);
  pointer-events: none;
}

@media (max-width: 760px) {
  .doc::before { display: none; }
}

.doc > * { grid-column: 3; }        /* text column by default */
.doc > .full { grid-column: 1 / -1; }
.doc > .note-col { grid-column: 1; }

@media (max-width: 760px) {
  .doc { display: block; }
}

/* ---- 5. Marginalia and hung numbers ----------------------- */

/* A marginal note sits in column one, ranged right so it reads
   against the text's left edge. It sets its own measure and is
   allowed to run longer than the paragraph it annotates. */
.mnote {
  font-size: var(--s1);
  line-height: var(--lh1);
  letter-spacing: 0.01em;
  color: var(--grey);
  text-align: right;
  padding-top: 0.35em;
}
.mnote b {
  display: block;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: var(--tr1);
  text-transform: uppercase;
  font-size: 10px;
  margin-bottom: 0.35em;
}

@media (max-width: 760px) {
  .mnote {
    text-align: left;
    border-top: 1px solid var(--rule);
    padding-top: var(--sp-h);
    margin: var(--sp-1) 0;
    max-width: 40ch;
  }
}

/* A hung number is pulled out of the text column and set flush
   right in the margin column, so it aligns to the text's edge.
   Tabular figures so 1 and 8 and 10 all sit in the same column. */
.hung {
  float: left;
  width: var(--col-note);
  margin-left: calc((var(--col-gap) + var(--col-note)) * -1);
  text-align: right;
  font-size: var(--s1);
  line-height: 1.85;
  letter-spacing: var(--tr1);
  color: var(--lime-deep);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1;
  user-select: none;
}

@media (max-width: 760px) {
  .hung {
    float: none;
    width: auto;
    margin: 0 0 0.2em 0;
    text-align: left;
    display: block;
    line-height: 1.4;
  }
}

/* ---- 6. Masthead ----------------------------------------- */

/* Letterhead, not a hero. Small, factual, ranged left, and it
   carries a reference line and a date because a document does. */
.mast {
  /* Two lines above, three below: the statement needs room to be a
     title page rather than a subheading of the address. */
  padding: var(--sp-2) 0 var(--sp-3);
  font-size: var(--s1);
  line-height: var(--lh1);
  letter-spacing: var(--tr1);
  text-transform: uppercase;
  color: var(--grey);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em 2.4em;
  align-items: baseline;
}
.mast strong {
  color: var(--ink);
  font-weight: 600;
}
.mast .mast__ref {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 760px) {
  .mast .mast__ref { margin-left: 0; }
}

/* A rule that stops short of the column edge. A full-bleed hairline
   is the thing every template draws; a partial one was decided. */
.rule-top {
  border-top: 1px solid var(--ink);
  width: calc(100% - 3rem);
}

/* ---- 7. Section furniture -------------------------------- */

/* A section mark is a small label under a rule, not a large
   heading. The heading that follows carries the voice. */
.sect {
  margin-top: var(--sp-5);
}
.sect:first-of-type { margin-top: var(--sp-3); }

.sect__mark {
  grid-column: 1 / -1;
  max-width: var(--ledger);
  border-top: 1px solid var(--ink);
  padding-top: var(--sp-q);
  margin-bottom: var(--sp-1);
  font-size: var(--s1);
  letter-spacing: var(--tr1);
  text-transform: uppercase;
  color: var(--grey);
  display: flex;
  justify-content: space-between;
  gap: 1.5em;
}
.sect__mark span:last-child {
  color: var(--grey-soft);
  font-variant-numeric: tabular-nums;
}

h2.sect__title {
  font-family: var(--display);
  font-size: var(--s5);
  line-height: var(--lh5);
  letter-spacing: var(--tr5);
  /* Playfair sets low in its box at display sizes; pull it up so it
     registers against the rule above rather than floating. */
  margin-top: -0.09em;
  margin-bottom: var(--sp-h);
  max-width: 28ch;
}

/* ---- 8. The statement ------------------------------------ */

h1.statement {
  font-family: var(--display);
  font-size: var(--s6);
  line-height: var(--lh6);
  letter-spacing: var(--tr6);
  margin-top: -0.11em;      /* cap-height trim, by eye, at this size */
  margin-bottom: var(--sp-1);
  max-width: 24ch;
}
h1.statement em {
  font-style: italic;
}

/* The standfirst is 21px against 18px body. Not a scale step away —
   three points, because at four it competes with the statement and
   at nothing it disappears. */
p.standfirst {
  font-size: var(--s4);
  line-height: var(--lh4);
  letter-spacing: var(--tr4);
  max-width: 46ch;
  margin-bottom: var(--sp-1);
}

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

.lede-note { margin-top: var(--sp-1); }

/* ---- 9. The record (matters index) ----------------------- */

/* A ruled text index, not cards. No images. Years in a true
   tabular column. Sorted as the firm set it, unless the reader
   asks otherwise. */

.idx-controls {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5em 1em;
  font-size: var(--s1);
  letter-spacing: var(--tr1);
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: var(--sp-h);
}
.idx-controls__label { color: var(--grey-soft); }

button.srt {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  background: none;
  border: 0;
  padding: 0.15em 0;
  color: var(--grey);
  cursor: pointer;
  border-bottom: 1px solid transparent;
}
button.srt[aria-pressed='true'] {
  color: var(--ink);
  border-bottom-color: var(--lime-deep);
}
@media (hover: hover) {
  button.srt:hover { color: var(--ink); }
}

table.idx {
  grid-column: 1 / -1;
  width: var(--ledger);
  border-collapse: collapse;
  text-align: left;
}

/* Column heads as micro-labels, not headings. They name the columns
   for anyone sorting and are otherwise meant to disappear. */
.idx thead th {
  font-weight: 600;
  font-size: var(--s1);
  line-height: var(--lh1);
  letter-spacing: var(--tr1);
  text-transform: uppercase;
  color: var(--grey-soft);
  padding: 0 var(--col-gap) var(--sp-q) 0;
  vertical-align: bottom;
}
.idx thead th:last-child { padding-right: 0; }

table.idx caption {
  text-align: left;
  font-size: var(--s1);
  color: var(--grey-soft);
  letter-spacing: var(--tr1);
  text-transform: uppercase;
  padding-bottom: var(--sp-q);
}

.idx tbody tr { border-top: 1px solid var(--rule); }
.idx tbody tr:first-child { border-top: 1px solid var(--ink); }
/* No rule under the final row: the list has a top, not a box. */

.idx td {
  padding: var(--sp-h) var(--col-gap) var(--sp-1) 0;
  vertical-align: baseline;
}
.idx td:last-child { padding-right: 0; }

.idx .c-year {
  width: var(--col-note);
  font-size: var(--s2);
  line-height: var(--lh2);
  letter-spacing: var(--tr2);
  color: var(--grey);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1;
  white-space: nowrap;
}
.idx .c-main { max-width: var(--measure); }
.idx .c-kind {
  width: 15ch;
  font-size: var(--s1);
  line-height: var(--lh1);
  letter-spacing: var(--tr1);
  text-transform: uppercase;
  color: var(--grey-soft);
}

.idx h3 {
  font-family: var(--display);
  font-size: var(--s4);
  line-height: var(--lh4);
  letter-spacing: var(--tr4);
  margin-bottom: 0.1em;
}
/* Case names are italic and the rest is roman. This is the whole
   grammar of a law report and it costs one rule. */
.idx h3 cite { font-style: italic; }

.idx p {
  font-size: var(--s2);
  line-height: var(--lh2);
  letter-spacing: var(--tr2);
  color: var(--grey);
  max-width: 58ch;
  margin-top: var(--sp-q);
}
/* Two entries carry a full paragraph and the rest carry a line,
   because two of them earned it. Equal-length entries are the
   surest sign that nobody read them. */
.idx p.long { color: var(--ink); }

.idx .cit {
  font-size: var(--s2);
  color: var(--grey);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .idx, .idx tbody, .idx tr, .idx td { display: block; width: auto; }
  .idx thead { display: none; }
  .idx tbody tr { padding: var(--sp-h) 0 var(--sp-1); }
  .idx td { padding: 0; }
  .idx .c-year { margin-bottom: 0.2em; }
  .idx .c-kind { margin-top: var(--sp-q); }
}

/* ---- 10. Practice areas ---------------------------------- */

.areas { grid-column: 3; }
.area {
  border-top: 1px solid var(--rule);
  padding: var(--sp-h) 0 var(--sp-1);
}
.area:first-child { border-top: 1px solid var(--ink); }
.area h3 {
  font-family: var(--display);
  font-size: var(--s4);
  line-height: var(--lh4);
  letter-spacing: var(--tr4);
  margin-bottom: var(--sp-q);
}
.area p {
  font-size: var(--s3);
  color: var(--grey);
}
.area p.tight { max-width: 52ch; }

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

/* Alphabetical, flat, no seniority ladder and no photographs.
   Rank is metadata; it is not the ordering principle. */
.people { grid-column: 1 / -1; max-width: var(--ledger); }

.person {
  display: grid;
  grid-template-columns: var(--col-note) var(--col-gap) minmax(0, var(--measure));
  border-top: 1px solid var(--rule);
  padding: var(--sp-h) 0;
}
.person:first-child { border-top: 1px solid var(--ink); }

.person__role {
  grid-column: 1;
  text-align: right;
  font-size: var(--s1);
  line-height: var(--lh1);
  letter-spacing: var(--tr1);
  text-transform: uppercase;
  color: var(--grey-soft);
  padding-top: 0.5em;
}
.person__body { grid-column: 3; }
.person__name {
  font-family: var(--display);
  font-size: var(--s4);
  line-height: var(--lh4);
  letter-spacing: var(--tr4);
}
.person__body p {
  font-size: var(--s2);
  line-height: var(--lh2);
  letter-spacing: var(--tr2);
  color: var(--grey);
  margin-top: var(--sp-q);
  max-width: 56ch;
}

@media (max-width: 760px) {
  .person { display: block; padding: var(--sp-h) 0; }
  .person__role { text-align: left; padding: 0 0 0.2em; }
}

/* ---- 12. Short sections ---------------------------------- */

.trio { grid-column: 3; }
.trio__item {
  border-top: 1px solid var(--rule);
  padding: var(--sp-h) 0 var(--sp-1);
}
.trio__item:first-child { border-top: 1px solid var(--ink); }
.trio__item h3 {
  font-family: var(--display);
  font-size: var(--s4);
  line-height: var(--lh4);
  letter-spacing: var(--tr4);
  margin-bottom: var(--sp-q);
}
.trio__item p { font-size: var(--s3); color: var(--grey); }

/* ---- 13. Contact and colophon ---------------------------- */

.contact { grid-column: 3; margin-top: var(--sp-1); }
.contact__mail {
  font-family: var(--display);
  font-size: var(--s5);
  line-height: var(--lh5);
  letter-spacing: var(--tr5);
  display: inline-block;
  margin-bottom: var(--sp-h);
}
.contact__addr {
  font-size: var(--s2);
  line-height: var(--lh2);
  color: var(--grey);
}

/* Footnotes: real hung numbers, tabular, in their own column. */
/* Notes take the document's own columns rather than a grid of their
   own: the numeral hangs in the margin column, the note sits in the
   text column, and the full-height hairline falls cleanly in the gap
   between them instead of striking through the prose. */
.notes {
  grid-column: 1 / -1;
  max-width: var(--ledger);
  margin-top: var(--sp-3);
  border-top: 1px solid var(--ink);
  padding-top: var(--sp-h);
}
.notes ol { list-style: none; }
.notes li {
  display: grid;
  grid-template-columns:
    var(--col-note)
    var(--col-gap)
    minmax(0, var(--measure));
  font-size: var(--s1);
  line-height: var(--lh1);
  color: var(--grey);
  margin-bottom: var(--sp-h);
}
.notes li > span:first-child {
  grid-column: 1;
  text-align: right;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1;
  color: var(--lime-deep);
}
.notes li > span:last-child { grid-column: 3; }

/* The colophon sits in the text column, right of the hairline. */
.colophon {
  grid-column: 3;
  margin-top: var(--sp-2);
  border-top: 1px solid var(--rule);
  padding-top: var(--sp-h);
  font-size: var(--s1);
  line-height: var(--lh1);
  color: var(--grey-soft);
}

@media (max-width: 760px) {
  .notes li { display: block; }
  .notes li > span:first-child { display: inline; }
}
.colophon p + p { margin-top: var(--sp-h); }

/* ---- 14. Motion -------------------------------------------
   There is none, beyond a link thickening under the pointer.
   Nothing arrives on scroll. Nothing counts up. Nothing fades in
   because the reader got to it. See --1s at the top: motion is
   opt-in, so there is no `reduce` override to write here.
   ---------------------------------------------------------- */

/* ---- 15. Print --------------------------------------------
   In points, because this is a document and someone will print it
   for a partners' meeting.
   ---------------------------------------------------------- */

@media print {
  :root {
    --s1: 7pt;
    --s2: 8pt;
    --s3: 10pt;
    --s4: 12pt;
    --s5: 16pt;
    --s6: 26pt;
    --m-left: 0;
    --m-right: 0;
    --col-note: 90pt;
    --col-gap: 14pt;
    --paper: #fff;
    --ink: #000;
    --grey: #333;
    --grey-soft: #555;
    --rule: #999;
  }
  @page { margin: 16mm 14mm; }
  body { background: #fff; }
  .idx-controls { display: none; }        /* sorting is a screen affordance */
  a { text-decoration: none; }
  a[href^='http']::after,
  a[href^='mailto']::after {
    content: ' (' attr(href) ')';
    font-size: 7pt;
    color: #555;
  }
  .sect { break-inside: avoid; }
  .idx tbody tr, .person, .area, .trio__item { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
  p { orphans: 3; widows: 3; }
}