/* ==========================================================================
   Koessi Kevin Zokpodo - Quant Portfolio
   Single stylesheet, no framework, no build step.

   Table of contents
   1.  Design tokens (light theme)
   2.  Dark theme overrides
   3.  Base / reset
   4.  Layout primitives (container, section, grid)
   5.  Typography helpers
   6.  Header & navigation
   7.  Hero
   8.  About & skills
   9.  Project cards
   10. Project detail page
   11. Contact
   12. Footer
   13. Buttons, badges, links
   14. Stat band
   15. Feature block
   16. Photo gallery
   17. Credentials (trading certifications)
   18. Lightbox
   19. Scroll reveal
   20. Responsive breakpoints
   21. Motion & accessibility
   ========================================================================== */

/* ==========================================================================
   1. Design tokens (light theme = default)
   Change these values to re-skin the whole site.
   ========================================================================== */
:root {
  /* --- Neutrals: navy / slate / white ---------------------------------- */
  --c-bg:            #ffffff;
  --c-bg-subtle:     #f5f7fa;   /* alternating section background         */
  --c-bg-raised:     #ffffff;   /* cards, panels                          */
  --c-border:        #dde3ec;
  --c-border-strong: #c3ccda;

  --c-text:          #0f1d33;   /* deep navy, used for headings           */
  --c-text-body:     #3a465c;   /* slightly lighter for paragraphs        */
  --c-text-muted:    #6b7789;

  /* --- Accent: restrained steel blue ----------------------------------- */
  --c-accent:        #1d4e89;
  --c-accent-hover:  #163d6d;
  --c-accent-soft:   #e8eff8;   /* tinted background for chips            */

  /* --- Secondary accent: muted gold ------------------------------------
     Used sparingly - figures, section numerals, rules. Navy and gold is the
     institutional pairing; it adds warmth without turning the page into a
     product landing page. */
  --c-gold:      #a8781f;
  --c-gold-soft: #f6efdf;

  /* --- Fixed dark surface ----------------------------------------------
     The hero, the stat band and the footer stay dark in BOTH themes, so the
     page always opens on a deep navy masthead and closes on one. These
     tokens are therefore NOT redefined in the dark-theme block below. */
  --c-ink:        #0b1524;
  --c-ink-2:      #101d31;
  --c-ink-border: #22334c;
  --c-ink-text:   #eaf0f9;
  --c-ink-muted:  #93a2ba;
  --c-ink-accent: #7fa9dd;
  --c-ink-gold:   #d9a441;

  /* --- Status colours --------------------------------------------------- */
  --c-status-done:    #1f6f52;
  --c-status-done-bg: #e6f2ed;
  --c-status-wip:     #8a5a12;
  --c-status-wip-bg:  #fdf2e0;

  /* --- Chart surface (read at runtime by assets/js/charts.js) ----------- */
  --c-chart-bg:      #ffffff;
  --c-chart-grid:    #e6ebf2;
  --c-chart-text:    #3a465c;

  /* --- Typography -------------------------------------------------------
     Inter and JetBrains Mono are loaded from Google Fonts with `display=swap`.
     The system fallbacks below keep the page readable if the fonts are slow,
     blocked, or the visitor is offline. */
  --font-sans: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont,
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", "Cascadia Mono", Consolas,
               "Liberation Mono", Menlo, monospace;
  /* Display serif for headings only - the register of a research house
     rather than a product page. Body copy stays sans for legibility. */
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;

  --fs-xs:   0.78rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.375rem;
  --fs-2xl:  1.75rem;
  --fs-3xl:  2.25rem;
  --fs-4xl:  3rem;

  /* --- Spacing scale ---------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* --- Misc ------------------------------------------------------------- */
  --radius:     6px;
  --radius-lg:  10px;
  --shadow-sm:  0 1px 2px rgba(15, 29, 51, 0.06);
  --shadow-md:  0 4px 16px rgba(15, 29, 51, 0.08);
  --maxw:       1120px;
  --maxw-prose: 68ch;
  --transition: 160ms ease;
}

