/* ==========================================================================
   Eastpoint Advisory: site stylesheet
   --------------------------------------------------------------------------
   Governed by Brand Philosophy v1.1 and the Typography System:
     - Inter only (400 Regular, 500 Medium, 600 SemiBold), self-hosted
     - Dark Blue #0D2C73 for major headings and navigation emphasis only
     - Greys for hierarchy; white space does the rest
     - Thin rules; no boxes, shadows, gradients or icons

   Contents
     1. Fonts
     2. Colour tokens (light, then dark)
     3. Base
     4. Layout helpers
     5. Masthead
     6. Hero
     7. Sections (shared two-column pattern)
     8. Capability
     9. Principal
    10. Selected work
    11. Contact
    12. Footer
    13. Accessibility and motion
   ========================================================================== */


/* 1. Fonts ---------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter-latin-600-normal.woff2") format("woff2");
}


/* 2. Colour tokens --------------------------------------------------------
   Light values come straight from the Typography System.
   Dark values are derived: the brand blue is lightened so it stays legible
   on a dark ground (agreed with the principal); greys are inverted with a
   slight blue bias so they sit with the brand colour.                      */
:root {
  --bg:        #FFFFFF;
  --ink:       #2D2D2D;  /* Primary Dark Grey: body text */
  --ink-muted: #5A5A5A;  /* Secondary Dark Grey: metadata, captions */
  --rule:      #C8C8C8;  /* Light Grey: rules only */
  --accent:    #0D2C73;  /* Dark Blue: major headings, navigation */

  /* Logo mark colours (see tools/clean_marks.py) */
  --mark-ink:  #000000;  /* EASTPOINT */
  --mark-sub:  #5A5A5A;  /* ADVISORY */
  --mark-rule: #0D2C73;  /* the rule */

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #0F1218;
    --ink:       #E3E5EA;
    --ink-muted: #A3A8B3;
    --rule:      #2E343F;
    --accent:    #9DB1E3;
    --mark-ink:  #F1F2F5;
    --mark-sub:  #A3A8B3;
    --mark-rule: #7F97D6;
    color-scheme: dark;
  }
}
/* Explicit dark override (used by the preview host; harmless on the live site) */
:root[data-theme="dark"] {
  --bg:        #0F1218;
  --ink:       #E3E5EA;
  --ink-muted: #A3A8B3;
  --rule:      #2E343F;
  --accent:    #9DB1E3;
  --mark-ink:  #F1F2F5;
  --mark-sub:  #A3A8B3;
  --mark-rule: #7F97D6;
  color-scheme: dark;
}


/* 3. Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 1.5rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;          /* 17px on phones */
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;              /* the hero rule bleeds to the viewport edge */
  text-rendering: optimizeLegibility;
}
@media (min-width: 60rem) {
  body { font-size: 1.125rem; }  /* 18px on larger screens */
}

h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; }
p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a {
  color: var(--accent);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover { text-decoration-thickness: 2px; }

/* Logo marks: colours come from tokens so they follow light/dark mode. */
.mark { display: block; width: 100%; height: auto; }
.mark .mk-ink  { fill: var(--mark-ink); }
.mark .mk-sub  { fill: var(--mark-sub); }
.mark .mk-rule { fill: var(--mark-rule); }


/* 4. Layout helpers -------------------------------------------------------
   .wrap sets the page width and the side gutter (min 20px on phones).     */
.wrap {
  --gutter: clamp(1.25rem, 5vw, 3rem);
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* A hairline across the top of a .wrap block, aligned to the text edges
   (a plain border would run out into the side gutters). */
.rule-top {
  background: linear-gradient(var(--rule), var(--rule)) no-repeat;
  background-size: calc(100% - 2 * var(--gutter)) 1px;
  background-position: var(--gutter) 0;
}


/* 5. Masthead ------------------------------------------------------------- */
.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  padding-block: 2rem 0;
}
.masthead__mark {
  display: block;
  width: clamp(9.5rem, 30vw, 13rem);
}
.masthead__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}
.masthead__nav a {
  color: var(--ink-muted);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  padding-block: 0.25rem;
}
.masthead__nav a:hover { color: var(--accent); }


/* 6. Hero ------------------------------------------------------------------
   The navy rule echoes the rule in the primary mark and runs off the right
   edge of the page. It is the only graphic device on the site.            */
