/* House Arrow — shared stylesheet
   Monochrome system: ink on white. Two colours, no decoration.
   Typography and spacing carry the design. */

/* Wordmark face — Glacial Indifference (self-hosted, SIL OFL).
   Used only by the header/footer lockup; see assets/fonts/OFL.txt. */
@font-face {
  font-family: "Glacial Indifference";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/glacial-indifference-400.woff2") format("woff2");
}
@font-face {
  font-family: "Glacial Indifference";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/glacial-indifference-700.woff2") format("woff2");
}

:root {
  /* Colour — black and white only. The mark's near-black navy is the black. */
  --ink: #0a0a14;          /* primary text + mark (logo near-black navy) */
  --ink-soft: #3a3a42;     /* secondary text */
  --ink-muted: #6b6b73;    /* captions, fine print */
  --paper: #ffffff;        /* default page background */
  --paper-inverse: #0a0a14;/* full-bleed dark bands */
  --on-inverse: #ffffff;   /* text on dark bands */
  --on-inverse-muted: #a7a7b0;
  --hairline: #e4e4e7;     /* dividers, borders */
  --hairline-inverse: #2a2a35;

  /* Whitespace scale (8-step) */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 48px; --s7: 96px; --s8: 128px;

  --maxw: 1180px;
  --prose: 720px;
  --pad-x: clamp(24px, 6vw, 96px);

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --wordmark: "Glacial Indifference", "Century Gothic", var(--sans);

  --header-h: 76px;
  --header-h-scrolled: 56px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Layout primitives ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad-x); }
.band { padding-block: clamp(64px, 12vw, 128px); }
.band--inverse { background: var(--paper-inverse); color: var(--on-inverse); }
.band--tight { padding-block: clamp(48px, 8vw, 96px); }
.prose { max-width: var(--prose); }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.1; letter-spacing: -0.01em; margin: 0; }
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
  margin: 0 0 var(--s4);
}
.band--inverse .eyebrow { color: var(--on-inverse-muted); }

.display { font-size: clamp(40px, 7vw, 76px); line-height: 1.04; letter-spacing: -0.02em; }
.lead { font-family: var(--serif); font-size: clamp(19px, 2.4vw, 23px); line-height: 1.55; color: var(--ink-soft); }
.band--inverse .lead { color: var(--on-inverse-muted); }

p { margin: 0 0 var(--s5); }
a { color: inherit; }

/* ---------- Header / lockup ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  display: flex; align-items: center;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: height 260ms ease, border-color 260ms ease, background 260ms ease;
}
.site-header__inner {
  width: 100%; max-width: var(--maxw); margin: 0 auto;
  padding-inline: var(--pad-x);
  display: flex; align-items: center; justify-content: space-between;
}
.site-header.is-scrolled { height: var(--header-h-scrolled); border-bottom-color: var(--hairline); }

/* Lockup: "HOUSE" + [mark as A] + "RROW" — all caps, Glacial Indifference.
   The mark stands in for the capital A in ARROW, sized to read at cap-height. */
