/* ============================================================
   CASTLE — castle.rocktalk.holdings
   Design: Technical / Swiss — severe, operational, credible
   Ground: near-black #0A0A0B / off-white #F0EDE8
   Accent: cold steel #4A7FA5 (single restrained signal tone)
   Type: system neo-grotesque display; monospace for labels
   Grid: full-bleed sections, 8pt base, 1px rule furniture
   ============================================================ */

/* ── Tokens ── */
:root {
  /* Color */
  --clr-bg:          #0A0A0B;   /* near-black ground */
  --clr-surface:     #141416;   /* lifted surface */
  --clr-surface-2:   #1C1C1F;   /* second lift */
  --clr-rule:        #2A2A2E;   /* hairline rule */
  --clr-rule-mid:    #3A3A3F;   /* slightly visible rule */
  --clr-text:        #F0EDE8;   /* primary text, near-white warm */
  --clr-text-muted:  #8A8A92;   /* secondary text */
  --clr-text-dim:    #555558;   /* very dim — labels, decorative */
  --clr-accent:      #4A7FA5;   /* cold steel blue */
  --clr-accent-lit:  #6B9EC4;   /* lighter accent for hover */
  --clr-accent-dim:  #2E5472;   /* darker accent */

  /* Spacing — 8pt grid */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* Type scale — modular ×1.25 */
  --t-xs:   0.6875rem; /* 11px — mono labels */
  --t-sm:   0.875rem;  /* 14px */
  --t-base: 1rem;      /* 16px */
  --t-md:   1.125rem;  /* 18px */
  --t-lg:   1.25rem;   /* 20px */
  --t-xl:   1.5625rem; /* 25px */
  --t-2xl:  1.9375rem; /* 31px */
  --t-3xl:  2.4375rem; /* 39px */
  --t-4xl:  3.0625rem; /* 49px */
  --t-hero: clamp(3rem, 7vw + 1rem, 6.5rem);

  /* Radius — severe vocabulary */
  --r-sm: 2px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur-base: 200ms;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  font-size: 16px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Base ── */
body {
  background: var(--clr-bg);
  color: var(--clr-text);
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}

/* ── Layout ── */
.container {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 var(--sp-6);
}

@media (min-width: 768px) {
  .container { padding: 0 var(--sp-12); }
}

/* Section rhythm */
section {
  padding: var(--sp-24) 0;
  border-top: 1px solid var(--clr-rule);
}

.hero { border-top: none; }

/* ── Typography ── */
h1, h2, h3, h4 {
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

/* Monospace section labels — the technical furniture */
.label-mono {
  font-family: "SF Mono", "Fira Code", "Consolas", "Courier New", monospace;
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #A8C6DE; /* eyebrow labels brightened (Drew 2026-08-19) — was accent */
  display: block;
  margin-bottom: var(--sp-6);
}

p {
  max-width: 66ch;
  line-height: 1.65;
  font-size: var(--t-md);
  color: var(--clr-text-muted);
}

p + p { margin-top: var(--sp-4); }

/* Selection */
::selection {
  background: var(--clr-accent);
  color: var(--clr-bg);
}

/* ── Nav ── */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(10, 10, 11, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--clr-rule);
  padding: var(--sp-4) 0;
}

.site-nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
}

.nav-wordmark {
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--t-lg);
  font-weight: 700;
  color: var(--clr-text);
  text-decoration: none;
  letter-spacing: -0.04em;
  user-select: none;
}

.nav-wordmark .mark-accent {
  color: var(--clr-accent);
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-6);
  background: var(--clr-accent);
  color: var(--clr-bg);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: var(--r-sm);
  transition: background var(--dur-fast) var(--ease-out);
  user-select: none;
}

.nav-cta:hover { background: var(--clr-accent-lit); }
.nav-cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--clr-accent);
}

/* ── Hero ── */
.hero {
  padding-top: calc(var(--sp-32) + 56px); /* nav offset + generous space */
  padding-bottom: var(--sp-32);
  border-top: none;
}

.hero-eyebrow {
  margin-bottom: var(--sp-8);
}

.hero-title {
  font-size: var(--t-hero);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.04em;
  color: var(--clr-text);
  margin-bottom: var(--sp-8);
  max-width: 18ch;
}

.hero-title em {
  font-style: normal;
  color: var(--clr-text-muted);
  font-weight: 400;
}

.hero-thesis {
  font-size: var(--t-xl);
  color: var(--clr-text-muted);
  max-width: 52ch;
  line-height: 1.5;
  font-weight: 400;
  margin-bottom: var(--sp-12);
}

.hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-8);
  background: var(--clr-accent);
  color: var(--clr-bg);
  font-size: var(--t-base);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: var(--r-sm);
  transition: background var(--dur-fast) var(--ease-out);
  user-select: none;
}

.btn-primary:hover { background: var(--clr-accent-lit); }
.btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--clr-accent-lit);
}

