/* ============================================================
   BASE STYLES (mirrored from portfolio/style.css)
   Duplicated here so the cover page is self-contained and
   doesn't trigger auth prompts by loading from /portfolio/
   (which is password-protected). If you change base styles
   here, also update portfolio/style.css.
   Follow-up task: extract shared into public common.css.
   ============================================================ */
/* ======= v3: Modern Editorial Hybrid ======= */

:root {
  --ink: #0f0f10;
  --ink-soft: #2c2c30;
  --muted: #6b6b72;
  --line: #e7e7ea;
  --line-soft: #f1f1f3;
  --paper: #fafaf8;
  --accent: #0e5e6f; /* peacock teal */
  --accent-soft: #a8d4dc; /* soft pale teal */
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  /* BODY FONT — swap trial. Currently: IBM Plex Sans (humanist, distinctive,
     highly readable). Other candidates to try:
       'Instrument Sans', ...   (Google Fonts, subtle character)
       'Public Sans', ...       (Google Fonts, USWDS humanist)
       'DM Sans', ...           (Google Fonts, geometric)
     Fall through to Inter if IBM Plex Sans doesn't load. */
  font-family: 'IBM Plex Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  font-weight: 400;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.serif-accent {
  font-family: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  font-style: italic;
  font-weight: 400;
}

/* ===== Top bar ===== */
.topbar {
  position: sticky;
  top: 0;
  background: rgba(250, 250, 248, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  z-index: 50;
}

.topbar-inner {
  max-width: 1440px;
  margin: 0 auto;
  /* Left padding accommodates the back-chevron on projects list.
     40px normal + 44px chevron-space so the title text on projects
     lands at the same X as "Maya" on the cover. Chevron then slots
     into the reserved left zone. */
  padding: 26px 40px 26px 84px;
  display: flex;
  align-items: center;
  gap: 24px;
  /* Force Inter on the header regardless of body font — the projects
     list body uses IBM Plex Sans, cover uses Inter. Without this, the
     same font-size renders at different visual sizes. */
  font-family: 'Inter', sans-serif;
  /* Match the cover body's antialiasing so header text renders with
     the same stroke weight on both pages. Without this, projects
     list gets browser-default subpixel antialiasing (heavier strokes)
     while cover gets grayscale (thinner). */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.brand-mark {
  display: inline-block;
  width: 38px;
  color: var(--accent);
  text-decoration: none;
  flex-shrink: 0;
  margin-right: -6px; /* tighten the gap to the name so the mark reads as a companion, not a separate nav item */
  line-height: 0;
  transition: opacity 0.15s ease, transform 0.2s ease;
}

.brand-mark svg {
  width: 100%;
  height: auto;
  display: block;
}

.brand-mark:hover {
  opacity: 0.85;
}

.brand-mark:hover svg {
  animation: boat-sway 2.4s ease-in-out infinite;
  transform-origin: 50% 70%; /* pivot near the waterline so the boat rocks like it's on water */
}

@keyframes boat-sway {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}

.brand {
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.15s ease;
}
.brand:hover {
  color: var(--accent);
}

/* Brand-stack — used on cover as "Maya / Product Designer" and on
   projects list as "‹ Selected Work / 2013–2026". Same visual
   treatment; the projects variant adds a back chevron. */
.brand-stack {
  display: flex;
  text-decoration: none;
  color: var(--ink);
  line-height: 1;
}

/* Cover variant (no --back modifier): column layout, text stacked
   and left-aligned to each other. */
.brand-stack:not(.brand-stack--back) {
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

/* Projects list variant: text-stack sits at natural position (same X
   as "Maya" on cover). Chevron is absolutely positioned to the left,
   living in the topbar's reserved left padding zone. */
.brand-stack--back {
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  position: relative;
}
.brand-stack--back .brand-stack-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}
/* Override the chevron's positioning: pull it out of flow and sit
   it 44px to the left of the text-stack, in the reserved padding zone. */
.brand-stack--back > .brand-back-chevron {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
}
.brand-stack--back:hover > .brand-back-chevron,
.brand-stack--back > .brand-back-chevron:hover {
  transform: translateY(-50%) translateX(-2px);
}
.brand-stack .brand-name {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--ink);
  font-feature-settings: normal;
}
.brand-stack .brand-sub {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 500;
  line-height: 1;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* Back-chevron — the only clickable element in the projects-list
   brand block. Subtle, muted, sits to the left of the (non-linked)
   title text. Hover animates a tiny left-shift + color change. */
.brand-back-chevron {
  font-size: 32px;
  font-weight: 300;
  color: var(--muted);
  line-height: 1;
  text-decoration: none;
  display: inline-block;
  transition: color 0.15s ease, transform 0.15s ease;
}
.brand-back-chevron:hover {
  color: var(--accent);
  transform: translateX(-2px);
}



/* Right-side nav cluster — groups Portfolio + Contact on the cover,
   or just Contact on the projects list. Sits at the far right of
   the topbar via margin-left: auto. */
.nav-right {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
}

/* Internal nav link — same shape as .nav-email but for in-site links
   (e.g., "Portfolio" on the cover header). */
.nav-link {
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: border-color .15s ease;
  letter-spacing: -0.005em;
}
.nav-link:hover {
  border-bottom-color: var(--ink);
}

.nav-email {
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: border-color .15s ease;
  letter-spacing: -0.005em;
}

.nav-email:hover {
  border-bottom-color: var(--ink);
}

/* ===== Hero ===== */
.hero {
  border-bottom: 1px solid var(--line);
}

.hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 120px 40px 100px;
}

.hero-eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 500;
  color: var(--muted);
  margin: 0 0 32px;
}

.hero h1 {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  /* sized so the long line spans the full hero width */
  font-size: clamp(44px, 7.4vw, 116px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  margin: 0 0 60px;
  color: var(--ink);
}

.hero-accent {
  font-family: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: -0.02em;
}

.hero-meta {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 60px;
  align-items: start;
  border-top: 1px solid var(--ink);
  padding-top: 28px;
}

.hero-lead {
  /* Matches .hero-philosophy-prose treatment — same font, weight, color, size, line-height.
     Creates a consistent body-copy voice across the hero + philosophy sections. */
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: clamp(15px, 1.35vw, 17px);
  line-height: 1.7;
  letter-spacing: 0;
  color: var(--ink-soft);
  margin: 0;
  max-width: 560px;
}

.hero-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  color: var(--muted);
}

.hero-tags li {
  padding: 4px 0;
  border-bottom: 1px solid var(--line-soft);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}

.hero-tags li:first-child { border-top: 1px solid var(--line-soft); }

/* ===== Hero philosophy band — full-width centered statement with ghosted quote mark ===== */
.hero-philosophy {
  margin: 72px -40px -100px;
  padding: 72px 40px 80px;
  background: var(--paper-2);
  text-align: center;
  position: relative;
}

.hero-philosophy-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--accent);
  font-weight: 600;
  margin: 0 0 24px;
  position: relative;
}

/* Old .hero-philosophy-body — kept in place for any legacy references but no longer used on home page. */
.hero-philosophy-body {
  font-family: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.35;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 auto;
  max-width: 920px;
  position: relative;
}

.hero-philosophy-body em {
  font-style: normal;
  font-weight: 600;
  color: var(--accent);
}

/* ---- Philosophy structure: label → serif italic pull quote → hairline → sans-serif prose ---- */

.hero-philosophy-pull {
  font-family: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--accent);        /* base is teal */
  margin: 0 auto 48px;
  max-width: 820px;
  padding-bottom: 32px;
  text-align: center;
  position: relative;
}

/* Emphasized phrase — grounded ink + heavier weight to anchor the sentence */
.hero-philosophy-pull em {
  color: var(--ink);
  font-style: italic;
  font-weight: 600;
}

/* Short hairline below the pull quote — quiet transition to the explanatory prose */
.hero-philosophy-pull::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 1px;
  background: var(--accent);
  opacity: 0.5;
}

.hero-philosophy-prose {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: clamp(15px, 1.35vw, 17px);
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 auto;
  max-width: 720px;
  text-align: center;
}

@media (max-width: 720px) {
  .hero-philosophy {
    margin: 48px -24px -60px;
    padding: 56px 24px 60px;
  }
  .hero-philosophy-pull {
    font-size: clamp(22px, 6vw, 28px);
    margin-bottom: 36px;
    padding-bottom: 24px;
  }
  .hero-philosophy-prose {
    font-size: 15px;
    line-height: 1.65;
    max-width: none;
  }
}

/* ===== Section label (shared) ===== */
.section-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 500;
  color: var(--muted);
  margin: 0 0 32px;
}

/* ===== Hero variants — Layout options for anti-AI top redesign =====
   Applied by adding modifier classes to <header class="hero">. */

/* Layout A — Standfirst with restrained editorial title */
.hero--standfirst {
  border-bottom: 1px solid var(--line);
}
.hero--standfirst .hero-inner {
  padding: 80px 40px 64px;
  max-width: 1080px;
  margin: 0 auto;
}
.hero--standfirst .hero-standfirst-title {
  font-family: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(38px, 4.6vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 28px;
  max-width: 780px;
}
.hero--standfirst .hero-standfirst {
  font-family: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  font-weight: 400;
  font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 720px;
  margin: 0;
  text-align: left;
  letter-spacing: -0.005em;
}

/* Shared title eyebrow — for C and A, small caps section label at top */
.hero-title-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 500;
  color: var(--muted);
  margin: 0 0 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
  max-width: 200px;
}

