/* ---------- Fonts ---------- */
/* Your pixel font. Drop the file in assets/fonts/ and match the filename. */
@font-face {
  font-family: "Dansereau 1-Bit";
  src: url("assets/fonts/Dansereau1Bit-Regular.woff2") format("woff2"),
       url("assets/fonts/Dansereau1Bit-Regular.ttf") format("truetype");
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* 1 design pixel. The Figma frame is 1440 wide, so the whole
     page scales with the browser width and keeps its proportions. */
  --u: calc(100vw / 1440);

  --black: #000;
  --white: #fff;
  --cream: #eedec1;
  --cream-disabled: #c0bab0;       /* muted cream for coming-soon buttons (your Figma nav colour);
                                      light enough to stay readable with the exclusion blend */
  --cream-muted: #a89d8a;          /* supporting text: notes, hints, secondary game labels */
  --sand: #99815d;

  --font-sans: "degular-variable", "degular", "Degular Variable", system-ui, sans-serif;
  --font-mono: "degular-mono", "Degular Mono", ui-monospace, monospace;
  --font-pixel: "Dansereau 1-Bit", var(--font-mono);
}

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

html, body {
  background: var(--black);
  color: var(--white);
}
/* stop sideways scrolling without breaking position: sticky
   (overflow: hidden here would quietly un-pin the hero) */
html { overflow-x: clip; }

img { display: block; }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: calc(113 * var(--u));
  z-index: 2;                      /* pinned above the hero, under the construction section */
  pointer-events: none;            /* only the links/images catch clicks */
}

.site-header > * { pointer-events: auto; position: absolute; }

.site-menu {
  position: fixed;
  inset: 0 0 auto 0;
  height: calc(113 * var(--u));
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: exclusion;       /* flips against the video so the words always read */
}
.site-menu > * { position: absolute; }

.logo {
  left: calc(32 * var(--u));
  /* vertically centred on the menu words (their row is 111px tall, centre at 55.5px);
     the m is 62 × 31.3px, so its top sits at 55.5 − 15.65 */
  top: calc(39.85 * var(--u));
  width: calc(62 * var(--u));
}
.logo img { display: block; width: 100%; height: auto; }

.nav {
  left: calc(555 * var(--u));
  top: 0;
  height: calc(111 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(82 * var(--u));
}
.nav a,
.nav-playground {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: calc(16 * var(--u));
  color: var(--cream);
  text-decoration: none;
}
/* coming soon: dimmed, not clickable */
.nav a[aria-disabled="true"],
.nav-playground[aria-disabled="true"] {
  color: var(--cream-disabled);
  cursor: default;
  pointer-events: none;
}
.nav a:focus-visible, .logo:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 4px;
}

.nav-playground {
  left: calc(1294 * var(--u));      /* from Figma */
  top: 0;
  height: calc(111 * var(--u));
  display: flex;
  align-items: center;
}

/* ---------- Hero ---------- */
.hero {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  z-index: 1;
  overflow: hidden;
}
/* video, name and bio, laid out together as in Figma (1438 × 804),
   centred on screen (and trimmed evenly if the window is shorter than it) */
.hero-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  /* centred, then lifted a little so it doesn't feel dead-centre */
  transform: translate(-50%, calc(-50% - 40 * var(--u)));
  width: calc(1438 * var(--u));
  height: calc(804 * var(--u));
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--black);
  filter: brightness(0.85);        /* a touch darker so the name and bio read clearly */
  opacity: 0;                      /* starts black; fades in once the signature starts writing */
  transition: opacity 1.4s ease;
}
.hero-video.is-on {
  opacity: 1;
}
/* the bio waits until the name is written, then fades in and slides down from the underline */
.intro {
  opacity: 0;
  transform: translateY(calc(-26 * var(--u)));
  transition:
    opacity 0.9s ease,
    transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);   /* ease-out: quick start, soft landing */
}
.intro.is-on {
  opacity: 1;
  transform: none;
}

.hero-signature {
  position: absolute;
  translate: 0 calc(var(--parallax, 0) * 1px);   /* slight parallax, set by parallax.js */
  left: calc(144.5 * var(--u));     /* centred across the video */
  top: calc(185.5 * var(--u));      /* name + bio centred top to bottom */
  width: calc(1149 * var(--u));
  aspect-ratio: 1624 / 600;
  pointer-events: none;
}
.hero-signature video,
.hero-signature img {
  display: block;
  width: 100%;
  height: 100%;
}
[hidden] { display: none !important; }

.intro {
  translate: 0 calc(var(--parallax, 0) * 1px);   /* moves with the name so their spacing holds */
  --slant: 0.728;                  /* the y's descender: 0.728px left for every 1px down */
  position: absolute;
  left: calc(831.6 * var(--u));
  /* placed so the gap above (to the y's straight line) equals the gap to its left
     (to the y's descender): about 33px each */
  top: calc(481.8 * var(--u));
  color: var(--cream);
  font-family: var(--font-sans);
  font-weight: 500;
  --line-h: calc(22.3125 * var(--u));   /* line height, same 21/16 ratio as before */
  font-size: calc(17 * var(--u));
  line-height: var(--line-h);
}
.intro span {
  display: block;
  white-space: nowrap;
  /* shift each line left by one line-height's worth of the slant */
  transform: translateX(calc(var(--line) * var(--slant) * var(--line-h) * -1));
}

/* ---------- Under construction ---------- */
.construction {
  position: relative;
  z-index: 3;                      /* scrolls up over the hero AND the menu bar */
  /* one full screen tall, so the game runs to the bottom of the screen */
  height: 100vh;
  height: 100svh;
  min-height: calc(304 * var(--u) + 320px);
  background: var(--black);
}

