/* ============================================================
   UpSynQ — Design System v3.2
   Stripped of publication framing. Confident product-feel.
   No Roman numerals, no italic-serif headlines, no eyebrows,
   no drop caps, no italic-quote interludes.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400;1,9..40,500&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* Paper surfaces */
  --paper:       #faf6ed;
  --paper-warm:  #f2ecdc;
  --paper-deep:  #e8e0ca;
  
  /* Ink */
  --ink:         #1a1612;
  --ink-mid:     #3d342a;
  --ink-soft:    #6a5d4d;
  --ink-faint:   #9a8b75;
  
  /* Accents */
  --amber:       #c89035;
  --amber-light: #d8a85a;
  --amber-deep:  #8b6420;
  --brick:       #a8412a;
  --brick-deep:  #7a2d18;
  --yellow:      #f0c830;

  /* Rules */
  --rule:        #d4c8aa;
  --rule-soft:   #e6dcc2;
  
  /* Type */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'SFMono-Regular', monospace;
}

/* ============================================================
   BASE
   ============================================================ */

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

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Paper texture overlay — subtle */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

a { color: inherit; text-decoration: none; }
button { background: none; border: none; cursor: pointer; font-family: inherit; color: inherit; }
input, textarea { font-family: inherit; font-size: inherit; color: inherit; background: transparent; border: none; outline: none; }
::selection { background: var(--yellow); color: var(--ink); }
:focus-visible { outline: 2px solid var(--brick); outline-offset: 3px; }

/* ============================================================
   PAGE LAYOUT
   ============================================================ */

.page {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 64px;
}

@media (max-width: 768px) { .page { padding: 0 24px; } }

/* ============================================================
   MASTHEAD
   ============================================================ */

.masthead {
  position: relative;
  z-index: 10;
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
  padding: 22px 0;
}

.masthead__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 64px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

@media (max-width: 768px) { .masthead__inner { padding: 0 24px; } }

.brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.025em;
  color: var(--ink);
  display: flex;
  align-items: baseline;
}

.brand__dot { color: var(--brick); }

.masthead__nav {
  display: flex;
  gap: 28px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-mid);
}

.masthead__nav a { transition: color 0.2s; padding-bottom: 2px; border-bottom: 1px solid transparent; }
.masthead__nav a:hover { color: var(--brick); border-bottom-color: var(--brick); }

@media (max-width: 640px) {
  .masthead__inner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .masthead__nav { gap: 16px; font-size: 13px; }
}

/* ============================================================
   COVER
   ============================================================ */

.cover {
  /* vertical only — keep .page's horizontal padding (esp. 24px on mobile),
     otherwise the hero text runs edge-to-edge and clips under overflow-x:hidden */
  padding-top: 64px;
  padding-bottom: 56px;
  position: relative;
}

.cover__fao {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-soft);
  line-height: 1.7;
  text-align: right;
  margin-bottom: 32px;
  max-width: 340px;
  margin-left: auto;
}

.cover__fao strong {
  display: block;
  color: var(--ink);
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

.cover__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(46px, 6.6vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin-bottom: 28px;
  max-width: 1100px;
}

.cover__subtitle {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.5;
  color: var(--ink-mid);
  max-width: 760px;
  margin-bottom: 0;
}

/* Hero illustration */
.hero-art { margin: 40px 0 0; position: relative; }

.hero-art svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 520px;
}

.hero-art__caption {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-soft);
  border-top: 1px solid var(--ink);
  padding-top: 12px;
}

.hero-art__caption strong { color: var(--ink); font-weight: 700; }

/* ============================================================
   SECTIONS — clean, no Roman numerals, no eyebrow labels
   ============================================================ */

.section {
  padding: 80px 0;
  position: relative;
}

