/* ---------- Design tokens ---------- */
:root {
  /* Colors — the entire site uses only these four */
  --color-bg: #f2f2f2;        /* very light grey — page bg + "white" text */
  --color-fg: #000000;        /* black */
  --color-muted: #acacac;     /* grey — secondary text + icons */
  --color-orange: #fb6531;    /* orange accent */
  --color-black: #000000;     /* dark panels */
  --color-white: #f2f2f2;     /* alias for the light-grey "white" */

  /* Typography */
  --font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Inter Tight is acting as a stand-in for Galeria until purchased */
  --font-sans: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Type sizes — used as a small scale across the site */
  --fs-lead: 26px;            /* the bio paragraph + join CTA copy */

  /* Layout */
  --page-pad-x: clamp(12px, 1.5vw, 24px);
  --section-gap: var(--page-pad-x); /* gaps between panels match outer margin */
  --radius: 16px;                   /* rounded corners on panels */
}

/* ---------- Reset-ish ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;     /* in-page nav links glide instead of jump */
}
html, body {
  margin: 0;
  padding: 0;
}
body {
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Placeholder boxes (skeleton mode) ----------
   Every section is a labeled empty box right now. We'll
   strip the dashed borders + labels once we start filling
   in real content section by section. */
.placeholder {
  position: relative;
  outline: 1px dashed rgba(0, 0, 0, 0.25);
  outline-offset: -1px;
}
.placeholder::before {
  content: attr(data-label);
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.55);
  background: rgba(255, 255, 255, 0.6);
  padding: 2px 6px;
  border-radius: 2px;
  pointer-events: none;
}
/* Lighter label color when the panel is dark */
.join.placeholder::before,
.follow.placeholder::before {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 0, 0.4);
}

/* ---------- NAV ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;                  /* sits below the intro overlay (9999) */
  display: flex;
  align-items: flex-start;       /* flush to the top edge */
  justify-content: space-between;
  padding: var(--page-pad-x);    /* top + sides match the page margin */
  background: var(--color-bg);   /* solid bg so panels don't show through when stuck */
  transition: transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.nav--hidden {
  transform: translateY(-100%);  /* slide the whole bar off the top of the screen */
}
.nav__logo {
  display: inline-flex;
  align-items: center;
}
.nav__logo img {
  height: 44px;
  width: auto;
  display: block;
}
.nav__links {
  display: flex;
  gap: 28px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--color-fg);
  /* Sit flush with the page top margin — same line of pixels as the logo's top edge */
}
.nav__links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
}
/* Inline SVG icons — text stays black, icon turns orange on hover. */
.nav__icon {
  display: inline-block;
  flex-shrink: 0;
  color: var(--color-muted);
  transition: color 120ms ease;
}
.nav__links a:hover .nav__icon {
  color: var(--color-orange);
}

/* ---------- Section wrapper (padding + rounded panels) ---------- */
main {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
  padding: 0 var(--page-pad-x) var(--section-gap);
}

main > section,
main > footer {
  border-radius: var(--radius);
  overflow: hidden; /* keeps content (e.g. video) clipped to rounded corners */
}