/* ==========================================================================
   2. Dark theme overrides
   Applied when <html data-theme="dark">, set by assets/js/theme.js.
   ========================================================================== */
html[data-theme="dark"] {
  --c-bg:            #0d1626;
  --c-bg-subtle:     #111d31;
  --c-bg-raised:     #152238;
  --c-border:        #24344f;
  --c-border-strong: #3a4d6b;

  --c-text:          #eef2f8;
  --c-text-body:     #b7c2d4;
  --c-text-muted:    #8794a9;

  --c-accent:        #6f9fd8;
  --c-accent-hover:  #8fb6e4;
  --c-accent-soft:   #1a2c47;

  --c-gold:      #dcae63;
  --c-gold-soft: #2b2416;

  --c-status-done:    #6cc3a1;
  --c-status-done-bg: #12302a;
  --c-status-wip:     #dcae63;
  --c-status-wip-bg:  #33280f;

  --c-chart-bg:      #152238;
  --c-chart-grid:    #24344f;
  --c-chart-text:    #b7c2d4;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 18px rgba(0, 0, 0, 0.45);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;      /* offset for the sticky header */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text-body);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* Contextual alternates on, tabular figures so numbers line up in columns */
  font-feature-settings: "cv05" 1, "calt" 1;
  transition: background-color var(--transition), color var(--transition);
}

/* Headings: display serif, set tight. h4+ stay sans - they are labels. */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
}

img, svg { max-width: 100%; height: auto; display: block; }

a {
  color: var(--c-accent);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover { color: var(--c-accent-hover); text-decoration: underline; }

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

hr {
  border: 0;
  border-top: 1px solid var(--c-border);
  margin: var(--sp-6) 0;
}

/* Skip link for keyboard users */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--c-accent);
  color: #fff;
  padding: var(--sp-2) var(--sp-4);
  z-index: 100;
}
.skip-link:focus { left: var(--sp-4); top: var(--sp-2); }

/* ==========================================================================
   4. Layout primitives
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}

.section { padding-block: var(--sp-9); }
.section--subtle { background: var(--c-bg-subtle); }

.section__head { margin-bottom: var(--sp-6); }

/* Small uppercase label above section titles - the "research note" cue */
.section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 0 0 var(--sp-3);
}
/* Rule trailing the label, fading out - a section marker in a research note */
.section__eyebrow::after {
  content: "";
  width: 3.5rem;
  height: 1px;
  background: linear-gradient(90deg, var(--c-gold), transparent);
}
/* The leading "01 —" numeral picks up the gold */
.section__eyebrow .num {
  color: var(--c-gold);
  font-weight: 500;
}

.section__title {
  font-size: var(--fs-3xl);
  line-height: 1.15;
  color: var(--c-text);
  margin: 0 0 var(--sp-4);
}

.section__intro {
  max-width: var(--maxw-prose);
  margin: 0;
  color: var(--c-text-muted);
}

/* Generic auto-fit grid used by the project cards.
   New cards simply flow into it - no layout change needed. */
.grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

/* ==========================================================================
   5. Typography helpers
   ========================================================================== */
.prose { max-width: var(--maxw-prose); }
.prose p  { margin: 0 0 var(--sp-4); }
.prose ul { margin: 0 0 var(--sp-4); padding-left: 1.15rem; }
.prose li { margin-bottom: var(--sp-2); }
.prose li::marker { color: var(--c-accent); }

.mono { font-family: var(--font-mono); }
.text-muted { color: var(--c-text-muted); }

/* ==========================================================================
   6. Header & navigation
   ========================================================================== */
/* Dark in both themes, matching the masthead and the footer. It stays dark
   as it sticks over the light sections, which reads as deliberate branding
   rather than a bar that changes colour halfway down the page. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--c-ink) 92%, transparent);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--c-ink-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 4rem;
  position: relative;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-weight: 600;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--c-ink-text);
  letter-spacing: -0.01em;
}
.brand:hover { text-decoration: none; color: #fff; }

.brand__mark {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius);
  background: var(--c-ink-gold);
  color: var(--c-ink);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 700;
  flex: 0 0 auto;
}

.nav { display: flex; align-items: center; gap: var(--sp-2); }

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* `display: flex` above would otherwise override the browser's default
   styling for the `hidden` attribute, so the mobile menu could never close. */
