/* Microscript Media — interim placeholder
   Dark ground, Arial, one fluorescent green (and a quieter green for the form),
   with very dark, diffuse waves in the background.

   ONE SCREEN, NO SCROLLING. The page is exactly as tall as the visible screen
   on every device. To make everything fit, sizes are tied to the screen's
   height as well as its width (the "vh" in the clamp() values below), so type
   and spacing shrink on a short screen and open up on a tall one.

   Two arrangements:
     · stacked      — phones and tablets held upright, and squarish windows
     · side by side — wide screens, and phones held sideways  (see the @media
                      block near the end)                                      */

:root {
  --bg: #040605;
  --fg: #eef2ea;
  --muted: rgba(238, 242, 234, .6);
  --line: rgba(238, 242, 234, .22);
  --green: #39ff14;        /* fluorescent: the brand square and the service numbers */
  --green-low: #1f8f14;    /* darker, low-key: everything in the contact form */

  /* Arial ships with every device, so nothing is downloaded. It has two
     weights, regular and bold; emphasis on this page is done with bold. */
  --font: Arial, "Helvetica Neue", Helvetica, sans-serif;

  --pad-x: clamp(1.25rem, 5vw, 4.5rem);
  --pad-y: clamp(.9rem, 3.4vh, 2.5rem);
  --small: clamp(.625rem, min(3.1vw, 1.75vh), .9375rem);  /* services, CONTACT */

  color-scheme: dark;
}

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

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;              /* nothing scrolls */
  overscroll-behavior: none;     /* and nothing rubber-bands */
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--fg);
  font: 400 1rem/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

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

/* The wave: a canvas fixed behind the page, drawn by assets/site.js.
   Very dark, soft-edged green swells that fade into the black.
   Drawn small and stretched to fit, which keeps every edge diffuse.
   It never reacts to the pointer. */
.wave {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* ── The one screen ───────────────────────────────────────────────────── */

.page {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;   /* name · everything else · footer */
  row-gap: clamp(.5rem, 2vh, 1.5rem);
  height: 100vh;
  height: 100dvh;      /* the part of the screen actually visible, browser bars excluded */
  padding:
    max(var(--pad-y), env(safe-area-inset-top))
    max(var(--pad-x), env(safe-area-inset-right))
    max(var(--pad-y), env(safe-area-inset-bottom))
    max(var(--pad-x), env(safe-area-inset-left));
}

.brand {
  display: flex;
  align-items: center;
  gap: .75em;
  font-size: clamp(.6875rem, 1.9vh, .8125rem);
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.brand strong { font-weight: 700; }
.brand::before {
  content: "";
  width: .62em; height: .62em;
  background: var(--green);
  box-shadow: 0 0 14px rgba(57, 255, 20, .8);
}

/* Stacked: intro above, contact below, the spare room shared out evenly. */
.stage {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: clamp(.6rem, 2.4vh, 2rem);
  min-height: 0;
}

/* ── Intro ────────────────────────────────────────────────────────────── */

.lede {
  max-width: 23em;
  margin: 0;
  font-size: clamp(1.05rem, min(5.4vw, 3.5vh), 3rem);
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: -.012em;
  color: rgba(238, 242, 234, .86);
  text-wrap: balance;
}
.lede strong { font-weight: 700; color: var(--fg); }

.services {
  display: grid;
  gap: clamp(.28rem, 1.25vh, .8rem);
  margin: clamp(.8rem, 4vh, 2.75rem) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: service;
}
.services li {
  display: flex;
  gap: 1em;
  counter-increment: service;
  font-size: var(--small);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.services li::before {
  content: counter(service, decimal-leading-zero);
  color: var(--green);
  font-variant-numeric: tabular-nums;
}

/* ── Contact ──────────────────────────────────────────────────────────── */

.contact { width: 100%; max-width: 34rem; }

.contact__title {
  margin: 0 0 clamp(.45rem, 1.6vh, 1.1rem);
  font-size: var(--small);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--green-low);
}

/*   [ Name      ] [ Email     ]
     [ Message            ] [ → ]   */
.form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(.4rem, 1.1vh, .75rem);
}
.form__row {
  grid-column: 1 / -1;
  display: flex;
  gap: clamp(.4rem, 1.1vh, .75rem);
}

.form input,
.form textarea {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: clamp(.4rem, 1.25vh, .85rem) clamp(.7rem, 1.6vh, 1rem);
  border: 1px solid var(--line);
  border-radius: 0;
  background: rgba(4, 6, 5, .72);
  color: var(--fg);
  font: 400 1rem/1.4 var(--font);   /* 16px: stops phones zooming in on focus */
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.form textarea {
  flex: 1 1 auto;
  height: clamp(3rem, 12vh, 8rem);
  resize: none;                     /* it must not push the page past one screen */
}
.form ::placeholder { color: rgba(238, 242, 234, .46); opacity: 1; }

.form input:focus,
.form textarea:focus {
  border-color: var(--green-low);
  box-shadow: 0 0 0 1px var(--green-low);
}
.form input:-webkit-autofill,
.form textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--fg);
  box-shadow: 0 0 0 100px #070a08 inset;
  caret-color: var(--fg);
}

.send {
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(2.75rem, 7vh, 3.5rem);   /* as tall as the message box beside it */
  padding: 0;
  border: 1px solid var(--green-low);
  border-radius: 0;
  background: transparent;
  color: var(--green-low);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, transform .08s ease;
}
.send svg { width: 1.1rem; height: 1.1rem; }
.send:hover, .send:focus-visible { background: var(--green-low); color: #031002; }
.send:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.send:active { transform: scale(.95); }

/* ── Footer ───────────────────────────────────────────────────────────── */

.foot {
  font-size: clamp(.5625rem, 1.5vh, .6875rem);
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Side by side ─────────────────────────────────────────────────────────
   Wide screens (laptops, desktops, tablets on their side) and phones held
   sideways: intro on the left, contact on the right, both centred vertically. */

@media (min-aspect-ratio: 5/4) and (min-width: 48rem),
       (max-height: 30rem) and (min-width: 34rem) {
  :root { --small: clamp(.625rem, min(1.05vw, 2.2vh), .9375rem); }

  .stage {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1.5rem, 6vw, 6.5rem);
  }
  .intro { flex: 1.4 1 0; min-width: 0; }
  .contact { flex: 1 1 0; min-width: 0; max-width: 32rem; }

  .lede { font-size: clamp(1rem, min(2.75vw, 4.7vh), 3.25rem); }
  .services li { letter-spacing: .15em; }
  .form textarea { height: clamp(3rem, 17vh, 9rem); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}