/* Layout B — Left-aligned editorial: small italic H1, tighter single column. */
.hero--editorial {
  border-bottom: 1px solid var(--line);
}
.hero--editorial .hero-inner {
  padding: 72px 40px 56px;
  max-width: 920px;
  margin: 0 auto;
}
.hero-editorial-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 500;
  color: var(--muted);
  margin: 0 0 24px;
}
.hero-editorial-h1 {
  font-family: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(32px, 4.2vw, 52px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 24px;
  max-width: 820px;
}
.hero-editorial-h1 em {
  font-style: italic;
  color: var(--accent);
}
.hero-editorial-lead {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 640px;
  margin: 0 0 20px;
}
.hero-editorial-philosophy {
  font-family: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: var(--accent);
  max-width: 620px;
  margin: 0;
}

/* Layout C — Philosophy-first: opens with the thesis, no name-plate H1. */
.hero--philosophy-first {
  border-bottom: 1px solid var(--line);
}

.hero--philosophy-first .hero-inner {
  padding: 96px 40px 80px;
  max-width: 1080px;
  margin: 0 auto;
}

.hero--philosophy-first .hero-philosophy-pull {
  font-family: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(40px, 5vw, 62px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--accent);
  text-align: left;
  margin: 0 0 32px;
  max-width: 900px;
  padding: 0;
  border: none;
  background: none;
}

.hero--philosophy-first .hero-philosophy-pull::before,
.hero--philosophy-first .hero-philosophy-pull::after {
  display: none;
}

.hero--philosophy-first .hero-philosophy-pull em {
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
}

.hero--philosophy-first .hero-philosophy-prose {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 640px;
  margin: 0;
  text-align: left;
  letter-spacing: 0;
}

/* Layout D — Sidebar nameplate: two columns, sidebar left with name/positioning/bio, cases stream on right. */
.hero-sidebar-layout {
  display: grid;
  grid-template-columns: 270px 1fr;
  max-width: 1440px;
  /* 100px top margin creates breathing room between the metrics band
     (with its own motion) and the first case (which also plays a video).
     Two moving things too close to each other read as competing. */
  margin: 100px auto 0;
  gap: 0;
}

.hero-sidebar {
  border-right: 1px solid var(--line);
  padding: 72px 36px 40px;
  position: sticky;
  top: 60px;
  align-self: start;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  transition: opacity 0.5s ease;
}

/* Once the reader has scrolled past the top, the sidebar dims — it stays present
   as a reference but stops competing with the cases for attention. Hover brings
   it back to full opacity for reading. */
.hero-sidebar.is-dimmed {
  opacity: 0.32;
}

.hero-sidebar.is-dimmed:hover {
  opacity: 1;
  transition: opacity 0.2s ease;
}

.hero-sidebar-inner {
  max-width: 220px;
}

.hero-sidebar-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 500;
  color: var(--muted);
  margin: 0 0 20px;
}

.hero-sidebar-name {
  font-family: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 20px;
}

.hero-sidebar-name em {
  font-style: italic;
  color: var(--accent);
  font-weight: 500;
}

.hero-sidebar-position {
  font-family: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 24px;
}

.hero-sidebar-position em {
  font-style: italic;
  color: var(--accent);
  font-weight: 500;
}

.hero-sidebar-bio {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 24px;
}

.hero-sidebar-bio em {
  font-style: italic;
  color: var(--accent);
  font-weight: 500;
}

.hero-sidebar-philosophy {
  font-family: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.45;
  color: var(--accent);
  margin: 0 0 16px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
}

.hero-sidebar-prose {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 12px;
}

.hero-sidebar-prose em {
  font-style: italic;
  color: var(--accent);
  font-weight: 500;
}

.hero-sidebar-prose:last-of-type {
  margin-bottom: 24px;
}

.hero-sidebar-meta {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 500;
  color: var(--muted);
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}

.cases--sidebar {
  padding-top: 20px;
}

.cases--sidebar .case {
  padding: 60px 40px;
}

.cases--sidebar .case:first-child {
  padding-top: 40px;
}

@media (max-width: 900px) {
  .hero-sidebar-layout {
    grid-template-columns: 1fr;
    /* Kill the 100px desktop breathing room on mobile — metrics band
       is hidden below 720px so that space is orphaned. */
    margin-top: 20px;
  }

  .hero-sidebar {
    position: static;
    max-height: none;
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 32px 24px;
    overflow: visible;
  }

  .hero-sidebar-inner {
    max-width: 100%;
  }
}

/* ===== Cases ===== */
.cases {
  max-width: 1280px;
  margin: 0 auto;
}

.case {
  padding: 72px 40px;
  border-bottom: 1px solid var(--line);
}

.case-header {
  display: flex;
  align-items: baseline;
  gap: 32px;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line-soft);
}

.case-num {
  font-family: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 56px;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.02em;
}

.case-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: var(--muted);
}

.case-tags span {
  padding: 0;
  border: none;
  border-radius: 0;
}

/* Dot separator between tags — reads as editorial metadata rather
   than a row of pill-shaped mini-buttons. Keeps them distinct from
   the actual CTA buttons below (case-cta-btn). */
.case-tags span + span::before {
  content: '·';
  padding: 0 10px;
  color: var(--line);
}

.case-body {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: start;
}

/* Alternate: even-numbered cases get text on the left, image on the right */
.case:nth-child(even) .case-body {
  grid-template-columns: 1fr 1.1fr;
}

.case:nth-child(even) .case-image {
  order: 2;
}

/* Case image — mirrors the fan card treatment: white card wrapper with padding,
   rounded corners, subtle border/shadow, image inside with its own rounded corners
   under a very subtle haze overlay. */
.case-image {
  position: sticky;
  top: 100px;
  background: #fff;
  border: 1px solid rgba(15, 15, 16, 0.06);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 3px 12px rgba(15, 15, 16, 0.05), 0 1px 3px rgba(15, 15, 16, 0.04);
  overflow: hidden;
  /* Page-wide reveal — case images enter slightly delayed and fade up
     when they scroll into viewport. Handled by IntersectionObserver;
     .is-revealed class flips them to their resting state. */
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.7s ease-out, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.case-image.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .case-image {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.case-image-inner {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: var(--line-soft);
}

.case-image-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(250, 250, 248, 0.10) 0%, rgba(250, 250, 248, 0.02) 100%);
  pointer-events: none;
}

.case-image img,
.case-image video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* Video-specific: the video is already cropped to just the iPad's
   outer edge, so no wrapper needed. Let the device float on the
   page background — no card frame, no bezel, no border. Just the
   device itself. */
.case-image--video {
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
  overflow: visible;
}
.case-image--video video {
  /* Match the iPad's own outer corner radius so the rectangular crop
     doesn't show black triangles at the corners. Tuned to render as
     roughly the same curve as the iPad body at typical display width. */
  border-radius: 40px;
  background: transparent;
}

/* Fallback: if the image is a direct child of .case-image without an inner wrapper,
   still get rounded corners and the same look. */
.case-image > img {
  border-radius: 8px;
}

.case-text {
  min-width: 0;
}

.case h2 {
  font-family: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  font-weight: 600;
  font-size: 48px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  color: var(--ink);
}

.case-dek {
  font-family: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.35;
  color: var(--accent);
  margin: 0 0 32px;
}

.case-text p {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.case-text p:last-child { margin-bottom: 0; }

/* Success outcome sentence — medium weight Inter + full ink color.
   Marks the third beat of each case body: problem/product → role → outcome.
   Weight 500 sits between regular body (400) and bold numbers (600–700) inside it,
   so the sentence carries more presence without competing with its own <strong> tags
   or with the Fraunces italic pull-quote that follows. */
.case-text p.case-outcome {
  font-weight: 500;
  color: var(--ink);
}

/* Inline links inside body copy — muted underline, hover to accent */
.case-text > p a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--muted);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.case-text > p a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

.case-links {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.case-links a {
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  transition: all .15s ease;
  display: inline-block;
}

.case-links a:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

/* Solid CTA variant — used on featured cases */
.case-links--cta a {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-weight: 600;
  padding: 10px 18px;
  letter-spacing: 0.01em;
}

.case-links--cta a:hover {
  background: #083d44;
  border-color: #083d44;
  color: #fff;
}

/* Only the first CTA (Detailed case study) stays as primary teal.
   All following CTAs revert to the outline / secondary pill style. */
.case-links--cta li:not(:first-child) a {
  background: #fff;
  color: var(--ink);
  border-color: var(--line);
  font-weight: 500;
  padding: 8px 14px;
  letter-spacing: normal;
}

.case-links--cta li:not(:first-child) a:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

/* ===== Small subheading inside case body (e.g. "Legacy") ===== */
/* Uppercase mini-header to mark a distinct beat within the body prose */
.case-text .case-heading {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--muted);
  margin: 4px 0 6px;
  line-height: 1.4;
}

/* ===== Case-study body callout list (bulleted refs inside body copy) ===== */
/* Used when specific corporate/press coverage IS the narrative — not a footnote */
.case-text .case-callout-list {
  list-style: disc;
  padding-left: 22px;
  margin: 0 0 24px;
}

.case-text .case-callout-list li {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 10px;
}

.case-text .case-callout-list li:last-child {
  margin-bottom: 0;
}

.case-callout-list li::marker {
  color: var(--muted);
}

.case-callout-source {
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.15s ease;
}
.case-callout-source:hover {
  color: var(--accent);
}

/* ===== Case-study evidence: quotes + external references ===== */
/* NOTE: selectors below use .case-text prefix to beat the specificity of
   .case-text p { font-size: 16px } which would otherwise override. */

