/* =============================================================================
   Shanay Zoungrana — Credit & Risk Operations
   Single stylesheet. You normally never edit this file. The only thing worth
   touching is the COLOURS block below if you ever want to retune the palette.

   Design intent: an "operator's dossier" — institutional, structured, and
   credential-forward. A dark letterhead, an editorial serif for authority,
   a humanist sans for body, and a monospaced face for the technical/data
   labels (the texture that signals "credit, risk, and systems", not a startup).
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. DESIGN TOKENS
   ------------------------------------------------------------------------ */
:root {

  /* ---- COLOURS (safe to retune values; keep the names) ------------------ */
  --ink:        #171c26;   /* deep cool near-black — the dark letterhead     */
  --ink-2:      #2c333f;   /* softer ink for secondary dark surfaces         */
  --paper:      #f4ecd9;   /* warm cream page                               */
  --paper-2:    #ebe1c9;   /* faint panel tone                              */
  --text:       #20242c;   /* main body text on paper                       */
  --text-soft:  #4b515b;   /* secondary text                               */
  --text-faint: #6f6a60;   /* captions / fine print                        */
  --line:       #d8d2c4;   /* hairline rules on paper                      */
  --line-dark:  rgba(244, 241, 234, 0.16); /* hairlines on dark           */
  --ivory:      #f4f1ea;   /* text reversed out of dark                    */
  --ivory-soft: #b9b6ad;   /* muted reversed text                          */
  --accent:     #7a2e33;   /* oxblood — emphasis, marks, the top seal bar  */
  --accent-br:  #9a3b41;   /* brighter oxblood for hover on dark           */

  /* ---- TYPEFACES -------------------------------------------------------- */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;       /* headings */
  --sans:  "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; /* body */
  --mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; /* labels/data */

  /* ---- TYPE SCALE ------------------------------------------------------- */
  --t-micro: 0.74rem;
  --t-meta:  0.84rem;
  --t-body:  1.06rem;
  --t-lead:  clamp(1.3rem, 1.05rem + 1.1vw, 1.7rem);
  --t-h3:    clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --t-h2:    clamp(1.5rem, 1.2rem + 1.3vw, 2rem);
  --t-h1:    clamp(2.6rem, 1.7rem + 4.2vw, 4.6rem);

  /* ---- SPACING & WIDTHS ------------------------------------------------- */
  --s1: 0.5rem;  --s2: 0.75rem; --s3: 1rem;   --s4: 1.5rem;
  --s5: 2rem;    --s6: 3rem;    --s7: 4.5rem; --s8: 6.5rem;
  --container: 1180px;
  --measure: 64ch;
}

/* ---------------------------------------------------------------------------
   2. RESET
   ------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }

/* ---------------------------------------------------------------------------
   3. TYPOGRAPHY HELPERS
   ------------------------------------------------------------------------ */
h1, h2, h3 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: 500; }
p  { max-width: var(--measure); }

/* Monospaced kicker / label, letterspaced uppercase — the "data" texture */
.kicker {
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
   4. ACCESSIBILITY
   ------------------------------------------------------------------------ */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--ivory);
  padding: var(--s2) var(--s3); font-family: var(--mono); font-size: var(--t-meta);
}
.skip-link:focus { left: var(--s3); top: var(--s3); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------------------------------------------------------------------------
   5. LAYOUT
   ------------------------------------------------------------------------ */
.container {
  width: 100%; max-width: var(--container);
  margin-inline: auto; padding-inline: var(--s4);
}
@media (min-width: 768px) { .container { padding-inline: var(--s6); } }

.section { padding-block: var(--s7); border-top: 1px solid var(--line); }
@media (min-width: 768px) { .section { padding-block: var(--s8); } }

/* Document-style section header: "01 — Capabilities" + a hairline */
.section-head { margin-bottom: var(--s6); }
.section-head__no {
  display: block; font-family: var(--mono); font-size: var(--t-micro);
  font-weight: 500; letter-spacing: 0.16em; color: var(--accent); margin-bottom: 0.55rem;
}

/* ---------------------------------------------------------------------------
   6. MASTHEAD (the dark letterhead)
   ------------------------------------------------------------------------ */
.masthead {
  background: var(--ink);
  color: var(--ivory);
  border-top: 3px solid var(--accent);   /* the seal bar */
  position: sticky; top: 0; z-index: 50;
}
.masthead__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); min-height: 4.5rem;
}
.monogram {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.9rem; height: 2.9rem;
  background: var(--accent); border-radius: 4px;
  font-family: var(--serif); font-weight: 600; font-size: 1.4rem; letter-spacing: 0.01em;
  color: var(--ivory); text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
.monogram:hover { background: var(--accent-br); color: var(--ivory); transform: translateY(-1px); }
.masthead__nav { display: flex; align-items: center; gap: clamp(1.1rem, 3vw, 2.2rem); }
.masthead__nav a {
  font-family: var(--mono); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ivory-soft); text-decoration: none; padding-block: 0.4rem;
  position: relative; transition: color 0.18s ease;
}
.masthead__nav a:hover, .masthead__nav a[aria-current="true"] { color: var(--ivory); }
.masthead__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--accent-br); transform: scaleX(0); transform-origin: left;
  transition: transform 0.2s ease;
}
.masthead__nav a:hover::after, .masthead__nav a[aria-current="true"]::after { transform: scaleX(1); }