/* ---------- HERO ---------- */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;          /* vertically center copy + media in the hero */
  gap: var(--section-gap);
  min-height: 960px;
  padding: 80px 0;
  background: var(--color-bg);
  overflow: visible;            /* allow the heading's -5px shift to remain visible */
  border-radius: 0;             /* hero shares the page bg, so corners are unnecessary */
}
.hero__copy {
  position: relative;           /* anchor for the absolute sidelabel inside */
}
.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-fg);
  margin: 0 0 28px;
}
.hero__heading {
  font-family: var(--font-sans);
  font-weight: 300;             /* Inter Tight Light */
  font-size: clamp(31px, 2.86vw, 44px); /* +10% from previous */
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: -5px 0 0 -3px;        /* shift left 3px (was -5) and up 5px */
  max-width: 32ch;
  color: var(--color-fg);       /* all heading text is black now */
}
.hero__heading--strong {
  color: var(--color-fg);
}
.hero__heading--muted {
  color: var(--color-fg);       /* all heading text is black */
}
.hero__media {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.hero__portrait {
  max-width: 100%;
  max-height: 720px;
  width: auto;
  height: auto;
  display: block;
  /* White areas in the video become transparent, leaving only the dark
     ASCII figure visible against the page's #F2F2F2 bg. */
  mix-blend-mode: multiply;
}
.hero__sidelabel {
  /* Anchored inside .hero__copy at top: 0 (same line as the eyebrow), then
     pushed right past the media column to sit on the hero's right edge. */
  position: absolute;
  top: 0;
  right: calc(-100% - var(--section-gap) + 8px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  writing-mode: vertical-rl;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--color-fg);       /* black */
}
.hero__sidelabel img {
  width: 9px;
  height: 9px;
  display: block;               /* grey circle from the menu icon set */
}

/* ---------- TEAM + JOIN row ---------- */
.row-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;           /* let team + join take their own heights */
  gap: var(--section-gap);
}
.row-two > div {
  border-radius: var(--radius);
  overflow: hidden;
}
.team {
  position: relative;
  background: var(--color-orange);
  min-height: 630px;
  padding: var(--page-pad-x);   /* matches outer margin + section gap */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  color: var(--color-fg);
}
.team__list {
  display: grid;
  grid-template-columns: max-content max-content;
  column-gap: 56px;
  row-gap: 0;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.team__list dt,
.team__list dd {
  margin: 0;
  line-height: 1.2;             /* tighter, matches the design */
}
.team__about {
  font-family: var(--font-sans);
  font-weight: 300;             /* Inter Tight Light, matches the lead style */
  font-size: var(--fs-lead);
  line-height: 1.3;
  margin: 0;
  max-width: 75%;               /* ~75% of the orange panel */
}
.team__sidelabel {
  position: absolute;
  top: var(--page-pad-x);
  right: var(--page-pad-x);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  writing-mode: vertical-rl;    /* runs top-to-bottom in the corner */
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--color-fg);
}
.team__sidelabel img {
  width: 9px;
  height: 9px;
  display: block;
  /* tint the grey SVG to match the dark text on orange */
  filter: brightness(0);
}
.join {
  position: relative;
  background: var(--color-black);
  min-height: 630px;
  padding: var(--page-pad-x);
  color: var(--color-white);
  overflow: hidden;
  display: flex;
  align-items: center;          /* vertically center the content */
}
.join__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;          /* show the full video, no crop */
  transform: translateX(120px) scale(1.25); /* shift right 120px, then 125% scale */
  z-index: 0;
}
.join__content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
}
.join__text {
  font-family: var(--font-sans);
  font-weight: 300;             /* Inter Tight Light, matches the lead style */
  font-size: var(--fs-lead);
  line-height: 1.3;
  margin: 0;
  /* No max-width — let the phrase sit on a single line, with the CTA flush right */
}
.join__cta {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-lead);
  color: var(--color-orange);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 120ms ease;
}
.join__cta:hover {
  opacity: 0.8;
}
.join__sidelabel {
  position: absolute;
  top: var(--page-pad-x);
  right: var(--page-pad-x);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  writing-mode: vertical-rl;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--color-white);
  z-index: 2;
}
.join__sidelabel img {
  width: 9px;
  height: 9px;
  display: block;
  /* tint the grey SVG to match the white text on black */
  filter: brightness(0) invert(1);
}

