@import url('./reset.css');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  --bg-paper: #e8d5a8;
  --bg-paper-darker: #ddc591;
  --ink: #1a1a1a;
  --ink-muted: rgba(26, 26, 26, 0.55);
  --ink-faint: rgba(26, 26, 26, 0.2);

  /* ---------- Brand palette ----------
     Terracota = primary accent (the new ingredient); ink = secondary (already
     the workhorse for text + line-art). Modules reference these tokens; the
     dev panel overrides --primary at runtime to audition shades. Default below
     is the committed shade. */
  --primary: #c2562e; /* terracotta — brand primary accent */
  --primary-strong: #a8431f; /* darker terracotta — pressed / hover-deepen */
  --primary-tint: rgba(194, 86, 46, 0.12); /* faint wash — active rows / highlights */
  --on-primary: #fcdab4; /* text / icon sitting on a terracotta fill */
  --secondary: var(--ink); /* ink — secondary */

  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --frame-pad: clamp(16px, 2.4vw, 32px);
  --header-height: clamp(68px, 6vw, 76px);
  --content-max: 1200px;
}

/* ============================================================
   Spacing scale — Utopia fluid space
   utopia.fyi/space/calculator: 360px → 16px base, 1200px → 20px base
   ============================================================ */

:root {
  /* T-shirt sizes — flat clamp() per token avoids the chained var() recompute
     that triggers a document-wide style recalc on every resize frame. */
  --space-3xs: clamp(0.25rem, 0.2232rem + 0.119vw, 0.3125rem);
  --space-2xs: clamp(0.5rem, 0.4464rem + 0.2381vw, 0.625rem);
  --space-xs: clamp(0.75rem, 0.6696rem + 0.3571vw, 0.9375rem);
  --space-s: clamp(1rem, 0.8929rem + 0.4762vw, 1.25rem);
  --space-m: clamp(1.5rem, 1.3393rem + 0.7143vw, 1.875rem);
  --space-l: clamp(2rem, 1.7857rem + 0.9524vw, 2.5rem);
  --space-xl: clamp(3rem, 2.6786rem + 1.4286vw, 3.75rem);
  --space-2xl: clamp(4rem, 3.5714rem + 1.9048vw, 5rem);
  --space-3xl: clamp(6rem, 5.3571rem + 2.8571vw, 7.5rem);

  /* One-up pairs */
  --space-3xs-2xs: clamp(0.25rem, 0.0893rem + 0.7143vw, 0.625rem);
  --space-2xs-xs: clamp(0.5rem, 0.3125rem + 0.8333vw, 0.9375rem);
  --space-xs-s: clamp(0.75rem, 0.5357rem + 0.9524vw, 1.25rem);
  --space-s-m: clamp(1rem, 0.625rem + 1.6667vw, 1.875rem);
  --space-m-l: clamp(1.5rem, 1.0714rem + 1.9048vw, 2.5rem);
  --space-l-xl: clamp(2rem, 1.25rem + 3.3333vw, 3.75rem);
  --space-xl-2xl: clamp(3rem, 2.1429rem + 3.8095vw, 5rem);
  --space-2xl-3xl: clamp(4rem, 2.5rem + 6.6667vw, 7.5rem);

  /* Custom pair */
  --space-s-l: clamp(1rem, 0.3571rem + 2.8571vw, 2.5rem);

  /* ---------- Semantic spacing layer ----------
     Modules consume these; raw --space-* tokens stay an implementation detail. */
  --gap-section-y: var(--space-2xl-3xl); /* module top/bottom padding */
  --gap-section-x: var(--space-xs-s); /* module left/right padding */
  --gap-block: var(--space-l-xl); /* head→body, between major blocks */
  --gap-stack: var(--space-s); /* default vertical stack */
  --gap-stack-sm: var(--space-2xs); /* tight stack (label→title) */
  --gap-stack-lg: var(--space-m); /* loose stack (intro→cta) */
  --gap-inline: var(--space-2xs); /* icon+label, button content gap */
  --pad-card: var(--space-s-m); /* default card inner padding */
  --pad-card-lg: var(--space-l-xl); /* large card inner padding */
}

/* ============================================================
   Type scale — Utopia fluid type, hybrid ratio.
   Body and small text (steps 0, -1, -2): 1.2 → 1.333 (Minor Third → Perfect
     Fourth). Gentle, keeps labels and eyebrows readable at large viewports.
   Headings (steps 1 → 6):                 1.2 → 1.5   (Minor Third → Perfect
     Fifth). Dramatic at the top end, gives display copy real presence.
   ============================================================ */