.nav__list[hidden] { display: none; }

.nav__link {
  color: var(--c-ink-muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  position: relative;
}
.nav__link:hover { color: var(--c-ink-text); text-decoration: none; }
/* Gold underline grows in on hover and marks the section in view */
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: var(--c-ink-gold);
  transform: scaleX(0);
  transition: transform 200ms ease;
}
.nav__link:hover::after,
.nav__link[aria-current]::after { transform: scaleX(1); }
.nav__link[aria-current] { color: var(--c-ink-text); }

/* Icon-only buttons: theme toggle + mobile menu */
.icon-btn {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--c-ink-border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--c-ink-text) 6%, transparent);
  color: var(--c-ink-muted);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition),
              background-color var(--transition);
}
.icon-btn:hover { border-color: var(--c-ink-gold); color: var(--c-ink-gold); }

/* Show the sun in dark mode, the moon in light mode */
.icon-btn .icon-sun { display: none; }
html[data-theme="dark"] .icon-btn .icon-sun  { display: block; }
html[data-theme="dark"] .icon-btn .icon-moon { display: none; }

.nav__toggle { display: none; }   /* revealed under 780px */

/* ==========================================================================
   7. Hero
   ========================================================================== */
/* The masthead is a fixed dark surface in both themes: the page opens on a
   deep navy block, which is what gives it an institutional feel rather than
   a blank document. */
.hero {
  padding-block: var(--sp-9) var(--sp-8);
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 90% 70% at 80% -10%,
      color-mix(in srgb, var(--c-ink-accent) 16%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, var(--c-ink-2) 0%, var(--c-ink) 100%);
  color: var(--c-ink-muted);
}

/* Faint grid backdrop - a quiet nod to a terminal, not decoration */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right,  var(--c-ink-border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--c-ink-border) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: 0.55;
  -webkit-mask-image: radial-gradient(ellipse 85% 70% at 72% 0%, #000 0%, transparent 78%);
  mask-image: radial-gradient(ellipse 85% 70% at 72% 0%, #000 0%, transparent 78%);
  pointer-events: none;
}

/* A single hairline of gold along the very top edge - the sort of detail a
   printed research note has, and the only place the second accent shouts. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg,
    var(--c-ink-gold) 0%,
    color-mix(in srgb, var(--c-ink-gold) 45%, transparent) 28%,
    transparent 62%);
  pointer-events: none;
}

/* Nested inside .container so that it constrains the measure without
   inheriting the container's auto side margins (which would centre it). */
.hero__inner { position: relative; max-width: 46rem; z-index: 1; }

/* Decorative equity-curve motif filling the empty right half of the masthead.
   Purely ornamental: aria-hidden in the markup, hidden entirely once the
   layout narrows and the text would run underneath it. */
.hero__motif {
  position: absolute;
  right: 3%;              /* clear of the edge so the end marker is not clipped */
  bottom: 10%;
  width: 40%;
  max-width: 520px;
  overflow: visible;
  color: var(--c-ink-accent);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
.hero__motif .motif-grid  { stroke: var(--c-ink-border); stroke-width: 1; }
.hero__motif .motif-line  { stroke: currentColor; stroke-width: 2; fill: none; }
.hero__motif .motif-area  { fill: url(#motifFade); }
.hero__motif .motif-point { fill: var(--c-ink-gold); }
.hero__motif .motif-base  { stroke: var(--c-ink-border); stroke-width: 1; }

@media (max-width: 1100px) { .hero__motif { display: none; } }

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-gold);
  background: color-mix(in srgb, var(--c-ink-gold) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-ink-gold) 35%, transparent);
  border-radius: 999px;
  padding: var(--sp-2) var(--sp-4);
  margin: 0 0 var(--sp-5);
}
/* Small pulsing dot: "available", read at a glance */
.hero__eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
  animation: pulse-dot 2.4s ease-out infinite;
}
@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 60%, transparent); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.hero__name {
  font-size: var(--fs-4xl);
  line-height: 1.06;
  letter-spacing: -0.028em;
  color: var(--c-ink-text);
  margin: 0 0 var(--sp-4);
}

