/* ==========================================================================
   Matthew H. Knowles — Police Procedures Expert
   Editorial profile · single page · no JavaScript · no web fonts

   Derived directly from the finalised print PDF (B — v8):
     · US Letter 612×792pt, 54pt margins  → 19% label column, 68rem measure
     · Warm near-black ink        #141312 → --ink
     · Body text                  #3A3835 → --body
     · Muted / italic             #6E6A63 → --muted
     · Three 0.75pt structural rules      → --ink hairlines (hero top,
                                            hero bottom, colophon top)
     · Single serif family throughout, small-caps tracked labels
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Ink — lifted verbatim from the PDF colour space */
  --ink:        #14120f;
  --body:       #3a3835;
  --muted:      #63605a;
  /* Small tracked labels only. Darkened from --muted at the client's request:
     6.27:1 -> 8.56:1 on white, 5.70:1 -> 7.79:1 on the warm band (AA -> AAA).
     Deliberately kept lighter than --body so the labels stay subordinate to
     the content and the approved hierarchy is unchanged. */
  --label-ink:  #4f4c45;
  --paper:      #ffffff;
  --paper-warm: #f6f4ef;

  /* Rules — structural rules keep the PDF's near-black; repeating rules are
     lightened, because 1px of #14120f on a backlit screen reads far heavier
     than 0.75pt of the same ink on coated stock. */
  --rule-strong: #14120f;
  --rule:        #ddd8ce;
  --rule-mid:    #c9c3b8;
  --rule-warm:   #d7d1c5;

  /* One family, as in the PDF. Charter and Sitka are screen-native editorial
     serifs shipped with macOS / Windows; Georgia is the universal floor. */
  --serif: Charter, "Bitstream Charter", "Sitka Text", Georgia, Cambria,
           "Times New Roman", Times, serif;

  /* Measure & grid */
  --maxw:    71rem;   /* 1136px — matches the PDF's 7in text block ratio     */
  --page-x:  clamp(1.375rem, 5.2vw, 3.5rem);
  --label-w: 13rem;   /* 208px = 19% of 1088px = the PDF's photo/label width */
  --gutter:  clamp(2rem, 4.4vw, 4rem);
  --measure: 60ch;

  /* Vertical rhythm. Tightened at the small end: on a phone the section
     padding alone was contributing ~600px of scroll across seven sections. */
  --section-y: clamp(1.9rem, 5.4vw, 4.5rem);
}

/* --------------------------------------------------------------------------
   2. Reset — minimal, intentional
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 0.96rem + 0.42vw, 1.1875rem);   /* 17 → 19px */
  line-height: 1.62;
  font-kerning: normal;
  font-variant-numeric: proportional-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, p, ul, address, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
address { font-style: normal; }

/* --------------------------------------------------------------------------
   3. Links — quiet, unmistakably actionable, generous targets
   -------------------------------------------------------------------------- */
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--rule-warm);
  transition: text-decoration-color 120ms linear, color 120ms linear;
}
a:hover { color: var(--ink); text-decoration-color: currentColor; }

a:focus-visible,
.skip:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 1px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
  text-decoration: none;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
}
.skip:focus { left: 0; }

/* --------------------------------------------------------------------------
   4. Shell & grid
   -------------------------------------------------------------------------- */
.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--page-x);
}

/* The editorial spine: a fixed label rail on the left, content on the right.
   Below 62rem it collapses to stacked label-over-content, which is exactly
   how the printed page behaves. */
.spine { display: grid; gap: 0.55rem; }

.spine__label { align-self: start; }
.spine__body > * + * { margin-top: 1.05em; }
.spine__body { max-width: var(--measure); }

@media (min-width: 62rem) {
  .spine {
    grid-template-columns: var(--label-w) minmax(0, 1fr);
    column-gap: var(--gutter);
    row-gap: 0;
  }
  .spine__label { padding-top: 0.42em; }   /* optically aligns caps to body  */

  /* A spine with no label — the hero, after WHERE MOST ENGAGEMENTS BEGIN was
     removed at the client's request. Without this the body would auto-place
     into column 1, the 208px label rail, and fall out of alignment with every
     other section on the page. :only-child rather than a modifier class, so
     any future label-less spine is handled without touching the markup. */
  .spine > .spine__body:only-child { grid-column: 2; }
}

/* Small-caps tracked label — the one typographic device that repeats.
   Kept at ≥0.75rem and ≤0.14em tracking for legibility. */