.lockup {
  display: inline-flex; align-items: baseline; gap: 0;
  text-decoration: none; color: var(--ink);
  font-family: var(--wordmark); font-weight: 700;
  font-size: 23px; line-height: 1;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.lockup__word { display: inline-block; transition: max-width 260ms ease, opacity 200ms ease, margin 260ms ease; white-space: nowrap; }
.lockup__house { margin-right: 0.22em; }
.lockup__mark {
  /* the mark stands in for the capital A — matched to the caps' cap-height.
     The corrected glyph fills y[15.8..84.2] of its 100x100 box (0.684 tall),
     so the box is scaled up to ~1.46em to bring the visible mark to cap-height,
     then nudged down so its house-base rests on the type baseline. */
  display: inline-block; height: 1.46em; width: auto;
  transform: translateY(0.17em);
  margin: 0 -0.06em; /* the box has built-in side padding; pull the caps back in */
}
.lockup__mark svg { height: 100%; width: auto; display: block; }
.lockup__rrow { margin-left: 0.02em; }

/* On scroll the wordmark collapses to the mark alone */
.site-header.is-scrolled .lockup__house,
.site-header.is-scrolled .lockup__rrow {
  max-width: 0; opacity: 0; margin: 0; overflow: hidden;
}
.lockup__house, .lockup__rrow { max-width: 6em; }
.site-header.is-scrolled .lockup__mark { transform: translateY(0); height: 1.75em; }

/* Header nav */
.site-nav { display: flex; align-items: center; gap: clamp(16px, 3vw, 32px); }
.site-nav a {
  font-family: var(--sans); font-size: 15px; font-weight: 500;
  text-decoration: none; color: var(--ink-soft);
  transition: color 160ms ease;
}
.site-nav a:hover { color: var(--ink); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--sans); font-size: 15px; font-weight: 500;
  text-decoration: none;
  padding: 12px 20px; border-radius: 4px;
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink);
  transition: opacity 160ms ease, transform 160ms ease;
}
.btn:hover { opacity: 0.86; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--hairline); }
.btn--ghost:hover { border-color: var(--ink); opacity: 1; }
.band--inverse .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.band--inverse .btn--ghost { background: transparent; color: var(--on-inverse); border-color: var(--hairline-inverse); }
.band--inverse .btn--ghost:hover { border-color: var(--on-inverse); }

/* ---------- Landing hero stage (full-viewport: header + hero + footer = 100vh) ----------
   The landing carries exactly one screen: no scroll. The hero fills the space the
   header and footer leave behind. Built on flexbox with explicit column widths (NOT
   grid fr/minmax and NOT aspect-ratio) so it renders identically across engines:
   the prior grid+aspect-ratio version collapsed to a single column with a zero-height
   canvas box in browsers that mishandle those features. Other pages are unaffected. */
.hero-stage {
  /* fill the viewport minus the header (footer is auto-height, see flex column) */
  min-height: calc(100vh - var(--header-h));
  display: flex; align-items: center;
  width: 100%;
}
.hero-stage__inner {
  width: 100%; max-width: var(--maxw); margin: 0 auto;
  padding-inline: var(--pad-x);
  display: flex; flex-direction: row; align-items: center;
  gap: clamp(24px, 5vw, 72px);
}
/* LEFT column = animation. RIGHT column = text. Source order has text first for
   accessibility/SEO; `order` flips them visually so the animation is on the left. */
.hero-stage__side { order: 1; }
.hero-stage__text { order: 2; }

/* Text column: centered within its half and internally text-centered. */
.hero-stage__text {
  flex: 1 1 50%; min-width: 0;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.hero-stage__title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(40px, 6.2vw, 68px); line-height: 1.04; letter-spacing: -0.02em;
  margin: 0; max-width: 16ch;
}
.hero-stage__lede {
  font-family: var(--serif);
  font-size: clamp(18px, 2.2vw, 22px); line-height: 1.5; color: var(--ink-soft);
  margin: var(--s5) auto 0; max-width: 36ch;
}
/* Animation side: the plus-glyph constellation canvas sits here. Explicit height
   (square, capped by viewport) instead of aspect-ratio so the box never collapses
   to zero and the canvas JS always measures a real size. */
.hero-stage__side {
  position: relative;
  flex: 1 1 50%; min-width: 0;
  height: min(60vh, 520px);
}
.hero-stage__side #plus-field {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; pointer-events: none;
}

