/* =============================================================
   Kyle Hamel — portfolio styles
   Single stylesheet, vanilla CSS, organized into sections below.
   ============================================================= */


/* =============================================================
   1. Design tokens
   Change a value here and it updates everywhere it's used.
   ============================================================= */
:root {
  /* Colors — black & gold theme */
  --color-bg: #0A0A0A;
  --color-text: #F4F3EF;
  --color-muted: #9E9E99;
  --color-border: #262624;
  --color-surface: #161614;      /* cards, inputs, dividers */
  --color-placeholder: #1C1C1A;  /* image voids */
  --color-accent: #F3C84A;       /* warm true gold */
  --color-accent-rgb: 243, 200, 74; /* same, for rgba() glows */
  --color-accent-hover: #FAD86A; /* brighter warm gold */
  --color-on-accent: #0A0A0A;

  /* Type */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Layout widths */
  --width-prose: 720px;
  --width-content: 960px;
  --width-wide: 1200px;

  /* Spacing scale */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 8rem;
}


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

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

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.0625rem; /* 17px */
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

a {
  color: var(--color-accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

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

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


/* =============================================================
   3. Typography
   ============================================================= */
h1, h2, h3, h4 {
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--color-text);
}

h1 {
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  line-height: 1.05;
}

h2 {
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  line-height: 1.1;
}

h3 {
  font-size: 1.375rem;
  line-height: 1.25;
}

h4 {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

p {
  margin: 0 0 1em;
}

p:last-child {
  margin-bottom: 0;
}

.muted {
  color: var(--color-muted);
}


/* =============================================================
   4. Layout containers
   ============================================================= */
.container {
  width: 100%;
  max-width: var(--width-content);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.container--wide {
  max-width: var(--width-wide);
}

.container--prose {
  max-width: var(--width-prose);
}


/* =============================================================
   5. Header & navigation
   ============================================================= */
.site-header {
  padding: 1.75rem 0;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.site-nav__brand {
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

.site-nav__brand:hover {
  text-decoration: none;
  color: var(--color-accent);
}

.site-nav__links {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.9375rem;
}

.site-nav__links a {
  position: relative; /* anchors the current-page top indicator */
  color: var(--color-text);
  font-weight: 500;
  padding: 0.4rem 0.85rem;
  border: 1px solid transparent; /* keeps active/non-active same size */
  border-radius: 999px;
  transition: background-color 0.2s ease, color 0.2s ease,
              border-color 0.2s ease;
}

.site-nav__links a:hover {
  color: var(--color-text);
  background-color: var(--color-surface);
  text-decoration: none;
}

/* Persistent "you are here" indicator (ref-style): a filled gold pill
   with brighter-gold text and a glowing gold bar on the top edge.
   Uses the shared gold tokens so it stays in sync with the site. */
.site-nav__links a[aria-current="page"] {
  color: var(--color-accent);
  background-color: rgba(var(--color-accent-rgb), 0.16);
  border-color: transparent;
}

.site-nav__links a[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: 32px;
  height: 4px;
  border-radius: 999px;
  background-color: var(--color-accent);
  transform: translateX(-50%);
  box-shadow: 0 0 6px rgba(var(--color-accent-rgb), 0.9),
              0 0 14px rgba(var(--color-accent-rgb), 0.55);
  animation: nav-indicator-glow 2.4s ease-in-out infinite;
}

@keyframes nav-indicator-glow {
  0%, 100% {
    box-shadow: 0 0 5px rgba(var(--color-accent-rgb), 0.65),
                0 0 10px rgba(var(--color-accent-rgb), 0.35);
  }
  50% {
    box-shadow: 0 0 9px rgba(var(--color-accent-rgb), 1),
                0 0 20px rgba(var(--color-accent-rgb), 0.7);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav__links a[aria-current="page"]::before {
    animation: none;
  }
}

.site-nav__links a[aria-current="page"]:hover {
  color: var(--color-accent);
  background-color: rgba(var(--color-accent-rgb), 0.24);
  border-color: transparent;
}


/* =============================================================
   6. Hero (home)
   ============================================================= */
.hero {
  padding: 2rem 0 2.5rem;
  text-align: center;
}

.hero__lead {
  font-size: clamp(1.625rem, 3.2vw, 2.25rem);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
  max-width: 760px;
  margin: 0 auto;
}

.hero__lead-role {
  display: block;
  margin-top: 0.2em;
  font-size: 0.56em;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--color-accent);
}

.hero__tagline {
  font-size: clamp(0.95rem, 3.4vw, 1.1875rem);
  line-height: 1.4;
  font-weight: 500;
  color: var(--color-text);
  max-width: 620px;
  margin: 0.9rem auto 0;
  white-space: nowrap;
}

.hero__intro {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--color-muted);
  max-width: 600px;
  margin: 1.5rem auto 0;
}

.hero__intro a {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

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


/* =============================================================
   7. Work grid (home)
   ============================================================= */
.work {
  padding-bottom: 8rem;
  scroll-margin-top: 2rem;
}

.work__heading {
  margin-bottom: 0;
}

.work__group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-bottom: 3rem;
  scroll-margin-top: 2rem;
}

.work__group-head--nda {
  margin-top: 6rem;
  margin-bottom: 1rem;
}

.work__jump {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-accent);
  white-space: nowrap;
}

.work__jump:hover,
.work__jump:focus-visible {
  text-decoration: underline;
}

.work__group-note {
  max-width: 60ch;
  margin-bottom: 3rem;
  color: var(--color-muted);
}

.work__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4rem 2.5rem;
}

.work-card {
  position: relative;
  display: block;
  color: inherit;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 1.25rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.work-card:hover,
.work-card:focus-visible {
  text-decoration: none;
  box-shadow: 0 8px 30px rgba(var(--color-accent-rgb), 0.12);
}

/* The "snake" — a gold arc that travels the card border. Built as a
   rotating conic-gradient masked to a thin ring. No SVG path, so there
   is no start/end seam and no corner break; it follows the card's own
   border-radius. One continuous gold line with a small chasing gap. */
@property --work-card-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.work-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 2.5px; /* ring thickness */
  background: conic-gradient(from var(--work-card-angle),
              var(--color-accent) 0deg,
              var(--color-accent) 126deg,   /* ~35% gold line */
              transparent 150deg,
              transparent 360deg);          /* large chasing gap */
  -webkit-mask:
              linear-gradient(#000 0 0) content-box,
              linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;          /* keep only the ring */
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.work-card:hover::before,
.work-card:focus-visible::before {
  opacity: 1;
  animation: work-card-trace 2.8s linear infinite;
}

@keyframes work-card-trace {
  to { --work-card-angle: 360deg; }
}

/* Reduced motion: no travelling arc — fall back to the original
   solid gold border + glow so hover is still clearly indicated. */
@media (prefers-reduced-motion: reduce) {
  .work-card:hover::before,
  .work-card:focus-visible::before {
    animation: none;
    opacity: 0;
  }

  .work-card:hover,
  .work-card:focus-visible {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 1px var(--color-accent),
                0 8px 30px rgba(var(--color-accent-rgb), 0.12);
  }
}

.work-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 1.25rem;
}

/* The visual layer. When real images are added, set
   background-image on this element (inline or per-card class). */
/* Per-study card image: each study sets its own background-image via a
   .work-card--<slug> modifier so the card previews what's inside. */
.work-card--overwatch .work-card__image {
  background-image: url('../images/overwatch/1.png');
}

.work-card--careeasy .work-card__image {
  background-image: url('../images/careeasy/preview.png');
}

.work-card--prepped .work-card__image {
  background-image: url('../images/prepped/preview.png');
}

.work-card--sorted .work-card__image {
  background-image: url('../images/sorted/original-hero.png');
}

.work-card__image {
  position: absolute;
  inset: 0;
  background-color: var(--color-placeholder);
  background-size: cover;
  background-position: center;
  transition: filter 0.4s ease, opacity 0.4s ease, transform 0.6s ease;
}

.work-card:hover .work-card__image,
.work-card:focus-visible .work-card__image {
  filter: blur(6px);
  opacity: 0.35;
  transform: scale(1.04);
}

/* Title + description, hidden until hover/focus, laid over the image. */
.work-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 1.5rem;
  background: linear-gradient(180deg,
              rgba(10, 10, 10, 0.15),
              rgba(10, 10, 10, 0.8));
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.work-card:hover .work-card__overlay,
.work-card:focus-visible .work-card__overlay {
  opacity: 1;
  transform: none;
}

.work-card__title {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.work-card__desc {
  color: var(--color-muted);
  margin: 0;
  max-width: 38ch;
}

.work-card__tags {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.tag {
  display: inline-block;
  padding: 0.25rem 0.6875rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 0.75rem;
  color: var(--color-muted);
  letter-spacing: 0.02em;
}

.tag--nda {
  font-weight: 600;
}

/* -------- Locked (NDA) cards --------
   No image by design. The media panel becomes a text plate: the title
   and short description show plainly (not a hover reveal), with a lock
   badge in the corner. Footprint matches image cards (inherited 4/3
   aspect-ratio) so the grid stays aligned. The gold hover-ring
   (.work-card::before) still applies, so hover/focus feedback is intact.
   Interim href is contact.html; at deploy it points to /nda/<slug>
   behind the shared-password Cloudflare Worker. */
.work-card--locked .work-card__media {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 1.5rem;
  background-color: var(--color-placeholder);
}

.work-card__lock {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.work-card__lock svg {
  width: 0.95em;
  height: 0.95em;
}

.work-card__locked-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* "Coming soon" card: a teaser, not a link. Suppress the hover glow and
   the travelling gold border so it does not signal that it is clickable. */
.work-card--coming-soon:hover,
.work-card--coming-soon:focus-visible {
  box-shadow: none;
  border-color: var(--color-border);
}

.work-card--coming-soon:hover::before,
.work-card--coming-soon:focus-visible::before {
  opacity: 0;
  animation: none;
}

/* No description on this card, so the bottom-aligned title sits lower than
   the others. Nudge it up by ~one description line so it lines up. */
.work-card--coming-soon .work-card__title {
  margin-bottom: 2rem;
}


/* =============================================================
   8. Page headers (inner pages)
   ============================================================= */
.page-header {
  padding: 5rem 0 3rem;
}

.page-header h1 {
  font-size: clamp(1.625rem, 3.2vw, 2.25rem);
  line-height: 1.2;
  margin-bottom: 1rem;
}

.page-header__lead {
  font-size: 1.25rem;
  color: var(--color-muted);
  max-width: 50ch;
}


/* =============================================================
   9. About page
   ============================================================= */
.about-intro {
  padding-bottom: 5rem;
}

.about-intro__photo {
  width: 180px;
  height: 180px;
  background-color: var(--color-placeholder);
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin-bottom: 2.5rem;
}

.about-intro__bio p {
  font-size: 1.125rem;
  margin-bottom: 1.25em;
  max-width: 72ch;
}

.methods {
  padding: 5rem 0;
  border-top: 1px solid var(--color-border);
}

.methods h2 {
  margin-bottom: 1rem;
}

.methods__intro {
  max-width: 72ch;
  margin-bottom: 3rem;
  font-size: 1.125rem;
  color: var(--color-muted);
}

.methods__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
}

.methods__group h3 {
  margin-bottom: 0.75rem;
}

.methods__group p {
  color: var(--color-muted);
}

.how-i-work {
  padding: 5rem 0;
  border-top: 1px solid var(--color-border);
}

.how-i-work h2 {
  margin-bottom: 1.5rem;
}

.how-i-work p {
  font-size: 1.125rem;
  margin-bottom: 1.25em;
  max-width: 72ch;
}


/* =============================================================
   10. Contact page
   ============================================================= */
.contact-list {
  margin: 3rem 0 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 3rem;
  row-gap: 1.5rem;
  align-items: baseline;
}

.contact-list dt {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--color-muted);
  margin: 0;
}

.contact-list dd {
  margin: 0;
  font-size: 1.25rem;
}


/* =============================================================
   10b. Contact form
   ============================================================= */
.contact-section {
  padding-bottom: 5rem;
  /* On-load intro, one stagger step after the page-header lead (0.40s)
     so the form rises in just behind the header text. */
  animation: header-rise 0.6s ease 0.54s both;
}

.contact-form {
  margin: 2rem 0 3rem;
  display: grid;
  gap: 1.5rem;
  max-width: 560px;
}

.contact-form__field {
  display: grid;
  gap: 0.5rem;
}

.contact-form__field label {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--color-muted);
}

.contact-form__field input,
.contact-form__field textarea {
  font: inherit;
  font-size: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background-color: var(--color-surface);
  color: var(--color-text);
  width: 100%;
  transition: border-color 0.15s ease;
}

.contact-form__field input:focus,
.contact-form__field textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.2);
}

.contact-form__field textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.5;
}