.label {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.135em;
  text-transform: uppercase;
  color: var(--label-ink);
  margin: 0;
  text-wrap: balance;   /* keeps two-word labels from orphaning a line */
}

/* --------------------------------------------------------------------------
   5. Masthead — a letterhead, not a hero banner
   -------------------------------------------------------------------------- */
.masthead {
  display: grid;
  gap: 1.5rem;
  /* Symmetric padding. With the tagline removed the block no longer needs an
     asymmetric foot, and equal air above and below reads as intentional
     rather than as a gap where something used to be. */
  padding-block: clamp(2.25rem, 5.5vw, 3.75rem);
}

.masthead__portrait img {
  width: clamp(6.5rem, 24vw, var(--label-w));
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid var(--rule);
  background: var(--paper-warm);
}

.identity__name {
  font-size: clamp(1.75rem, 1rem + 2.35vw, 2.375rem);   /* 28 → 38px */
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.017em;
  color: var(--ink);
  text-wrap: pretty;
}

/* Post-nominals sit on their own tracked credential line at every width.
   Measured reason: set inline beside the name they add ~110px, and with a
   wide serif (Georgia is wider than Times; some fallbacks wider still) that
   pushes "Matthew H. Knowles" onto a second line on desktop. Since the font
   is a system stack, its exact metrics are not knowable in advance — so the
   competing element is removed rather than the size tuned to one font.
   This is also how mastheads conventionally set post-nominals. */
.identity__post {
  display: block;
  margin-top: 0.55rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  /* Same tracked-caps treatment as .label, so it takes the same ink. It sits
     directly beside TELEPHONE / EMAIL in the masthead; leaving it on --muted
     after the labels were darkened made it read as accidentally faded. */
  color: var(--label-ink);
  white-space: nowrap;
}

.identity__firm {
  margin-top: 0.5rem;
  font-style: italic;
  font-size: 1rem;
  color: var(--muted);
}

.identity__role {
  margin-top: 0.95rem;
  font-size: clamp(0.9375rem, 0.85rem + 0.34vw, 1.0625rem);
  font-weight: 700;
  letter-spacing: 0.155em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.35;
}

/* Credibility line. Set as continuous inline text rather than flex items so
   it wraps like prose; the separator is bound to the preceding phrase with a
   no-break space so a lone "·" can never begin a line. */
.creds {
  margin-top: 0.9rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--body);
}
.creds li {
  display: inline;
  white-space: nowrap;
}
.creds li:not(:last-child)::after {
  content: "\0000a0· ";   /* 6-digit escape: keeps the trailing space intact */
  color: var(--rule-warm);
}

/* Contact lockup inside the masthead — the reason no sticky CTA bar is
   needed. On phones it lands ~430px down the page: above the fold. */
.lockup {
  display: grid;
  gap: 0.85rem;
  margin-top: 1.9rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
}
.lockup__item { display: grid; gap: 0.18rem; }

/* Touch targets. Measured, not assumed: with padding alone these boxes came
   out 34px, under the 44px touch guideline. min-height + inline-flex
   guarantees the real hit area on touch devices. Relaxed on large screens
   further down, where the pointer is a mouse. */
.lockup__value {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  min-height: 2.875rem;        /* 46px */
  padding-block: 0.2rem;
  width: fit-content;
  max-width: 100%;
  word-break: break-word;
}
.lockup__value--static { font-weight: 400; color: var(--body); }

/* Tablet: the lockup becomes a three-across letterhead row beneath the name.
   It is not placed beside the name until there is genuinely room for both —
   otherwise the name is forced to break, which is the one thing it must
   never do. */
/* Columns sized to their content, not forced thirds. With equal thirds a
   768px viewport gives each column exactly 208px, which is exactly what the
   email address measures in Sitka Text — right on the edge of breaking
   mid-word. Sizing to content removes the cliff entirely. The row also does
   not start until 40rem, so it never has to fit into a width that is too
   tight for it. */
@media (min-width: 40rem) {
  .lockup {
    grid-template-columns: repeat(3, auto);
    justify-content: space-between;
    gap: 1.25rem 1.5rem;
  }
}

