/* ============================================================================
   AMYAR GHAFFARY — Case studies · 2026
   File: case.css
   Loads THIRD, after Amyar.portfolio.css (fonts, reset, tokens) and
   services.css (the glass + light system).

   Case pages carry BOTH body classes: `rates-page case-page`. That is
   deliberate — `rates-page` is what defines --glass-fill, --glass-edge,
   --slab-shadow, the lifted --ink-3/--ink-4 and the aurora, so every surface
   here is cut from exactly the same material as the price list, and the
   pointer light in services.js works on these pages with no extra code
   (anything marked [data-slab] joins in).

   This file adds only what a case study needs and the price list does not:
   a hero with a credits block, big verifiable figures, a flow diagram, a
   phase timeline, a reach curve, a deliverables table and the closing nav.
   ============================================================================ */

/* ============================================================================
   1. HERO
   ============================================================================ */
.case-hero {
  padding-block: clamp(112px, 15vh, 168px) clamp(40px, 6vh, 72px);
}

.case-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: var(--space-5);
}
.case-kicker::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-cool);
  box-shadow: 0 0 10px 1px rgba(168, 200, 238, 0.8);
}
.case-kicker b {
  font-weight: 400;
  color: var(--accent-cool);
}

.case-title {
  max-width: 20ch;
  font-size: clamp(32px, 5.4vw, 60px);
  font-weight: 200;
  letter-spacing: -0.035em;
  line-height: 1.04;
  color: var(--ink);
}
.case-title em {
  font-style: normal;
  color: var(--accent-cool);
}

.case-deck {
  max-width: 60ch;
  margin-top: clamp(20px, 3vh, 28px);
  font-size: clamp(16px, 1.7vw, 19px);
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink-3);
}

/* Credits — Client / Year / Engagement / Role, as a hairline-ruled row. */
.case-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 36px);
  margin-top: clamp(32px, 5vh, 52px);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}
.case-meta dt {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 8px;
}
.case-meta dd {
  margin: 0;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-2);
}

/* ============================================================================
   2. FIGURES — the big numbers.
   Three glass blocks. These are for VERIFIABLE facts only: a public rating, a
   dashboard number, a real budget. Never a projection dressed up as a result.
   ============================================================================ */
.fig-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}

.fig {
  --mx: 50%;
  --my: 0%;
  --prox: 0;

  position: relative;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-slab);
  background: var(--glass-fill);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--slab-shadow);
  overflow: hidden;
  transition: border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
/* Same pointer bloom as the price-list slabs, same restraint. */
.fig::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(
    180px circle at var(--mx) var(--my),
    rgba(168, 200, 238, 0.035),
    transparent 58%);
  opacity: var(--prox);
  transition: opacity 0.45s var(--ease);
}
.fig.is-lit {
  border-color: rgba(255, 255, 255, 0.13);
  box-shadow: var(--slab-shadow-hi);
}
.fig > * { position: relative; }

.fig-num {
  display: block;
  font-size: clamp(30px, 4.2vw, 46px);
  font-weight: 200;
  letter-spacing: -0.035em;
  line-height: 1;
  color: #dbe8f8;
  font-variant-numeric: tabular-nums;
}
.fig-num small {
  font-size: 0.42em;
  letter-spacing: 0;
  color: var(--ink-4);
  margin-left: 2px;
}
.fig-lab {
  display: block;
  margin-top: var(--space-4);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-4);
  line-height: 1.6;
}
.fig-note {
  display: block;
  margin-top: var(--space-3);
  font-size: 12.5px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-4);
}

/* ============================================================================
   3. PROSE
   ============================================================================ */
.case-body {
  max-width: 68ch;
}
.case-body p {
  font-size: clamp(15px, 1.55vw, 17px);
  font-weight: 300;
  line-height: 1.75;
  color: var(--ink-3);
}
.case-body p + p { margin-top: var(--space-5); }
.case-body strong {
  font-weight: 500;
  color: var(--ink-2);
}
.case-body em {
  font-style: normal;
  color: var(--accent-cool);
}

