/* HEADCASE · headcase.app
   ------------------------------------------------------------------
   The palette and the background wash are taken from the app's own
   design system (Headcase/DesignSystem/HeadcaseColors.swift) rather
   than picked again here, so the site and the app read as one
   product. The radial gradient below is the same six stops, from the
   same top-left origin, that HC.Background draws.

   No external request of any kind: no font CDN, no analytics, no
   icon set, no framework. Everything this page needs is served from
   this origin. On /connect/* that is a security property and not
   only a performance one - an invitation token sits in the address
   bar, and a third-party request made from that page would carry it
   in a Referer header.
   ------------------------------------------------------------------ */

@font-face {
  font-family: "Headcase Display";
  src: url("fonts/archivo-black.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: block;
}
@font-face {
  font-family: "Headcase Sans";
  src: url("fonts/inter-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Headcase Sans";
  src: url("fonts/inter-semibold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Headcase Mono";
  src: url("fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  color-scheme: dark;

  --ink:    #020B09;
  --text:   #E9F5F0;
  --sub:    #9CC2B7;
  --dim:    #7BA093;
  --line:   #1F443C;
  --card:   #0A211D;
  --neon:   #DFFF00;
  --on-neon:#041412;
  --accent: #3FD3B4;

  --sans: "Headcase Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, Helvetica, Arial, sans-serif;
  --display: "Headcase Display", var(--sans);
  --mono: "Headcase Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --gutter: clamp(20px, 5vw, 48px);
  --measure: 68rem;
}

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

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font: 400 clamp(1.0625rem, 0.4vw + 1rem, 1.1875rem)/1.6 var(--sans);
  letter-spacing: -0.008em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* The app's wash. Fixed, so the page scrolls over a still ground. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(120vmax 120vmax at -4% -6%,
      #12463C 0%, #0E3730 18%, #0A2A24 34%,
      #061C17 54%, #02100C 74%, #000 100%);
}

/* ---------------------------------------------------------------- *
 * primitives
 * ---------------------------------------------------------------- */

.wrap { width: 100%; max-width: var(--measure); margin-inline: auto;
        padding-inline: var(--gutter); }

a { color: inherit; }

/* The masthead is sticky, so every anchor target has to clear it or
   the heading it points at lands underneath the bar. */
:target, #why, #connections { scroll-margin-top: 80px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--neon);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--neon); color: var(--on-neon);
  padding: 12px 18px; font-weight: 600; z-index: 10;
  border-radius: 0 0 10px 0;
}
.skip:focus { left: 0; }

.eyebrow {
  font: 400 0.6875rem/1 var(--mono);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.25rem;
}

.lede { color: var(--sub); max-width: 54ch; margin: 0;
        font-size: 1.0625rem; text-wrap: pretty; }

/* ---------------------------------------------------------------- *
 * the brand wash - one oversized mark, behind the content
 * ----------------------------------------------------------------
 * The real mark, knocked out of its square backdrop so it composites
 * on the gradient with no box, drawn very large and very faint. It is
 * a background, so it is a pseudo-element rather than an <img>: no
 * extra DOM, nothing for a screen reader to announce, and - with
 * `overflow: hidden` on the surface - no way for a shape that bleeds
 * off the edge to produce a horizontal scrollbar.
 *
 * `isolation: isolate` is load-bearing. Without it, a `z-index: -1`
 * pseudo-element joins the ROOT stacking context and paints behind
 * `body::before`, which is the page's gradient - so the mark would
 * vanish rather than sit under the text.
 *
 * Every surface tunes the same two layers through variables, so the
 * hero, the invitation page and the closing panel cannot drift into
 * three different treatments.
 * ---------------------------------------------------------------- */

.brandwash {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  --mark-width: min(54vw, 580px);
  --mark-right: -9vw;
  --mark-top: 50%;
  --mark-opacity: .085;
  --glow-width: min(72vw, 780px);
  --glow-right: -16vw;
  --glow-strength: .15;
}

/* Atmosphere first: a soft teal bloom so the mark reads as lit rather
   than pasted on. */
.brandwash::before {
  content: "";
  position: absolute;
  z-index: -2;
  right: var(--glow-right);
  top: var(--mark-top);
  transform: translateY(-50%);
  width: var(--glow-width);
  aspect-ratio: 1;
  background: radial-gradient(circle,
    rgba(63, 211, 180, var(--glow-strength)) 0%,
    rgba(63, 211, 180, calc(var(--glow-strength) * .35)) 40%,
    transparent 68%);
  pointer-events: none;
}

.brandwash::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: var(--mark-right);
  top: var(--mark-top);
  transform: translateY(-50%);
  width: var(--mark-width);
  aspect-ratio: 498 / 631;
  background: url("brand/headcase-mark.png") center / contain no-repeat;
  opacity: var(--mark-opacity);
  pointer-events: none;
}

/* The hero carries the full treatment. */
.hero { --mark-opacity: .09; }

/* The closing panel gets a quieter one from the other side, so the
   foot of a long page is still signed. */
.note {
  --mark-width: min(46vw, 440px);
  --mark-right: auto;
  --mark-opacity: .05;
  --glow-strength: .07;
  --glow-right: auto;
}
.note::after  { right: auto; left: -14vw; }
.note::before { right: auto; left: -20vw; }

/* The invitation page: centred behind the card, fainter still,
   because a token has to stay the most legible thing on the page. */
.invite main {
  --mark-width: min(70vw, 520px);
  --mark-right: -14vw;
  --mark-opacity: .07;
  --glow-strength: .1;
}

@media (max-width: 52rem) {
  .brandwash {
    --mark-width: min(86vw, 420px);
    --mark-right: -26vw;
    --mark-top: 46%;
    --mark-opacity: .06;
    --glow-width: min(110vw, 540px);
    --glow-right: -34vw;
  }
  /* A phone hero has no empty column to put the mark in, so it sits
     behind the words. At this opacity it is texture rather than a
     letterform competing with the headline: ivory at 4.5% over the
     wash moves the ground by about 10 of 255, and the body text's
     contrast ratio goes from 15.6:1 to 15.0:1. */
  .hero { --mark-opacity: .045; }
  .note { --mark-opacity: .035; }
  .note::after  { left: -34vw; }
  .note::before { left: -42vw; }
  .invite main { --mark-opacity: .055; --mark-right: -22vw; }
}

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

.masthead {
  position: sticky; top: 0; z-index: 5;
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  background: color-mix(in srgb, var(--ink) 62%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .masthead { background: rgba(2, 11, 9, 0.72); }
}

.masthead .wrap {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 60px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font: 400 1.0625rem/1 var(--display);
  letter-spacing: -0.02em;
  text-decoration: none;
  margin-right: auto;
  padding: 6px 0;
}

/* The mark sits beside the name rather than instead of it, and is
   `alt=""` because the name is already there in text - a second
   reading of "Headcase" is noise to a screen reader, not access. */
.wordmark img {
  display: block;
  height: 1.3rem;
  width: auto;
}

.masthead nav { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem); }

.masthead nav a {
  font-size: 0.9375rem; color: var(--sub); text-decoration: none;
  padding: 6px 0;
}
.masthead nav a:hover { color: var(--text); }

.status {
  font: 400 0.625rem/1 var(--mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 11px;
  white-space: nowrap;
}

@media (max-width: 34rem) {
  .masthead nav a.hide-sm { display: none; }
}

/* ---------------------------------------------------------------- *
 * hero
 * ---------------------------------------------------------------- */

.hero { padding: clamp(5rem, 14vh, 9.5rem) 0 clamp(4rem, 10vh, 7rem); }

.hero h1 {
  font: 600 clamp(2.5rem, 7.4vw, 5rem)/0.99 var(--sans);
  letter-spacing: -0.038em;
  margin: 0 0 1.5rem;
  max-width: 19ch;
  text-wrap: balance;
}

.hero p {
  margin: 0 0 2.5rem;
  max-width: 40ch;
  color: var(--sub);
  font-size: clamp(1.125rem, 0.6vw + 1rem, 1.375rem);
  line-height: 1.5;
  text-wrap: pretty;
}

.actions { display: flex; flex-wrap: wrap; gap: 0.875rem 1.25rem; align-items: center; }

.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font: 600 1rem/1 var(--sans);
  text-decoration: none;
  padding: 1rem 1.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: transform 160ms ease, background-color 160ms ease,
              border-color 160ms ease, color 160ms ease;
}
.btn-primary { background: var(--neon); color: var(--on-neon); }
.btn-primary:hover { transform: translateY(-1px); }
.btn-ghost { color: var(--text); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn-primary:hover { transform: none; }
}

/* ---------------------------------------------------------------- *
 * narrative blocks - editorial, not cards
 * ---------------------------------------------------------------- */

.strip { border-top: 1px solid var(--line); }

.block { padding: clamp(3.5rem, 9vh, 6rem) 0; }
.block + .block { border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .block + .block { border-top-color: #163029; }
}

.block .wrap {
  display: grid;
  gap: clamp(1rem, 4vw, 4rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 52rem) {
  .block .wrap { grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); }
}

.block h2 {
  font: 600 clamp(1.625rem, 2.4vw, 2.125rem)/1.14 var(--sans);
  letter-spacing: -0.028em;
  margin: 0 0 1rem;
  max-width: 24ch;
  text-wrap: balance;
}

.block p {
  margin: 0 0 1rem; color: var(--sub);
  max-width: 54ch; text-wrap: pretty;
}
.block p:last-child { margin-bottom: 0; }

.block .index {
  font: 400 0.6875rem/1 var(--mono);
  letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--dim);
  padding-top: 0.55rem;
}

/* ---------------------------------------------------------------- *
 * connections - one unbroken rail, as the app's timeline draws it
 * ---------------------------------------------------------------- */

.connections { padding: clamp(4rem, 11vh, 7rem) 0; }

.connections h2 {
  font: 600 clamp(1.875rem, 3.6vw, 2.875rem)/1.08 var(--sans);
  letter-spacing: -0.032em;
  margin: 0 0 1.25rem; max-width: 22ch; text-wrap: balance;
}

.rail { list-style: none; margin: clamp(2.5rem, 6vh, 4rem) 0 0; padding: 0;
        position: relative; }
.rail::before {
  content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px;
  width: 1px; background: var(--line);
}

.rail li { position: relative; padding: 0 0 clamp(2rem, 4vh, 2.75rem) 2.75rem; }
.rail li:last-child { padding-bottom: 0; }
.rail li::before {
  content: ""; position: absolute; left: 3px; top: 0.45rem;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent);
}
.rail li:first-child::before { background: var(--neon); }

