/* Draftr lander preview. Self-contained: it shares only the fonts in
   /public/fonts with the rest of the site, never styles.css or social.css.

   The page's own resting state is the *finished* composition — frames
   registered on the grid. lander.js adds
   data-motion="on" to <body> when motion is wanted, and only then does the
   scene pin and play. So with JavaScript off, or motion off, or reduced
   motion asked for, a visitor still lands on the completed page. */

@font-face{font-family:Basement;src:url(/fonts/basement-grotesque-black.woff2) format("woff2");font-weight:400;font-display:swap;}
@font-face{font-family:Barlow;src:url(/fonts/barlow-400.woff2) format("woff2");font-weight:400;font-display:swap;}
@font-face{font-family:Barlow;src:url(/fonts/barlow-600.woff2) format("woff2");font-weight:600;font-display:swap;}
@font-face{font-family:Barlow;src:url(/fonts/barlow-700.woff2) format("woff2");font-weight:700;font-display:swap;}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/ibm-plex-mono-400.woff2) format("woff2");font-weight:400;font-display:swap;}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/ibm-plex-mono-500.woff2) format("woff2");font-weight:500;font-display:swap;}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/ibm-plex-mono-600.woff2) format("woff2");font-weight:600;font-display:swap;}

:root {
  /* The shipped Draftr palette (public/social.css): near-black canvas, warm
     white text, green leads, cyan supports, pink punctuates. */
  --bg: #080a0b;
  --panel: #141a1d;
  --surface: #191f22;
  --subtle: #293438;
  --line: #5f7277;
  --field: #77776d;
  --text: #edf3f2;
  --muted: #b3c2c4;
  --black: #050505;
  --green: #39ff14;
  --green-hover: #80ff68;
  --cyan: #00e5ef;
  --pink: #ff00b8;
  --pink-soft: #ff71d7;
  --error: #ff6b6b;

  --display: Basement, Barlow, Arial, sans-serif;
  --sans: Barlow, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;

  --border: 3px;
  --shadow: 8px;
  --gutter: 48px;
  --measure: 1280px;
  --masthead: 64px;

  /* Scene progress, 0 to 1, written by lander.js only where CSS scroll-driven
     animations are unavailable. */
  --lift: 0;
  --settle: 0;

  color-scheme: dark;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

/* Components below set display, which would otherwise beat [hidden]. */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
p {
  margin: 0;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-radius: 0;
}

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

:focus-visible {
  outline: var(--border) solid var(--green);
  outline-offset: var(--border);
}

#main:focus {
  outline: none;
}

.skip-link {
  position: fixed;
  top: var(--s2);
  left: var(--s2);
  z-index: 40;
  translate: 0 calc(-100% - var(--s7));
  padding: var(--s3) var(--s4);
  border: var(--border) solid var(--black);
  background: var(--green);
  color: var(--bg);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}

.skip-link:focus {
  translate: 0 0;
}

/* ---------- masthead ---------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  height: var(--masthead);
  padding: 0 var(--gutter);
  border-bottom: var(--border) solid var(--text);
  background: var(--panel);
}

.masthead__brand {
  font-family: var(--mono);
  color: var(--green);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.masthead__tools {
  display: flex;
  align-items: center;
  gap: var(--s5);
}

.masthead__toggle {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--s3);
  background: none;
  border: 0;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.masthead__toggle {
  border: 2px solid var(--field);
  background: var(--surface);
  color: var(--text);
}

.masthead__toggle:hover {
  border-color: var(--pink-soft);
}

.masthead__toggle[aria-pressed="true"] {
  border-color: var(--black);
  background: var(--cyan);
  color: var(--bg);
}

/* ---------- the scene ---------- */

.scene {
  position: relative;
}

.stage {
  position: relative;
  display: grid;
  align-content: center;
  padding: var(--s9) 0;
  overflow: clip;
}

.stage__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(to right, var(--subtle) 1px, transparent 1px),
    linear-gradient(to bottom, var(--subtle) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, #000 0 42%, transparent 66%);
  pointer-events: none;
}

.stage__frames,
.stage__content {
  width: min(100% - (var(--gutter) * 2), var(--measure));
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s5);
  align-items: start;
}

.stage__frames {
  position: absolute;
  inset: var(--s9) 0;
  z-index: 0;
  align-content: center;
  pointer-events: none;
}

.stage__content {
  position: relative;
  z-index: 2;
}

/* Decorative frames. Their resting state is registered: no offset, no tilt. */

.ghost {
  grid-row: 1;
  grid-column: 2 / 8;
  height: 168px;
  border: var(--border) solid var(--frame, var(--line));
  translate: 0 0;
  rotate: 0deg;
}

.ghost__bar {
  display: block;
  height: 26px;
  border-bottom: var(--border) solid var(--frame, var(--line));
  background-color: var(--frame, var(--line));
  background-image: repeating-linear-gradient(
    90deg,
    var(--bg) 0 2px,
    transparent 2px 6px
  );
}

.ghost--rear {
  --dx: -44px;
  --dy: -74px;
  --rot: -1.5deg;
  --travel: 48px;
  --frame: var(--cyan);
  height: 208px;
}

