/* ============================================================
   Fractional CISO Canada — design system
   Fonts: Newsreader (display/body) + Archivo (UI). Self-hosted.
   ============================================================ */

/* ---- Fonts ---- */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  font-optical-sizing: auto;
  src: url('/fonts/newsreader-roman.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  font-optical-sizing: auto;
  src: url('/fonts/newsreader-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/archivo.woff2') format('woff2');
}

/* ---- Tokens ---- */
:root {
  --paper: #F7F7F4;
  --ink: #1B2421;
  --body: #3A4440;
  --muted: #5A625E;
  --muted-2: #6B7370;
  --accent: #3D5A45;
  --accent-hover: #2E4534;
  --dark: #142823;
  --dark-heading: #EDF0EC;
  --dark-body: #C4CEC9;
  --dark-accent: #8FB5AC;
  --dark-muted: #8A968F;
  --dark-muted-2: #8A968F; /* was #6E7A74 — bumped for WCAG AA 4.5:1 on --dark */
  --tint: #EEF0EA;
  --hairline: #DDE0DA;
  --hairline-tint: #D3D7CF;
  --hairline-dark: rgba(237, 240, 236, 0.14);
  --link-underline: rgba(61, 90, 69, 0.35);
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* ---- Reset / base ---- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; }
::selection { background: var(--accent); color: var(--paper); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.band-dark :focus-visible,
.site-footer :focus-visible,
.triggers :focus-visible { outline-color: var(--dark-accent); }

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  padding: 12px 20px;
  z-index: 100;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---- Layout ---- */
.wrap { max-width: 1200px; margin: 0 auto; padding-left: 40px; padding-right: 40px; }
main { display: block; }

/* ---- Header ---- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 40px;
}
.brand {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.brand span { color: var(--accent); }
.nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
}
.nav a {
  color: var(--ink);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--accent); }
.nav a[aria-current="page"] { border-bottom-color: var(--accent); }
.nav .btn { color: var(--paper); padding: 10px 18px; border-bottom: none; }
.nav-toggle, .nav-toggle-label { display: none; }

/* ---- Full-bleed photo hero (Home) ---- */
.hero-photo { position: relative; isolation: isolate; overflow: hidden; }
.hero-photo__bg { position: absolute; inset: 0; z-index: -2; display: block; }
.hero-photo__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; display: block; }
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg,
    rgba(16,32,27,0.93) 0%,
    rgba(16,32,27,0.78) 42%,
    rgba(16,32,27,0.38) 75%,
    rgba(16,32,27,0.22) 100%);
}
.hero-photo__inner { max-width: 1200px; margin: 0 auto; padding: 104px 40px 116px; }
/* Compound selectors so these beat the base .eyebrow/.arrow-link colors
   (equal specificity + later source order would otherwise win). */
.eyebrow.hero-photo__eyebrow { color: #A8C9BE; }
.hero-photo__h1 { color: var(--paper); }
.hero-photo__lede { font-size: 21px; line-height: 1.55; color: #DCE3DC; max-width: 54ch; margin: 0 0 44px; }
.btn.btn--invert { background: var(--paper); color: var(--ink); }
.btn.btn--invert:hover { background: #FFFFFF; }
.arrow-link.hero-photo__link {
  color: #EDF0EC;
  border-bottom: 1px solid rgba(237,240,236,0.45);
}
.arrow-link.hero-photo__link:hover { border-bottom-color: #FFFFFF; }
.hero-photo :focus-visible { outline-color: var(--paper); }
.hero-photo .btn--invert:focus-visible { outline-color: var(--ink); }

/* ---- Buttons & links ---- */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--paper);
  background: var(--accent);
  text-decoration: none;
  padding: 15px 28px;
  border-radius: 2px;
  border: none;
  cursor: pointer;
  line-height: 1.2;
}
.btn:hover { background: var(--accent-hover); }
.btn--sm { padding: 10px 18px; font-size: 14px; }

.arrow-link {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--link-underline);
  padding-bottom: 2px;
}
.arrow-link:hover { border-bottom-color: var(--accent); }
.arrow-link--sm { font-size: 14px; }

/* inline text link (in prose) */
.prose a, .inline-link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--link-underline);
}
.prose a:hover, .inline-link:hover { border-bottom-color: var(--accent); }

