/* ============================================================
   PROJECT BASE CSS
   Shared styles for all three project detail pages.
   Imports the same design tokens (colors, fonts) via the
   same CSS variables already defined in style.css.
   Each project page links BOTH style.css AND project-base.css.
============================================================ */

/* ── PROJECT NAV ─────────────────────────────────────────────
   Thin bar at the top: site name left, back link right.
   Mirrors the main site nav visually.
─────────────────────────────────────────────────────────── */
.proj-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px clamp(24px, 5vw, 80px);
  background-color: rgba(240, 241, 243, 0.88);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-line);
}

.proj-nav-name {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text);
  text-decoration: none;
}

.proj-nav-back {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.proj-nav-back:hover {
  color: var(--color-text);
}

/* Right-side nav link group — About / Contact / Back */
.proj-nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}

@media (max-width: 600px) {
  .proj-nav-links {
    gap: 16px;
  }
  /* Keep the essential link; hide secondary jumps on small screens */
  .proj-nav-links a:not(:last-child) {
    display: none;
  }
}

/* ── PROJECT HERO ────────────────────────────────────────────
   Full-width opening: title, metadata grid, summary, image.
─────────────────────────────────────────────────────────── */
.proj-hero {
  padding-top: 140px;                        /* clears fixed nav */
  padding-bottom: 80px;
  padding-left: clamp(24px, 5vw, 80px);
  padding-right: clamp(24px, 5vw, 80px);
  max-width: 1100px;
  margin: 0 auto;
}

/* Section index tag [00] */
.proj-index-tag {
  display: block;
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--color-muted);
  margin-bottom: 20px;
}

/* Large project title — dominant typographic element */
.proj-title {
  font-family: var(--font-serif);
  font-size: clamp(48px, 8vw, 110px);
  font-weight: 300;
  line-height: 1.0;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin: 0 0 48px;
}

/* Title + live-site CTA side by side — CTA anchors to the
   bottom-right of the (often multi-line) title, above the rule. */
.proj-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin: 0 0 48px;
}

.proj-title-row .proj-title {
  margin: 0;
}

.proj-title-cta {
  flex-shrink: 0;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .proj-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
}

/* Hairline divider */
.proj-rule {
  border: none;
  border-top: 1px solid var(--color-line);
  margin: 40px 0;
}

/* Metadata grid — Role / Tools / Timeline / Type in columns */
.proj-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 24px 40px;
  margin-bottom: 48px;
}

.proj-meta-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Small label above each meta value */
.proj-meta-label {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.proj-meta-value {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 300;
  color: var(--color-text);
  line-height: 1.5;
}

/* One-sentence italic summary */
.proj-summary {
  font-family: var(--font-serif);
  font-size: clamp(18px, 2.5vw, 26px);
  font-weight: 300;
  font-style: italic;
  color: var(--color-text);
  line-height: 1.6;
  max-width: 720px;
  margin: 0 0 56px;
}

/* ── IMAGE PLACEHOLDERS ──────────────────────────────────────
   Full-width and sectional image areas.
   Replace the div with <img> when ready.
─────────────────────────────────────────────────────────── */

/* Full-width hero image area */
.proj-img-full {
  width: 100%;
  min-height: 480px;
  background-color: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
}

/* Half-width or inline image area */
.proj-img-half {
  width: 100%;
  min-height: 320px;
  background-color: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Label inside placeholder */
.proj-img-label {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-line);
}

/* ── NUMBERED SECTIONS ───────────────────────────────────────
   Each case study section: [01] RESEARCH & DISCOVERY etc.
─────────────────────────────────────────────────────────── */
.proj-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 72px clamp(24px, 5vw, 80px);
  border-top: 1px solid var(--color-line);
}

/* [01] index number */
.proj-section-idx {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--color-muted);
  display: block;
  margin-bottom: 16px;
}

