/* =====================================================================
   Emmanuel Abba — "Luxe" alternate design (dark premium)
   ---------------------------------------------------------------------
   This file = the main site's stylesheet (copied below, unchanged) with
   the Luxe design layered on top in section L. To change the Luxe look,
   edit the tokens in L1. Always dark: the theme button is hidden.
   Palette: emerald-black (brand green, darkened), champagne gold, ivory.
   Type: Cormorant Garamond (display) + Montserrat (body).
   ===================================================================== */

/* =====================================================================
   Emmanuel Abba — Portfolio stylesheet
   ---------------------------------------------------------------------
   HOW TO EDIT
   - Colours live in the :root tokens below. Change --accent to re-theme.
   - Dark-mode colours are in [data-theme="dark"].
   - Fonts are loaded in each HTML <head> (Google Fonts).
   ===================================================================== */

/* ---------- 1. Design tokens (light mode = default) ---------- */
:root {
  --accent: #1f7a4d;          /* deep green — main accent colour */
  --accent-strong: #165c39;   /* hover / pressed state */
  --accent-soft: #e6f2ec;     /* tinted backgrounds (tags, highlights) */

  --bg: #fbfbf8;              /* page background */
  --surface: #ffffff;         /* cards */
  --text: #17201b;            /* main text */
  --muted: #5b6660;           /* secondary text */
  --line: #e3e6e1;            /* borders and dividers */

  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;

  --radius: 14px;
  --maxw: 1080px;             /* max content width */
  --nav-h: 64px;              /* sticky nav height (used for anchor offsets) */
  --shadow: 0 1px 2px rgba(20, 30, 25, .04), 0 8px 24px rgba(20, 30, 25, .06);
}

/* ---------- 2. Dark mode tokens (toggled via the moon/sun button) ---------- */
[data-theme="dark"] {
  --accent: #4cc38a;
  --accent-strong: #6fd6a3;
  --accent-soft: #15301f;

  --bg: #0f1412;
  --surface: #161d1a;
  --text: #e8ece9;
  --muted: #9aa69f;
  --line: #26302b;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px); /* keeps anchors clear of the sticky nav */
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  transition: background-color .25s ease, color .25s ease;
}

img { max-width: 100%; display: block; }

a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-strong); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.4rem); }
h3 { font-size: 1.2rem; font-family: var(--font-body); font-weight: 700; letter-spacing: 0; }

p { margin: 0 0 1em; }

/* Visible keyboard focus everywhere */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Screen-reader-only helper */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* "Skip to content" link for keyboard users */
.skip-link {
  position: absolute; left: 16px; top: -48px; z-index: 100;
  background: var(--accent); color: #fff; padding: 8px 14px; border-radius: 8px;
}
.skip-link:focus { top: 12px; color: #fff; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- 4. Sticky navigation ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}

.nav {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: var(--nav-h);
}

.brand {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.brand span { color: var(--accent); }

.nav-links {
  display: flex;
  gap: 4px;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}

.nav-links a {
  display: block;
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--muted);
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s, background-color .2s;
}
.nav-links a:hover { color: var(--text); }

/* Active link: current page (aria-current) or the section in view (.is-active, set by JS) */
.nav-links a[aria-current="page"],
.nav-links a.is-active {
  color: var(--accent);
  background: var(--accent-soft);
}

.theme-toggle {
  flex: none;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.theme-toggle:hover { border-color: var(--accent); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* Phones: brand + toggle on row one, scrollable link row below */
@media (max-width: 820px) {
  .nav { flex-wrap: wrap; gap: 0 12px; padding-top: 10px; }
  .theme-toggle { margin-left: auto; }
  .nav-links {
    order: 3;
    width: 100%;
    margin: 0 -20px;
    padding: 8px 20px 10px;
    width: calc(100% + 40px);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .nav-links::-webkit-scrollbar { display: none; }
}

/* ---------- 5. Sections & shared bits ---------- */
.section { padding: 88px 0; }
.section + .section { border-top: 1px solid var(--line); }

.page-head { padding: 72px 0 24px; }
.page-head p { color: var(--muted); max-width: 60ch; font-size: 1.1rem; }

.eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--accent);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.lead { font-size: 1.2rem; color: var(--muted); max-width: 62ch; }

/* Buttons */
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  font-size: .97rem;
  text-decoration: none;
  transition: border-color .2s, background-color .2s, transform .2s;
}
.btn:hover { border-color: var(--accent); color: var(--text); }
.btn svg { width: 17px; height: 17px; }

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

/* Tags / chips */
.tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; list-style: none; }
.tags li {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: .82rem;
  font-weight: 600;
}

/* Generic card */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow);
}

