/* One type system for the portfolio, case stories and explanatory diagrams.
   Change roles here; layout styles must not define their own type scales. */
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/InterVariable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  font-family: "Inter", Arial, sans-serif;
  font-size: 100%;
  font-optical-sizing: auto;
  font-feature-settings: "liga" 1, "calt" 1;
  --type-display: 4rem;
  --type-section: 3rem;
  --type-heading: 2rem;
  --type-subheading: 1.5rem;
  --type-step: 1.125rem;
  --type-lead: 1.25rem;
  --type-body: 1.125rem;
  --type-copy: 1rem;
  --type-caption: .875rem;
  --type-label: .75rem;
  --type-metric: 2.5rem;
  --weight-body: 400;
  --weight-medium: 500;
  --weight-heading: 600;
  --leading-heading: 1.2;
  --leading-copy: 1.6;
  --leading-caption: 1.5;
  --tracking-heading: -.025em;
  --tracking-label: .065em;
  --body-ink: #454545;
}

body {
  font-size: var(--type-copy);
  line-height: var(--leading-copy);
  font-weight: var(--weight-body);
}
button, input, select, textarea { font: inherit; }
p { line-height: var(--leading-copy); }
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--ink);
  text-wrap: pretty;
}
strong, b { font-weight: var(--weight-heading); }
small { font-size: var(--type-caption); }

/* Page titles → portfolio sections → case sections → local decisions. */
h1 { font-size: var(--type-display); line-height: 1.06; letter-spacing: -.04em; }
.section-heading h2, .section-label, .side-project h2 {
  font-size: var(--type-section);
  line-height: 1.12;
  letter-spacing: -.035em;
}
h2, .project-info h3, .next-project > span:last-child {
  font-size: var(--type-heading);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}
h3, .experience-row h3 { font-size: var(--type-subheading); }
.case-visual h3 { font-size: var(--type-step); line-height: 1.35; letter-spacing: -.015em; }
.case-visual .entry-fan h3, .case-visual .receipt-branch h3 { font-size: var(--type-subheading); }
.case-visual .visual-title h2 { font-size: var(--type-heading); }

/* Reading copy: a single scale and line rhythm across all case studies. */
.intro-summary, .case-subtitle { font-size: var(--type-lead); line-height: 1.55; color: var(--body-ink); }
.case-subtitle { font-weight: var(--weight-medium); }
.case-lead, .story p:not(.eyebrow), .about p {
  font-size: var(--type-body);
  line-height: 1.7;
  color: var(--body-ink);
}
.project-description, .experience-row > p:last-child, .side-project > div:last-child > p,
.case-meta dd, .case-visual .visual-title > p:last-child {
  font-size: var(--type-copy);
  line-height: var(--leading-copy);
  color: var(--body-ink);
}
.story h2 { margin-bottom: 1.5rem; }
.story p:not(.eyebrow) { margin-bottom: 1.25rem; }
.story > div > :last-child { margin-bottom: 0; }
.section-heading { margin-bottom: 2.25rem; }
.section-heading > p { max-width: 26rem; }
.intro-details, .project-role, .experience-role, .work-sharing-note,
.section-heading > p, .case-figure figcaption, #image-viewer > p, footer,
.story p.note {
  font-size: var(--type-caption);
  line-height: var(--leading-caption);
  color: var(--muted);
}
.intro-kicker { font-size: var(--type-copy); font-weight: var(--weight-medium); line-height: 1.5; }
.project-role, .experience-role { font-weight: var(--weight-medium); }

