/* ============================================
   MAMONAKU AI — Base layer
   Loaded by BOTH visual systems, between tokens.css and the system stylesheet:

     homepage : experience.css @imports tokens.css then this file
     interior : <link> tokens.css → base.css → styles.css

   This file is the shared spine of the "Editorial Contrast" direction. The
   homepage is cinematic and the interior pages are editorial, but they run on
   one type scale, one spacing rhythm and one button skeleton — which is what
   makes the switch between them read as a decision rather than as drift.

   Scope rule: base owns STRUCTURE (size, rhythm, layout, the shape of a
   control). Each system owns its SKIN (colour, shadow, surface). Keep the
   selectors here at the lowest specificity that works, so either system can
   override without an !important or a specificity fight.
   ============================================ */

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

/* Root stays at the browser's own size: 100% respects whatever the reader has
   configured, and 1rem means 16px again so the --s-* scale is a real 8px grid.
   This is deliberately NOT a place to make type bigger — see the note on the
   type scale in tokens.css for what that broke last time. */
html {
  font-size: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body { margin: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- Type application ---------- */
h1, h2, h3, h4 {
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-wrap: balance;
}

h1 { font-size: var(--type-h1); letter-spacing: -0.025em; line-height: 1.04; }
h2 { font-size: var(--type-h2); letter-spacing: -0.02em; line-height: 1.1; }
h3 { font-size: var(--type-h3); letter-spacing: -0.005em; line-height: 1.25; }
h4 { font-size: var(--type-eyebrow); letter-spacing: 0.14em; text-transform: uppercase; }

.display {
  font-size: var(--type-display);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.02;
}

p { margin: 0 0 var(--s-2); }

/* Prose is capped by measure, not by the container. At the old root size, body
   copy ran 85–90 characters per line on desktop — well past the 45–75 that stays
   readable. The grid stays free for tables and diagrams. */
p, li { max-width: var(--measure); }

.lead {
  font-size: var(--type-lead);
  line-height: 1.55;
  max-width: var(--measure-tight);
}

/* An eyebrow labels the thing beneath it. It is small and quiet on purpose:
   when it competes with its own heading, the hierarchy inverts and the page
   stops having one. */
.eyebrow {
  font-size: var(--type-eyebrow);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: var(--font-primary);
}

/* ---------- Layout ---------- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s-4);
}

/* The 11 column gaps have to fit inside the container before any column gets
   width. At --s-4 they total more than a phone's inner width, so every column
   resolved to 0 and content spilled off the right edge on every interior page.
   Shrink only the column gap; row-gap stays --s-4 so stacked blocks keep their
   vertical rhythm. */
@media (max-width: 800px) {
  .grid-12 { column-gap: var(--s-1); }
}

/* ---------- Button skeleton ----------
   Shape only. experience.css and styles.css each colour these for their own
   ground, and both load after this file.

   Padding is in em, not rem, so the box grows with its own label. It was
   0.85rem/1.5rem — frozen — which meant that raising --type-small made the text
   bigger inside a button that stayed the same size. A 53px control next to a
   115px headline reads as small no matter what its type is doing. em ties the
   two together: one size to tune, and the button is proportionate at every
   width and on both surfaces. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-primary);
  font-size: var(--type-small);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.2;
  padding: 1.05em 1.9em;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
}
.btn .arrow { transition: transform var(--t-fast) var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }
.btn:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; }