/* ---------------------------------------------------------------------------
   7. HERO / LEDE
   ------------------------------------------------------------------------ */
.hero { padding-block: var(--s7); }
.hero__kicker { margin-bottom: var(--s3); }
.hero h1 { margin-bottom: var(--s4); }
.hero__lede {
  font-family: var(--serif); font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.5rem);
  line-height: 1.4; color: var(--ink); max-width: 54ch; font-weight: 400;
}
.hero__lede em { font-style: italic; color: var(--accent); }
.hero__sub {
  margin-top: var(--s4); max-width: 52ch;
  color: var(--text-soft); font-size: 1.04rem;
}
.hero__sub em { font-style: italic; color: var(--accent); }
.hero__grid { display: grid; gap: var(--s5); }
@media (min-width: 760px) {
  .hero { padding-block: var(--s7); }
  .hero__grid { grid-template-columns: minmax(auto, 560px) 270px; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; justify-content: start; }
  .hero h1 { font-size: clamp(2.6rem, 1.6rem + 3.2vw, 4rem); }
}

/* Hero portrait — a clean circular photo with a hairline mat */
.portrait {
  background: var(--paper-2);
  border: 1px solid var(--line);
  padding: 6px;
  border-radius: 50%;
}
.portrait img {
  width: 100%; height: auto; aspect-ratio: 1 / 1;
  object-fit: cover; border-radius: 50%;
  background: var(--paper-2); display: block;
}
.portrait--hero { width: 100%; max-width: 270px; }

/* Quiet résumé button */
.hero__cta { margin-top: var(--s5); }
.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--mono); font-size: var(--t-meta); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink); text-decoration: none;
  border: 1px solid var(--ink); padding: 0.62rem 1.05rem;
  transition: background 0.2s ease, color 0.2s ease;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn__arrow { transition: transform 0.2s ease; }
.btn:hover .btn__arrow { transform: translateY(2px); }

/* ---------------------------------------------------------------------------
   8. CREDIBILITY STRIP (mono tags in a ruled band)
   ------------------------------------------------------------------------ */
.facts { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts__row { display: grid; gap: var(--s4); padding-block: var(--s5); }
@media (min-width: 760px) { .facts__row { grid-template-columns: repeat(3, 1fr); gap: 0; } }
.fact { }
@media (min-width: 760px) {
  .fact { padding: 0 var(--s5); border-left: 1px solid var(--line); }
  .fact:first-child { padding-left: 0; border-left: 0; }
  .fact:last-child { padding-right: 0; }
}
.fact__label {
  display: block; font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 0.5rem;
}
.fact__value { font-size: 1.02rem; color: var(--ink); line-height: 1.4; }
.fact__value b { font-weight: 600; }

/* ---------------------------------------------------------------------------
   9. CAPABILITIES MATRIX
   ------------------------------------------------------------------------ */
.pillars { display: grid; gap: var(--s6); }
@media (min-width: 760px) { .pillars { grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.75rem); } }

.pillar { display: flex; flex-direction: column; }
.pillar h3 { margin: 0 0 var(--s4); padding-bottom: var(--s3); border-bottom: 1px solid var(--line); }
.pillar ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.72rem; }
.pillar li {
  font-size: 0.99rem; color: var(--text-soft); line-height: 1.4;
  padding-left: 1.1rem; position: relative;
}
.pillar li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 5px; height: 5px; background: var(--accent); transform: rotate(45deg);
}
.pillar__cert {
  margin-top: auto; padding-top: var(--s4); border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--mono); font-size: var(--t-micro); color: var(--text-soft);
}
.pillar__ico { width: 14px; height: 14px; color: var(--accent); flex: none; }
.pillar__cert b {
  color: var(--accent); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em;
}
.pillar__cert span { letter-spacing: 0; }

/* ---------------------------------------------------------------------------
   10. FOCUS — document-style label / prose rows
   ------------------------------------------------------------------------ */