/* ---- Typography ---- */
.eyebrow {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 28px;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; }
.h1 {
  font-size: 62px;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 32px;
}
.h1--inner {
  font-size: 56px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 28px;
}
.h1--article {
  font-size: 46px;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 24px;
}
.h2 {
  font-size: 38px;
  letter-spacing: -0.01em;
  margin: 0;
}
.h2--cta {
  font-size: 42px;
  letter-spacing: -0.015em;
  margin: 0 0 20px;
}
.h2--sm { font-size: 34px; }
.h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 24px;
  margin: 0 0 14px;
}
.h3--sm { font-size: 21px; }

.lede { font-size: 21px; line-height: 1.6; color: var(--body); margin: 0; }
p { margin: 0 0 20px; }
.body-text { color: var(--body); }
.max-58 { max-width: 58ch; }
.max-62 { max-width: 62ch; }
.max-56 { max-width: 56ch; }

/* ---- Sections ---- */
.section { max-width: 1200px; margin: 0 auto; padding: 72px 40px; }
.section--tight { padding-top: 40px; padding-bottom: 40px; }
.band { padding: 72px 0; }
.band-tint { background: var(--tint); }
.band-dark { background: var(--dark); color: var(--dark-heading); }
.band-dark .h2, .band-dark h2 { color: var(--dark-heading); }
.band-dark p, .band-dark .body-text { color: var(--dark-body); }
.band-dark em { font-style: italic; }

/* Signature two-column ruled section */
.two-col {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 72px;
  align-items: start;
}
.two-col--ruled { border-top: 1px solid var(--hairline); padding-top: 56px; }
.band-dark .two-col--ruled { border-top-color: var(--hairline-dark); }
.two-col__body { max-width: 62ch; }
.stack { display: flex; flex-direction: column; gap: 24px; }
.stack p { margin: 0; }

/* ---- Card grids ---- */
.cards { display: grid; gap: 48px; }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--2 { grid-template-columns: repeat(2, 1fr); gap: 40px 48px; }
.card { border-top: 2px solid var(--accent); padding-top: 28px; }
.card--sm { padding-top: 20px; }
.card p { font-size: 17.5px; line-height: 1.6; color: var(--body); margin: 0; }
.card--sm p { font-size: 16.5px; }
.card .h3 { margin-bottom: 14px; }
.card--sm .h3 { font-size: 21px; margin-bottom: 10px; }
.card__num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--accent);
  display: block;
  margin-bottom: 6px;
}

/* ---- CTA block ---- */
.cta { max-width: 1200px; margin: 0 auto; padding: 24px 40px 112px; }
.cta__inner { border-top: 2px solid var(--accent); padding-top: 56px; max-width: 720px; }
.cta__row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.cta p { font-size: 19px; line-height: 1.65; color: var(--body); margin: 0 0 36px; max-width: 58ch; }
.cta__email { font-family: var(--sans); font-size: 15px; color: var(--muted); }
.cta__email a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--link-underline);
  padding-bottom: 1px;
}
.cta__email a:hover { border-bottom-color: var(--accent); }

