/* This site's layer over the Lean Software Production design system.
   Every value here comes from a token in tokens/ — no new hex, no new font,
   no raw px the scales already carry.

   The React primitives in the design system's components/ and ui_kits/website/
   are ported to plain CSS here, since this site ships no JavaScript. Structure
   and values follow those files; behaviour that was React state (hover, press)
   becomes a CSS pseudo-class. */

/* — Lucide glyph as a CSS mask, so it inherits currentColor (components/core/Icon.jsx) — */
.icon {
  display: inline-block; flex: 0 0 auto;
  width: 16px; height: 16px; background: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.icon-arrow-right {
  -webkit-mask-image: url("https://unpkg.com/lucide-static@0.469.0/icons/arrow-right.svg");
  mask-image: url("https://unpkg.com/lucide-static@0.469.0/icons/arrow-right.svg");
}

/* — Button (components/core/Button.jsx) — */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2); padding: 10px 18px;
  border-radius: var(--radius-sm); border: 1px solid transparent;
  font: var(--type-body); font-family: var(--font-core); font-size: var(--text-sm);
  font-weight: var(--weight-medium); letter-spacing: var(--tracking-tight); line-height: 1.2;
  cursor: pointer;
  transition: var(--transition-color), transform var(--duration-fast) var(--ease-out);
}
.btn-sm { padding: 7px 13px; font-size: var(--text-xs); }
.btn:active { transform: scale(var(--press-scale)); }
.btn-primary { background: var(--accent); color: var(--accent-on); border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-on); }
.btn-secondary { background: var(--surface-card); color: var(--text-primary); border-color: var(--border-default); }
.btn-secondary:hover { background: var(--stone-50); border-color: var(--border-strong); color: var(--text-primary); }
.btn-inverse { background: var(--paper-warm); color: var(--slate-900); border-color: var(--paper-warm); }
.btn-inverse:hover { background: var(--white); color: var(--slate-900); }

/* — ArrowLink (ui_kits/website/Home.jsx). The homepage's calm composition uses
     these in place of filled buttons. — */
.arrow-link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  border-bottom: none; color: var(--text-link);
  font: var(--type-body); font-size: var(--text-md);
  transition: var(--transition-color);
}
.arrow-link:hover { color: var(--text-link-hover); border-bottom: none; }
.arrow-link .icon { transition: transform var(--duration-fast) var(--ease-out); }
.arrow-link:hover .icon { transform: translateX(2px); }
.arrow-link-warm { color: var(--clay-300); }
.arrow-link-warm:hover { color: var(--clay-200); }

/* — Nav (ui_kits/website/Chrome.jsx): the only fixed element on the page — */
.site-nav {
  position: sticky; top: 0; z-index: 30;
  background: rgba(244, 245, 243, .86);
  -webkit-backdrop-filter: var(--blur-panel); backdrop-filter: var(--blur-panel);
  border-bottom: 1px solid var(--border-subtle);
}
.site-nav .inner {
  max-width: var(--container-lg); margin: 0 auto;
  padding: 18px var(--space-10);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-8);
}
.wordmark {
  font-family: var(--font-display); font-weight: var(--weight-medium);
  letter-spacing: -0.015em; font-size: 18px;
  color: var(--text-primary); border-bottom: none;
}
.wordmark:hover { color: var(--text-primary); }
.nav-links { display: flex; align-items: center; gap: var(--space-6); }
/* Scoped to the page links, never `.nav-links a` — that would outrank
   `.btn-primary` on specificity and repaint the button's label in the
   secondary ink, which is invisible on the slate fill. */
.nav-links .nav-page-link {
  border-bottom: none; font: var(--type-body); font-size: var(--text-sm);
  color: var(--text-secondary);
}
.nav-links .nav-page-link:hover { color: var(--text-primary); border-bottom: none; }
.nav-links .nav-page-link[aria-current="page"] { color: var(--text-primary); font-weight: var(--weight-medium); }

/* — Stage: one idea per screenful, centred. The homepage composition only. — */
.stage {
  min-height: 88vh; padding: var(--space-32) var(--space-10);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.stage-auto { min-height: auto; padding: var(--space-40) var(--space-10); }
.stage-inverse { background: var(--surface-inverse); color: var(--paper-warm); }
.stage h1 { font-size: var(--text-6xl); line-height: 1.04; max-width: 20ch; }
.stage h2 { font-size: var(--text-4xl); line-height: 1.06; max-width: 22ch; }
.stage-inverse h2 { color: var(--paper-warm); }
.stage .lead {
  font: var(--type-body-lg); font-size: var(--text-lg); color: var(--text-secondary);
  max-width: 44ch; margin-top: var(--space-6); text-wrap: pretty;
}
.stage-inverse .lead { color: rgba(244, 245, 243, .66); max-width: 46ch; }
.stage .actions { display: flex; gap: var(--space-8); margin-top: var(--space-8); flex-wrap: wrap; justify-content: center; }

/* — Tile (ui_kits/website/Home.jsx): the large feature panels under "two ways
     to start". Card at the 26px radius, interactive. — */
.tiles {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5);
  max-width: 1000px; margin: 0 auto; padding: 0 var(--space-10) var(--space-40);
}
.tile {
  display: flex; flex-direction: column; justify-content: flex-start;
  min-height: 300px; padding: var(--space-16) var(--space-12);
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-2xl); box-shadow: var(--shadow-xs);
  transition: var(--transition-color), transform var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard);
}
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.tile h3 { font-size: var(--text-2xl); letter-spacing: var(--tracking-display); }
.tile p { font: var(--type-body); color: var(--text-secondary); margin-top: var(--space-3); max-width: 34ch; }
.tile .arrow-link { margin-top: auto; padding-top: var(--space-8); align-self: flex-start; }
.tile-span { grid-column: 1 / -1; min-height: 220px; }
.tile-warm { background: var(--surface-warm-soft); border-color: var(--clay-200); }
.tile-warm p { color: var(--clay-800); }

