/* =============================================================
   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: 1240px; 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-wrap { max-width: var(--pf-max); margin-inline: auto; }

.pf-section { padding: var(--space-7) var(--gutter) 0; }
.pf > .page-hero {
  max-width: var(--pf-max);
  padding-bottom: var(--space-5);
}
.pf-logo-strip { padding: 0 0 var(--space-5); }

/* ---------- 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 rgba(10, 10, 8, 0.07);
  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: rgba(10, 10, 8, 0.12);
  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.5rem, 2.4vw, 2rem);
  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: 1px solid var(--border-ink);
  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;
  border-bottom: 1px solid var(--border-ink);
}
.pf-browser__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(10, 10, 8, 0.12);
}
.pf-browser__url {
  margin-left: 10px;
  font-family: var(--font-mono); font-size: 0.6875rem;
  color: var(--color-ink-25);
}
.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;
}

/* =============================================================
   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.9375rem, 4.6vw, 1.5rem);
    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; }

}