.construction-title {
  position: absolute;
  left: 50%;
  top: calc(154.5 * var(--u));     /* moved down 40px with the hint */
  transform: translate(-50%, -50%);
  width: calc(1263 * var(--u));
  font-family: var(--font-pixel);
  font-weight: 400;
  font-size: calc(128 * var(--u));
  line-height: calc(50 * var(--u));
  letter-spacing: calc(-5.12 * var(--u));
  color: var(--cream);
  text-align: center;
  white-space: nowrap;
}

.deconstruct-hint {
  position: absolute;
  left: calc(56 * var(--u));
  top: calc(56 * var(--u));        /* 40px more breathing room above */
  z-index: 1;
  pointer-events: none;
  color: var(--cream-muted);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.deconstruct-hint.is-hidden {
  opacity: 0;
  transform: translateY(calc(-6 * var(--u)));
}
.deconstruct-hint-text {
  display: block;
  font-family: var(--font-mono);
  font-weight: 300;                /* light */
  font-size: max(12px, calc(16 * var(--u)));
  text-transform: uppercase;       /* [HOVER TO DECONSTRUCT], like the menu */
  white-space: nowrap;
}
.deconstruct-hint-arrow {
  display: block;
  width: calc(70 * var(--u));
  height: calc(56 * var(--u));
  margin-left: calc(36 * var(--u));     /* starts under the label, curves into the "u" */
  margin-top: calc(4 * var(--u));
  overflow: visible;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.construction-note {
  position: absolute;
  left: 50%;
  top: calc(237 * var(--u));       /* moved down 40px with the title */
  transform: translateX(-50%);
  width: calc(1095 * var(--u));
  margin: 0;
  text-align: center;
  /* supporting text: same type as the bio, a step down in size and colour so the title leads */
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: max(13px, calc(18 * var(--u)));   /* never smaller than 13px on phones */
  line-height: calc(22.3125 / 17);
  color: var(--cream-muted);
  text-wrap: balance;              /* even line lengths, no lonely last line */
}

.construction-box {
  position: absolute;
  left: 0;                         /* full width so sliding projects are never cut off;
                                      play still happens in the 784px column in the middle */
  top: max(calc(344 * var(--u)), 140px);   /* moved down 40px; on phones, keeps clear of the note */
  bottom: 0;                       /* tower starts at the bottom of the screen */
  width: 100%;
  background: var(--black);
}

/* ================= Phones, tablets & portrait screens =================
   Desktop scales everything with the screen width, which gets too small on narrow or tall screens.
   Here the same pieces are laid out in a column with real minimum sizes. Desktop is untouched. */
@media (max-width: 1023px), (max-aspect-ratio: 1/1) {
  /* header: logo left, menu right */
  .site-header, .site-menu {
    height: 64px;
    padding-top: env(safe-area-inset-top, 0px);
    box-sizing: content-box;
  }
  .logo { left: 20px; top: calc(16px + env(safe-area-inset-top, 0px)); width: 52px; }
  .site-menu {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 18px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .site-menu > * { position: static; }
  .nav { position: static; height: auto; gap: 18px; }
  .nav-playground { position: static; height: auto; }
  .nav a, .nav-playground { font-size: 12px; }

  /* hero: the video fills the screen; name and bio stack in the middle */
  .hero-stage {
    left: 0; top: 0;
    width: 100%; height: 100%;
    transform: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 0 6vw 6vh;
    box-sizing: border-box;
  }
  .hero-signature {
    position: relative;
    left: auto; top: auto;
    width: min(88vw, 720px, 105svh);
  }
  .intro {
    position: relative;
    left: auto; top: auto;
    width: min(88vw, 520px);
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
    transform: translateY(-14px);
  }
  .intro.is-on { transform: none; }
  .intro span {                    /* lines flow and wrap like a normal paragraph here */
    display: inline;
    white-space: normal;
    transform: none;
  }

  /* under construction: hint, title, note, then the game fills the rest */
  .construction {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(28px + env(safe-area-inset-top, 0px)) 16px 0;
    box-sizing: border-box;
    height: auto;
    min-height: 100vh;
    min-height: 100svh;              /* at least one screen, and grows if a short screen needs more */
  }
  .deconstruct-hint {
    position: relative;
    left: auto; top: auto;
    margin-bottom: 6px;
  }
  .deconstruct-hint-text { font-size: 12px; }
  .deconstruct-hint-arrow { display: none; }   /* nothing to point across to: it sits right above */
  .construction-title {
    position: relative;
    left: auto; top: auto;
    transform: none;
    width: auto;
    margin: 0;
    font-size: calc(128 * 1.15 * var(--u));
    line-height: 1.15;
    letter-spacing: -0.04em;
  }
  .construction-note {
    position: relative;
    left: auto; top: auto;
    transform: none;
    width: auto;
    max-width: 560px;
    margin: 10px 0 0;
    font-size: 14px;
  }
  .construction-box {
    position: relative;
    left: auto; top: auto; bottom: auto;
    width: calc(100% + 32px);       /* full bleed past the side padding */
    margin: 14px -16px 0;
    flex: 1 1 auto;
    min-height: 340px;
  }
}

/* ---------- Stack game ---------- */
.stack-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
  touch-action: manipulation;
}
.stack-canvas:focus,
.stack-canvas:focus-visible {
  outline: none;
}

/* ---------- Pixel title ---------- */
.pixel-title {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* the real text stays for screen readers and copy/paste, the canvas draws it */
.construction-title.is-pixelated { color: transparent; }
.construction-title.is-pixelated::selection { color: var(--cream); }