/* ==========================================================================
   base.css  —  font faces, reset, element defaults, layout primitives
   ========================================================================== */

/* ---- Self-hosted faces (no Google CDN, GDPR) ----------------------------- */
@font-face {
  font-family: "Raleway";
  src: url("../fonts/raleway-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Urbanist";
  src: url("../fonts/urbanist-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Urbanist";
  src: url("../fonts/urbanist-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Urbanist";
  src: url("../fonts/urbanist-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

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

/* A class that sets a display beats the browser's own rule for the attribute,
   and several components here do. This puts `hidden` back in charge of
   whether a thing is on the page, which is the one job it has. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;          /* Lenis owns scrolling; see main.js */
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

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

img { height: auto; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--c-navy-500);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* ---- Lenis -------------------------------------------------------------- */
html.lenis,
html.lenis body { height: auto; }

.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch] { overscroll-behavior: contain; }

.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---- Document defaults --------------------------------------------------- */
body {
  background: var(--bg-page);
  color: var(--text-default);
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* clip, not hidden. `hidden` quietly makes the body a scroll container, and
     position: sticky then resolves against that container instead of the
     viewport -- so nothing inside the page can stick. `clip` trims the same
     stray horizontal overflow without creating one. Safari before 16 does not
     know `clip` and keeps the `hidden` above it, trading sticky for the clip. */
  overflow-x: hidden;
  overflow-x: clip;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--c-navy);
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { text-wrap: pretty; }

strong, b { font-weight: var(--fw-semi); }

::selection {
  background: var(--c-terracotta);
  color: var(--c-white);
}

/* ---- Layout primitives ---------------------------------------------------- */

/* Outer page frame. Everything sits inside this. */
.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--shell-pad);
}

/* Content column inside a rounded block. */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
}

/* A full-bleed colour band.
   The comp stacks these edge to edge with square corners and no gap between
   them; only the images and cards *inside* a band are rounded. The negative
   margin breaks the band out of .shell so its colour reaches both edges of the
   viewport, and the padding then re-centres the content at --container-max. */
.block {
  position: relative;
  margin-inline: calc(50% - 50vw);
}

.block--pad {
  padding-block: var(--band-y, var(--band-pad-y));
  /* The band is the viewport's full width, so half the viewport less half the
     column centres the column at --container-max; the block padding is the
     floor that keeps content off the edge on narrow screens. */
  padding-inline: max(
    var(--block-pad-x),
    calc(50vw - var(--container-max) / 2)
  );
}

.block--navy  { background: var(--c-navy);  color: var(--text-on-dark); }
.block--cream { background: var(--c-cream); }
.block--white { background: var(--c-white); }
.block--terracotta {
  background: var(--c-terracotta);
  color: var(--text-on-dark);
}

.block--navy h2,
.block--navy h3,
.block--navy h4,
.block--terracotta h2,
.block--terracotta h3,
.block--terracotta h4 { color: var(--c-white); }

/* Section rhythm */
.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--section-y-tight); }
.section--flush-top { padding-top: 0; }

/* ---- Media wrapper -------------------------------------------------------
   Holds the aspect ratio and shows a tinted placeholder until the real
   export from Figma is dropped into assets/images/.                        */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--ph-quarry);
  background-size: cover;
  background-position: center;
}

.media--earth   { background-image: var(--ph-earth); }
.media--mineral { background-image: var(--ph-mineral); }
.media--plant   { background-image: var(--ph-plant); }
.media--steel   { background-image: var(--ph-steel); }

.media img,
.ind-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* An export that hasn't been dropped in yet falls back to the placeholder
   tint rather than a broken-image glyph. See main.js. */
img.is-missing { opacity: 0; }

/* Once a real photograph is in place the tint has to go, or any transparency
   in the export shows slate grey instead of the page behind it. */
.media:has(img:not(.is-missing)) { background-image: none; }

/* Scrim so white type stays readable over photography. */
.media--scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 34, 63, 0.55) 0%,
    rgba(0, 34, 63, 0.20) 38%,
    rgba(0, 34, 63, 0.72) 100%
  );
  pointer-events: none;
}

.media--scrim-bottom::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 34, 63, 0.00) 40%,
    rgba(0, 34, 63, 0.82) 100%
  );
  pointer-events: none;
}

/* ---- Utilities ------------------------------------------------------------ */
.u-accent      { color: var(--c-terracotta); }
.u-navy        { color: var(--c-navy); }
.u-white       { color: var(--c-white); }
.u-center      { text-align: center; }
.u-mx-auto     { margin-inline: auto; }
.u-measure     { max-width: 58ch; }
.u-measure-sm  { max-width: 44ch; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -100px;
  z-index: 100;
  padding: var(--s-3) var(--s-5);
  background: var(--c-navy);
  color: var(--c-white);
  border-radius: var(--r-pill);
  transition: top var(--t-fast) var(--ease-out);
}
.skip-link:focus { top: var(--s-4); }