/* ---- Trigger scenarios ---- */
.triggers { background: var(--dark); color: var(--dark-heading); padding: 88px 0 96px; }
.triggers__eyebrow { color: var(--dark-accent); }
.triggers__intro {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 300;
  color: var(--dark-body);
  margin: 0 0 56px;
  max-width: 48ch;
}
.trigger-list { display: flex; flex-direction: column; }
.trigger {
  display: block;
  text-decoration: none;
  color: var(--dark-heading);
  padding: 36px 0;
  border-top: 1px solid var(--hairline-dark);
}
.trigger:hover { color: #FFFFFF; background: rgba(237, 240, 236, 0.03); }
.trigger__grid {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 24px;
  align-items: baseline;
}
.trigger__num { font-family: var(--serif); font-size: 17px; font-style: italic; color: #6E938A; }
.trigger__text {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 350;
  font-size: 33px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.trigger__label {
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--dark-accent);
  white-space: nowrap;
}

/* ---- Credibility strip ---- */
.credibility {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: auto 1px minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
.credibility__num {
  font-family: var(--serif);
  font-size: 52px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--accent);
}
.credibility__label {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 8px;
}
.credibility__rule { background: var(--hairline-tint); height: 72px; }
.credibility p { font-size: 18px; line-height: 1.7; color: var(--body); margin: 0; max-width: 68ch; }
.credibility strong { font-weight: 600; color: var(--ink); }

/* ---- Insights list rows ---- */
.post-row {
  display: block;
  text-decoration: none;
  color: inherit;
  border-top: 1px solid var(--hairline);
  padding: 32px 0;
}
.post-row:hover { background: #F1F2ED; }
.post-row__grid {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 48px;
  align-items: baseline;
}
.post-row__meta { font-family: var(--sans); font-size: 13.5px; color: var(--muted-2); }
.post-row .h3 { font-weight: 500; font-size: 26px; letter-spacing: -0.01em; margin: 0 0 10px; color: var(--ink); }
.post-row p { font-size: 17.5px; line-height: 1.6; color: var(--body); margin: 0; }
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
}

/* ---- FAQ ---- */
.faq { display: flex; flex-direction: column; gap: 28px; }
.faq__item { border-top: 1px solid var(--hairline); padding-top: 20px; }
.faq__item .h3 { font-weight: 500; font-size: 21px; margin: 0 0 10px; }
.faq__item p { margin: 0; font-size: 17.5px; color: var(--body); }

/* ---- Breadcrumb ---- */
.breadcrumb {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin: 0 0 28px;
  color: var(--muted-2);
}
.breadcrumb a { color: var(--muted-2); text-decoration: none; border-bottom: 1px solid transparent; }
.breadcrumb a:hover { color: var(--accent); border-bottom-color: var(--link-underline); }
.breadcrumb .sep { color: var(--hairline-tint); margin: 0 8px; }
.breadcrumb .current { color: var(--accent); }

/* ---- Framework spoke ruled sections ---- */
.spoke-body { max-width: 1200px; margin: 0 auto; padding: 0 40px 80px; display: flex; flex-direction: column; }
.ruled-section { border-top: 1px solid var(--hairline); padding: 48px 0; }
.ruled-section .h2 { font-size: 30px; }
.ruled-section .two-col__body { display: flex; flex-direction: column; gap: 20px; }
.ruled-section .two-col__body p { margin: 0; }

/* ---- Frameworks hub ---- */
.two-col--hub { grid-template-columns: 320px minmax(0, 1fr); gap: 64px; }
.hub-heading { font-size: 27px !important; line-height: 1.3; }
.hub-group { display: flex; flex-direction: column; gap: 28px; }
.hub-entry__name { font-family: var(--serif); font-weight: 500; font-size: 21px; margin: 0 0 6px; }
.hub-entry__name a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(61, 90, 69, 0.4);
}
.hub-entry__name a:hover { color: var(--accent); }
.hub-entry p { margin: 0; font-size: 17px; color: var(--body); max-width: 60ch; }
.hub-guide { color: var(--accent); text-decoration: none; white-space: nowrap; }
.hub-guide:hover { border-bottom: 1px solid var(--link-underline); }
.hub-note { max-width: 62ch; color: var(--body); margin: 40px 0 0 384px; }
@media (max-width: 860px) {
  .two-col--hub { grid-template-columns: 1fr; gap: 20px; }
  .hub-heading { font-size: 24px !important; }
  .hub-note { margin-left: 0; }
}

/* ---- Article prose ---- */
.reading { max-width: 760px; margin: 0 auto; padding: 0 40px; }
.article-meta {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--muted-2);
  margin: 0 0 40px;
}
.article-meta strong { color: var(--ink); font-weight: 600; }
.prose { color: var(--body); }
.prose p { font-size: 19px; line-height: 1.7; margin: 0 0 24px; }
.prose .lead { font-size: 20px; line-height: 1.65; }
.prose h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 30px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 48px 0 20px;
}
.prose h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  color: var(--ink);
  margin: 36px 0 14px;
}
.prose ul, .prose ol { margin: 0 0 24px; padding-left: 0; list-style: none; }
.prose ul li, .prose ol li {
  font-size: 19px;
  line-height: 1.7;
  margin: 0 0 16px;
  padding-left: 28px;
  position: relative;
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 13px;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
}
.prose ol { counter-reset: item; }
.prose ol li { counter-increment: item; }
.prose ol li::before {
  content: counter(item);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--serif);
  font-style: italic;
  color: var(--accent);
}
.prose strong { font-weight: 600; color: var(--ink); }
.prose em { font-style: italic; }
.author-note {
  border-top: 1px solid var(--hairline);
  margin-top: 40px;
  padding-top: 28px;
  font-style: italic;
  font-size: 18px;
  line-height: 1.7;
  color: var(--body);
}

/* Contact page */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 96px; align-items: start; }
.contact-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-bottom: 48px; }
.contact-note { font-family: var(--sans); font-size: 14.5px; color: var(--muted-2); margin: 0; }
.contact-note a, .contact-actions .cta__email a {
  color: var(--accent); text-decoration: none;
  border-bottom: 1px solid var(--link-underline); padding-bottom: 1px;
}
.expect { border-top: 2px solid var(--accent); padding-top: 28px; }
.expect h2 { font-family: var(--serif); font-weight: 500; font-size: 23px; margin: 0 0 24px; }
.expect ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 24px; }
.expect li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; align-items: baseline; }
.expect__num { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--accent); }
.expect li p { margin: 0; font-size: 17.5px; line-height: 1.55; color: var(--body); }

