/* Karkhana Labs: base layer. Tokens, reset, type, grid, buttons, the shared furnace arch.
   Everything else lives in css/sections/*.css (one file per section). */

/* ---------- Tokens (DESIGN section 2) ---------- */
:root {
  --bg: #0c0a08;
  --bg-2: #110e0b;
  --surface: #17130f;
  --ink: #eeebe6;
  --muted: #a59a8c;
  --accent: #f5a524;
  --accent-ink: #1a1206;
  --fire-core: #ffd88a;
  --fire-mid: #f5a524;
  --fire-edge: #c2410c;
  --paper: #ece4d4;
  --paper-ink: #1a1510;
  --glass: rgba(243, 237, 228, 0.035);
  --glass-line: rgba(243, 237, 228, 0.08);

  --font-display: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Source Serif 4", Georgia, "Times New Roman", serif;

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --step-hero: clamp(4.25rem, 12.5vw, 12.5rem);

  --margin: 24px;            /* outer margin, identical left and right */
  --gutter: 24px;            /* 12-column grid gutter */
  --section-gap: clamp(6rem, 4rem + 8vw, 11rem);
  --radius: 20px;            /* the one radius; buttons are full pills */
  --pill: 999px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --arch-w: 160vw;
  --arch-crown: 8vh;
  --bloom-w: 70vw;
  --bloom-blur: 40px;
}

@media (max-width: 720px) {
  :root {
    --margin: 16px;
    --section-gap: clamp(6rem, 5rem + 4vw, 7.5rem);
    --arch-w: 240vw;
    --bloom-w: 130vw;
    --bloom-blur: 28px;
  }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  min-height: 100svh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--step-body);
  font-weight: 400;
  line-height: 1.55;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, picture, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
[hidden] { display: none !important; }
::selection { background: var(--accent); color: var(--accent-ink); }

/* ---------- Typography ---------- */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.92;
  text-wrap: balance;
}
h2 { font-size: var(--step-head); }
h3 { font-size: var(--step-lead); line-height: 1.05; }
.lead { font-size: var(--step-lead); line-height: 1.4; }
.small { font-size: var(--step-small); }
.muted { color: var(--muted); }
.display { font-family: var(--font-display); }
.tnum, [data-count] { font-variant-numeric: tabular-nums; }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: 1760px;
  margin-inline: auto;
  padding-inline: var(--margin);
}
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}
.section { padding-block: var(--section-gap) 0; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed; left: var(--margin); top: 8px; z-index: 200;
  padding: 10px 18px; border-radius: var(--pill);
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-display); font-weight: 500; font-size: 1rem;
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; }

/* ---------- Focus and press feedback ---------- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }

/* ---------- Buttons: every button is a full pill ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 48px;
  padding: 0 28px;
  border-radius: var(--pill);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 240ms ease, color 240ms ease, transform 300ms var(--ease-out);
}
.btn svg { width: 1em; height: 1em; flex: none; }
.btn:active { transform: scale(0.97); }
.btn--sm { min-height: 44px; padding: 0 22px; font-size: 1rem; }
.btn--ghost {
  color: var(--ink);
  background: rgba(243, 237, 228, 0.1);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--fire-core); }
  .btn--ghost:hover { background: rgba(243, 237, 228, 0.08); }
}

/* ---------- The furnace arch (DESIGN section 6) ----------
   <div class="arch" data-arch="hero|reveal|footer" aria-hidden="true">
     <div class="arch__bloom"></div><div class="arch__rim"></div>
   </div>
   Placed by the section: the parent is position:relative; overflow:hidden (or clip).
   Centred with a negative margin, not a transform, so motion.js can animate transform/opacity freely.
   --arch-crown = how far the crown rises above the parent's bottom edge. */
.arch {
  position: absolute;
  left: 50%;
  top: calc(100% - var(--arch-crown));
  width: var(--arch-w);
  margin-left: calc(var(--arch-w) / -2); /* centred without a transform */
  aspect-ratio: 2.4 / 1;
  pointer-events: none;
  z-index: 0;
}
.arch__rim {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #070605; /* the dark mouth of the kiln */
  box-shadow: /* taste-skill-ignore: owner-approved furnace arch (DESIGN §3) */
    inset 0 3px 0 var(--fire-core),
    inset 0 8px 18px var(--fire-mid),
    0 -2px 24px var(--fire-mid),
    0 -10px 80px var(--fire-edge);
}
/* hottest at the centre of the crown */
.arch__rim::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: /* taste-skill-ignore: owner-approved furnace arch (DESIGN §3) */ radial-gradient(ellipse 26% 12% at 50% 0%, rgba(255, 228, 170, 0.55), transparent 72%);
}
.arch__bloom {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 3vh);
  width: var(--bloom-w);
  margin-left: calc(var(--bloom-w) / -2);
  aspect-ratio: 2.4 / 1;
  background: /* taste-skill-ignore: owner-approved furnace arch (DESIGN §3) */ radial-gradient(ellipse at 50% 100%,
    rgba(255, 216, 138, 0.55),
    rgba(245, 165, 36, 0.25) 30%,
    rgba(194, 65, 12, 0.12) 55%,
    transparent 70%);
  filter: blur(var(--bloom-blur));
}
/* Variants: only the crown height differs; sections may refine in their own CSS. */
.arch[data-arch="hero"]   { --arch-crown: clamp(36px, 5vh, 64px); }
.arch[data-arch="reveal"] { --arch-crown: 24vh; }
.arch[data-arch="footer"] { --arch-crown: 42%; --bloom-w: 90vw; }

/* ---------- Reduced motion: final states, only short fades ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.2s !important;
    scroll-behavior: auto !important;
  }
  .btn:active { transform: none; }
}