/* Section title — serif, mid-size */
.proj-section-title {
  font-family: var(--font-serif);
  font-size: clamp(24px, 3.5vw, 40px);
  font-weight: 300;
  color: var(--color-text);
  line-height: 1.15;
  margin: 0 0 40px;
}

/* Two-column layout for section content (label + body) */
.proj-cols {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 24px 48px;
  margin-bottom: 36px;
}

/* Left column — small uppercase label */
.proj-sub {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
  padding-top: 4px;       /* optical alignment with first line of body */
}

/* Right column — body text */
.proj-body {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 300;
  color: var(--color-text);
  line-height: 1.95;
}

/* ── STATS ROW ───────────────────────────────────────────────
   Key numbers displayed in a bordered grid — project scale,
   timeline, community size, etc.
─────────────────────────────────────────────────────────── */
.proj-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  border: 1px solid var(--color-line);
  margin: 48px 0;
}

.proj-stat-item {
  padding: 28px 28px 24px;
  border-right: 1px solid var(--color-line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.proj-stat-item:last-child {
  border-right: none;
}

/* Large serif number */
.proj-stat-num {
  font-family: var(--font-serif);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 300;
  color: var(--color-text);
  line-height: 1;
}

.proj-stat-label {
  font-family: var(--font-sans);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* ── PROCESS STEPS ───────────────────────────────────────────
   Numbered sequential stages — journey map, workflow steps.
─────────────────────────────────────────────────────────── */
.proj-steps {
  display: flex;
  flex-direction: column;
  margin: 32px 0;
}

.proj-step {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 0 24px;
  padding: 20px 0;
  border-top: 1px solid var(--color-line);
  align-items: baseline;
}

.proj-step:last-child {
  border-bottom: 1px solid var(--color-line);
}

/* Muted serif step number */
.proj-step-num {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 300;
  color: var(--color-line);
  line-height: 1.5;
}

.proj-step-title {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: 4px;
}

.proj-step-desc {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 300;
  color: var(--color-muted);
  line-height: 1.75;
}

/* ── NUMBERED ITEMS ──────────────────────────────────────────
   Findings, features, pain points — each with a number,
   a bold title, and a short description.
─────────────────────────────────────────────────────────── */
.proj-items {
  display: flex;
  flex-direction: column;
  margin: 24px 0;
}

.proj-item {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 0 20px;
  padding: 18px 0;
  border-top: 1px solid var(--color-line);
}

.proj-item:last-child {
  border-bottom: 1px solid var(--color-line);
}

/* Small sans number */
.proj-item-num {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--color-muted);
  padding-top: 3px;
}

.proj-item-title {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text);
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}

.proj-item-desc {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 300;
  color: var(--color-muted);
  line-height: 1.75;
}

/* ── CALLOUT BLOCK ───────────────────────────────────────────
   Design challenge, HMW, or key statement.
   Left-ruled, slightly tinted background.
─────────────────────────────────────────────────────────── */
.proj-callout {
  border-left: 2px solid var(--color-text);
  padding: 22px 28px;
  margin: 36px 0;
  background: rgba(200, 205, 216, 0.07);
}

.proj-callout-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 10px;
}

.proj-callout-text {
  font-family: var(--font-serif);
  font-size: clamp(16px, 2vw, 21px);
  font-weight: 300;
  font-style: italic;
  color: var(--color-text);
  line-height: 1.55;
}

/* ── METHOD TAGS ─────────────────────────────────────────────
   Small bordered pills for listing methods, tools, or types.
─────────────────────────────────────────────────────────── */
.proj-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.proj-tag {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  border: 1px solid var(--color-line);
  padding: 6px 14px;
  line-height: 1;
}

/* ── QUOTE BLOCK ─────────────────────────────────────────────
   User quotes / testimonials from testing.
─────────────────────────────────────────────────────────── */
.proj-quote {
  border-left: 1px solid var(--color-line);
  padding: 10px 20px;
  margin: 20px 0 8px;
}

