/* adjAIcent — animated landing page
   Design tokens from DESIGN.md. Charcoal-committed, editorial, industrial. */

:root {
  --ground:      oklch(0.21 0.004 65);
  --ground-2:    oklch(0.25 0.004 65);
  --ground-3:    oklch(0.29 0.004 65);
  --ink:         oklch(0.97 0.003 80);
  --ink-muted:   oklch(0.78 0.004 75);
  --ink-faint:   oklch(0.55 0.004 75);
  --rule:        oklch(0.40 0.004 75 / 0.5);
  --rule-strong: oklch(0.46 0.004 75);
  --placeholder: oklch(0.90 0.003 80);

  --font-display: "Archivo", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --pad-x: clamp(1.25rem, 5vw, 6rem);
  --label-band: clamp(3.5rem, 9vw, 9rem); /* left gutter for vertical labels */
  --footer-h: 3.25rem;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);     /* expo-ish */
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--ground);
  color: var(--ink-muted);
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.18rem);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--ink); color: var(--ground); }

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

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

.section {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: var(--label-band) 1fr;
  align-items: center;
  padding: clamp(4rem, 9vh, 8rem) var(--pad-x) calc(var(--footer-h) + 2rem);
}

.section__body { grid-column: 2; }

/* Vertical industrial section label, pinned to the left edge */
.vlabel {
  grid-column: 1;
  align-self: center;
  justify-self: start;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 125%;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.9;
  color: var(--ink);
  font-size: clamp(2.75rem, 8vw, 7.5rem);
  white-space: nowrap;
  user-select: none;
}

/* ---------- Persistent footer chrome ---------- */

.chrome {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  height: var(--footer-h);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0 var(--pad-x);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  background: linear-gradient(to top, var(--ground) 55%, transparent);
  border-top: 1px solid var(--rule);
  pointer-events: none;
}
.chrome__date { flex: 0 0 auto; }
.chrome__copy { flex: 1 1 auto; text-align: center; }
.chrome__mark {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 125%;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-transform: uppercase;
  font-size: 0.95rem;
}
.chrome__mark .ai { color: var(--ink-muted); }

/* ---------- Typography helpers ---------- */

.display {
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 125%;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 0.92;
  letter-spacing: -0.005em;
}

.kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.lede {
  font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.5rem);
  line-height: 1.55;
  max-width: 60ch;
}
.lede b, .lede strong { color: var(--ink); font-weight: 600; }

