/* =============================================================
   STYLE.CSS
   Base styles only: custom properties, reset, typography.
   Section-specific styles are added as each section is built.
   ============================================================= */


/* -------------------------------------------------------------
   1. CUSTOM PROPERTIES
   ------------------------------------------------------------- */
:root {

  /* --- Colors --- */

  /* Core palette (from Figma) */
  --color-onyx:            #131313;   /* Darkest — body text on light, icon fills */
  --color-page-bg:         #1c1c1c;   /* Page background */
  --color-black-eel:       #42403a;   /* Dark neutral — footer bg, secondary button */
  --color-coyote-brown:    #676356;   /* Mid neutral — button bar, dividers */
  --color-silk:            #c0b9a0;   /* Warm tan — intro card background */
  --color-spring-wood:     #f7f7f0;   /* Off-white — text on dark surfaces */
  --color-pickled-bluewood:#2e4d61;   /* Blue — primary CTA, "Open to work" card */

  /* Semantic aliases */
  --color-bg:              var(--color-page-bg);
  --color-text:            var(--color-spring-wood);
  --color-text-dark:       var(--color-onyx);
  --color-accent:          var(--color-pickled-bluewood);
  --color-surface:         var(--color-silk);
  --color-surface-dark:    var(--color-black-eel);


  /* --- Typography --- */

  --font-heading: 'PT Sans', sans-serif;   /* Name, display text */
  --font-body:    'Bitter', Georgia, serif; /* Body copy, UI labels, buttons */


  /* --- Font sizes (mobile-first, rem = 16px base) --- */

  --text-xs:   0.75rem;    /* 12px — footer, tags */
  --text-sm:   0.875rem;   /* 14px — secondary labels */
  --text-base: 1rem;       /* 16px — body copy, buttons */
  --text-lg:   1.3125rem;  /* 21px — "Open to work" card */
  --text-hero: 3rem;       /* 48px mobile → 3.5rem (56px) desktop */


  /* --- Line heights --- */

  --leading-tight:  1.2;
  --leading-normal: 1.5;   /* 24px at 16px base */
  --leading-body:   1.5;


  /* --- Font weights --- */

  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;


  /* --- Spacing (8px grid) --- */

  --space-1: 0.5rem;    /*  8px */
  --space-2: 1rem;      /* 16px */
  --space-3: 1.5rem;    /* 24px */
  --space-4: 2rem;      /* 32px */
  --space-6: 3rem;      /* 48px */
  --space-8: 4rem;      /* 64px */


  /* --- Border radius --- */

  --radius-sm: 0.25rem;   /*  4px — buttons */
  --radius-md: 0.5rem;    /*  8px — mini-card, footer */
  --radius-lg: 1rem;      /* 16px — intro card */


  /* --- Shadows --- */

  --shadow-card:    0 4px 12px rgba(103, 99, 86, 0.25);  /* Screenshot dropshadow */
  --shadow-tooltip: 0 4px  8px rgba(0, 0, 0, 0.08);
  --shadow-inset-bar: inset 0px 8px 8px -4px rgba(53, 51, 46, 0.25);


  /* --- Transitions --- */

  --transition-base: 150ms ease;
}

/* Larger hero text on wider screens */
@media (min-width: 768px) {
  :root {
    --text-hero: 3.5rem; /* 56px — matches Figma */
  }
}


/* -------------------------------------------------------------
   2. RESET & BOX MODEL
   ------------------------------------------------------------- */

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

html {
  /* Smooth scrolling for anchor links */
  scroll-behavior: smooth;
  /* Prevent font size inflation on mobile */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  min-height: 100vh;
  /* Prevent horizontal overflow */
  overflow-x: hidden;
}

/* Portfolio page uses the slightly darker onyx background */
body.page-portfolio-body {
  background-color: var(--color-onyx);
}

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

ul,
ol {
  list-style: none;
}

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

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


