/* ═══════════════════════════════════════════════════════════════
   EdgerDawnTec — one page, one stylesheet

   Direction: a printed letterhead. Reference: anysphere.inc for the
   restraint — a name, a sentence, one link out.

   The design is three hairlines and a narrow measure. A rule under
   the masthead, a rule above the foot, and a margin rule down the
   right edge of the text column so the empty half of the sheet
   reads as margin rather than dead space. Nothing else is drawn.

   LIGHT ONLY, and no colour gradients anywhere — both are standing
   owner decisions. Every surface is flat. The single accent (ember)
   is spent once, on the link out to Meesbar AI, because that is the
   page's one action. The email carries a mono label instead of a
   second colour, so it reads as a labelled field on a letterhead.

   No JavaScript. The load choreography is CSS-only and is fully
   removed under prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/fonts/schibsted-grotesk-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

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

/* metric-tuned so the swap does not shift the measure */
@font-face {
  font-family: "Schibsted Fallback";
  src: local("Helvetica Neue"), local("Helvetica"), local("Arial");
  size-adjust: 103.6%;
  ascent-override: 88%;
  descent-override: 22%;
  line-gap-override: 0%;
}

:root {
  /* Dawn light is warm, so the whole neutral ramp carries one warm
     hue. There is no untinted grey on this page. */
  --hue: 72;

  --paper: oklch(97.6% 0.008 var(--hue));
  --ink:   oklch(23% 0.016 var(--hue));

  /* Muted text is one ink at descending alpha, never a set of greys.
     The floor is 64%: measured at 4.9:1 on this paper, which keeps the
     12px foot and labels over WCAG AA. Anything lighter fails. */
  --ink-64: color-mix(in oklab, var(--ink) 64%, transparent);
  --ink-38: color-mix(in oklab, var(--ink) 38%, transparent);

  --rule:       color-mix(in oklab, var(--ink) 15%, transparent);
  --rule-faint: color-mix(in oklab, var(--ink) 9%, transparent);

  /* the only chromatic event on the page */
  --ember: oklch(50% 0.135 45);

  --font-sans: "Schibsted Grotesk", "Schibsted Fallback", system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-lede:   clamp(1.5rem, 1.05rem + 1.95vw, 2.375rem);
  --t-action: clamp(1.0625rem, 0.99rem + 0.35vw, 1.25rem);
  --t-body:   1.0625rem;
  --t-micro:  0.75rem;

  --measure: 31rem;   /* the text column, and what the margin rule marks */
  --sheet:   64rem;
  --pad-x:   clamp(1.5rem, 0.9rem + 3vw, 5rem);

  --d:        150ms;
  --d-reveal: 340ms;
  --d-rule:   640ms;
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  color-scheme: only light;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100svh;
  display: flex;
  padding-inline: var(--pad-x);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: 450;
  line-height: 1.62;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: color-mix(in oklab, var(--ember) 22%, transparent); }

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

.sheet {
  width: 100%;
  max-width: var(--sheet);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
}

/* ── masthead ───────────────────────────────────────────────────
   The company name recedes to a letterhead line. What the company
   does is the largest thing on the page instead. */
.head {
  position: relative;
  padding-block: 1.75rem;
}

.mark {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.head::after,
.foot::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--rule);
  transform-origin: left;
  animation: draw-x var(--d-rule) var(--ease-out) both;
}

.head::after { bottom: 0; }

/* ── the sheet's ruled margin ───────────────────────────────── */
main {
  position: relative;
  flex: 1;
  /* tuned so the whole sheet clears a 800px-tall laptop viewport
     without scrolling — main grows to fill anything taller */
  padding-block: clamp(3rem, 10vh, 7rem) 2rem;
}

@media (min-width: 64rem) {
  main::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 3rem;
    /* set past the measure, so the text stops short of the margin
       rule the way it would on ruled paper */
    left: calc(var(--measure) + 2.25rem);
    width: 1px;
    background: var(--rule-faint);
    transform-origin: top;
    animation: draw-y 720ms var(--ease-out) 240ms both;
  }
}

/* ── the writing ────────────────────────────────────────────── */
.lede {
  max-width: var(--measure);
  font-size: var(--t-lede);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.021em;
  text-wrap: balance;
}

/* the page's one action, and the one place colour is spent */
.action {
  max-width: var(--measure);
  margin-block-start: 1.6rem;
  font-size: var(--t-action);
}

.action a {
  color: var(--ember);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in oklab, var(--ember) 35%, transparent);
  transition: text-decoration-color var(--d) var(--ease);
}

.action a:hover { text-decoration-color: var(--ember); }

.arw {
  display: inline-block;
  margin-inline-start: 0.4em;
  transition: transform var(--d) var(--ease);
}

.action a:hover .arw { transform: translate(2px, -2px); }

/* a deliberate jump in the rhythm, so the address reads as its own
   field rather than the next line of the paragraph */
.reach { margin-block-start: clamp(2.75rem, 7vh, 4.5rem); }

.label {
  margin-block-end: 0.4rem;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-64);
}

.email {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--ink-38);
  transition: text-decoration-color var(--d) var(--ease);
}

.email:hover { text-decoration-color: var(--ink); }

/* ── foot ───────────────────────────────────────────────────── */
.foot {
  position: relative;
  padding-block: 1.5rem;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
  color: var(--ink-64);
}

.foot::before { top: 0; animation-delay: 160ms; }

/* ── load ───────────────────────────────────────────────────────
   One moment: the sheet rules itself, then the writing settles. */
@keyframes draw-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes draw-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.mark,
main > * {
  animation: rise var(--d-reveal) var(--ease-out) both;
}

.mark                 { animation-delay: 60ms; }
main > *:nth-child(1) { animation-delay: 200ms; }
main > *:nth-child(2) { animation-delay: 270ms; }
main > *:nth-child(3) { animation-delay: 340ms; }
.foot > *             { animation: rise var(--d-reveal) var(--ease-out) 410ms both; }

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

/* ── narrow screens ─────────────────────────────────────────── */
@media (max-width: 40rem) {
  main { padding-block: 3rem 3rem; }
}