.hero__title {
  font-size: var(--fs-xl);
  font-weight: 400;
  color: #c4d1e4;
  margin: 0 0 var(--sp-4);
  line-height: 1.45;
  /* Hairline rule to the left, like a masthead standfirst */
  padding-left: var(--sp-4);
  border-left: 2px solid color-mix(in srgb, var(--c-ink-gold) 55%, transparent);
}

.hero__pitch {
  font-size: var(--fs-lg);
  color: var(--c-ink-muted);
  max-width: 42rem;
  margin: 0 0 var(--sp-6);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* Key facts strip under the hero copy */
.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  margin: var(--sp-7) 0 0;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-ink-border);
}
.hero__fact { min-width: 8rem; }
.hero__fact dt {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
  margin-bottom: var(--sp-1);
}
.hero__fact dd { margin: 0; font-weight: 600; color: var(--c-ink-text); }

/* --- Buttons on the dark masthead -------------------------------------- */
.hero .btn--ghost {
  border-color: color-mix(in srgb, var(--c-ink-text) 28%, transparent);
  color: var(--c-ink-text);
  background: color-mix(in srgb, var(--c-ink-text) 5%, transparent);
}
.hero .btn--ghost:hover {
  border-color: var(--c-ink-gold);
  color: var(--c-ink-gold);
}
.hero .btn--primary {
  background: var(--c-ink-text);
  color: var(--c-ink);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.hero .btn--primary:hover { background: #fff; color: var(--c-ink); }

/* ==========================================================================
   8. About & skills
   ========================================================================== */
.about {
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: start;
}

.skill-group__title {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin: 0 0 var(--sp-3);
}

/* --- Toolkit cards -----------------------------------------------------
   The skills used to be three bare chip lists. Wrapping each group in a
   card with an icon gives the column structure and weight against the
   narrative on the left. */
.toolkit { display: grid; gap: var(--sp-4); }

.toolkit-card {
  background: var(--c-bg-raised);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.toolkit-card:hover {
  border-color: var(--c-border-strong);
  box-shadow: var(--shadow-md);
}

.toolkit-card__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.toolkit-card__icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  border-radius: var(--radius);
  background: var(--c-gold-soft);
  color: var(--c-gold);
}

.toolkit-card__title {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin: 0;
}

/* --- Positioning callout inside the narrative ------------------------- */
.about__statement {
  margin: var(--sp-5) 0 0;
  padding: var(--sp-5);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--c-bg-subtle);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--c-text);
}
.section--subtle .about__statement { background: var(--c-bg-raised); }

/* --- Education cards ---------------------------------------------------- */
.edu {
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-border);
}

.edu__grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  margin-top: var(--sp-5);
}

.edu-card {
  position: relative;
  padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-6);
  background: var(--c-bg-raised);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
/* Gold spine on the leading edge */
.edu-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--c-gold), transparent 85%);
}

.edu-card__degree {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--c-text);
  margin: 0 0 var(--sp-2);
  line-height: 1.25;
}
.edu-card__school { margin: 0 0 var(--sp-3); color: var(--c-text-body); }
.edu-card__meta {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.chip {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--c-text-body);
  background: var(--c-bg-subtle);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: var(--sp-1) var(--sp-3);
  white-space: nowrap;
}
.section--subtle .chip { background: var(--c-bg-raised); }

