/* ======== Work / case files — interactive cards, dossiers, decks ======== */
/* Extends styles.css. Reuses --bg, --accent, --font-display, etc. */

/* ---------- MISTI cover: portrait image shown whole on a blurred fill ---------- */
.card-media--misti img {
  /* absolute fill gives contain a bounded box (the card), so the whole
     portrait photo letterboxes inside instead of overflowing & cropping */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1;
}

.card-media--misti::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("assets/misti/misti-4.jpg") center / cover no-repeat;
  filter: blur(26px) brightness(1.06) saturate(0.9) opacity(0.55);
  transform: scale(1.2);   /* hide the blur's soft edges (card clips overflow) */
}

/* ---------- heritage: Arabic name watermark, echoing Home ---------- */
.work { position: relative; }

.work-arabic {
  position: absolute;
  top: clamp(46px, 8vw, 104px);
  right: clamp(-6px, 3vw, 60px);
  font-family: "Aref Ruqaa", var(--font-display), serif;
  font-weight: 700;
  font-size: clamp(2.6rem, 8vw, 6.5rem);
  line-height: 1;
  color: rgba(128, 80, 13, 0.07);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* keep the real content above the watermark */
.work-head,
.work-grid { position: relative; z-index: 1; }

/* ---------- work section sub-line ---------- */
.work-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: var(--muted);
  margin-top: 14px;
  max-width: 46ch;
}

/* ---------- card enhancements (grid cards are now buttons) ---------- */
.work-card {
  position: relative;
  width: 100%;
  text-align: left;
  font: inherit;
  color: var(--text);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.card-media { position: relative; }

/* the plate number, top-left of each card */
.card-index {
  position: absolute;
  top: 14px;
  left: 16px;
  z-index: 3;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  color: var(--text);
  opacity: 0.5;
}

/* "Open case file" cue that slides up on hover */
.card-open-cue {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 30px 16px 14px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.64rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  background: linear-gradient(to top, rgba(247, 244, 236, 0.85), transparent);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s var(--ease-pen);
  pointer-events: none;
}

.card-open-cue::before {
  content: "→ ";
  color: var(--accent);
}

.work-card:hover .card-open-cue,
.work-card:focus-visible .card-open-cue {
  opacity: 1;
  transform: translateY(0);
}

.work-card:focus-visible {
  outline: 1.5px solid var(--accent);
  outline-offset: 4px;
}

/* ---------- card 04: the agent terminal preview ---------- */
.card-media--agent {
  background:
    radial-gradient(90% 90% at 20% 0%, rgba(230, 193, 125, 0.12), transparent 65%),
    var(--ink);
  display: block;
}

.agent-terminal {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22px;
}

.agent-caret {
  font-family: "SFMono-Regular", ui-monospace, "Cascadia Code", Menlo, monospace;
  font-size: clamp(0.95rem, 2.2vw, 1.15rem);
  color: var(--ink-accent);
  letter-spacing: 0.02em;
  text-shadow: 0 0 16px rgba(230, 193, 125, 0.35);
  white-space: nowrap;
}

.agent-caret::after {
  content: "";
  display: inline-block;
  width: 0.6ch;
  height: 1.05em;
  margin-left: 2px;
  background: var(--ink-accent);
  vertical-align: text-bottom;
  animation: agent-blink 1s steps(1) infinite;
}

@keyframes agent-blink { 50% { opacity: 0; } }

/* ============ dossier: the full-screen case file ============ */
.dossier {
  width: min(1180px, 94vw);
  max-width: 94vw;
  height: min(820px, 92svh);
  max-height: 92svh;
  padding: 0;
  border: 1px solid rgba(128, 80, 13, 0.28);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text);
  overflow: hidden;
  box-shadow: 0 40px 120px rgba(45, 42, 34, 0.238);
}

