/* ==========================================================================
   Brendan Podest — Portfolio
   Single stylesheet. Hand-written. No build step.

   Table of contents
   1. Tokens (CSS custom properties)
   2. Reset & base
   3. Layout primitives
   4. Typography
   5. Skip link
   6. Site header & nav
   7. Mobile nav overlay
   8. Footer
   9. Hero
  10. Eyebrows & section headers
  11. CTAs & links
  12. Featured work tiles
  13. Work index grid
  14. Brand rolodex
  15. Pull quote
  16. Case study layout
  17. Skills tag list
  18. Logos strip
  19. Notes page
  20. Contact page
  21. Custom diagrams (hexagon, bar chart)
  22. Utilities
  ========================================================================== */


/* 1. Tokens
   ========================================================================== */
:root {
  /* Color */
  --color-bg: #FAFAF7;
  --color-bg-alt: #F4F4EE;
  --color-text: #111111;
  --color-text-secondary: #555555;
  --color-text-muted: #888888;
  --color-accent: #C8412C;
  --color-accent-soft: #E8A99A;
  --color-border: #E5E5E0;

  /* Type */
  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* Scale (1.250 ratio) */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.563rem;
  --fs-2xl: 1.953rem;
  --fs-3xl: 2.441rem;
  --fs-4xl: 3.052rem;
  --fs-display: clamp(2.5rem, 7vw, 5.25rem);

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

  /* Layout */
  --max-width: 1100px;
  --reading-width: 720px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* Other */
  --radius: 2px;
  --transition: 180ms ease;
}


/* 2. Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.6;
  font-feature-settings: "ss01", "ss02";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Paper grain overlay
   Fixed-position SVG noise. Sitewide. Doesn't scroll. Very low opacity.
   Sits above content via z-index but pointer-events none so it never blocks clicks.
   mix-blend-mode multiply so it darkens the cream slightly without tinting it. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

button { font: inherit; cursor: pointer; background: none; border: 0; padding: 0; color: inherit; }

a { color: inherit; text-decoration: none; }

ul, ol { padding-left: 1.25rem; }

p { margin: 0 0 1rem; }

hr {
  border: 0;
  height: 1px;
  background: var(--color-border);
  margin: var(--space-8) 0;
}


/* 3. Layout primitives
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.container--reading {
  max-width: calc(var(--reading-width) + (var(--gutter) * 2));
}

main { display: block; }

.section {
  padding-top: var(--space-9);
  padding-bottom: var(--space-9);
}

.section--tight { padding-top: var(--space-7); padding-bottom: var(--space-7); }
.section--alt { background: var(--color-bg-alt); }


/* 4. Typography
   ========================================================================== */
h1, h2, h3, h4, h5 {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0 0 var(--space-5);
  color: var(--color-text);
}

h1 { font-size: var(--fs-display); letter-spacing: -0.025em; line-height: 1.02; }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }
h5 { font-size: var(--fs-lg); font-family: var(--font-sans); font-weight: 600; letter-spacing: 0; }

.lede {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: var(--color-text-secondary);
  max-width: 56ch;
}

.lede--narrow { max-width: 48ch; }

strong, b { font-weight: 600; color: var(--color-text); }

em { font-style: italic; }

::selection { background: var(--color-accent); color: var(--color-bg); }


/* 5. Skip link
   ========================================================================== */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  background: var(--color-text);
  color: var(--color-bg);
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-sm);
  font-weight: 600;
  z-index: 100;
  transition: top 120ms ease;
}
.skip-link:focus { top: var(--space-4); }


/* 6. Site header & nav
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.wordmark {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text);
}
.wordmark:hover { color: var(--color-accent); }

.nav {
  display: none;
  align-items: center;
  gap: var(--space-6);
}

.nav__link {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-text);
  position: relative;
  padding: var(--space-2) 0;
  transition: color var(--transition);
}

.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transition);
}

.nav__link:hover { color: var(--color-accent); }
.nav__link:hover::after { transform: scaleX(1); }

.nav__link.is-active {
  color: var(--color-text);
}
.nav__link.is-active::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--color-accent);
  border-radius: 50%;
  margin-right: 0.5em;
  vertical-align: middle;
  transform: translateY(-1px);
}

.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  gap: 5px;
}
.hamburger__line {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--color-text);
  transition: transform 200ms ease, opacity 200ms ease;
}

@media (min-width: 640px) {
  .nav { display: flex; }
  .hamburger { display: none; }
}


/* 7. Mobile nav overlay
   ========================================================================== */
.mobile-nav {
  position: fixed;
  inset: 0;
  background: var(--color-bg);
  z-index: 100;
  display: flex;
  flex-direction: column;
  padding: var(--space-5) var(--gutter);
  transform: translateY(-100%);
  transition: transform 280ms ease;
  visibility: hidden;
}
.mobile-nav[aria-hidden="false"] {
  transform: translateY(0);
  visibility: visible;
}

.mobile-nav__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 32px;
  margin-bottom: var(--space-9);
}

.mobile-nav__close {
  width: 40px;
  height: 40px;
  position: relative;
}
.mobile-nav__close::before,
.mobile-nav__close::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 22px;
  height: 1.5px;
  background: var(--color-text);
}
.mobile-nav__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.mobile-nav__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

.mobile-nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.mobile-nav__link {
  font-family: var(--font-serif);
  font-size: var(--fs-3xl);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--color-text);
  display: inline-block;
}
.mobile-nav__link:hover,
.mobile-nav__link.is-active { color: var(--color-accent); }

.mobile-nav__footer {
  margin-top: auto;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
}


/* 8. Footer
   ========================================================================== */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding: var(--space-7) 0;
  margin-top: var(--space-9);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
}

