/* =============================================================
   Portfolio — case-study index composed on NC tokens
   Loaded after styles.css; reuses :root design tokens.
   Namespace: .pf-
   ============================================================= */

/* overflow-x: clip contains the atmosphere blobs and the mobile key
   carousel, which both bleed past the viewport edge on purpose.
   clip (not hidden) so it stays visible on the y axis. */
.pf { --pf-max: var(--container-inner); position: relative; overflow-x: clip; }

/* =============================================================
   ATMOSPHERE — paper canvas + soft glows, per
   docs/ui-guidelines.md → "Soft radial glows (cyan/mint, lime) as
   background atmosphere — not content." Same oklch palette as
   .hero__glow on the home page so this reads as the same canvas.
   Sits behind the hero and the engagement key, which is exactly
   where the page was reading as empty paper.
   ============================================================= */
.pf-atmos {
  position: absolute; inset: 0 0 auto; z-index: 0;
  height: clamp(560px, 80vh, 940px);
  pointer-events: none;
}
.pf-atmos span { position: absolute; display: block; border-radius: 50%; }

/* mint → cyan, dominant, upper right. The one that breathes. */
.pf-atmos__mint {
  top: -40%; right: -30%;
  width: 84vw; height: 84vw;
  background: radial-gradient(50% 50% at 50% 50%,
    oklch(0.9 0.13 152 / 0.5),
    oklch(0.9 0.1 190 / 0.26) 46%,
    transparent 72%);
  animation: nc-hue 9s ease-in-out infinite alternate;
}
/* lime, lower left — lands under the engagement key */
.pf-atmos__lime {
  bottom: -24%; left: -18%;
  width: 58vw; height: 58vw;
  background: radial-gradient(50% 50% at 50% 50%,
    oklch(0.92 0.16 120 / 0.26),
    transparent 66%);
}
/* magenta, a quiet wash behind the title */
.pf-atmos__magenta {
  top: -22%; left: 44%;
  width: 42vw; height: 42vw;
  background: radial-gradient(50% 50% at 50% 50%,
    oklch(0.74 0.18 342 / 0.16),
    oklch(0.78 0.13 350 / 0.08) 46%,
    transparent 64%);
}

/* content rides above the wash */
.pf > .page-hero,
.pf > .pf-logo-strip,
.pf > .pf-section,
.pf > .section { position: relative; z-index: 1; }

.pf-section { padding: var(--space-7) var(--gutter) 0; }
/* #case-studies is where the case study pages' "All case studies" button
   lands, so it clears the fixed header like every other anchor target. */
#case-studies { scroll-margin-top: calc(var(--header-height) + var(--space-3)); }
.pf > .page-hero {
  padding-bottom: var(--space-5);
}
.pf-logo-strip { padding: 0 0 var(--space-5); }
.pf-logo-strip > .cta {
  max-width: var(--container);
  margin: var(--space-7) auto 0;
  padding: 0 var(--gutter);
}

