/* ==========================================================================
   XRBT — eXtended Reality Blak Theatre
   Staged restyle. Layout and graphics only; no content changes.

   Every numeric value lives as a named token in :root. Nothing is inlined
   at a use site, so the whole design can be retuned from one block.
   ========================================================================== */

/* --- Faces ---------------------------------------------------------------- */

@font-face {
  font-family: "Fantasque Sans Mono";
  src: url("fonts/FantasqueSansMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fantasque Sans Mono";
  src: url("fonts/FantasqueSansMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* --- Tokens --------------------------------------------------------------- */

:root {
  /* Colour. XRBT's existing palette, kept — used as accent rather than
     as a wash. The two brand hues now mean something because they are rare. */
  --ink:              #0a0a0a;
  --ink-deep:         #050505;
  --paper:            #eeffff;
  --paper-dim:        #9fb0b0;
  --paper-faint:      #6d7c7c;
  --cyan:             #00ffff;
  --amber:            #ffbb00;
  --rule:             #232a2a;
  --rule-accent-strength: 30%;
  --rule-accent:      color-mix(in srgb, var(--cyan) var(--rule-accent-strength), transparent);

  /* The six delivery layers, in the hues the site already assigned them.
     Read as one progression rather than six unrelated gradients. */
  --layer-hue-1:      #00ffff;
  --layer-hue-2:      #02a79e;
  --layer-hue-3:      #2bb673;
  --layer-hue-4:      #f7ad40;
  --layer-hue-5:      #eb5727;
  --layer-hue-6:      #ed1c25;

  /* Faces and weights */
  --face-display:     "Fantasque Sans Mono", ui-monospace, "SFMono-Regular", monospace;
  --face-text:        "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-bold:      700;

  /* Modular scale, ratio 1.25 */
  --step-down-1:      0.8rem;
  --step-0:           1rem;
  --step-1:           1.25rem;
  --step-2:           1.5625rem;
  --step-3:           1.9531rem;
  --step-4:           2.4414rem;

  /* Fluid display sizes */
  --size-hero-min:    1.9rem;
  --size-hero-fluid:  5.4vw;
  --size-hero-max:    3.4rem;
  --size-section-min: var(--step-2);
  --size-section-fluid: 3.6vw;
  --size-section-max: var(--step-4);
  --size-layer-index-min: var(--step-1);
  --size-layer-index-fluid: 2.4vw;
  --size-layer-index-max: var(--step-3);

  --leading-tight:    1.12;
  --leading-snug:     1.3;
  --leading-body:     1.62;
  --tracking-display: -0.015em;
  --tracking-wordmark: 0.04em;

  /* Space, all multiples of one unit */
  --space-unit:       0.5rem;
  --space-1:          var(--space-unit);
  --space-2:          calc(var(--space-unit) * 2);
  --space-3:          calc(var(--space-unit) * 3);
  --space-4:          calc(var(--space-unit) * 4);
  --space-5:          calc(var(--space-unit) * 5);
  --space-6:          calc(var(--space-unit) * 6);
  --space-8:          calc(var(--space-unit) * 8);
  --space-10:         calc(var(--space-unit) * 10);
  --space-14:         calc(var(--space-unit) * 14);
  --space-20:         calc(var(--space-unit) * 20);

  /* Layout */
  --container-max:    76rem;
  --gutter:           var(--space-5);
  --measure:          64ch;
  --measure-narrow:   52ch;
  --measure-display:  21ch;
  --list-indent:      var(--space-3);
  --section-pad:      var(--space-20);
  --rule-weight:      1px;
  --mark-ratio:       561 / 1000;  /* the tree's own proportions */
  --mark-ratio-num:   0.561;       /* the same value, for calc() */
  --mark-gap:         0.5em;
  --mark-nav-h:       1.6em;
  --mark-title-h:     1.15em;
  --mark-layer-h:     1.7em;

  /* Mobile menu toggle */
  --toggle-width:     1.75rem;
  --toggle-height:    1rem;
  --bar-angle:        45deg;
  --bar-shift:        calc((var(--toggle-height) - var(--rule-weight)) / 2);

  /* Hero mark. The ceiling is stated as a fraction of the source art's own
     height, so the relationship survives any later change to either. */
  --hero-logo-source: 62.5rem;   /* the art is 1000px tall */
  --hero-logo-scale:  0.1875;    /* three sixteenths of it */
  --hero-logo-min:    4.125rem;
  --hero-logo-fluid:  18.75svh;
  --hero-logo-max:    calc(var(--hero-logo-source) * var(--hero-logo-scale));
  --hero-logo-gap:    var(--space-2);

  /* Hero credit. It sits on the open side of the scrim, over the brightest
     part of the footage, so it carries its own shadow rather than a box. */
  --credit-inset:     var(--space-4);
  --credit-shadow:    0 1px 5px rgb(0 0 0 / 0.95), 0 0 14px rgb(0 0 0 / 0.7);
  /* The hero copy's own shadow: holds the letters over the highlights of
     the brightest shots, where the scrim alone runs thin. */
  --hero-copy-shadow: 0 1px 4px rgb(0 0 0 / 0.9), 0 0 16px rgb(0 0 0 / 0.6);

  /* Hero */
  --hero-min-height:  100svh;
  --hero-max-height:  60rem;
  --nav-height:       4.5rem;

  /* The scrim over the hero video. The footage is workshop documentation
     with a wide brightness range, so a flat 50% (as a pure render can take)
     buries the dark shots. This is directional: heavy where the type sits,
     light where it does not. Set by eye on 2026-09-15 against the brighter
     cut, with --hero-copy-shadow holding the letters over the highlights. */
  --scrim-l:          0.78;
  --scrim-m:          0.60;
  --scrim-r:          0.22;
  --scrim-m-stop:     52%;
  --scrim-r-stop:     88%;
  --scrim-top:        0.64;
  --scrim-top-stop:   26%;

  /* Grids */
  --people-col-min:   15.5rem;
  --partner-col-min:  11rem;
  --partner-logo-max-height: 3.75rem;
  --partner-logo-rest-opacity: 0.62;

  /* Portraits */
  --portrait-ratio:   4 / 5;

  /* Motion */
  --dur-fast:         160ms;
  --dur-mid:          320ms;
  --dur-slow:         720ms;
  --delay-step:       90ms;
  --ease:             cubic-bezier(0.2, 0, 0.2, 1);
  --rise-distance:    var(--space-3);

  /* Focus */
  --focus-weight:     2px;
  --focus-offset:     3px;

  /* Layer indentation: the six layers step outward as their reach widens. */
  --layer-indent-step: 1.25rem;
}

/* --- Reset ---------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--ink);
  color: var(--paper);
  font-family: var(--face-text);
  font-weight: var(--weight-regular);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  overflow-x: hidden;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--face-display);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}

p { margin: 0; }

ul { margin: 0; padding: 0; }

a { color: var(--cyan); }

:focus-visible {
  outline: var(--focus-weight) solid var(--cyan);
  outline-offset: var(--focus-offset);
}

/* --- Shared layout -------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-pad); }

.section-title {
  font-size: clamp(var(--size-section-min), var(--size-section-fluid), var(--size-section-max));
  color: var(--paper);
  margin-bottom: var(--space-10);
  padding-bottom: var(--space-4);
  border-bottom: var(--rule-weight) solid var(--rule-accent);
}

.section-title.has-mark {
  display: flex;
  align-items: center;
  gap: var(--mark-gap);
}

.section-title.has-mark::before { height: var(--mark-title-h); }

.prose {
  max-width: var(--measure);
  font-weight: var(--weight-light);
  font-size: var(--step-1);
  color: var(--paper-dim);
}

.prose > * + *,
.expandable-content > * + * { margin-top: var(--space-4); }

.prose strong { color: var(--paper); font-weight: var(--weight-medium); }

.prose ul {
  padding-inline-start: var(--list-indent);
  list-style: disc;
}

.prose li + li { margin-top: var(--space-1); }

/* --- The tree mark -------------------------------------------------------
   Used as a CSS mask rather than inline SVG, so a single cached file serves
   every instance and each one takes its colour from its own context. */

.nav-logo::before,
.section-title.has-mark::before,
.layer-index::before {
  content: "";
  display: inline-block;
  flex: none;
  aspect-ratio: var(--mark-ratio);
  background: currentColor;
  -webkit-mask: url("images/tree_logo_outline_bold.svg") no-repeat center / contain;
  mask: url("images/tree_logo_outline_bold.svg") no-repeat center / contain;
}

/* --- Navigation ----------------------------------------------------------- */

.navbar {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 1000;
  background: linear-gradient(
    to bottom,
    rgb(0 0 0 / 0.92),
    rgb(0 0 0 / 0.72) 40%,
    rgb(0 0 0 / 0.40) 70%,
    rgb(0 0 0 / 0.14) 88%,
    rgb(0 0 0 / 0)
  );
  padding-bottom: var(--space-5);
  transition: background-color var(--dur-mid) var(--ease);
}

.navbar.is-scrolled {
  background: rgb(0 0 0 / 0.94);
  padding-bottom: 0;
  border-bottom: var(--rule-weight) solid var(--rule);
}

.nav-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-3) var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: var(--nav-height);
}

.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--mark-gap);
  font-family: var(--face-display);
  font-weight: var(--weight-bold);
  font-size: var(--step-1);
  letter-spacing: var(--tracking-wordmark);
  color: var(--paper);
  text-decoration: none;
  line-height: 1;
}