/* Education timeline */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline__item {
  position: relative;
  padding-left: var(--sp-5);
  padding-bottom: var(--sp-5);
  border-left: 1px solid var(--c-border);
}
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 0.6rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-accent);
}
.timeline__title { margin: 0; font-size: var(--fs-base); color: var(--c-text); font-weight: 650; }
.timeline__meta  { margin: 0; font-size: var(--fs-sm); color: var(--c-text-muted); }

/* ==========================================================================
   9. Project cards
   ========================================================================== */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-bg-raised);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition),
              border-color var(--transition);
}
.card:hover,
.card:focus-within {
  transform: translateY(-3px);
  border-color: var(--c-border-strong);
  box-shadow: var(--shadow-md);
}

/* Accent rule that draws itself across the top edge on hover */
.card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 2px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms ease;
}
.card:hover::before,
.card:focus-within::before { transform: scaleX(1); }

.card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.card__index {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  color: var(--c-gold);
  position: relative;
  z-index: 1;
}

/* Oversized ghost numeral in the corner - depth without clutter. It is
   decorative only; the real index sits in .card__index above. */
.card::after {
  content: attr(data-index);
  position: absolute;
  right: var(--sp-4);
  bottom: var(--sp-2);
  font-family: var(--font-display);
  font-size: 5.5rem;
  font-weight: 600;
  line-height: 1;
  color: var(--c-text);
  opacity: 0.045;
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition);
}
.card:hover::after { opacity: 0.08; transform: translateY(-2px); }

.card__title {
  font-size: var(--fs-xl);
  line-height: 1.3;
  color: var(--c-text);
  margin: 0 0 var(--sp-3);
  position: relative;
  z-index: 1;
}
.card__title a { color: inherit; }
.card__title a:hover { color: var(--c-accent); text-decoration: none; }

/* Stretched link: the whole card is clickable, the link text stays
   meaningful for screen readers. */
.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.card__desc {
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  flex: 1 1 auto;
}

.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.card__tag {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}
/* Middot between tags, so they do not read as one run-on string */
.card__tag + .card__tag::before {
  content: "\00b7";
  margin-right: var(--sp-2);
  color: var(--c-border-strong);
}

.card__cue {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-accent);
  white-space: nowrap;
}

/* ==========================================================================
   10. Project detail page
   ========================================================================== */
.page-head {
  padding-block: var(--sp-7) var(--sp-6);
  border-bottom: 1px solid var(--c-border);
  background: var(--c-bg-subtle);
}

.breadcrumb {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  margin: 0 0 var(--sp-4);
}
.breadcrumb a { color: var(--c-text-muted); }
.breadcrumb a:hover { color: var(--c-accent); }

.page-head__title {
  font-size: var(--fs-3xl);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--c-text);
  margin: 0 0 var(--sp-4);
  max-width: 26ch;
}

.page-head__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

/* Two-column body: article + sticky sidebar */
.project-body {
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: minmax(0, 1fr) 18rem;
  align-items: start;
  padding-block: var(--sp-7);
}

.project-block + .project-block { margin-top: var(--sp-7); }

.project-block__title {
  font-size: var(--fs-xl);
  color: var(--c-text);
  margin: 0 0 var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--c-border);
  letter-spacing: -0.01em;
}

.lead {
  font-size: var(--fs-lg);
  color: var(--c-text-body);
  line-height: 1.6;
}

.sidebar {
  position: sticky;
  top: 5rem;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.panel {
  background: var(--c-bg-raised);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
}

.panel__title {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin: 0 0 var(--sp-3);
}

.panel .btn { width: 100%; justify-content: center; }
.panel .btn + .btn { margin-top: var(--sp-2); }

/* Definition list used by the "at a glance" panel */
.dl { margin: 0; font-size: var(--fs-sm); }
.dl dt {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-text-muted);
}
.dl dd { margin: 0 0 var(--sp-3); color: var(--c-text); font-weight: 550; }
.dl dd:last-child { margin-bottom: 0; }

/* --- Interactive chart slot -------------------------------------------- */
.chart {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-bg-raised);
  padding: var(--sp-4);
  box-shadow: var(--shadow-sm);
}

