/* base.css — quality defaults for mockup-to-code implementations.
   The last 10% of "looks right" does not come from measurement; it comes
   from these defaults. Include BEFORE section styles. */

:root {
  /* Populate from measured/normalized manifest tokens.
     RULE: no px value in section CSS without provenance in the manifest. */
  --container-width: 1200px;
  --container-pad: 24px;
  --color-bg: #ffffff;
  --color-text: #111111;
  --font-body: "Noto Sans JP", sans-serif;
  --font-heading: var(--font-body);
}

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

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
}

h1, h2, h3, h4, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; border: 0; background: none; cursor: pointer; padding: 0; }

img, svg, video {
  display: block;
  max-width: 100%;
}

.container {
  width: min(100% - var(--container-pad) * 2, var(--container-width));
  margin-inline: auto;
}

/* Japanese typography defaults */
.heading {
  font-family: var(--font-heading);
  font-feature-settings: "palt";
  letter-spacing: 0.02em;
  text-wrap: balance;
}

/* For text whose bbox was MEASURED from mockup glyph extents (snap_bbox):
   trims half-leading so the DOMRect matches the measured glyph box
   (validated: DOM h 184.8 -> 152.9 for 2-line 88px heading; residual ~3px).
   Chrome 133+. Without it, expect a systematic top offset of roughly
   (line-height - cap-height) / 2. */
.text-trim {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  width: fit-content;
}

/* media that fills a measured box */
.media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* decorative elements are positioned, never in flow */
.deco {
  position: absolute;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}