.nav-logo::before { height: var(--mark-nav-h); }

.nav-menu {
  display: flex;
  list-style: none;
  gap: var(--space-6);
}

.nav-link {
  font-family: var(--face-display);
  font-size: var(--step-down-1);
  color: var(--paper-dim);
  text-decoration: none;
  position: relative;
  padding-block: var(--space-1);
  transition: color var(--dur-fast) var(--ease);
}

.nav-link::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 0;
  height: var(--rule-weight);
  background: var(--cyan);
  transition: width var(--dur-mid) var(--ease);
}

.nav-link:hover,
.nav-link:focus-visible { color: var(--paper); }

.nav-link:hover::after,
.nav-link:focus-visible::after { width: 100%; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: var(--toggle-width);
  height: var(--toggle-height);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.bar {
  width: 100%;
  height: var(--rule-weight);
  background: var(--paper);
  transition: transform var(--dur-mid) var(--ease),
              opacity var(--dur-fast) var(--ease);
}

.nav-toggle.is-open .bar:nth-child(1) {
  transform: translateY(var(--bar-shift)) rotate(var(--bar-angle));
}

.nav-toggle.is-open .bar:nth-child(2) { opacity: 0; }

.nav-toggle.is-open .bar:nth-child(3) {
  transform: translateY(calc(var(--bar-shift) * -1)) rotate(calc(var(--bar-angle) * -1));
}

/* --- Hero ----------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: var(--hero-min-height);
  max-height: var(--hero-max-height);
  overflow: hidden;
  background-color: var(--ink-deep);
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-media video,
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Directional scrim: dark under the type, open on the right. */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgb(0 0 0 / var(--scrim-top)),
      rgb(0 0 0 / 0) var(--scrim-top-stop)
    ),
    linear-gradient(
      to right,
      rgb(0 0 0 / var(--scrim-l)),
      rgb(0 0 0 / var(--scrim-m)) var(--scrim-m-stop),
      rgb(0 0 0 / var(--scrim-r)) var(--scrim-r-stop),
      rgb(0 0 0 / var(--scrim-r))
    );
}

.hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-14) var(--gutter) var(--space-14);
}

.hero-heading {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--hero-logo-gap);
}

.hero-logo {
  height: clamp(var(--hero-logo-min), var(--hero-logo-fluid), var(--hero-logo-max));
  width: auto;
  flex: none;
}

.hero-title {
  font-size: clamp(var(--size-hero-min), var(--size-hero-fluid), var(--size-hero-max));
  max-width: var(--measure-display);
  text-wrap: balance;
  color: var(--paper);
  text-shadow: var(--hero-copy-shadow);
}

.hero-subtitle {
  margin-top: var(--space-4);
  font-family: var(--face-display);
  font-size: var(--step-1);
  color: var(--amber);
  text-shadow: var(--hero-copy-shadow);
}

.hero-description {
  margin-top: var(--space-5);
  max-width: var(--measure-narrow);
  font-weight: var(--weight-regular);
  font-size: var(--step-0);
  color: var(--paper);
  text-shadow: var(--hero-copy-shadow);
}

/* One button. The hero's and the About expander's are the same control in two
   places, so they are one rule rather than two that drift apart. */
.cta-button,
.read-more-btn {
  display: inline-block;
  padding: var(--space-2) var(--space-5);
  font-family: var(--face-display);
  font-size: var(--step-down-1);
  color: var(--cyan);
  background: none;
  border: var(--rule-weight) solid var(--cyan);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}