.dossier::backdrop {
  background: rgba(52, 38, 20, 0.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* open/close transition (native dialog) */
.dossier {
  opacity: 0;
  transform: translateY(24px) scale(0.985);
  transition: opacity 0.4s ease, transform 0.5s var(--ease-pen), overlay 0.4s allow-discrete, display 0.4s allow-discrete;
}

.dossier[open] {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@starting-style {
  .dossier[open] {
    opacity: 0;
    transform: translateY(24px) scale(0.985);
  }
}

.dossier[open]::backdrop { animation: backdrop-in 0.4s ease; }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }

.dossier-shell {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  height: 100%;
}

.dossier-close {
  position: absolute;
  top: 16px;
  right: 18px;
  z-index: 10;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--text);
  background: rgba(247, 244, 236, 0.55);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s var(--ease-pen);
}

.dossier-close:hover {
  background: rgba(128, 80, 13, 0.16);
  border-color: rgba(128, 80, 13, 0.5);
  transform: rotate(90deg);
  color: var(--accent);
}

/* ---------- media half ---------- */
.dossier-media {
  position: relative;
  background: var(--mat);
  overflow: hidden;
  display: grid;
  place-items: center;
}

/* ---------- read half ---------- */
.dossier-read {
  padding: clamp(30px, 4vw, 56px) clamp(26px, 3.5vw, 50px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dossier-idx {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}

.dossier-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  line-height: 1.04;
  margin-bottom: 18px;
}

.dossier-lede {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 18px;
}

.dossier-body {
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: 26px;
}

.dossier-facts {
  list-style: none;
  border-top: 1px solid var(--line);
  margin-top: auto;
  padding-top: 20px;
  display: grid;
  gap: 12px;
}

.dossier-facts li {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 16px;
  align-items: baseline;
  font-size: 0.92rem;
  color: var(--text);
}

.dossier-facts span {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.dossier-cta-row {
  margin-top: 24px;
}

/* Nama "coming soon" link — designed in, not bolted on */
.soon-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: default;
  opacity: 0.85;
}

.soon-link[aria-disabled="true"] { pointer-events: none; }

.soon-badge {
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(128, 80, 13, 0.14);
  border: 1px solid rgba(128, 80, 13, 0.35);
}

/* ---------- Nama typographic face ---------- */
.dossier-nama-face {
  text-align: center;
  padding: 40px;
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
  background:
    radial-gradient(70% 80% at 50% 20%, rgba(128, 80, 13, 0.16), transparent 68%),
    var(--mat);
}

.nama-mark--lg {
  font-size: clamp(5rem, 14vw, 9rem);
  line-height: 1;
  display: block;
  margin-bottom: 20px;
}

.nama-strap {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ============ the deck: swipeable card stack ============ */
.deck {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 34px;
  touch-action: pan-y;
}

.deck-stack {
  position: relative;
  width: min(100%, 460px);
  aspect-ratio: 4 / 3;
}

.deck-card {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--mat);
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(45, 42, 34, 0.187);
  transform-origin: center bottom;
  will-change: transform, opacity;
  /* JS sets --i (depth) and drag transforms; this transition covers settle */
  transition: transform 0.5s var(--ease-pen), opacity 0.4s ease;
}

.deck-card.dragging { transition: none; }

.deck-card img,
.deck-card video {
  width: 100%;
  height: 100%;
  /* contain: show the whole photo/clip — never crop the viewer's shot off */
  object-fit: contain;
  display: block;
  pointer-events: none;
  user-select: none;
}

/* Per-project frame shapes so most of every image fits with minimal letterbox.
   MISTI photos are mostly portrait (phone shots); Paperly is landscape UI. */
.deck--misti .deck-stack { aspect-ratio: 3 / 4; width: min(100%, 400px); }
.deck--paperly .deck-stack { aspect-ratio: 16 / 10; width: min(100%, 520px); }

/* per-depth stacking, driven by --i from JS */
.deck-card {
  transform:
    translateY(calc(var(--i, 0) * 14px))
    scale(calc(1 - var(--i, 0) * 0.05));
  opacity: calc(1 - var(--i, 0) * 0.18);
  z-index: calc(20 - var(--i, 0));
}

.deck-card[data-gone] {
  opacity: 0;
  pointer-events: none;
}

/* the top card is the grabbable one */
.deck-card.top { cursor: grab; }
.deck-card.top.dragging { cursor: grabbing; }

/* sound toggle sits on the video card */
.deck-sound {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 5;
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
  background: rgba(247, 244, 236, 0.6);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  pointer-events: auto;
  backdrop-filter: blur(6px);
  transition: border-color 0.3s ease, color 0.3s ease;
}

.deck-sound:hover { border-color: rgba(128, 80, 13, 0.5); color: var(--accent); }
.deck-sound.on { color: var(--accent); border-color: rgba(128, 80, 13, 0.5); }

/* deck controls */
.deck-ui {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 16px;
}

.deck-nav {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  color: var(--text);
  background: rgba(247, 244, 236, 0.55);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
}

.deck-nav:hover { border-color: rgba(128, 80, 13, 0.5); color: var(--accent); background: rgba(128, 80, 13, 0.1); }

.deck-count {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--muted);
  min-width: 52px;
  text-align: center;
}

.deck-hint {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--muted);
  opacity: 0.7;
  pointer-events: none;
}

