/* ============================================================
   BASE — reset, typography utilities, layout primitives
   ============================================================ */

/* No @font-face for Griaste on purpose. It is licensed per-deployment and
   gitignored (see the repo .gitignore), so it never reaches the server and
   the URLs only ever produced two 404s per page load — the woff2 was never
   generated in the first place. 'Griaste' stays at the head of --font--logo
   in tokens.css, which honours a locally installed copy and otherwise falls
   through to Space Grotesk.

   Buy it at https://twinletter.com/ — the widely circulated file is a DEMO
   release restricted to personal, non-commercial use. */

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

html {
  background-color: var(--theme--background);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--theme--background);
  color: var(--theme--text);
  font-family: var(--font--primary);
  font-size: var(--fs--main);
  line-height: var(--lh--1-3);
  letter-spacing: var(--ls--0-01);
  font-weight: var(--font--primary-weight);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

body.overflow-hidden {
  overflow: hidden;
}

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

h1, h2, h3, h4, h5, h6, p, blockquote, label {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

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

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

a:not([class]) {
  text-decoration: underline;
}

button {
  margin: 0;
  border: 0;
  padding: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: inherit;
}

button:not(:disabled) {
  cursor: pointer;
}

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

video {
  width: 100%;
  object-fit: cover;
}

img::selection {
  background: transparent;
}

::selection {
  background-color: var(--theme--selection-bg);
  color: var(--theme--selection-text);
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: var(--focus--width) solid var(--theme--text);
  outline-offset: var(--focus--offset-outer);
}

/* ------------------------------------------------------------
   Typography scale
   ------------------------------------------------------------ */

.u-text-style-display {
  font-family: var(--font--display);
  font-size: var(--fs--display);
  line-height: var(--lh--0-9);
  font-weight: var(--font--medium-weight);
  letter-spacing: var(--ls--0-03);
  text-transform: uppercase;
}

.u-text-style-display-small { font-size: var(--fs--display-small); }

.u-text-style-h1 {
  font-size: var(--fs--h1);
  line-height: var(--lh--1-1);
  font-weight: var(--font--medium-weight);
  letter-spacing: var(--ls--0-03);
}

.u-text-style-h2 {
  font-size: var(--fs--h2);
  line-height: var(--lh--1);
  font-weight: var(--font--medium-weight);
  letter-spacing: var(--ls--0-03);
}

.u-text-style-h3 {
  font-size: var(--fs--h3);
  line-height: var(--lh--1);
  font-weight: var(--font--medium-weight);
  letter-spacing: var(--ls--0-03);
}

.u-text-style-h4 {
  font-size: var(--fs--h4);
  line-height: var(--lh--1-1);
  font-weight: var(--font--medium-weight);
  letter-spacing: var(--ls--0-03);
}

.u-text-style-h5 {
  font-size: var(--fs--h5);
  line-height: var(--lh--1-1);
  font-weight: var(--font--medium-weight);
  letter-spacing: var(--ls--0-01);
}

.u-text-style-h6 {
  font-size: var(--fs--h6);
  line-height: var(--lh--1-1);
  font-weight: var(--font--medium-weight);
  letter-spacing: var(--ls--0-01);
}

.u-text-style-large  { font-size: var(--fs--large);  line-height: var(--lh--1-3); }
.u-text-style-main   { font-size: var(--fs--main);   line-height: var(--lh--1-3); }
.u-text-style-small  { font-size: var(--fs--small);  line-height: var(--lh--1-3); }
.u-text-style-xsmall { font-size: var(--fs--xsmall); line-height: var(--lh--1-3); }
.u-text-style-micro  { font-size: var(--fs--micro);  line-height: var(--lh--1-3); }

.u-text-mono {
  font-family: var(--font--mono);
  text-transform: uppercase;
  letter-spacing: 0;
}

.u-weight-medium { font-weight: var(--font--medium-weight); }
.u-text-muted    { color: var(--theme--text-muted); }
.u-text-accent   { color: var(--theme--heading-accent); }

/* Optical line-height trim — pulls the half-leading off the first
   and last line so text boxes align to their cap height. */
:is([class*="u-text-style-"], h1, h2, h3, h4, h5, h6, p):not(.u-text-trim-off)::before {
  content: "";
  display: table;
  margin-bottom: calc(-0.5lh + var(--font--trim-top));
}

:is([class*="u-text-style-"], h1, h2, h3, h4, h5, h6, p):not(.u-text-trim-off)::after {
  content: "";
  display: table;
  margin-top: calc(-0.5lh + var(--font--trim-bottom));
}

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

.u-container {
  position: relative;
  z-index: 1;
  width: calc(100% - var(--site--margin) * 2);
  max-width: var(--max-width--main);
  margin-inline: auto;
}

.u-container-full {
  position: relative;
  z-index: 1;
  width: calc(100% - var(--site--margin) * 2);
  max-width: var(--max-width--full);
  margin-inline: auto;
}

.u-grid-custom {
  display: grid;
  grid-template-columns: repeat(var(--site--column-count), minmax(0, 1fr));
  gap: var(--site--gutter);
}

/* data-column-span / data-column-start place children on the 12-col grid */
[data-column-span="1"]  { grid-column: span 1  / span 1; }
[data-column-span="2"]  { grid-column: span 2  / span 2; }
[data-column-span="3"]  { grid-column: span 3  / span 3; }
[data-column-span="4"]  { grid-column: span 4  / span 4; }
[data-column-span="5"]  { grid-column: span 5  / span 5; }
[data-column-span="6"]  { grid-column: span 6  / span 6; }
[data-column-span="7"]  { grid-column: span 7  / span 7; }
[data-column-span="8"]  { grid-column: span 8  / span 8; }
[data-column-span="9"]  { grid-column: span 9  / span 9; }
[data-column-span="10"] { grid-column: span 10 / span 10; }
[data-column-span="11"] { grid-column: span 11 / span 11; }
[data-column-span="12"] { grid-column: span 12 / span 12; }

[data-column-start="1"]  { grid-column-start: 1; }
[data-column-start="2"]  { grid-column-start: 2; }
[data-column-start="3"]  { grid-column-start: 3; }
[data-column-start="4"]  { grid-column-start: 4; }
[data-column-start="5"]  { grid-column-start: 5; }
[data-column-start="6"]  { grid-column-start: 6; }
[data-column-start="7"]  { grid-column-start: 7; }
[data-column-start="8"]  { grid-column-start: 8; }
[data-column-start="9"]  { grid-column-start: 9; }
[data-column-start="10"] { grid-column-start: 10; }
[data-column-start="11"] { grid-column-start: 11; }
[data-column-start="12"] { grid-column-start: 12; }

.u-hflex-left-center { display: flex; align-items: center; }
.u-vflex             { display: flex; flex-direction: column; }
.u-gap-small         { gap: var(--space--3); }
.u-gap-main          { gap: var(--space--5); }

.u-ratio-1-1  { aspect-ratio: 1 / 1; }
.u-ratio-16-9 { aspect-ratio: 16 / 9; }
.u-ratio-4-5  { aspect-ratio: 4 / 5; }

.u-cover-absolute {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.u-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------
   Split-text scaffolding (GSAP SplitText writes into these)
   ------------------------------------------------------------ */

.line,
.split-line-mask {
  overflow: hidden;
  display: block;
}

.split-line,
.word,
.letter,
.eyebrow-word {
  display: inline-block;
  will-change: transform;
}

[data-split="heading"],
[data-split-text] {
  visibility: hidden;
}

/* Elements the intro timeline fades in — hidden until JS runs so
   nothing flashes before the timeline takes over. */
[data-animate] {
  visibility: hidden;
  opacity: 0;
}

.no-js [data-animate],
.no-js [data-split="heading"],
.no-js [data-split-text] {
  visibility: visible;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}