/* ==========================================================================
   D Planet — design tokens, reset, base typography
   Dark stage, neon light: cyan and hot magenta, the two colours of a club
   lighting rig, around the white D Planet logo.
   ========================================================================== */

/* --- Self-hosted webfonts ------------------------------------------------ */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/lato-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/lato-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/lato-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Old Standard TT';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/oldstandard-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Old Standard TT';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/oldstandard-400i.woff2') format('woff2');
}
/* Unbounded is a variable font: one file carries every weight from 300 to
   900. The latin-ext file only downloads on a page that uses one of its
   characters — in practice the rupee sign on the fees page. */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/unbounded-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/unbounded-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113;
}

/* Hollow, stroked headlines use a static 800 instance with its overlapping
   contours merged. Stroking the variable font directly would trace the seams
   where its letter parts overlap, drawing stray lines inside each letter. */
@font-face {
  font-family: 'Unbounded Outline';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/unbounded-outline-800.woff2') format('woff2');
}

/* --- Tokens -------------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* Neon */
  --cyan:          #3ad7ff;
  --cyan-deep:     #0fa6cf;
  --magenta:       #ff3dc8;
  --magenta-deep:  #c21a93;
  --violet:        #8a5cff;
  --neon:          linear-gradient(100deg, var(--cyan) 0%, var(--violet) 50%, var(--magenta) 100%);
  --neon-soft:     linear-gradient(100deg, rgba(58, 215, 255, .18), rgba(255, 61, 200, .18));
  --glow-cyan:     0 0 .5rem rgba(58, 215, 255, .55), 0 0 2rem rgba(58, 215, 255, .25);
  --glow-magenta:  0 0 .5rem rgba(255, 61, 200, .55), 0 0 2rem rgba(255, 61, 200, .25);

  /* Stage */
  --bg:            #05060b;
  --bg-raised:     #0b0d18;
  --bg-deep:       #020306;
  --surface:       rgba(255, 255, 255, .035);
  --surface-hi:    rgba(255, 255, 255, .06);
  --line:          rgba(255, 255, 255, .09);
  --line-strong:   rgba(255, 255, 255, .18);

  /* Type colours — body copy clears 7:1 on --bg, the dim tone clears 4.5:1 */
  --heading:       #ffffff;
  --text:          #c3c8da;
  --text-dim:      #8e94ab;
  --text-faint:    #5d6378;

  /* Legacy aliases, so nothing that still names the old tokens breaks */
  --accent:        var(--cyan);
  --accent-hover:  #7fe6ff;
  --accent-bright: var(--cyan);
  --ink:           var(--heading);
  --body:          var(--text);

  /* Type */
  --font-display:  'Unbounded', 'Lato', 'Segoe UI', Arial, sans-serif;
  --font-outline:  'Unbounded Outline', 'Unbounded', 'Lato', 'Segoe UI', Arial, sans-serif;
  --font-sans:     'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-serif:    'Old Standard TT', Georgia, 'Times New Roman', serif;
  --lh:            1.75;

  /* Layout */
  --container:     1366px;
  --gutter:        15px;
  --header-h:      5rem;

  /* Motion */
  --ease:          cubic-bezier(.2, .7, .3, 1);
  --ease-out:      cubic-bezier(.16, 1, .3, 1);
  --ease-in-out:   cubic-bezier(.76, 0, .24, 1);
  --dur:           900ms;
  --dur-fast:      300ms;

  /* Layers */
  --z-grain:       9000;
  --z-preloader:   9999;
  --z-wipe:        9998;
  --z-cursor:      9500;
  --z-header:      999;
  --z-lightbox:    1200;
}

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