/* ============ the writer: agent that learns to write ============ */
.writer {
  width: min(100%, 440px);
  margin: 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--ink);
  box-shadow: 0 24px 60px rgba(45, 42, 34, 0.17);
  overflow: hidden;
}

.writer-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(243, 235, 218, 0.1);
  background: rgba(243, 235, 218, 0.04);
}

.writer-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(243, 235, 218, 0.2);
}
.writer-dot:nth-child(1) { background: rgba(230, 193, 125, 0.6); }

.writer-label {
  margin-left: 8px;
  font-family: "SFMono-Regular", ui-monospace, Menlo, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: rgba(243, 235, 218, 0.5);
}

.writer-body {
  padding: 22px 20px;
  min-height: 220px;
}

.writer-meta {
  font-family: "SFMono-Regular", ui-monospace, Menlo, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-accent);
  margin-bottom: 14px;
  transition: color 0.4s ease;
}

.writer-text {
  font-family: var(--font-display);
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--ink-text);
  min-height: 5em;
}

.writer-caret {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  margin-left: 1px;
  background: var(--ink-accent);
  vertical-align: text-bottom;
  animation: agent-blink 1s steps(1) infinite;
}

.writer-foot {
  padding: 12px 20px;
  border-top: 1px solid rgba(243, 235, 218, 0.1);
  background: rgba(243, 235, 218, 0.03);
}

.writer-metric {
  font-family: "SFMono-Regular", ui-monospace, Menlo, monospace;
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  color: rgba(243, 235, 218, 0.45);
  transition: color 0.4s ease;
}

.writer-metric.up { color: var(--ink-accent); }

/* ============ responsive ============ */
@media (max-width: 860px) {
  .dossier {
    width: 96vw;
    height: 94svh;
    max-height: 94svh;
  }
  .dossier-shell {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(240px, 42%) 1fr;
  }
  .dossier-read { padding: 24px 22px 30px; }
  .dossier-facts { margin-top: 24px; }
}

@media (max-width: 560px) {
  .deck { padding: 20px; }
  .deck-hint { display: none; }
  .dossier-title { font-size: 1.9rem; }
}

/* ============ certifications page ============ */
.certs {
  background: var(--bg);
  min-height: 100svh;
  padding: clamp(110px, 14vw, 170px) clamp(22px, 6vw, 80px) clamp(80px, 10vw, 120px);
}

.certs-head {
  max-width: 900px;
  margin: 0 auto clamp(40px, 6vw, 70px);
}

.certs-back {
  display: inline-block;
  margin-bottom: 26px;
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.3s ease;
}
.certs-back:hover { color: var(--accent); }

.certs-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.05;
  margin-bottom: 16px;
}

.certs-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: var(--muted);
  max-width: 52ch;
}

.certs-group {
  max-width: 900px;
  margin: 0 auto;
  scroll-margin-top: 120px;
}

.certs-program {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  padding-bottom: 16px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--line);
}

.certs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(16px, 2.5vw, 26px);
}

.cert-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 26px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  text-decoration: none;
  color: var(--text);
  scroll-margin-top: 120px;
  transition: border-color 0.4s ease, transform 0.4s var(--ease-pen), box-shadow 0.4s ease;
}