/* ── Hero rule line — typographic weight under the title ── */
.hero-rule {
  width: 64px;
  height: 2px;
  background: var(--clr-accent);
  margin-bottom: var(--sp-8);
  pointer-events: none;
}

/* ── Section preamble ── */
.section-preamble {
  margin-bottom: var(--sp-12);
  max-width: 720px;
}

.section-heading {
  font-size: var(--t-3xl);
  color: var(--clr-text);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: var(--sp-6);
}

@media (min-width: 768px) {
  .section-heading { font-size: var(--t-4xl); }
}

.section-preamble p {
  color: var(--clr-text-muted);
}

/* ── Problem ── */
.problem-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

@media (min-width: 768px) {
  .problem-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.problem-item {
  padding: var(--sp-8);
  border-top: 1px solid var(--clr-rule);
  border-right: none;
}

@media (min-width: 768px) {
  .problem-item:nth-child(odd) {
    border-right: 1px solid var(--clr-rule);
  }
  .problem-item:nth-child(1),
  .problem-item:nth-child(2) {
    border-top: 1px solid var(--clr-rule);
  }
}

.problem-item-num {
  font-family: "SF Mono", "Fira Code", "Consolas", "Courier New", monospace;
  font-size: var(--t-xs);
  color: var(--clr-text-dim);
  display: block;
  margin-bottom: var(--sp-6);
  letter-spacing: 0.06em;
}

.problem-item h3 {
  font-size: var(--t-lg);
  color: var(--clr-text);
  margin-bottom: var(--sp-3);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.problem-item p {
  color: var(--clr-text-muted);
  font-size: var(--t-base);
  max-width: 48ch;
}

/* ── Castle Answer ── */
.answer-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-12);
}

@media (min-width: 900px) {
  .answer-layout {
    grid-template-columns: 420px 1fr;
    align-items: start;
    gap: var(--sp-16);
  }
}

.answer-pull {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.2;
  font-weight: 700;
  color: var(--clr-text);
  letter-spacing: -0.03em;
  max-width: 22ch;
}

.answer-pull strong {
  color: var(--clr-accent);
  font-weight: 700;
}

.answer-body p { color: var(--clr-text-muted); }
.answer-body p + p { margin-top: var(--sp-4); }

/* ── Anatomy ── */
.anatomy-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--sp-8);
  font-size: var(--t-base);
}

.anatomy-table thead th {
  text-align: left;
  font-family: "SF Mono", "Fira Code", "Consolas", "Courier New", monospace;
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--clr-rule-mid);
}

.anatomy-table th:last-child,
.anatomy-table td:last-child {
  padding-left: var(--sp-8);
}

.anatomy-table tbody tr {
  border-bottom: 1px solid var(--clr-rule);
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .anatomy-table tbody tr {
    opacity: 1;
    transform: none;
    transition: background var(--dur-fast) var(--ease-out);
  }
}

.anatomy-table tbody tr.visible {
  opacity: 1;
  transform: translateY(0);
}

.anatomy-table tbody tr:hover {
  background: var(--clr-surface);
}

.anatomy-table tbody td {
  padding: var(--sp-6) 0;
  vertical-align: top;
}

.anatomy-table tbody td:first-child {
  width: 38%;
}

.part-name {
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--clr-text);
  display: block;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.part-metaphor {
  font-family: "SF Mono", "Fira Code", "Consolas", "Courier New", monospace;
  font-size: var(--t-xs);
  color: var(--clr-accent);
  display: block;
  margin-top: var(--sp-1);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.part-function {
  color: var(--clr-text-muted);
  max-width: 52ch;
  font-size: var(--t-base);
  line-height: 1.6;
}

/* Mobile anatomy — stack */
@media (max-width: 600px) {
  .anatomy-table thead { display: none; }
  .anatomy-table, .anatomy-table tbody,
  .anatomy-table tr, .anatomy-table td {
    display: block;
    width: 100%;
  }
  .anatomy-table tbody td:last-child { padding-left: 0; padding-top: 0; }
  .anatomy-table tbody td:first-child { padding-bottom: var(--sp-2); }
}

/* ── Day on the Line ── */
/* ── Architecture Diagrams ── */
.arch-diagrams {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-12);
  margin-top: var(--sp-12);
}

@media (min-width: 960px) {
  .arch-diagrams {
    grid-template-columns: 3fr 2fr;
    gap: var(--sp-8);
    align-items: start;
  }
}

.arch-diagram-wrap {
  border: 1px solid var(--clr-rule-mid);
}

.arch-diagram-label {
  font-family: "SF Mono", "Fira Code", "Consolas", "Courier New", monospace;
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-text-dim);
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--clr-rule);
  background: var(--clr-surface);
}