/* ============================================================================
   4. FLOW — the chain diagram.
   Four (or three) glass nodes joined by hairlines, describing a sequence.
   Horizontal on desktop; on narrow screens it turns into a vertical chain and
   the connectors rotate to match, so the logic survives the reflow.
   ============================================================================ */
.flow {
  display: grid;
  grid-template-columns: repeat(var(--steps, 4), minmax(0, 1fr));
  gap: clamp(30px, 3.4vw, 48px);
  counter-reset: flowstep;
}

.flow-step {
  --mx: 50%;
  --my: 0%;
  --prox: 0;

  position: relative;
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-slab);
  background: var(--glass-fill);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--slab-shadow);
  counter-increment: flowstep;
  transition: border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.flow-step.is-lit {
  border-color: rgba(255, 255, 255, 0.13);
  box-shadow: var(--slab-shadow-hi);
}

/* The connector. Drawn in the gap to the RIGHT of every node but the last, so
   it never adds width of its own and can never wrap onto a line by itself. */
.flow-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: clamp(30px, 3.4vw, 48px);
  height: 1px;
  background: linear-gradient(90deg, rgba(168, 200, 238, 0.45), rgba(168, 200, 238, 0.12));
}
/* Arrowhead, built from the same hairline so it always matches. */
.flow-step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + clamp(30px, 3.4vw, 48px) - 5px);
  width: 5px;
  height: 5px;
  border-top: 1px solid rgba(168, 200, 238, 0.45);
  border-right: 1px solid rgba(168, 200, 238, 0.45);
  transform: translateY(-50%) rotate(45deg);
}

.fs-num {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--accent-cool);
  margin-bottom: var(--space-4);
}
.fs-name {
  display: block;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: var(--space-3);
}
.fs-what {
  font-size: 12.5px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-4);
}

/* ============================================================================
   5. PHASES — a numbered vertical timeline for anything that runs in order
   over weeks rather than in a single pass.
   ============================================================================ */
.phases {
  position: relative;
  padding-left: 34px;
}
/* The spine. Fades out at the bottom so it ends rather than stops. */
.phases::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 8px;
  left: 5px;
  width: 1px;
  background: linear-gradient(180deg, rgba(168, 200, 238, 0.4), rgba(168, 200, 238, 0.1) 70%, transparent);
}

.phase { position: relative; }
.phase + .phase { margin-top: clamp(26px, 3.4vh, 40px); }
.phase::before {
  content: "";
  position: absolute;
  top: 6px;
  left: -34px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--accent-cool);
  box-shadow: 0 0 12px -2px rgba(168, 200, 238, 0.8);
}

.ph-when {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-cool);
  margin-bottom: 8px;
}
.ph-name {
  display: block;
  font-size: clamp(16px, 1.8vw, 19px);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: var(--space-3);
}
.ph-what {
  max-width: 62ch;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-3);
}

/* ============================================================================
   6. CURVE — a shape-of-growth chart.
   Explicitly illustrative. It shows a pattern, never a promise; the caption
   under it says so, and it carries no y-axis numbers precisely so it cannot
   be read as a forecast.
   ============================================================================ */
.curve {
  position: relative;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-slab);
  background: var(--glass-fill);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--slab-shadow);
}
.curve-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.curve-title {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.curve-tag {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.curve svg { width: 100%; height: auto; display: block; }
.curve-x {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-4);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.curve-note {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-4);
}

/* ============================================================================
   7. DELIVERABLES — a two-column "what / what it does" table.
   ============================================================================ */
.deliver { width: 100%; }
.deliver-row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
  gap: clamp(16px, 2.4vw, 40px);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--line);
}
.deliver-row:first-child { border-top: 1px solid var(--line); }
.dl-what {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
}
.dl-does {
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink-3);
}