/* -------------------------------------------------------------
   3. BASE TYPOGRAPHY
   ------------------------------------------------------------- */

/* Display / name — PT Sans Italic */
.font-display {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
}

/* Sub-heading label — PT Sans Regular */
.font-label {
  font-family: var(--font-heading);
  font-style: normal;
  font-weight: var(--weight-regular);
}

/* Body copy — Bitter Regular */
.font-body {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
}

/* Emphasized inline text — Bitter SemiBold */
strong,
b {
  font-weight: var(--weight-semibold);
}

/* Base heading defaults (overridden per-section) */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: var(--leading-tight);
  font-weight: var(--weight-regular);
}

p {
  line-height: var(--leading-body);
}


/* =============================================================
   4. LANDING SECTION
   ============================================================= */

/* -------------------------------------------------------------
   4a. Section shell
   ------------------------------------------------------------- */

.section-landing {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}


/* -------------------------------------------------------------
   4b. Background image
   ------------------------------------------------------------- */

.landing-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.landing-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* -------------------------------------------------------------
   4c. Main content area
   Flex-grows to fill space above the footer, centres the
   intro-card-wrapper and pushes it right on large screens.
   ------------------------------------------------------------- */

.landing-main {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-3) var(--space-4);
}

/* On desktop: content column starts at 40% from the left edge of the viewport. */
@media (min-width: 1024px) {
  .landing-main {
    justify-content: flex-start;
    padding-left: 40%;
    padding-right: var(--space-3);
  }
}


/* -------------------------------------------------------------
   4d. Intro card wrapper
   Relative container used to anchor the "Open to work" badge.
   On mobile it stacks badge + card vertically; on desktop the
   badge is pulled out to the left via absolute positioning.
   ------------------------------------------------------------- */

.intro-card-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  width: 100%;
  max-width: 520px;
}

@media (min-width: 1024px) {
  .intro-card-wrapper {
    display: block;       /* turn off flex so intro-card fills the width */
    position: relative;   /* anchors the absolutely positioned badge */
    max-width: 775px;
  }
}


/* -------------------------------------------------------------
   4e. "Open to work" mini-card
   ------------------------------------------------------------- */

.open-to-work {
  background-color: rgba(46, 77, 97, 0.70); /* Pickled Bluewood at 70% */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  display: flex;
  align-items: center;
  justify-content: flex-end;

  /* Mobile: compact horizontal pill */
  width: auto;
}

.open-to-work span {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--text-lg);   /* 21px */
  line-height: var(--leading-normal);
  color: var(--color-spring-wood);
  text-align: right;
  white-space: nowrap;
}

/* Desktop: fixed-size card anchored to the left of the intro card */
@media (min-width: 1024px) {
  .open-to-work {
    position: absolute;
    /* 24px gap between right edge of badge and left edge of intro card */
    right: calc(100% + var(--space-3));
    /* 68px below the card top — matches Figma y-offset (459 - 391) */
    top: 68px;
    width: 136px;
    height: 124px;
    padding: var(--space-3);
  }
}


/* -------------------------------------------------------------
   4f. Intro card
   ------------------------------------------------------------- */

.intro-card {
  width: 100%;
  background-color: var(--color-silk);
  border-radius: var(--radius-lg);
  overflow: hidden;          /* clips inner sections to rounded corners */
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}


/* --- Name area --- */

.intro-card__name {
  padding: var(--space-3) var(--space-4) 0;   /* top 24, sides 32, no bottom */
}

.intro-card__greeting {
  font-family: var(--font-heading);
  font-size: var(--text-base);    /* 16px */
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-black-eel);
}

.intro-card__title {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: var(--weight-regular);
  font-size: var(--text-hero);    /* 48px → 56px */
  line-height: var(--leading-normal);
  color: var(--color-onyx);
}


/* --- Bio area --- */

