/* ═══════════════════════════════════════════════════════════
   case-study.css — shared styles for the case study pages
   (meta, amazon, microsoft, amex): header, facts bar, metrics,
   figures, stepper, audio dock, next card + their responsive rules.
   ═══════════════════════════════════════════════════════════ */

/* ── HEADER ── */
.art-head { padding: 64px 40px 56px; border-bottom: 1px solid var(--border-light); }
.art-cat { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent); padding: 4px 10px; width: fit-content; margin-bottom: 24px; }
.art-title { font-family: var(--mono); font-size: clamp(30px, 4vw, 52px); font-weight: 600; line-height: 1.08; letter-spacing: -0.035em; color: var(--ink); max-width: 20ch; margin-bottom: 26px; }
.art-dek { font-family: var(--sans); font-size: 20px; font-weight: 400; color: var(--muted); line-height: 1.6; max-width: 60ch; }

/* ── FACTS BAR ── */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--border-light); background: var(--soft); }
.fact { padding: 24px 28px; border-right: 1px solid var(--border-light); }
.fact:last-child { border-right: none; }
.fact-lbl { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; display: flex; align-items: center; gap: 7px; }
.fact-lbl .p { color: var(--accent); }
.fact-val { font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--ink); line-height: 1.45; }
.fact-list { display: flex; flex-direction: column; gap: 5px; }

/* ── HERO IMAGE ── */
.art-hero { border-bottom: 1px solid var(--border-light); position: relative; background: var(--soft); }
.art-hero img { width: 100%; height: auto; object-fit: cover; max-height: 520px; }
.art-hero-cap { position: absolute; left: 0; bottom: 0; font-family: var(--mono); font-size: 12px; color: #fff; background: rgba(22,24,29,0.82); padding: 6px 12px; letter-spacing: 0.02em; }
.art-hero-cap .p { color: var(--mark); font-weight: 600; }

/* ── IMPACT METRICS ── */
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--border-light); background: var(--ink); position: relative; overflow: hidden; }
.metrics::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image:
    repeating-linear-gradient(to right, rgba(255,255,255,0.04) 0, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 56px),
    repeating-linear-gradient(to bottom, rgba(255,255,255,0.04) 0, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 56px);
}
.metric { padding: 44px 32px; border-right: 1px solid rgba(255,255,255,0.12); display: flex; flex-direction: column; gap: 10px; position: relative; z-index: 2; }
.metric:last-child { border-right: none; }
.metric-num { font-family: var(--mono); font-size: clamp(34px, 4.4vw, 52px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--mark); }
.metric-lbl { font-family: var(--sans); font-size: 15px; font-weight: 400; color: rgba(255,255,255,0.78); line-height: 1.5; max-width: 32ch; }

/* ── FIGURES ── */
figure.fig { margin: 52px 0; }
figure.fig img,
figure.fig video { width: 100%; height: auto; display: block; border: 1px solid var(--border-light); }
.fig-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }

/* Affinity map — research synthesis (built in-page, no image asset) */
.affinity { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto repeat(4, auto); gap: 16px; align-items: start; border: 1px solid var(--border-light); background: var(--soft); padding: 26px 24px; position: relative; overflow: hidden; }
.affinity::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.6;
  background-image:
    repeating-linear-gradient(to right, var(--border-light) 0, var(--border-light) 1px, transparent 1px, transparent 40px),
    repeating-linear-gradient(to bottom, var(--border-light) 0, var(--border-light) 1px, transparent 1px, transparent 40px);
}
.aff-col { display: flex; flex-direction: column; gap: 12px; position: relative; z-index: 1; }
@supports (grid-template-rows: subgrid) {
  .aff-col { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; gap: 12px; }
  .aff-note { height: 100%; }
}
.aff-theme { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.03em; line-height: 1.35; color: var(--ink); text-transform: uppercase; display: flex; align-items: baseline; gap: 9px; padding-bottom: 12px; border-bottom: 2px solid var(--accent); margin-bottom: 2px; }
.aff-theme .n { background: var(--accent); color: #fff; font-size: 11px; padding: 2px 6px 1px; flex-shrink: 0; }
.aff-note { font-family: var(--sans); font-size: 13.5px; line-height: 1.5; color: var(--muted); background: var(--paper); border: 1px solid var(--border-light); padding: 10px 13px 11px; box-shadow: 0 2px 5px -3px rgba(20,24,40,0.28); transition: transform 0.18s, box-shadow 0.18s; }
.aff-col:nth-child(odd)  .aff-note:nth-child(2) { transform: rotate(-0.9deg); }
.aff-col:nth-child(odd)  .aff-note:nth-child(3) { transform: rotate(0.5deg); }
.aff-col:nth-child(odd)  .aff-note:nth-child(4) { transform: rotate(-0.4deg); }
.aff-col:nth-child(odd)  .aff-note:nth-child(5) { transform: rotate(0.8deg); }
.aff-col:nth-child(even) .aff-note:nth-child(2) { transform: rotate(0.6deg); }
.aff-col:nth-child(even) .aff-note:nth-child(3) { transform: rotate(-0.7deg); }
.aff-col:nth-child(even) .aff-note:nth-child(4) { transform: rotate(0.4deg); }
.aff-col:nth-child(even) .aff-note:nth-child(5) { transform: rotate(-0.6deg); }
.affinity .aff-note:hover { transform: rotate(0deg) translateY(-2px); box-shadow: 0 8px 16px -8px rgba(20,24,40,0.35); }
.aff-tag { display: block; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent); margin-bottom: 5px; }
.aff-tag::before { content: '/// '; }
.aff-note.is-key { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }
.fig-cap { font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: 0.02em; line-height: 1.5; margin-top: 12px; display: flex; gap: 8px; }
.fig-cap .p { color: var(--accent); font-weight: 600; flex-shrink: 0; }
.fig-cap b { color: var(--ink); font-weight: 600; }
.fig-ph { aspect-ratio: 16 / 9; background: var(--soft); border: 1px dashed var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 24px; }
.fig-two .fig-ph { aspect-ratio: 4 / 3; }
.fig-ph-label { font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--ink); letter-spacing: 0.02em; }
.fig-ph-label .p { color: var(--accent); font-weight: 600; }
.fig-ph-hint { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.04em; }