.section--rule { border-top: 1px solid var(--ink); }
.section--band { background: var(--paper-warm); border-top: 1px solid var(--ink); }
.section--dark { background: var(--ink); color: var(--paper); border-top: 1px solid var(--ink); }
.section--dark .section__title { color: var(--paper); }
.section--dark .section__lede { color: var(--paper-deep); }

@media (max-width: 768px) { .section { padding: 56px 0; } }

.section__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-bottom: 24px;
  max-width: 940px;
}

.section__lede {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.55;
  color: var(--ink-mid);
  max-width: 760px;
  margin-bottom: 48px;
}

.section__lede strong { color: var(--brick); font-weight: 600; }

/* Body prose blocks — for continuation paragraphs */
.prose {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink);
  max-width: 760px;
}

.prose p + p { margin-top: 1em; }
.prose strong { color: var(--brick); font-weight: 600; }
.prose em { font-style: italic; }

/* ============================================================
   LEDGER (decision-manifest bar)
   ============================================================ */

.ledger {
  margin: 40px 0;
  background: var(--paper-warm);
  border: 1px solid var(--ink);
  position: relative;
}

.ledger__header {
  background: var(--ink);
  color: var(--paper);
  padding: 14px 24px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.ledger__header strong { color: var(--yellow); }

.ledger__body { padding: 28px 24px 20px; }

.bar-row {
  display: flex;
  gap: 4px;
  flex-wrap: nowrap;
  padding-bottom: 4px;
  margin-bottom: 20px;
}

.cell {
  position: relative;
  flex-shrink: 0;
  flex-grow: 1;
  min-width: 0;
  height: 52px;
  background: transparent;
  border: 1.5px solid var(--ink);
  cursor: default;
  opacity: 0;
  animation: cellReveal 0.4s ease forwards;
  transition: transform 0.15s ease;
}

.cell--filled { background: var(--brick); border-color: var(--brick-deep); }

.cell[data-label]:hover { transform: translateY(-3px); z-index: 5; }
.cell--filled[data-label]:hover { background: var(--brick-deep); }

.cell[data-label]::after {
  content: attr(data-label);
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  white-space: nowrap;
  background: var(--ink);
  color: var(--paper);
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms ease, transform 150ms ease;
  z-index: 20;
}

.cell[data-label]::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--ink);
  opacity: 0;
  transition: opacity 150ms ease;
  z-index: 20;
}

.cell[data-label]:hover::after,
.cell[data-label]:hover::before { opacity: 1; }
.cell[data-label]:hover::after { transform: translateX(-50%) translateY(0); }

@keyframes cellReveal {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) { .cell { opacity: 1; animation: none; } }

@media (max-width: 768px) {
  .cell { height: 36px; }
  .cell[data-label]::after { font-size: 9px; padding: 6px 9px; }
}

.ledger__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--ink-faint);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
}

.ledger__legend strong { color: var(--brick); font-weight: 700; margin-right: 6px; font-size: 16px; }

.ledger__footer {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 12px 24px;
  background: var(--paper-deep);
  border-top: 1px solid var(--ink);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-soft);
}

.ledger__footer strong { color: var(--brick); font-weight: 700; }

/* ============================================================
   CASCADE — three-column compact layout
   ============================================================ */

.cascade {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
}

.cascade__header {
  padding: 14px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  border-bottom: 1px solid var(--ink-mid);
  flex-wrap: wrap;
}

.cascade__header strong { color: var(--yellow); }

.cascade__header-toggle {
  display: inline-flex;
  border: 1px solid var(--ink-faint);
}

.cascade-mode {
  background: transparent;
  border: none;
  padding: 8px 16px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--paper-deep);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.cascade-mode + .cascade-mode { border-left: 1px solid var(--ink-faint); }
.cascade-mode:hover { color: var(--paper); }
.cascade-mode.is-active { background: var(--brick); color: var(--paper); }
.cascade-mode[data-mode="with"].is-active { background: var(--yellow); color: var(--ink); }