.chart__canvas { width: 100%; min-height: 380px; }

.chart__note {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  font-family: var(--font-mono);
}

/* Shown when Plotly cannot load (offline, blocked CDN) */
.chart__fallback {
  display: none;
  padding: var(--sp-6);
  text-align: center;
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}
.chart.is-unavailable .chart__canvas   { display: none; }
.chart.is-unavailable .chart__fallback { display: block; }

/* --- Callout ------------------------------------------------------------ */
.callout {
  border-left: 3px solid var(--c-accent);
  background: var(--c-bg-subtle);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--sp-4) var(--sp-5);
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-sm);
}
.callout p:last-child { margin-bottom: 0; }

/* Next / previous project navigation */
.pager {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding-block: var(--sp-6);
  border-top: 1px solid var(--c-border);
}

/* ==========================================================================
   11. Contact
   ========================================================================== */
.contact-list {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  list-style: none;
  margin: var(--sp-6) 0 0;
  padding: 0;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--c-bg-raised);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  color: var(--c-text);
  transition: border-color var(--transition), transform var(--transition);
}
.contact-item:hover {
  border-color: var(--c-accent);
  transform: translateY(-2px);
  text-decoration: none;
  color: var(--c-text);
}
.contact-item svg { flex: 0 0 auto; color: var(--c-accent); }
.contact-item__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.contact-item__value {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  word-break: break-word;
}

/* ==========================================================================
   12. Footer
   ========================================================================== */
/* Dark, like the masthead, so the page is bookended rather than trailing off */
.site-footer {
  background: var(--c-ink);
  border-top: 1px solid var(--c-ink-border);
  padding-block: var(--sp-7) var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
  position: relative;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 38%,
    color-mix(in srgb, var(--c-ink-gold) 45%, transparent) 72%,
    var(--c-ink-gold) 100%);
}

.site-footer a { color: var(--c-ink-text); }
.site-footer a:hover { color: var(--c-ink-gold); text-decoration: none; }

/* Upper block: brand, then two link columns */
.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr));
  gap: var(--sp-6);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--c-ink-border);
}

.site-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--c-ink-text);
  margin: 0 0 var(--sp-3);
}
.site-footer__brand .brand__mark { background: var(--c-ink-gold); color: var(--c-ink); }

.site-footer__tagline { margin: 0; max-width: 34ch; line-height: 1.6; }

.site-footer__title {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-gold);
  margin: 0 0 var(--sp-3);
}

.site-footer__list { list-style: none; margin: 0; padding: 0; }
.site-footer__list li { margin-bottom: var(--sp-2); }

.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding-top: var(--sp-5);
}
.site-footer__inner p { margin: 0; }

/* ==========================================================================
   13. Buttons, badges, links
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: var(--fs-sm);
  font-weight: 600;
  font-family: inherit;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition),
              color var(--transition), transform var(--transition);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }

.btn--primary { background: var(--c-accent); color: #fff; }
.btn--primary:hover { background: var(--c-accent-hover); color: #fff; }
html[data-theme="dark"] .btn--primary,
html[data-theme="dark"] .btn--primary:hover { color: #0d1626; }

.btn--ghost {
  background: transparent;
  border-color: var(--c-border-strong);
  color: var(--c-text);
}
.btn--ghost:hover { border-color: var(--c-accent); color: var(--c-accent); }

/* Placeholder links (PDF / repo not published yet) */
.btn--pending {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: var(--sp-1) var(--sp-3);
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge--done {
  color: var(--c-status-done);
  background: var(--c-status-done-bg);
  border-color: var(--c-status-done);
}
.badge--wip {
  color: var(--c-status-wip);
  background: var(--c-status-wip-bg);
  border-color: var(--c-status-wip);
}
.badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

.link-arrow { font-weight: 600; }
.link-arrow::after {
  content: " \2192";
  display: inline-block;
  transition: transform var(--transition);
}
.link-arrow:hover::after { transform: translateX(3px); }

/* ==========================================================================
   14. Stat band
   A compact row of headline numbers under the hero. This is the part a
   recruiter reads in three seconds, so it stays factual and unadorned.
   ========================================================================== */
/* Continues the dark masthead rather than starting a new light band - the
   figures read as part of the header block. */
.stat-band {
  background: var(--c-ink);
  border-top: 1px solid var(--c-ink-border);
  color: var(--c-ink-muted);
  position: relative;
}

/* auto-fit, so adding or removing a stat needs no change here */
.stat-band__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0;
}