.cta-button:hover,
.cta-button:focus-visible,
.read-more-btn:hover,
.read-more-btn:focus-visible {
  background-color: var(--cyan);
  color: var(--ink);
}

.cta-button { margin-top: var(--space-8); }
.read-more-btn { margin-top: var(--space-5); }

.hero-credit {
  position: absolute;
  z-index: 1;
  inset-block-end: var(--credit-inset);
  inset-inline-end: var(--gutter);
  font-size: var(--step-down-1);
  font-weight: var(--weight-regular);
  color: var(--paper);
  text-shadow: var(--credit-shadow);
  text-align: end;
}

/* One orchestrated entrance, on load only. */
.hero-content > * {
  opacity: 0;
  transform: translateY(var(--rise-distance));
  animation: rise var(--dur-slow) var(--ease) forwards;
}

.hero-heading    { animation-delay: calc(var(--delay-step) * 0); }
.hero-subtitle   { animation-delay: calc(var(--delay-step) * 1); }
.hero-description{ animation-delay: calc(var(--delay-step) * 2); }
.cta-button      { animation-delay: calc(var(--delay-step) * 3); }

@keyframes rise {
  to { opacity: 1; transform: translateY(0); }
}

/* The content block is capped at --container-max and centred, so on a wide
   viewport there is empty margin to the left of the text. Above the width where
   that margin exceeds the mark, the mark floats into it and the headline stays
   exactly where it is. */
@media (min-width: 90rem) {
  .hero-logo {
    position: absolute;
    inset-inline-end: 100%;
    inset-block-start: 50%;
    translate: 0 -50%;
    margin-inline-end: var(--hero-logo-gap);
  }
}

/* --- About ---------------------------------------------------------------- */

.about { background-color: var(--ink); }

.expandable-content {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--dur-slow) var(--ease);
}

/* --- The six delivery layers --------------------------------------------- */

.performances { background-color: var(--ink); }

.performance-grid {
  list-style: none;
}

.performance-card {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-6);
  align-items: baseline;
  padding-block: var(--space-6);
  border-bottom: var(--rule-weight) solid var(--rule);
  padding-inline-start: calc(var(--layer-step) * var(--layer-indent-step));
}

.performance-card:nth-child(1) { --layer-step: 0; --layer-hue: var(--layer-hue-1); }
.performance-card:nth-child(2) { --layer-step: 1; --layer-hue: var(--layer-hue-2); }
.performance-card:nth-child(3) { --layer-step: 2; --layer-hue: var(--layer-hue-3); }
.performance-card:nth-child(4) { --layer-step: 3; --layer-hue: var(--layer-hue-4); }
.performance-card:nth-child(5) { --layer-step: 4; --layer-hue: var(--layer-hue-5); }
.performance-card:nth-child(6) { --layer-step: 5; --layer-hue: var(--layer-hue-6); }

.layer-index {
  position: relative;
  font-family: var(--face-display);
  font-size: clamp(var(--size-layer-index-min), var(--size-layer-index-fluid), var(--size-layer-index-max));
  color: var(--layer-hue);
  padding-inline-start: calc(var(--mark-layer-h) * var(--mark-ratio-num) + var(--mark-gap));
  white-space: nowrap;
}

.layer-index::before {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  height: var(--mark-layer-h);
  width: calc(var(--mark-layer-h) * var(--mark-ratio-num));
  background: var(--layer-hue);
}

.layer-name {
  font-size: var(--step-2);
  color: var(--paper);
}

.layer-body {
  margin-top: var(--space-2);
  max-width: var(--measure);
  font-weight: var(--weight-light);
  color: var(--paper-dim);
}

.layer-detail { min-width: 0; }

/* --- People --------------------------------------------------------------- */

.people { background-color: var(--ink-deep); }

.people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--people-col-min), 1fr));
  gap: var(--space-10) var(--space-6);
}