@media (min-width: 75rem) {
  .masthead__identity {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2.5rem;
  }
  .identity { flex: 1 1 auto; min-width: 0; }
  .lockup {
    /* 13.5rem = 216px. Measured in Chrome on Windows: the email address needs
       208px in Sitka Text (the widest face in the stack, and the one Windows
       actually resolves). At the previous 11.5rem / 184px it broke mid-word
       as "Matt@MattKnowles.c / om". The name still clears ~110px of headroom
       at this width, so the extra 32px comes out of slack, not the name. */
    flex: 0 0 13.5rem;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.85rem;
    margin-top: 0.3rem;
    padding-top: 0;
    border-top: 0;
    text-align: right;
    justify-items: end;
  }
  /* Mouse pointer from here up: the 46px touch minimum is no longer needed,
     and holding it would leave the letterhead lockup taller than the name
     block beside it. Still well clear of WCAG 2.2 AA (24px). */
  .lockup__value { text-align: right; min-height: 2.125rem; }
}

@media (min-width: 62rem) {
  .masthead {
    grid-template-columns: var(--label-w) minmax(0, 1fr);
    column-gap: var(--gutter);
    row-gap: 0;
    align-items: start;
  }
  .masthead__portrait { grid-column: 1; grid-row: 1; }
  .masthead__identity { grid-column: 2; grid-row: 1; }
}

/* --------------------------------------------------------------------------
   6. Hero band — the only tonal shift on the page.
      In the PDF this block is bracketed by two 0.75pt rules; on screen the
      bracket is simply filled with warm paper. Full-bleed, square corners,
      no shadow: a section of a document, not a UI card.

      The band carries no label: WHERE MOST ENGAGEMENTS BEGIN was removed at
      the client's request, and the heading now opens the block on its own.
      The left rail stays empty so the band still aligns to the page spine —
      see .spine > .spine__body:only-child above.
   -------------------------------------------------------------------------- */
.band {
  background: var(--paper-warm);
  border-block: 1px solid var(--rule-strong);
}
/* The closing band carries a lighter top rule so the hero keeps primacy. */
.band--close { border-top-color: var(--rule-mid); }

.hero {
  padding-block: clamp(2.75rem, 7vw, 5rem);
}

.hero__title {
  font-size: clamp(1.9375rem, 1.1rem + 3.9vw, 3.125rem);   /* 31 → 50px */
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.021em;
  color: var(--ink);
  text-wrap: balance;
}

.hero__lede {
  margin-top: 1.25rem;
  font-size: clamp(1.125rem, 1rem + 0.55vw, 1.3125rem);
  line-height: 1.55;
  color: var(--body);
  max-width: 46ch;
}

.hero__note {
  margin-top: 1.35rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--rule-warm);
  font-style: italic;
  font-size: 1rem;
  color: var(--muted);
  max-width: 46ch;
}

/* --------------------------------------------------------------------------
   7. Body sections
   -------------------------------------------------------------------------- */
.section {
  padding-block: var(--section-y);
  border-top: 1px solid var(--rule);
}
.section:first-of-type { border-top: 0; }

.lede {
  font-size: clamp(1.125rem, 1.02rem + 0.42vw, 1.25rem);
  line-height: 1.56;
  color: var(--ink);
}

/* Specification list — hairline-ruled rows. Reads as a schedule in a
   technical document; no bullets, no icons, maximum scan speed. */
.spec {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 100%;
}
.spec li {
  border-top: 1px solid var(--rule);
  padding: 0.6rem 0;
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--ink);
}
/* Closing rule is carried by the last row's cells, not by the list box, so it
   never bridges the column gutter. */
.spec li:last-child { border-bottom: 1px solid var(--rule); }

.spine__body > .spec { margin-top: 1.35em; }
.spine__body > .lede + .spec { margin-top: 1.6em; }