.intro-card__bio {
  background-color: var(--color-silk);
  padding: var(--space-3) var(--space-4);     /* 24px top/bottom, 32px sides */
  flex: 1;
}

.intro-card__bio p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  color: var(--color-onyx);
}

/* Inline bold highlights — Bitter SemiBold (600) */
.intro-card__bio strong {
  font-weight: var(--weight-semibold);
}


/* --- CTA button bar --- */

.intro-card__actions {
  background-color: var(--color-coyote-brown);
  padding: var(--space-3) var(--space-4);     /* 24px top/bottom, 32px sides */
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Inset shadow on the top edge separates bar from bio area */
  box-shadow: var(--shadow-inset-bar);
}


/* -------------------------------------------------------------
   4g. Buttons
   ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);                        /* 8px icon gap */
  padding: var(--space-1) var(--space-2);     /* 8px vertical, 16px horizontal */
  border-radius: var(--radius-sm);            /* 4px */
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-spring-wood);
  cursor: pointer;
  transition: opacity var(--transition-base),
              transform var(--transition-base);
}

.btn:hover {
  opacity: 0.85;
}

.btn:active {
  transform: scale(0.97);
}

/* Primary — Pickled Bluewood, Bitter Medium */
.btn--primary {
  background-color: var(--color-pickled-bluewood);
  font-weight: var(--weight-medium);
}

/* Secondary — Black Eel, Bitter Regular */
.btn--secondary {
  background-color: var(--color-black-eel);
  font-weight: var(--weight-regular);
}

.btn__icon {
  display: block;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}


/* -------------------------------------------------------------
   4h. Landing footer / page nav
   A rounded pill aligned below the intro card, matching its
   width and horizontal position (mirroring the Figma layout).
   ------------------------------------------------------------- */

.landing-footer {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  padding: 0 var(--space-3) var(--space-3);
}

@media (min-width: 1024px) {
  .landing-footer {
    justify-content: flex-start;
    padding-left: 40%;
    padding-right: var(--space-3);
    padding-bottom: var(--space-4);
  }
}

.landing-footer__bar {
  width: 100%;
  max-width: 520px;
  background-color: var(--color-black-eel);
  border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-2);     /* 8px vertical, 16px horizontal */
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-body);
  font-size: var(--text-xs);                 /* 12px */
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-spring-wood);
}

/* Desktop: match the 775px intro card width exactly */
@media (min-width: 1024px) {
  .landing-footer__bar {
    max-width: 775px;
  }
}

.landing-footer__nav {
  display: flex;
  align-items: center;
  gap: 0;
}

.landing-footer__nav a {
  transition: opacity var(--transition-base);
}

.landing-footer__nav a:hover {
  opacity: 0.7;
}


/* =============================================================
   5. PORTFOLIO SECTION
   ============================================================= */

/* -------------------------------------------------------------
   5a. Section shell
   Same structure as landing; slightly darker base background.
   ------------------------------------------------------------- */

.section-portfolio {
  position: relative;
  display: flex;
  flex-direction: column;
}


/* -------------------------------------------------------------
   5b. Background image
   ------------------------------------------------------------- */

.portfolio-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.portfolio-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* -------------------------------------------------------------
   5c. Main content wrapper
   Top-aligned (not vertically centred like landing).
   Same right-push on desktop.
   ------------------------------------------------------------- */

.portfolio-main {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  justify-content: center;
  padding: var(--space-4) var(--space-3) 0;   /* 32px top, gutter sides */
}

/* Offset the padding so the case cards (not the skills callout) start at 40%.
   Skills callout is 216px wide + 24px gap = 240px, so the content column
   starts at calc(40% - 240px) leaving the card left-edge at exactly 40%. */
@media (min-width: 1024px) {
  .portfolio-main {
    justify-content: flex-start;
    padding-left: calc(40% - 216px - var(--space-3));
    padding-right: var(--space-3);
  }
}