.site-footer__links {
  display: flex;
  gap: var(--space-5);
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer a:hover { color: var(--color-accent); }


/* 9. Hero
   ========================================================================== */
.hero {
  padding-top: var(--space-9);
  padding-bottom: var(--space-7);
}

.hero__greeting {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-5);
  display: block;
}

.hero__headline {
  font-family: var(--font-serif);
  font-size: var(--fs-display);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 0 0 var(--space-6);
  max-width: 18ch;
}

.hero__headline em {
  font-style: italic;
  color: var(--color-accent);
}

.hero__sub {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--color-text-secondary);
  max-width: 60ch;
  margin: 0 0 var(--space-7);
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

/* Hero "On this page" nav — fills the void between hero CTAs and Featured work
   with a quiet horizontal table of contents. Smooth-scrolls to each section. */
.hero__next {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  display: grid;
  grid-template-columns: minmax(140px, 180px) 1fr;
  align-items: start;
  column-gap: var(--space-6);
  row-gap: var(--space-4);
  max-width: 880px;
}

.hero__next-label {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
}

.hero__next-arrow {
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-accent);
  font-style: italic;
}

.hero__next-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.625rem var(--space-6);
}

.hero__next-list li { margin: 0; }

.hero__next-link {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  transition: color var(--transition);
  line-height: 1.3;
}

.hero__next-link:hover {
  color: var(--color-text);
}

.hero__next-num {
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  min-width: 1.5em;
}

.hero__next-link:hover .hero__next-num { color: var(--color-accent); }

@media (max-width: 720px) {
  .hero__next {
    grid-template-columns: 1fr;
  }
  .hero__next-list {
    grid-template-columns: 1fr;
  }
}


/* 10. Eyebrows & section headers
   ========================================================================== */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  display: inline-block;
}

.eyebrow--accent { color: var(--color-accent); }

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-bottom: var(--space-7);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.section-header__title {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0;
}

.section-header__num {
  color: var(--color-accent);
  margin-right: var(--space-3);
  font-weight: 600;
}

.section-header__action {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
}
.section-header__action:hover { color: var(--color-accent); }

.page-title {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 var(--space-5);
}

.page-intro {
  padding-top: var(--space-8);
  padding-bottom: var(--space-7);
  border-bottom: 1px solid var(--color-border);
}


/* 11. CTAs & links
   ========================================================================== */
.cta {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--color-text);
  position: relative;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--color-text);
  transition: color var(--transition), border-color var(--transition), padding var(--transition);
}

.cta__arrow {
  display: inline-block;
  margin-left: 0.4em;
  transition: transform var(--transition);
}

.cta:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.cta:hover .cta__arrow { transform: translateX(4px); }

.text-link {
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  transition: color var(--transition), border-color var(--transition);
}
.text-link:hover { color: var(--color-accent); border-color: var(--color-accent); }

.inline-link {
  color: var(--color-accent);
  border-bottom: 1px solid var(--color-accent-soft);
  transition: border-color var(--transition);
}
.inline-link:hover { border-color: var(--color-accent); }

.back-link {
  display: inline-block;
  margin-top: var(--space-8);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
}
.back-link:hover { color: var(--color-accent); }


/* 12. Featured work tiles (home page)
   ========================================================================== */
.featured-work {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}

@media (min-width: 768px) {
  .featured-work {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6) var(--space-5);
  }
}

.work-tile {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: transform var(--transition);
}

.work-tile__num {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.work-tile__media {
  aspect-ratio: 16 / 9;
  margin-bottom: var(--space-4);
  border: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  overflow: hidden;
}

.work-tile__media svg { width: 100%; height: 100%; display: block; }

.work-tile__tag {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
}

.work-tile__title {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.18;
  margin: 0 0 var(--space-3);
  color: var(--color-text);
}

.work-tile__dek {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-4);
  line-height: 1.55;
}

.work-tile__cue {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-text);
  margin-top: auto;
  border-bottom: 1px solid var(--color-text);
  align-self: flex-start;
  padding-bottom: 2px;
  transition: color var(--transition), border-color var(--transition);
}

.work-tile:hover .work-tile__title { color: var(--color-accent); }
.work-tile:hover .work-tile__cue { color: var(--color-accent); border-color: var(--color-accent); }


/* 13. Work index grid
   ========================================================================== */
.work-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}

@media (min-width: 640px) {
  .work-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
}
@media (min-width: 960px) {
  .work-grid { grid-template-columns: repeat(3, 1fr); }
}


/* 14. Brand rolodex
   ========================================================================== */
.rolodex {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
}

@media (min-width: 640px) {
  .rolodex { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 960px) {
  .rolodex { grid-template-columns: repeat(5, 1fr); }
}

.rolodex__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-7) var(--space-4);
  min-height: 110px;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
  transition: background var(--transition), color var(--transition);
}

.rolodex__cell:hover {
  background: var(--color-bg-alt);
  color: var(--color-accent);
}

/* Per-cell type compositions — each is a small typographic exercise */
.r-mark {
  display: inline-block;
}

.r-mark--bold-caps {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.r-mark--tight-caps {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.r-mark--thin-caps {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.9rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
}

.r-mark--serif-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
}

.r-mark--serif-caps {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.r-mark--small-caps {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.r-mark--lower {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: -0.025em;
}

.r-mark--serif {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}

.r-mark__sup {
  font-size: 0.55em;
  vertical-align: super;
  margin-left: 0.15em;
  letter-spacing: 0.05em;
  font-weight: 400;
  color: var(--color-text-secondary);
}

.r-mark__rule {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--color-accent);
  margin: 0.4rem auto 0;
}


/* 15. Pull quote
   ========================================================================== */
.pull-quote {
  margin: var(--space-9) 0;
  padding: var(--space-2) 0 var(--space-2) var(--space-5);
  border-left: 3px solid var(--color-accent);
}

.pull-quote__text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-2xl);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--color-text);
  margin: 0;
}

