/* base.css — reset, root defaults, self-hosted @font-face for Latin. */

/* ── Modern reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--dmp-body-face);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--dmp-char);
  background: var(--dmp-cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.david-dmp-page,
body.david-dmp-page.elementor-page {
  background: var(--dmp-cream);
  color: var(--dmp-char);
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--dmp-red-dark); }
:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-off); }
html:lang(zh), html:lang(zh) body { font-family: var(--dmp-cjk-face); }

/* Skip-to-main link (keyboard a11y) */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--dmp-char); color: var(--dmp-cream);
  padding: 8px 16px; z-index: 1000;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ── Self-hosted fonts (Latin subset — Noto SC in noto-sans-sc.css) ──── */
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../fonts/poppins-800.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/archivo-400.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/archivo-500.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/archivo-700.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../fonts/archivo-800.woff2") format("woff2");
}

/* ── Prose defaults ───────────────────────────────────────────────────── */
h1, h2, h3 {
  font-family: var(--dmp-display-face);
  font-weight: 800;
  text-transform: uppercase;
  line-height: var(--lh-display);
  color: var(--dmp-char);
}
h1 { font-size: var(--fs-hero);    letter-spacing: var(--ls-hero); }
h2 { font-size: var(--fs-section); letter-spacing: var(--ls-hero); }
h3 { font-size: var(--fs-card-title); letter-spacing: -0.005em; line-height: var(--lh-tight); }
p  { color: var(--dmp-brown); max-width: 60ch; }
p + p { margin-top: 1rem; }

/* Selection */
::selection { background: var(--dmp-red); color: var(--dmp-cream); }

/* Placeholder-copy marker (TBD flags rendered by build). Highlights unverified
   copy in a way reviewers can't miss and is easy to grep in shipped HTML. */
.tbd {
  background: color-mix(in srgb, var(--dmp-yellow) 30%, transparent);
  color: var(--dmp-char);
  padding: 0 4px; border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  /* Wraps at word boundaries — must, or a giant TBD in the hero <h1>
     overflows the viewport. Short markers inside body copy still read fine. */
  word-break: break-word;
}

/* Section shell — reused across every page */
.section { padding: var(--sec-pad-y) var(--sec-pad-x); }
.section__inner { max-width: var(--sec-max); margin: 0 auto; }
.section--dark  { background: var(--dmp-black);   color: var(--dmp-cream-warm); }
.section--dark p { color: var(--dmp-cream-warm); opacity: 0.85; }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--dmp-cream); }
.section--red   { background: var(--dmp-red);     color: var(--dmp-cream); }
.section--red p, .section--red h1, .section--red h2 { color: var(--dmp-cream); }
.section--warm  { background: var(--dmp-cream-warm); }

/* Reveal — gated on `html.js` so no-JS / crawler / broken-JS users see
   everything at full opacity. reveal.js adds `js` to <html> at boot; the
   hidden-then-animate state only ever engages after that. */
html.js .reveal {
  opacity: 0;
  transform: translateY(var(--reveal-y));
  transition:
    opacity   var(--dur-reveal) var(--ease-reveal),
    transform var(--dur-reveal) var(--ease-reveal);
}
html.js .reveal.is-revealed { opacity: 1; transform: none; }