/* ==========================================================================
   Second Chance Opportunities — design system
   One stylesheet, no build step, no third-party request. Fonts are served
   from assets/fonts/ so the site renders identically offline and makes no
   call to anyone else's CDN.

   Colour contrast is checked, not eyeballed. Every token used for text meets
   WCAG AA at the size it is used; --brass-rule is decorative only and never
   carries text. See brand/index.html for the measured ratios.
   ========================================================================== */

/* --- fonts ---------------------------------------------------------------
   Variable woff2, two axes of weight each. The latin-ext files are declared
   so accented characters render, but unicode-range means a browser only
   fetches them if the page actually uses those glyphs. English pages never
   pay for them. */

@font-face {
  font-family: 'Source Serif 4'; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url('../fonts/source-serif-4-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4'; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url('../fonts/source-serif-4-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- tokens -------------------------------------------------------------- */

:root {
  /* brand */
  --navy-900: #091A2E;
  --navy-800: #0B2039;
  --navy:     #0F2744;   /* primary — carried over from the original page */
  --navy-600: #1C3C60;
  --mist:     #A8C0D6;
  --brass:      #846429; /* accent, text-safe   — 5.02:1 on cream */
  --brass-rule: #9C7A3C; /* accent, decorative  — rules and marks only */

  /* surfaces and text, light */
  --bg:        #F7F5F0;
  --bg-sunk:   #EFEBE2;
  --surface:   #FFFFFF;
  --text:      #15202B;
  --text-2:    #4A5461;
  --text-mute: #5A6B7E;  /* 5.02:1 on --bg, safe at label sizes */
  --rule:      #E2DDD2;
  --rule-soft: #EDE9E1;
  --on-navy:   #FFFFFF;
  --on-navy-2: #A8C0D6;
  --navy-rule: #21384F;

  /* type */
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --t--1: 0.8125rem;
  --t-0:  1.0625rem;
  --t-1:  1.1875rem;
  --t-2:  clamp(1.35rem, 1.2rem + 0.6vw, 1.6rem);
  --t-3:  clamp(1.7rem, 1.4rem + 1.3vw, 2.3rem);
  --t-4:  clamp(2.1rem, 1.55rem + 2.4vw, 3.15rem);

  /* space, rhythm, chrome */
  --gutter: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  --wide:   1100px;
  --prose:  40rem;
  --radius: 3px;
  --focus:  var(--brass);
}

/* Dark mode follows the system unless the page asks for light explicitly. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg:        #0B1622;
    --bg-sunk:   #0E1B29;
    --surface:   #122536;
    --text:      #E8EDF2;
    --text-2:    #B9C8D6;
    --text-mute: #9FB3C8;
    --rule:      #1E3246;
    --rule-soft: #17293A;
    --navy:      #0E2138;
    --navy-900:  #081320;
    --brass:      #C8A05A;
    --brass-rule: #A6833F;
    --navy-rule: #1E3246;
  }
}
:root[data-theme='dark'] {
  --bg:        #0B1622;
  --bg-sunk:   #0E1B29;
  --surface:   #122536;
  --text:      #E8EDF2;
  --text-2:    #B9C8D6;
  --text-mute: #9FB3C8;
  --rule:      #1E3246;
  --rule-soft: #17293A;
  --navy:      #0E2138;
  --navy-900:  #081320;
  --brass:      #C8A05A;
  --brass-rule: #A6833F;
  --navy-rule: #1E3246;
}

/* --- reset --------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--t-0);
  line-height: 1.65;
  font-feature-settings: 'kern' 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img, svg { display: block; max-width: 100%; }
:where(h1, h2, h3, h4) { font-family: var(--serif); font-weight: 600; line-height: 1.22; letter-spacing: -0.005em; }

/* Long unbreakable tokens — an email address, a URL — must never be allowed to
   set a box's minimum width, or they push a narrow viewport wider than itself.
   `anywhere`, not `break-word`: only `anywhere` reduces min-content width, and
   min-content is what grid and flex tracks are sized from. Set once and
   broadly, because this was rediscovered in three separate containers before
   anyone thought to generalise it. :where() keeps specificity at zero. */
:where(p, li, dd, dt, address, figcaption, h1, h2, h3, h4) { overflow-wrap: anywhere; }
:where(p, li) { text-wrap: pretty; }
:where(h1, h2, h3) { text-wrap: balance; }

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

/* --- layout -------------------------------------------------------------- */

.wrap  { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: var(--gutter); }
.prose { max-width: var(--prose); }
main   { flex: 1 0 auto; }

.band { padding-block: clamp(3rem, 2rem + 4vw, 5.25rem); }
.band + .band { border-top: 1px solid var(--rule-soft); }
.band--sunk { background: var(--bg-sunk); }

/* --- masthead ------------------------------------------------------------ */

.masthead { background: var(--navy); color: var(--on-navy); }

.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; row-gap: .85rem; flex-wrap: wrap; padding-block: 1.15rem;
  border-bottom: 1px solid var(--navy-rule);
}
/* Below ~544px the lockup and the link row cannot share a line: together they
   need about 450px and overflow the viewport. Give each its own full-width
   row rather than shrinking the logo to illegibility. */
@media (max-width: 34rem) {
  .nav__logo, .nav__links { flex: 1 0 100%; }
  .nav__logo img { width: clamp(150px, 52vw, 196px); }
}
.nav__logo { display: inline-flex; flex: 0 0 auto; }
.nav__logo img { width: clamp(168px, 20vw, 208px); height: auto; }
.nav__links { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem clamp(.9rem, 2.4vw, 1.9rem); }
.nav__links a {
  color: var(--on-navy-2); text-decoration: none;
  font-size: var(--t--1); letter-spacing: .055em; text-transform: uppercase;
  padding-block: .35rem; border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.nav__links a:hover { color: var(--on-navy); border-bottom-color: var(--brass-rule); }
.nav__links a[aria-current='page'] { color: var(--on-navy); border-bottom-color: var(--brass-rule); }
.nav :focus-visible { outline-color: var(--mist); }

/* theme toggle — hidden until the script enables it, so no dead control
   is shown to a visitor with JavaScript switched off */
.themer {
  appearance: none; background: none; border: 1px solid var(--navy-rule);
  color: var(--on-navy-2); border-radius: var(--radius);
  width: 2rem; height: 2rem; display: none; place-items: center;
  cursor: pointer; flex: 0 0 auto;
}
.themer[hidden] { display: none; }
.themer.is-ready { display: grid; }
.themer:hover { color: var(--on-navy); border-color: var(--mist); }
.themer svg { width: 15px; height: 15px; }
:root[data-theme='dark'] .themer .i-sun,  .themer .i-moon { display: block; }
:root[data-theme='dark'] .themer .i-moon, .themer .i-sun  { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .themer .i-sun  { display: block; }
  :root:not([data-theme='light']) .themer .i-moon { display: none; }
}

/* --- hero ---------------------------------------------------------------- */

.hero { padding-block: clamp(3.25rem, 2rem + 6vw, 6.5rem); }
.hero h1 {
  font-size: var(--t-4); color: var(--on-navy);
  max-width: 19ch; letter-spacing: -0.015em;
}
.hero__lead {
  margin-top: 1.35rem; max-width: 52ch;
  font-size: var(--t-1); line-height: 1.6; color: var(--on-navy-2);
}
.hero__rule { width: 54px; height: 2px; background: var(--brass-rule); margin-bottom: 1.9rem; }

.pagehead { padding-block: clamp(2.25rem, 1.5rem + 3.5vw, 3.75rem); }
.pagehead h1 { font-size: var(--t-3); color: var(--on-navy); }
.pagehead p  { margin-top: .7rem; max-width: 56ch; color: var(--on-navy-2); font-size: var(--t-0); }

/* --- small caps label ---------------------------------------------------- */

.eyebrow {
  /* A section label that is also the section's heading, so it is marked up as
     <h2>. font-family is restated because :where(h1..h4) sets the serif. */
  font-family: var(--sans);
  font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .13em; color: var(--text-mute);
  display: flex; align-items: center; gap: .85rem; margin-bottom: 1.6rem;
}
.eyebrow::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
.eyebrow--onnavy { color: var(--mist); }
.eyebrow--onnavy::after { background: var(--navy-rule); }

/* --- prose --------------------------------------------------------------- */

.band h2:not(.eyebrow) { font-size: var(--t-2); margin-bottom: .9rem; }
.band h3 { font-size: var(--t-1); margin-bottom: .45rem; }
.band p + p { margin-top: 1rem; }
.lead { font-size: var(--t-1); color: var(--text-2); }

a { color: var(--brass); text-underline-offset: .18em; text-decoration-thickness: 1px; }

code {
  font-family: var(--mono); font-size: 0.875em;
  background: var(--bg-sunk); color: var(--text);
  padding: .12em .38em; border-radius: 2px;
  border: 1px solid var(--rule-soft);
}
a:hover { text-decoration-thickness: 2px; }

/* --- capability grid ----------------------------------------------------- */

.grid { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 46rem) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 42rem) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
.card {
  background: var(--surface); padding: clamp(1.5rem, 1rem + 1.6vw, 2.1rem);
  display: flex; flex-direction: column;   /* so .card__note can sit on the floor */
}
.card > p:first-of-type { margin-bottom: 1.2rem; }
.card__icon { color: var(--navy); margin-bottom: 1.1rem; }
:root[data-theme='dark'] .card__icon { color: var(--mist); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .card__icon { color: var(--mist); }
}
.card__icon svg { width: 26px; height: 26px; }
.card h3 { margin-bottom: .55rem; }
.card p { font-size: var(--t--1); line-height: 1.7; color: var(--text-2); }
/* Qualified as `.card p.card__note` on purpose. The note is a <p> following a
   <p>, so `.band p + p` (0,1,2) outranks a bare `.card__note` (0,1,0) and its
   margin-top: 1rem silently beat the auto margin, leaving the notes unaligned. */
.card p.card__note {
  /* auto margin pins the note to the bottom of the tallest card in the row,
     so the three rules line up however uneven the copy above them is */
  margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--rule-soft);
  font-size: 0.75rem; color: var(--text-mute);
}

/* --- principles ---------------------------------------------------------- */

.principles { display: grid; gap: clamp(1.75rem, 1rem + 2.5vw, 2.75rem); }
@media (min-width: 46rem) { .principles { grid-template-columns: 1fr 1fr; } }
.principle { border-top: 2px solid var(--brass-rule); padding-top: 1.1rem; }
.principle h3 { font-size: var(--t-1); margin-bottom: .4rem; }
.principle p { font-size: var(--t--1); line-height: 1.72; color: var(--text-2); }

/* --- systems ------------------------------------------------------------- */

.systems { display: grid; gap: clamp(2.25rem, 1.4rem + 3vw, 3.5rem); }
.system { border-top: 2px solid var(--brass-rule); padding-top: 1.2rem; }
.system__kicker {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-mute); margin-bottom: .5rem;
}
.system h3 { font-size: var(--t-2); margin-bottom: .75rem; }
.system p { font-size: var(--t--1); line-height: 1.75; color: var(--text-2); max-width: 64ch; }
.system p + p { margin-top: .85rem; }
.system .system__detail {
  margin-top: 1.15rem; padding-top: .9rem; border-top: 1px solid var(--rule-soft);
  font-size: 0.8125rem; color: var(--text-mute); font-style: italic;
}