.proj-quote-text {
  font-family: var(--font-serif);
  font-size: 14px;
  font-style: italic;
  color: var(--color-text);
  line-height: 1.65;
}

.proj-quote-attr {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--color-muted);
  margin-top: 8px;
}

/* ── TWO-COLUMN FACTS ────────────────────────────────────────
   Side-by-side pairs — before/after, question/answer.
─────────────────────────────────────────────────────────── */
.proj-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--color-line);
  border: 1px solid var(--color-line);
  margin: 32px 0;
}

.proj-two-col-cell {
  background: var(--color-bg);
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.proj-two-col-label {
  font-family: var(--font-sans);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.proj-two-col-text {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 300;
  color: var(--color-text);
  line-height: 1.75;
}

/* Placeholder text block — dotted border, prompts user to fill */
.proj-placeholder {
  border: 1px dashed var(--color-line);
  padding: 20px 24px;
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--color-muted);
  letter-spacing: 0.08em;
  line-height: 1.7;
  margin-top: 8px;
}

/* ── SECTION IMAGE AREAS ─────────────────────────────────────
   Used inside numbered sections for process / prototype shots.
─────────────────────────────────────────────────────────── */
.proj-section-img {
  width: 100%;
  min-height: 360px;
  background-color: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 40px 0;
}

.proj-section-img--short {
  min-height: 240px;
}

/* Two-up image grid */
.proj-img-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 40px 0;
}

/* ── PROJECT NAV FOOTER ──────────────────────────────────────
   Back to work + Next project links at the bottom.
─────────────────────────────────────────────────────────── */
.proj-nav-footer {
  max-width: 1100px;
  margin: 0 auto;
  padding: 60px clamp(24px, 5vw, 80px) 80px;
  border-top: 1px solid var(--color-line);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 20px;
}

.proj-nav-footer a {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.proj-nav-footer a:hover {
  color: var(--color-text);
}

.proj-nav-footer-next {
  font-family: var(--font-serif);
  font-size: clamp(18px, 2.5vw, 28px);
  font-weight: 300;
  color: var(--color-text) !important;
  display: block;
  margin-top: 8px;
  letter-spacing: -0.01em;
}

/* ── SECTION LAYOUT (used by project-roadtrip) ──────────────
─────────────────────────────────────────────────────────── */
.proj-section-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 72px clamp(24px, 5vw, 80px);
}

.proj-section-label {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--color-muted);
  display: block;
  margin-bottom: 28px;
}

.proj-section-heading {
  font-family: var(--font-serif);
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 300;
  color: var(--color-text);
  line-height: 1.25;
  margin: 0 0 24px;
}

.proj-section--alt {
  background: var(--color-surface);
}

/* Two-column body layout: left heading / right body text */
.proj-body-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 64px;
  align-items: start;
}

.proj-body-left .proj-section-heading { margin-bottom: 0; }

.proj-paragraph {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 300;
  color: var(--color-text);
  line-height: 2.0;
  margin-bottom: 16px;
}
.proj-paragraph:last-child { margin-bottom: 0; }

/* Three-card grid for design decisions */
.proj-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--color-line);
  border: 1px solid var(--color-line);
}

.proj-card {
  background: var(--color-bg);
  padding: 32px 28px;
}

.proj-card-num {
  display: block;
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--color-muted);
  margin-bottom: 18px;
}

.proj-card-title {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text);
  margin-bottom: 12px;
  letter-spacing: 0.02em;
}

.proj-card-body {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 300;
  color: var(--color-muted);
  line-height: 1.85;
}

.proj-card-body code {
  font-family: 'SFMono-Regular', 'Consolas', monospace;
  font-size: 11px;
  background: rgba(0,0,0,0.06);
  padding: 1px 5px;
  border-radius: 2px;
}

/* Feature list with inline labels */
.proj-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.proj-feature-list li {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 300;
  color: var(--color-text);
  line-height: 1.75;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-line);
}