.stat {
  padding: var(--sp-6) var(--sp-5) var(--sp-6) 0;
  border-right: 1px solid var(--c-ink-border);
}
.stat:last-child { border-right: 0; }

.stat__value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 600;
  line-height: 1.05;
  color: var(--c-ink-gold);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--sp-3);
}

.stat__label {
  display: block;
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
  line-height: 1.5;
  max-width: 22ch;
}

/* ==========================================================================
   15. Feature block (the Geneva / UNITAR highlight)
   A two-column, image-led section used for the single achievement that
   deserves more room than a card in the grid.
   ========================================================================== */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--sp-7);
  align-items: center;
}

.feature__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-md);
  background: var(--c-bg-subtle);
}

.feature__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 28%;
  transition: transform 400ms ease;
}
.feature__media:hover img { transform: scale(1.02); }

/* Award ribbon sitting on the photo */
.feature__ribbon {
  position: absolute;
  left: var(--sp-4);
  bottom: var(--sp-4);
  right: var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius);
  background: rgba(13, 22, 38, 0.82);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: var(--fs-sm);
  line-height: 1.35;
}
.feature__ribbon strong { display: block; font-weight: 650; }
.feature__ribbon span { color: #b7c2d4; font-size: var(--fs-xs); }
.feature__ribbon svg { flex: 0 0 auto; color: #dcae63; }

.feature__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-4);
  align-items: center;
}

/* Compact result figures inside the feature copy */
.feature__figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-4);
  margin: var(--sp-5) 0;
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}
.feature__figure dt {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: var(--sp-1);
}
.feature__figure dd {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 650;
  color: var(--c-accent);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   16. Photo gallery
   ========================================================================== */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--sp-3);
  margin: var(--sp-6) 0 0;
  padding: 0;
  list-style: none;
}

.gallery__item {
  position: relative;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--c-border);
  background: var(--c-bg-subtle);
  cursor: zoom-in;
  transition: border-color var(--transition), transform var(--transition);
}
.gallery__item:hover {
  border-color: var(--c-accent);
  transform: translateY(-2px);
}

.gallery__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.gallery__caption {
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  background: var(--c-bg-raised);
  border-top: 1px solid var(--c-border);
}

/* ==========================================================================
   17. Credentials (trading certifications)
   ========================================================================== */
/* Two wide columns rather than three narrow ones: with four certifications
   that gives a balanced 2x2 block, and the certificates stay legible as
   thumbnails. min() keeps a single column from overflowing narrow screens. */
.cred-groups {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  margin-top: var(--sp-6);
}

.cred {
  display: flex;
  flex-direction: column;
  background: var(--c-bg-raised);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition), box-shadow var(--transition),
              transform var(--transition);
}
.cred:hover {
  border-color: var(--c-accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

/* Certificate thumbnail. The whole tile is a lightbox trigger, and the
   magnifier hint makes that discoverable rather than hidden. */
.cred__thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--c-bg-subtle);
  border-bottom: 1px solid var(--c-border);
  overflow: hidden;
  cursor: zoom-in;
}
.cred__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 400ms ease;
}
.cred:hover .cred__thumb img { transform: scale(1.03); }

.cred__zoom {
  position: absolute;
  right: var(--sp-3);
  bottom: var(--sp-3);
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius);
  background: rgba(13, 22, 38, 0.72);
  color: #fff;
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
}
.cred:hover .cred__zoom,
.cred__thumb:focus-visible .cred__zoom { opacity: 1; }