/* --- what a category covers ---------------------------------------------- */

.offer { list-style: none; padding: 0; margin-top: 1rem; display: grid; gap: .55rem; }
.offer li {
  position: relative; padding-left: 1.15rem;
  font-size: var(--t--1); line-height: 1.7; color: var(--text-2); max-width: 62ch;
}
.offer li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; background: var(--brass-rule);
}
.offer strong { color: var(--text); font-weight: 600; }

/* --- long-form articles -------------------------------------------------- */

/* Long-form is set larger than the rest of the site and on a tighter measure:
   this is read end to end, not scanned. 18px over ~62 characters. */
.article { max-width: 36rem; }
.article p, .article li { font-size: 1.125rem; line-height: 1.75; }
.article p + p { margin-top: 1.2rem; }

.article__meta {
  display: flex; flex-wrap: wrap; gap: .3rem .55rem;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-mute);
  padding-bottom: 1.15rem; border-bottom: 1px solid var(--rule); margin-bottom: 2.25rem;
}
/* Separators rather than gap alone: at this size and tracking, whitespace is
   not enough to stop the three facts reading as one run-on string. */
.article__meta span + span::before {
  content: '\00b7'; margin-right: .55rem; opacity: .55;
}
/* Qualified `.article p.x` throughout: `.article p` (0,1,1) sets the body size,
   so a bare `.x` (0,1,0) would lose to it silently. */