/* -------------------------------------------------------------
   5d. Content column
   Vertical stack of header + case rows + footer.
   Max-width mirrors the landing card group (skills + gap + card).
   ------------------------------------------------------------- */

.portfolio-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);          /* 24px between every child */
  width: 100%;
  max-width: 935px;             /* 216 skills + 24 gap + 696 card */
  padding-bottom: var(--space-4);
}


/* -------------------------------------------------------------
   5e. Breadcrumb header
   Silk pill aligned to the case-card column (offset past skills).
   ------------------------------------------------------------- */

.portfolio-header {
  width: 100%;
}

@media (min-width: 1024px) {
  .portfolio-header {
    /* Nudge right to align with the case cards, not the skills badges */
    padding-left: calc(216px + var(--space-3));
  }
}

.portfolio-header__inner {
  background-color: var(--color-silk);
  border-radius: var(--radius-md);
  padding: var(--space-2);
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* "Home" — underlined italic PT Sans 18px */
.breadcrumb__home {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.125rem;          /* 18px */
  line-height: var(--leading-normal);
  color: var(--color-onyx);
  text-decoration: underline;
  text-decoration-skip-ink: none;
  transition: opacity var(--transition-base);
}

.breadcrumb__home:hover {
  opacity: 0.65;
}

/* Chevron arrow — left-facing SVG rotated to point right */
.breadcrumb__separator {
  display: block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transform: rotate(180deg);
}

/* "Portfolio" — larger italic PT Sans 28px */
.breadcrumb__current {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.75rem;           /* 28px */
  line-height: 1;
  color: var(--color-onyx);
}


/* -------------------------------------------------------------
   5f. Case study rows
   Each row: skills callout on the left + case card on the right.
   Mirrors the landing "open-to-work + intro-card" pattern.
   ------------------------------------------------------------- */

.case-row {
  display: flex;
  flex-direction: column;       /* stacked on mobile */
  align-items: flex-start;
  gap: var(--space-2);
  width: 100%;
}

@media (min-width: 1024px) {
  .case-row {
    flex-direction: row;
    gap: var(--space-3);        /* 24px gap matches Figma */
    align-items: flex-start;
  }
}


/* -------------------------------------------------------------
   5g. Skills callout
   Same blue blur card as "Open to work", scaled up for a list.
   ------------------------------------------------------------- */

.skills-callout {
  background-color: rgba(46, 77, 97, 0.70);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: var(--radius-md);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 216px;
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .skills-callout {
    /* Push down so the badge sits alongside the hero image, not the title */
    margin-top: 52px;
  }
}

/* "Key skills" label — PT Sans Italic 21px, right-aligned */
.skills-callout__label {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--text-lg);    /* 21px */
  line-height: 24px;
  color: var(--color-spring-wood);
  text-align: right;
  width: 100%;
}

/* Skills list — Bitter Medium 14px, left-aligned bullet list */
.skills-callout__list {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);    /* 14px */
  line-height: 24px;
  color: var(--color-spring-wood);
  list-style: disc;
  padding-left: 1.25em;
  text-align: left;
}

.skills-callout__list li {
  margin-bottom: 1.5px;
}

.skills-callout__list li:last-child {
  margin-bottom: 0;
}


/* -------------------------------------------------------------
   5h. Case study card
   Silk rounded card: title → hero image → Coyote Brown blurb.
   ------------------------------------------------------------- */

.case-card {
  width: 100%;
  background-color: var(--color-silk);
  border-radius: var(--radius-md);    /* 8px — tighter than intro card's 16px */
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .case-card {
    flex: 1;
    max-width: 696px;
  }
}

/* Card title */
.case-card__title {
  padding: 16px 24px 8px;
}

.case-card__title h2 {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: var(--weight-regular);
  font-size: 1.5rem;            /* 24px */
  line-height: 36px;
  color: var(--color-onyx);
}

