/* ============================================================================
   NOBLE MOBILE — foundations
   ---------------------------------------------------------------------------
   One theme: a bright studio. There is no dark mode and no switch — the page
   is light everywhere, and the cinematic scenes are lit rooms rather than black
   ones. The gold carries the brand; everything else is neutral.
   ========================================================================= */

:root {
  /* -- brand ------------------------------------------------------------- */
  /* gold, taken down far enough to read as text on a light ground */
  --gold:      #8a6712;
  --gold-hi:   #b8902c;
  --gold-soft: rgba(138, 103, 18, .30);
  --gold-mist: rgba(138, 103, 18, .075);

  /* -- surfaces ---------------------------------------------------------- */
  --void:   #f6f5f2;          /* the page */
  --ink:    #fbfaf8;          /* a lifted band */
  --raise:  #ffffff;          /* the nearest surface */
  --line:   rgba(22, 22, 28, .10);
  --line-2: rgba(22, 22, 28, .20);
  --text:   #16161a;
  --text-2: #4b4b56;
  --text-3: #6c6c78;
  --brand-ink: #16161a;       /* the logo's colour */
  --shadow: 0 30px 70px -34px rgba(28, 24, 16, .30);

  /* The cinematic surface. It used to be black; the scenes are now lit rooms,
     so it is the palest neutral on the page and everything placed on it is
     read against light. */
  --cine:        #f1efea;
  --cine-text:   #16161a;
  --cine-text-2: #4b4b56;
  --cine-text-3: #6c6c78;
  --cine-line:   rgba(22, 22, 28, .11);

  /* -- metrics ----------------------------------------------------------- */
  --gutter: clamp(20px, 5vw, 84px);
  --measure: 62ch;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);

  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
html.is-locked { overflow: hidden; }

body {
  margin: 0;
  background: var(--void);
  color: var(--text);
  font-family: "Segoe UI Variable Display", "Segoe UI", -apple-system,
               BlinkMacSystemFont, system-ui, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  font-weight: 350;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--gold); color: #fff; }

/* ------------------------------------------------------------ typography --- */
/* Weights come up across the board: 200 was elegant on black and spindly on
   white, because light type on dark reads heavier than dark type on light. */
h1, h2, h3, h4 {
  margin: 0;
  font-weight: 300;
  letter-spacing: -.035em;
  line-height: 1.0;
  text-wrap: balance;
}

.display {
  font-size: clamp(2.9rem, 8.4vw, 8.2rem);
  font-weight: 250;
  letter-spacing: -.045em;
}

.h2 { font-size: clamp(2.1rem, 5.4vw, 4.8rem); font-weight: 300; }
.h3 { font-size: clamp(1.4rem, 2.6vw, 2.3rem); letter-spacing: -.028em; font-weight: 350; }

.lead {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(1rem, 1.35vw, 1.28rem);
  font-weight: 350;
  line-height: 1.62;
  color: var(--text-2);
  letter-spacing: -.008em;
}

.label {
  margin: 0;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--text-3);
}
.label--gold { color: var(--gold); }

.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ------------------------------------------------------------- the logo --- */
/* Every appearance of the logo is the supplied artwork, masked so it takes the
   page's ink colour. It is never re-drawn in a substitute typeface. */
.logo,
.logo-mark,
.logo-word {
  background-color: var(--brand-ink);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
}
.logo      { -webkit-mask-image: url("../assets/brand/logo-mask.png");
                     mask-image: url("../assets/brand/logo-mask.png"); aspect-ratio: 2442 / 1907; }
.logo-mark { -webkit-mask-image: url("../assets/brand/mark-mask.png");
                     mask-image: url("../assets/brand/mark-mask.png"); aspect-ratio: 2442 / 1418; }
.logo-word { -webkit-mask-image: url("../assets/brand/word-mask.png");
                     mask-image: url("../assets/brand/word-mask.png"); aspect-ratio: 2442 / 489; }

/* ------------------------------------------------------------ structure --- */
.scene {
  position: relative;
  isolation: isolate;
}

.wrap {
  width: min(100% - var(--gutter) * 2, 1480px);
  margin-inline: auto;
}

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

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: fixed; top: 10px; left: 10px; z-index: 999;
  padding: 12px 20px; border-radius: 999px;
  background: var(--raise); color: var(--text);
  border: 1px solid var(--line-2);
  transform: translateY(-200%);
  transition: transform .3s var(--ease);
}
.skip:focus-visible { transform: none; }

/* ------------------------------------------------------- reduced motion --- */
/* Motion is the point of this site, so the reduced-motion build does not try to
   fake it: scenes unpin, everything sits at its resolved state, and the story is
   told by the copy and the photographs instead. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}