.article p.article__lead {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.25rem, 1.12rem + 0.55vw, 1.45rem);
  line-height: 1.5; color: var(--text);
}

/* A hairline above each section. The structure then reads at a glance, and a
   heading can never look crammed against the paragraph it follows. */
.article h2 {
  font-size: var(--t-2); line-height: 1.25;
  margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  margin-bottom: 1rem;
}
.article h2 + p { margin-top: 0; }

/* The one line the piece turns on, set in the display face. */
/* Deliberately larger than an h2 (--t-2 tops out at 1.6rem). At the same size
   the two were indistinguishable and this read as a section heading. */
.article p.article__key {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2rem);
  line-height: 1.3; color: var(--text);
  margin: 2.75rem 0; text-wrap: balance;
}

.article ul { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: .95rem; }
.article li { position: relative; padding-left: 1.45rem; }
.article li::before {
  content: ''; position: absolute; left: 0; top: .72em;
  width: 6px; height: 6px; background: var(--brass-rule);
}
.article strong { font-weight: 600; color: var(--text); }
.article em { font-style: italic; }
.article p.article__end {
  margin-top: 3rem; padding-top: 1.3rem; border-top: 2px solid var(--brass-rule);
  font-size: var(--t--1); line-height: 1.7; color: var(--text-2);
}