.proj-feature-list li:first-child { border-top: 1px solid var(--color-line); }

.proj-feature-label {
  font-weight: 400;
  margin-right: 4px;
}

/* Pill link button */
.proj-link-pill {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text);
  border: 1px solid var(--color-text);
  padding: 10px 22px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.proj-link-pill:hover {
  background: var(--color-text);
  color: var(--color-bg);
}

/* CTA block */
.proj-cta {
  border-top: 1px solid var(--color-line);
  padding: 80px clamp(24px, 5vw, 80px);
  text-align: center;
}

.proj-cta-label {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 16px;
}

.proj-cta-heading {
  font-family: var(--font-serif);
  font-size: clamp(36px, 6vw, 64px);
  font-weight: 300;
  color: var(--color-text);
  margin-bottom: 36px;
  line-height: 1.1;
}

.proj-cta-link {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--color-text);
  padding-bottom: 3px;
  transition: opacity 0.2s;
}
.proj-cta-link:hover { opacity: 0.5; }

/* Footer bar */
.proj-footer {
  border-top: 1px solid var(--color-line);
  padding: 28px clamp(24px, 5vw, 80px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.proj-footer-back {
  color: var(--color-muted);
  text-decoration: none;
  transition: color 0.2s;
}
.proj-footer-back:hover { color: var(--color-text); }

/* ── RESPONSIVE ──────────────────────────────────────────────
─────────────────────────────────────────────────────────── */
@media (max-width: 700px) {

  .proj-title {
    font-size: clamp(36px, 10vw, 60px);
  }

  .proj-cols {
    grid-template-columns: 1fr;    /* stack label above body */
    gap: 8px 0;
  }

  .proj-stats {
    grid-template-columns: 1fr 1fr;
  }

  .proj-stat-item:nth-child(even) {
    border-right: none;
  }

  .proj-step {
    grid-template-columns: 36px 1fr;
    gap: 0 16px;
  }

  .proj-item {
    grid-template-columns: 32px 1fr;
    gap: 0 14px;
  }

  .proj-two-col {
    grid-template-columns: 1fr;
  }

  .proj-meta-grid {
    grid-template-columns: 1fr 1fr;
  }

  .proj-img-grid {
    grid-template-columns: 1fr;
  }

  .proj-nav-footer {
    flex-direction: column;
    gap: 32px;
  }

  .proj-body-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .proj-cards-grid {
    grid-template-columns: 1fr;
  }

  .proj-phone-wrap { gap: 24px; }
  .proj-phone { width: 220px; }
  .proj-photo-grid-2 { grid-template-columns: 1fr; }
  .proj-heuristic-row { grid-template-columns: 1fr; gap: 8px; }
  .proj-heuristic-header { display: none; }
  .proj-heuristic-sev { text-align: left; }
  .proj-browser-url { display: none; }
}

/* ── DEVICE FRAMES ─────────────────────────────────────────
   iPhone and browser chrome mockups for project pages.
─────────────────────────────────────────────────────────── */

/* Centers one or more phone frames */
.proj-phone-wrap {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
  padding: 56px 0;
  flex-wrap: wrap;
}

/* iPhone shell */
.proj-phone {
  position: relative;
  width: 270px;
  background: var(--color-accent);
  border-radius: 52px;
  padding: 16px 10px 20px;
  box-shadow:
    0 0 0 2px #3a4150,
    0 28px 56px rgba(0, 0, 0, 0.22),
    0 8px 20px rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
}

/* Dynamic island */
.proj-phone::before {
  content: '';
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 76px;
  height: 22px;
  background: #1a1e24;
  border-radius: 20px;
  z-index: 10;
}

/* Home indicator bar */
.proj-phone::after {
  content: '';
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: rgba(255,255,255,0.25);
  border-radius: 4px;
}

.proj-phone-screen {
  border-radius: 40px;
  overflow: hidden;
  width: 100%;
  background: #000;
  display: block;
}

.proj-phone-screen img {
  width: 100%;
  display: block;
}

.proj-phone-label {
  text-align: center;
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-top: 14px;
}

/* ── BROWSER FRAME ────────────────────────────────────────── */
.proj-browser-wrap {
  padding: 48px clamp(24px, 5vw, 80px);
  max-width: 1100px;
  margin: 0 auto;
}

.proj-browser {
  border: 1px solid var(--color-line);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.10);
}

.proj-browser-bar {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-line);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.proj-browser-dots {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.proj-browser-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-line);
}

