/* ============================================================
   DeskDude - Projects / Case Studies
   Page-specific additions on top of the shared Minimalist system
   (styles-about-rebuild.css, class prefix cal-). Nav, footer,
   hero, buttons, tags, panels and lists all reuse the shared
   cal- classes directly and are NOT redefined here.

   Only genuinely new patterns live in this file: the case index
   list, the case-file layout, the flat photo gallery treatment,
   the live-widget note, and the quiet/plain PAIA card. Class
   prefix: proj-.

   Note on the PAIA case (id="sag-paia"): the content boundary is
   handled in the HTML, not here. This stylesheet only adds a
   quieter visual treatment (muted title color, plain unpilled
   status label, no gallery/tag styling applied to it because the
   HTML simply does not include those elements for that case).
   Do not add rules here that assume or reference any PAIA detail
   beyond the one approved public line.
   ============================================================ */

/* ---------- hero: flowing background instead of the shared radial-blob
   decoration (see .cal-hero-flow / .flow-bg-frame in the shared sheet) ---------- */

.proj-hero {
  padding-bottom: 96px;
}

.proj-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  margin-top: 34px;
}

.proj-meta-row dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 4px;
}

.proj-meta-row dd {
  font-size: 14.5px;
  color: var(--ink);
}

/* ---------- case index: open, spatial list. No border grid, no hover
   background block - whitespace and a soft fade are the separators. ---------- */

.proj-index {
  display: flex;
  flex-direction: column;
}

.proj-index-row {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: baseline;
  gap: 24px;
  padding: 26px 4px;
  transition: opacity 0.2s var(--ease);
}

.proj-index-row:not(:last-child) {
  border-bottom: 1px solid rgba(139, 128, 112, 0.12);
}

.proj-index-row:hover {
  opacity: 0.6;
}

.proj-index-nr {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-faint);
}

.proj-index-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
}

.proj-index-name {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 500;
  color: var(--ink);
}

.proj-index-type {
  font-size: 14px;
  color: var(--ink-muted);
}

@media (max-width: 700px) {
  .proj-index-row {
    grid-template-columns: 30px 1fr;
    grid-template-areas:
      "nr name"
      "nr status";
    row-gap: 8px;
    padding: 22px 4px;
  }
  .proj-index-nr {
    grid-area: nr;
  }
  .proj-index-main {
    grid-area: name;
    flex-direction: column;
    gap: 2px;
  }
  .proj-index-row .cal-tag {
    grid-area: status;
    justify-self: start;
  }
}

/* ---------- case sections ---------- */

.proj-case {
  padding: 64px 0;
  border-top: 1px solid var(--border);
  scroll-margin-top: 96px;
}

.proj-case-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 18px;
}

.proj-case-ref {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.proj-case-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(26px, 3.2vw, 36px);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 10px;
}

.proj-case-lede {
  margin-top: 0;
  margin-bottom: 28px;
  max-width: 56ch;
}

.proj-case-body p {
  font-size: 15.5px;
  color: var(--ink);
  line-height: 1.65;
  margin: 0 0 16px;
  max-width: 58ch;
}

.proj-case-body .cal-list {
  margin: 20px 0 26px;
  max-width: 58ch;
}

.proj-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 28px;
}

.proj-case-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 56px;
  align-items: start;
}

@media (max-width: 900px) {
  .proj-case-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

/* ---------- photo gallery: flat, hairline-bordered cards.
   Deliberately not the dossier's rotated/taped-photo treatment -
   same restraint as the shared .cal-card / home-flagship-gallery
   components. ---------- */

.proj-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.proj-photo {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.proj-photo img {
  width: 100%;
  height: 168px;
  object-fit: cover;
  filter: sepia(0.05) saturate(0.96);
}

.proj-photo figcaption {
  padding: 12px 14px;
  font-size: 13px;
  color: var(--ink-muted);
  border-top: 1px solid var(--border);
}

.proj-photo--wide {
  grid-column: span 2;
}

.proj-photo--wide img {
  height: 240px;
}

@media (max-width: 560px) {
  .proj-gallery {
    grid-template-columns: 1fr;
  }
  .proj-photo--wide {
    grid-column: span 1;
  }
}

/* ---------- e-book cover: portrait artwork, shown uncropped in
   its own frame (not run through the photo gallery's sepia/crop
   treatment, which is meant for real photographs). ---------- */

.proj-cover-frame {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
  max-width: 220px;
}

.proj-cover-frame img {
  border-radius: calc(var(--radius-lg) - 6px);
  width: 100%;
  height: auto;
}

.proj-cover figcaption {
  margin-top: 12px;
  font-size: 13px;
  color: var(--ink-muted);
}

/* ---------- Ask DeskDude AI: live-widget note ---------- */

.proj-widget-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.proj-live-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--pastel-sage-ink);
  animation: proj-pulse 2.4s ease-in-out infinite;
}

@keyframes proj-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

.proj-widget-note p {
  margin: 0;
  font-size: 14.5px;
  color: var(--ink-muted);
}

@media (prefers-reduced-motion: reduce) {
  .proj-live-dot {
    animation: none;
  }
}

/* ---------- unused since 2026-07-23 (PAIA case now uses the normal
   case treatment, see /paia/) - left in place in case a future case
   needs the quiet/plain look again. ---------- */

.proj-case--quiet .proj-case-title {
  color: var(--ink-muted);
}

.proj-status-quiet {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.proj-case-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ink-muted);
  max-width: 52ch;
  margin: 0 0 14px;
}

.proj-case-note {
  font-size: 13.5px;
  color: var(--ink-faint);
  margin: 0;
}

/* ---------- small inline link line under a trimmed case body ---------- */

.proj-case-guide {
  font-size: 13.5px;
  color: var(--ink-muted);
  margin: 4px 0 18px;
}

/* ---------- closing CTA ---------- */

.proj-cta {
  text-align: center;
}

.proj-cta h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 42px);
  color: var(--ink);
  max-width: 18ch;
  margin: 0 auto 14px;
}

.proj-cta p {
  color: var(--ink-muted);
  max-width: 46ch;
  margin: 0 auto 28px;
}

.proj-cta .cal-actions {
  justify-content: center;
}

/* ---------- updates feed (rendered by /updates-feed.js into #updates-feed) ---------- */

.proj-updates {
  border-top: 1px solid var(--border);
}

.rb-update-row {
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}

.rb-update-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.rb-update-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.rb-update-meta time {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.rb-update-project {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--pastel-sage-bg);
  color: var(--pastel-sage-ink);
}

.rb-update-text {
  font-size: 15px;
  color: var(--ink);
  margin: 0;
  max-width: 60ch;
}