/* ============================================================
   Haitch Industries — the public link page.

   Colour is Escape Hatch's, lifted from escape-hatch-site's
   tokens/colors.css: the warm charcoal hull, amber hatch-light,
   coral warning glow. Type is Escape Hatch's too — Space Grotesk
   and Space Mono, self-hosted, no external font request.

   What is deliberately NOT borrowed: Senmoly Caligan, Escape
   Hatch's display face. That face IS the Escape Hatch wordmark,
   and Haitch Industries has a wordmark of its own — the yellow
   logo. Setting a second brand in the first brand's display type
   would read as the same company. So the logo does the talking
   here and everything around it is the grotesque.

   The logo's own yellow (#facc15) is a cooler, harder yellow than
   the brand amber (#efb06a) and they fight when adjacent, so the
   logo sits on its own with air around it and nothing amber
   touching it.
   ============================================================ */

/* ---- Type, self-hosted ---- */
@font-face { font-family:"Space Grotesk"; src:url("/assets/fonts/SpaceGrotesk-400.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Space Grotesk"; src:url("/assets/fonts/SpaceGrotesk-500.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Space Grotesk"; src:url("/assets/fonts/SpaceGrotesk-700.woff2") format("woff2"); font-weight:700; font-display:swap; }
@font-face { font-family:"Space Mono";    src:url("/assets/fonts/SpaceMono-400.woff2")    format("woff2"); font-weight:400; font-display:swap; }

:root {
  /* Escape Hatch hull + hatch-light, straight from the EH tokens */
  --ink-900:#1b1a18;
  --ink-800:#232220;
  --ink-700:#2c2a27;
  --ink-600:#38352f;
  --ink-300:#938c7f;
  --paper-000:#faf4e8;
  --amber-500:#efb06a;
  --amber-400:#f3c089;
  --coral-500:#f0623a;

  --surface-page:var(--ink-900);
  --surface-card:var(--ink-700);
  --text-strong:var(--paper-000);
  --text-body:#d8d0c2;
  --text-muted:var(--ink-300);
  --brand-primary:var(--amber-500);
  --focus-ring:var(--amber-400);

  --font-sans:"Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:"Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

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

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

body {
  margin:0;
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.5;
  color:var(--text-body);
  background:var(--surface-page);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* Two hatch-lights bleeding in from the corners, same trick the
     launcher uses, but amber rather than the logo yellow. */
  background-image:
    radial-gradient(900px 520px at 88% -12%, rgba(239,176,106,0.10), transparent 62%),
    radial-gradient(760px 480px at -12% 108%, rgba(240,98,58,0.07), transparent 60%);
  background-attachment:fixed;
}

.stage {
  max-width:600px;
  margin:0 auto;
  padding:
    calc(56px + env(safe-area-inset-top, 0px)) 20px
    calc(56px + env(safe-area-inset-bottom, 0px));
}

/* ---- Masthead ------------------------------------------------ */

.masthead { text-align:center; margin-bottom:44px; }

.mark {
  width:112px; height:112px;
  display:block; margin:0 auto 22px;
  border-radius:20px;
  /* No amber ring — the logo yellow and the brand amber clash at
     this size. A plain dark lift keeps them apart. */
  box-shadow:0 10px 34px rgba(0,0,0,0.55);
}

.tagline {
  margin:0;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.26em;
  text-transform:uppercase;
  color:var(--brand-primary);
}

/* ---- Section kickers ----------------------------------------- */

.kicker {
  margin:0 0 14px;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:400;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:var(--text-muted);
}

/* ---- The links ----------------------------------------------- */

.stack { display:flex; flex-direction:column; gap:12px; }

.link {
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px 20px;
  background:var(--surface-card);
  border:1px solid var(--ink-600);
  border-radius:14px;
  text-decoration:none;
  color:inherit;
  transition:border-color 160ms ease, transform 160ms ease, background 160ms ease;
}

.link:hover,
.link:focus-visible {
  border-color:var(--brand-primary);
  background:var(--ink-800);
  transform:translateY(-2px);
}

.link:focus-visible { outline:2px solid var(--focus-ring); outline-offset:3px; }

.link-body { display:flex; flex-direction:column; gap:3px; min-width:0; }

.link-name {
  font-size:17px;
  font-weight:700;
  letter-spacing:-0.01em;
  color:var(--text-strong);
}

.link-note {
  font-size:13.5px;
  line-height:1.4;
  color:var(--text-muted);
  text-wrap:pretty;
}

.chev {
  margin-left:auto;
  font-size:24px;
  line-height:1;
  color:var(--ink-600);
  transition:color 160ms ease, transform 160ms ease;
}

.link:hover .chev,
.link:focus-visible .chev { color:var(--brand-primary); transform:translateX(3px); }

/* The one show with a site of its own gets the coral edge. */
.link.feature { border-left:3px solid var(--coral-500); }

/* ---- Spotify ------------------------------------------------- */

.listen { margin-top:40px; }

.player {
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--ink-600);
  background:var(--ink-800);
  /* Spotify's own frame is dark; line-height:0 kills the inline gap. */
  line-height:0;
}

.player iframe { display:block; width:100%; border:0; }

/* ---- Footer -------------------------------------------------- */

.foot {
  margin-top:48px;
  padding-top:26px;
  border-top:1px solid var(--ink-600);
  text-align:center;
}

.social {
  list-style:none;
  margin:0 0 18px;
  padding:0;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
}

.social a {
  display:inline-block;
  padding:8px 16px;
  border:1px solid var(--ink-600);
  border-radius:999px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--text-muted);
  transition:color 160ms ease, border-color 160ms ease;
}

.social a:hover,
.social a:focus-visible { color:var(--brand-primary); border-color:var(--brand-primary); }
.social a:focus-visible { outline:2px solid var(--focus-ring); outline-offset:3px; }

.colophon {
  margin:0;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.1em;
  color:#6c665c;
}

/* ---- Narrow ---------------------------------------------------
   The layout is a single 600px column, so it mostly just works.
   These only soften the top padding and the mark on small phones. */
@media (max-width:420px) {
  .stage { padding-top:calc(40px + env(safe-area-inset-top, 0px)); }
  .mark  { width:96px; height:96px; }
  .link  { padding:16px 17px; }
}

@media (prefers-reduced-motion:reduce) {
  * { transition:none !important; }
}