.cascade__body {
  padding: 22px;
  display: grid;
  grid-template-columns: 240px 1fr 200px;
  gap: 20px;
  align-items: stretch;
}

@media (max-width: 980px) {
  .cascade__body { grid-template-columns: 1fr; }
}

.cascade__col-sources { display: flex; flex-direction: column; }

.cascade__sources-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber-light);
  margin-bottom: 10px;
}

.cascade__sources { display: flex; flex-direction: column; gap: 8px; flex-grow: 1; }

.cascade-source {
  background: transparent;
  border: 1px solid var(--ink-mid);
  padding: 12px 14px;
  text-align: left;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.4;
  color: var(--paper-deep);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.cascade-source__num {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-faint);
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 4px;
  transition: color 0.2s;
}

.cascade-source:hover { border-color: var(--brick); color: var(--paper); }
.cascade-source:hover .cascade-source__num { color: var(--brick); }
.cascade-source.is-active {
  border-color: var(--brick);
  background: rgba(168, 65, 42, 0.18);
  color: var(--paper);
}
.cascade-source.is-active .cascade-source__num { color: var(--brick); }

.cascade__col-viz {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--ink-mid);
  padding: 16px;
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cascade__col-viz svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 380px;
}

/* On phones the cascade switches to a tall vertical layout (see scripts.js
   computeLayout); let it render at full height instead of being capped. */
@media (max-width: 640px) {
  .cascade__col-viz { padding: 10px; min-height: auto; }
  .cascade__col-viz svg { max-height: none; }
}

.cascade__col-counter {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cascade__counter {
  background: var(--ink-mid);
  border: 1px solid var(--ink-faint);
  padding: 18px 16px;
  text-align: center;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cascade__counter-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 8px;
}

.cascade__counter-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--brick);
  transition: color 0.4s;
}

.cascade__counter-value.is-with { color: var(--yellow); }

.cascade__counter-sub {
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-faint);
}

.cascade__replay {
  background: transparent;
  border: 1px solid var(--ink-faint);
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--paper-deep);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.cascade__replay:hover { background: var(--ink-mid); color: var(--paper); }

/* nodes in the cascade SVG */
.cascade-node { opacity: 0; transition: opacity 0.4s ease; }
.cascade-node.is-active { opacity: 1; }
.cascade-node.is-final { opacity: 1; }

.cascade-node__box {
  fill: var(--ink-mid);
  stroke: var(--ink-faint);
  stroke-width: 1;
  transition: fill 0.4s, stroke 0.4s;
}

.cascade-node.is-active .cascade-node__box {
  fill: var(--brick);
  stroke: #c4502e;
}

.cascade-node.is-with-mode.is-active .cascade-node__box {
  fill: #2d3a26;
  stroke: var(--yellow);
}

.cascade-node__label {
  fill: var(--paper);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  pointer-events: none;
}

.cascade-node__cost {
  fill: var(--amber-light);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  pointer-events: none;
}

.cascade-node.is-with-mode .cascade-node__cost { fill: var(--yellow); }

.cascade-path {
  stroke: var(--ink-faint);
  stroke-width: 1.5;
  fill: none;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  transition: stroke-dashoffset 0.6s ease, stroke 0.4s;
}

.cascade-path.is-active { stroke-dashoffset: 0; stroke: var(--brick); }
.cascade-path.is-with-mode.is-active { stroke: var(--yellow); }

.cascade-source-node__box {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 1.5;
}

.cascade-source-node__label {
  fill: var(--ink);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
}

/* ============================================================
   SYSTEM MAP
   ============================================================ */

.system-map {
  margin: 0;
  background: var(--paper-warm);
  border: 1px solid var(--ink);
}

.system-map__header {
  background: var(--ink);
  color: var(--paper);
  padding: 14px 24px;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.system-map__header strong { color: var(--yellow); }

.system-map__body { padding: 28px 24px; }

.system-map__body svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 460px;
}