.headline {
  font-weight: 700;
  color: var(--ink);
  font-size: clamp(2rem, 1.4rem + 3vw, 4.25rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.align-right { text-align: right; margin-left: auto; }

/* Reveal animation — progressive enhancement.
   Content is visible by default. Only when JS confirms motion is on
   (html.anim) do we hide it for the entrance animation. If JS or GSAP
   fails, or reduced-motion is set, everything stays visible. */
.anim .reveal { opacity: 0; transform: translateY(1.6rem); }
.anim .is-in .reveal,
.anim .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 0.9s var(--ease-out), transform 1s var(--ease-out);
}
.anim .reveal:nth-child(2) { transition-delay: 0.06s; }
.anim .reveal:nth-child(3) { transition-delay: 0.12s; }
.anim .reveal:nth-child(4) { transition-delay: 0.18s; }
.anim .reveal:nth-child(5) { transition-delay: 0.24s; }

/* ====================================================================
   HERO
   ==================================================================== */

.hero {
  grid-template-columns: var(--label-band) 1fr;
}
.hero__mark {
  grid-column: 1;
  align-self: center;
  justify-self: start;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 125%;
  text-transform: uppercase;
  line-height: 0.86;
  letter-spacing: 0.005em;
  color: var(--ink);
  font-size: clamp(3.5rem, 13vw, 12rem);
  white-space: nowrap;
}
.hero__mark .ai { color: var(--ink-muted); }

.hero__body {
  grid-column: 2;
  align-self: center;
  justify-self: end;
  text-align: right;
  max-width: 38ch;
}
.hero__deserves {
  font-size: clamp(1.1rem, 0.9rem + 0.8vw, 1.7rem);
  color: var(--ink-faint);
  margin-bottom: 0.4rem;
}
.hero__stack {
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 110%;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 0.98;
  font-size: clamp(2.6rem, 1.5rem + 6vw, 6rem);
  letter-spacing: -0.01em;
}
.hero__tag {
  margin-top: clamp(1.5rem, 4vh, 3rem);
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.scroll-cue {
  position: absolute;
  left: 50%; bottom: calc(var(--footer-h) + 1.2rem);
  transform: translateX(-50%);
  font-size: 0.68rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}
.scroll-cue::after {
  content: ""; width: 1px; height: 2.2rem;
  background: linear-gradient(var(--rule-strong), transparent);
  animation: cue 2.4s var(--ease-out) infinite;
}
@keyframes cue { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ====================================================================
   WORK REEL  (the centrepiece — infinite scrolling wall)
   ==================================================================== */

.reel {
  position: relative;
  min-height: 100svh;
  padding: 0;
  display: block;
  overflow: hidden;
}
.reel__intro {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-items: center;
  pointer-events: none;
  text-align: center;
  padding: var(--pad-x);
}
.reel__intro .headline { max-width: 18ch; }
.reel__intro p { color: var(--ink-muted); margin-top: 1rem; }
/* darkening scrim so overlaid intro copy stays legible over media */
.reel__scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse at center, oklch(0.21 0.004 65 / 0.72), oklch(0.21 0.004 65 / 0.35));
}
.reel__cols {
  position: absolute; inset: 0; z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
  padding: 0.6rem;
}
@media (max-width: 860px) { .reel__cols { grid-template-columns: repeat(2, 1fr); } }
.reel__col { position: relative; overflow: hidden; }
.reel__track {
  display: flex; flex-direction: column; gap: 0.6rem;
  animation: scroll-up var(--dur, 38s) linear infinite;
  will-change: transform;
}
.reel__col:nth-child(2) .reel__track { --dur: 50s; }
.reel__col:nth-child(3) .reel__track { --dur: 44s; }
.reel__col:nth-child(4) .reel__track { --dur: 56s; }
@keyframes scroll-up { to { transform: translateY(-50%); } }
@media (prefers-reduced-motion: reduce) { .reel__track { animation: none; } }

/* work tiles (placeholder treatment) */
.tile {
  position: relative;
  background: var(--placeholder);
  color: oklch(0.30 0.01 65);
  border-radius: 2px;
  overflow: hidden;
  display: flex; align-items: flex-end;
  aspect-ratio: var(--ar, 4 / 3);
  flex: 0 0 auto;
}
.tile--tall { --ar: 3 / 4; }
.tile--wide { --ar: 16 / 9; }
.tile--sq { --ar: 1 / 1; }
.tile__label {
  position: relative; z-index: 2;
  font-family: var(--font-display);
  font-weight: 800; font-stretch: 110%;
  text-transform: uppercase; letter-spacing: 0.02em;
  font-size: clamp(0.8rem, 0.7rem + 0.5vw, 1.05rem);
  padding: 0.7rem 0.8rem; line-height: 1;
}
.tile--dark { background: var(--ground-3); color: var(--ink); }
.tile--video::after {
  content: "▶";
  position: absolute; top: 0.6rem; right: 0.7rem; z-index: 2;
  font-size: 0.7rem; color: oklch(0.30 0.01 65 / 0.75);
}
.tile--dark.tile--video::after { color: var(--ink-muted); }

/* ====================================================================
   WORK CASE STUDIES (bento)
   ==================================================================== */

.case__head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: clamp(1.5rem, 4vh, 2.5rem); }
.case__num { font-family: var(--font-display); font-weight: 900; color: var(--rule-strong); font-size: 1rem; }
.case__title { font-family: var(--font-display); font-weight: 900; font-stretch: 110%; text-transform: uppercase; color: var(--ink); font-size: clamp(1.6rem, 1.1rem + 2.6vw, 3.2rem); letter-spacing: -0.01em; line-height: 1; }
.case__copy { max-width: 56ch; color: var(--ink-muted); }

.bento {
  display: grid;
  gap: 0.75rem;
  margin-bottom: clamp(1.75rem, 4vh, 2.75rem);
  grid-template-columns: 1fr 1.6fr;
  grid-auto-rows: minmax(0, 1fr);
  aspect-ratio: 16 / 7;
  max-height: 56vh;
}
.bento .tile { aspect-ratio: auto; height: 100%; }
.bento--split { grid-template-columns: 1fr 1fr; }
.bento--stack { grid-template-rows: 1fr 1fr; grid-template-columns: 1fr 1.6fr; }
.bento--stack .tile:first-child { grid-row: span 2; }