/* ============================================================================
   8. CALLOUT + HONEST NOTE
   ============================================================================ */
.callout {
  position: relative;
  max-width: 46ch;
  padding-left: clamp(20px, 2.4vw, 30px);
  border-left: 1px solid rgba(168, 200, 238, 0.35);
  font-size: clamp(18px, 2.2vw, 25px);
  font-weight: 200;
  letter-spacing: -0.02em;
  line-height: 1.4;
  color: var(--ink);
}
.callout cite {
  display: block;
  margin-top: var(--space-4);
  font-family: var(--mono);
  font-size: 10px;
  font-style: normal;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* The limits note. Every case study has one. Dashed, quiet, and it says what
   the work cannot promise — which is the part that makes the rest credible. */
.honest {
  margin-top: clamp(30px, 4vh, 48px);
  padding: clamp(16px, 2vw, 22px);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: var(--r-tier);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-4);
  max-width: 74ch;
}
.honest b {
  font-weight: 500;
  color: var(--ink-2);
}

/* ============================================================================
   9. CLOSING NAV
   ============================================================================ */
.case-next {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}
.cn-card {
  --mx: 50%;
  --my: 0%;
  --prox: 0;

  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-8);
  min-height: 150px;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-slab);
  background: var(--glass-fill);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--slab-shadow);
  overflow: hidden;
  transition: border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.cn-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(
    180px circle at var(--mx) var(--my),
    rgba(168, 200, 238, 0.035),
    transparent 58%);
  opacity: var(--prox);
  transition: opacity 0.45s var(--ease);
}
.cn-card:hover,
.cn-card.is-lit {
  border-color: rgba(168, 200, 238, 0.3);
  box-shadow: var(--slab-shadow-hi);
}
.cn-card:focus-visible {
  outline: 2px solid var(--accent-cool);
  outline-offset: 3px;
}
.cn-card > * { position: relative; }
.cn-kicker {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.cn-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: clamp(17px, 1.9vw, 21px);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.cn-name svg {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--ink-4);
  transition: transform 0.5s var(--ease-out), color 0.4s var(--ease);
}
.cn-card:hover .cn-name svg {
  color: var(--accent-cool);
  transform: translateX(4px);
}

/* ============================================================================
   10. RESPONSIVE
   ============================================================================ */
@media (max-width: 1000px) {
  .case-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fig-row   { grid-template-columns: 1fr; }

  /* The chain turns vertical, so the connector has to swing with it: it now
     runs from the bottom edge down into the gap, arrowhead rotated to match. */
  .flow { grid-template-columns: 1fr; gap: clamp(26px, 4vh, 38px); }
  .flow-step:not(:last-child)::after {
    top: 100%;
    left: 50%;
    width: 1px;
    height: clamp(26px, 4vh, 38px);
    background: linear-gradient(180deg, rgba(168, 200, 238, 0.45), rgba(168, 200, 238, 0.12));
  }
  .flow-step:not(:last-child)::before {
    top: calc(100% + clamp(26px, 4vh, 38px) - 5px);
    left: 50%;
    transform: translateX(-50%) rotate(135deg);
  }
}

@media (max-width: 720px) {
  .case-meta { grid-template-columns: 1fr; gap: var(--space-5); }
  .deliver-row { grid-template-columns: 1fr; gap: 6px; }
  .case-next { grid-template-columns: 1fr; }
  .cn-card { min-height: 0; gap: var(--space-6); }
}

@media (prefers-reduced-motion: reduce) {
  .cn-name svg { transition: none; }
}

/* ============================================================================
   11. PRESS FEEDBACK — see services.css § 14 and the tap-highlight note at the
   top of Amyar.portfolio.css. The only tappable surfaces on a case page are
   the two closing cards, so this is short by design.
   ============================================================================ */
.cn-card:active {
  border-color: rgba(168, 200, 238, 0.36);
  background: var(--glass-fill-hi);
}
.cn-card:active .cn-name svg { color: var(--accent-cool); }