/* --- Quotes label ("In their words" / "Strategic impact") --- */
/* Bold, uppercase — footnote heading, quiet, centered, with hairline divider below */
.case-text .case-quotes-label {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0;
  font-weight: 700;
  color: var(--muted);
  margin: 0 0 32px;
  line-height: 1.4;
  text-align: center;
  padding-bottom: 20px;
  position: relative;
}

/* Short hairline below the "IN THEIR WORDS" label — same treatment as philosophy divider */
.case-text .case-quotes-label::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 1px;
  background: var(--accent);
  opacity: 0.5;
}

/* Same hairline below the final quote in the block */
.case-quote:last-child {
  padding-bottom: 20px;
  position: relative;
}
.case-quote:last-child::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 1px;
  background: var(--accent);
  opacity: 0.5;
}

.case-quotes {
  margin-top: 64px;
  max-width: 70%;
  margin-left: auto;
  margin-right: auto;
}

.case-quote {
  margin: 0 0 21px;
  padding: 0;
}

.case-quote:last-child {
  margin-bottom: 0;
}

/* Quote — largest thing in this section, but STILL smaller than case-dek (22px)
   so the whole block reads as subordinate to the main blurb.
   Weight 300 = Fraunces Light Italic — takes the display heft off the quote. */
.case-text .case-quote-text {
  font-family: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 19px;
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 0 0 8px;
  text-align: center;
}

/* Curly quote marks live on the inner .case-quote-body span so that
   an inline source link can sit AFTER the closing quote mark. */
.case-text .case-quote-body::before {
  content: "\201C\00A0"; /* " + nbsp */
}
.case-text .case-quote-body::after {
  content: "\00A0\201D"; /* nbsp + " */
}

/* Inline link inside the quote body — dotted underline, a touch more presence */
.case-quote-text a {
  color: var(--ink);
  font-weight: 400;
  text-decoration: underline dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--muted);
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.case-quote-text a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

/* Attribution — centered under quote, matches ref-source size, muted, no em-dash */
.case-text .case-quote-source {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
  margin: 0;
  text-align: center;
}

/* If a link ever ends up in the source line (fallback), keep it quiet */
.case-quote-source a {
  color: var(--muted);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 2px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.case-quote-source a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

/* --- "source" citation link — inline at the end of the quote body --- */
.case-text a.case-quote-cite {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 11px;
  color: var(--muted);
  margin-left: 8px;
  text-transform: none;
  letter-spacing: 0;
  text-decoration: underline dotted;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(107, 107, 114, 0.5);
  text-underline-offset: 3px;
  white-space: nowrap;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.case-text a.case-quote-cite:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

/* --- External references ("Also featured in") --- */
/* Everything here reads as tiny footnote text */
.case-refs {
  margin-top: 18px;
}

.case-text .case-refs-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
  margin: 0 0 2px;
  line-height: 1.4;
}

.case-refs-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Each ref item gets a centered 1/3-width dotted rule ABOVE it,
   and the last item also gets one BELOW — creates short editorial separators */
.case-refs-item {
  padding: 6px 0;
  display: block;
  position: relative;
}

.case-refs-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 33%;
  border-top: 1px dotted rgba(107, 107, 114, 0.35);
}

.case-refs-list > .case-refs-item:last-child::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 33%;
  border-top: 1px dotted rgba(107, 107, 114, 0.35);
}

/* Source name — regular weight, ink-soft */
.case-refs-source {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-soft);
  text-decoration: none;
  display: block;
  margin-bottom: 0;
  transition: color 0.15s ease;
}
.case-refs-source:hover {
  color: var(--accent);
}

/* Description — smaller than the source, muted */
.case-text .case-refs-desc {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted);
  margin: 0;
}

/* Row for unlinked "Additional coverage" mentions */
.case-refs-item--plain .case-refs-source {
  color: var(--muted);
  font-weight: 400;
}
.case-refs-item--plain .case-refs-desc {
  font-style: italic;
}

/* ===== Approach (How I Work) ===== */
.approach {
  background: var(--ink);
  color: var(--paper);
}

.approach-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 120px 40px;
}

.approach .section-label {
  color: rgba(255, 255, 255, 0.5);
}

.approach-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(44px, 6vw, 80px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 32px;
  color: var(--paper);
  max-width: 1000px;
}

.approach-title .serif-accent {
  color: var(--accent-soft);
}

.approach-lead {
  font-size: 22px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.7);
  max-width: 720px;
  margin: 0 0 100px;
}

.approach-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 80px 60px;
}

.approach-block--feature {
  grid-column: 1 / -1;
}

/* Extra breathing room above any featured block that isn't the first in the grid
   (e.g. block 04 "Designing with AI" — gives it visual separation from the 02/03 row above). */
.approach-block--feature:not(:first-child) {
  margin-top: 56px;
}

.approach-block {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 32px;
}

.approach-num {
  font-family: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  color: var(--accent-soft);
  margin-bottom: 16px;
  letter-spacing: 0.04em;
}

.approach-block h3 {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 0 0 16px;
  color: var(--paper);
}

.approach-block p {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 20px;
}

.approach-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.approach-links .approach-link { margin-top: 0; }

.approach-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 18px;
  text-decoration: none;
  background: var(--accent-soft);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  border-radius: 999px;
  transition: transform .15s ease, background .15s ease;
}

.approach-link:hover {
  background: #fff;
  transform: translateY(-1px);
}

.approach-img {
  margin-top: 24px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  overflow: hidden;
}

.approach-img--small {
  max-width: 50%;
}

/* ===== Footer ===== */
.footer {
  background: var(--paper);
  border-top: 1px solid var(--line);
}

.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 120px 40px 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}

.footer-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--ink);
}

.footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-list li {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 24px;
  align-items: baseline;
  padding: 16px 0;
  border-top: 1px solid var(--line-soft);
}

.footer-list li:last-child {
  border-bottom: 1px solid var(--line-soft);
}

.f-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 500;
  color: var(--muted);
}

.footer-list a {
  text-decoration: none;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.005em;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}

.footer-list a:hover {
  border-bottom-color: var(--ink);
}

.footer-bottom {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 40px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted);
}

/* ===== Signoff footer — ink-drawn close =====
   Paper boat + waves at the top, Sacramento "hello." sign-off,
   quiet contact info below. Ported from portfolio/style.css so
   the cover can share the same signoff footer treatment. */
.footer--signoff .footer-inner {
  display: flex;
  flex-direction: column;
  padding: 120px 40px 20px;
  text-align: center;
  max-width: 1280px;
  min-height: 460px;
}
.footer-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: auto;
  gap: 24px;
}
.footer-mark {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: var(--accent);
}
.footer-boat {
  width: 72px;
  height: auto;
  display: block;
  opacity: 0.85;
}
.footer-waves {
  width: 200px;
  height: auto;
  display: block;
  opacity: 0.55;
  margin-top: -18px;
}
.footer-signoff {
  font-family: 'Sacramento', cursive;
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 38px);
  line-height: 1;
  letter-spacing: 0;
  color: var(--muted);
  margin: 0;
  opacity: 0.9;
}
.footer-gift {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  letter-spacing: 0;
  opacity: 0.75;
  text-align: left;
}
.footer-gift a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid rgba(107, 107, 114, 0.3);
  padding-bottom: 1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.footer-gift a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ===== Responsive ===== */