/* ── STEPPER ── */
.stepper { margin: 52px 0; }
.stepper-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border-light); flex-wrap: wrap; }
.stepper-tab { font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--muted); display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.15s, border-color 0.15s; }
.stepper-tab .tn { color: var(--border); font-weight: 600; flex-shrink: 0; }
.stepper-tab:hover { color: var(--ink); }
.stepper-tab:hover .tn { color: var(--accent); }
.stepper-tab.is-active { color: var(--ink); border-bottom-color: var(--accent); }
.stepper-tab.is-active .tn { color: var(--accent); }
.stepper-panel { display: none; margin: 24px 0 0; }
.stepper-panel.is-active { display: block; }
.stepper-foot { display: flex; align-items: center; gap: 18px; width: fit-content; padding: 8px 10px; position: fixed; bottom: 16px; left: 0; z-index: 60; background: var(--paper); border: 1px solid var(--border); box-shadow: 0 12px 30px -12px rgba(20,24,40,0.3); opacity: 0; visibility: hidden; transform: translateY(8px); pointer-events: none; transition: opacity 0.22s, transform 0.22s, visibility 0.22s; }
.stepper-foot.is-on { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.sf-btn { font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: transparent; border: 1px solid var(--border); color: var(--muted); padding: 10px 16px; cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; }
.sf-btn:hover:not([disabled]) { color: var(--ink); border-color: var(--accent); }
.sf-btn[disabled] { opacity: 0.4; cursor: default; }
.sf-next:not([disabled]) { border-color: var(--accent); color: #fff; background: var(--accent); }
.sf-next:hover:not([disabled]) { background: #2334c4; color: #fff; }
@media (max-width: 1120px) { .stepper-foot .sf-prev { display: none; } }
.stepper-panel .fig-cap { margin-top: 14px; }
.stepper-nav { display: flex; align-items: center; gap: 9px; margin-left: auto; align-self: center; padding: 0 2px 0 16px; }
.stepper-step { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--muted); font-variant-numeric: tabular-nums; }
.stepper-step b { color: var(--accent); font-weight: 600; }
.stepper-arrow { font-family: var(--mono); font-size: 14px; line-height: 1; color: var(--ink); background: transparent; width: 30px; height: 28px; border: 1px solid var(--border); border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; }
.stepper-arrow:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); background: var(--soft); }
.stepper-arrow:disabled { opacity: 0.3; cursor: default; }
.stepper-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* signoff */
.art-end { display: flex; align-items: center; gap: 12px; margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--border-light); font-family: var(--mono); font-size: 13px; color: var(--muted); letter-spacing: 0.02em; }
.art-end .p { color: var(--accent); font-weight: 600; }
.art-end .end-caret { display: inline-block; width: 7px; height: 14px; background: var(--accent); animation: caret 1s steps(1) infinite; vertical-align: -2px; }
@keyframes caret { 0%,49%{opacity:1} 50%,100%{opacity:0} }

