/* Site-level layout and page rules, built on top of the Classical design
   system (styles.css). Grid layouts live in classes here (not inline
   styles) so the responsive breakpoint at the bottom can collapse them. */

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
}
a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent); text-decoration: underline; }
::selection { background: var(--color-accent-100); }

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--space-8);
}
.container--rule { border-top: 1px solid var(--color-divider); }

/* — nav — */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter: blur(6px);
  padding-inline: var(--space-8);
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: var(--space-2);
}
.site-nav .nav-brand { font-family: var(--font-heading); font-size: 19px; letter-spacing: 0.01em; }
.site-nav .nav-links { display: flex; gap: var(--space-6); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.site-nav .nav-links a { color: inherit; }

/* — section kicker (numbered heading + hairline rule) — */
.section-kicker { display: flex; align-items: baseline; gap: var(--space-4); margin-bottom: var(--space-6); }
.kicker-label {
  font-family: var(--font-heading); font-size: 13px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--color-accent); font-variant-numeric: tabular-nums;
}
.kicker-rule { flex: 1; height: 1px; background: var(--color-divider); }

/* — grid layouts — */
.grid-2 { display: grid; gap: calc(var(--space-8) * 1.4); align-items: start; }
.grid-2--lead { grid-template-columns: 1.15fr 1fr; }
.grid-2--reverse { grid-template-columns: 1fr 1.1fr; }
.grid-2--equal { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }

.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack--tight { display: flex; flex-direction: column; gap: var(--space-3); }
.stack--loose { display: flex; flex-direction: column; gap: var(--space-6); }

.detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4) var(--space-6); }
.detail-label {
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-accent); margin-bottom: var(--space-1);
}
.detail-value { font-size: 15px; }

.eyebrow {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent); margin-bottom: var(--space-2);
}
.subhead { font-size: 32px; font-weight: 400; margin: 0 0 var(--space-3); }
.body-copy { text-align: justify; hyphens: auto; line-height: 1.75; font-size: 16px; margin: 0 0 var(--space-4); }
.body-copy:last-child { margin-bottom: 0; }
.callout-label {
  font-family: var(--font-heading); font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase;
  margin: var(--space-6) 0 var(--space-3); color: var(--color-accent);
}

/* — image plates & captions — */
.figure { margin: 0; }
.figure figcaption { margin-top: var(--space-1); }
.plate-frame { width: 100%; }
.plate-frame img { width: 100%; height: 100%; display: block; object-fit: cover; }
.plate-frame--contain img { object-fit: contain; }
.ratio-3-4 { aspect-ratio: 3 / 4; }
.ratio-2-1 { aspect-ratio: 2 / 1; }
.ratio-16-9 { aspect-ratio: 16 / 9; }
.ratio-16-10 { aspect-ratio: 16 / 10; }
.ratio-3-2 { aspect-ratio: 3 / 2; }

/* — architecture diagram (auditor support system) — */
.diagram-card { border: 1px solid var(--color-divider); border-radius: var(--radius-md); padding: var(--space-6); }
.diagram-title {
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-accent); margin-bottom: var(--space-4);
}
.diagram-rows { display: flex; flex-direction: column; gap: var(--space-2); }
.diagram-row {
  display: grid; grid-template-columns: 92px 1fr; gap: var(--space-4); align-items: center;
  padding: var(--space-3); border: 1px solid var(--color-divider); border-radius: var(--radius-sm);
}
.diagram-row-label {
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.diagram-row-value { font-size: 14px; }
.diagram-row--gate {
  border: 2px solid var(--color-accent); border-radius: var(--radius-sm);
  background: var(--color-accent-100);
}
.diagram-row--gate .diagram-row-label { color: var(--color-accent-800); }
.diagram-row--gate .diagram-row-value { color: var(--color-accent-900); }

/* — divided columns (roadmap method, background) — */
.divided-cols { display: grid; gap: 0; --col-pad: var(--space-6); }
.divided-cols > * { padding-inline: var(--col-pad); }
.divided-cols > *:first-child { padding-left: 0; }
.divided-cols > *:last-child { padding-right: 0; }
.divided-cols > *:not(:last-child) { border-right: 1px solid var(--color-divider); }
.divided-cols--4 { grid-template-columns: repeat(4, 1fr); }
.divided-cols--tight { --col-pad: var(--space-4); }

.step-number {
  font-family: var(--font-heading); font-size: 26px; color: var(--color-accent);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.step-title { font-size: 13px; font-weight: 600; margin: var(--space-2) 0 var(--space-1); }
.step-copy { font-size: 12px; line-height: 1.6; color: color-mix(in srgb, var(--color-text) 65%, transparent); }

.role-title { font-size: 21px; font-weight: 400; margin: 0 0 var(--space-1); }
.role-org {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-accent); margin-bottom: var(--space-3);
}
.role-copy { font-size: 15px; line-height: 1.7; margin: 0; }

/* — hero — */
.hero { padding-top: calc(var(--space-8) * 2.4); padding-bottom: var(--space-8); }
.hero-eyebrow {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-accent); font-variant-numeric: tabular-nums;
}
.hero-title {
  font-size: clamp(44px, 6vw, 76px); font-weight: 400; line-height: 1.04;
  margin: var(--space-4) 0 var(--space-6); max-width: 16ch;
}
.hero-intro {
  border-top: 1px solid var(--color-divider); padding-top: var(--space-6);
}
.hero-intro p { text-align: justify; hyphens: auto; font-size: 17px; line-height: 1.7; margin: 0; }
.hero-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }

/* — lead project — */
.lead-title { font-size: 40px; font-weight: 400; margin: 0 0 var(--space-2); }
.lead-dek {
  font-family: var(--font-heading); font-size: 21px; line-height: 1.4; font-style: italic;
  margin: 0 0 var(--space-4); color: color-mix(in srgb, var(--color-text) 75%, transparent);
}
.pipeline-step { display: flex; gap: var(--space-3); align-items: baseline; font-size: 14px; }
.pipeline-step-n { font-variant-numeric: tabular-nums; color: var(--color-accent); }

/* — footer — */
.footer-grid { display: grid; grid-template-columns: 1fr auto; gap: var(--space-8); align-items: end; }
.footer-title { font-family: var(--font-heading); font-size: 34px; font-weight: 400; margin: 0 0 var(--space-3); max-width: 20ch; }
.footer-copy { font-size: 15px; line-height: 1.7; max-width: 52ch; margin: 0; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.footer-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.footer-fine-print {
  font-size: 11px; letter-spacing: 0.06em; color: color-mix(in srgb, var(--color-text) 45%, transparent);
}

/* — site swatches (Lumina brand dots) — */
.swatches { display: flex; gap: 6px; margin-top: var(--space-3); }
.swatch { width: 18px; height: 18px; border-radius: 50%; }

/* — responsive — */
@media (max-width: 860px) {
  .grid-2,
  .grid-2--equal {
    grid-template-columns: 1fr !important;
    gap: var(--space-6) !important;
  }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .divided-cols--4 {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .divided-cols > * {
    padding-inline: 0 !important;
    padding-bottom: var(--space-4);
    border-right: none !important;
    border-bottom: 1px solid var(--color-divider);
  }
  .divided-cols > *:last-child { border-bottom: none; padding-bottom: 0; }
  .footer-grid { grid-template-columns: 1fr; align-items: start; }
}

@media (max-width: 560px) {
  .grid-3 { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
  .site-nav .nav-links { gap: var(--space-4); }
}