/* ---------- ICONIC ORIGINALS ---------- */
.originals {
  position: relative;
  min-height: 1080px;
  background: #1a1a1a;          /* shows through if no bg image is present */
  color: var(--color-white);
  padding: var(--page-pad-x);
  overflow: hidden;
}
.originals__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.originals__toplabel {
  position: absolute;
  top: var(--page-pad-x);
  left: var(--page-pad-x);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--color-white);
}
.originals__toplabel img {
  width: 11px;
  height: 9px;
  display: block;
  filter: brightness(0) invert(1);
}
.originals__quote {
  position: absolute;
  left: var(--page-pad-x);
  top: 50%;
  transform: translateY(-50%);  /* same centerline as the CTA */
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 300;             /* Inter Tight Light, matches hero H1 */
  font-size: clamp(31px, 2.86vw, 44px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-white);
  max-width: 26ch;
}
.originals__cta {
  position: absolute;
  right: var(--page-pad-x);
  top: 50%;
  transform: translateY(-50%);  /* same centerline as the quote */
  display: inline-flex;
  align-items: center;
  padding: 12px 18px;
  border-radius: 5px;
  background: var(--color-white);
  color: var(--color-black);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity 120ms ease;
}
.originals__cta:hover {
  opacity: 0.85;
}
.originals__logo {
  position: absolute;
  left: var(--page-pad-x);
  bottom: var(--page-pad-x);
  width: clamp(220px, 22vw, 320px);
  height: auto;
  display: block;
  /* SVG ships with #F2F2F2 fills, which already match the panel's "white" colour. */
}

/* ---------- FOLLOW / FOOTER ---------- */
.follow {
  position: relative;
  min-height: 540px;
  background: var(--color-black);
  color: var(--color-white);
  padding: var(--page-pad-x);
  overflow: hidden;
}
.follow__bg {
  /* Always exactly as tall as the panel; width scales to keep aspect ratio. */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: auto;
  z-index: 0;
}
.follow__sidelabel {
  position: absolute;
  top: var(--page-pad-x);
  right: var(--page-pad-x);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  writing-mode: vertical-rl;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--color-white);
  z-index: 2;
}
.follow__sidelabel img {
  width: 11px;
  height: 9px;
  display: block;
  filter: brightness(0) invert(1);
  transform: rotate(90deg);    /* point right → play-button silhouette */
}
.follow__text {
  position: absolute;
  left: var(--page-pad-x);
  top: 50%;
  transform: translateY(-50%);  /* vertically centered in the panel */
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-lead);
  line-height: 1.3;
  color: var(--color-white);
  max-width: 26ch;
  z-index: 1;
}
.follow__links {
  position: absolute;
  right: calc(var(--page-pad-x) + 288px); /* tripled — much more breathing room */
  top: 50%;
  transform: translateY(-50%);  /* same centerline as the lead text */
  display: flex;
  gap: 28px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  z-index: 1;
}
.follow__links a {
  color: var(--color-orange);
  text-decoration: none;
  transition: color 120ms ease;
}
.follow__links a:hover {
  color: var(--color-white);    /* F2F2F2 on hover */
}
/* Vertical copyright inside the contact box (default desktop layout) */
.follow__copyright {
  position: absolute;
  bottom: var(--page-pad-x);
  right: var(--page-pad-x);
  writing-mode: vertical-rl;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--color-white);
  text-transform: uppercase;
  z-index: 1;
}

/* Below-the-box copyright (only used in single-column mode) */
.page-copyright {
  display: none;
  margin: 0;
  /* Space above/below comes from main's flex gap + bottom padding,
     both equal to --page-pad-x — matching the left/right margin. */
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--color-fg);
  text-transform: uppercase;
}