.system-map__footer {
  background: var(--paper-deep);
  border-top: 1px solid var(--ink);
  padding: 12px 24px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-soft);
}

.system-map__footer strong { color: var(--brick); font-weight: 700; }

/* The system map is a wide (1200-unit) fixed-aspect diagram. Once the column
   drops below the diagram's native width it scales down and the labels shrink
   to the point of being unreadable. Below that threshold, let it scroll
   horizontally at a legible min-width instead of shrinking. */
@media (max-width: 1024px) {
  .system-map__body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
  }
  .system-map__body svg { min-width: 920px; max-height: none; }
  /* hint that the diagram is scrollable */
  .system-map__body { scrollbar-width: thin; }
}

/* ============================================================
   SECTORS — three cards
   ============================================================ */

.sectors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 900px) { .sectors { grid-template-columns: 1fr; } }

.sector-card {
  background: var(--paper-warm);
  border: 1px solid var(--ink);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}

.sector-card:hover {
  transform: translate(-3px, -3px);
  background: var(--paper);
  box-shadow: 4px 4px 0 var(--ink);
}

.sector-card__code {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--brick);
  margin-bottom: 14px;
}

.sector-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.12;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin-bottom: 14px;
}

.sector-card__body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-mid);
  margin-bottom: 22px;
  flex-grow: 1;
}

.sector-card__cta {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--brick);
  border-top: 1px solid var(--ink-faint);
  padding-top: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sector-card:hover .sector-card__cta { color: var(--ink); }
.sector-card__cta span:last-child { transition: transform 0.2s; }
.sector-card:hover .sector-card__cta span:last-child { transform: translateX(4px); }

/* ============================================================
   CASE
   ============================================================ */

.case {
  background: var(--paper-warm);
  border: 1px solid var(--ink);
}

.case__header {
  background: var(--ink);
  color: var(--paper);
  padding: 14px 28px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.case__header strong { color: var(--yellow); }

.case__body { padding: 36px 32px; }

.case__meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px 28px;
  padding-bottom: 24px;
  margin-bottom: 28px;
  border-bottom: 2px solid var(--ink);
  font-family: var(--font-body);
}

@media (max-width: 768px) {
  .case__meta { grid-template-columns: repeat(2, 1fr); }
  .case__body { padding: 24px 20px; }
}

.case__meta-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

.case__meta-value { font-size: 15px; font-weight: 500; color: var(--ink); }

.case__findings { display: grid; gap: 4px; }

.case__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}

.case__row:last-child { border-bottom: none; }

.case__row-label {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-mid);
}

.case__row-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.case__row-value strong { color: var(--brick); font-weight: 800; }

/* ============================================================
   AUDIT REQUEST cards (row)
   ============================================================ */

.requests {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}

@media (max-width: 900px) { .requests { grid-template-columns: 1fr; } }

.request {
  padding: 28px 26px;
  text-decoration: none;
  color: var(--ink);
  border-right: 1px solid var(--ink);
  background: var(--paper);
  transition: background 0.2s;
}

.request:last-child { border-right: none; }

@media (max-width: 900px) {
  .request { border-right: none; border-bottom: 1px solid var(--ink); }
  .request:last-child { border-bottom: none; }
}

.request:hover { background: var(--paper-deep); }

.request__code {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--brick);
  margin-bottom: 12px;
}

.request__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.12;
  letter-spacing: -0.018em;
  margin-bottom: 12px;
  color: var(--ink);
}

.request__desc {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-mid);
  margin-bottom: 20px;
}

.request__cta {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--brick);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid var(--ink-faint);
}

.request__cta span:last-child { transition: transform 0.2s; }
.request:hover .request__cta span:last-child { transform: translateX(4px); }

/* ============================================================
   ARTIFACT — WEEK LOG (planning audit)
   ============================================================ */

.week-log {
  margin: 40px 0;
  background: var(--paper-warm);
  border: 1px solid var(--ink);
}