html {
  -webkit-text-size-adjust: 100%;
  background-color: var(--bg);
}
/* Native smooth scrolling only where Lenis is not driving the page */
html:not(.lenis) { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1rem;
  line-height: var(--lh);
  color: var(--text);
  background-color: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

img,
svg { max-width: 100%; height: auto; border: 0; vertical-align: middle; }

ul, ol { margin: 0 0 1rem; padding-left: 1.25rem; }
p      { margin: 0 0 1rem; }

a {
  color: var(--heading);
  text-decoration: none;
  transition: color 250ms ease;
}
a:hover { color: var(--cyan); }

button,
input,
select,
textarea { font: inherit; color: inherit; }

figure { margin: 0; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2rem 0;
}

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

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

.skip-link {
  position: fixed;
  top: .75rem;
  left: .75rem;
  z-index: 10000;
  padding: .6rem 1rem;
  background: var(--cyan);
  color: var(--bg);
  font-weight: 700;
  border-radius: 100rem;
  transform: translateY(-200%);
  transition: transform 250ms var(--ease);
}
/* Shown only for real keyboard use: main.js sets .is-keyboard on Tab, so
   focus handed over by an installed app window stays out of sight.
   Without JavaScript the plain :focus rule applies. */
.no-js .skip-link:focus,
.is-keyboard .skip-link:focus { transform: translateY(0); color: var(--bg); }

/* --- Headings ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  margin: 0 0 .5rem;
  color: var(--heading);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.12;
}

h1, .h1 { font-size: clamp(2.5rem, 7vw, 5.5rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
h2, .h2 { font-size: clamp(1.9rem, 4.2vw, 3.4rem); }
h3, .h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 600; }
h4, .h4 { font-size: .9375rem; font-weight: 600; }
h5, .h5 { font-size: 1rem; text-transform: uppercase; letter-spacing: .12em; }
h6, .h6 { font-size: .875rem; }

h1 small, h2 small, h3 small,
.h1 small, .h2 small, .h3 small {
  display: block;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: normal;
}

blockquote,
blockquote p,
.pullquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--heading);
}
blockquote { margin: 0 0 1.5rem; padding-left: 1.5rem; border-left: 1px solid var(--magenta); }
blockquote cite { display: block; font-family: var(--font-sans); font-style: normal; font-size: .875rem; color: var(--text-dim); }

/* --- Text utilities ------------------------------------------------------ */
.lead       { font-size: 1.1875rem; font-weight: 300; line-height: 1.65; color: #dfe3f0; }
.text-small { font-size: .875rem; line-height: 1.7; color: var(--text-dim); }
.text-center{ text-align: center; }
.text-left  { text-align: left; }
.text-right { text-align: right; }
.text-upper { text-transform: uppercase; letter-spacing: .1em; }

/* Gradient-filled neon text, and its hollow counterpart */
.text-neon {
  background: var(--neon);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.text-outline {
  font-family: var(--font-outline);
  font-weight: 800;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.5px var(--cyan);
}

.color-primary        { color: var(--cyan); }
.color-text           { color: var(--text); }
.color-text-inverted  { color: #fff; }

@media (min-width: 768px) {
  .text-md-left   { text-align: left; }
  .text-md-center { text-align: center; }
}

/* A small uppercase kicker: equaliser bars, then the label */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 1.25rem;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--cyan);
}

/* --- Vertical rhythm utilities ------------------------------------------- */
.content-padding        { padding-top: 2rem;    padding-bottom: 2rem; }
.content-padding-xs     { padding-top: 2rem;    padding-bottom: 2rem; }
.content-padding-lg     { padding-top: 3.5rem;  padding-bottom: 3.5rem; }
.content-padding-xl     { padding-top: 4rem;    padding-bottom: 4rem; }
.content-padding-xxl    { padding-top: 4rem;    padding-bottom: 4rem; }
.content-padding-none   { padding-top: 0;       padding-bottom: 0; }

@media (min-width: 768px) {
  .content-padding     { padding-top: 3rem;   padding-bottom: 3rem; }
  .content-padding-lg  { padding-top: 5rem;   padding-bottom: 5rem; }
  .content-padding-xl  { padding-top: 6rem;   padding-bottom: 6rem; }
  .content-padding-xxl { padding-top: 7.5rem; padding-bottom: 7.5rem; }
}
@media (min-width: 992px) {
  .content-padding     { padding-top: 4rem;  padding-bottom: 4rem; }
  .content-padding-lg  { padding-top: 7rem;  padding-bottom: 7rem; }
  .content-padding-xl  { padding-top: 8rem;  padding-bottom: 8rem; }
  .content-padding-xxl { padding-top: 10rem; padding-bottom: 10rem; }
}

.content-margin-top    { margin-top: 4rem; }
.content-margin-top-sm { margin-top: 2rem; }
@media (min-width: 992px) {
  .content-margin-top    { margin-top: 7rem; }
  .content-margin-top-sm { margin-top: 3rem; }
}

/* Anchored targets clear the fixed header */
[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }

.pb-0 { padding-bottom: 0 !important; }
.pt-0 { padding-top: 0 !important; }