@media (max-width: 1000px) {
  .hero-meta {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .case-body,
  .case:nth-child(even) .case-body {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .case:nth-child(even) .case-image {
    order: 0;
  }
  /* On mobile, always stack text-first, media-second — regardless of
     whether the section is odd or even on desktop. Matches the desktop
     even-section reading order. */
  .case .case-media-col,
  .case:nth-child(even) .case-media-col {
    order: 2;
  }
  .case-image {
    position: static;
  }
  .approach-grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .approach-img--small {
    max-width: 60%;
  }
  .footer-inner {
    grid-template-columns: 1fr;
  }
}


@media (max-width: 600px) {
  /* Topbar mobile — bump chevron tap target so it's easy to hit
     near the viewport edge (padding hitzone, negative margin
     preserves visual position). */
  .topbar-inner { padding: 14px 20px 14px 60px; gap: 12px; }
  .brand-meta { display: none; }
  .brand-back-chevron {
    padding: 12px 10px;
    margin: -12px -10px;
  }
  /* Nudge chevron down ~15px on mobile — it visually reads high
     against the text-stack because of chevron ascender + line-height. */
  .brand-stack--back > .brand-back-chevron {
    transform: translateY(calc(-50% + 15px));
  }
  .brand-stack--back:hover > .brand-back-chevron,
  .brand-stack--back > .brand-back-chevron:hover {
    transform: translateY(calc(-50% + 15px)) translateX(-2px);
  }

  .hero-inner { padding: 64px 20px; }
  .hero h1 { font-size: 56px; }
  .hero-lead { font-size: 18px; }

  /* Tighter case-card padding on mobile. Also halves top padding
     now that case-header is hidden (nothing visible above image). */
  .cases--sidebar .case { padding: 16px 12px 32px; }
  .cases--sidebar .case:first-child { padding-top: 16px; }
  /* Hide case-header wrapper — both case-num and case-tags are hidden
     on mobile, so the wrapper is empty and shouldn't take space. */
  .case-header { display: none; }

  /* Hide chicklets on mobile — remaining text sections all stay
     visible. Text-cutting decisions come later, after visual layout
     is settled. */
  .case-tags { display: none; }

  /* Hide case number on mobile — with image-first order below, the
     number reads as noise. Sidebar's "Maya Venkatraman" h1 anchors
     the page. Case ordering is implicit from stack position. */
  .case-num { display: none; }
  /* Reduce project-name size on mobile so it reads as "here's a case"
     rather than "here's the page title". */
  .case h2 { font-size: 22px; }
  .case-dek { font-size: 16px; }

  /* CTA row on mobile — keep only the first (Case study), drop the
     rest to reduce mobile scroll and simplify the ask. */
  .case-cta-row a.case-cta-btn:not(:first-child) { display: none; }

  /* Results block — was max-width: 60% (fine on desktop, tragic on
     mobile). Widen to full width so text doesn't wrap 3 words per line.
     .cases--sidebar prefix beats the base rules (which are later in
     the file and would otherwise win via cascade order). */
  .cases--sidebar .case-section--results { max-width: 100%; }
  .cases--sidebar .case-result-text { max-width: 100%; }

  .approach-inner { padding: 60px 20px; }
  .approach-lead { font-size: 18px; margin-bottom: 60px; }

  .footer-inner { padding: 60px 20px 40px; }
  .footer-list li {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .footer-bottom {
    padding: 20px;
    flex-direction: column;
    gap: 6px;
  }
}



/* ===== Hover micro-interactions on case-study tiles (cursor devices only) ===== */
@media (hover: hover) {
  .case {
    transition: transform .25s ease;
    cursor: default;
  }
  .case:hover {
    transform: translateY(-4px);
  }
  .case-image {
    overflow: hidden;
    cursor: default;
  }
  .case-image img {
    transition: transform .4s ease;
    cursor: default;
  }
  .case:hover .case-image img {
    transform: scale(1.03);
  }
}

/* ============================================================
   Case template v2 — sectioned layout (Challenge / My Work /
   Results / More) + pull-quote block. Applied per project via
   .case--tmpl on the article, then filled with .case-section
   subsections and .case-quote-block below.
   ============================================================ */

.case-section {
  margin: 0 0 32px;
}
.case-section:last-child { margin-bottom: 0; }

/* Small-caps accent labels — The Challenge, My Work, Results, More */
.case-section-label {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
}

/* MY WORK bullets — custom dots in accent color */
.case-work-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.case-work-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 12px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.case-work-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.case-work-list li:last-child { margin-bottom: 0; }

/* RESULTS — editorial pull-out with thin accent rules above and below,
   small-caps label, italic serif body text. Feels like a magazine sidebar
   rather than a UI callout. */
.case-section--results {
  background: none;
  border: none;
  border-top: 1px solid rgba(14, 94, 111, 0.28);
  border-bottom: 1px solid rgba(14, 94, 111, 0.28);
  padding: 22px 0 20px;
  border-radius: 0;
  margin: 40px auto 0;
  max-width: 90%;
  position: relative;
  text-align: center;
}

/* Soft gradient fade above the case bottom border — pulls the eye toward
   the divider between one case and the next. Uses a radial ellipse hugging
   the bottom edge so the tint fades softly on all sides (no boxy corners). */
.case--tmpl {
  position: relative;
}
.case--tmpl::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: radial-gradient(ellipse 70% 100% at 50% 100%,
              rgba(14, 94, 111, 0.06),
              transparent 75%);
  pointer-events: none;
}
.case-section--results .case-section-label {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 14px;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--accent);
  text-align: center;
}
.case-result-text {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 auto;
  max-width: 60%;
  text-align: center;
  letter-spacing: 0.005em;
}

/* Case-template body-text sizing — tighter and smaller than the shared
   .case-text p default (16px / 1.55). Scoped to .case--tmpl so other
   projects that haven't been templated yet are unaffected. */
.case--tmpl .case-text p {
  font-size: 15px;
  line-height: 1.35;
}
.case--tmpl .case-work-list li {
  font-size: 15px;
  line-height: 1.35;
}
.case--tmpl .case-work-list li::before {
  top: 8px;
}

/* Push The Challenge (first case-section) a bit further from the case-dek */
.case--tmpl .case-dek {
  margin-bottom: 28px;
}

/* Pointless ambient breathe on the case-template image — very subtle scale +
   translate, 8 second cycle, ease-in-out. Hover on the img still overrides
   with its own scale(1.03), so the two behaviors don't collide. */
@keyframes case-image-breathe {
  0%, 100% { transform: scale(1) translateY(0); }
  50%      { transform: scale(1.012) translateY(-3px); }
}
.case--tmpl .case-image {
  animation: case-image-breathe 8s ease-in-out infinite;
  will-change: transform;
}

/* Respect users who prefer reduced motion — no breathing */
@media (prefers-reduced-motion: reduce) {
  .case--tmpl .case-image {
    animation: none;
  }
}

/* "Also featured in" wide variant — full-width appendix below Results,
   two columns side-by-side. Label and desc reuse the same tiny footnote
   treatment as when case-refs was inside .case-text. */
.case-refs--wide {
  max-width: 90%;
  margin: 32px auto 0;
}
.case-refs--wide .case-refs-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
  margin: 0 0 8px;
  line-height: 1.4;
}
.case-refs--wide .case-refs-desc {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted);
  margin: 0;
}
.case-refs--wide .case-refs-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 32px;
}

/* Stacked variant — items in a single column instead of side-by-side.
   Left-aligned under the label (not centered). */
.case-refs--wide.case-refs--stacked .case-refs-list {
  grid-template-columns: 1fr;
  gap: 12px;
}

/* Divider variant — adds a thin accent rule at the top, matching the
   Results section's bottom border style. Used when a case has no Results
   section but still needs visual closure between body and refs. */
.case-refs--wide.case-refs--divided {
  border-top: 1px solid rgba(14, 94, 111, 0.28);
  padding-top: 24px;
  margin-top: 40px;
}
.case-refs--wide .case-refs-item {
  padding: 0;
}
/* Remove the base .case-refs-item dotted rules in the wide variant */
.case-refs--wide .case-refs-item::before {
  display: none;
}
.case-refs--wide .case-refs-list > .case-refs-item:last-child::after {
  display: none;
}

/* CTA row — pill buttons */
.case-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.case-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease,
              color 0.15s ease, transform 0.15s ease;
}
.case-cta-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: translateY(-1px);
}
.case-cta-arrow {
  transition: transform 0.15s ease;
  display: inline-block;
}
.case-cta-btn:hover .case-cta-arrow {
  transform: translateX(3px);
}

/* Pull-quote block — editorial with oversized opening mark */
.case-quote-block {
  padding: 24px 28px 22px;
  background: var(--line-soft);
  border-radius: 8px;
  position: relative;
}
.case-quote-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--muted);
  margin: 0 0 12px;
}
.case-quote-pull {
  margin: 0;
  padding: 0;
  position: relative;
}
.case-quote-mark {
  position: absolute;
  top: -18px;
  left: -6px;
  font-family: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  font-style: italic;
  font-size: 72px;
  line-height: 1;
  color: var(--accent-soft);
  user-select: none;
  pointer-events: none;
}
.case-quote-text-pull {
  font-family: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  font-style: italic;
  font-size: 20px;
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 14px;
  padding-left: 20px;
}
.case-quote-attr {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  padding-left: 20px;
  font-size: 14px;
  color: var(--muted);
}
.case-quote-name {
  font-weight: 600;
  color: var(--ink-soft);
}
.case-quote-role {
  color: var(--muted);
}
.case-quote-src {
  font-size: 12px;
  text-decoration: underline;
  color: var(--accent);
  margin-left: auto;
}
.case-quote-src:hover {
  color: var(--ink);
}

/* ============================================================
   Case template v2 — layout refinements per Maya feedback:
   sidebar hidden, image + quote stacked in left col, CTA row
   moved to full-width footer below body grid, quote refined.
   ============================================================ */

/* Hide sidebar temporarily (topbar will pick up tagline later) */
.hero-sidebar { display: none; }
.hero-sidebar-layout {
  grid-template-columns: 1fr;
  max-width: 1200px;
  padding: 0 40px;
}

/* Media column — image + quote stacked, no sticky. */
.case--tmpl .case-image {
  position: static;
  top: auto;
}

/* Override the old .case:nth-child(even) .case-image { order: 2 } rule
   (specificity 0-3-0) — we need a higher-specificity selector to reset
   image ordering inside .case-media-col, since .case-media-col itself
   is what gets order:2 for even cases. */
.case:nth-child(even) .case-media-col .case-image {
  order: 0;
}
.case-media-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

/* Order media col children: image → CTAs → quote (quote sits last) */
.case--tmpl .case-media-col > .case-image { order: 0; }
.case--tmpl .case-media-col > .case-cta-row { order: 1; }
.case--tmpl .case-media-col > .case-quotes { order: 2; }

/* Single-column stack variant — for projects without quote or CTAs,
   drop the two-column grid entirely. Image sits on top, text below. */
.case--tmpl.case--stack .case-body {
  display: block;
}
.case--stack .case-image {
  max-width: 520px;
  margin: 0 auto 40px;
}
.case--stack .case-text {
  max-width: 720px;
  margin: 0 auto;
}

/* Elevated quote-label treatment for Dragonfly + Gemini — matches the
   Results label styling (accent-teal, wider letter-spacing) so the
   "Strategic Impact" / "In their words" label reads as an editorial
   anchor rather than a footnote. */
#gemini .case-media-col .case-quotes-label,
#dragonfly .case-media-col .case-quotes-label {
  color: var(--accent);
  letter-spacing: 0.2em;
  font-weight: 600;
}

/* Wide quote block — full-width appendix below case-body (like Results).
   Used for Dragonfly + Account Key where the quote is meant to span
   both columns rather than sit in the media col. */
