/* =========================================================================
   base.css — reset, root typography, design-system type scale + utilities.
   Utility class names mirror the source so the ported markup "just works".
   ========================================================================= */

/* ---- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html {
  min-height: 100%;
  width: 100%;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: auto; /* smooth scroll handled by Lenis in JS */
}
body {
  font-family: var(--font-text);
  font-weight: var(--fw-regular);
  font-style: normal;
  line-height: 1;
  color: var(--color-text);
  background: var(--color-bg);
  min-height: 100vh;
  overflow-x: hidden;
}
img, video, svg, canvas { display: block; max-width: 100%; }
img, video { height: auto; }

/* Icon sizing. Sprite icons (<svg><use href="icons.svg#…"></svg>) have no
   intrinsic size and otherwise balloon to 300×150 — pin them to a sane box.
   Inline SVGs that carry width/height attributes keep their own size. */
._icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1.5rem; height: 1.5rem; }
._icon > svg { width: 100%; height: 100%; }
svg._icon { width: 1.5rem; height: 1.5rem; }
svg:has(> use) { width: 1.5rem; height: 1.5rem; }   /* catch-all for sprite hosts */
svg[width][height] { width: revert; height: revert; } /* respect explicit attrs */

/* The ported inline icons paint their paths via a data-mode flag (the source's
   convention) instead of fill/stroke attributes. Map both to currentColor so
   every icon follows its surrounding text colour. Without this, stroke icons
   are invisible and fill icons render black. */
[data-mode="stroke"] { stroke: currentColor; fill: none; }
[data-mode="fill"]   { fill: currentColor; stroke: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* ---- Type scale (exact clamp() from source) ------------------------------ */
.title-1 { font-size: var(--title-1); line-height: .9;  letter-spacing: 0;     font-weight: var(--fw-regular); }
.title-2 { font-size: var(--title-2); line-height: 1;   letter-spacing: 0;     font-weight: var(--fw-regular); }
.title-3 { font-size: var(--title-3); line-height: 1;   letter-spacing: .01em; font-weight: var(--fw-regular); }
.title-4 { font-size: var(--title-4); line-height: 1.1; letter-spacing: .01em; font-weight: var(--fw-regular); }
.title-5 { font-size: var(--title-5); line-height: 1.2; letter-spacing: .01em; font-weight: var(--fw-regular); }

.subhead-1    { font-size: clamp(23px, 19.139px + 100vw * .0099, 36px); line-height: 1.2; letter-spacing: .01em; }
.subhead-2,
.xs-subhead-2 { font-size: clamp(19px, 17.518px + 100vw * .0038, 24px); line-height: 1.2; letter-spacing: .01em; }

.body       { font-size: var(--body); line-height: 1.5; }
.body-small { font-size: var(--body-small); line-height: 1.5; letter-spacing: .03em; }

/* weight + whitespace modifiers */
.-book   { font-weight: var(--fw-book); }
.-medium { font-weight: var(--fw-medium); }
.-semi   { font-weight: var(--fw-semi); }
.-space  { white-space: pre-wrap !important; }

/* ---- Color utilities ----------------------------------------------------- */
.color-orange     { color: var(--orange); }
.color-orange-900 { color: var(--orange-900); }
.color-orange-25  { color: var(--orange-25); }
.color-white      { color: var(--white); }
.background-orange { background-color: var(--orange); }
.background-white  { background-color: var(--white); }

/* ---- Grid system (16-col fluid) ----------------------------------------- */
.g-row {
  display: flex;
  flex-flow: row wrap;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  padding-left:  var(--grid-padding);
  padding-right: var(--grid-padding);
}
.g-row-full {
  margin: 0 auto;
  width: var(--grid-width);
}
/* A grid cell stacks its content vertically (source's effective .g-col). */
.g-col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  padding: 0;
}

/* ---- Layout utilities ---------------------------------------------------- */
.flex        { display: flex; }
.inline-flex { display: inline-flex; }
.grid        { display: grid; }
.block       { display: block; }
.hidden      { display: none; }
.flex-col    { flex-direction: column; }
.flex-wrap   { flex-wrap: wrap; }
.grid-stack > * { grid-area: 1 / 1; }

.items-center   { align-items: center; }
.items-baseline { align-items: baseline; }
.items-start    { align-items: flex-start; }
.items-end      { align-items: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.place-center { place-items: center; place-content: center; }
.self-center  { align-self: center; }

.grow     { flex-grow: 1; }
.shrink-0 { flex-shrink: 0; }

.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }
.inset-0  { inset: 0; }
.top-0    { top: 0; }
.right-0  { right: 0; }
.bottom-0 { bottom: 0; }
.left-0   { left: 0; }

.w-full { width: 100%; }
.h-full { height: 100%; }
.w-screen { width: 100vw; }
.object-cover    { object-fit: cover; }
.object-contain  { object-fit: contain; }

.overflow-hidden { overflow: hidden; }
.text-center { text-align: center; }
.text-left   { text-align: left; }
.whitespace-nowrap   { white-space: nowrap; }
.whitespace-pre-line { white-space: pre-line; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.br-full { border-radius: 100%; }
.no-select { -webkit-user-select: none; user-select: none; }
.no-tap-highlight { -webkit-tap-highlight-color: transparent; }
.cursor-pointer { cursor: pointer; }

.opacity-50 { opacity: .5; }
.opacity-70 { opacity: .7; }

/* ---- Spacing utilities (map to scale vars) ------------------------------ */
.gap-2  { gap: var(--2); }   .gap-4  { gap: var(--4); }
.gap-8  { gap: var(--8); }   .gap-10 { gap: var(--10); }
.gap-12 { gap: var(--12); }  .gap-16 { gap: var(--16); }
.gap-20 { gap: var(--20); }  .gap-24 { gap: var(--24); }
.gap-32 { gap: var(--32); }

.mt-8  { margin-top: var(--8); }   .mt-10 { margin-top: var(--10); }
.mt-16 { margin-top: var(--16); }  .mt-24 { margin-top: var(--24); }
.mt-32 { margin-top: var(--32); }
.mb-8  { margin-bottom: var(--8); } .mb-16 { margin-bottom: var(--16); }
.mr-8  { margin-right: var(--8); }  .ml-8  { margin-left: var(--8); }
.pl-8  { padding-left: var(--8); }  .pr-8  { padding-right: var(--8); }

.my-180-64 { margin-top: var(--180-64); margin-bottom: var(--180-64); }
.py-32-16  { padding-top: var(--32-16); padding-bottom: var(--32-16); }
.px-32-16  { padding-left: var(--32-16); padding-right: var(--32-16); }
.pb-120-64 { padding-bottom: var(--120-64); }

/* ---- Mobile (xs) variants used in source -------------------------------- */
@media (max-width: 743px) {
  .xs-16 { font-size: 16px; }
  .xs-w-cols-12 { width: 100%; }
  .xs-hidden { display: none; }
}
@media (min-width: 744px) {
  .xs-only { display: none; }
}