.proj-browser-url {
  flex: 1;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: 20px;
  padding: 4px 14px;
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--color-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.proj-browser-screen {
  background: #fff;
}

.proj-browser-screen img {
  width: 100%;
  display: block;
}

/* ── PHOTO DISPLAY ────────────────────────────────────────── */
.proj-photo-full {
  width: 100%;
  overflow: hidden;
}

.proj-photo-full img {
  width: 100%;
  display: block;
  object-fit: cover;
  max-height: 600px;
}

.proj-photo-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
}

.proj-photo-grid-2 img {
  width: 100%;
  display: block;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

.proj-photo-grid-3 {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 3px;
}

.proj-photo-grid-3 img {
  width: 100%;
  display: block;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

.proj-photo-grid-3 img:first-child {
  aspect-ratio: auto;
  grid-row: span 2;
}

.proj-photo-caption {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  padding: 12px 0 0;
}

/* ── HEURISTIC CHART ──────────────────────────────────────── */
.proj-heuristic {
  width: 100%;
  border-top: 1px solid var(--color-line);
  margin-top: 8px;
}

.proj-heuristic-header {
  display: grid;
  grid-template-columns: 2fr 3fr 100px;
  gap: 24px;
  padding: 10px 0 12px;
  border-bottom: 1.5px solid var(--color-text);
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.proj-heuristic-row {
  display: grid;
  grid-template-columns: 2fr 3fr 100px;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--color-line);
  align-items: start;
}

.proj-heuristic-name {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--color-text);
  line-height: 1.5;
}

.proj-heuristic-issue {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--color-muted);
  line-height: 1.65;
}

.proj-heuristic-sev {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-align: right;
}

.proj-heuristic-sev.sev-4 { color: #b03030; }
.proj-heuristic-sev.sev-3 { color: #b06820; }
.proj-heuristic-sev.sev-2 { color: var(--color-muted); }

/* ── ARCHITECTURE / FLOW DIAGRAM ──────────────────────────── */
.proj-arch {
  padding: 48px clamp(24px, 5vw, 80px);
  max-width: 1100px;
  margin: 0 auto;
}

.proj-arch-stages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--color-line);
  border: 1px solid var(--color-line);
}

.proj-arch-stage {
  background: var(--color-bg);
  padding: 32px 28px;
}

.proj-arch-stage-num {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 14px;
  display: block;
}

.proj-arch-stage-title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 400;
  color: var(--color-text);
  margin-bottom: 10px;
  line-height: 1.3;
}

.proj-arch-stage-desc {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--color-muted);
  line-height: 1.7;
}

.proj-arch-items {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.proj-arch-item {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--color-muted);
  padding-left: 14px;
  position: relative;
  line-height: 1.5;
}

.proj-arch-item::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--color-line);
}

@media (max-width: 768px) {
  .proj-phone-wrap { gap: 24px; }
  .proj-phone { width: 220px; }
  .proj-photo-grid-2 { grid-template-columns: 1fr; }
  .proj-photo-grid-3 { grid-template-columns: 1fr; }
  .proj-arch-stages { grid-template-columns: 1fr; }
  .proj-heuristic-row { grid-template-columns: 1fr; gap: 6px; }
  .proj-heuristic-header { display: none; }
  .proj-heuristic-sev { text-align: left; }

  /* Collapse inline-styled 2-col grids to single column on mobile.
     !important is required to beat the inline style attribute. */
  div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Wizard flow: 5-across becomes a vertical stack */
  div[style*="grid-template-columns:repeat(5,1fr)"] {
    grid-template-columns: 1fr !important;
  }
}