.rail h3 {
  font: 600 1.0625rem/1.3 var(--sans);
  letter-spacing: 0.01em;
  margin: 0 0 0.4rem;
}
.rail .step {
  font: 400 0.625rem/1 var(--mono);
  letter-spacing: 0.16em; color: var(--dim);
  display: block; margin: 0 0 0.5rem;
}
.rail p { margin: 0; color: var(--sub); max-width: 52ch; font-size: 1.0625rem;
          text-wrap: pretty; }

/* ---------------------------------------------------------------- *
 * privacy note
 * ---------------------------------------------------------------- */

.note { padding: clamp(3.5rem, 9vh, 6rem) 0; }
.note .panel {
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: color-mix(in srgb, var(--card) 70%, transparent);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .note .panel { background: rgba(10, 33, 29, 0.7); }
}
.note h2 {
  font: 600 clamp(1.375rem, 2vw, 1.75rem)/1.2 var(--sans);
  letter-spacing: -0.024em; margin: 0 0 1rem; max-width: 26ch;
  text-wrap: balance;
}
.note p { margin: 0 0 0.875rem; color: var(--sub); max-width: 58ch;
          text-wrap: pretty; }
.note p:last-child { margin-bottom: 0; }

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

.foot { border-top: 1px solid var(--line); padding: 2.5rem 0 3.5rem; }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem;
              align-items: baseline; }
