/* ============================================================
   frgmchine — single page site
   Built from Claude Design "Frgmchine Site.dc.html", direction 4a
   ("Horizon, combined"). Values are transcribed from that frame;
   see HANDOVER.md for the token table and for the list of things
   that were interpreted or changed rather than copied.
   ============================================================ */

/* ---------- 1. Tokens ------------------------------------- */

:root {
  /* Base + layered surfaces */
  --base:          #0A1016;   /* page / hero / about / played-at / contact */
  --surface-music: #0F1922;   /* the one lifted band, behind the gradient */
  --scrim:          10, 16, 22;  /* --base as an rgb triplet, for overlays */

  /* Sunset accents */
  --teal:  #17B2A6;
  --coral: #F0806A;
  --amber: #F5A15A;
  --teal-rgb:  23, 178, 166;
  --coral-rgb: 240, 128, 106;
  --amber-rgb: 245, 161,  90;

  /* Ink — one warm off-white, stepped down by alpha. Never a grey hex. */
  --ink-rgb:  241, 236, 228;
  --ink:      rgb(var(--ink-rgb));            /* #F1ECE4  headings, hero, venues */
  --ink-75:   rgba(var(--ink-rgb), .75);      /* hero tagline */
  --ink-72:   rgba(var(--ink-rgb), .72);      /* social links */
  --ink-62:   rgba(var(--ink-rgb), .62);      /* about body copy */
  --ink-60:   rgba(var(--ink-rgb), .60);      /* release subtitle */
  --ink-55:   rgba(var(--ink-rgb), .55);      /* venue meta */
  --ink-50:   rgba(var(--ink-rgb), .50);      /* nav links */
  --ink-45:   rgba(var(--ink-rgb), .45);      /* hero corner labels, booking eyebrow */
  --ink-40:   rgba(var(--ink-rgb), .40);      /* played-at note */
  --ink-35:   rgba(var(--ink-rgb), .35);      /* button border */
  --ink-32:   rgba(var(--ink-rgb), .32);      /* footer */
  --ink-30:   rgba(var(--ink-rgb), .30);      /* scroll rule */
  --ink-12:   rgba(var(--ink-rgb), .12);      /* hairline between venues */

  /* Type */
  --font: 'Afacad Flux', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --w:    400;              /* 4a uses exactly one weight */

  --fs-hero:     88px;
  --fs-email:    38px;
  --fs-release:  32px;
  --fs-venue:    28px;
  --fs-lead:     27px;
  --fs-body:     17px;      /* also the nav wordmark */
  --fs-tagline:  16px;
  --fs-meta:     15px;
  --fs-social:   14px;
  --fs-micro:    13px;      /* eyebrows, nav links, buttons, footer */

  --ls-eyebrow: .28em;
  --ls-tagline: .24em;
  --ls-nav:     .18em;      /* also social links */
  --ls-button:  .16em;      /* also hero corner labels */
  --ls-meta:    .12em;
  --ls-footer:  .10em;
  --ls-word:    .06em;      /* both wordmarks */

  --lh-body:    1.85;
  --lh-lead:    1.5;

  /* Spacing — a 4px grid, used at these steps only */
  --s-1:   8px;
  --s-2:  10px;
  --s-3:  18px;
  --s-4:  20px;
  --s-5:  22px;
  --s-6:  26px;
  --s-7:  28px;
  --s-8:  32px;
  --s-9:  34px;
  --s-10: 40px;
  --s-11: 48px;
  --s-13: 64px;
  --s-14: 80px;

  /* Section vertical padding. Sections are full-height and centre their
     own content, so this only has to stop copy touching the edges on a
     short viewport — hence it shrinks with vh instead of holding 130px. */
  --pad-y-a: clamp(72px, 11vh, 130px);   /* about, played-at */
  --pad-y-b: clamp(64px,  9vh, 110px);   /* music, contact */

  --gutter:    48px;
  --maxw:    1180px;    /* full content frame */
  --maxw-prose: 660px;  /* about column */

  /* Everything is square. No radius anywhere in 4a. */
  --radius: 0;

  /* Motion */
  --t-breathe-hero-a: 16s;
  --t-breathe-hero-b: 20s;
  --t-hover:         .25s;
}