.week-log__header {
  background: var(--ink);
  color: var(--paper);
  padding: 14px 24px;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.week-log__header strong { color: var(--yellow); }

.week-log__body { padding: 8px 0; }

.week-log__row {
  display: grid;
  grid-template-columns: 5.5em 1fr 5em;
  gap: 18px;
  padding: 11px 24px;
  border-bottom: 1px solid var(--rule-soft);
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
}

.week-log__row:last-child { border-bottom: none; }

.week-log__time { color: var(--ink-soft); font-weight: 500; }
.week-log__activity { color: var(--ink); }
.week-log__bucket {
  text-align: right;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.week-log__bucket--mech { color: var(--brick); }
.week-log__bucket--strat { color: var(--ink-soft); }

.week-log__redacted {
  display: inline-block;
  background: var(--ink);
  color: var(--ink);
  padding: 0 4px;
  user-select: none;
}

.week-log__footer {
  display: flex;
  justify-content: space-between;
  padding: 12px 24px;
  background: var(--paper-deep);
  border-top: 1px solid var(--ink);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-soft);
}

.week-log__footer strong { color: var(--brick); font-weight: 700; }

/* On phones the fixed time/bucket columns squeeze the activity into a sliver;
   put the activity on its own full-width line below time + bucket. */
@media (max-width: 640px) {
  .week-log__row { grid-template-columns: 1fr auto; gap: 3px 12px; padding: 10px 18px; }
  .week-log__activity { grid-row: 2; grid-column: 1 / -1; }
}

/* ============================================================
   ARTIFACT — WATERFALL (energy audit)
   ============================================================ */

.waterfall {
  margin: 40px 0;
  background: var(--paper-warm);
  border: 1px solid var(--ink);
}

.waterfall__header {
  background: var(--ink);
  color: var(--paper);
  padding: 14px 24px;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.waterfall__header strong { color: var(--yellow); }

.waterfall__body { padding: 24px 28px 18px; }

.waterfall__row {
  display: grid;
  grid-template-columns: 14em 1fr 4.5em;
  align-items: center;
  gap: 18px;
  padding: 9px 0;
}

.waterfall__label { font-family: var(--font-body); font-size: 15px; color: var(--ink); }
.waterfall__label--dim { color: var(--ink-soft); font-style: italic; }

.waterfall__bar {
  height: 18px;
  background: var(--paper-deep);
  border: 1px solid var(--ink-faint);
  position: relative;
  overflow: hidden;
}
.waterfall__fill { height: 100%; background: var(--brick); }
.waterfall__fill--dim { background: var(--ink-faint); }

.waterfall__pct {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--brick);
  text-align: right;
}
.waterfall__pct--dim { color: var(--ink-soft); }

.waterfall__footer {
  display: flex;
  justify-content: space-between;
  padding: 12px 24px;
  background: var(--paper-deep);
  border-top: 1px solid var(--ink);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-soft);
}

.waterfall__footer strong { color: var(--brick); font-weight: 700; }

/* The 14em label + bar + pct columns overflow a phone; drop the label onto its
   own full-width line with the bar + pct below it. */
@media (max-width: 640px) {
  .waterfall__row { grid-template-columns: 1fr auto; gap: 6px 14px; }
  .waterfall__label { grid-column: 1 / -1; }
}

/* ============================================================
   ARTIFACT — CHAIR GRID (throughput audit)
   ============================================================ */

.chair-grid-wrap {
  margin: 40px 0;
  background: var(--paper-warm);
  border: 1px solid var(--ink);
}