.ghost--mid {
  --dx: 30px;
  --dy: -18px;
  --rot: 1.25deg;
  --travel: 64px;
  --frame: var(--pink);
  height: 188px;
}

.ghost--front {
  --dx: 78px;
  --dy: 52px;
  --rot: -2.25deg;
  --travel: 80px;
  --frame: var(--line);
}

/* The rear frame carries the site's ordered-dither brand material. */
.ghost--rear .ghost__bar {
  background: url(/assets/dither.svg) center / 100% 100%;
}

/* ---------- identity ---------- */

.identity {
  grid-column: 1 / 8;
  display: grid;
  gap: var(--s5);
}

.identity__wordmark {
  display: grid;
  justify-items: start;
  gap: var(--s2);
  font-size: 144px;
  font-family: var(--display);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.identity__tld {
  padding: 0 var(--s3);
  background: var(--green);
  color: var(--bg);
  font-size: 0.42em;
  letter-spacing: -0.02em;
}

.identity__line {
  justify-self: start;
  max-width: 34ch;
  padding: var(--s3) var(--s4);
  border-left: var(--border) solid var(--green);
  background: var(--bg);
  color: var(--muted);
}

.identity__cta {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--s5);
  border: var(--border) solid var(--black);
  background: var(--green);
  box-shadow: var(--shadow) var(--shadow) 0 0 var(--cyan);
  color: var(--bg);
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}

.identity__cta:hover {
  background: var(--green-hover);
}

.identity__cta:active {
  translate: 0 2px;
}

/* ---------- footer ---------- */

.footer {
  display: flex;
  align-items: center;
  padding: var(--s5) var(--gutter);
  border-top: var(--border) solid var(--text);
}

.footer__brand {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- the scroll-locked registration ----------
   Desktop only, motion wanted only. The scene is 2.2 viewport heights tall
   with a pinned 1-viewport stage, so the pinned travel is 1.2 viewport
   heights. Native scrolling never stops; the stage only holds its place. */

@media (min-width: 1024px) and (min-height: 760px) and (prefers-reduced-motion: no-preference) {
  body[data-motion="on"] .scene {
    height: 220vh;
    view-timeline: --scene;
  }

  body[data-motion="on"] .stage {
    position: sticky;
    top: 0;
    height: 100vh;
  }

  /* Layers travel from 20% to 65% of the pinned distance, the frames settle
     onto the grid by 85%, and the last 15% holds the finished composition. */
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    body[data-motion="on"] .stage__grid {
      animation: rise linear both;
      animation-timeline: --scene;
      animation-range: contain 20% contain 65%;
    }

    body[data-motion="on"] .ghost {
      animation: register linear both;
      animation-timeline: --scene;
      animation-range: contain 20% contain 85%;
    }
  }

  /* Firefox, and anything else without scroll-driven animations: lander.js
     writes the same progress values straight onto <body>. */
  body[data-motion="on"][data-fallback="on"] .stage__grid {
    translate: 0 calc(-24px * var(--lift));
  }

  body[data-motion="on"][data-fallback="on"] .ghost {
    translate:
      calc(var(--dx) * (1 - var(--settle)))
      calc((var(--dy) - var(--travel) * var(--lift)) * (1 - var(--settle)));
    rotate: calc(var(--rot) * (1 - var(--settle)));
  }

}

@keyframes rise {
  from {
    translate: 0 0;
  }
  to {
    translate: 0 -24px;
  }
}

@keyframes register {
  0% {
    translate: var(--dx) var(--dy);
    rotate: var(--rot);
  }
  69% {
    translate: var(--dx) calc(var(--dy) - var(--travel));
    rotate: var(--rot);
  }
  100% {
    translate: 0 0;
    rotate: 0deg;
  }
}

/* Motion off means no smooth scrolling either. */
html:has(body[data-motion="off"]) {
  scroll-behavior: auto;
}

/* ---------- narrow and short viewports ---------- */

@media (max-width: 1279px) {
  :root {
    --gutter: var(--s6);
  }

  .identity__wordmark {
    font-size: 104px;
  }
}

@media (max-width: 1023px), (max-height: 759px) {
  .stage__frames {
    display: none;
  }

  .stage__content {
    grid-template-columns: 1fr;
  }

  .identity {
    grid-column: 1;
  }

  .stage {
    gap: var(--s7);
    padding: var(--s8) 0 var(--s7);
  }

  .stage__grid {
    mask-image: linear-gradient(to bottom, #000 0 34%, transparent 58%);
  }
}

@media (max-width: 767px) {
  :root {
    --gutter: 20px;
    --shadow: 4px;
  }

  body {
    font-size: 16px;
  }

  .identity__wordmark {
    font-size: 64px;
  }

  .masthead__tools {
    gap: var(--s2);
  }

  .masthead__toggle {
    padding: 0 var(--s2);
    font-size: 12px;
  }
}

@media (max-width: 359px) {
  :root {
    --gutter: 16px;
  }

  .identity__wordmark {
    font-size: 52px;
  }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

::selection {
  background: var(--green);
  color: var(--bg);
}