/* Context labels are small and uppercase; they never compete with headings. */
.category, .eyebrow, .case-meta dt, .visual-kicker, .route-label, .lane-label, .step-tag,
.branch-answer, .scope-strip > span, .yield-mark, .optional-label,
.amount-destination > span, .receipt-equation span, .balance-rule > span,
.appointment-ticket > span, .payment-state > span, .concern-matrix thead th {
  font-size: var(--type-label);
  line-height: var(--leading-caption);
  font-weight: var(--weight-heading);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.eyebrow, .category, .case-meta dt { color: var(--muted); }
.story > .eyebrow { padding-top: .35rem; }
.case-meta dd { margin: 0; }
.case-meta dt { margin-bottom: .5rem; }

/* Controls, links and disclosure labels share one readable style. */
nav, .text-link, .back, .case-link, .primary-link, .secondary-link,
.close-viewer, .size-toggle, .related-work summary, .visual-more > summary {
  font-size: var(--type-caption);
  font-weight: var(--weight-medium);
  line-height: var(--leading-caption);
  letter-spacing: 0;
}
.related-work summary { font-size: var(--type-copy); }

/* Diagram evidence uses consistent headings, captions, labels and outcomes. */
.case-visual p, .case-visual figcaption, .action-arrow > span, .merge-route > span,
.access-start > span:last-child, .scope-strip, .strategy-constraints li,
.start-pill, .mini-branches b, .evidence-ribbon, .receipt-branch dt,
.receipt-branch dd small, .paid-stamp, .or-token, .case-visual .visual-swipe {
  font-size: var(--type-caption);
  line-height: var(--leading-caption);
  letter-spacing: 0;
}
.case-visual .visual-caption { font-size: var(--type-caption); }
.case-visual :is(.visual-kicker, .lane-label, .route-label, .step-tag) {
  font-size: var(--type-label);
  line-height: var(--leading-caption);
  font-weight: var(--weight-heading);
  letter-spacing: var(--tracking-label);
}
.action-arrow > span, .mini-branches b, .scope-strip b,
.strategy-constraints li strong, .start-pill, .paid-stamp { font-weight: var(--weight-medium); }
.visual-result strong, .yield-total strong, .amount-destination strong,
.choice-question strong, .trust-foundation strong, .access-start strong,
.balance-rule strong, .payment-state strong, .evidence-ribbon strong {
  font-size: var(--type-copy);
  line-height: var(--leading-caption);
  font-weight: var(--weight-heading);
  letter-spacing: -.01em;
}
.choice-question strong { font-size: var(--type-step); }
.concern-matrix th, .concern-matrix td {
  font-size: var(--type-caption);
  line-height: var(--leading-copy);
  font-weight: var(--weight-body);
}
.concern-matrix tbody th { font-size: var(--type-copy); font-weight: var(--weight-medium); }
.concern-matrix thead th { font-size: var(--type-label); font-weight: var(--weight-heading); }
.receipt-branch dd { font-size: var(--type-step); line-height: 1.5; font-weight: var(--weight-medium); }
.receipt-branch del { font-size: var(--type-caption); }

/* Numeric emphasis is reserved for actual amounts and reported results. */
.results strong, .receipt-equation strong, .appointment-ticket strong, .payment-state b {
  font-size: var(--type-metric);
  font-weight: var(--weight-heading);
  line-height: 1.15;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
.results span { font-size: var(--type-caption); line-height: var(--leading-caption); }
.receipt-branch dd { font-variant-numeric: tabular-nums; }

/* Diagram symbols are not text levels. */
.visual-result > span, .merge-route i, .question-glyph, .math-join,
.yield-total > span, .receipt-equation i, .decision-diamond::after,
.segment-symbol, .visual-more > summary::after, .zoom-hint {
  font-size: 1.5rem;
  line-height: 1;
  font-weight: var(--weight-body);
  letter-spacing: 0;
}
.referral-icon { font-size: 2rem; line-height: 1; }
.service-timeline li > span { font-size: var(--type-label); line-height: 1; font-weight: var(--weight-medium); }
.service-timeline li:not(:last-child)::after { font-size: 1.25rem; line-height: 1; }

/* Give longer, now-readable captions room without enlarging the screenshots. */
.wireflow .flow-step h3, .monitor-grid h3 { min-height: 3.375rem; }
.wireflow { grid-template-columns: minmax(0,1fr) 86px minmax(0,1fr) 86px minmax(0,1fr) 86px minmax(0,1fr); }
.booking-setup { grid-template-columns: 1fr 86px 1fr; }
.service-timeline h3 { min-height: 3.375rem; }
.optional-label { position:static; margin-left:auto; align-self:flex-start; }
.yield-layer.incentives { flex-wrap:wrap; }
.yield-layer.incentives > div { flex:1; }
.case-visual .visual-title { max-width: 54rem; }
.case-visual .visual-title h2 { margin-bottom: .75rem; }
.case-visual .visual-title > p:last-child { max-width: 72ch; }
.case-visual .visual-kicker { margin-bottom: .75rem; }
.case-visual .visual-swipe { font-size: var(--type-label); }
.case-visual .architecture-service-title h3,.case-visual .architecture-contact h3{font-size:var(--type-subheading)}
.architecture-page-sections h4{font-size:var(--type-step);line-height:1.35;letter-spacing:-.015em}
.architecture-index,.architecture-form-label{font-size:var(--type-label);line-height:var(--leading-caption);font-weight:var(--weight-medium)}
.architecture-trust dt,.architecture-trust dd{font-size:var(--type-caption);line-height:var(--leading-caption)}
.architecture-trust dt{font-weight:var(--weight-heading)}

@media (max-width: 1000px) {
  :root { --type-display: 3.5rem; --type-section: 2.5rem; }
  .portfolio-intro { grid-template-columns: 1.7fr 1fr; }
}
@media (max-width: 650px) {
  :root {
    --type-display: 2.75rem;
    --type-section: 2rem;
    --type-heading: 1.625rem;
    --type-subheading: 1.25rem;
    --type-lead: 1.125rem;
    --type-body: 1rem;
    --type-metric: 2rem;
  }
  h1 { letter-spacing: -.035em; }
  .header { gap:8px; }
  .wordmark img { width:100px; }
  nav a { padding-inline:7px; white-space:nowrap; }
  nav a:last-child { padding-inline:10px; }
  .section-heading { flex-wrap:wrap; gap:.75rem; margin-bottom:1.75rem; }
  .section-heading > p { max-width:none; }
  .story > .eyebrow { padding-top:0; }
  .service-timeline h3 { min-height:0; }
  .receipt-equation { grid-template-columns: 1fr auto 1fr; gap:.75rem; }
  .receipt-equation > div { padding:1rem .75rem; }
  .receipt-equation > div:first-child { grid-column:1 / -1; text-align:center; }
  .receipt-equation > i:first-of-type { display:none; }
  .receipt-equation > .received { grid-row:2; grid-column:1; }
  .receipt-equation > i:last-of-type { grid-row:2; grid-column:2; }
  .receipt-equation > .unresolved { grid-row:2; grid-column:3; }
  .wireflow > .action-arrow { flex-basis:86px; }
  .booking-setup { grid-template-columns:1fr 86px 1fr; gap:8px; }
  .booking-setup .flow-step h3 { min-height:5rem; }
  .booking-setup .step-tag { min-height:2.25rem; }
  .payment-evidence > .action-arrow { flex-basis:48px; }
  .payment-state { min-width:0; }
  .receipt-branch dl > div { flex-wrap:wrap; }
  .receipt-branch dd { white-space:normal; }
}

.folder-label h3{font-size:var(--type-heading);line-height:1.15;letter-spacing:-.035em}
.folder-label p{font-size:var(--type-caption);line-height:1.45}
.folder-number{font-size:var(--type-label);line-height:1.3;letter-spacing:.1em;font-weight:var(--weight-medium)}
.folder-open,.folder-project .project-role{font-size:var(--type-caption);line-height:1.5}
.folder-open>span{font-size:var(--type-step)}
@media(max-width:1000px){.folder-label h3{font-size:var(--type-subheading)}}

/* Experience: role and dates remain secondary to company and contribution. */
.experience-dates { margin-top: 9px; color: var(--muted); font-size: var(--type-caption); line-height: var(--leading-caption); font-variant-numeric: tabular-nums; }
.experience-row > p strong { color: var(--ink); font-weight: 600; }
.experience-note { width: 100%; max-width: none; padding: 18px 0 32px; color: var(--muted); font-size: var(--type-caption); line-height: var(--leading-caption); }