.contact-form__submit {
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  padding: 0.875rem 1.75rem;
  background-color: var(--color-accent);
  color: var(--color-on-accent);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  justify-self: start;
  transition: background-color 0.15s ease;
}

.contact-form__submit:hover {
  background-color: var(--color-accent-hover);
}

.contact-form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.contact-form__status {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--color-muted);
  min-height: 1.5em;
}

.contact-form__status--success {
  color: var(--color-accent);
  font-weight: 500;
}

.contact-alt {
  font-size: 0.9375rem;
  color: var(--color-muted);
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
}

.contact-alt a {
  color: var(--color-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

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


/* =============================================================
   11. Case study layout
   ============================================================= */

/* Per-study accent theming. Default keeps the site's dark band; each
   study opts into a theme class on the .case-study article (e.g.
   .theme-blue) to recolor its banners. Banner colors are chosen so
   light banner text clears WCAG AA (4.5:1). */
.case-study {
  --study-accent: var(--color-accent);
  --study-accent-rgb: var(--color-accent-rgb);
  --study-banner-bg: var(--color-surface);
  --study-banner-text: var(--color-text);
  --study-hero-bg: #403AE0;       /* bright band behind the hero image */
}

.case-study.theme-blue {
  --study-accent: #5B8DEF;        /* blue accent on dark ≈ 5.8:1 (AA) */
  --study-accent-rgb: 91, 141, 239;
  --study-banner-bg: #1E40AF;     /* deeper band; white text ≈ 8.7:1 (AAA) */
  --study-banner-text: #FFFFFF;
  --study-hero-bg: #403AE0;       /* indigo hero band */
}

.case-study.theme-purple {
  --study-accent: #9F7AEA;        /* deeper violet accent on dark ≈ 6.0:1 (AA+) */
  --study-accent-rgb: 159, 122, 234;
  --study-banner-bg: #3B1480;     /* deep band; white text ≈ 13:1 (AAA) */
  --study-banner-text: #FFFFFF;
  --study-hero-bg: #4C1D95;       /* deep purple hero band; white text ≈ 11:1 (AAA) */
}

/* Orange — kept clearly orange (red-shifted) so it is NOT mistaken for the
   site's amber gold (#F3C84A). Bright orange accent on dark; deep burnt-orange
   banner + hero bands keep white text legible (orange is a darker hue than
   yellow, so this works the same way as blue/purple). */
.case-study.theme-orange {
  --study-accent: #FB923C;        /* bright orange on dark ≈ 7.7:1 (AAA), hue ≈ 27° */
  --study-accent-rgb: 251, 146, 60;
  --study-banner-bg: #9C4E12;     /* deep orange (same ~26° hue as accent); white ≈ 6.0:1 (AAA) */
  --study-banner-text: #FFFFFF;
  --study-hero-bg: #A65211;       /* deep orange hero band (~26° hue); white ≈ 5.4:1 (AA) */
}

/* Microsoft — a shared theme for the Microsoft studies. A bright AZURE (more
   cyan than Sorted's periwinkle theme-blue) so it reads as "Microsoft" while
   staying distinct; deep azure banner/hero keep white text legible. */
.case-study.theme-microsoft {
  --study-accent: #4CA5FF;        /* bright azure on dark ≈ 6.9:1 (AAA) */
  --study-accent-rgb: 76, 165, 255;
  --study-banner-bg: #004578;     /* deep azure band; white text ≈ 9.8:1 (AAA) */
  --study-banner-text: #FFFFFF;
  --study-hero-bg: #0067B8;       /* Microsoft-blue hero band; white text ≈ 5.7:1 (AA) */
}

/* Microsoft logo palette — green square. A variant of the Microsoft theme that
   keeps the shared structural rules (.theme-microsoft) but swaps the blue for
   the logo's green, so the Microsoft studies don't all read as the same azure.
   Used on the Enterprise AI User Trust study. */
.case-study.theme-microsoft--green {
  --study-accent: #8DC63F;        /* bright lime-green on dark ≈ 10:1 (AAA) */
  --study-accent-rgb: 141, 198, 63;
  --study-banner-bg: #2E5A0C;     /* deep green band; white text ≈ 7.3:1 (AAA) */
  --study-banner-text: #FFFFFF;
  --study-hero-bg: #3F6B12;       /* green hero band; white text ≈ 5.8:1 (AA) */
}

/* The azure tint reads faint at the shared 0.07, so this study's alternating
   bands are bumped a little for readability. */
.theme-microsoft .case-study__section--tint {
  background-color: rgba(var(--study-accent-rgb), 0.10);
}

/* Microsoft studies tend to have long, descriptive titles, so the hero title is
   dialed down from the default (clamp 2.75–4.5rem) so it does not dominate. */
.theme-microsoft .case-study__header--hero h1 {
  font-size: clamp(2rem, 4vw, 2.85rem);
  /* Balance the long title across two even lines so it never drops a single
     hanging word onto a third line. */
  text-wrap: balance;
}

/* The header's accent bar follows the study theme. */
.case-study .header-bar {
  background-color: var(--study-accent);
  box-shadow: 0 0 10px rgba(var(--study-accent-rgb), 0.5);
}

.case-study__header {
  padding: 5rem 0 3rem;
}

/* Blog/article header (no --hero): the page title is small here because the
   prominent heading lives in the body. ~50% of the case-study hero title. */
.case-study__header:not(.case-study__header--hero) h1 {
  font-size: clamp(1.375rem, 3vw, 2.25rem);
}

/* Hero zone: centered title block on top, then subtitle (left) + hero image
   (right) side by side. Solid band in the study theme color; plain black
   resumes at the first section. NOTE: when a real hero image is wired in, give
   the image a matching background so it blends seamlessly with this band. */
.case-study__header--hero {
  padding: 2.5rem 0 3rem;
  background-color: var(--study-hero-bg);
}

/* Hero image already sits on a matching blue background — drop the
   universal framing so it doesn't show an outline. */
.case-study__hero-figure img {
  border: none;
  box-shadow: none;
}

/* Hero sits on a bright blue bg, so the bar / eyebrow / subtitle (which
   were colored for the dark theme) need lighter values to stay legible. */
.case-study__header--hero .header-bar {
  background-color: #FFFFFF;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.45);
}

.case-study__header--hero .case-study__eyebrow {
  color: #FFFFFF;
}

.case-study__header--hero .case-study__summary {
  color: rgba(255, 255, 255, 0.9);
}

/* Centered title block (bar, eyebrow, title) sits on top, full-width centered. */
.case-study__hero-head {
  max-width: 760px;
  margin: 0 auto 2.5rem;
  text-align: center;
}

.case-study__hero-head .header-bar {
  margin-left: auto;
  margin-right: auto;
  transform-origin: center;
}

/* Below the title: subtitle (left) + hero image (right), vertically centered.
   Stacks to one column on narrow screens. */
.case-study__hero-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 2.5rem 3rem;
}

.case-study__hero-row .case-study__summary {
  margin: 0;
  /* Cap the measure so the subtitle wraps into a tight block; pull it to the
     right of its column so it sits next to the image (not stranded at the far
     left), and balance the lines so no single word is left alone. */
  max-width: 22ch;
  justify-self: end;
  text-wrap: balance;
}

/* CareEasy's hero image is a tall portrait phone, so a wide horizontal subtitle
   reads awkwardly beside it — tighten the box into a narrower, taller block. */
.theme-orange .case-study__hero-row .case-study__summary {
  max-width: 16ch;
}

/* Hero image fills its column (good for landscape laptop/site shots). The
   --compact modifier caps it small for portrait phone mockups. */
.case-study__hero-figure {
  margin: 0;
}

.case-study__hero-figure--compact {
  max-width: 240px;
  justify-self: start;
}

/* When the hero image is small (a compact portrait or logo), the default
   1fr/1fr columns strand the subtitle and image near the middle with big empty
   sides. Size the columns to their content and center the pair so the subtitle
   sits right beside the picture. */
.case-study__hero-row:has(.case-study__hero-figure--compact) {
  grid-template-columns: auto auto;
  justify-content: center;
  column-gap: 2.5rem;
}

@media (max-width: 760px) {
  .case-study__hero-row {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.case-study__eyebrow {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--study-accent, var(--color-accent));
  margin-bottom: 1.25rem;
}

.case-study__summary {
  font-size: 1.375rem;
  line-height: 1.4;
  color: var(--color-muted);
  max-width: 60ch;
  margin-top: 1.5rem;
}

.case-study__hero-placeholder {
  /* Matches the Sorted hero image ratio (≈5/3) so the hero section is the
     same height across studies, whether a real image is wired in yet or not. */
  aspect-ratio: 5 / 3;
  /* A distinct placeholder box (not the band color) so it reads as a clear
     "image goes here" slot rather than an empty stretch of the hero band.
     Swap the placeholder div for a real <img> to fill the slot. */
  background-color: var(--color-placeholder);
  border-radius: 10px;
}

.case-study__section {
  padding: 3rem 0;
}

/* Alternating sections get a faint full-bleed wash of the study color so
   the page reads as soft color bands instead of flat black. It's a
   background tint, so text contrast is unaffected. */
.case-study__section--tint {
  background-color: rgba(var(--study-accent-rgb), 0.07);
}

.case-study__section h2 {
  position: relative;
  margin-bottom: 1.5rem;
}

/* Blog/article prose: an h2 that follows body copy (i.e. not the first child of
   its container) needs room above it. Case-study section headings are the first
   child of their container, so they're unaffected. */
.case-study__section h2:not(:first-child) {
  margin-top: 2.5rem;
}

/* Blog/article: alternating sections get a lighter-grey band so the page isn't
   a wall of black. (The case studies use a colored tint for this; the blog has
   no theme color, so it uses grey.) */
.case-study__section--alt {
  background-color: rgba(255, 255, 255, 0.12);
}

/* Short accent rule under each section heading (echoes the header bar). */
.case-study__section h2::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin-top: 0.75rem;
  border-radius: 999px;
  background-color: var(--study-accent, var(--color-accent));
}

.case-study__section p {
  font-size: 1.125rem;
  margin-bottom: 1.25em;
}

.case-study__section h3:not(.case-study__lead) {
  margin: 2rem 0 1rem;
  /* Subheadings carry the study accent (purple on Prepped, blue on Sorted),
     keeping the accent threaded down the page like the lead and banners. */
  color: var(--study-accent, var(--color-accent));
}

.case-study__section ul {
  margin: 0 0 1.25em;
  padding-left: 1.25rem;
  font-size: 1.125rem;
}

.case-study__section li {
  margin-bottom: 0.5rem;
}

.case-study__section li::marker {
  color: var(--study-accent, var(--color-accent));
}

.case-study__task-flow {
  font-style: italic;
}

/* Issue-count list: italic, with traffic-light severity colors (line +
   bullet). Tuned for legibility on the dark bg (all clear WCAG AA). */
.case-study__issues {
  font-style: italic;
}

.case-study__issues li::marker {
  color: inherit;
}

.case-study__issues .is-critical { color: #FF6B6B; }
.case-study__issues .is-major    { color: #FF922B; }
.case-study__issues .is-minor    { color: #E3CF6B; }

/* Pull quote — a highlighted participant/stakeholder quote that breaks the
   body flow. Reusable across studies; themed with the study accent. A faintly
   tinted panel with an accent left bar, large italic text, and an accent
   attribution, so the voice stands out without leaving the page's color family. */
.case-study__quote {
  max-width: 820px;
  /* A quote belongs to the section it sits in, not on its own. Give it about
     two lines of space above (3.5rem) to separate it from the preceding text,
     and keep normal space below. margin: top right/left bottom. */
  margin: 3.5rem auto 2.5rem;
  padding: 1.75rem 2.25rem 1.75rem 2.5rem;
  border-left: 4px solid var(--study-accent, var(--color-accent));
  border-radius: 0 10px 10px 0;
  background: rgba(var(--study-accent-rgb, var(--color-accent-rgb)), 0.06);
}

.case-study__quote blockquote {
  margin: 0;
  font-size: 1.375rem;
  line-height: 1.6;
  font-style: italic;
  color: var(--color-text);
}

.case-study__quote blockquote p {
  margin: 0;
}

.case-study__quote figcaption {
  margin-top: 1.25rem;
  font-size: 0.95rem;
  font-weight: 600;
  font-style: normal;
  color: var(--study-accent, var(--color-accent));
}

/* Recommendation callout — the "so what do we do about it" that follows a
   finding. Kept visually distinct from a pull quote: small body text led by a
   filled accent label pill, on a faint accent wash. */
.case-study__rec {
  margin: 1rem 0 0;
  padding: 0.85rem 1.1rem;
  border-radius: 8px;
  background: rgba(var(--study-accent-rgb, var(--color-accent-rgb)), 0.08);
  font-size: 1rem;
  line-height: 1.6;
}

.case-study__rec-label {
  display: inline-block;
  margin-right: 0.6rem;
  padding: 0.14rem 0.55rem;
  border-radius: 4px;
  background: var(--study-accent, var(--color-accent));
  color: #0B0B0B;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  vertical-align: middle;
}

/* Image banner — wide showcase strip, contained to the wide content
   width rather than edge-to-edge so light-background screenshots don't
   wash across the entire dark page. */
.case-study__image-banner {
  max-width: var(--width-wide);
  margin: 4rem auto;
  padding: 0 1.5rem;
}

/* Full-bleed variant: the banner spans the whole viewport edge-to-edge.
   Used for wide montage images that are meant to read as a full-width band.
   The contained framing (rounded corners + border + halo) is dropped so the
   image truly reaches both edges. Note: light-background montages will show
   a light band across the dark page — that's intended for this variant. */
.case-study .case-study__image-banner--full {
  max-width: none;
  margin: 4rem 0;
  padding: 0;
}

.case-study__image-banner--full img {
  border-radius: 0;
  border: none;
  box-shadow: none;
}

.case-study__image-banner-placeholder {
  aspect-ratio: 16 / 5;
  max-height: 460px;
  background-color: var(--color-placeholder);
}

/* Frame real images so light-background screenshots (from the original
   white-themed site) sit cleanly on the dark theme: rounded corners +
   hairline border crisp the edges, soft accent halo ties them to the
   study color. */
.case-study img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 8px 40px rgba(var(--study-accent-rgb), 0.12);
}

.case-study__lead {
  font-size: 1.875rem;
  line-height: 1.3;
  font-weight: 600;
  color: var(--study-accent, var(--color-text));
  margin: 0 0 1.5rem;
  /* Balance multi-line leads so they don't break as a long first line with a
     lone word stranded on the last line. Single-line leads are unaffected. */
  text-wrap: balance;
}

.case-study__figure {
  margin: 2.5rem 0;
}

.case-study__figure-placeholder {
  aspect-ratio: 16 / 9;
  background-color: var(--color-placeholder);
}

.case-study__figure img {
  width: 100%;
}

.case-study__figure figcaption {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: var(--color-muted);
  text-align: center;
}

/* Captions split into separate sentences (each in its own <p>). */
.case-study__figure figcaption p {
  font-size: inherit;
  margin: 0 0 0.5em;
}

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

/* "Text-box" caption: fixed-width block centered under the image, with
   text justified so every line fills both edges (like a Word text box).
   Use one <p> per sentence so the gap between sentences is controllable
   via the p margin below. */
.case-study__figure figcaption.case-study__figcaption--box {
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
  text-align: justify;
  hyphens: auto;
}

.case-study__figure figcaption.case-study__figcaption--box p {
  margin-bottom: 1.25em;
}

.case-study__figure figcaption.case-study__figcaption--box p:last-child {
  margin-bottom: 0;
}

.case-study__split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;  /* text slightly wider for readability */
  gap: 3rem;
  align-items: center;
}

/* Image-left variant: image on the left, slightly-wider text on the right. */
.case-study__split--reverse {
  grid-template-columns: 1fr 1.1fr;
}

/* Image-emphasis variant: image column gets more weight, used for splits
   where the image needs to read bigger than the text block (Next Steps,
   Third Sprint, Second Sprint). Approach uses the default. */
.case-study__split--image-lead {
  grid-template-columns: 1.1fr 1.2fr;
}

.case-study__split--reverse.case-study__split--image-lead {
  grid-template-columns: 1.2fr 1.1fr;
}

/* Case studies use a wider content max so the two-column splits give text
   and image enough horizontal room. Above 1500px viewport this expands
   splits and image banners; below it's constrained by viewport as usual. */
.case-study .container--wide {
  max-width: 1500px;
}

.case-study__image-banner {
  max-width: 1500px;
}

.case-study__split .case-study__figure {
  margin: 0;
}

/* Keep the text column's first heading aligned with the top of the image
   (matters when a column leads with a spaced heading like an h3). */
.case-study__split-text > :first-child {
  margin-top: 0;
}

/* Split-column headings are short ("Key Takeaways", "Challenges to
   Consider") — keep them on a single line instead of wrapping in the
   narrower text column. */
.case-study__split-text h2 {
  white-space: nowrap;
}

.section-divider {
  background-color: var(--study-banner-bg, var(--color-surface));
  color: var(--study-banner-text, var(--color-text));
  padding: 3.5rem 0;
  margin: 4rem 0;
  text-align: center;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.section-divider h2,
.section-divider h3 {
  color: var(--study-banner-text, var(--color-text));
}

.section-divider p {
  color: var(--color-muted);
  font-size: 1.125rem;
  margin-bottom: 0;
}

.section-divider__eyebrow {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--color-accent);
  margin-bottom: 1rem;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.image-grid__item {
  aspect-ratio: 4 / 3;
  background-color: var(--color-placeholder);
}

.outcomes {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.outcomes li {
  border-top: 2px solid var(--study-accent, var(--color-accent));
  padding-top: 1rem;
}

.outcomes strong {
  display: block;
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 0.25rem;
  color: var(--study-accent, var(--color-accent));
}

.outcomes span {
  color: var(--color-muted);
  font-size: 0.9375rem;
}

/* Outcomes tally — count-based achievements ("4 Usability Tests"), where
   the label carries the meaning, so number and label are more balanced
   and centered (vs the stat-style .outcomes callouts). */
.case-study__tally {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  text-align: center;
}

.case-study__tally strong {
  display: block;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--study-accent, var(--color-accent));
  margin-bottom: 0.5rem;
}

.case-study__tally span {
  font-size: 1.0625rem;
  color: var(--color-text);
}

/* Summary blurb that follows the number tally needs clear separation from
   the stats above it. */
.case-study__tally + p {
  margin-top: 2.5rem;
}


/* =============================================================
   12. Footer
   ============================================================= */
.site-footer {
  padding: 3rem 0;
  border-top: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: 0.9375rem;
  margin-top: 4rem;
}

.site-footer__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

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

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


/* =============================================================
   13. Scroll reveal
   The .reveal class is added by JS (progressive enhancement), so
   without JS or with reduced motion, content shows normally.
   ============================================================= */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Gentle stagger for the work grid cards */
.work__grid .reveal:nth-child(2) { transition-delay: 0.06s; }
.work__grid .reveal:nth-child(3) { transition-delay: 0.12s; }
.work__grid .reveal:nth-child(4) { transition-delay: 0.18s; }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .work-card__image,
  .work-card__overlay {
    transition: none;
  }
}


/* =============================================================
   14. Header intro animation
   Runs once on load: a gold accent bar scales in, then the header
   text (eyebrow → title → lead) rises and fades in, staggered.
   ============================================================= */
.header-bar {
  width: 56px;
  height: 3px;
  border-radius: 999px;
  background-color: var(--color-accent);
  box-shadow: 0 0 10px rgba(var(--color-accent-rgb), 0.5);
  margin-bottom: 1.5rem;
  transform-origin: left center;
  animation: header-bar-in 0.6s ease both;
}

/* Hero is centred, so centre and grow the bar from the middle. */
.hero .header-bar {
  margin-left: auto;
  margin-right: auto;
  transform-origin: center;
}

.hero__lead,
.hero__tagline,
.hero__intro,
.page-header h1,
.page-header__lead,
.case-study__eyebrow,
.case-study__header h1,
.case-study__summary,
.case-study__hero-figure {
  animation: header-rise 0.6s ease both;
}

/* Stagger: eyebrow → title → lead */
.case-study__eyebrow {
  animation-delay: 0.12s;
}

.hero__lead,
.page-header h1,
.case-study__header h1 {
  animation-delay: 0.26s;
}

.hero__tagline {
  animation-delay: 0.33s;
}

.hero__intro,
.page-header__lead,
.case-study__summary {
  animation-delay: 0.40s;
}

.case-study__hero-figure {
  animation-delay: 0.54s;
}

@keyframes header-bar-in {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

@keyframes header-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .header-bar,
  .hero__lead,
  .hero__tagline,
  .hero__intro,
  .page-header h1,
  .page-header__lead,
  .case-study__eyebrow,
  .case-study__header h1,
  .case-study__summary,
  .case-study__hero-figure,
  .contact-section {
    animation: none;
  }

  .header-bar {
    transform: scaleX(1);
    opacity: 1;
  }
}


/* =============================================================
   15. Responsive — collapses to single column on small screens
   ============================================================= */
@media (max-width: 760px) {
  .site-header {
    padding: 1.25rem 0;
  }

  .site-nav {
    flex-wrap: wrap;
    gap: 1rem;
  }

  .site-nav__links {
    gap: 1.25rem;
    font-size: 0.9375rem;
  }

  .hero {
    padding: 3rem 0 5rem;
  }

  .work {
    padding-bottom: 5rem;
  }

  .work__grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .methods__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .image-grid {
    grid-template-columns: 1fr;
  }

  .case-study__split {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .outcomes {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .case-study__tally {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  /* Nav has no room for the full-width desktop row on phones: let the brand
     and the link group wrap onto separate lines, and tighten the pill spacing
     so the four links fit within the viewport instead of overflowing right. */
  .site-nav {
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
  }

  .site-nav__links {
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  .site-nav__links a {
    padding: 0.4rem 0.7rem;
  }

  .section-divider {
    padding: 4rem 0;
    margin: 3rem 0;
  }

  .contact-list {
    grid-template-columns: 1fr;
    row-gap: 0.5rem;
  }

  .contact-list dd {
    margin-bottom: 1rem;
  }
}