/* PRJCT.media — "Air"
   Implements the artboards in the Claude Design doc "PRJCT.media Site - Air".

   Three bands, because the artboards fix 1440 and 390 and delegate the middle:
     >= 880px  two columns, a pure proportional scale of the 1440x860 artboard
     700-880   stacked, tagline still on two lines (it still fits, so it must not break)
     < 700px   the 390x844 artboard: tagline breaks after "Technical"
   880 is where the form column would stop being usable, not where the tagline
   stops fitting — those are separate constraints and get separate thresholds. */

/* ---------- fonts ---------- */

@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens ---------- */

:root {
  --ground:    #f4f2ed;
  --ink:       #14130f;
  --muted:     #6b6862;
  --rule:      #cfcabf;  /* input underlines — must be findable */
  --rule-soft: #ddd8cd;  /* footer divider — only has to separate */
  --plus:      #8f887c;  /* one value, both modes */
  --hover:     #56534d;

  --sans:    Arial, Helvetica, sans-serif;
  --display: "Arial Black", "Arial Bold", Arial, Helvetica, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* proportional scale of the 1440 artboard, frozen at artboard values above 1440 */
  --pad-x:    min(5.278vw, 76px);
  --pad-y:    min(4.167vw, 60px);
  --mark:     min(31.94vw, 460px);
  --tag:      min(4.306vw, 62px);
  --id-gap:   min(3.889vw, 56px);
  --col-form: clamp(230px, 25vw, 360px);
  --col-gap:  min(7.639vw, 110px);

  --tag-lh: 1.08;
  --tag-ls: -0.022em;
  --input-size: 15px;
  --input-pad: 6px;
  --meta-size: 11px;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground:    #16150f;  /* not #000 — the light ground's own value, inverted */
    --ink:       #f4f2ed;
    --muted:     #a29d92;
    --rule:      #3a382f;
    --rule-soft: #2a2822;
    --hover:     #a29d92;
  }
}

/* ---------- reset ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
h1, p { margin: 0; }
img { max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; }

/* ---------- page frame ---------- */

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
}

.page {
  min-height: 100svh;
  max-width: 1440px;
  margin-inline: auto;
  padding: var(--pad-y) var(--pad-x);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
}

/* ---------- top meta ---------- */

.meta {
  font-family: var(--mono);
  font-size: var(--meta-size);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- middle band ---------- */

.band {
  display: grid;
  grid-template-columns: 1fr var(--col-form);
  gap: var(--col-gap);
  align-items: end;
}

.identity {
  display: flex;
  flex-direction: column;
  gap: var(--id-gap);
  min-width: 0;
}

.mark { display: block; }
.mark img {
  display: block;
  width: var(--mark);
  height: auto;      /* the width/height attrs reserve the 505.78:131.13 box */
}

.tagline {
  font-family: var(--display);
  font-weight: 900;
  font-size: var(--tag);
  line-height: var(--tag-lh);
  letter-spacing: var(--tag-ls);
}
.tagline__a,
.tagline__b { display: block; }
.tagline__a { white-space: nowrap; }   /* line one never wraps — until it must */
.plus { color: var(--plus); padding-left: 0.16em; }

/* ---------- form ---------- */

.contact {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 4px;
  min-width: 0;
}

.contact__eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}

.field { display: flex; flex-direction: column; gap: 6px; }

.field label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.field input,
.field textarea {
  font-family: var(--sans);
  font-size: var(--input-size);
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: var(--input-pad) 0;
  outline: none;
  border-radius: 0;
  transition: border-bottom-color 160ms ease;
}
.field textarea { line-height: 1.6; resize: none; }