.hero {
  padding-block: clamp(3.5rem, 10vw, 7rem) clamp(3rem, 8vw, 5.5rem);
}
.hero__title {
  max-width: 24ch;
  color: var(--accent);
  font-size: clamp(1.875rem, 1.2rem + 2.6vw, 3.125rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.hero__lede {
  max-width: 40rem;
  margin-top: 1.75rem;
  color: var(--ink);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.55;
}
.hero__rule {
  height: 3px;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  background: var(--mark-rule);
  /* extend from the text edge to the right-hand edge of the viewport */
  margin-right: calc(50% - 50vw);
  width: auto;
}


/* 7. Sections --------------------------------------------------------------
   One pattern for every section: heading column + body column.
   Phones: stacked. 60rem and up: 3 / 9 split.                              */
.section {
  display: grid;
  gap: 1.5rem;
  padding-block: clamp(3rem, 8vw, 5.5rem);
}

@media (min-width: 60rem) {
  .section {
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    gap: 3rem;
  }
}

.section__head h2 {
  color: var(--accent);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  line-height: 1.25;
}
/* short brand rule above each section heading */
.section__head h2::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2px;
  margin-bottom: 1rem;
  background: var(--mark-rule);
}
@media (min-width: 60rem) {
  .section__head { position: sticky; top: 1.5rem; align-self: start; }
  /* Drop the body column by the height of the rule above each heading
     (2px + 1rem), so the first line of the body sits level with the
     heading text rather than with the rule. */
  .section__body { padding-top: calc(1rem + 2px); }
}

.section__body { display: grid; gap: clamp(2rem, 5vw, 3rem); min-width: 0; }

.intro {
  max-width: 42rem;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
}

/* Level-3 headings inside sections */
.section__body h3 {
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
}

/* Standard bullet list: small round dot, hanging indent (Typography System L1) */
.area ul li,
.engagements__list li {
  position: relative;
  padding-left: 1.1rem;
}
.area ul li::before,
.engagements__list li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.72em;
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: var(--ink-muted);
}


/* 8. Capability ----------------------------------------------------------- */
.areas {
  display: grid;
  gap: 2.5rem 3rem;
}
@media (min-width: 44rem) {
  .areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.area {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}
.area > p { color: var(--ink); }
.area ul {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.25rem;
  color: var(--ink-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.engagements {
  display: grid;
  gap: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}
/* CSS columns (not grid) so each column flows on its own and the spacing
   between items stays even when one item wraps to more lines than its neighbour. */
.engagements__list li { break-inside: avoid; margin-bottom: 0.5rem; }
@media (min-width: 44rem) {
  .engagements__list { columns: 2; column-gap: 3rem; }
}


/* 9. Principal ------------------------------------------------------------ */
.person { display: grid; gap: 0.25rem; }
.section__body .person__name {
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  letter-spacing: -0.01em;
}
.person__role { color: var(--ink-muted); font-size: 0.9375rem; }

.prose { display: grid; gap: 1.1rem; max-width: 42rem; }

/* Proof points: a quiet row of four, two by two on phones */
.figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem 2rem;
}
@media (min-width: 60rem) {
  .figures { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.figure {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}
.figure dt {
  color: var(--accent);
  font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.125rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.figure dd {
  color: var(--ink-muted);
  font-size: 0.875rem;
  line-height: 1.45;
}

/* Career and education record */
.record { display: grid; gap: 1rem; }
.record__list { border-top: 1px solid var(--rule); }
.record__list li {
  display: grid;
  gap: 0.15rem 2rem;
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 44rem) {
  .record__list li { grid-template-columns: 7rem minmax(0, 1fr); }
  .record__list li .record__role { grid-column: 2; }
  .record__list--plain li { grid-template-columns: minmax(0, 1fr); }
  .record__list--plain li .record__role { grid-column: 1; }
}
.record__years {
  color: var(--ink-muted);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}
.record__org { font-weight: 500; }
.record__role { color: var(--ink-muted); font-size: 0.9375rem; }


/* 10. Selected work -------------------------------------------------------
   One column on phones, two on tablets, three on wide screens.             */
.cards {
  display: grid;
  gap: 2.5rem 2rem;
}
@media (min-width: 44rem) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 72rem) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.card {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding-top: 1.25rem;
  border-top: 2px solid var(--mark-rule);
}
.card__area {
  color: var(--ink-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.section__body .card__title { font-size: 1.0625rem; line-height: 1.3; text-wrap: pretty; }
.card__client { color: var(--ink); font-size: 0.9375rem; font-weight: 500; }
.card__text { color: var(--ink-muted); font-size: 0.9375rem; line-height: 1.5; }

/* Draft cards awaiting client consent (review only; see note in src/index.html) */
.card.is-pending { border-top-style: dashed; }
.card__status {
  margin-top: 0.25rem;
  color: var(--ink-muted);
  font-size: 0.8125rem;
  font-style: italic;
}


/* 11. Contact ------------------------------------------------------------- */
.contact { align-items: start; }
.identity { max-width: 36rem; }
.contact__lead { display: grid; gap: 1rem; }
.contact__email {
  font-size: clamp(1rem, 0.9rem + 0.6vw, 1.25rem);
  font-weight: 500;
  overflow-wrap: anywhere;
}
.identity { border-top: 1px solid var(--rule); }
.identity > div {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 1rem;
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--rule);
  font-size: 0.9375rem;
}
.identity dt { color: var(--ink-muted); }
.identity dd { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

/* Location line switch, driven by <body data-location="national|regional"> */
.loc { display: none; }
[data-location="national"] .loc--national,
[data-location="regional"] .loc--regional { display: inline; }


/* 12. Footer -------------------------------------------------------------- */
.footer {
  display: grid;
  gap: 1.25rem;
  padding-block: 3rem 3.5rem;
}
.footer__mark { width: clamp(11rem, 40vw, 14rem); }
.footer__ack,
.footer__meta {
  max-width: 44rem;
  color: var(--ink-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}


/* 13. Accessibility and motion ------------------------------------------- */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg);
  color: var(--accent);
  z-index: 10;
}
.skip-link:focus { top: 1rem; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

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

@media print {
  .masthead__nav, .skip-link, .hero__rule { display: none; }
  body { font-size: 10.5pt; }
  .section { break-inside: avoid; }
}