/* — Section: the dense mode used by every page that is not the homepage.
     Left-aligned, measured, no eyebrow — the label is a plain mono line in
     faint ink. — */
.section { padding: var(--space-32) var(--space-10); }
.section .inner { max-width: var(--container-xl); margin: 0 auto; }
.section .rule { width: 56px; height: 2px; background: var(--accent-warm); margin-bottom: var(--space-6); }
.section .label {
  /* The kit uses --text-faint (stone-400) here; at 11px that measures 2.3:1 on
     paper, well under the 4.5:1 small-text bar, so this steps to the secondary
     ink at 6.3:1. Deviation from the system — raise upstream. */
  font: var(--type-mono); font-size: var(--text-2xs); color: var(--text-secondary);
  margin-bottom: var(--space-5);
}
.section h1 { max-width: 24ch; }
.section .lead {
  font: var(--type-body-lg); max-width: 58ch; margin-top: var(--space-6);
  color: var(--text-secondary); text-wrap: pretty;
}
.section .body { margin-top: var(--space-16); }

/* — Prose: a markdown body in the dense mode. Body copy is never set in the
     display serif. — */
/* The measure is set on the text itself, not the block — so a full-width
   child such as the scheduler embed is not boxed in by it. */
.prose h2 { font-size: var(--text-2xl); margin-top: var(--space-16); max-width: 24ch; }
.prose h2:first-child { margin-top: 0; }
.prose p { font: var(--type-body-lg); color: var(--text-secondary); margin-top: var(--space-5); max-width: 68ch; }
.prose ul { margin: var(--space-5) 0 0; padding-left: 1.15em; max-width: 68ch; }
.prose li { font: var(--type-body-lg); color: var(--text-secondary); margin-bottom: var(--space-3); }
.prose strong { color: var(--text-primary); font-weight: var(--weight-semibold); }

/* — The Zoom Scheduler embed. We control the box; Zoom controls its contents
     (cross-origin), so the frame takes the card's radius and border and
     nothing more. — */
.scheduler { margin-top: var(--space-10); }
.scheduler iframe {
  display: block; width: 100%; height: 780px;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  background: var(--surface-card);
}
.scheduler-fallback { font: var(--type-small); color: var(--text-secondary); margin-top: var(--space-4); }

/* — Footer (ui_kits/website/Chrome.jsx) — */
.site-footer {
  background: var(--surface-inverse); color: var(--text-inverse);
  padding: var(--space-20) var(--space-10) var(--space-10);
}
.site-footer .inner { max-width: var(--container-xl); margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-12); }
.site-footer .blurb { font: var(--type-small); color: rgba(244, 245, 243, .62); max-width: 34ch; margin-top: var(--space-4); }
.site-footer .col-head {
  font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: rgba(244, 245, 243, .62); margin-bottom: var(--space-3);
}
.site-footer .col a { display: block; font: var(--type-small); color: rgba(244, 245, 243, .78); border-bottom: none; margin-bottom: var(--space-3); }
.site-footer .col a:hover { color: var(--paper-warm); border-bottom: none; }
.site-footer .wordmark { color: var(--paper-warm); }
.site-footer .wordmark:hover { color: var(--paper-warm); }
.site-footer .baseline {
  max-width: var(--container-xl); margin: var(--space-12) auto 0; padding-top: var(--space-6);
  border-top: 1px solid var(--border-inverse);
  display: flex; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap;
  font: var(--type-mono); font-size: var(--text-2xs); color: rgba(244, 245, 243, .62);
}

/* — responsive — */
@media (max-width: 900px) {
  .tiles { grid-template-columns: 1fr; }
  .tile-span { min-height: 300px; }
  .site-footer .inner { grid-template-columns: 1fr; gap: var(--space-10); }
}

@media (max-width: 640px) {
  .site-nav .inner { padding: 14px var(--space-5); gap: var(--space-4); }
  .nav-links { gap: var(--space-4); }
  .nav-links .nav-page-link { display: none; }
  .stage { padding: var(--space-20) var(--space-5); min-height: auto; }
  .stage h1 { font-size: var(--text-4xl); }
  .stage h2 { font-size: var(--text-3xl); }
  .stage .actions { flex-direction: column; gap: var(--space-5); align-items: center; }
  .section { padding: var(--space-20) var(--space-5); }
  .tiles { padding: 0 var(--space-5) var(--space-20); }
  .tile { padding: var(--space-10) var(--space-6); }
  .scheduler iframe { height: 900px; }
  .site-footer { padding: var(--space-16) var(--space-5) var(--space-8); }
}