.cert-card:hover,
.cert-card:target,
.cert-card.is-linked {
  border-color: rgba(128, 80, 13, 0.5);
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(45, 42, 34, 0.136), 0 6px 30px rgba(128, 80, 13, 0.08);
}

/* the deep-linked cert (arrived from The Car) gets a brass glow */
.cert-card:target,
.cert-card.is-linked {
  border-color: rgba(128, 80, 13, 0.7);
  box-shadow: 0 20px 50px rgba(45, 42, 34, 0.136), 0 0 0 1px rgba(128, 80, 13, 0.35),
    0 6px 34px rgba(128, 80, 13, 0.16);
}

.cert-icon {
  font-size: 1.8rem;
  color: var(--accent);
  filter: drop-shadow(0 0 10px var(--accent-soft));
  flex-shrink: 0;
}

.cert-meta { flex: 1; }

.cert-meta h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
  margin-bottom: 4px;
}

.cert-meta p {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--muted);
  font-size: 0.98rem;
  margin-bottom: 6px;
}

.cert-date {
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.cert-open {
  font-family: var(--font-body);
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  flex-shrink: 0;
  align-self: flex-end;
}

@media (max-width: 480px) {
  .cert-card { flex-wrap: wrap; }
  .cert-open { align-self: flex-start; }
}

/* ============ in-site certificate viewer ============ */
.cert-viewer {
  width: min(1000px, 94vw);
  max-width: 94vw;
  height: min(1100px, 92svh);
  max-height: 92svh;
  padding: 0;
  border: 1px solid rgba(128, 80, 13, 0.28);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text);
  overflow: hidden;
  box-shadow: 0 40px 120px rgba(45, 42, 34, 0.238);
}

.cert-viewer::backdrop {
  background: rgba(52, 38, 20, 0.46);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.cert-viewer-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.cert-viewer-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(35, 34, 29, 0.03);
}

.cert-viewer-title {
  flex: 1;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cert-viewer-download {
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  transition: opacity 0.3s ease;
}
.cert-viewer-download:hover { opacity: 0.75; }

.cert-viewer-close {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--text);
  background: rgba(247, 244, 236, 0.5);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s var(--ease-pen), color 0.3s ease;
}
.cert-viewer-close:hover {
  background: rgba(128, 80, 13, 0.16);
  border-color: rgba(128, 80, 13, 0.5);
  color: var(--accent);
  transform: rotate(90deg);
}

.cert-viewer-frame {
  flex: 1;
  width: 100%;
  border: 0;
  background: var(--mat); /* soft mat behind the PDF page */
}

/* ============ reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  .dossier,
  .deck-card,
  .dossier-close,
  .card-open-cue,
  .cert-card { transition: none !important; }
  .agent-caret::after,
  .writer-caret { animation: none; }
}

/* ---- projects page: drop the top tatreez clear of the floating nav ---- */
.page--work { padding-top: clamp(82px, 11vh, 116px); }

/* ---- certifications: banger header, then let the certificates carry it ---- */
.certs-head {
  max-width: 820px;
  text-align: center;
}

/* text-align centres the words, not the box. .certs-sub is capped at 52ch, so
   without an auto margin its box sits flush left inside the 820px header while
   the title spans the full width, and the two centres do not line up. */
.certs-sub {
  margin-left: auto;
  margin-right: auto;
}

.certs-title {
  font-size: clamp(2.8rem, 7vw, 5rem);
  font-weight: 600;
  margin-bottom: 0;
}
.certs-title em { font-style: italic; color: var(--accent); }

.certs-group { max-width: 760px; }

/* one immersive plaque per certificate */
.certs-grid {
  grid-template-columns: 1fr;
  gap: clamp(18px, 3vw, 28px);
}

.cert-card {
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: clamp(30px, 4vw, 48px);
  background:
    radial-gradient(130% 120% at 0% 0%, rgba(128, 80, 13, 0.07), transparent 58%),
    var(--surface);
}

.cert-card .cert-icon { font-size: 2.6rem; }
.cert-card .cert-meta h4 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.cert-card .cert-open { align-self: flex-start; margin-top: 4px; }