@media (min-width: 34rem) {
  .spec { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
  .spec li { padding-right: 0.5rem; }
  .spec li:nth-last-child(-n+2) { border-bottom: 1px solid var(--rule); }
}

@media (min-width: 62rem) {
  .spine__body:has(> .spec) { max-width: min(100%, 44rem); }
}

/* ---- Running list ------------------------------------------------------
   AREAS OF ANALYSIS. Six short noun phrases set as one continuous
   middot-separated line — the keyword line of a journal abstract. Reads as
   a statement of scope rather than an inventory, gives the page a third
   distinct texture, and collapses six stacked rows into two or three lines
   on a phone. Separators are bound to the preceding phrase so a lone dot
   can never begin a line. */
.runlist {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  line-height: 1.75;
  color: var(--ink);
  max-width: 46ch;
}
.runlist li { display: inline; }
.runlist li:not(:last-child)::after {
  content: "\0000a0· ";
  color: var(--rule-mid, #c9c3b8);
}

/* The two-column MATERIALS REVIEWED list (.cols) was removed at the client's
   request — the materials vary case to case, so listing them fixed a set that
   is not fixed. Its styles are deleted rather than left dormant. */

.spine__body > .runlist { margin-top: 1.2em; }

/* ---- Statement band ----------------------------------------------------
   AVAILABILITY. The objectivity proof, set as a pull-statement in the
   page's second tinted band. */
.statement { padding-block: clamp(2.25rem, 5.5vw, 3.75rem); }
.statement__text {
  font-size: clamp(1.1875rem, 1.02rem + 0.8vw, 1.5rem);
  line-height: 1.42;
  color: var(--ink);
  max-width: 40ch;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   8. Colophon
   -------------------------------------------------------------------------- */
/* The closing band's bottom rule already divides the page here, so the
   colophon adds neither a second rule nor a gap — otherwise the two sit a
   few pixels apart and read as a mistake. */
.colophon {
  border-top: 0;
  padding-block: clamp(2.25rem, 5.5vw, 3.75rem) clamp(2rem, 4.5vw, 3.25rem);
  margin-top: 0;
}

.colophon__name {
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}
.colophon__name .identity__post {
  display: inline;
  margin-top: 0;
  font-size: 0.6em;
  letter-spacing: 0.055em;
}
.colophon__name .identity__post::before { content: ", "; }

.colophon__firm {
  margin-top: 0.35rem;
  font-style: italic;
  color: var(--muted);
  font-size: 1rem;
}

.colophon__grid {
  margin-top: 2rem;
  display: grid;
  gap: 1.35rem;
  border-top: 1px solid var(--rule);
  padding-top: 1.5rem;
}
.colophon__item { display: grid; gap: 0.22rem; }
.colophon__value {
  /* 17px, not 18px: at 18px the email needs ~220px but a colophon column is
     213px, so it broke mid-word here too. 17px also matches the masthead
     lockup, so the two contact blocks now read identically. */
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  min-height: 2.875rem;        /* 46px — see note on .lockup__value */
  padding-block: 0.2rem;
  width: fit-content;
  max-width: 100%;
  word-break: break-word;
}
.colophon__value--static { font-weight: 400; color: var(--body); }

.colophon__fine {
  margin-top: 2.25rem;
  font-size: 0.8125rem;
  letter-spacing: 0.045em;
  color: var(--muted);
}

/* Content-sized columns, same reasoning as the masthead lockup. Equal thirds
   put the email column at 205px against the 208px the address measures in
   Sitka Text, so it broke mid-word. Sizing to content ends the arithmetic
   race: the email column simply takes the width it needs, and the three
   items together use far less than the row provides. */
@media (min-width: 40rem) {
  .colophon__grid {
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    gap: 1.5rem 3rem;
  }
}
@media (min-width: 62rem) {
  .colophon .spine__body { max-width: min(100%, 44rem); }
}

/* --------------------------------------------------------------------------
   9. Print — the page returns to the printed sheet it came from.
      Attorneys print candidate experts, and this must land as one clean
      Letter page. Every rule here is explicit: at a 7in page box the screen
      breakpoints (48rem / 62rem / 75rem) do NOT match, so the desktop grid
      must be restated rather than inherited.
   -------------------------------------------------------------------------- */
@media print {
  @page { size: letter; margin: 0.7in 0.75in; }

  html, body {
    background: #fff;
    color: #000;
    font-size: 9.2pt;
    line-height: 1.34;
  }

  .skip { display: none !important; }

  .wrap { max-width: none; padding-inline: 0; }

  /* Restate the editorial spine at print measure. */
  .spine {
    display: grid;
    grid-template-columns: 1.45in minmax(0, 1fr);
    column-gap: 0.28in;
    row-gap: 0;
  }
  .spine__label { padding-top: 0.03in; }
  .spine__body  { max-width: none; }
  .spine__body > * + * { margin-top: 0.5em; }
  /* The label-less hero — restated here because the print grid is its own
     declaration and does not inherit the screen rule. */
  .spine > .spine__body:only-child { grid-column: 2; }

  .label { font-size: 6.6pt; letter-spacing: 0.11em; color: #444; }

  /* Masthead */
  .masthead {
    display: grid;
    grid-template-columns: 1.45in minmax(0, 1fr);
    column-gap: 0.28in;
    row-gap: 0;
    padding: 0 0 0.13in;
  }
  .masthead__portrait { grid-column: 1; grid-row: 1; }
  .masthead__identity { grid-column: 2; grid-row: 1;
                        display: flex; flex-wrap: nowrap;
                        align-items: flex-start; justify-content: space-between;
                        gap: 0.25in; }
  .identity { flex: 1 1 auto; min-width: 0; }
  .masthead__portrait img { width: 1.28in; border: 0.4pt solid #b0b0b0; }

  .identity__name { font-size: 19pt; letter-spacing: -0.015em; }
  .identity__post {
    display: inline; margin-top: 0;
    font-size: 0.5em; letter-spacing: 0.05em; color: #555;
  }
  .identity__post::before { content: ", "; }

  .identity__firm { font-size: 8.6pt; margin-top: 0.22rem; }
  .identity__role { font-size: 11pt; letter-spacing: 0.15em; margin-top: 0.42rem; }
  .creds          { font-size: 7.8pt; margin-top: 0.36rem; }

  .lockup {
    flex: 0 0 1.5in;
    display: grid; grid-template-columns: minmax(0, 1fr);
    gap: 0.3rem;
    margin-top: 0.06in; padding-top: 0; border-top: 0;
    text-align: right; justify-items: end;
  }
  .lockup__value { font-size: 8.8pt; padding-block: 0; text-align: right; }

  /* Hero — tint dropped, the two structural rules do the work, as on the
     original sheet. */
  .band {
    background: #fff !important;
    border-block: 0.75pt solid #000;
    -webkit-print-color-adjust: economy;
    print-color-adjust: economy;
  }
  .hero        { padding-block: 0.15in; }
  .hero__title { font-size: 17pt; letter-spacing: -0.018em; }
  .hero__lede  { font-size: 9.8pt; margin-top: 0.4rem; max-width: 4.6in; }
  .hero__note  { font-size: 8.8pt; margin-top: 0.35rem; padding-top: 0.3rem;
                 border-color: #c0c0c0; max-width: 4.6in; }

  /* Body */
  .section { padding-block: 0.11in; border-top: 0.4pt solid #c8c8c8; }
  .section:first-of-type { border-top: 0; }
  .lede    { font-size: 9.4pt; }

  .spec { grid-template-columns: 1fr 1fr; column-gap: 0.28in; }
  .runlist { font-size: 9pt; line-height: 1.5; max-width: none; }
  .spine__body > .runlist { margin-top: 0.5em; }

  .band--close { border-top: 0.4pt solid #9a9a9a; }
  .statement   { padding-block: 0.13in; }
  .statement__text { font-size: 10.5pt; line-height: 1.35; max-width: none; }
  .spec li { font-size: 8.6pt; padding: 0.14rem 0; border-top: 0.4pt solid #d2d2d2; }
  .spec li:last-child { border-bottom: 0; }
  .spec li:nth-last-child(-n+2) { border-bottom: 0.4pt solid #d2d2d2; }
  .spine__body > .spec { margin-top: 0.55em; }
  .spine__body > .lede + .spec { margin-top: 0.6em; }

  /* Colophon */
  .colophon { border-top: 0; padding-block: 0.13in 0; margin-top: 0; }
  .colophon__name { font-size: 11.5pt; }
  .colophon__firm { font-size: 8.6pt; margin-top: 0.16rem; }
  .colophon__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 0.5rem; padding-top: 0.34rem; gap: 0.4rem 0.25in;
    border-top: 0.4pt solid #d2d2d2;
  }
  .colophon__value { font-size: 8.8pt; padding-block: 0; }
  .colophon__fine  { margin-top: 0.5rem; font-size: 6.8pt; }

  a { text-decoration: none; color: #000; }

  /* Keep atomic units intact; do NOT force whole sections onto fresh pages. */
  .masthead, .band { break-inside: avoid; }
  .spec li, .lockup__item, .colophon__item { break-inside: avoid; }
  .label { break-after: avoid; }
}


/* --------------------------------------------------------------------------
   10. Forced-colors / high-contrast
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
  .band { border-block: 1px solid CanvasText; }
  .spec li, .spec, .section, .colophon, .lockup, .colophon__grid,
  .hero__note { border-color: CanvasText; }
  .masthead__portrait img { border: 1px solid CanvasText; }
}