.case-quotes--wide {
  max-width: 90%;
  margin: 40px auto 0;
}
.case-quotes--wide .case-quotes-label {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 600;
  color: var(--accent);
  margin: 0 0 32px;
  line-height: 1.4;
  text-align: center;
  padding-bottom: 20px;
  position: relative;
}
.case-quotes--wide .case-quotes-label::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 1px;
  background: var(--accent);
  opacity: 0.5;
}
.case-quotes--wide .case-quote-text {
  font-family: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 20px;
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 0 0 8px;
  text-align: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.case-quotes--wide .case-quote-body::before { content: "\201C\00A0"; }
.case-quotes--wide .case-quote-body::after { content: "\00A0\201D"; }
.case-quotes--wide .case-quote-source {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
  margin: 0;
  text-align: center;
}
.case-quotes--wide a.case-quote-cite {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 11px;
  color: var(--muted);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
  margin-left: 6px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.case-quotes--wide a.case-quote-cite:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

/* Side-by-side variant — 2 quotes in a 2-column grid, label spans both */
.case-quotes--wide.case-quotes--sidebyside {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 40px;
  row-gap: 20px;
}
.case-quotes--wide.case-quotes--sidebyside .case-quotes-label {
  grid-column: 1 / -1;
  margin-bottom: 20px;
}
.case-quotes--wide.case-quotes--sidebyside .case-quote {
  margin: 0;
}
.case-quotes--wide.case-quotes--sidebyside .case-quote-text {
  max-width: 100%;
  font-size: 17px;
}

/* ============================================================
   METRICS CARDS — six scattered "index cards" on a grid-paper
   surface, tilted at different angles and overlapping.
   Labels: Sacramento script. Numbers: Rampart One hollow display.
   Static composition (no motion yet — added in a later pass).
   ============================================================ */

.metrics-cards {
  width: 100%;
  background-image:
    linear-gradient(to right, rgba(14, 94, 111, 0.09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(14, 94, 111, 0.09) 1px, transparent 1px);
  background-size: 14px 14px;
  padding: 0 0 40px;
  /* Clip horizontally only — allow cards to bleed above and below the
     grid area so a card that pokes into the topbar or into the next
     section renders normally. overflow-x: clip is a modern property
     that (unlike hidden) doesn't force overflow-y into auto. */
  overflow-x: clip;
  overflow-y: visible;
}

.metrics-surface {
  position: relative;
  height: 380px;
  max-width: 1600px;
  margin: 0 auto;
}

.metric-card {
  --base-rotate: 0deg;
  position: absolute;
  background: rgba(168, 212, 220, 0.42);
  border-radius: 6px;
  padding: 28px 28px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  box-shadow: 0 4px 14px rgba(15, 15, 16, 0.06);
  width: 275px;
  min-height: 260px;
  justify-content: center;
  /* Initial hidden state: above the header, invisible.
     Transitions in when .is-loaded is added to the surface. */
  opacity: 0;
  transform: rotate(var(--base-rotate)) translateY(-320px);
  transition:
    transform 0.85s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.5s ease;
}

/* Loaded state — cards settle into their resting position */
.metrics-surface.is-loaded .metric-card {
  opacity: 1;
  transform: rotate(var(--base-rotate)) translateY(0);
}

/* Staggered entry delays so cards don't all land at once */
.metrics-surface.is-loaded .metric-card--1 { transition-delay: 0.10s, 0.10s; }
.metrics-surface.is-loaded .metric-card--2 { transition-delay: 0.05s, 0.05s; }
.metrics-surface.is-loaded .metric-card--3 { transition-delay: 0.00s, 0.00s; }
.metrics-surface.is-loaded .metric-card--4 { transition-delay: 0.15s, 0.15s; }
.metrics-surface.is-loaded .metric-card--5 { transition-delay: 0.20s, 0.20s; }
.metrics-surface.is-loaded .metric-card--6 { transition-delay: 0.25s, 0.25s; }

/* Card 4's onload — one continuous motion: comes down like the others
   but has too much momentum and overshoots past its resting spot into
   the content area, then course-corrects back up. No gap between drop
   and correction — it reads as a single "clumsy" gesture. */
.metrics-surface.is-loaded .metric-card--4 {
  animation: card-4-overshoot 1.9s cubic-bezier(0.55, 0, 0.2, 1) forwards;
  animation-delay: 0.15s;
  transition: none; /* animation replaces the transition for this card */
}
@keyframes card-4-overshoot {
  0%   { opacity: 0; transform: rotate(var(--base-rotate)) translateY(-320px); }
  35%  { opacity: 1; transform: rotate(var(--base-rotate)) translateY(110px); } /* lands past rest */
  48%  { opacity: 1; transform: rotate(var(--base-rotate)) translateY(85px); }  /* bounce 1 up */
  58%  { opacity: 1; transform: rotate(var(--base-rotate)) translateY(105px); } /* bounce 1 down */
  70%  { opacity: 1; transform: rotate(var(--base-rotate)) translateY(93px); }  /* bounce 2 up */
  80%  { opacity: 1; transform: rotate(var(--base-rotate)) translateY(100px); } /* bounce 2 down */
  100% { opacity: 1; transform: rotate(var(--base-rotate)) translateY(0); }     /* rises to rest */
}

/* Once card 4's onload animation completes, mark it "settled" so the
   onload animation doesn't re-fire when a temporary class is later added
   and removed (which changes animation-name and would otherwise restart
   card-4-overshoot from scratch). JS adds .is-settled after ~1.7s. */
.metric-card--4.is-settled {
  animation: none !important;
  transition: transform 0.3s ease, opacity 0.3s ease !important;
  opacity: 1;
  transform: rotate(var(--base-rotate)) translateY(0);
}

.metric-eyebrow {
  font-family: 'Sacramento', cursive;
  font-size: 38px;
  line-height: 1;
  color: var(--ink);
  text-align: center;
  white-space: nowrap;
}

.metric-fig {
  font-family: 'Sacramento', cursive;
  font-size: 76px;
  line-height: 0.95;
  color: var(--ink);
  text-align: center;
  margin: 4px 0 0;
}

/* Smaller unit inside .metric-fig — e.g. "billion" after "1.2" */
.metric-unit {
  font-size: 0.42em;
  font-style: normal;
  vertical-align: baseline;
  line-height: 1;
}

/* Long-number variant — for spelled-out digits like 1,200,000,000 that
   would otherwise blow past the card width. Scales down significantly. */
.metric-fig--long {
  font-size: 42px;
  letter-spacing: 0.01em;
  line-height: 1.05;
}
@media (max-width: 1024px) {
  .metric-fig--long { font-size: 34px; }
}

.metric-tag {
  font-family: 'Rampart One', 'IBM Plex Sans', sans-serif;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--ink-soft);
  text-align: center;
  white-space: nowrap;
  margin-top: 2px;
}

/* Individual card positions and rotations — hand-placed for that
   "scattered on a surface" look. Positions in %, rotations in deg.
   Cards 1 and 6 extend past the surface edges (left/right negative
   offsets); the middle cards are spaced to overlap their neighbors. */

/* Positions + base rotations. --base-rotate is used by all animations
   so effects preserve the card's resting tilt. */
.metric-card--1 { /* sole designer / 8+ — peeks off left edge */
  --base-rotate: -8deg;
  top: 30px;    left: -30px;
  z-index: 3;
}
.metric-card--2 { /* lead designer / 20 */
  --base-rotate: 6deg;
  top: 200px;   left: 12%;
  z-index: 2;
}
.metric-card--3 { /* patents filed / 2 — creeps UP INTO / OVER the header.
                    z-index 60 places it above the topbar (z-index 50). */
  --base-rotate: -4deg;
  top: -15px;   left: 26%;
  z-index: 60;
}
.metric-card--4 { /* efficiency up / 75% NMP */
  --base-rotate: 5deg;
  top: 180px;   left: 40%;
  z-index: 3;
}
.metric-card--5 { /* revenue flow / 1.2 billion Yahoo Gemini */
  --base-rotate: -6deg;
  top: 50px;    left: 55%;
  z-index: 5;
}
.metric-card--6 { /* results faster / 5x iThemba — peeks off right edge */
  --base-rotate: 7deg;
  top: 30px;    right: -30px; left: auto;
  z-index: 2;
}

/* ============================================================
   Random animation library — 8 subtle effects the JS loop cycles
   through. Each keyframe combines --base-rotate with the effect
   so cards preserve their resting tilt when animation ends.
   ============================================================ */

@keyframes anim-jiggle {
  0%, 100% { transform: rotate(var(--base-rotate)); }
  20%      { transform: rotate(calc(var(--base-rotate) + 6deg)); }
  40%      { transform: rotate(calc(var(--base-rotate) - 6deg)); }
  60%      { transform: rotate(calc(var(--base-rotate) + 4deg)); }
  80%      { transform: rotate(calc(var(--base-rotate) - 4deg)); }
}
@keyframes anim-nudge-up {
  0%, 100% { transform: rotate(var(--base-rotate)) translateY(0); }
  50%      { transform: rotate(var(--base-rotate)) translateY(-18px); }
}
@keyframes anim-nudge-down {
  0%, 100% { transform: rotate(var(--base-rotate)) translateY(0); }
  50%      { transform: rotate(var(--base-rotate)) translateY(14px); }
}
@keyframes anim-pop {
  0%, 100% { transform: rotate(var(--base-rotate)) scale(1); }
  50%      { transform: rotate(var(--base-rotate)) scale(1.08); }
}
@keyframes anim-wobble {
  0%, 100% { transform: rotate(var(--base-rotate)) translateX(0); }
  25%      { transform: rotate(var(--base-rotate)) translateX(-10px); }
  75%      { transform: rotate(var(--base-rotate)) translateX(10px); }
}
@keyframes anim-fade {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}
@keyframes anim-swap {
  0%, 100% { transform: rotate(var(--base-rotate)); }
  50%      { transform: rotate(calc(var(--base-rotate) * -1.5)); }
}
@keyframes anim-bounce {
  0%, 100% { transform: rotate(var(--base-rotate)) translateY(0); }
  30%      { transform: rotate(var(--base-rotate)) translateY(-22px); }
  55%      { transform: rotate(var(--base-rotate)) translateY(-6px); }
  80%      { transform: rotate(var(--base-rotate)) translateY(-12px); }
}

/* Trigger classes — JS adds these temporarily, removes after animation.
   !important is used to beat card-specific selectors like the onload
   animation on .metrics-surface.is-loaded .metric-card--4, which has
   higher specificity than .metric-card.anim--foo would otherwise. */
.metric-card.anim--jiggle     { animation: anim-jiggle     0.9s ease !important; }
.metric-card.anim--nudge-up   { animation: anim-nudge-up   0.7s ease !important; }
.metric-card.anim--nudge-down { animation: anim-nudge-down 0.7s ease !important; }
.metric-card.anim--pop        { animation: anim-pop        0.6s ease !important; }
.metric-card.anim--wobble     { animation: anim-wobble     0.8s ease !important; }
.metric-card.anim--fade       { animation: anim-fade       1.0s ease !important; }
.metric-card.anim--swap       { animation: anim-swap       1.2s cubic-bezier(0.4, 0, 0.2, 1) !important; }
.metric-card.anim--bounce     { animation: anim-bounce     1.1s ease !important; }

/* Card 4's "escape down" — callback to its clumsy onload. Tries to escape
   down, then bounces springily back through the resting point and settles. */
@keyframes anim-escape-down {
  0%   { transform: rotate(var(--base-rotate)) translateY(0); }
  40%  { transform: rotate(var(--base-rotate)) translateY(40px); }   /* down */
  70%  { transform: rotate(var(--base-rotate)) translateY(-10px); }  /* springs past rest */
  85%  { transform: rotate(var(--base-rotate)) translateY(3px); }    /* small oscillation */
  100% { transform: rotate(var(--base-rotate)) translateY(0); }      /* settles */
}
.metric-card.anim--escape-down {
  animation: anim-escape-down 1.2s cubic-bezier(0.34, 1.4, 0.5, 1) !important;
}

/* Respect reduced-motion — skip entry animations and random loop */
@media (prefers-reduced-motion: reduce) {
  .metric-card {
    opacity: 1;
    transform: rotate(var(--base-rotate)) translateY(0);
    transition: none;
  }
  .metrics-surface.is-loaded .metric-card--4 { animation: none; }
  .metric-card[class*="anim--"] { animation: none; }
}

/* Small hover lift — a bit of playfulness without full motion.
   z-index: 100 keeps the hovered card above topbar and other cards.
   Card 4 gets a DIFFERENT hover: it tries to escape down (matching
   its onload / loop personality) instead of the standard glow-and-lift. */
@media (hover: hover) {
  .metric-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: default;
  }
  .metric-card:hover {
    transform: rotate(0deg) scale(1.04);
    box-shadow: 0 8px 22px rgba(15, 15, 16, 0.12);
    z-index: 100;
  }
  /* Card 4 hover — slide down (escape attempt) rather than glow up */
  .metric-card--4.is-settled:hover {
    transform: rotate(var(--base-rotate)) translateY(40px) !important;
  }
}

/* Responsive — smaller cards on tablet, hidden on mobile */
@media (max-width: 1024px) {
  .metric-card {
    width: 200px;
    min-height: 200px;
    padding: 22px 20px 16px;
  }
  .metric-eyebrow { font-size: 30px; }
  .metric-fig    { font-size: 60px; }
  .metric-tag    { font-size: 13px; }
  .metrics-surface { height: 320px; }
}
@media (max-width: 720px) {
  .metrics-cards { display: none; }
}

/* ============================================================
   COMPACT METRICS BAR — a slim horizontal ticker of the six
   metrics that docks below the topbar once the reader scrolls
   past the metrics-cards section. Hidden by default; shown by
   toggling .metrics-out-of-view on <body> via a scroll listener.
   ============================================================ */

.metrics-compact {
  position: fixed;
  top: 78px; /* just below the topbar (which is ~77px tall) */
  left: 0;
  right: 0;
  background: rgba(250, 250, 248, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  padding: 10px 40px;
  /* Use opacity + a small transform for the reveal — percentage-based
     translateY was too small to actually clear the bar from view. */
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 40;
  pointer-events: none;
}

body.metrics-out-of-view .metrics-compact {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.metrics-compact-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 8px 24px;
  font-family: 'IBM Plex Sans', 'Inter', sans-serif;
  font-size: 12px;
  color: var(--muted);
}

.mc-item {
  white-space: nowrap;
}

.mc-item b {
  color: var(--accent);
  font-weight: 600;
  margin-right: 4px;
}

@media (max-width: 720px) {
  .metrics-compact { display: none; }
}

/* Alternating layout — respect existing even/odd order swap.
   The even case still swaps the two columns via nth-child rule
   in the base .case-body styles; .case-media-col inherits that. */
.case:nth-child(even) .case-media-col {
  order: 2;
}

/* Full-width CTA footer below the two-column body */
.case-cta-footer {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
}
.case-cta-footer .case-section-label {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 14px;
}

/* Quote in media column — reuse the existing .case-text .case-quote* styles
   (label, quote body, source, cite) but re-scope to work inside .case-media-col
   too. Also override max-width/margin-top since we're in a narrower column. */
.case-media-col .case-quotes {
  margin-top: 40px;
  max-width: 100%;
}
.case-media-col .case-quotes-label {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0;
  font-weight: 700;
  color: var(--muted);
  margin: 0 0 32px;
  line-height: 1.4;
  text-align: center;
  padding-bottom: 20px;
  position: relative;
}
.case-media-col .case-quotes-label::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 1px;
  background: var(--accent);
  opacity: 0.5;
}
.case-media-col .case-quote-text {
  font-family: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 19px;
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 0 0 8px;
  text-align: center;
}
.case-media-col .case-quote-body::before {
  content: "\201C\00A0";
}
.case-media-col .case-quote-body::after {
  content: "\00A0\201D";
}
.case-media-col .case-quote-source {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
  margin: 0;
  text-align: center;
}
.case-media-col a.case-quote-cite {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 11px;
  color: var(--muted);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
  margin-left: 6px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.case-media-col a.case-quote-cite:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}


/* ============================================================
   MOBILE CASE-CARD REORDER (≤1000px)
   Uses display:contents on the .case-media-col and .case-text
   wrappers so their children become direct flex items of .case-body.
   Then flex order interleaves them into the requested mobile
   sequence: name → dek → image → challenge → my work → quotes → CTAs.
   Desktop DOM and layout are untouched.
   ============================================================ */
@media (max-width: 1000px) {
  .case--tmpl .case-body,
  .case--tmpl:nth-child(even) .case-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  /* Center-align project name and tagline on mobile. !important guards
     against any lurking desktop rule I haven't traced. */
  .cases--sidebar .case--tmpl .case-text > h2 {
    text-align: center !important;
    margin: 0 !important;
    width: 100%;
  }
  /* Tagline: center-aligned, pulled up VERY close to name (~3px gap
     from 14px flex gap - 11px negative). Extra bottom margin adds 4px
     back so total name→challenge distance stays roughly the same. */
  .cases--sidebar .case--tmpl .case-text > .case-dek {
    text-align: center !important;
    margin: -11px 0 4px !important;
    width: 100%;
  }

  /* Center-align the "Case study" CTA on mobile. Width 100% forces
     the flex container to span full width so justify-content: center
     visibly centers the single button. */
  .cases--sidebar .case--tmpl .case-cta-row {
    justify-content: center !important;
    width: 100%;
  }

  /* Flatten wrappers so their children participate in .case-body's
     flex flow directly. */
  .case--tmpl .case-media-col,
  .case--tmpl .case-text {
    display: contents;
  }

  /* Mobile sequence via flex order: image → name → tag → sections
     → CTA → quote. CTA sits above quote so the "Case study" affordance
     is next to the reading of Challenge / My Work; quote sits below
     as the final beat before Results. */
  .cases--sidebar .case--tmpl .case-media-col > .case-image { order: 1; }
  .cases--sidebar .case--tmpl .case-text > h2               { order: 2; }
  .cases--sidebar .case--tmpl .case-text > .case-dek        { order: 3; }
  .cases--sidebar .case--tmpl .case-text > .case-section    { order: 4; }
  .cases--sidebar .case--tmpl .case-media-col > .case-cta-row { order: 5; }
  .cases--sidebar .case--tmpl .case-media-col > .case-quotes  { order: 6; }

  /* Disable desktop sticky positioning on image. */
  .case--tmpl .case-image { position: static; }

  /* Account Key's side-by-side quote grid → single column on mobile
     so both quotes stack instead of crushing into narrow columns. */
  .case-quotes--wide.case-quotes--sidebyside {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }

  /* Autism uses .case--stack (block layout, not flex). The negative
     top margin above works with flex gap in normal cases, but in
     block flow it overlaps the h2. Reset to positive margins for
     stack cases so the tagline sits properly below the name. */
  .cases--sidebar .case--tmpl.case--stack .case-text > .case-dek {
    margin: 4px 0 16px !important;
  }

  /* On mobile, hide the identifeye video and show the static image
     instead. The video's mostly-white UI content feels empty on a
     small screen; the still image is more visually anchoring. */
  .case-image--video video { display: none; }
  .case-image--video .case-image--mobile-fallback {
    display: block;
    width: 100%;
    height: auto;
    /* Smaller radius on mobile — 40px looks too rounded proportionally
       on a ~350px-wide viewport. Matches the iPad's visual corner
       proportion at mobile scale. */
    border-radius: 16px;
  }
}

/* Desktop-only: hide the mobile-fallback img (video shows instead).
   Scoped to min-width so it doesn't fight with the mobile show rule. */
@media (min-width: 1001px) {
  .case-image--video .case-image--mobile-fallback { display: none; }
}

/* ============================================================
   COVER-SPECIFIC OVERRIDES (formerly cover.css)
   These override the base styles above where needed.
   ============================================================ */
/* ======= Portfolio Cover Page ======= */
/* Loaded after style.css. Overrides the projects-list body defaults for the cover,
   inherits the footer treatment. */

body.cover-body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Grid on top of cover-hero, fading through the fan cards into paper
   background. Two layered backgrounds: the paper-color linear gradient
   sits on TOP of the grid lines, masking the grid where it's opaque.
   Result: grid visible above and through top ~half of fan, then fades
   to plain paper for the paragraphs / CTA / sea sections below. */
body.cover-body.grid-early-stop .cover-hero {
  background-image:
    linear-gradient(to bottom, transparent 30%, var(--paper) 55%),
    linear-gradient(to right, rgba(14, 94, 111, 0.09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(14, 94, 111, 0.09) 1px, transparent 1px);
  background-size: 100% 100%, 14px 14px, 14px 14px;
}

/* ===== Main ===== */
/* Hero wrapper — holds name + fan + positioning + CTA so we can
   reorder them per breakpoint via flex order. */
.cover-hero {
  display: flex;
  flex-direction: column;
}

/* Name sits alone above the fan on desktop. Combined with the sticky
   topbar height (~78px), total breathing room above the name is
   topbar + this padding. */
.cover-name-block {
  text-align: center;
  padding: 80px 32px 32px;
}

.cover {
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 32px 24px;
}

/* Paper boat mark sits centered above the name — aspect ratio ~1.73:1 (wider than tall).
   Bumped from 52 → 88px so the three water strokes have room to read as intentional
   waves rather than sub-pixel noise. */
.cover-mark {
  color: var(--accent);
  width: 88px;
  margin: 0 auto 14px;
  display: block;
  line-height: 0;
}

.cover-mark svg {
  width: 100%;
  height: auto;
  display: block;
  transform-origin: 50% 70%;
}

.cover-mark:hover svg {
  animation: boat-sway-cover 2.4s ease-in-out infinite;
}

@keyframes boat-sway-cover {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}

/* ===== Positioning statement ===== */
.cover-positioning {
  text-align: center;
}

.cover-name {
  /* Sacramento script — echoes the metrics-band typography and lands
     a friendly, personal "hello" instead of the corporate full name. */
  font-family: 'Sacramento', 'Fraunces', 'Iowan Old Style', cursive;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(56px, 7vw, 78px);
  line-height: 1;
  letter-spacing: 0;
  color: var(--ink);
  margin: 0;
}

/* Small role line under the name, uppercase and letter-spaced. */
.cover-role {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin: 14px 0 0;
}

/* Paragraphs echo the sea-of-words character: same Inter, but with
   positive letter-spacing, airier line-height, and a slightly quieter
   color. Reads as considered prose, not utilitarian body copy. */
.cover-positioning p {
  font-family: 'Inter', sans-serif;
  font-size: clamp(15px, 1.24vw, 17.5px);
  line-height: 1.7;
  color: rgba(44, 44, 48, 0.86);
  margin: 0 auto 22px;
  max-width: 700px;
  letter-spacing: 0.008em;
  font-weight: 300;
}

.cover-positioning p:last-child {
  margin-bottom: 0;
}

/* Threaded emphasis — accent color for the practice through-line words */
.cover-positioning .thread {
  color: var(--accent);
  font-weight: 500;
}

/* ===== CTA (positioned above the fold, right after positioning) ===== */
/* ===== Cover metrics preview =====
   Three tilted cards that echo the metrics band on the projects list
   page — same Sacramento eyebrow + Rampart One tag typography, but
   smaller and inline (no scatter, no animation). Sits between the
   positioning paragraphs and the CTA as a credential bridge. */
.cover-metrics-preview {
  display: grid;
  grid-template-columns: repeat(2, 210px);
  justify-content: center;
  align-items: start;
  gap: 32px 44px;
  margin: 88px auto 64px;
  max-width: 1000px;
  padding: 0 32px;
}
@media (max-width: 560px) {
  .cover-metrics-preview {
    grid-template-columns: 1fr;
    max-width: 260px;
    gap: 20px;
  }
}

/* Soft teal fill — matches the metric-card treatment on the projects
   list page (rgba(168, 212, 220, 0.42) = --accent-soft at ~42% alpha). */
.cover-metric {
  background: rgba(168, 212, 220, 0.42);
  border-radius: 6px;
  padding: 24px 22px 20px;
  width: 210px;
  box-shadow: 0 4px 14px rgba(15, 15, 16, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

/* Flat — uniform. Removed tilts to avoid the postit-note read.
   (The playful scattered/tilted treatment lives on the projects list
   metrics band; the cover stays quieter and more composed.) */

/* Scaled-down typography (metric-* classes are shared with the
   projects list page — smaller here to match the cover's calmer scale) */
.cover-metric .metric-eyebrow { font-size: 26px; }
.cover-metric .metric-fig     { font-size: 52px; }
.cover-metric .metric-tag     { font-size: 11px; }

.cover-cta {
  text-align: center;
  margin: 30px auto 0;
}

/* Primary CTA — solid accent background, white text, matches the
   featured case-links--cta treatment on the projects list page. */
.cover-cta-btn {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  padding: 14px 32px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.cover-cta-btn:hover {
  background: #0a4d5c;
  border-color: #0a4d5c;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(14, 94, 111, 0.22);
}

.cover-cta-note {
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  color: rgba(107, 107, 114, 0.55);
  margin: 20px auto 0;
  max-width: 460px;
  letter-spacing: -0.003em;
  line-height: 1.55;
}

.cover-cta-note a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(107, 107, 114, 0.22);
  text-underline-offset: 2px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.cover-cta-note a:hover {
  color: var(--accent);
  text-decoration-color: rgba(14, 94, 111, 0.5);
}

/* Two-line note on all viewports; add side padding on mobile. */
@media (max-width: 720px) {
  .cover-cta-note {
    padding: 0 16px;
  }
}

/* ===== Direct case-study shortcuts (below CTA) ===== */
.cover-cta-shortcuts {
  margin: 22px auto 0;
  text-align: center;
  max-width: 560px;
}

.cover-cta-eyebrow {
  display: block;
  font-family: 'Sacramento', cursive;
  font-size: 20px;
  color: var(--muted);
  line-height: 1;
  letter-spacing: 0;
  margin-bottom: 8px;
}

.cover-cta-shortlist {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 8px 10px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  letter-spacing: -0.005em;
}

.cover-cta-shortlink {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(14, 94, 111, 0.35);
  padding-bottom: 1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.cover-cta-shortlink:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.cover-cta-shortsep {
  color: var(--muted);
  opacity: 0.6;
  font-size: 12px;
}

@media (max-width: 720px) {
  .cover-cta-shortcuts {
    padding: 0 16px;
  }
  .cover-cta-shortlist {
    font-size: 13.5px;
    gap: 6px 8px;
  }
}

/* ===== Ports of call ===== */
.cover-ports {
  margin: 32px auto 0;
  text-align: center;
  max-width: 1400px;
  padding: 0 32px;
}

.cover-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--accent);
  font-weight: 600;
  margin: 0 0 28px;
  position: relative;
  padding-bottom: 14px;
}

.cover-eyebrow::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 1px;
  background: var(--accent);
  opacity: 0.4;
}

/* When positioned BELOW the fan, use flanking hairlines on both sides of the label
   (magazine section-title treatment: — PORTS OF CALL —). */
.cover-eyebrow--below {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 20px 0 0;
  padding: 0;
  position: static;
}

.cover-eyebrow--below::before,
.cover-eyebrow--below::after {
  content: "";
  position: static;
  width: 32px;
  height: 1px;
  background: var(--accent);
  opacity: 0.4;
  transform: none;
  top: auto;
  bottom: auto;
  left: auto;
}

/* ===== Fan of cards (replaces grid) =====
   Cards read as a spread composition rather than 8 individual thumbnails.
   Each image is under a translucent haze so it registers as impression
   rather than image-to-be-scrutinized. */

.cover-fan {
  position: relative;
  height: 520px;
  margin: 0 auto;
  max-width: 100%;
}

.cover-fan-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 264px;
  height: 376px;
  margin-left: -132px;
  margin-top: -188px;
  background: #fff;
  border: 1px solid rgba(15, 15, 16, 0.06);
  border-radius: 14px;
  box-shadow: 0 5px 16px rgba(15, 15, 16, 0.07), 0 2px 4px rgba(15, 15, 16, 0.05);
  padding: 22px 22px 26px;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  transform-origin: 50% 110%;
  /* Initial (pre-furl) state: all cards stacked at center, invisible.
     Once .cover-fan.is-furled is set (by JS on load), they transition
     out to the per-card position stored in --tx / --ty / --tr. */
  transform: translate(0, 20px) rotate(0deg) scale(0.9);
  opacity: 0;
  transition: transform 0.95s cubic-bezier(0.22, 1.1, 0.4, 1),
              opacity 0.4s ease,
              box-shadow 0.35s ease,
              z-index 0s;
}

/* Fan target positions — stored as CSS custom properties so the
   base transform above can read them and animate to them. */
.cover-fan-card:nth-child(1) { --tx: -520px; --ty: 60px; --tr: -16deg; --hover-x: -520px; z-index: 1; }
.cover-fan-card:nth-child(2) { --tx: -380px; --ty: 28px; --tr: -11deg; --hover-x: -380px; z-index: 2; }
.cover-fan-card:nth-child(3) { --tx: -240px; --ty:  8px; --tr:  -7deg; --hover-x: -240px; z-index: 3; }
.cover-fan-card:nth-child(4) { --tx: -100px; --ty: -4px; --tr:  -3deg; --hover-x: -100px; z-index: 4; }
.cover-fan-card:nth-child(5) { --tx:  100px; --ty: -4px; --tr:   3deg; --hover-x:  100px; z-index: 5; }
.cover-fan-card:nth-child(6) { --tx:  240px; --ty:  8px; --tr:   7deg; --hover-x:  240px; z-index: 4; }
.cover-fan-card:nth-child(7) { --tx:  380px; --ty: 28px; --tr:  11deg; --hover-x:  380px; z-index: 3; }
.cover-fan-card:nth-child(8) { --tx:  520px; --ty: 60px; --tr:  16deg; --hover-x:  520px; z-index: 2; }

/* Furled state — spread out to fanned positions. */
.cover-fan.is-furled .cover-fan-card {
  transform: translate(var(--tx), var(--ty)) rotate(var(--tr));
  opacity: 1;
}

/* Stagger the furl left-to-right, like dealing cards from a stack. */
.cover-fan.is-furled .cover-fan-card:nth-child(1) { transition-delay: 0ms,   0ms,   0s, 0s; }
.cover-fan.is-furled .cover-fan-card:nth-child(2) { transition-delay: 70ms,  70ms,  0s, 0s; }
.cover-fan.is-furled .cover-fan-card:nth-child(3) { transition-delay: 140ms, 140ms, 0s, 0s; }
.cover-fan.is-furled .cover-fan-card:nth-child(4) { transition-delay: 210ms, 210ms, 0s, 0s; }
.cover-fan.is-furled .cover-fan-card:nth-child(5) { transition-delay: 280ms, 280ms, 0s, 0s; }
.cover-fan.is-furled .cover-fan-card:nth-child(6) { transition-delay: 350ms, 350ms, 0s, 0s; }
.cover-fan.is-furled .cover-fan-card:nth-child(7) { transition-delay: 420ms, 420ms, 0s, 0s; }
.cover-fan.is-furled .cover-fan-card:nth-child(8) { transition-delay: 490ms, 490ms, 0s, 0s; }

/* Hover: card straightens, lifts, brightens; comes to front.
   Only active after cards have furled — no delay on hover, only on entry. */
.cover-fan.is-furled .cover-fan-card:hover {
  transform: translate(var(--hover-x, 0), -22px) rotate(0deg) scale(1.06);
  opacity: 1;
  box-shadow: 0 20px 44px rgba(15, 15, 16, 0.16), 0 6px 14px rgba(15, 15, 16, 0.08);
  z-index: 20;
  transition-delay: 0s !important;
}

/* Reduced motion — skip the furl entirely, show cards at their
   final positions with no transition. */
@media (prefers-reduced-motion: reduce) {
  .cover-fan-card {
    transform: translate(var(--tx), var(--ty)) rotate(var(--tr));
    opacity: 1;
    transition: none;
  }
}

/* Card image area — small, at top, with translucent haze overlay */
.cover-fan-image {
  width: 100%;
  height: 216px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--line-soft);
  position: relative;
  flex-shrink: 0;
}

.cover-fan-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.88;
  filter: saturate(0.95);
  transition: opacity 0.35s ease, filter 0.35s ease;
}