/* ---------- Reveal on scroll (progressive enhancement) ---------- */
html.nc-reveal .pf [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
html.nc-reveal .pf [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Section head — same rhythm as the home page ----------
   kicker + .section__title, centred by the wrapper so the shared
   type scale in styles.css stays the single source of truth. */
.pf-head {
  text-align: center;
  margin-bottom: var(--space-6);
}
.pf-head--key { margin-bottom: var(--space-5); }
.pf-head--sub { margin-top: var(--space-8); }
.pf-head .section__title { margin: var(--space-3) 0 0; }
.pf-head__lead {
  font-size: var(--fs-lead); line-height: 1.55;
  color: var(--color-ink-60);
  max-width: 640px;
  margin: var(--space-3) auto 0;
}

/* =============================================================
   CASE ROWS — one card per case study, media + copy
   ============================================================= */
.pf-list {
  display: flex; flex-direction: column;
  gap: var(--space-5);
}

.pf-case {
  position: relative; overflow: clip;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: clamp(1.75rem, 3vw, 3rem);
  background: var(--color-surface-light);
  border: 1px solid var(--border-ink);
  border-radius: var(--radius-xl);
  color: var(--color-ink);
  scroll-margin-top: calc(var(--header-height) + var(--space-3));
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}
a.pf-case:hover {
  transform: translateY(-3px);
  border-color: var(--border-ink-strong);
  box-shadow: 0 30px 60px -40px rgba(10, 10, 8, 0.4);
}
.pf-case--flip .pf-case__media { order: -1; }

/* soft accent wash per card. Set --pf-accent-2 as well for a two-tone
   wash (e.g. the FitCook red → orange gradient from its case page). */
.pf-case__glow {
  position: absolute; z-index: 0; pointer-events: none;
  top: -40%; right: -12%;
  width: 46%; aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(50% 50% at 64% 36%,
      color-mix(in srgb, var(--pf-accent-2, var(--pf-accent, var(--color-secondary-green))) 30%, transparent),
      transparent 68%),
    radial-gradient(50% 50% at 36% 64%,
      color-mix(in srgb, var(--pf-accent, var(--color-secondary-green)) 34%, transparent),
      transparent 70%);
  filter: blur(24px);
}
.pf-case--flip .pf-case__glow { right: auto; left: -12%; }

.pf-case__body,
.pf-case__media { position: relative; z-index: 1; }

/* ---------- Copy side ----------
   Two distinct tiers, deliberately not the same shape:
   1. .pf-signal  — what WE did. Accent dot keyed to the engagement
      key above, sits above the title. This is the classification.
   2. .pf-case__domain — what the PROJECT is. Quiet mono meta row
      under the body copy. Never a pill, so it can't be misread
      as another engagement label. */
.pf-case__signals {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-1);
}
.pf-store {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
}
.pf-store img { display: block; width: 22px; height: 22px; }
.pf-signal {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-family: var(--font-title); font-size: var(--fs-eyebrow);
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-ink);
  background: var(--glass);
  border: 1px solid var(--border-ink);
  padding: 0.34rem var(--space-2) 0.34rem 0.6rem;
  border-radius: var(--radius-pill);
}
.pf-signal::before {
  content: ""; flex: 0 0 auto;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--pf-signal, var(--color-secondary-green));
}

.pf-case__domain {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center;
  gap: 0.5em;
  list-style: none;
  width: 100%;
  margin: var(--space-3) 0 0; padding: 0;
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  text-align: center;
  color: var(--color-ink-35);
}
.pf-case__domain li + li::before {
  content: "·"; margin-right: 0.5em; color: var(--color-ink-25);
}
.pf-case--flip .pf-case__domain {
  justify-content: center;
  text-align: center;
}

/* one step below .section__title so the section head stays dominant */
.pf-case__title {
  font-family: var(--font-title); font-weight: 700;
  font-size: clamp(1.5rem, 2.3vw, 2rem);
  line-height: 1.1; letter-spacing: -0.024em;
  margin: var(--space-3) 0 0;
}
.pf-case__body-text {
  font-size: var(--fs-md); line-height: 1.6;
  color: var(--color-ink-60);
  max-width: 46ch;
  margin: var(--space-3) 0 0;
}

.pf-case__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.8vw, 1.5rem);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-ink);
}
.pf-metric { display: flex; flex-direction: column; gap: 0.25rem; }
.pf-metric__value {
  font-family: var(--font-title); font-weight: 700;
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  line-height: 1; letter-spacing: -0.03em;
  color: var(--color-ink);
}
.pf-metric__label {
  order: -1;
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-ink-35);
}

.pf-case__more {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-title); font-size: var(--fs-sm); font-weight: 600;
  color: var(--color-ink);
  margin-top: var(--space-4);
}
.pf-case__more span { transition: transform 0.3s var(--ease); }
a.pf-case:hover .pf-case__more span { transform: translateX(4px); }

/* ---------- Media side ---------- */
.pf-case__media {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: clamp(240px, 26vw, 360px);
}

/* phone mock */
.pf-phone {
  width: clamp(170px, 17vw, 224px);
  padding: 9px;
  background: var(--color-ink);
  border-radius: 38px;
  box-shadow: 0 40px 70px -34px rgba(10, 10, 8, 0.55);
}
.pf-phone__screen {
  position: relative; overflow: hidden;
  border-radius: 30px;
  background: var(--color-ink-elevated);
}
.pf-phone__screen img { width: 100%; height: auto; display: block; }

/* browser mock */
.pf-browser {
  width: min(100%, 460px);
  overflow: hidden;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: 0 40px 70px -40px rgba(10, 10, 8, 0.36);
}
.pf-browser__bar {
  display: flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 14px;
  background: var(--color-ink);
}
.pf-browser__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
}
.pf-browser__url {
  margin-left: 10px;
  font-family: var(--font-mono); font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.45);
}
.pf-browser__shot { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.pf-browser__shot--none {
  display: flex; align-items: center; justify-content: center;
  background:
    linear-gradient(135deg, rgba(10, 10, 8, 0.04), transparent 60%),
    var(--color-surface-muted);
}
.pf-browser__note {
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-ink-35);
  text-align: center; padding: 0 var(--space-4); margin: 0;
}
.pf-browser__shot img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top left;
  display: block;
}
/* The Drouin screenshot has its content centered with even margins on both
   sides, so a left-aligned crop leaves a lopsided gutter. Center it instead. */