:root {
  --step--2: clamp(0.5628rem, 0.7509rem + -0.2508vw, 0.6944rem); /* ~9-11px   */
  --step--1: clamp(0.7502rem, 0.869rem + -0.1584vw, 0.8333rem); /* ~12-13px  */
  --step-0: clamp(1rem, 1rem + 0vw, 1rem); /* 16px      */
  --step-1: clamp(1.2rem, 1.0714rem + 0.5714vw, 1.5rem); /* ~19-24px  */
  --step-2: clamp(1.44rem, 1.0929rem + 1.5429vw, 2.25rem); /* ~23-36px  */
  --step-3: clamp(1.728rem, 1.0221rem + 3.1374vw, 3.375rem); /* ~28-54px  */
  --step-4: clamp(2.0736rem, 0.7926rem + 5.6932vw, 5.0625rem); /* ~33-81px  */
  --step-5: clamp(2.4883rem, 0.3002rem + 9.7251vw, 7.5938rem); /* ~40-122px */
  --step-6: clamp(2.986rem, -0.616rem + 16.0089vw, 11.3906rem); /* ~48-182px */

  /* ---------- Semantic type roles ----------
     Modules consume these; raw --step-* tokens stay an implementation detail. */
  --type-display: var(--step-6); /* Hero headline only */
  --type-headline: var(--step-4); /* major section heading */
  --type-title: var(--step-3); /* subsection / inset card heading */
  --type-quote: var(--step-1); /* pull quotes, stat values */
  --type-body: var(--step-0); /* paragraphs, list items, descriptions */
  --type-meta: var(--step--1); /* mono uppercase labels, button text */
  --type-eyebrow: 0.875rem; /* 14px, off-scale: between step--1 and step-0 */
  --type-micro: var(
    --step--2
  ); /* tiny annotations, dimension marks, card meta */
}

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

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: clip;
  /* Paint the root so iOS Safari's overscroll/rubber-band regions and the
     safe-area insets sample the page tone instead of falling back to white.
     Matched to bg-pattern.jpg's average (warm tan) — not --bg-paper, which is
     greener and would seam visibly against the texture. */
  background-color: #fcdab4;
}

body {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  min-height: 100vh;
  background-repeat: repeat;
}

a {
  color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

/* Page frame chrome — full-viewport-width decorations */

.page-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* viewport-fit=cover lets the paper background fill the device safe areas;
     pad the content back in so it clears the notch and home indicator. */
  padding: calc(var(--frame-pad) + var(--header-height) + env(safe-area-inset-top, 0px))
    var(--frame-pad)
    calc(var(--frame-pad) + 32px + env(safe-area-inset-bottom, 0px));
}

.page-frame__corner {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 0 solid var(--ink);
  pointer-events: none;
  z-index: 100;
}
/* Top corners sit above the fixed nav row, not beside it — half the frame
   padding keeps them tucked into the viewport corner. */
.page-frame__corner--tl {
  top: calc(var(--frame-pad) / 2);
  left: var(--frame-pad);
  border-top-width: 1px;
  border-left-width: 1px;
}
.page-frame__corner--tr {
  top: calc(var(--frame-pad) / 2);
  right: var(--frame-pad);
  border-top-width: 1px;
  border-right-width: 1px;
}
.page-frame__corner--bl {
  bottom: calc(var(--frame-pad) + 32px + env(safe-area-inset-bottom, 0px));
  left: var(--frame-pad);
  border-bottom-width: 1px;
  border-left-width: 1px;
}
.page-frame__corner--br {
  bottom: calc(var(--frame-pad) + 32px + env(safe-area-inset-bottom, 0px));
  right: var(--frame-pad);
  border-bottom-width: 1px;
  border-right-width: 1px;
}

@media (max-width: 768px) {
  .page-frame__corner {
    display: none;
  }
}

.page-frame__strip {
  position: absolute;
  bottom: calc(var(--frame-pad) + env(safe-area-inset-bottom, 0px));
  left: var(--frame-pad);
  right: var(--frame-pad);
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink);
  text-transform: uppercase;
}

.page-frame__strip-rule {
  flex: 1;
  height: 1px;
  background: var(--ink);
  opacity: 0.6;
}

@media (max-width: 640px) {
  .page-frame__strip {
    font-size: 9px;
    gap: 10px;
  }
}

/* Content max-width utility — single source of truth */

.k-container {
  max-width: var(--content-max);
  margin-inline: auto;
}

/* Modules use <section> or <footer> as their root, so this picks them up automatically.
   `.body-wrapper` is the prod layout root; `#root` is the dev module preview root. */
:is(.body-wrapper, #root) :is(section, footer) {
  max-width: var(--content-max);
  margin-inline: auto;
}

body hs-cmsf-branding {
  display: none !important;
}