.dl { display: grid; gap: 0; }
.dl__row { display: grid; gap: var(--s2); padding-block: var(--s4); border-top: 1px solid var(--line); }
.dl__row:first-child { border-top: 0; }
@media (min-width: 760px) { .dl__row { grid-template-columns: 14rem 1fr; gap: var(--s5); } }
.dl__term {
  font-family: var(--mono); font-size: var(--t-meta); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-faint); padding-top: 0.2rem;
}
.dl__desc { font-size: 1.06rem; color: var(--text); max-width: 56ch; }
.dl__desc strong { color: var(--ink); font-weight: 600; }

/* ---------------------------------------------------------------------------
   11. CONTACT
   ------------------------------------------------------------------------ */
.contact__grid { display: grid; gap: var(--s5); }
@media (min-width: 760px) { .contact__grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.contact h2 { margin-bottom: var(--s4); }
.contact p { color: var(--text-soft); max-width: 44ch; }
.contact__list { display: grid; gap: var(--s3); margin-top: var(--s2); }
.contact__list a, .contact__list span {
  font-family: var(--mono); font-size: 0.96rem; letter-spacing: 0.02em;
  color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: baseline; gap: var(--s3);
}
.contact__list a:hover { color: var(--accent); }
.contact__label { color: var(--text-faint); min-width: 5.5rem; }

/* ---------------------------------------------------------------------------
   11b. EXPERIENCE (timeline)
   ------------------------------------------------------------------------ */
.exp { display: grid; }
.exp__item { display: grid; gap: var(--s3); padding-block: var(--s5); border-top: 1px solid var(--line); }
.exp__item:first-child { border-top: 0; padding-top: 0; }
.exp__meta { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s2); }
@media (min-width: 760px) {
  .exp__item { grid-template-columns: 11rem 1fr; gap: var(--s5); align-items: start; }
  .exp__meta { flex-direction: column; align-items: flex-start; margin-bottom: 0; padding-top: 0.15rem; }
}
.exp__logo {
  width: 50px; height: 50px; flex: none; object-fit: cover;
  border: 1px solid var(--line); border-radius: 9px; display: block;
  background: #fff;
}
.exp__when {
  font-family: var(--mono); font-size: var(--t-meta); letter-spacing: 0.03em;
  color: var(--text-faint);
}
.exp__when b { display: block; color: var(--accent); font-weight: 500; margin-bottom: 0.25rem; }
.exp__role { font-size: var(--t-h3); margin-bottom: 0.1rem; }
.exp__org { font-family: var(--mono); font-size: var(--t-meta); letter-spacing: 0.03em; color: var(--text-soft); margin-bottom: var(--s3); }
.exp__bullets { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; max-width: 64ch; }
.exp__bullets li { color: var(--text-soft); padding-left: 1.1rem; position: relative; line-height: 1.45; }
.exp__bullets li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 5px; height: 5px; background: var(--accent); transform: rotate(45deg);
}
.exp__bullets li b { color: var(--ink); font-weight: 600; }

/* ---------------------------------------------------------------------------
   11c. CREDENTIALS (education + certifications)
   ------------------------------------------------------------------------ */
.creds { display: grid; gap: var(--s6); }
@media (min-width: 760px) { .creds { grid-template-columns: 1fr 1fr; gap: var(--s7); } }
.creds h3 {
  font-family: var(--mono); font-size: var(--t-meta); font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint);
  margin-bottom: var(--s4); padding-bottom: var(--s2); border-bottom: 1px solid var(--line);
}
.cred { padding-block: var(--s3); }
.cred__title { font-family: var(--serif); font-size: 1.2rem; color: var(--ink); line-height: 1.25; }
.cred__sub { color: var(--text-soft); margin-top: 0.15rem; }
.cred__date { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.06em; color: var(--text-faint); text-transform: uppercase; margin-top: 0.3rem; }

/* ---------------------------------------------------------------------------
   12. FOOTER
   ------------------------------------------------------------------------ */
.site-footer {
  background: var(--ink); color: var(--ivory-soft);
  padding-block: var(--s5); margin-top: var(--s8);
}
.site-footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3); }
.site-footer span, .site-footer a {
  font-family: var(--mono); font-size: var(--t-meta); letter-spacing: 0.03em;
  color: var(--ivory-soft); text-decoration: none;
}
.site-footer a:hover { color: var(--ivory); }

/* ---------------------------------------------------------------------------
   13. REVEAL ANIMATION
   ------------------------------------------------------------------------ */
html.js [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity 0.7s ease, transform 0.7s ease; }
html.js [data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .masthead__nav a::after { transition: none; }
}

/* ---------------------------------------------------------------------------
   14. RESPONSIVE — masthead on phones
   ------------------------------------------------------------------------ */
@media (max-width: 620px) {
  .masthead { position: static; }
  .masthead__inner { flex-direction: column; align-items: flex-start; gap: var(--s2); padding-block: var(--s3); min-height: 0; }
  .masthead__nav { flex-wrap: wrap; gap: var(--s4); }
}