/* ---------- Responsive: stack on narrow screens ---------- */
@media (max-width: 1024px) {
  .nav__links {
    display: none;              /* will become a hamburger later */
  }

  /* Hero collapses to a single column, video above the text */
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 80px 0 40px;
  }
  .hero__copy { padding-top: 0; order: 2; }
  .hero__media { order: 1; }
  .hero__sidelabel { display: none; }
  /* Stop the portrait video from eating the whole screen above the text */
  .hero__portrait { max-height: 60vh; }

  /* Team + Join row stacks */
  .row-two {
    grid-template-columns: 1fr;
  }

  /* Square panels for join + originals; team runs 25% taller for its text */
  .join,
  .originals {
    aspect-ratio: 1 / 1;
    min-height: 0;
    height: auto;
  }
  .team {
    aspect-ratio: 1 / 1.25;     /* 25% taller than square */
    min-height: 0;
    height: auto;
  }
  /* Column gap scales with width so the two columns never overflow
     (was a fixed 56px — too wide for ~320px phones). */
  .team__list { column-gap: clamp(14px, 4vw, 40px); }

  /* Originals: stack quote + CTA, left-aligned */
  .originals__quote {
    top: auto;
    bottom: 50%;
    left: var(--page-pad-x);
    right: auto;
    transform: none;
    max-width: calc(100% - (var(--page-pad-x) * 2));
  }
  .originals__cta {
    top: auto;
    bottom: 38%;                /* sits just under the quote */
    left: var(--page-pad-x);
    right: auto;
    transform: none;
  }

  /* Contact: shorter, links pinned to bottom-left */
  .follow {
    min-height: 280px;
  }
  .follow__text {
    top: var(--page-pad-x);
    transform: none;
    bottom: auto;
  }
  .follow__links {
    top: auto;
    bottom: var(--page-pad-x);
    left: var(--page-pad-x);
    right: auto;
    transform: none;
  }
  /* Hide the in-box vertical copyright; show the page-bottom one instead */
  .follow__copyright { display: none; }
  .page-copyright { display: block; }

  /* Mono (DM Mono) text at 80% of its desktop size */
  .hero__eyebrow,
  .team__list,
  .originals__toplabel,
  .follow__links,
  .page-copyright { font-size: 10.4px; }   /* 80% of 13px */
  .originals__cta { font-size: 9.6px; }    /* 80% of 12px */

  /* Inter Tight line-height at 90% of its desktop value */
  .hero__heading,
  .originals__quote { line-height: 1.125; }  /* 90% of 1.25 */
  .team__about,
  .join__text,
  .follow__text { line-height: 1.17; }       /* 90% of 1.3  */

  /* Drop the angled corner labels on team, join, contact */
  .team__sidelabel,
  .join__sidelabel,
  .follow__sidelabel { display: none; }

  /* Join: the content area fills the whole panel so the text can sit
     centred while the "Join us" CTA pins to the true bottom-left.
     (Positioning the CTA against .join__content directly made it overlap
     the text, since that container is only as tall as the text itself.) */
  .join__content {
    position: absolute;
    inset: var(--page-pad-x);
    display: block;
  }
  .join__text {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
  }
  .join__cta {
    position: absolute;
    left: 0;
    bottom: 0;
  }
  /* Centre the join video — the desktop 120px shift pushes it off a small panel */
  .join__bg { transform: scale(1.25); }
}

/* ---------- Scroll behaviour ---------- */
#team, #join, #originals, #contact {
  scroll-margin-top: 100px;     /* clears the sticky nav (~80px) + 20px breathing room */
}

/* ---------- Fade-up on scroll ---------- */
.fade-up {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .fade-up { opacity: 1; transform: none; transition: none; }
}

/* ---------- Intro overlay ----------
   Black bg + outlined symbol. Paths draw themselves first (stroke-dashoffset
   trick), then the fill animates in, then the overlay fades out.
   Total runtime ≈ 2.3 seconds. */
.intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--color-black);
  display: flex;
  align-items: center;
  justify-content: center;
}
.intro__symbol {
  width: clamp(80px, 9vw, 140px);
  height: auto;
}
.intro__symbol path {
  fill: transparent;
  stroke: var(--color-white);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  /* Set by the inline script per-path so each line draws over the same time. */
  stroke-dasharray: var(--length, 1000);
  stroke-dashoffset: var(--length, 1000);
}
/* Class added by JS once path lengths have been measured. */
.intro--ready {
  animation: introFadeOut 600ms ease 1700ms forwards;
}
.intro--ready .intro__symbol path {
  animation:
    introDraw 1000ms ease forwards,
    introFillIn 500ms ease 1000ms forwards;
}
@keyframes introDraw {
  to { stroke-dashoffset: 0; }
}
@keyframes introFillIn {
  to { fill: var(--color-white); }
}
@keyframes introFadeOut {
  to { opacity: 0; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
}