/* ---------- 2. Reset -------------------------------------- */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--base);
  color: var(--ink);
  font-family: var(--font);
  font-weight: var(--w);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 1px solid var(--teal);
  outline-offset: 4px;
}

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
  left: var(--gutter);
  top: 12px;
  z-index: 10;
  padding: 8px 14px;
  background: var(--base);
  border: 1px solid var(--teal);
}

/* ---------- 3. Shared primitives -------------------------- */

/* Every section below the masthead fills at least one screen and
   centres its own content vertically. */
.section {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-inline: var(--gutter);
  overflow: hidden;
}

.eyebrow {
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--teal);
}
.eyebrow--muted { color: var(--ink-45); }

/* Edge-anchored light. Never a colour block — always a bloom
   bleeding in from an edge, sized in % so it scales with the viewport. */
.bloom {
  position: absolute;
  pointer-events: none;
}

/* A 1px sunset hairline across the top of a band. This is what
   divides played-at from contact. */
.edge-rule {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  pointer-events: none;
}

/* ---------- 4. Masthead: nav + hero = one screen ---------- */

.masthead {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

.nav {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-6);
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--s-6) var(--gutter);
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.nav__cube { height: 30px; width: auto; }

.nav__wordmark {
  font-size: var(--fs-body);
  letter-spacing: var(--ls-word);
}

.nav__links {
  display: flex;
  gap: var(--s-9);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--ink-50);
}

.nav__links a { transition: color var(--t-hover) ease; }
.nav__links a:hover,
.nav__links a[aria-current="true"] { color: var(--ink); }

/* ---------- 5. Hero --------------------------------------- */

/* Takes whatever the nav leaves, so masthead lands on exactly 100svh. */
.hero {
  position: relative;
  flex: 1 1 auto;
  min-height: 420px;
  overflow: hidden;
}

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 64%;
  opacity: .72;
}

/* Vertical scrim: dark at the top so the nav clears, open through the
   middle so the cover art reads, dark again at the foot so type sits. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(var(--scrim), .70)   0%,
    rgba(var(--scrim), .10)  40%,
    rgba(var(--scrim), .95) 100%
  );
}

.bloom--hero-teal {
  left: -10%; right: -10%; bottom: -24%; height: 64%;
  background: radial-gradient(52% 100% at 32% 100%, rgba(var(--teal-rgb), .26), transparent 70%);
  filter: blur(10px);
  animation: breathe var(--t-breathe-hero-a) ease-in-out infinite;
}
.bloom--hero-coral {
  left: -10%; right: -10%; bottom: -26%; height: 68%;
  background: radial-gradient(60% 100% at 70% 100%, rgba(var(--coral-rgb), .30), transparent 72%);
  filter: blur(10px);
  animation: breathe var(--t-breathe-hero-b) ease-in-out infinite;
}

.hero__center {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  width: 100%;
  padding: 0 var(--gutter);
  text-align: center;
}

.hero__wordmark {
  font-size: var(--fs-hero);
  font-weight: var(--w);
  letter-spacing: var(--ls-word);
  line-height: 1;
  text-shadow: 0 2px 40px rgba(var(--scrim), .5);
}

.hero__tagline {
  margin-top: var(--s-8);
  font-size: var(--fs-tagline);
  letter-spacing: var(--ls-tagline);
  text-transform: uppercase;
  color: var(--ink-75);
}

.hero__corner {
  position: absolute;
  bottom: var(--s-9);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  color: var(--ink-45);
}
.hero__corner--left  { left: var(--gutter); }
.hero__corner--right {
  right: var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.hero__rule {
  width: 44px;
  height: 1px;
  background: var(--ink-30);
}

/* ---------- 6. About -------------------------------------- */