/* Placeholder marker — anything you still need to fill in */
.placeholder {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: .9em;
  background: #fff4cc;
  color: #6b5200;
  padding: 1px 6px;
  border-radius: 4px;
}
[data-theme="dark"] .placeholder { background: #3a3110; color: #f2d97a; }

/* ---------- 6. Hero ---------- */
.hero { padding: 96px 0 88px; }

.hero-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: center;
}

.hero h1 { margin-bottom: .2em; }
.hero h1 em { font-style: italic; color: var(--accent); }

.hero .tagline {
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  color: var(--muted);
  margin-bottom: 32px;
  max-width: 46ch;
}

.hero .location {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--muted); font-size: .95rem; margin-bottom: 20px;
}
.hero .location svg { width: 16px; height: 16px; }

/* Photo slot. Replace the monogram <div> with an <img> when you have a photo. */
.avatar {
  width: 220px; height: 220px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-soft);
  border: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 4.5rem;
  color: var(--accent);
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 500;
  color: var(--accent);
  line-height: 1.1;
}
.stat span { color: var(--muted); font-size: .92rem; }

@media (max-width: 760px) {
  .hero { padding: 56px 0 64px; }
  .hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .avatar { width: 120px; height: 120px; font-size: 2.6rem; order: -1; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

/* ---------- 7. About ---------- */
.about-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 48px; }
.about-grid p { font-size: 1.12rem; }
.about-facts { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; }
.about-facts li { display: flex; gap: 10px; color: var(--muted); }
.about-facts strong { color: var(--text); min-width: 110px; }
@media (max-width: 760px) { .about-grid { grid-template-columns: 1fr; gap: 8px; } }

/* ---------- 8. Skills ---------- */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 20px;
  margin-top: 32px;
}
.skill-group h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.skill-group h3 .dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex: none;
}

/* ---------- 9. Experience timeline ---------- */
.timeline {
  position: relative;
  list-style: none;
  margin: 32px 0 0;
  padding: 0 0 0 28px;
}
.timeline::before {           /* the vertical line */
  content: "";
  position: absolute;
  left: 6px; top: 8px; bottom: 8px;
  width: 2px;
  background: var(--line);
}
.timeline > li { position: relative; margin-bottom: 22px; }
.timeline > li::before {      /* the dot on the line */
  content: "";
  position: absolute;
  left: -28px; top: 30px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--bg);
  border: 3px solid var(--accent);
}

.job-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  margin-bottom: 4px;
}
.job-head h3 { margin: 0; }
.job-dates { color: var(--muted); font-size: .92rem; font-weight: 600; white-space: nowrap; }
.job-org { color: var(--muted); margin: 0 0 4px; font-size: .97rem; }
.job-project { font-weight: 600; margin: 10px 0 6px; }
.job ul { margin: 0; padding-left: 20px; }
.job ul li { margin-bottom: 4px; }
.job ul li::marker { color: var(--accent); }

/* Filter chips above the timeline */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.filters button {
  font: inherit; font-size: .9rem; font-weight: 600;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  cursor: pointer;
}
.filters button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
[data-theme="dark"] .filters button[aria-pressed="true"] { color: #0f1412; }
.timeline > li[hidden] { display: none; }

/* ---------- 10. Projects ---------- */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 32px;
}
.project { display: flex; flex-direction: column; }
.project .meta { color: var(--muted); font-size: .88rem; font-weight: 600; margin-bottom: 8px; }
.project p:not(.meta) { color: var(--muted); flex: 1; } /* description grows so links line up */
.project .tags { margin-bottom: 18px; }
.project .project-link {
  font-weight: 700; font-size: .95rem; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.project .project-link:hover { text-decoration: underline; }

/* ---------- 11. Education / certifications ---------- */
.edu-list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 16px; }
.edu-item { display: grid; grid-template-columns: 160px 1fr; gap: 16px; }
.edu-item .when { color: var(--muted); font-weight: 600; font-size: .92rem; padding-top: 2px; }
.edu-item h3 { margin-bottom: 2px; }
.edu-item p { margin: 0; color: var(--muted); }
@media (max-width: 600px) { .edu-item { grid-template-columns: 1fr; gap: 2px; } }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 24px; }
@media (max-width: 760px) { .two-col { grid-template-columns: 1fr; } }

.lang-table { width: 100%; border-collapse: collapse; font-size: .97rem; }
.lang-table th, .lang-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); }
.lang-table th { color: var(--muted); font-weight: 600; font-size: .85rem; }

.pubs { padding-left: 20px; margin: 24px 0 0; }
.pubs li { margin-bottom: 14px; color: var(--muted); }
.pubs li strong { color: var(--text); font-weight: 600; }