/* --- writing index ------------------------------------------------------- */

.pieces { border-top: 1px solid var(--rule); }
.piece {
  display: block; padding-block: 1.75rem; border-bottom: 1px solid var(--rule);
  text-decoration: none; color: inherit;
}
.piece time {
  display: block; font-family: var(--mono); font-size: 0.7rem;
  letter-spacing: .05em; color: var(--text-mute); margin-bottom: .5rem;
}
.piece h3 { font-size: var(--t-2); margin-bottom: .5rem; }
.piece:hover h3 { color: var(--brass); }
.piece p { font-size: var(--t--1); line-height: 1.7; color: var(--text-2); max-width: 60ch; }
.piece--soon { opacity: .62; }
.piece--soon time::after { content: ' \00b7 in progress'; }

/* --- definition rows (facts, addresses) ---------------------------------- */

.facts { border-top: 1px solid var(--rule); }
.facts > div {
  display: grid; gap: .2rem .5rem; padding-block: 1.1rem;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 40rem) { .facts > div { grid-template-columns: 13.5rem 1fr; gap: 1.5rem; } }
.facts dt {
  font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .12em; color: var(--text-mute); padding-top: .3rem;
}
.facts dd { font-size: var(--t-0); color: var(--text); }
.facts dd address { font-style: normal; line-height: 1.6; }
/* A qualifier that must travel with the value it qualifies — the years a
   credential was held, a superseded name. Applied to the span directly, so
   the inherited .facts dd size does not fight it. */
.facts .facts__note {
  display: block; margin-top: .2rem;
  font-size: 0.8125rem; line-height: 1.5; color: var(--text-mute);
}

/* --- footer -------------------------------------------------------------- */

.foot { background: var(--navy-900); color: var(--on-navy-2); margin-top: auto; }
.foot__top {
  display: grid; gap: 2.25rem; padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}
@media (min-width: 46rem) { .foot__top { grid-template-columns: 1.3fr 1fr 1fr; } }
.foot img.foot__logo { width: 196px; margin-bottom: 1.1rem; }
.foot h2 {
  font-family: var(--sans); font-size: 0.6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .13em; color: var(--mist);
  margin-bottom: .9rem;
}
.foot address, .foot p { font-size: var(--t--1); font-style: normal; line-height: 1.7; }
.foot ul { list-style: none; padding: 0; font-size: var(--t--1); line-height: 2; }
.foot a { color: var(--on-navy-2); text-decoration: none; border-bottom: 1px solid transparent; }
.foot a:hover { color: var(--on-navy); border-bottom-color: var(--brass-rule); }
.foot :focus-visible { outline-color: var(--mist); }
.foot__base {
  border-top: 1px solid var(--navy-rule); padding-block: 1.3rem;
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  font-size: 0.75rem; color: #7D94AC;
}

/* --- utility ------------------------------------------------------------- */

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 10;
  background: var(--surface); color: var(--text); padding: .7rem 1.1rem;
}
.skip:focus { left: .5rem; top: .5rem; }
.stack > * + * { margin-top: 1rem; }

@media print {
  .nav__links, .themer, .skip { display: none; }
  body { background: #fff; color: #000; }
  .masthead, .foot { background: #fff; color: #000; }
  .hero h1, .pagehead h1, .hero__lead, .foot, .foot a { color: #000; }
}