.arch-diagram-wrap svg {
  width: 100%;
  height: auto;
  display: block;
  /* visible by default — JS opts INTO the reveal via .will-reveal so a failed
     observer can never strand the diagrams invisible */
}
.arch-diagram-wrap svg.will-reveal {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 240ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .arch-diagram-wrap svg {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.arch-diagram-wrap svg.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Day on the Line ── */
.day-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: var(--sp-8);
  max-width: 720px;
}

.day-step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--sp-6);
  padding: var(--sp-6) 0;
  border-bottom: 1px solid var(--clr-rule);
}

.day-step:first-child { border-top: 1px solid var(--clr-rule); }

.step-number {
  font-family: "SF Mono", "Fira Code", "Consolas", "Courier New", monospace;
  font-size: var(--t-xl);
  font-weight: 500;
  color: var(--clr-text-dim);
  line-height: 1;
  padding-top: 3px;
  user-select: none;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.step-content h3 {
  font-size: var(--t-lg);
  color: var(--clr-text);
  margin-bottom: var(--sp-2);
  letter-spacing: -0.02em;
  font-weight: 600;
}

.step-content p {
  color: var(--clr-text-muted);
  font-size: var(--t-base);
  max-width: 56ch;
}

.step-quote {
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--clr-surface);
  border-left: 2px solid var(--clr-accent);
  font-style: italic;
  font-size: var(--t-base);
  color: var(--clr-text-muted);
  max-width: 52ch;
}

/* ── Garrison — severe frames, square crop ── */
.garrison-intro {
  max-width: 60ch;
  margin-bottom: var(--sp-8);
  color: var(--clr-text-muted);
}

.character-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;                          /* tight 1px gap between frames */
  background: var(--clr-rule-mid);   /* grid lines appear as gaps */
  border: 1px solid var(--clr-rule-mid);
}

@media (min-width: 600px) {
  .character-strip {
    grid-template-columns: repeat(6, 1fr);
  }
}

.character-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: var(--clr-bg);
}

.character-avatar {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--clr-surface);
  position: relative;
}

.character-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Severe monospace caption beneath each frame */
.character-name {
  font-family: "SF Mono", "Fira Code", "Consolas", "Courier New", monospace;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clr-text-dim);
  padding: var(--sp-2) var(--sp-2);
  border-top: 1px solid var(--clr-rule);
  text-align: center;
  background: var(--clr-bg);
}

.garrison-caption {
  margin-top: var(--sp-8);
  font-size: var(--t-base);
  color: var(--clr-text-muted);
  font-style: italic;
  max-width: 60ch;
}

/* ── Trust — constitution block ── */
.trust-block {
  border: 1px solid var(--clr-rule-mid);
  border-left: 2px solid var(--clr-accent);
  max-width: 720px;
  margin-top: var(--sp-8);
  background: var(--clr-surface);
}

.trust-item {
  padding: var(--sp-6) var(--sp-8);
  border-bottom: 1px solid var(--clr-rule);
}

.trust-item:last-child { border-bottom: none; }

.trust-item h3 {
  font-size: var(--t-lg);
  color: var(--clr-text);
  margin-bottom: var(--sp-2);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.trust-item p {
  color: var(--clr-text-muted);
  font-size: var(--t-base);
  max-width: 58ch;
}

.trust-item em {
  font-style: italic;
  color: var(--clr-text);
}

/* ── CTA Section ── */
.cta-section {
  background: var(--clr-surface);
  border-top: 1px solid var(--clr-rule-mid);
  border-bottom: none;
}

.cta-section .label-mono { color: var(--clr-accent); }

.cta-heading {
  font-size: clamp(2.2rem, 4.5vw + 1rem, 4rem);
  color: var(--clr-text);
  margin: var(--sp-6) 0;
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.04em;
  max-width: 22ch;
}

.cta-heading em {
  font-style: normal;
  color: var(--clr-accent);
}

.cta-sub {
  color: var(--clr-text-muted);
  font-size: var(--t-base);
  max-width: 52ch;
  margin-bottom: var(--sp-8);
}

.btn-commission {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-8);
  background: var(--clr-accent);
  color: var(--clr-bg);
  font-size: var(--t-base);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: var(--r-sm);
  transition: background var(--dur-fast) var(--ease-out);
  user-select: none;
}

.btn-commission:hover { background: var(--clr-accent-lit); }
.btn-commission:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--clr-accent-lit);
}

/* ── Footer ── */
.site-footer {
  padding: var(--sp-8) 0;
  border-top: 1px solid var(--clr-rule);
  background: var(--clr-bg);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.footer-copy {
  font-family: "SF Mono", "Fira Code", "Consolas", "Courier New", monospace;
  font-size: var(--t-xs);
  color: var(--clr-text-dim);
  letter-spacing: 0.05em;
}

.footer-note {
  font-size: var(--t-sm);
  color: var(--clr-text-dim);
  font-style: italic;
}

/* ── Utility ── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Focus ring via box-shadow, never outline */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--clr-accent);
}

/* Hover states only on devices that support them */
@media (hover: none) {
  .nav-cta:hover,
  .btn-primary:hover,
  .btn-commission:hover {
    background: var(--clr-accent);
  }
}