/* ---------- 12. Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin-top: 32px;
}
.contact-card {
  display: flex; flex-direction: column; gap: 4px;
  text-decoration: none; color: var(--text);
  transition: border-color .2s, transform .2s;
}
a.contact-card:hover { border-color: var(--accent); color: var(--text); }
.contact-card svg { width: 24px; height: 24px; color: var(--accent); margin-bottom: 10px; }
.contact-card .label { color: var(--muted); font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.contact-card .value { font-weight: 600; word-break: break-word; }

.cta-band {
  margin-top: 8px;
  padding: 48px;
  border-radius: calc(var(--radius) + 6px);
  background: var(--accent-soft);
}
.cta-band h2 { margin-bottom: .3em; }
@media (max-width: 600px) { .cta-band { padding: 28px 22px; } }

/* ---------- 13. Footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 32px 0 40px;
  color: var(--muted);
  font-size: .93rem;
}
.footer-inner {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px;
}
.footer-links { display: flex; flex-wrap: wrap; gap: 18px; list-style: none; padding: 0; margin: 0; }
.footer-links a { color: var(--muted); text-decoration: none; font-weight: 600; }
.footer-links a:hover { color: var(--accent); }

/* ---------- 14. Motion ----------
   One deliberate moment only: the hero settles in once on page load
   (name, then tagline and buttons, then the photo). Nothing else animates on scroll.
   Content is fully visible without JS and with "reduce motion" switched on. */
/* No opacity fade: elements are visible from the first frame, so Google can measure load speed (LCP). */
@keyframes hero-in { from { transform: translateY(12px); } to { transform: none; } }
@keyframes photo-in { from { clip-path: inset(22% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
.hero h1        { animation: hero-in .7s cubic-bezier(.2,.7,.2,1) both; }
.hero .tagline  { animation: hero-in .7s .12s cubic-bezier(.2,.7,.2,1) both; }
.hero .btn-row  { animation: hero-in .7s .22s cubic-bezier(.2,.7,.2,1) both; }
.portrait       { animation: photo-in 1s .1s cubic-bezier(.2,.7,.2,1) both; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero h1, .hero .tagline, .hero .btn-row, .portrait { animation: none; }
  * { transition: none !important; }
}

/* ---------- 15. Print: clean, ink-friendly ---------- */
@media print {
  .site-header, .theme-toggle, .filters, .btn-row, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  .card { box-shadow: none; }
}

/* ---------- 16. Blog: listing page ---------- */
.project-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }

.post-list { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 20px; }
.post-card .meta { color: var(--muted); font-size: .88rem; font-weight: 600; margin-bottom: 8px; }
.post-card .post-title { font-size: clamp(1.35rem, 2.6vw, 1.7rem); margin-bottom: .4em; }
.post-card .post-title a { color: var(--text); text-decoration: none; }
.post-card .post-title a:hover { color: var(--accent); }
/* make the whole card clickable via the title link */
.post-card { position: relative; transition: border-color .2s, transform .2s; }
.post-card .post-title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.post-card:hover { border-color: var(--accent); }
.post-card > p:not(.meta) { color: var(--muted); max-width: 70ch; }
.post-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.read-time { color: var(--muted); font-size: .88rem; font-weight: 600; margin: 0; }

/* ---------- 17. Blog: single post ---------- */
.post-head { padding-top: 56px; padding-bottom: 40px; max-width: 760px; }
.post-head h1 { font-size: clamp(2rem, 5vw, 3rem); }
.post-head .tags { margin: 20px 0 12px; }
.back-link { display: block; width: fit-content; margin-bottom: 28px; font-weight: 600; text-decoration: none; font-size: .95rem; }
.back-link:hover { text-decoration: underline; }
.post-summary { font-size: 1.2rem; color: var(--muted); }

.post-facts {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 24px;
  margin: 28px 0 0; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.post-facts dt { color: var(--muted); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.post-facts dd { margin: 2px 0 0; font-weight: 600; }
@media (max-width: 600px) { .post-facts { grid-template-columns: 1fr; } }

/* Readable article body — about 68 characters per line */
.prose { max-width: 68ch; padding-bottom: 32px; font-size: 1.1rem; }
.prose h2 { font-size: 1.6rem; margin-top: 1.8em; }
.prose h2:first-of-type { margin-top: 0; }
.prose ul { padding-left: 22px; margin: 0 0 1em; }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--accent); }
.prose figure { margin: 2em 0; }
.prose figure img { border-radius: var(--radius); border: 1px solid var(--line); }
.prose figcaption { color: var(--muted); font-size: .9rem; margin-top: 8px; }
.post-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2.5em; }

.post-pager {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  max-width: 760px; padding: 32px 0 72px; border-top: 1px solid var(--line);
}
.post-pager a {
  display: block; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--text); text-decoration: none; font-weight: 600; font-size: .95rem;
}
.post-pager a:hover { border-color: var(--accent); }
.post-pager a span { display: block; color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 4px; }
.post-pager .next { text-align: right; }
@media (max-width: 600px) { .post-pager { grid-template-columns: 1fr; } .post-pager .next { text-align: left; } }