/* ---------- Legal / document pages ---------- */
.doc { padding-block: clamp(56px, 9vw, 104px); }
.doc .prose h2 { font-size: clamp(24px, 3.2vw, 32px); margin-top: var(--s7); margin-bottom: var(--s4); }
.doc .prose h2:first-of-type { margin-top: var(--s5); }
.doc .prose h3 { font-family: var(--sans); font-weight: 600; font-size: 18px; letter-spacing: 0; margin-top: var(--s6); margin-bottom: var(--s3); }
.doc .prose p, .doc .prose li { font-family: var(--serif); font-size: 18px; line-height: 1.7; color: var(--ink-soft); }
.doc .prose ul { padding-left: 1.25em; margin: 0 0 var(--s5); }
.doc .prose li { margin-bottom: var(--s2); }
.doc .prose strong { color: var(--ink); font-weight: 600; }
.doc .prose a { color: var(--ink); text-underline-offset: 3px; }
.doc__meta { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-muted); margin-bottom: var(--s5); }

/* ---------- 404 ---------- */
.error-page { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.error-page .code { font-family: var(--mono); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--s4); }

/* ---------- Footer ---------- */
.site-footer { background: var(--paper-inverse); color: var(--on-inverse); padding-block: clamp(48px, 7vw, 80px); }
.site-footer__top { display: flex; flex-wrap: wrap; gap: var(--s6); justify-content: space-between; align-items: flex-start; }
.site-footer__brand { display: flex; align-items: center; gap: var(--s3); }
.site-footer__brand svg { height: 42px; width: auto; }
.site-footer__brand-name { font-family: var(--wordmark); font-weight: 700; font-size: 17px; text-transform: uppercase; letter-spacing: 0.06em; }
.site-footer__links { display: flex; gap: var(--s5); }
.site-footer__links a { font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--on-inverse); text-decoration: none; opacity: 0.9; }
.site-footer__links a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.site-footer__rule { border: 0; border-top: 1px solid var(--hairline-inverse); margin: var(--s6) 0 var(--s5); }
.site-footer__imprint {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: center;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.02em; color: var(--on-inverse-muted);
}
.site-footer__imprint .sep { opacity: 0.4; }
.site-footer__imprint a { color: var(--on-inverse-muted); text-decoration: none; }
.site-footer__imprint a:hover { color: var(--on-inverse); }

/* ---------- Landing: lock to one viewport, no scroll ----------
   A flex column at min 100vh — header (auto), hero (flex:1), footer (auto) —
   fills one screen: the hero grows to push the footer to the bottom edge with no
   dead white space, and if the imprint wraps the column simply grows past 100vh
   (graceful scroll) rather than clipping. Only the landing opts in. The header is
   NOT sticky on the landing so it counts as part of the single screen. */
.is-landing body, body.is-landing {
  min-height: 100vh;
  display: flex; flex-direction: column;
}
body.is-landing #main { flex: 1 1 auto; display: flex; min-height: 0; }
body.is-landing .hero-stage { flex: 1 1 auto; min-height: 0; width: 100%; }
body.is-landing .site-header { flex: 0 0 auto; position: static; }
body.is-landing .site-footer {
  flex: 0 0 auto;
  /* trim the legal-page footer padding so the imprint fits the landing screen */
  padding-block: clamp(20px, 3.2vw, 36px);
}

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
  /* Stack: animation ABOVE, text BELOW, both centered (spec: mobile < 768px). */
  .hero-stage__inner { flex-direction: column; gap: var(--s5); }
  .hero-stage__side { order: 1; flex: 0 0 auto; width: 100%; max-width: 320px; height: 34vh; }
  .hero-stage__text { order: 2; flex: 0 0 auto; width: 100%; }
  .hero-stage { padding-block: var(--s5); }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .site-nav { gap: 16px; }
  .site-nav .nav-secondary { display: none; }
  .site-footer__top { flex-direction: column; gap: var(--s5); }
}
/* Very short viewports (landscape phones): drop the animation so the text + CTA
   always clear the fold without a scrollbar. */
@media (max-height: 560px) {
  body.is-landing .hero-stage__side { display: none; }
  body.is-landing .hero-stage__inner { flex-direction: column; }
}

/* Skip link for accessibility */
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--paper); padding: 10px 16px; z-index: 100; }
.skip-link:focus { left: 8px; top: 8px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.band--inverse :focus-visible, .site-footer :focus-visible { outline-color: var(--paper); }