/* Hero image area */
.case-card__hero {
  padding: 24px;
}

.case-card__hero img {
  display: block;
  width: 100%;
  height: 364px;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

/* Blurb + CTA bar */
.case-card__blurb {
  background-color: var(--color-coyote-brown);
  padding: var(--space-3) var(--space-4);   /* 24px vertical, 32px horizontal */
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-end;                    /* "Read more" button sits right */
  box-shadow: var(--shadow-inset-bar);
}

.case-card__blurb p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  color: var(--color-spring-wood);
  width: 100%;
}


/* -------------------------------------------------------------
   5i. Portfolio footer offset
   The landing-footer classes handle all the visual styling;
   this modifier aligns the footer pill to the case-card column.
   ------------------------------------------------------------- */

@media (min-width: 1024px) {
  .portfolio-footer-offset {
    padding-left: calc(216px + var(--space-3));
    /* Cancel the 8% right-pad from .landing-footer — the portfolio-content
       max-width already handles right alignment, so the bar fills the
       remaining 695px and right-aligns flush with the case cards. */
    padding-right: 0;
  }

  .portfolio-footer-offset .landing-footer__bar {
    max-width: 696px;   /* match case-card width (vs 775px for intro card) */
  }
}


/* -------------------------------------------------------------
   5j. Case study prev/next navigation
   Sits between the detail card and the footer on each case study.
   Previous always anchors left, Next always anchors right via
   margin-left: auto — works for one-button and two-button states.
   ------------------------------------------------------------- */

.case-study-nav {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--space-4) 0 var(--space-2);
}

@media (min-width: 1024px) {
  .case-study-nav {
    /* Align under the detail card column, not the skills callout */
    margin-left: calc(216px + var(--space-3));
    max-width: 696px;
  }
}

.case-study-nav__next {
  margin-left: auto;    /* pushes Next to the right regardless of whether Prev exists */
}


/* =============================================================
   6. DETAIL PAGE
   ============================================================= */

/* -------------------------------------------------------------
   6a. Detail card
   A single scrolling card with alternating media / body sections.
   Mirrors the case-card shell but sections stack vertically.
   ------------------------------------------------------------- */

.detail-card {
  width: 100%;
  background-color: var(--color-silk);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .detail-card {
    flex: 1;
    max-width: 696px;
  }
}


/* -------------------------------------------------------------
   6b. Card header
   Italic PT Sans title — same pattern as .case-card__title.
   ------------------------------------------------------------- */

.detail-card__header {
  padding: 16px 24px 8px;
}

.detail-card__header h2 {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: var(--weight-regular);
  font-size: 1.5rem;            /* 24px */
  line-height: 36px;
  color: var(--color-onyx);
}


/* -------------------------------------------------------------
   6c. Media sections
   Silk background containing one or more screenshots.
   ------------------------------------------------------------- */

.detail-card__media {
  padding: 24px;
  background-color: var(--color-silk);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.detail-card__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  cursor: zoom-in;
  transition: opacity var(--transition-base);
}

.detail-card__media img:hover {
  opacity: 0.9;
}


/* -------------------------------------------------------------
   6d. Body text sections
   Coyote Brown bands with off-white body copy — same treatment
   as .case-card__blurb but without a CTA button.
   ------------------------------------------------------------- */

.detail-card__body {
  background-color: var(--color-coyote-brown);
  padding: var(--space-3) var(--space-4);   /* 24px vertical, 32px horizontal */
  box-shadow: var(--shadow-inset-bar);
}

.detail-card__body p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  color: var(--color-spring-wood);
}


/* -------------------------------------------------------------
   6e. 3-level breadcrumb
   On the detail page, breadcrumb has an extra middle "Portfolio"
   link. Allow wrapping on narrow viewports.
   ------------------------------------------------------------- */

.breadcrumb {
  flex-wrap: wrap;
}