.about {
  align-items: center;
  padding-block: var(--pad-y-a);
}

.bloom--about {
  left: -14%; top: -40%; width: 58%; height: 180%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(var(--teal-rgb), .10), transparent 70%);
}

.about__col {
  position: relative;
  width: 100%;
  max-width: var(--maxw-prose);
}

.about .eyebrow { margin-bottom: var(--s-9); }

.about__lead {
  margin-bottom: var(--s-6);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  text-wrap: pretty;
}

.about__body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-62);
  text-wrap: pretty;
}
.about__body + .about__body { margin-top: var(--s-5); }

/* ---------- 7. Music -------------------------------------- */

.music {
  background: var(--surface-music);
  padding-block: var(--pad-y-b);
}

.bloom--music-teal,
.bloom--music-coral,
.bloom--music-amber { inset: 0; }

.bloom--music-teal  { background: radial-gradient(80% 120% at 12%   0%, rgba(var(--teal-rgb),  .26), transparent 62%); }
.bloom--music-coral { background: radial-gradient(90% 130% at 88% 100%, rgba(var(--coral-rgb), .32), transparent 64%); }
.bloom--music-amber { background: radial-gradient(60%  90% at 58% 110%, rgba(var(--amber-rgb), .24), transparent 68%); }

.edge-rule--music {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--teal-rgb),  .6),
    rgba(var(--coral-rgb), .7),
    rgba(var(--amber-rgb), .6),
    transparent
  );
}

.music__grid {
  position: relative;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: var(--s-13);
  align-items: start;
}

.music .eyebrow { margin-bottom: var(--s-7); }

/* Cover + the offset sunset card behind it. */
.cover {
  position: relative;
  width: 320px;
  max-width: 100%;
  aspect-ratio: 1;
}
.cover__card {
  position: absolute;
  inset: 0;
  transform: translate(14px, 14px);
  background: linear-gradient(135deg, var(--teal), var(--coral) 55%, var(--amber));
  opacity: .5;
}
.cover__art {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.music__title {
  margin-top: var(--s-6);
  font-size: var(--fs-release);
  font-weight: var(--w);
}

.music__sub {
  margin-top: var(--s-1);
  font-size: var(--fs-meta);
  color: var(--ink-60);
}

.btn-row {
  margin-top: var(--s-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.btn {
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  border: 1px solid var(--ink-35);
  border-radius: var(--radius);
  padding: 9px 16px;
  transition: border-color var(--t-hover) ease, color var(--t-hover) ease;
}
.btn:hover {
  border-color: var(--coral);
  color: var(--coral);
}

/* One player, so it centres against the cover column rather than
   hanging from the top. */
.music__embeds {
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

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

/* ---------- 8. Played at ---------------------------------- */

.played { padding-block: var(--pad-y-a); }

.played__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
}

.played .eyebrow { margin-bottom: var(--s-10); }

.played__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
  padding: var(--s-6) 0;
  border-bottom: 1px solid var(--ink-12);
}
.played__row:first-child { padding-top: 0; }

.played__venue { font-size: var(--fs-venue); }

.played__meta {
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--ink-55);
  text-align: right;
}

.played__note {
  margin-top: var(--s-7);
  font-size: var(--fs-meta);
  color: var(--ink-40);
}

/* ---------- 9. Contact ------------------------------------ */

.contact { padding-block: var(--pad-y-b); }

.bloom--contact-teal {
  left: -6%; right: -6%; bottom: -60%; height: 150%;
  background: radial-gradient(50% 100% at 24% 100%, rgba(var(--teal-rgb), .20), transparent 70%);
}
.bloom--contact-coral {
  left: -6%; right: -6%; bottom: -70%; height: 160%;
  background: radial-gradient(60% 100% at 72% 100%, rgba(var(--coral-rgb), .24), transparent 72%);
}

.edge-rule--contact {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--teal-rgb),  .5) 20%,
    rgba(var(--coral-rgb), .6) 55%,
    rgba(var(--amber-rgb), .5) 80%,
    transparent
  );
}