/* focus is signalled by weight as well as colour, so it never depends on hue alone */
.field input:focus-visible,
.field textarea:focus-visible {
  border-bottom-color: var(--ink);
  border-bottom-width: 2px;
  padding-bottom: calc(var(--input-pad) - 1px);
}
.field input::placeholder,
.field textarea::placeholder { color: #a8a196; }

.contact__action {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-top: 4px;
}

.contact__note {
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 190px;
}

.btn {
  background: var(--ink);
  color: var(--ground);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 15px 30px;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 160ms ease;
}
.btn:hover { background: var(--hover); }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.btn[disabled] { cursor: default; opacity: 0.55; }

/* side by side needs ~330px; below that the note drops under the button.
   Keyed to the form's own width, so it holds at any viewport. */
@container (max-width: 330px) {
  .contact__action {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 16px;
    padding-top: 0;
  }
  .contact__note { max-width: none; }
  .btn { width: 100%; }
}

.contact__status {
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.5;
  color: var(--muted);
}
.contact__status:empty { display: none; }

/* honeypot — off-screen rather than display:none, which bots test for */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* without JS the Turnstile token can never be issued, so don't offer a dead button */
.no-js .contact__action,
.no-js .cf-turnstile { display: none; }

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

.colophon {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  font-family: var(--mono);
  font-size: var(--meta-size);
  text-transform: uppercase;
  color: var(--muted);
  border-top: 1px solid var(--rule-soft);
  padding-top: 20px;
}

/* ---------- 700-880: stacked, but the tagline still fits on two lines ---------- */

@media (max-width: 879.98px) {
  :root {
    --pad-x: 28px;
    --pad-y: 30px;
    --mark: clamp(240px, 34vw, 340px);
    --tag: clamp(30px, 6.4vw, 52px);
    --id-gap: 34px;
    --input-size: 16px;   /* below 16px iOS zooms on focus */
    --input-pad: 11px;
  }

  .page { gap: 30px; }

  .band {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* the grid rule's `align-items: end` is the cross axis here, which in a
       column flex is horizontal — it would right-align the whole stack */
    align-items: stretch;
    gap: 40px;
    flex: 1;
  }

  /* stacked, the form would otherwise stretch the full page width and
     space-between would fling the button far from the note */
  .contact { gap: 16px; padding-bottom: 0; max-width: 420px; }
  .field input { min-height: 44px; }   /* every target clears 44px */
  .field textarea { line-height: 1.5; }
}

/* ---------- < 700: the 390x844 artboard ---------- */

@media (max-width: 699.98px) {
  :root {
    --mark: min(66.7vw, 280px);
    --tag: min(9.23vw, 40px);
    --tag-lh: 1.1;
    --tag-ls: -0.02em;
    --meta-size: 10px;
  }

  /* the tagline breaks after "Technical"; the plus still ends a line */
  .tagline__a { white-space: normal; }
  .tagline__w { display: block; white-space: nowrap; }

  /* full-width target and the reassurance line as a footnote to the action.
     A phone decision, not a fitting one, so it is keyed to the viewport
     rather than to the form's width. */
  .contact__action {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 16px;
    padding-top: 0;
  }
  .contact__note { max-width: none; }
  .btn { width: 100%; padding: 17px 30px; }

  .colophon { padding-top: 16px; }
}

/* keep touch keyboards from zooming on any coarse-pointer device, incl. iPad */
@media (pointer: coarse) {
  .field input, .field textarea { font-size: 16px; }
}

/* ---------- load choreography ----------
   Scoped entirely inside no-preference: with reduced motion the page paints
   static and fully opaque, so nothing can be left invisible. */

@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(10px);
    animation: settle 520ms cubic-bezier(0.2, 0.6, 0.2, 1) forwards;
  }
  .js [data-reveal="1"] { animation-delay: 0ms; }
  .js [data-reveal="2"] { animation-delay: 60ms; }
  .js [data-reveal="3"] { animation-delay: 140ms; }
  .js [data-reveal="4"] { animation-delay: 240ms; }
  .js [data-reveal="5"] { animation-delay: 340ms; }
}

@keyframes settle {
  to { opacity: 1; transform: none; }
}