.pull-quote__attr {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-3);
  display: block;
}


/* 16. Case study layout
   ========================================================================== */
.case-study__hero {
  padding-top: var(--space-8);
  padding-bottom: var(--space-7);
  border-bottom: 1px solid var(--color-border);
}

.case-study__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  display: block;
  margin-bottom: var(--space-5);
}

.case-study__title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 400;
  line-height: 1.07;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-5);
  max-width: 22ch;
}

.case-study__subtitle {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  color: var(--color-text-secondary);
  line-height: 1.55;
  max-width: 62ch;
  margin: 0;
}

.case-study__body { padding-top: var(--space-8); }

.case-study__section {
  margin-bottom: var(--space-9);
}

.case-study__section-num {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--color-accent);
  display: block;
  margin-bottom: var(--space-3);
}

.case-study__section-title {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0 0 var(--space-5);
}

.case-study__section p { font-size: var(--fs-md); line-height: 1.65; }
.case-study__section ul { font-size: var(--fs-md); line-height: 1.65; }
.case-study__section ul li { margin-bottom: var(--space-2); }


/* Info card (used at top of case studies that need event-info etc.) */
.info-card {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  padding: var(--space-6);
  margin-bottom: var(--space-7);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .info-card { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
}
@media (min-width: 768px) {
  .info-card { grid-template-columns: repeat(4, 1fr); }
}

.info-card dt {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.info-card dd {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  margin: 0;
  color: var(--color-text);
  line-height: 1.3;
}


/* Two-column case study block (for FIFA brand activations) */
.brand-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4) var(--space-7);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--color-border);
}

@media (min-width: 640px) {
  .brand-block { grid-template-columns: 200px 1fr; }
}

.brand-block:last-child { border-bottom: 1px solid var(--color-border); }

.brand-block__name {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0;
}

.brand-block__logo {
  display: flex;
  align-items: center;
  height: 56px;
  margin-bottom: var(--space-3);
}
.brand-block__logo img {
  max-height: 100%;
  max-width: 180px;
  width: auto;
  height: auto;
  filter: grayscale(100%);
  opacity: 0.85;
  transition: filter 240ms ease, opacity 240ms ease;
}
.brand-block:hover .brand-block__logo img {
  filter: grayscale(0);
  opacity: 1;
}

.brand-block__body p { margin-bottom: var(--space-3); }
.brand-block__body p:last-child { margin-bottom: 0; }
.brand-block__body strong { color: var(--color-text); }


/* 17. Skills tag list
   ========================================================================== */
.skills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0 0;
}

.skills li {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  position: relative;
  margin-bottom: 0;
}

.skills li:not(:last-child)::after {
  content: '·';
  position: absolute;
  right: calc(var(--space-5) / -2 - 0.15em);
  top: 0;
  color: var(--color-border);
}

/* Skills variant: editorial 2-column grid with hairlines.
   Used on About for Capabilities + Tools lists where items are long
   and the chip-cloud pattern stacks awkwardly. */
.skills--grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 2rem;
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  border-top: 1px solid var(--color-border);
}

.skills--grid li {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text);
  padding: 0.6875rem 0;
  border-bottom: 1px solid var(--color-border);
  position: static;
  margin: 0;
}

.skills--grid li::after { content: none; }

/* No bottom rule on the final row of cells */
.skills--grid li:nth-last-child(-n+2) { border-bottom: 0; }

@media (max-width: 600px) {
  .skills--grid {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
  .skills--grid li:nth-last-child(-n+2) { border-bottom: 1px solid var(--color-border); }
  .skills--grid li:last-child { border-bottom: 0; }
}


/* 18. Footer logos strip
   ========================================================================== */
.creds {
  border-top: 1px solid var(--color-border);
  padding: var(--space-7) 0;
  text-align: center;
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  line-height: 1.8;
}

.creds__label {
  display: block;
  margin-bottom: var(--space-3);
  color: var(--color-text-muted);
  font-weight: 600;
}

.creds__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline;
}

.creds__list li {
  display: inline;
  margin: 0;
}

.creds__list li:not(:last-child)::after {
  content: '  ·  ';
  color: var(--color-border);
}


/* 19. Notes page
   ========================================================================== */
.notes-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .notes-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
}

.note-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-6) 0;
  border-top: 1px solid var(--color-border);
}

.note-card__meta {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.note-card__title {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0 0 var(--space-3);
}

.note-card__dek {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  line-height: 1.55;
  margin: 0 0 var(--space-4);
}

.note-card__cue {
  margin-top: auto;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  font-style: italic;
}

.list-block {
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

@media (min-width: 640px) {
  .list-block { grid-template-columns: repeat(2, 1fr); }
}

.list-block li {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-md);
  margin-bottom: 0;
  color: var(--color-text);
}

.list-block li .meta {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}


/* 20. Contact page
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}

@media (min-width: 768px) {
  .contact-grid { grid-template-columns: 1fr 1fr; gap: var(--space-9); }
}

.contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.contact-list li {
  margin-bottom: 0;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.contact-list dt {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.contact-list dd {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: 500;
  letter-spacing: -0.015em;
}

.contact-list a:hover { color: var(--color-accent); }

.lookup {
  background: var(--color-bg-alt);
  padding: var(--space-7);
  border: 1px solid var(--color-border);
}

.lookup h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-5);
}

.lookup dl {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.lookup dt {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.lookup dd {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--color-text);
}


/* About page two-column intro */
.about-intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: start;
}