/* ====================================================================
   MANIFESTO sections (Mission / Difference)
   ==================================================================== */

.manifesto .section__body { display: flex; flex-direction: column; gap: 1.6rem; }
.manifesto--right .section__body { align-items: flex-end; text-align: right; }
.manifesto p { max-width: 52ch; }

/* the "list of work includes" ticker style */
.includes { display: flex; flex-direction: column; gap: 2rem; max-width: 60ch; }
.includes__group .kicker { margin-bottom: 0.6rem; }
.includes__items { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; }
.includes__items span { font-family: var(--font-display); font-weight: 800; font-stretch: 110%; text-transform: uppercase; color: var(--ink); font-size: clamp(1.1rem, 0.9rem + 1vw, 1.9rem); letter-spacing: 0.01em; }
.includes__items span.dim { color: var(--ink-faint); }

/* founders credentials */
.brands { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin-top: 0.5rem; }
.brands span { font-family: var(--font-display); font-weight: 800; color: var(--ink); font-size: clamp(0.95rem, 0.8rem + 0.7vw, 1.4rem); text-transform: uppercase; letter-spacing: 0.02em; }

/* ====================================================================
   CLOSING — ONWARD
   ==================================================================== */

.closing {
  display: grid; place-items: center; text-align: center;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 6vh, 4rem);
}
.closing .section__body { grid-column: 1; display: contents; }
.onward {
  font-family: var(--font-display);
  font-weight: 900; font-stretch: 110%;
  text-transform: uppercase;
  color: var(--ink);
  font-size: clamp(4rem, 1rem + 18vw, 15rem);
  line-height: 0.85;
  letter-spacing: -0.02em;
}
.closing__line { max-width: 30ch; color: var(--ink-muted); font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.4rem); }
.closing__line b { color: var(--ink); font-weight: 600; }
.closing__contact { display: flex; flex-direction: column; gap: 0.3rem; align-items: center; }
.closing__contact a { border-bottom: 1px solid var(--rule-strong); padding-bottom: 2px; color: var(--ink); font-weight: 500; }
.closing__contact .small { color: var(--ink-faint); border: 0; font-size: 0.95rem; }

/* ====================================================================
   Responsive
   ==================================================================== */

@media (max-width: 720px) {
  /* Top-align content and clear the absolute label with padding (not margin),
     so tall sections grow downward instead of pushing copy under the footer. */
  .section { grid-template-columns: 1fr; align-items: start; padding-top: clamp(6.5rem, 17vh, 9rem); padding-bottom: calc(var(--footer-h) + 1.75rem); }
  .section:not(.hero):not(.closing) { align-items: start; }
  /* sized so the longest label ("THE DIFFERENCE") fits within the viewport */
  .vlabel { grid-column: 1; position: absolute; top: clamp(1.75rem, 5.5vh, 3rem); left: var(--pad-x); right: var(--pad-x); writing-mode: horizontal-tb; transform: none; font-size: clamp(1.6rem, 8.4vw, 2.75rem); letter-spacing: -0.01em; }
  .section__body { grid-column: 1; margin-top: 0; }
  .hero { grid-template-columns: 1fr; align-items: center; }
  .closing { align-items: center; }
  .hero__mark { grid-column: 1; writing-mode: horizontal-tb; transform: none; justify-self: start; font-size: clamp(1.9rem, 12.5vw, 4.5rem); letter-spacing: -0.015em; max-width: 100%; align-self: end; }
  .hero__body { grid-column: 1; justify-self: start; text-align: left; align-self: start; margin-top: 1.5rem; }
  .manifesto--right .section__body, .align-right, .hero__body { text-align: left; align-items: flex-start; }
  .bento { aspect-ratio: auto; max-height: none; grid-template-columns: 1fr 1fr; grid-auto-rows: 28vw; }
  .onward { font-size: clamp(3rem, 16.5vw, 7rem); letter-spacing: -0.03em; }
  .chrome__copy { display: none; }
}