.person-card {
  display: flex;
  flex-direction: column;
  padding-top: var(--space-4);
  border-top: var(--rule-weight) solid var(--rule);
}

.person-photo {
  width: 100%;
  aspect-ratio: var(--portrait-ratio);
  object-fit: cover;
  filter: grayscale(1);
  transition: filter var(--dur-mid) var(--ease);
}

.person-card:hover .person-photo { filter: grayscale(0); }

.person-card,
.person-content { min-width: 0; }

.person-content { margin-top: var(--space-4); }

.person-content h3 {
  font-size: var(--step-1);
  color: var(--paper);
}

.person-content h4 {
  margin-top: var(--space-1);
  font-family: var(--face-text);
  font-weight: var(--weight-medium);
  font-size: var(--step-down-1);
  letter-spacing: normal;
  line-height: var(--leading-snug);
  color: var(--cyan);
}

.person-heritage {
  margin-top: var(--space-1);
  font-size: var(--step-down-1);
  color: var(--amber);
}

.person-bio {
  margin-top: var(--space-3);
  font-weight: var(--weight-light);
  font-size: var(--step-down-1);
  color: var(--paper-dim);
}

/* --- Contact -------------------------------------------------------------- */

.contact { background-color: var(--ink); }

.contact-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-14);
  align-items: start;
}

.contact-info { min-width: 0; }

.contact-info h3 {
  font-size: var(--step-1);
  color: var(--paper);
  margin-bottom: var(--space-3);
}

.contact-info address {
  font-style: normal;
  font-weight: var(--weight-light);
  color: var(--paper-dim);
}

.contact-info address > * + * { margin-top: var(--space-2); }

.contact-form { min-width: 0; }

.contact-form iframe { width: 100%; border: 0; }

/* --- Partners ------------------------------------------------------------- */

.partners { background-color: var(--ink-deep); }

.partners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--partner-col-min), 1fr));
  gap: var(--space-10);
  align-items: center;
}

.partner-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.partner-logo img {
  max-height: var(--partner-logo-max-height);
  width: auto;
  object-fit: contain;
  opacity: var(--partner-logo-rest-opacity);
  transition: opacity var(--dur-fast) var(--ease);
}

.partner-logo:hover img,
.partner-logo:focus-visible img { opacity: 1; }

/* --- Footer --------------------------------------------------------------- */

.footer {
  padding-block: var(--space-8);
  background-color: var(--ink-deep);
  border-top: var(--rule-weight) solid var(--rule);
}

.footer p {
  font-family: var(--face-display);
  font-size: var(--step-down-1);
  color: var(--paper-faint);
}

/* --- Narrow viewports ----------------------------------------------------- */

@media (max-width: 60rem) {
  :root {
    --section-pad: var(--space-14);
    --layer-indent-step: 0rem;
  }

  .contact-content { grid-template-columns: 1fr; gap: var(--space-8); }
}

@media (max-width: 48rem) {
  :root {
    --gutter: var(--space-4);

    /* On a phone the hero copy runs the full width, so the scrim is near
       uniform rather than directional. Lightened 2026-09-15 with the
       brighter cut; the copy's text-shadow now carries the highlights of
       the brightest shots, where the scrim alone runs thin. */
    --scrim-l: 0.54;
    --scrim-m: 0.50;
    --scrim-r: 0.46;
    --scrim-m-stop: 55%;
    --scrim-top: 0.45;
  }

  .nav-toggle { display: flex; }

  .nav-menu {
    position: fixed;
    inset-block-start: var(--nav-height);
    inset-inline-start: -100%;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    width: 100%;
    padding: var(--space-6) var(--gutter);
    background-color: rgb(0 0 0 / 0.96);
    transition: inset-inline-start var(--dur-mid) var(--ease);
  }

  .nav-menu.active { inset-inline-start: 0; }

  .hero-content { padding-block: var(--space-10); }

  .hero-heading {
    flex-direction: column;
    align-items: flex-start;
  }

  .performance-card {
    grid-template-columns: 1fr;
    row-gap: var(--space-2);
  }

  .layer-name { font-size: var(--step-1); }
}

/* --- Reduced motion ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }

  .hero-content > * { opacity: 1; transform: none; }
}