.cover-fan-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(250, 250, 248, 0.12) 0%, rgba(250, 250, 248, 0.04) 100%);
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.cover-fan-card:hover .cover-fan-image img {
  opacity: 0.9;
  filter: saturate(1);
}

.cover-fan-card:hover .cover-fan-image::after {
  opacity: 0.4;
}

/* Card text — title + domain, left-aligned */
.cover-fan-text {
  padding-top: 18px;
  text-align: left;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.cover-fan-title {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cover-fan-domain {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

/* Nautical watermark — one small mark per card, bottom-left corner.
   Rotates with the card (physical intuition: mark is drawn on the paper). */
.cover-fan-mark {
  position: absolute;
  bottom: 18px;
  left: 18px;
  width: 30px;
  height: 30px;
  color: var(--accent);
  opacity: 0.32;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.cover-fan-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}

.cover-fan-card:hover .cover-fan-mark {
  opacity: 0.55;
}

/* ===== Sea (wide, subtle, dots-separated) ===== */
.cover-sea-wrap {
  max-width: 1080px;
  margin: 88px auto 0;
  padding: 0 40px 0;
}

.cover-sea {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 2;
  color: rgba(107, 107, 114, 0.62);
  text-align: center;
  letter-spacing: 0.015em;
  margin: 0;
  font-style: normal;
}

.cover-sea .salient {
  color: var(--accent);
  font-weight: 500;
}

/* ===== Thoughts on: Thinking with AI (standalone aside, between sea and footer) ===== */
.cover-thoughts {
  text-align: center;
  padding: 8px 40px 56px;
  max-width: 1080px;
  margin: 0 auto;
}

.cover-thoughts-link {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(14, 94, 111, 0.4);
  padding-bottom: 2px;
  transition: color 0.15s ease, border-color 0.15s ease;
  letter-spacing: -0.003em;
}

.cover-thoughts-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ===== Slim footer override (just the copyright line, no Get in touch block) ===== */
.cover-footer-slim {
  padding-top: 32px;
  padding-bottom: 32px;
}

.cover-footer-slim .footer-bottom {
  border-top: none;
  padding-top: 0;
}

/* ===== Mobile ===== */
@media (max-width: 720px) {
  .cover {
    padding: 28px 20px 20px;
  }

  .cover-name-block {
    padding: 40px 20px 8px;
  }

  /* Stop the grid earlier on mobile — fade to paper just below the h1
     so the grid is a header ornament, not backdrop for the whole page. */
  body.cover-body.grid-early-stop .cover-hero {
    background-image:
      linear-gradient(to bottom, transparent 100px, var(--paper) 180px),
      linear-gradient(to right, rgba(14, 94, 111, 0.09) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(14, 94, 111, 0.09) 1px, transparent 1px);
  }

  /* On mobile, flip the desktop DOM order (name → fan → text → CTA)
     so text (paragraphs) appears just after the name, then fan, then CTA. */
  .cover-hero > .cover-name-block { order: 1; }
  .cover-hero > .cover            { order: 2; }
  .cover-hero > .cover-ports      { order: 3; }
  .cover-hero > .cover-cta        { order: 4; }

  .cover-mark {
    width: 42px;
    margin-bottom: 10px;
  }

  .cover-name {
    margin-bottom: 24px;
  }

  .cover-positioning p {
    font-size: 17px;
    line-height: 1.55;
  }

  .cover-cta {
    margin-top: 28px;
  }

  .cover-cta-btn {
    font-size: 13px;
    padding: 11px 22px;
  }

  .cover-ports {
    margin: 48px 0 0;
  }

  .cover-ports {
    padding: 0 20px;
  }

  /* Mobile fallback: cards stack as a small 2-column grid, no rotation.
     Same card design, but positioned static. */
  .cover-fan {
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .cover-fan-card {
    position: static;
    transform: none !important;
    opacity: 1 !important;
    transition: transform 0.2s ease, opacity 0.2s ease !important;
    margin: 0;
    width: 100%;
    height: auto;
    z-index: auto !important;
  }

  .cover-fan-card:hover {
    transform: translateY(-3px) !important;
  }

  .cover-fan-image {
    height: 90px;
  }
  /* NMP hero shows a laptop — anchor from top so the monitor doesn't
     get cropped off in the shorter mobile image area. */
  .cover-fan-card[href*="mutation"] .cover-fan-image img {
    object-position: top;
  }
  /* Nautical watermarks read as noise at mobile card sizes — hide. */
  .cover-fan-mark {
    display: none;
  }

  /* Allow project titles to wrap on mobile (desktop uses nowrap +
     ellipsis, which truncates longer names like "Mutation Profiler"
     in narrow 2-col mobile cells). Also smaller title font. */
  .cover-fan-title {
    font-size: 14px;
    white-space: normal;
    text-overflow: clip;
    overflow: visible;
    line-height: 1.2;
  }
  .cover-fan-domain {
    font-size: 9.5px;
  }
  /* Tighten card padding on mobile so text has more breathing room */
  .cover-fan-card {
    padding: 12px 12px 14px;
  }

  .cover-sea-wrap {
    padding: 0 20px 40px;
    margin-top: 32px;
  }

  .cover-sea {
    font-size: 11.5px;
    line-height: 1.9;
    text-align: left;
  }

  .cover-thoughts {
    padding: 4px 20px 40px;
  }

  .cover-thoughts-link {
    font-size: 12px;
  }
}