#drouin-ti360 .pf-browser__shot img { object-position: top center; }
#emma .pf-browser__shot img { object-position: top center; }

/* =============================================================
   ENGAGEMENT KEY — a quiet horizontal strip, not a panel.
   docs/ui-guidelines.md → "Quiet strip: glass panel, md radius,
   hairline border — one restrained row for supporting facts."
   It classifies the work below; it must not compete with it, so
   it stays ~1/3 the height of a project card and recedes.
   ============================================================= */
/* Five ink cards, deliberately short. Ink so the key reads as a
   distinct register from the paper project cards below it, and so
   the accent dots — the thing that carries meaning — actually sing.
   docs/ui-guidelines.md → "Ink cards: ink surface, light border
   rgba(255,255,255,0.08)"; accents as signals, not decoration. */
.pf-key-group { margin: 0 0 var(--space-7); }
.pf-key {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin: 0;
  text-align: left;
}
.pf-key__item {
  position: relative; overflow: clip;
  flex: 0 0 auto;
  padding: 0.625rem 1rem;
  background: var(--color-ink);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-pill);
  transition: border-color 0.3s var(--ease);
}
/* …and the accent bleeding down into the card behind the label, so the
   ink isn't a flat rectangle. Kept low-opacity: atmosphere, not fill. */
.pf-key__item::before {
  content: ""; position: absolute; z-index: 0;
  top: -58%; left: -18%;
  width: 90%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%,
    color-mix(in srgb, var(--pf-key-accent, var(--color-secondary-green)) 30%, transparent),
    transparent 70%);
  filter: blur(16px);
}
.pf-key__term { position: relative; z-index: 1; }
.pf-key__item:hover { border-color: rgba(255, 255, 255, 0.18); }

.pf-key__term {
  display: flex; align-items: baseline; gap: 0.5em;
  font-family: var(--font-title); font-weight: 700;
  font-size: var(--fs-eyebrow); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-on-dark);
  margin: 0;
}
.pf-key__term::before {
  content: ""; flex: 0 0 auto;
  width: 7px; height: 7px; border-radius: 50%;
  transform: translateY(-1px);
  background: var(--pf-key-accent, var(--color-secondary-green));
}
.pf-key-dots { display: none; }

/* ---------- Honest note ---------- */
.pf-note {
  font-family: var(--font-title);
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  max-width: 34ch;
  margin: var(--space-8) auto 0;
  text-align: center;
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .pf-key {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: var(--space-2);
    overflow-x: auto;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .pf-key::-webkit-scrollbar { display: none; }
  .pf-key__item {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
  .pf-key-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    margin-top: var(--space-3);
  }
  .pf-key-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--color-ink-25);
    cursor: pointer;
    transition: width 0.22s var(--ease), background 0.22s var(--ease);
  }
  .pf-key-dot.is-active {
    width: 22px;
    background: var(--color-ink);
  }
  .pf-key-dot:focus-visible {
    outline: 2px solid var(--color-active);
    outline-offset: 3px;
  }
}

@media (max-width: 900px) {
  .pf-case { grid-template-columns: 1fr; }
  .pf-case--flip .pf-case__media { order: 0; }
  .pf-case__media { min-height: 0; margin-top: var(--space-4); }
  .pf-case__glow,
  .pf-case--flip .pf-case__glow { right: -20%; left: auto; top: -30%; width: 70%; }
}

@media (max-width: 560px) {
  /* the three metrics stay on ONE row — they scale down rather than wrap,
     so a card never reads as 2 + 1 orphan */
  .pf-case__metrics { gap: 0.625rem; }
  .pf-metric__value {
    /* floor low enough that the longest word value ("Inherited")
       still fits a third of a 320px card */
    font-size: clamp(0.875rem, 4vw, 1.25rem);
    letter-spacing: -0.02em;
  }
  .pf-metric__label {
    font-size: clamp(0.5rem, 2.5vw, 0.6875rem);
    letter-spacing: 0.04em;
  }
  .pf-metric__value,
  .pf-metric__label { white-space: nowrap; }

}