/* === Scale: 1rem = 1px at 1440, fluid by viewport === */
html { font-size: calc(100vw / 1440); }
@media (max-width: 900px) { html { font-size: calc(100vw / 900); } } /* mobile temp, phase 2 */

/* === Phase-2 mobile root scale (≤768px) — first-pass responsive =========
   The default calc(100vw/1440) (and the /900 step) scale EVERYTHING by
   viewport, so on a 390px phone 1rem≈0.27px and all text is unreadable.
   Override the rem base to a readable range so the whole rem-based design
   renders at a legible size, then reflow individual sections to one column
   in css/*.css (all mobile rules live in @media(max-width:768px) blocks so
   desktop >768px is untouched — this rule is source-ordered after the /900
   rule above, so it wins at ≤768). clamp floor keeps 320px legible; the cap
   stops tablet text from ballooning. 1rem: 0.8px@320 → 0.975px@390 →
   1.25px@≥500. Body 17rem ≈ 13.6→16.6→21px. */
@media (max-width: 768px) {
  html { font-size: clamp(0.8px, 100vw / 400, 1.25px); }
  /* NB: the mobile --mx override lives in components.css, which loads AFTER
     this file's main :root{--mx:60rem} below — a :root override here would be
     defeated by that later same-specificity declaration. */
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
img, video { display: block; max-width: 100%; }
button { background: none; border: 0; cursor: pointer; font: inherit; }
a { color: inherit; text-decoration: none; }

:root {
  --black: #000; --white: #fff;
  --bg-hero: #f4f4f4; --nav-pill: #000; /* feedback: logo + nav bar solid black (was #414141) */
  --text-desc: #8f8f8f; --text-desc-dim: #c0c0c0;
  --text-subitem: #6e6e6e; --divider: #e3e3e3; --dot-inactive: #d9d9d9;
  --mx: 60rem; /* content margin */
  --font-sans: "Helvetica Neue WT", "Helvetica Neue", Arial, sans-serif;
  --font-hand: "WT HandWriting", cursive;
}
@font-face { font-family: "Helvetica Neue WT"; src: url("../assets/fonts/HelveticaNeueRoman.woff2") format("woff2"), url("../assets/fonts/HelveticaNeueRoman.otf"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Helvetica Neue WT"; src: url("../assets/fonts/HelveticaNeueMedium.woff2") format("woff2"), url("../assets/fonts/HelveticaNeueMedium.otf"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Helvetica Neue WT"; src: url("../assets/fonts/HelveticaNeueBold.woff2") format("woff2"), url("../assets/fonts/HelveticaNeueBold.otf"); font-weight: 700; font-display: swap; }
@font-face { font-family: "WT HandWriting"; src: url("../assets/fonts/WT_HandWriting-Regular.woff2") format("woff2"), url("../assets/fonts/WT_HandWriting-Regular.ttf"); font-weight: 400; font-display: swap; }

body { font-family: var(--font-sans); background: var(--white); color: var(--black); -webkit-font-smoothing: antialiased; }