/* ---------- 18. Hero portrait ----------
   Transparent cut-out photo. The soft fade at the bottom blends the
   straight crop into the page. Change width to resize it. */
.portrait {
  display: block;
  width: 340px;
  align-self: end;
  margin-bottom: -64px;              /* fade ends exactly on the stats divider line */
}
.portrait img {
  width: 100%;
  height: auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
}
@media (max-width: 760px) {
  .portrait { width: 220px; order: -1; margin: 0 auto -8px; }
}

/* ---------- 19. Logo in the nav ----------
   Change the height to resize; the width follows. */
.brand { display: inline-flex; align-items: center; color: var(--text); }
.brand .logo { height: 34px; width: auto; display: block; }
.brand:hover { color: var(--text); opacity: .85; }
@media (max-width: 820px) { .brand .logo { height: 30px; } }

/* ---------- 20. Organisations that have used my services ----------
   Logos live in assets/logos/. Until a logo file exists, the name shows as text.
   Logos show in full colour. For greyscale, add to .org.has-logo img:
     filter: grayscale(1); opacity: .8;   (and remove it again on .org:hover img) */
.orgs { padding: 8px 0 80px; }
.orgs-title { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: .3em; }
.orgs-intro { color: var(--muted); max-width: 60ch; margin-bottom: 28px; }
.org-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px;
}
.org {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 14px;
  background: #fff;                       /* white tile so logos read in dark mode too */
  overflow: hidden;
}
.org-mark {                                 /* logo area: same height on every tile */
  display: grid; place-items: center; text-align: center;
  height: 120px; padding: 18px 22px;
}
.org-mark img { display: none; max-width: 100%; max-height: 84px; width: auto; height: auto; object-fit: contain; }
.org-name { font-weight: 700; font-size: 1.05rem; line-height: 1.3; color: #26332c; }
.org.has-logo .org-mark img { display: block; }
.org.has-logo .org-name {                   /* keep the name for screen readers only */
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
[data-theme="dark"] .org { background: #fff; border-color: transparent; }
@media (max-width: 600px) {
  .org-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .org-mark { height: 96px; padding: 12px 14px; }
  .org-mark img { max-height: 64px; }
  .org-name { font-size: .95rem; }
}

/* ---------- 21. Education: highlights under a degree ---------- */
.edu-highlights { margin: 12px 0 0; padding-left: 20px; color: var(--muted); }
.edu-highlights li { margin-bottom: 4px; }
.edu-highlights li::marker { color: var(--accent); }

/* ---------- 23. Phone menu ----------
   Without JS the links stay as a scrollable row (always reachable).
   With JS, phones get a Menu button that opens a full-width list. */
.menu-toggle {
  display: none; flex: none;
  width: 44px; height: 44px; place-items: center;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--text); cursor: pointer;
}
.menu-toggle-bars, .menu-toggle-bars::before, .menu-toggle-bars::after {
  display: block; width: 16px; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.menu-toggle-bars { position: relative; }
.menu-toggle-bars::before, .menu-toggle-bars::after { content: ""; position: absolute; left: 0; }
.menu-toggle-bars::before { top: -5px; }
.menu-toggle-bars::after { top: 5px; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars::before { transform: translateY(5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars::after { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 820px) {
  .js .menu-toggle:not([hidden]) { display: grid; margin-left: auto; }
  .js .menu-toggle:not([hidden]) ~ .theme-toggle { margin-left: 0; }
  .js .nav { flex-wrap: nowrap; padding-top: 0; }
  .js .nav-links {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    width: auto; margin: 0; padding: 8px 20px 18px;
    flex-direction: column; gap: 2px; overflow: visible;
    background: var(--bg); border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 24px rgba(20, 30, 25, .08);
  }
  .js .nav.is-open .nav-links { display: flex; }
  .js .nav-links a { padding: 12px 14px; font-size: 1.05rem; border-radius: 10px; }
}

/* ---------- 24. Readability & navigation polish (UI/UX review, 4 Nov 2026) ---------- */
/* Balanced headings: no single word stranded on the last line */
h1, h2, h3, .post-title { text-wrap: balance; }

/* Comfortable reading length (about 70 characters per line) on long text */
.job-org, .job-project, .job ul,
.post-card > p:not(.meta), .post-foot, .prose { max-width: 56ch; }   /* 56ch of this font is about 70 characters */

/* "Contact" is the main next step: shown as a button in the menu */
.nav-links .nav-cta {
  color: #fff; background: var(--accent);
  padding-left: 16px; padding-right: 16px; margin-left: 6px;
}
.nav-links .nav-cta:hover,
.nav-links .nav-cta[aria-current="page"],
.nav-links .nav-cta.is-active { color: #fff; background: var(--accent-strong); }
[data-theme="dark"] .nav-links .nav-cta,
[data-theme="dark"] .nav-links .nav-cta:hover,
[data-theme="dark"] .nav-links .nav-cta[aria-current="page"] { color: #0f1412; }
@media (max-width: 820px) {
  .js .nav-links .nav-cta { margin: 8px 0 0; text-align: center; }
}

/* Contact page: note and location line under the intro */
.page-head .contact-note { margin-top: -4px; }
.contact-location {
  display: flex; align-items: center; gap: 8px;
  color: var(--muted); font-size: 1rem; margin: 0;
}
.contact-location svg { width: 18px; height: 18px; color: var(--accent); flex: none; }

/* ---------- 25. Services: "What I can help you with" (home) ---------- */
.service-grid {
  list-style: none; margin: 32px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.service { display: flex; flex-direction: column; }
.service-icon {
  width: 44px; height: 44px; padding: 10px; margin-bottom: 18px;
  border-radius: 12px; background: var(--accent-soft); color: var(--accent);
}
.service h3 { font-size: 1.15rem; margin-bottom: .4em; }
.service p { color: var(--muted); font-size: .98rem; }
.service .service-proof {
  margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: .88rem; color: var(--text);
}
.service-proof span { display: block; color: var(--muted); font-size: .8rem; font-weight: 600; }
.services-cta { margin-top: 28px; }
@media (max-width: 1000px) { .service-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .service-grid { grid-template-columns: 1fr; } }

/* ---------- 26. Project covers & featured work ---------- */
/* Cover images sit flush at the top of their card */
.card .cover, .post-card .post-thumb {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-bottom: 1px solid var(--line);
}
.feature, .project { padding: 0; overflow: hidden; }
.feature-body, .project > :not(.cover) { padding-left: 26px; padding-right: 26px; }
.project > .meta, .feature-body { padding-top: 22px; }
.project > .project-links { padding-bottom: 24px; }
.feature-body { padding-bottom: 24px; display: flex; flex-direction: column; flex: 1; }
.feature { display: flex; flex-direction: column; }
.feature .meta, .project .meta { color: var(--muted); font-size: .88rem; font-weight: 600; margin-bottom: 8px; }
.feature p:not(.meta):not(.result) { color: var(--muted); flex: 1; }
.result {
  margin: 0 0 10px; color: var(--accent);
  font-family: var(--font-display); font-size: 1.35rem; line-height: 1.2;
}
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px; }
.see-all { margin: 24px 0 0; font-weight: 600; }
@media (max-width: 900px) { .feature-grid { grid-template-columns: 1fr; } }

/* Projects page: featured projects as wide cards (image left, text right) */
.group-title { font-size: clamp(1.4rem, 2.6vw, 1.75rem); margin: 0 0 20px; }
.project-grid + .group-title, .project-featured-list + .group-title { margin-top: 56px; }
.project-featured-list { display: grid; gap: 20px; }
.project-featured { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.project-featured .cover { height: 100%; border-bottom: 0; border-right: 1px solid var(--line); }
.project-featured .feature-body { padding: 28px 30px; }
.project-featured h3 { font-size: 1.4rem; }
.project-featured .tags { margin-bottom: 18px; }
@media (max-width: 760px) {
  .project-featured { grid-template-columns: 1fr; }
  .project-featured .cover { height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .project-featured .feature-body { padding: 22px 22px 24px; }
}

/* Blog: cover under each post's header, thumbnails in the list */
.post-cover {
  display: block; width: 100%; height: auto; margin-top: 28px;
  border-radius: var(--radius); border: 1px solid var(--line);
}
.post-card.has-cover { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; }
.post-card .post-thumb { border: 1px solid var(--line); border-radius: 10px; }
@media (max-width: 700px) { .post-card.has-cover { grid-template-columns: 1fr; gap: 16px; } }

/* Testimonials (section is hidden in index.html until real quotes are added) */
.quote-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 28px; }
.quote { margin: 0; }
.quote blockquote { margin: 0 0 16px; font-family: var(--font-display); font-size: 1.2rem; line-height: 1.45; }
.quote figcaption strong { display: block; }
.quote figcaption span { color: var(--muted); font-size: .92rem; }
@media (max-width: 760px) { .quote-grid { grid-template-columns: 1fr; } }
/* keep the result line green and compact inside project cards (overrides the muted card text rule) */
.project p.result, .feature p.result { color: var(--accent); flex: none; }

/* =====================================================================
   L. LUXE DESIGN LAYER
   ===================================================================== */

/* ---------- L1. Tokens: dark (the default). Light-mode tokens are in L12 at the end. ---------- */
:root, :root[data-theme="dark"] {
  --bg: #0a110e;            /* emerald black */
  --surface: #101a15;       /* panels */
  --surface-2: #15211b;     /* raised panels */
  --text: #ece7dc;          /* ivory */
  --text-2: #cfc9bd;        /* light warm grey for paragraphs (12:1 on bg, APCA Lc 74) */
  --muted: #a9a59b;         /* warm grey for small labels: dates, nav, captions (7.8:1 on bg) */
  --accent: #c9a96e;        /* champagne gold (8.9:1 on bg) */
  --accent-strong: #dcc08a;
  --accent-soft: rgba(201, 169, 110, .10);
  --line: rgba(201, 169, 110, .20);
  --gold-hair: rgba(201, 169, 110, .45);
  --font-display: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 4px;
  --shadow: none;
  color-scheme: dark;
}

/* ---------- L2. Base ---------- */
:root body {
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(201,169,110,.08), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(47,143,98,.08), transparent 60%),
    var(--bg);
  color: var(--text);
  font-size: 1rem; line-height: 1.75; letter-spacing: .005em;
}
::selection { background: var(--accent); color: var(--bg); }
:root a { color: var(--accent); }
:root a:hover { color: var(--accent-strong); }
:root :focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }

:root h1, :root h2 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.005em; color: var(--text); }
:root h1 { font-size: clamp(2.8rem, 7vw, 5.2rem); line-height: 1.02; }
:root h2 { font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1.08; }
:root h3 { font-family: var(--font-body); font-weight: 600; font-size: 1.02rem; letter-spacing: .01em; color: var(--text); }
:root .lead, :root .page-head p { color: var(--muted); font-size: 1.08rem; }

/* Small gold label with a hairline before it */
:root .eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--accent); font-size: .72rem; font-weight: 600; letter-spacing: .28em;
}
:root .eyebrow::before { content: ""; width: 36px; height: 1px; background: var(--accent); }

/* Section dividers fade out at the edges */
:root .section + .section { border-top: 0; }
:root .section + .section::before,
:root .orgs + .section::before {
  content: ""; display: block; height: 1px; max-width: var(--maxw); margin: -88px auto 88px;
  background: linear-gradient(90deg, transparent, var(--gold-hair), transparent);
}
:root .orgs + .section::before { margin-top: 0; }

/* ---------- L3. Header ---------- */
:root .site-header { background: rgba(10, 17, 14, .82); border-bottom: 1px solid var(--line); }
:root .theme-toggle { background: transparent; border: 1px solid var(--line); color: var(--text); border-radius: 2px; }
:root .theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
:root .brand, :root .brand:hover { color: var(--text); }
:root .nav-links a { color: var(--muted); font-weight: 500; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; border-radius: 0; }
:root .nav-links a:hover { color: var(--text); }
:root .nav-links a[aria-current="page"], :root .nav-links a.is-active { background: none; color: var(--accent); box-shadow: inset 0 -1px 0 var(--accent); }
:root .nav-links .nav-cta,
:root .nav-links .nav-cta:hover,
:root .nav-links .nav-cta[aria-current="page"] {
  background: transparent; color: var(--accent); border: 1px solid var(--accent); box-shadow: none;
  border-radius: 2px; margin-left: 10px;
}
:root .nav-links .nav-cta:hover { background: var(--accent); color: var(--bg); }
:root .menu-toggle { background: transparent; border-color: var(--line); color: var(--text); border-radius: 2px; }
@media (max-width: 820px) {
  :root.js .nav-links { background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 24px 40px rgba(0,0,0,.5); }
  :root.js .nav-links .nav-cta { margin: 10px 0 0; }
}

/* ---------- L4. Buttons, tags, cards ---------- */
:root .btn {
  border-radius: 2px; border: 1px solid var(--gold-hair); background: transparent; color: var(--text);
  font-size: .76rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; padding: 14px 22px;
}
:root .btn:hover { border-color: var(--accent); color: var(--accent); }
:root .btn-primary, :root .btn-primary:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }
:root .btn-primary:hover { background: var(--accent-strong); }

:root .tags li { background: transparent; border: 1px solid var(--line); color: var(--muted); font-weight: 500; border-radius: 2px; letter-spacing: .02em; }

:root .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; }
:root .card .cover, :root .post-card .post-thumb { border-color: var(--line); }

/* ---------- L5. Hero ---------- */
:root .hero { padding-top: 110px; }
:root .hero h1 em { color: var(--accent); font-style: italic; }
:root .hero .tagline { color: var(--muted); font-size: clamp(1.05rem, 1.8vw, 1.2rem); max-width: 50ch; }
:root .portrait { position: relative; }
:root .portrait::before {           /* thin gold ring behind the portrait */
  content: ""; position: absolute; inset: 6% -4% auto; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid var(--gold-hair); z-index: -1;
}
:root .stats { border-top: 1px solid var(--line); }
:root .stat strong { font-family: var(--font-display); font-weight: 500; color: var(--accent); font-size: 3rem; }
:root .stat span { color: var(--muted); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; }

/* ---------- L6. Organisations (logos keep their colours on ivory tiles) ---------- */
:root .orgs-title { font-size: clamp(1.6rem, 3vw, 2.2rem); }
:root .org, :root[data-theme="dark"] .org { background: #f3efe6; border: 1px solid transparent; border-radius: 2px; }
:root .org-name { color: #2b2a26; }

/* ---------- L7. Services, featured work, projects ---------- */
:root .service-icon { background: transparent; border: 1px solid var(--gold-hair); color: var(--accent); border-radius: 50%; }
:root .service .service-proof { border-top-color: var(--line); color: var(--text); }
:root .service-proof span { color: var(--accent); letter-spacing: .14em; text-transform: uppercase; font-size: .68rem; }
:root .result, :root .project p.result, :root .feature p.result {
  font-family: var(--font-display); font-style: italic; font-weight: 500; color: var(--accent); font-size: 1.6rem;
}
:root .meta, :root .feature .meta, :root .project .meta { color: var(--muted); letter-spacing: .06em; font-weight: 500; }
:root .project-link { color: var(--accent); font-weight: 600; letter-spacing: .04em; }
:root .group-title { font-size: clamp(1.7rem, 3vw, 2.3rem); }

/* ---------- L8. About, skills ---------- */
:root .about-grid p { font-size: 1.05rem; }
:root .about-facts strong { color: var(--accent); font-weight: 500; }
:root .skill-group h3 .dot { background: var(--accent); }

/* ---------- L9. Experience, education, blog ---------- */
:root .timeline::before { background: var(--line); }
:root .timeline > li::before { background: var(--bg); border: 1px solid var(--accent); width: 13px; height: 13px; }
:root .job-dates, :root .edu-item .when { color: var(--accent); font-weight: 500; letter-spacing: .04em; }
:root .job ul li::marker, :root .prose li::marker, :root .edu-highlights li::marker { color: var(--accent); }
:root .filters button { background: transparent; border-color: var(--line); color: var(--muted); border-radius: 2px; }
:root .filters button[aria-pressed="true"],
:root[data-theme="dark"] .filters button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--bg); }
:root .lang-table th, :root .lang-table td { border-color: var(--line); }
:root .post-card .post-title a { color: var(--text); font-family: var(--font-display); font-weight: 500; }
:root .post-card .post-title { font-size: 1.7rem; }
:root .post-card:hover { border-color: var(--gold-hair); }
:root .post-facts { border-color: var(--line); }
:root .post-facts dt { color: var(--accent); letter-spacing: .14em; }
:root .prose h2 { font-size: 2rem; }
:root .post-pager a { background: var(--surface); border-color: var(--line); border-radius: 2px; }
:root .post-pager a span { color: var(--accent); }
:root .post-cover { border-color: var(--line); border-radius: var(--radius); }

/* ---------- L10. Contact, closing box, footer ---------- */
:root .contact-card { background: var(--surface); }
:root .contact-card svg { color: var(--accent); }
:root .contact-card .label { color: var(--accent); letter-spacing: .2em; font-size: .7rem; }
:root a.contact-card:hover { border-color: var(--accent); }
:root .cta-band {
  background: linear-gradient(135deg, rgba(201,169,110,.12), rgba(201,169,110,.02));
  border: 1px solid var(--gold-hair); border-radius: var(--radius); text-align: center; padding: 64px 32px;
}
:root .cta-band .lead { margin-left: auto; margin-right: auto; }
:root .cta-band .btn-row { justify-content: center; }
:root .site-footer { background: #070c0a; border-top: 1px solid var(--line); color: var(--muted); }
:root .footer-links a { color: var(--muted); letter-spacing: .06em; }
:root .footer-links a:hover { color: var(--accent); }
:root .placeholder, :root[data-theme="dark"] .placeholder { background: #3a3110; color: #f2d97a; }

/* ---------- L11. Fit-and-finish ---------- */
/* Logos with white backgrounds blend into the ivory tile instead of showing a white box */
:root .org img { mix-blend-mode: multiply; }
/* Hero buttons: one row on desktop; on phones Email me on top, LinkedIn and GitHub side by side */
:root .hero .btn { padding: 13px 16px; letter-spacing: .12em; }
@media (max-width: 760px) {
  :root .hero .btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  :root .hero .btn-row .btn-primary { grid-column: 1 / -1; }   /* Email me full width, LinkedIn + GitHub below */
  :root .hero .btn { justify-content: center; padding: 13px 10px; font-size: .72rem; letter-spacing: .1em; }
}
:root .stat span { line-height: 1.5; display: block; margin-top: 6px; }

/* ---------- L-last. Reading text colour ----------
   Paragraphs use --text-2 (brighter than --muted) so longer text is comfortable on the dark background.
   --muted stays for small labels (dates, nav, stat captions, footer links). The gold .result line is left alone. */
:root .lead, :root .page-head p, :root .hero .tagline, :root .post-summary,
:root .project p:not(.meta):not(.result), :root .feature p:not(.meta):not(.result),
:root .service p:not(.service-proof), :root .post-card > p:not(.meta),
:root .edu-item p, :root .edu-highlights, :root .pubs li, :root .about-facts li { color: var(--text-2); }

/* ---------- L12. Light mode ----------
   Dark is the default (set on <html data-theme="dark">). The sun/moon button in the header switches
   to light; the choice is remembered (js/main.js + the small script in each page's <head>).
   Same identity on paper: ivory background, emerald-ink text, deepened bronze-gold accent.
   All text pairs pass WCAG AA: text 15:1, --text-2 9:1, --muted 5.4:1, accent 4.8:1. */
:root[data-theme="light"] {
  --bg: #f4f1e8;            /* warm paper */
  --surface: #fbf9f3;       /* panels */
  --surface-2: #efebe0;     /* raised panels */
  --text: #13201a;          /* emerald ink */
  --text-2: #38433d;        /* paragraphs */
  --muted: #5c645e;         /* small labels */
  --accent: #7f6127;        /* bronze gold (champagne gold is too pale to read on paper) */
  --accent-strong: #634b1c;
  --accent-soft: rgba(127, 97, 39, .08);
  --line: rgba(127, 97, 39, .24);
  --gold-hair: rgba(127, 97, 39, .45);
  color-scheme: light;
}
:root[data-theme="light"] body {
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(201,169,110,.16), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(47,143,98,.06), transparent 60%),
    var(--bg);
}
:root[data-theme="light"] .site-header { background: rgba(244, 241, 232, .86); }
@media (max-width: 820px) {
  :root[data-theme="light"].js .nav-links { box-shadow: 0 24px 40px rgba(19, 32, 26, .12); }
}
/* Primary buttons: emerald ink with ivory text (gold fill is too faint on paper) */
:root[data-theme="light"] .btn-primary { background: var(--text); border-color: var(--text); color: var(--bg); }
:root[data-theme="light"] .btn-primary:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }
:root[data-theme="light"] .org { background: #fff; border: 1px solid var(--line); }
:root[data-theme="light"] .site-footer { background: #ebe6d9; }
:root[data-theme="light"] .placeholder { background: #f6ecc8; color: #5a4300; }
:root[data-theme="light"] .cta-band { background: linear-gradient(135deg, rgba(201,169,110,.20), rgba(201,169,110,.04)); }

/* ---------- L13. Organisations: two slow logo carousels ----------
   Row 1 drifts left, row 2 drifts right. Each row holds three identical lists (the 2nd and 3rd are
   hidden copies) and every list slides by its own width, so the loop has no seam.
   Speed: --marquee-dur (higher = slower). Motion pauses on hover, with the Pause button, and is
   switched off for visitors whose device asks for reduced motion (logos then show as a still grid). */
.orgs-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 16px 24px; margin-bottom: 32px;
}
.orgs-head .orgs-intro { margin-bottom: 0; }
.marquee-toggle {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px;
  background: transparent; border: 1px solid var(--line); border-radius: 2px; color: var(--muted);
  font: 600 .7rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; cursor: pointer;
}
.marquee-toggle[hidden] { display: none; }
.marquee-toggle:hover { border-color: var(--accent); color: var(--accent); }
.marquee-toggle .icon-play, .marquee-toggle[aria-pressed="true"] .icon-pause { display: none; }
.marquee-toggle[aria-pressed="true"] .icon-play { display: block; }

.org-marquee { display: grid; gap: 16px; }   /* sits in .container, so it keeps the page side margins */
.marquee-row {
  display: flex; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.org-track {
  --marquee-dur: 80s;
  list-style: none; margin: 0; padding: 0 16px 0 0;  /* right padding = gap, so copies join evenly */
  display: flex; gap: 16px; flex: none;
  animation: org-drift var(--marquee-dur) linear infinite;
}
.marquee-row--reverse .org-track { --marquee-dur: 72s; animation-direction: reverse; }
.marquee-row:hover .org-track,
.org-marquee.is-paused .org-track { animation-play-state: paused; }
@keyframes org-drift { to { transform: translateX(-100%); } }

:root .org-track .org { flex: none; width: 220px; }
.org-track .org-mark { height: 112px; padding: 16px 24px; }
.org-track .org-mark img { max-height: 76px; }
@media (max-width: 600px) {
  .org-marquee, .org-track { gap: 10px; }
  .org-track { padding-right: 10px; }
  :root .org-track .org { width: 158px; }
  .org-track .org-mark { height: 88px; padding: 12px 16px; }
  .org-track .org-mark img { max-height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .org-track { animation: none; flex: 1 1 auto; flex-wrap: wrap; justify-content: center; padding: 0; }
  .org-track[aria-hidden="true"] { display: none; }
  .marquee-row { -webkit-mask-image: none; mask-image: none; }
  .marquee-toggle { display: none !important; }
}