@media (min-width: 768px) {
  .about-intro { grid-template-columns: 1.5fr 1fr; gap: var(--space-8); }
}

.about-intro__photo {
  aspect-ratio: 4 / 5;
  border: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  overflow: hidden;
}
.about-intro__photo svg { width: 100%; height: 100%; }
.about-intro__photo-note {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: var(--space-3);
  text-align: center;
}

.about-section {
  padding: var(--space-7) 0;
  border-top: 1px solid var(--color-border);
}
.about-section h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0 0 var(--space-5);
}
.about-section p, .about-section li { font-size: var(--fs-md); line-height: 1.65; }

/* About page sticky table of contents
   Shows in the left rail on wide viewports. Active state highlights as you scroll.
   On narrow viewports the TOC hides and content stacks at reading width. */
.about-layout {
  /* Mobile-first: behave like .container--reading. Constrain to reading width. */
  max-width: calc(var(--reading-width) + (var(--gutter) * 2));
}

.about-toc { display: none; }

@media (min-width: 980px) {
  .about-layout {
    /* TOC + reading column, centered as a unit. No empty right rail. */
    max-width: calc(160px + var(--space-6) + var(--reading-width) + (var(--gutter) * 2));
    display: grid;
    grid-template-columns: minmax(140px, 160px) minmax(0, var(--reading-width));
    column-gap: var(--space-6);
    align-items: start;
  }
  .about-toc { display: block; }
}

.about-toc__inner {
  position: sticky;
  top: 6rem;
  padding-top: var(--space-7);
}

.about-toc__label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.about-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-left: 1px solid var(--color-border);
}

.about-toc__list li { margin: 0; }

.about-toc__link {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  padding: 0.5rem 0 0.5rem var(--space-4);
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--color-text-muted);
  transition: color var(--transition), border-color var(--transition);
}

.about-toc__link:hover {
  color: var(--color-text);
}

.about-toc__num {
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  min-width: 1.5em;
}

.about-toc__link.is-active {
  color: var(--color-text);
  border-left-color: var(--color-accent);
}

.about-toc__link.is-active .about-toc__num {
  color: var(--color-accent);
}


/* 21. Custom diagrams (hexagon, bar chart)
   ========================================================================== */
.hexagon {
  margin: var(--space-7) auto;
  max-width: 480px;
}
.hexagon svg { width: 100%; height: auto; }

.barchart {
  margin: var(--space-6) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.barchart__row {
  display: grid;
  grid-template-columns: 130px 1fr 56px;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-sm);
}

.barchart__label {
  font-family: var(--font-sans);
  letter-spacing: 0.05em;
  color: var(--color-text);
}

.barchart__track {
  height: 18px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
}

.barchart__bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--color-text-secondary);
}

.barchart__row--accent .barchart__bar { background: var(--color-accent); }

.barchart__value {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  text-align: right;
}


/* 22. Utilities
   ========================================================================== */
.flow > * + * { margin-top: var(--space-5); }
.flow-tight > * + * { margin-top: var(--space-3); }
.text-center { text-align: center; }
.muted { color: var(--color-text-secondary); }
.tbd {
  font-style: italic;
  color: var(--color-text-muted);
  background: var(--color-bg-alt);
  padding: var(--space-2) var(--space-3);
  border-left: 2px solid var(--color-accent-soft);
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.5;
  margin: var(--space-4) 0;
}

.divider {
  height: 1px;
  background: var(--color-border);
  border: 0;
  margin: var(--space-8) 0;
}

/* 23. Reading progress bar
   ========================================================================== */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 60;
  pointer-events: none;
  background: transparent;
}
.progress__bar {
  height: 100%;
  width: 0;
  background: var(--color-accent);
  transform-origin: left center;
  transition: width 80ms linear;
}


/* 24. Hero stagger reveal (page load)
   ========================================================================== */