.foot .mark {
  display: inline-flex; align-items: center; gap: .45rem;
  font: 400 0.9375rem/1 var(--display); letter-spacing: -0.02em;
}
.foot .mark img { display: block; height: 1.05rem; width: auto; opacity: .9; }
.foot p { margin: 0; color: var(--dim); font-size: 0.875rem; }
.foot .right { margin-left: auto; color: var(--dim); font-size: 0.8125rem; }

/* ---------------------------------------------------------------- *
 * reveal, scroll-driven where supported and absent everywhere else
 * ---------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .hero > .wrap > * { animation: rise 700ms cubic-bezier(.2,.7,.2,1) both; }
  .hero h1 { animation-delay: 60ms; }
  .hero p { animation-delay: 130ms; }
  .hero .actions { animation-delay: 200ms; }

  @supports (animation-timeline: view()) {
    .block .wrap, .rail li, .note .panel, .connections > .wrap > * {
      animation: rise 600ms cubic-bezier(.2,.7,.2,1) both;
      animation-timeline: view();
      animation-range: entry 5% cover 22%;
    }
  }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- *
 * /connect - the invitation fallback
 * ---------------------------------------------------------------- */

.invite { min-height: 100svh; display: flex; flex-direction: column; }
.invite main { flex: 1; display: flex; align-items: center;
               padding: clamp(3rem, 9vh, 6rem) 0; }
.invite .card { max-width: 34rem; }

.invite h1 {
  font: 600 clamp(1.875rem, 5.2vw, 2.625rem)/1.1 var(--sans);
  letter-spacing: -0.03em; margin: 0 0 1.125rem; text-wrap: balance;
}
.invite p { margin: 0 0 1.125rem; color: var(--sub); max-width: 46ch;
            text-wrap: pretty; }

.invite .actions { margin: 1.75rem 0 0; }

.codebox {
  margin: 1.75rem 0 0;
  border: 1px solid var(--line); border-radius: 16px;
  padding: 1.125rem 1.25rem;
  background: color-mix(in srgb, var(--card) 70%, transparent);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .codebox { background: rgba(10, 33, 29, 0.7); }
}
.codebox .eyebrow { margin-bottom: 0.75rem; }
.codebox code {
  display: block;
  font: 400 0.9375rem/1.7 var(--mono);
  letter-spacing: 0.02em;
  color: var(--text);
  word-break: break-all;
  margin: 0 0 1rem;
  -webkit-user-select: all; user-select: all;
}
.codebox button {
  font: 600 0.9375rem/1 var(--sans);
  background: transparent; color: var(--text);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 0.75rem 1.125rem; cursor: pointer;
}
.codebox button:hover { border-color: var(--accent); color: var(--accent); }
.codebox .said { margin: 0.75rem 0 0; font-size: 0.875rem; color: var(--accent); }

.caution { font-size: 0.9375rem; color: var(--dim); max-width: 46ch; }
.caution.spaced { margin-top: 1.75rem; }

[hidden] { display: none !important; }