/* ── CHAPTER NAV ─────────────────────────────────────────────
   Fixed vertical rail of section numbers, right edge of the
   viewport. Only shown when there's enough margin outside the
   1100px content column for it not to crowd the text (>=1400px).
   Highlights the section currently centered in the viewport.
─────────────────────────────────────────────────────────── */
.proj-section {
  scroll-margin-top: 90px; /* clears the fixed .proj-nav on anchor jump */
}

.proj-chapters {
  display: none;
  position: fixed;
  right: 36px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.proj-chapter-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--color-muted);
  text-decoration: none;
}

.proj-chapter-dash {
  width: 12px;
  height: 1px;
  background: var(--color-line);
  transition: width 0.25s ease, background-color 0.25s ease;
}

.proj-chapter-link:hover,
.proj-chapter-link.is-active {
  color: var(--color-text);
}

.proj-chapter-link:hover .proj-chapter-dash,
.proj-chapter-link.is-active .proj-chapter-dash {
  width: 24px;
  background: var(--color-text);
}

/* Section title — hidden at rest, slides in on hover so the rail
   stays a quiet numbers-only strip until the reader reaches for it */
.proj-chapter-label {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.proj-chapter-link:hover .proj-chapter-label {
  opacity: 1;
  transform: translateX(0);
}

@media (min-width: 1280px) {
  .proj-chapters {
    display: flex;
  }
}


/* ============================================================
   DOOR FACE — PHONE MOCKUPS & PHASE COMPARISON
   Pure-CSS phone shell (no frame PNG needed). The screen area
   scrolls; the shell stays fixed. Used for the product gallery
   and the Phase 1 → Phase 2 evolution comparison.
============================================================ */

/* Scrollable phone shell */
.df-phone {
  position: relative;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  background: #1c1c1e;
  border-radius: 44px;
  padding: 10px;
  box-shadow: 0 22px 55px rgba(28, 28, 30, 0.18);
}

.df-phone-screen {
  position: relative;
  width: 100%;
  aspect-ratio: 1419 / 2796;     /* snug to a single-screen shot; long shots scroll */
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 34px;
  background: #f6f3ea;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.df-phone-screen::-webkit-scrollbar { display: none; }

.df-phone-screen img {
  display: block;
  width: 100%;
  height: auto;
}

/* Small scroll affordance under each phone */
.df-phone-hint {
  display: block;
  text-align: center;
  margin-top: 14px;
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* Caption under a phone / comparison */
.df-caption {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.65;
  color: var(--color-muted);
  margin-top: 12px;
}
.df-caption strong { color: var(--color-text); font-weight: 400; }

/* ── PHASE 1 → PHASE 2 COMPARISON (static, side by side) ──────
   Two flat screenshots with phase labels — for explaining the
   information-architecture / design decisions, not for scrolling. */
.df-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin: 28px 0 8px;
  align-items: start;
}

.df-compare-cell {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.df-phase-tag {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.df-phase-tag--now { color: var(--color-text); }

.df-shot {
  width: 100%;
  max-width: 280px;            /* phone-sized, never full-bleed */
  margin: 0;
  /* the mockup PNGs already carry an iPhone frame on a transparent
     background — no box, border, or fill behind them */
}
.df-shot img { display: block; width: 100%; height: auto; }

/* ── FINAL PRODUCT GALLERY — row of scrollable phones ───────── */
.df-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 40px 28px;
  margin: 32px 0 8px;
}
.df-gallery-item { display: flex; flex-direction: column; }

@media (max-width: 700px) {
  .df-compare { gap: 16px; }
  .df-shot { border-radius: 14px; }
}