.chair-grid-wrap__header {
  background: var(--ink);
  color: var(--paper);
  padding: 14px 24px;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.chair-grid-wrap__header strong { color: var(--yellow); }

.chair-grid-wrap__body { padding: 24px 28px 20px; }

.chair-grid {
  display: grid;
  grid-template-columns: 4em repeat(7, 1fr);
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
}

.chair-grid__day {
  text-align: center;
  color: var(--ink-soft);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 0;
  border-bottom: 1px solid var(--ink);
}

.chair-grid__hour {
  text-align: right;
  color: var(--ink-soft);
  padding: 6px 8px 6px 0;
  border-right: 1px solid var(--ink);
  font-weight: 500;
}

.chair-grid__cell {
  background: var(--paper-deep);
  min-height: 30px;
  position: relative;
  border: 1px solid var(--rule-soft);
}

.chair-grid__cell--filled { background: var(--ink-faint); border-color: var(--ink-faint); }
.chair-grid__cell--shuffle { background: var(--brick); border-color: var(--brick-deep); }
.chair-grid__cell--break {
  background: var(--brick);
  outline: 2px solid var(--paper);
  outline-offset: -3px;
  border-color: var(--brick-deep);
}

.chair-grid-wrap__legend {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-soft);
  padding-top: 14px;
  border-top: 1px solid var(--ink-faint);
}

.chair-grid-wrap__legend-key {
  display: inline-block;
  width: 12px;
  height: 12px;
  vertical-align: middle;
  margin-right: 8px;
}

.chair-grid-wrap__legend-key--filled { background: var(--ink-faint); }
.chair-grid-wrap__legend-key--shuffle { background: var(--brick); }
.chair-grid-wrap__legend-key--break {
  background: var(--brick);
  outline: 2px solid var(--paper);
  outline-offset: -3px;
}

.chair-grid-wrap__footer {
  display: flex;
  justify-content: space-between;
  padding: 12px 24px;
  background: var(--paper-deep);
  border-top: 1px solid var(--ink);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-soft);
}

.chair-grid-wrap__footer strong { color: var(--brick); font-weight: 700; }

/* ============================================================
   QUESTIONS (audit pages)
   ============================================================ */

.questions {
  display: grid;
  gap: 0;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}

.question {
  padding: 26px 0;
  border-bottom: 1px solid var(--rule);
}

.question:last-child { border-bottom: none; }

.question__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 10px;
}

.question__desc {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-mid);
  max-width: 700px;
}

/* ============================================================
   AUDIT FORM
   ============================================================ */

.form-block {
  background: var(--paper-warm);
  border: 1px solid var(--ink);
}

.form-block__header {
  background: var(--ink);
  color: var(--paper);
  padding: 14px 28px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.form-block__header strong { color: var(--yellow); }

.form-block__body { padding: 32px 28px; }

.form { display: grid; gap: 18px; }

.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .form__row { grid-template-columns: 1fr; } }

.form__field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
}

.form__field input,
.form__field textarea {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--ink-faint);
  padding: 13px 16px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  transition: border-color 0.2s;
}

.form__field input:focus,
.form__field textarea:focus { border-color: var(--brick); }
.form__field textarea { resize: vertical; min-height: 88px; }
.form__field input::placeholder,
.form__field textarea::placeholder {
  color: var(--ink-faint);
}

.form__submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  margin-top: 6px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: var(--paper);
  padding: 13px 26px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  border: 1px solid var(--ink);
}

.btn:hover { background: var(--brick); border-color: var(--brick); }

.form__meta {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-soft);
  max-width: 280px;
  line-height: 1.5;
}

.form__success {
  padding: 28px;
  background: var(--paper);
  border: 1px solid var(--brick);
}

.form__success-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brick);
  margin-bottom: 12px;
}

.form__success h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.018em;
  margin-bottom: 10px;
  color: var(--ink);
}

.form__success p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-mid);
}

/* ============================================================
   COLOPHON
   ============================================================ */

.colophon {
  background: var(--ink);
  color: var(--paper);
  padding: 56px 0 30px;
  margin-top: 0;
  border-top: 1px solid var(--ink);
}

.colophon__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 40px;
  align-items: start;
}

@media (max-width: 768px) {
  .colophon__grid { grid-template-columns: 1fr; gap: 28px; }
}