/* -------------------------------------------------------------
   6f. Metadata strip (silk area beneath the card title)
   Role / Timeline / Product displayed as labelled inline items.
   ------------------------------------------------------------- */

.detail-card__meta {
  padding: 0 24px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 32px;
  border-bottom: 1px solid rgba(103, 99, 86, 0.25);
}

.detail-card__meta-item {
  font-family: var(--font-body);
  font-size: var(--text-sm);    /* 14px */
  color: var(--color-black-eel);
  line-height: var(--leading-normal);
}

.detail-card__meta-item strong {
  font-weight: var(--weight-semibold);
  color: var(--color-onyx);
  margin-right: 4px;
}


/* -------------------------------------------------------------
   6g. Section headings (h3) and subsection headings (h4)
   Used inside .detail-card__body for richer case study content.
   ------------------------------------------------------------- */

.detail-card__body h3 {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: var(--weight-regular);
  font-size: 1.5rem;            /* 24px */
  line-height: var(--leading-tight);
  color: var(--color-spring-wood);
  margin-bottom: var(--space-2);
}

/* Tighter gap when an h4 directly follows an h3 */
.detail-card__body h3 + h4 {
  margin-top: var(--space-1);
}

.detail-card__body h4 {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: 1.125rem;          /* 18px */
  color: var(--color-spring-wood);
  margin-top: var(--space-3);
  margin-bottom: var(--space-1);
}

/* Breathing room between paragraphs inside a body section */
.detail-card__body p + p {
  margin-top: var(--space-2);
}


/* -------------------------------------------------------------
   6h. Image placeholder callout
   Shown where a real screenshot will be inserted. Sits inside
   a .detail-card__media wrapper so the silk bg frames it.
   Replace with <img> once the asset is ready.
   ------------------------------------------------------------- */

.detail-card__placeholder {
  width: 100%;
  min-height: 200px;
  border-radius: var(--radius-md);
  border: 2px dashed rgba(103, 99, 86, 0.45);
  background-color: rgba(19, 19, 19, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: var(--space-4);
  text-align: center;
}

/* Filename (italic, medium weight) */
.detail-card__placeholder-filename {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  font-style: italic;
  color: var(--color-black-eel);
}

/* Short description of what the image shows */
.detail-card__placeholder-desc {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-coyote-brown);
}


/* =============================================================
   8. LIGHTBOX
   Full-screen overlay for viewing detail-card images at full size.
   Injected into the DOM by script.js on detail pages.
   ============================================================= */

/* Overlay — hidden until .is-open is added */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Dark semi-transparent backdrop */
.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(19, 19, 19, 0.92);
}

/* Container that centres and scales the image */
.lightbox__container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: min(90vw, 1400px);
  max-height: 90vh;
  transform: scale(0.96);
  transition: transform 0.2s ease;
}

.lightbox.is-open .lightbox__container {
  transform: scale(1);
}

/* The enlarged image */
.lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 90vh;
  width: auto;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}

/* Close button — sits above the top-right corner of the image */
.lightbox__close {
  position: absolute;
  top: -2.5rem;
  right: 0;
  background: none;
  border: none;
  color: var(--color-spring-wood);
  font-family: var(--font-body);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  opacity: 0.7;
  transition: opacity var(--transition-base);
  border-radius: var(--radius-sm);
}

.lightbox__close:hover,
.lightbox__close:focus-visible {
  opacity: 1;
  outline: 2px solid var(--color-spring-wood);
  outline-offset: 2px;
}


/* -------------------------------------------------------------
   6i. Outcomes stats grid
   2-column grid of large numbers + labels inside a body section.
   ------------------------------------------------------------- */

.detail-card__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-2) 0 var(--space-3);
}

.detail-card__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.detail-card__stat-number {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: 2rem;              /* 32px */
  line-height: 1;
  color: var(--color-spring-wood);
}

.detail-card__stat-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-spring-wood);
  opacity: 0.75;
}