.cred__body {
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.cred__issuer {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 0 0 var(--sp-2);
}

.cred__title {
  font-size: var(--fs-lg);
  font-weight: 650;
  color: var(--c-text);
  margin: 0 0 var(--sp-2);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.cred__desc {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  flex: 1 1 auto;
}

.cred__date {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  font-variant-numeric: tabular-nums;
}

/* Repeat awards, listed compactly rather than as four more cards */
.cred-list {
  list-style: none;
  margin: var(--sp-5) 0 0;
  padding: 0;
  border-top: 1px solid var(--c-border);
}
.cred-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--c-border);
  font-size: var(--fs-sm);
}
.cred-list__name { font-weight: 600; color: var(--c-text); }
.cred-list__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   18. Lightbox
   Opens a photo or certificate full size. Pure CSS + a few lines of JS;
   no library.
   ========================================================================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: var(--sp-5);
  background: rgba(8, 14, 25, 0.88);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }

.lightbox__img {
  max-width: min(1100px, 94vw);
  max-height: 86vh;
  width: auto;
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  background: #fff;
}

.lightbox__caption {
  margin-top: var(--sp-3);
  color: #cdd6e3;
  font-size: var(--fs-sm);
  text-align: center;
  max-width: 60ch;
}

.lightbox__close {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
}
.lightbox__close:hover { background: rgba(255, 255, 255, 0.16); }

/* ==========================================================================
   19. Scroll reveal
   Elements fade up once, the first time they enter the viewport. Disabled
   wholesale under prefers-reduced-motion (see section 21).
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms ease, transform 520ms ease;
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Nothing may stay invisible if JavaScript never runs */
.no-js [data-reveal] { opacity: 1; transform: none; }

/* ==========================================================================
   20. Responsive breakpoints
   ========================================================================== */
@media (max-width: 980px) {
  .project-body { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .about   { grid-template-columns: 1fr; gap: var(--sp-6); }

  /* The feature photo moves above the copy rather than beside it */
  .feature { grid-template-columns: 1fr; gap: var(--sp-6); }
  .feature__media img { aspect-ratio: 16 / 10; object-position: center 25%; }

  .stat { padding-left: 0; }
  .site-footer__top { grid-template-columns: 1fr 1fr; }
  .site-footer__brand-col { grid-column: 1 / -1; }
}

@media (max-width: 780px) {
  :root {
    --fs-4xl: 2.25rem;
    --fs-3xl: 1.875rem;
    --fs-2xl: 1.5rem;
  }

  .section { padding-block: var(--sp-7); }
  .hero    { padding-block: var(--sp-7) var(--sp-6); }

  /* Collapsible mobile menu */
  .nav__toggle { display: grid; }

  .nav__list {
    position: absolute;
    top: 100%;
    left: calc(var(--sp-5) * -1);
    right: calc(var(--sp-5) * -1);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--sp-2) var(--sp-5) var(--sp-4);
    background: var(--c-ink);
    border-bottom: 1px solid var(--c-ink-border);
    box-shadow: var(--shadow-md);
  }
  .nav__list li { border-top: 1px solid var(--c-ink-border); }
  .nav__link::after { display: none; }
  .nav__link { display: block; padding: var(--sp-3) 0; }

  .grid { grid-template-columns: 1fr; }
  .hero__facts { gap: var(--sp-5); }
  .site-footer__inner { justify-content: flex-start; }
  .site-footer__top { grid-template-columns: 1fr; gap: var(--sp-5); }
  .card::after { font-size: 4rem; }
}

@media (max-width: 420px) {
  .container { padding-inline: var(--sp-4); }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .stat-band__grid { grid-template-columns: 1fr; }
  .stat { border-right: 0; border-bottom: 1px solid var(--c-border); }
  .stat:last-child { border-bottom: 0; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   21. Motion & accessibility
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  /* Never leave revealed content stuck at opacity 0 */
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

@media print {
  .site-header, .site-footer, .sidebar, .pager, .hero::before { display: none; }
  body { color: #000; background: #fff; }
}