/* ── merged audio + search dock — stacked (prototype) ── */
.dock { position: fixed; bottom: 26px; right: 62px; z-index: 400; display: flex; flex-direction: column; width: 248px; background: var(--paper); border: 1px solid var(--border); box-shadow: 0 12px 30px -12px rgba(20,24,40,0.3); overflow: hidden; }
.dock-audio-row { position: relative; display: flex; align-items: stretch; height: 46px; }
.dock .vo-play { flex-shrink: 0; width: 44px; display: flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; cursor: pointer; font-size: 12px; line-height: 1; transition: filter 0.15s; }
.dock .vo-play:hover { filter: brightness(1.08); }
.dock .vo-play .i-play { width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent currentColor; margin-left: 3px; }
.dock .vo-play .i-pause { display: none; align-items: center; gap: 3px; }
.dock .vo-play .i-pause i { display: block; width: 3px; height: 12px; background: currentColor; }
.dock.is-playing .vo-play .i-play { display: none; }
.dock.is-playing .vo-play .i-pause { display: inline-flex; }
.dock-audio-txt { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 0 14px; white-space: nowrap; min-width: 0; }
.vodock-lbl { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.vodock-lbl .p { color: var(--accent); font-weight: 600; }
.vodock-lbl .dim { color: var(--border); }
.dock .vo-time { font-family: var(--mono); font-size: 11px; color: var(--mid); font-variant-numeric: tabular-nums; }
.dock .vo-track { position: absolute; left: 44px; right: 0; bottom: 0; height: 3px; background: var(--border-light); cursor: pointer; }
.dock .vo-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dock .vo-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--accent); }
.dock-sep-h { height: 1px; background: var(--border-light); flex-shrink: 0; }
.dock .cmdk-fab { position: static; bottom: auto; right: auto; width: 100%; border: none; box-shadow: none; background: none; transition: background 0.15s; }
.dock .cmdk-fab:hover { border: none; box-shadow: none; transform: none; background: var(--soft); }
html[data-theme="dark"] .dock .vo-play { color: #16181d; }
@media (max-width: 900px) {
  .dock { left: 0; right: 0; bottom: 0; width: auto; border: none; border-top: 1px solid var(--border); box-shadow: 0 -8px 24px -16px rgba(10,12,24,0.45); padding-bottom: env(safe-area-inset-bottom); }
  .dock-sep-h, .dock .cmdk-fab { display: none; }
  .dock-audio-row { height: 56px; }
  .dock .vo-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; z-index: 2; }
  .dock-audio-txt { flex: 1; flex-direction: row; align-items: center; justify-content: space-between; padding: 0 18px; }
  .dock .vo-track { left: 0; height: 4px; }
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  .stepper-foot { bottom: calc(68px + env(safe-area-inset-bottom)); gap: 8px; }
}

/* ── NEXT ── */
.next { display: grid; grid-template-columns: minmax(264px, 2.4fr) 9.6fr; border-bottom: 1px solid var(--border-light); cursor: pointer; transition: background 0.15s; }
.next:hover { background: var(--soft); }
.next:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.next-lbl { padding: 30px 40px; border-right: 1px solid var(--border-light); font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.next-lbl .p { color: var(--accent); }
.next-body { padding: 30px 40px; display: flex; flex-direction: column; gap: 8px; position: relative; justify-content: center; }
.next-cat { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.next-title { font-family: var(--mono); font-size: 21px; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; line-height: 1.3; max-width: none; transition: color 0.15s; }
.next-arrow { position: absolute; top: 50%; right: 40px; transform: translateY(-50%); font-size: 18px; color: var(--border); transition: color 0.15s, transform 0.15s; }
.next:hover .next-arrow { color: var(--ink); transform: translateY(-50%) translate(3px,-3px); }

/* ── CASE RESPONSIVE ── */
@media (max-width: 900px) {
  html .facts { grid-template-columns: 1fr; }
  html .fact { border-right: none; border-bottom: 1px solid var(--border-light); padding-left: 24px; padding-right: 24px; }
  html .fact:last-child { border-bottom: none; }
  html .metrics { grid-template-columns: 1fr; }
  html .metric { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.12); align-items: center; text-align: center; }
  html .metric:last-child { border-bottom: none; }
  html .stat-row { grid-template-columns: 1fr; }
  html .fig-two { grid-template-columns: 1fr; }
  html .affinity { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  html .aff-col { display: flex; flex-direction: column; grid-row: auto; }
  html .stat-cell { border-right: none; border-bottom: 1px solid var(--border-light); text-align: center; }
  html .stat-cell:last-child { border-bottom: none; }
  html footer { flex-direction: column; gap: 8px; align-items: flex-start; }

  /* Stepper: single-line, swipeable tab bar with touch-sized targets */
  html .stepper-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scrollbar-width: none; }
  html .stepper-tabs::-webkit-scrollbar { display: none; }
  html .stepper-tab { flex: 0 0 auto; min-height: 44px; padding-top: 0; padding-bottom: 0; scroll-snap-align: start; }
  html .stepper-nav { position: sticky; right: 0; flex: 0 0 auto; background: var(--paper); padding-left: 12px; box-shadow: -12px 0 10px -6px var(--paper); }
}

@media (max-width: 560px) {
  html .affinity { grid-template-columns: 1fr; }
}