/* ============================================================
   01 · Nama — the deal run
   The engine's actual pipeline: a parcel query enters, four
   agents work it in order, a verdict lands. Modelled on .writer.
   ============================================================ */

.pipeline {
  width: min(100%, 440px);
  margin: 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--ink);
  box-shadow: 0 24px 60px rgba(45, 42, 34, 0.17);
  overflow: hidden;
}

.pipe-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(243, 235, 218, 0.1);
  background: rgba(243, 235, 218, 0.04);
}

.pipe-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(243, 241, 230, 0.22);
}

.pipe-label {
  margin-left: 6px;
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: rgba(243, 241, 230, 0.5);
}

/* the query, in Arabic, as it is actually typed */
.pipe-query {
  margin: 0;
  padding: 16px 18px 14px;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--ink-accent);
  border-bottom: 1px solid rgba(243, 241, 230, 0.08);
}

.pipe-steps {
  list-style: none;
  margin: 0;
  padding: 14px 18px 6px;
  display: grid;
  gap: 11px;
}

.pipe-step {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  align-items: center;
  gap: 12px;
  opacity: 0.28;
  transform: translateX(-4px);
  transition: opacity 0.45s ease, transform 0.45s var(--ease-pen);
}

.pipe-step.is-done {
  opacity: 1;
  transform: translateX(0);
}

/* the bead fills as its agent completes */
.pipe-bead {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid rgba(243, 241, 230, 0.35);
  background: transparent;
  transition: background 0.4s ease, border-color 0.4s ease,
              box-shadow 0.4s ease;
}

.pipe-step.is-done .pipe-bead {
  background: var(--ink-accent);
  border-color: var(--ink-accent);
  box-shadow: 0 0 10px var(--accent-soft);
}

.pipe-name {
  font-family: var(--font-body);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--ink-text);
}

.pipe-state {
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: rgba(243, 241, 230, 0.44);
}

.pipe-verdict {
  margin: 0;
  padding: 12px 18px 16px;
  min-height: 1.2em;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--ink-accent);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.pipe-verdict.is-shown { opacity: 1; }

/* ============================================================
   05 · This site — the craft argument
   ============================================================ */

.card-media--site {
  background:
    radial-gradient(90% 90% at 80% 0%, rgba(230, 193, 125, 0.1), transparent 65%),
    var(--ink);
  display: grid;
  place-items: center;
}

/* the signature signs the card. Cloned from #sig by work.js, so the
   global .sig-art / .mask-stroke / .sig-dots rules in styles.css do
   the ink; only sizing and the dots trigger need re-scoping here,
   because those two rules are keyed to the hero's #sig id. */
.sig-card {
  display: grid;
  place-items: center;
  width: 100%;
  padding: 26px 24px;
}

.sig-card-svg {
  width: min(100%, 300px);
  height: auto;
  display: block;
  overflow: visible;
}

.sig-card-svg.dots-on .sig-dots path {
  opacity: 1;
  transform: translateY(0);
}

.sig-card-svg.dots-on .sig-dots path:nth-child(2) {
  transition-delay: 0.24s;
}

/* the dossier's counted-source ledger */
.ledger {
  width: min(100%, 400px);
  margin: 24px;
  padding: 22px 24px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--ink);
  box-shadow: 0 24px 60px rgba(45, 42, 34, 0.17);
}

.ledger-cap,
.ledger-foot {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(243, 241, 230, 0.42);
}

.ledger-foot {
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid rgba(243, 241, 230, 0.1);
  text-transform: none;
  letter-spacing: 0.08em;
  color: rgba(243, 241, 230, 0.5);
}

.ledger-rows {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.ledger-rows li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  font-family: var(--font-body);
}

.ledger-k {
  font-size: 0.8rem;
  color: rgba(243, 241, 230, 0.72);
}

.ledger-v {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--ink-text);
}

/* the zeroes are the whole argument, so let them carry the gold */
.ledger-v--zero {
  font-size: 1.02rem;
  color: var(--ink-accent);
}

@media (prefers-reduced-motion: reduce) {
  .pipe-step,
  .pipe-bead,
  .pipe-verdict { transition: none; }
}