.colophon__brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.025em;
}

.colophon__brand .brand__dot { color: var(--brick); }

.colophon__tag {
  margin-top: 12px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--paper-deep);
  max-width: 380px;
}

.colophon__heading {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber-light);
  margin-bottom: 12px;
}

.colophon__list {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.8;
  color: var(--paper-deep);
}

.colophon__list a { transition: color 0.2s; }
.colophon__list a:hover { color: var(--yellow); }

.colophon__bottom {
  padding-top: 22px;
  border-top: 1px solid var(--ink-mid);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ============================================================
   INSIGHTS — 3-up card grid replacing footnote-style prose
   ============================================================ */

.insights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  margin: 48px 0;
}

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

.insight { display: flex; flex-direction: column; }

.insight::before {
  content: '';
  display: block;
  width: 38px;
  height: 3px;
  background: var(--brick);
  margin-bottom: 18px;
}

.insight__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 12px;
}

.insight__body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-mid);
}

.insight em { font-style: italic; color: var(--ink); }

/* ============================================================
   CASE TABS — 3-case switcher (planning / energy / throughput)
   ============================================================ */

.case-tabs__nav {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 0;
  flex-wrap: wrap;
}

.case-tab {
  background: transparent;
  border: 1px solid var(--ink);
  border-bottom: none;
  padding: 13px 22px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-mid);
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
  margin-right: -1px;
  margin-bottom: -2px;
  position: relative;
}

.case-tab:hover { background: var(--paper-warm); color: var(--ink); }
.case-tab.is-active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.case-tabs__panel { display: none; }
.case-tabs__panel.is-active { display: block; }

/* The folder-tab design (overlapping borders + negative margins) only works
   as a single row; below 900px the long labels wrap and overlap, so stack the
   tabs into a clean full-width vertical list with proper borders instead. */
@media (max-width: 900px) {
  .case-tabs__nav { flex-direction: column; border-bottom: none; }
  .case-tab {
    width: 100%;
    text-align: left;
    margin: 0 0 -1px 0;
    border: 1px solid var(--ink);
  }
}

/* ============================================================
   CASE NOTE — small block replacing footnote prose
   ============================================================ */

.case-note {
  margin: 28px 0 0;
  padding: 18px 22px;
  background: var(--paper-warm);
  border-left: 3px solid var(--brick);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-mid);
}

.case-note strong { color: var(--ink); font-weight: 600; }

/* ============================================================
   WEEK LOG — hover-reveal redacted bars
   ============================================================ */

.week-log__redacted {
  display: inline-block;
  background: var(--ink);
  color: var(--ink);
  padding: 0 6px;
  user-select: none;
  cursor: help;
  border-radius: 1px;
  transition: background 0.25s ease, color 0.25s ease;
}

.week-log__redacted:hover {
  background: var(--amber);
  color: var(--ink);
}

/* ============================================================
   CHAIR GRID — hover tooltip on cells
   ============================================================ */

.chair-grid__cell[data-tooltip] { cursor: help; }

.chair-grid__cell[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(3px);
  white-space: nowrap;
  background: var(--ink);
  color: var(--paper);
  padding: 7px 11px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 30;
  border-radius: 1px;
}

.chair-grid__cell[data-tooltip]::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--ink);
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 30;
}

.chair-grid__cell[data-tooltip]:hover::after,
.chair-grid__cell[data-tooltip]:hover::before { opacity: 1; }
.chair-grid__cell[data-tooltip]:hover::after { transform: translateX(-50%) translateY(0); }

/* ============================================================
   FADE
   ============================================================ */

.fade { opacity: 0; animation: fadeIn 0.8s ease forwards; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) { .fade { opacity: 1; animation: none; } }

/* Body grid — single column now that marginalia is gone */
.body-grid {
  display: block;
  max-width: 1000px;
}
.body-grid > div { max-width: 100%; }