/* About page */
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 80px; align-items: start; }
@media (max-width: 860px) {
  .contact-grid, .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-grid .figure { order: -1; }
  .about-grid .figure img { width: 100%; height: auto; max-width: 360px; }
}

/* Portrait figure */
.figure { margin: 0; }
.figure img { display: block; border-radius: 2px; object-fit: cover; }
.figure figcaption {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--muted-2);
  margin-top: 12px;
  line-height: 1.5;
}

/* ---- Footer ---- */
.site-footer { background: var(--dark); color: var(--dark-body); padding: 56px 0; }
.site-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  align-items: start;
}
.site-footer__brand {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 18px;
  color: var(--dark-heading);
  margin-bottom: 12px;
}
.site-footer__tag {
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--dark-muted);
  margin: 0;
  max-width: 42ch;
}
.site-footer nav { display: flex; gap: 28px; font-family: var(--sans); font-size: 13.5px; flex-wrap: wrap; }
.site-footer nav a, .site-footer__contact a { color: var(--dark-body); text-decoration: none; }
.site-footer nav a:hover, .site-footer__contact a:hover { color: #FFFFFF; }
.site-footer__contact { font-family: var(--sans); font-size: 13.5px; display: flex; flex-direction: column; gap: 8px; }
.site-footer__contact span { color: var(--dark-muted-2); }

.util-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 72px; align-items: start; }
.hero-actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.stack--lg p { font-size: 20px; line-height: 1.65; }
.mt-0 { margin-top: 0; }
.h2--38 { font-size: 38px; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 860px) {
  body { font-size: 18px; }

  /* Header / mobile nav (CSS-only checkbox toggle) */
  .site-header { flex-wrap: wrap; padding: 20px 24px; position: relative; }
  .nav-toggle-label {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 30px;
    height: 30px;
    cursor: pointer;
  }
  .nav-toggle-label span {
    display: block;
    height: 2px;
    width: 24px;
    background: var(--ink);
  }
  .nav {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    margin-top: 16px;
  }
  .nav-toggle:checked ~ .nav { display: flex; }
  .nav a { padding: 10px 0; font-size: 16px; width: 100%; }
  .nav a[aria-current="page"] { border-bottom-color: transparent; color: var(--accent); }
  .nav .btn { margin-top: 8px; }

  /* Section padding */
  .wrap, .section, .credibility, .site-header, .site-footer__inner, .spoke-body { padding-left: 24px; padding-right: 24px; }
  .ruled-section { padding: 36px 0; }
  .section { padding-top: 56px; padding-bottom: 56px; }
  .band { padding: 56px 0; }
  .cta { padding: 24px 24px 72px; }
  .reading { padding: 0 24px; }

  /* Typography down-scale */
  .h1 { font-size: 40px; }
  .h1--inner { font-size: 36px; }
  .h1--article { font-size: 33px; }
  .h2, .h2--cta { font-size: 30px; }
  .h2--sm { font-size: 27px; }
  .lede { font-size: 19px; }
  .prose h2 { font-size: 26px; }

  /* Grids collapse */
  .two-col { grid-template-columns: 1fr; gap: 24px; }
  .two-col--ruled { padding-top: 40px; }
  .cards--3, .cards--2 { grid-template-columns: 1fr; gap: 36px; }

  /* Hero grid (photo below) */
  .hero-grid { grid-template-columns: 1fr !important; gap: 40px !important; }

  /* Photo hero: tighter padding; shift crop so text stays on the dark side */
  .hero-photo__inner { padding: 64px 24px 72px; }
  .hero-photo__bg img { object-position: 68% 40%; }
  .hero-photo__lede { font-size: 19px; }

  /* Trigger rows stack */
  .trigger__grid { grid-template-columns: 1fr; gap: 8px; }
  .trigger__text { font-size: 25px; }
  .triggers { padding: 56px 0 64px; }

  /* Credibility stacks */
  .credibility { grid-template-columns: 1fr; gap: 28px; }
  .credibility__rule { display: none; }

  /* Post rows stack */
  .post-row__grid { grid-template-columns: 1fr; gap: 8px; }
  .section-head { flex-direction: column; gap: 12px; margin-bottom: 28px; }

  /* Footer stacks */
  .site-footer__inner { flex-direction: column; gap: 28px; }
}

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