.contact__inner {
  position: relative;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
}

.contact__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s-10);
  flex-wrap: wrap;
}

.contact .eyebrow { margin-bottom: var(--s-5); }

.contact__email {
  font-size: var(--fs-email);
  overflow-wrap: anywhere;
}
.contact__email a { transition: color var(--t-hover) ease; }
.contact__email a:hover { color: var(--amber); }

.contact__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-7);
  font-size: var(--fs-social);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--ink-72);
}
.contact__social a { transition: color var(--t-hover) ease; }
.contact__social a:hover { color: var(--ink); }

.contact__footer {
  margin-top: var(--s-14);
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-footer);
  color: var(--ink-32);
}

/* ---------- 9b. 404 --------------------------------------- */

/* Reuses the masthead and hero shells, minus the cover art — just the
   base with the two blooms breathing over it. */

.notfound__code { margin-bottom: var(--s-5); }

.notfound__title {
  font-size: clamp(30px, 5vw, 52px);
  font-weight: var(--w);
  letter-spacing: var(--ls-word);
  line-height: 1.15;
  text-wrap: pretty;
}

.notfound__back {
  margin-top: var(--s-8);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  color: var(--ink-45);
}
.notfound__back a { transition: color var(--t-hover) ease; }
.notfound__back a:hover { color: var(--ink); }

/* ---------- 10. Motion ------------------------------------ */

@keyframes breathe {
  0%, 100% { opacity: .35; }
  50%      { opacity: .70; }
}

/* ---------- 11. Responsive -------------------------------- */

/* Tablet: the music band loses its two-column split. */
@media (max-width: 900px) {
  :root {
    --gutter: 32px;
    --fs-hero:  clamp(46px, 9vw, 72px);
    --fs-email: clamp(26px, 4.4vw, 38px);
    --fs-lead:  24px;
    --fs-venue: 24px;
  }

  .music__grid {
    grid-template-columns: 1fr;
    gap: var(--s-10);
    justify-items: start;
  }
  .music__embeds { align-self: stretch; width: 100%; }
}

/* Phone: nav in two centred rows, everything stacks. */
@media (max-width: 640px) {
  :root {
    --gutter: 22px;
    --fs-body:    16px;
    --fs-release: 28px;
    --fs-venue:   22px;
    --fs-tagline: 12px;
    --ls-tagline: .18em;
  }

  .nav {
    flex-direction: column;
    gap: var(--s-3);
    padding-bottom: var(--s-4);
  }
  .nav__links {
    gap: var(--s-4);
    justify-content: center;
    flex-wrap: wrap;
  }

  .hero { min-height: 380px; }
  .hero__center { top: 48%; }
  .hero__wordmark { text-shadow: 0 2px 24px rgba(var(--scrim), .6); }

  /* One corner label only — "scroll" is redundant on touch. */
  .hero__corner--right { display: none; }
  .hero__corner--left  { right: var(--gutter); text-align: center; }

  .cover       { width: 100%; }
  .cover__card { transform: translate(10px, 10px); }

  .played__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .played__meta { text-align: left; }

  .contact__row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-8);
  }
  .contact__social { gap: var(--s-4) var(--s-5); }
  .contact__footer {
    margin-top: var(--s-11);
    flex-direction: column;
    gap: 6px;
  }
}

/* Short viewports (landscape phones, small laptops): stop forcing a
   full screen per section, or the copy gets squeezed against the edges. */
@media (max-height: 620px) {
  .masthead, .section { min-height: 0; }
  .hero { min-height: 420px; }
}

/* ---------- 12. Reduced motion ---------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* Hold the two breathing blooms at their mid-point rather than their
     trough, so the hero keeps its light. The static blooms elsewhere
     are untouched and keep their own opacity. */
  .bloom--hero-teal,
  .bloom--hero-coral {
    animation: none !important;
    opacity: .7;
  }

  *, *::before, *::after {
    transition-duration: .01ms !important;
  }
}