.hero__greeting {
  animation: rise-in 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.hero__headline {
  animation: rise-in 900ms 180ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.hero__sub {
  animation: rise-in 800ms 480ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.hero__ctas {
  animation: rise-in 700ms 720ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes rise-in {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}


/* 25. Scroll-driven section reveal
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity 750ms cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 750ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}


/* 26. Section header — animated accent underline
   ========================================================================== */
.section-header {
  position: relative;
}
.section-header::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 0;
  background: var(--color-accent);
  transition: width 900ms cubic-bezier(0.2, 0.8, 0.2, 1) 120ms;
}
.section-header.is-visible::after {
  width: 56px;
}


/* 27. Work-tile media zoom + arrow micro-motion
   ========================================================================== */
.work-tile__media img,
.work-tile__media svg {
  transition: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.work-tile:hover .work-tile__media img,
.work-tile:focus-visible .work-tile__media img,
.work-tile:hover .work-tile__media svg {
  transform: scale(1.025);
}
.work-tile__cue {
  transition: color var(--transition), border-color var(--transition), padding-right var(--transition);
}
.work-tile:hover .work-tile__cue { padding-right: 4px; }


/* 28. Pull-quote — animated accent rule
   ========================================================================== */
.pull-quote {
  border-left: 0;
  position: relative;
}
.pull-quote::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--color-accent);
  transform-origin: top center;
  transform: scaleY(0);
  transition: transform 900ms cubic-bezier(0.2, 0.8, 0.2, 1) 200ms;
}
.pull-quote.is-visible::before {
  transform: scaleY(1);
}


/* 29. Hexagon scorecard — staggered SVG reveal
   ========================================================================== */
.hexagon .hex-line {
  opacity: 0;
  transition: opacity 320ms ease;
}
.hexagon .hex-dot,
.hexagon .hex-label {
  opacity: 0;
  transition: opacity 380ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hexagon .hex-center,
.hexagon .hex-center-label {
  opacity: 0;
  transition: opacity 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hexagon.is-visible .hex-line { opacity: 1; }
.hexagon.is-visible .hex-line:nth-of-type(1) { transition-delay: 80ms; }
.hexagon.is-visible .hex-line:nth-of-type(2) { transition-delay: 140ms; }
.hexagon.is-visible .hex-line:nth-of-type(3) { transition-delay: 200ms; }
.hexagon.is-visible .hex-line:nth-of-type(4) { transition-delay: 260ms; }
.hexagon.is-visible .hex-line:nth-of-type(5) { transition-delay: 320ms; }
.hexagon.is-visible .hex-line:nth-of-type(6) { transition-delay: 380ms; }

.hexagon.is-visible .hex-dot { opacity: 1; }
.hexagon.is-visible .hex-dot:nth-of-type(1) { transition-delay: 200ms; }
.hexagon.is-visible .hex-dot:nth-of-type(2) { transition-delay: 280ms; }
.hexagon.is-visible .hex-dot:nth-of-type(3) { transition-delay: 360ms; }
.hexagon.is-visible .hex-dot:nth-of-type(4) { transition-delay: 440ms; }
.hexagon.is-visible .hex-dot:nth-of-type(5) { transition-delay: 520ms; }
.hexagon.is-visible .hex-dot:nth-of-type(6) { transition-delay: 600ms; }

.hexagon.is-visible .hex-label { opacity: 1; }
.hexagon.is-visible .hex-label:nth-of-type(1) { transition-delay: 280ms; }
.hexagon.is-visible .hex-label:nth-of-type(2) { transition-delay: 360ms; }
.hexagon.is-visible .hex-label:nth-of-type(3) { transition-delay: 440ms; }
.hexagon.is-visible .hex-label:nth-of-type(4) { transition-delay: 520ms; }
.hexagon.is-visible .hex-label:nth-of-type(5) { transition-delay: 600ms; }
.hexagon.is-visible .hex-label:nth-of-type(6) { transition-delay: 680ms; }

.hexagon.is-visible .hex-center { opacity: 1; transition-delay: 880ms; }
.hexagon.is-visible .hex-center-label { opacity: 1; transition-delay: 1000ms; }


/* 30. Bar chart — width-animated bars
   ========================================================================== */
.barchart .barchart__bar {
  width: 0;
  transition: width 1100ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.barchart.is-visible .barchart__bar {
  width: var(--bar-width, 0);
}
.barchart.is-visible .barchart__row:nth-of-type(1) .barchart__bar { transition-delay: 60ms; }
.barchart.is-visible .barchart__row:nth-of-type(2) .barchart__bar { transition-delay: 160ms; }
.barchart.is-visible .barchart__row:nth-of-type(3) .barchart__bar { transition-delay: 260ms; }
.barchart.is-visible .barchart__row:nth-of-type(4) .barchart__bar { transition-delay: 360ms; }
.barchart.is-visible .barchart__row:nth-of-type(5) .barchart__bar { transition-delay: 460ms; }
.barchart.is-visible .barchart__row:nth-of-type(6) .barchart__bar { transition-delay: 560ms; }


/* 31. Marquee
   ========================================================================== */
.marquee {
  overflow: hidden;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 1.25rem 0;
  background: var(--color-bg);
  position: relative;
  width: 100%;
}
.marquee + .marquee {
  border-top: 0;
  background: var(--color-bg-alt);
}
.marquee::before,
.marquee::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.marquee::before {
  left: 0;
  background: linear-gradient(to right, var(--color-bg) 0%, transparent 100%);
}
.marquee::after {
  right: 0;
  background: linear-gradient(to left, var(--color-bg) 0%, transparent 100%);
}
.marquee + .marquee::before {
  background: linear-gradient(to right, var(--color-bg-alt) 0%, transparent 100%);
}
.marquee + .marquee::after {
  background: linear-gradient(to left, var(--color-bg-alt) 0%, transparent 100%);
}

.marquee__row {
  display: inline-flex;
  align-items: center;
  gap: 3.5rem;
  white-space: nowrap;
  animation: marquee-scroll 80s linear infinite;
  will-change: transform;
}
.marquee__row--reverse {
  animation: marquee-scroll-reverse 90s linear infinite;
}
.marquee:hover .marquee__row,
.marquee:focus-within .marquee__row {
  animation-play-state: paused;
}

.marquee__item {
  display: inline-flex;
  align-items: center;
  color: var(--color-text);
  flex-shrink: 0;
}
.marquee__item--serif {
  font-family: var(--font-serif);
  font-size: 1.65rem;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.marquee__item--serif-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.65rem;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.marquee__item--bold-caps {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.marquee__item--tight-caps {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 1.85rem;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.marquee__item--thin-caps {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1.2rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
}
.marquee__item--small-caps {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.marquee__item--lower {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1.7rem;
  letter-spacing: -0.025em;
}
.marquee__divider {
  display: inline-flex;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}

@keyframes marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes marquee-scroll-reverse {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}


/* 32. Grouped brand showcase (replaces single rolodex)
   ========================================================================== */
.brands-showcase {
  padding: var(--space-9) 0 var(--space-9);
}

.brand-group {
  margin-bottom: var(--space-8);
}
.brand-group:last-child {
  margin-bottom: 0;
}

.brand-group__label {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.brand-group__label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

/* Re-style rolodex cells as buttons with hover-reveal context */
.rolodex__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  font: inherit;
  color: inherit;
  width: 100%;
  min-height: 130px;
  position: relative;
}

.r-mark__context {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-top: 0.55rem;
  opacity: 0;
  transform: translate3d(0, -3px, 0);
  transition: opacity 240ms ease, transform 240ms ease;
  max-width: 90%;
  line-height: 1.3;
}

.rolodex__cell:hover .r-mark__context,
.rolodex__cell:focus-visible .r-mark__context,
.rolodex__cell.is-active .r-mark__context {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.rolodex__cell:hover,
.rolodex__cell:focus-visible {
  background: var(--color-bg-alt);
}
.rolodex__cell:hover .r-mark,
.rolodex__cell:focus-visible .r-mark {
  color: var(--color-accent);
}

/* Anchor tiles — larger, span 2 columns on wide screens */
@media (min-width: 960px) {
  .rolodex__cell--anchor {
    grid-column: span 2;
    min-height: 160px;
  }
  .rolodex__cell--anchor .r-mark--bold-caps { font-size: 1.5rem; }
  .rolodex__cell--anchor .r-mark--serif-italic { font-size: 2rem; }
  .rolodex__cell--anchor .r-mark--tight-caps { font-size: 2.25rem; }
  .rolodex__cell--anchor .r-mark--serif-caps { font-size: 1.4rem; }
  .rolodex__cell--anchor .r-mark--lower { font-size: 1.85rem; }
}


/* 33. Logo display — marquee + rolodex tiles
   ========================================================================== */
.marquee__item--logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  width: 140px;
  flex-shrink: 0;
}
.marquee__item--logo img {
  height: 36px;
  width: auto;
  max-width: 110px;
  object-fit: contain;
  display: block;
  filter: grayscale(100%);
  opacity: 0.82;
  transition: filter 280ms ease, opacity 280ms ease;
}
.marquee:hover .marquee__item--logo img,
.marquee:focus-within .marquee__item--logo img {
  filter: grayscale(0);
  opacity: 1;
}

.r-mark--logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  max-width: 78%;
  margin: 0 auto;
}
.r-mark--logo img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.78;
  transition: filter 280ms ease, opacity 280ms ease;
}
.rolodex__cell--anchor .r-mark--logo {
  height: 64px;
}
.rolodex__cell:hover .r-mark--logo img,
.rolodex__cell:focus-visible .r-mark--logo img,
.rolodex__cell.is-active .r-mark--logo img {
  filter: grayscale(0);
  opacity: 1;
}


/* 34. Deck/photo embeds inside case studies
   ========================================================================== */
.deck-image {
  margin: var(--space-7) 0;
  border: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  overflow: hidden;
  position: relative;
}
.deck-image img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 800ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.deck-image:hover img {
  transform: scale(1.015);
}
.deck-image figcaption {
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
}

.deck-image--narrow {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* Side-by-side deck pair */
.deck-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin: var(--space-7) 0;
}
@media (min-width: 768px) {
  .deck-pair { grid-template-columns: 1fr 1fr; }
}
.deck-pair .deck-image { margin: 0; }


/* About page — real headshot replacement */
.about-intro__photo--real {
  aspect-ratio: 4 / 5;
}
.about-intro__photo--real img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* About page — inline bio figure (e.g. BMW Championship volunteer photo in §02) */
.bio-figure {
  margin: var(--space-7) 0;
  border: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  overflow: hidden;
}
.bio-figure img {
  width: 100%;
  height: auto;
  display: block;
}
.bio-figure figcaption {
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
}


/* 36. Hero scroll prompt — fills hero white space, signals more below
   ========================================================================== */
.hero__scroll {
  margin-top: var(--space-9);
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.hero__scroll::after {
  content: '';
  width: 1px;
  height: 56px;
  background: linear-gradient(to bottom, var(--color-text-muted) 0%, var(--color-text-muted) 60%, transparent 100%);
  transform-origin: top center;
  animation: hero-scroll-pulse 2400ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes hero-scroll-pulse {
  0%   { transform: scaleY(0.25); opacity: 0.35; }
  45%  { transform: scaleY(1);    opacity: 1; }
  100% { transform: scaleY(0.25); opacity: 0.35; }
}


/* 37. Section divider — short rule between major sections, animates in
   ========================================================================== */
.section-rule {
  border: 0;
  height: 1px;
  background: var(--color-text);
  opacity: 0.16;
  width: 0;
  margin: var(--space-2) auto;
  transition: width 1100ms cubic-bezier(0.2, 0.8, 0.2, 1) 80ms;
}
.section-rule.is-visible {
  width: 80px;
}


/* 38. Work tile — lift + soft shadow on hover
   ========================================================================== */
.work-tile {
  transition: transform 380ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.work-tile__media {
  transition: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 380ms cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 380ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.work-tile:hover {
  transform: translate3d(0, -4px, 0);
}
.work-tile:hover .work-tile__media,
.work-tile:focus-visible .work-tile__media {
  box-shadow: 0 12px 30px -8px rgba(17, 17, 17, 0.14);
  border-color: var(--color-accent-soft);
}


/* 39. CTA — animated underline grow + farther arrow slide
   ========================================================================== */
.cta {
  display: inline-block;
  position: relative;
}
.cta::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 0;
  background: var(--color-accent);
  transition: width 380ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cta:hover::after,
.cta:focus-visible::after {
  width: 100%;
}
.cta:hover .cta__arrow,
.cta:focus-visible .cta__arrow {
  transform: translateX(8px);
}


/* 40. Logo wall — uniform editorial logo grid
   Replaces rolodex on the home Brands section + about Career path.
   Every mark renders at the same height, grayscale by default, full color on hover.
   Context line lives in a caption strip below the wall, not in the cell itself.
   ========================================================================== */
.logo-group {
  margin-bottom: var(--space-9);
}
.logo-group:last-child { margin-bottom: 0; }

.logo-group__label {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-5);
}

.logo-wall {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  align-items: stretch;
}
@media (min-width: 540px) { .logo-wall { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .logo-wall { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 980px) { .logo-wall { grid-template-columns: repeat(5, 1fr); } }

.logo-cell {
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-2);
  height: 92px;
  position: relative;
  font: inherit;
  color: inherit;
  text-align: center;
}

.logo-cell::before {
  content: '';
  position: absolute;
  inset: 8px 12px;
  border-radius: 2px;
  background: transparent;
  transition: background 280ms ease;
  pointer-events: none;
}
.logo-cell:hover::before,
.logo-cell:focus-visible::before,
.logo-cell.is-active::before {
  background: rgba(17, 17, 17, 0.025);
}

.logo-cell__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.logo-cell__mark img {
  max-height: 38px;
  max-width: 130px;
  width: auto;
  height: auto;
  filter: grayscale(100%);
  opacity: 0.55;
  transition: filter 320ms ease, opacity 320ms ease;
}
.logo-cell:hover .logo-cell__mark img,
.logo-cell:focus-visible .logo-cell__mark img,
.logo-cell.is-active .logo-cell__mark img {
  filter: grayscale(0);
  opacity: 1;
}

/* Text wordmark variant — sized to read at the same visual weight as a logo */
.logo-cell__text {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text);
  opacity: 0.55;
  transition: opacity 320ms ease;
  white-space: nowrap;
  position: relative;
  z-index: 1;
}
.logo-cell__text--serif {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
}
.logo-cell:hover .logo-cell__text,
.logo-cell:focus-visible .logo-cell__text,
.logo-cell.is-active .logo-cell__text {
  opacity: 1;
}

/* Caption strip — single line context for the hovered logo */
.logo-caption {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  min-height: 2.4em;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  text-align: center;
  transition: opacity 220ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5em;
}
.logo-caption[data-empty="true"] {
  opacity: 0.45;
}
.logo-caption__name {
  font-weight: 500;
  color: var(--color-text);
}
.logo-caption__sep {
  color: var(--color-text-muted);
  margin: 0 0.2em;
}


/* 41. Case study side rails (TOC + at-a-glance)
   On ≥1180px viewports, two fixed-position rails frame the reading column.
   Below that, rails are hidden. JS populates from existing markup.
   ========================================================================== */
.case-rail {
  display: none;
  position: fixed;
  top: 96px;
  z-index: 30;
  font-family: var(--font-sans);
}

@media (min-width: 1180px) {
  .case-rail {
    display: block;
    width: 200px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
  }
  .case-rail--left  { left: max(28px, calc(50vw - 540px)); }
  .case-rail--right { right: max(28px, calc(50vw - 540px)); width: 220px; }
}
@media (min-width: 1380px) {
  .case-rail--left  { left: max(40px, calc(50vw - 600px)); }
  .case-rail--right { right: max(40px, calc(50vw - 600px)); }
}

.case-rail__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.case-toc {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.case-toc__item {
  position: relative;
  padding: 6px 0 6px 18px;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--color-text-muted);
  border-left: 1px solid var(--color-border);
  transition: color 220ms ease, border-color 220ms ease, transform 220ms ease;
  cursor: pointer;
  display: block;
  text-decoration: none;
}
.case-toc__item:hover {
  color: var(--color-text);
  border-color: var(--color-text-secondary);
}
.case-toc__item.is-active {
  color: var(--color-text);
  border-left-color: var(--color-accent);
  border-left-width: 2px;
  padding-left: 17px;
  font-weight: 500;
}
.case-toc__num {
  display: inline-block;
  font-weight: 600;
  color: var(--color-accent);
  margin-right: 6px;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.case-rail__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-text-secondary);
  border: 0;
  padding: var(--space-3) 0;
  margin-bottom: var(--space-4);
  transition: color 220ms ease, gap 220ms ease;
}
.case-rail__back:hover {
  color: var(--color-accent);
  gap: 10px;
}
.case-rail__readtime {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  margin: 0;
}
.case-rail__readtime strong {
  color: var(--color-text);
  font-weight: 600;
}

.case-glance {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.case-glance__row dt {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}
.case-glance__row dd {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text);
  line-height: 1.4;
  font-family: var(--font-serif);
  font-weight: 500;
}
.case-glance__skills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.case-glance__skills li {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
  padding: 2px 0;
  margin: 0;
  position: relative;
  padding-left: 12px;
}
.case-glance__skills li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 6px;
  height: 1px;
  background: var(--color-accent);
}


/* 42. Case study hero meta row (read time + dates)
   ========================================================================== */
.case-hero-meta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.case-hero-meta__sep {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-border);
}
.case-hero-meta__pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.case-hero-meta__pill svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
}


/* 43. Section header anchor permalink (subtle # on hover)
   ========================================================================== */
.case-study__section-title {
  position: relative;
}
.section-anchor {
  position: absolute;
  left: -1.4em;
  top: 0.18em;
  width: 1em;
  font-family: var(--font-sans);
  font-size: 0.7em;
  font-weight: 400;
  color: var(--color-text-muted);
  text-decoration: none;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 220ms ease, transform 220ms ease, color 220ms ease;
  pointer-events: auto;
  user-select: none;
}
.case-study__section:hover .section-anchor,
.section-anchor:focus-visible {
  opacity: 1;
  transform: translateX(0);
}
.section-anchor:hover {
  color: var(--color-accent);
}
.section-anchor.is-copied {
  opacity: 1;
  color: var(--color-accent);
}
.section-anchor.is-copied::after {
  content: 'copied';
  position: absolute;
  left: 1.4em;
  top: 0.05em;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  white-space: nowrap;
  font-weight: 600;
}


/* 44. Prev/next case study nav (bottom of case studies)
   ========================================================================== */
.case-nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin: var(--space-9) 0 var(--space-7);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
@media (min-width: 640px) {
  .case-nav { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
}
.case-nav__link {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: var(--space-3) 0;
  transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.case-nav__link--prev { text-align: left; }
.case-nav__link--next { text-align: right; }
@media (min-width: 640px) {
  .case-nav__link--prev:hover { transform: translateX(-4px); }
  .case-nav__link--next:hover { transform: translateX(4px); }
}
.case-nav__cue {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.case-nav__title {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--color-text);
  margin: 0;
}
.case-nav__link:hover .case-nav__title { color: var(--color-accent); }
.case-nav__link:hover .case-nav__cue { color: var(--color-accent); }


/* 45. Hero cursor spotlight (home only)
   ========================================================================== */
.hero-spotlight {
  position: relative;
  isolation: isolate;
}
.hero-spotlight::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 50%),
    rgba(200, 65, 44, 0.10) 0%,
    rgba(200, 65, 44, 0.05) 28%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 600ms ease;
}
.hero-spotlight.is-active::before {
  opacity: 1;
}
@media (hover: none), (prefers-reduced-motion: reduce) {
  .hero-spotlight::before { display: none; }
}


/* 46. Image lightbox (deck-image click to expand)
   ========================================================================== */
.deck-image {
  cursor: zoom-in;
}
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(17, 17, 17, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-7);
  opacity: 0;
  visibility: hidden;
  transition: opacity 280ms ease, visibility 280ms ease;
  cursor: zoom-out;
}
.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}
.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 24px 72px -12px rgba(0, 0, 0, 0.6);
  transform: scale(0.96);
  transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lightbox.is-open .lightbox__img {
  transform: scale(1);
}
.lightbox__close {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid rgba(250, 250, 247, 0.4);
  color: var(--color-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease;
}
.lightbox__close:hover {
  background: rgba(250, 250, 247, 0.12);
  border-color: var(--color-bg);
}
.lightbox__caption {
  position: absolute;
  bottom: var(--space-6);
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-bg);
  opacity: 0.85;
}


/* 35. Reduced-motion overrides
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .pull-quote::before { transform: scaleY(1) !important; }
  .barchart__bar { width: var(--bar-width, 0) !important; }
  .hexagon .hex-line,
  .hexagon .hex-dot,
  .hexagon .hex-label,
  .hexagon .hex-center,
  .hexagon .hex-center-label { opacity: 1 !important; }
  .section-header::after { width: 56px !important; }
  .section-rule { width: 80px !important; }
  .hero__scroll::after { animation: none !important; transform: scaleY(1) !important; opacity: 1 !important; }
  .marquee__row { animation: none !important; }
  .progress { display: none !important; }
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}


/* Coming-soon note-card visual treatment. Disabled state, no link affordance. */
.note-card--coming-soon {
  opacity: 0.55;
  cursor: default;
}
.note-card--coming-soon .note-card__title {
  color: var(--color-text-secondary);
}
.note-card--coming-soon:hover {
  opacity: 0.7;
}


/* 47. Last-mile editorial pizazz
   ========================================================================== */

/* Drop cap on opt-in lede paragraphs */
.lede--drop-cap::first-letter {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 4.5em;
  float: left;
  line-height: 0.85;
  margin: 0.05em 0.12em -0.05em -0.05em;
  color: var(--color-accent);
  font-style: normal;
}

/* Section glow. Faint peach radial behind opted-in sections.
   Mirrors the hero-spotlight idea but static and quieter. */
.section-glow {
  position: relative;
  isolation: isolate;
}
.section-glow::before {
  content: '';
  position: absolute;
  top: -5%;
  left: -5%;
  right: -5%;
  bottom: -5%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 55% 65% at 30% 40%, rgba(232, 169, 154, 0.18), transparent 65%);
}
@media (prefers-reduced-motion: reduce) {
  .section-glow::before { display: none; }
}

/* Wordmark tagline. Header-only — does not affect mobile-nav or footer.
   Uses ::after with content so the tagline reads as decorative. */
.site-header .wordmark {
  display: inline-block;
  line-height: 1;
}
.site-header .wordmark::after {
  content: 'Sports DNA · AI-native';
  display: block;
  font-family: var(--font-sans);
  font-size: 0.55em;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: 0.3em;
}

/* Active nav dot pulse. 2.4s slow breath. Stops on hover. */
.nav__link.is-active::before {
  animation: nav-dot-pulse 2400ms ease-in-out infinite;
}
.nav__link.is-active:hover::before {
  animation: none;
}
@keyframes nav-dot-pulse {
  0%, 100% { transform: translateY(-1px) scale(1); opacity: 1; }
  50%      { transform: translateY(-1px) scale(1.35); opacity: 0.6; }
}
@media (prefers-reduced-motion: reduce) {
  .nav__link.is-active::before { animation: none; }
}

/* Section header count ornament. "Featured work (04)" pattern. */
.section-header__count {
  font-family: var(--font-sans);
  font-size: 0.55em;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-left: 0.5em;
  vertical-align: 0.15em;
  font-variant-numeric: tabular-nums;
}

/* Page title count, for pages where the count goes beside the h1 */
.page-title__count {
  font-family: var(--font-sans);
  font-size: 0.32em;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-left: 0.6em;
  vertical-align: 0.55em;
  font-variant-numeric: tabular-nums;
}