/* e-Lainer -- the page at the root of the domain.
 *
 * Colours, the wordmark, the shapes and the outline star all come straight out
 * of the brand deck, so this page and the deck stay the same brand. The layout
 * does not: the deck is slides, and slides do not invite a scroll. This is
 * built the way the product page is -- sticky header, edge-to-edge hero, bands
 * that alternate -- so the two pages on this domain read as one site.
 *
 * Nothing is loaded from another host: no web font, no analytics, no CDN.
 */

:root {
  --purple: #5b5476;
  --cream: #f9efe3;
  --muted: rgba(249, 239, 227, 0.78);
  --edge: rgba(249, 239, 227, 0.26);
  --hair: rgba(249, 239, 227, 0.14);
  --tint: rgba(249, 239, 227, 0.06);
  --wide: 1180px;
  --pad: clamp(1.1rem, 3.2vw, 3rem);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Anchors land below the sticky header instead of under it. */
  scroll-padding-top: 84px;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--purple);
  color: var(--cream);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* --- header --------------------------------------------------------------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem var(--pad);
  border-bottom: 1px solid var(--hair);
  background: rgba(91, 84, 118, 0.86);
  backdrop-filter: blur(14px);
}

.site-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.logo {
  display: block;
  width: clamp(132px, 13vw, 168px);
  height: auto;
}

/* Centred in the header, not next to the wordmark. The nav takes the whole
   remaining row so the links sit in the middle of it; a spacer opposite the
   wordmark keeps them centred against the page rather than against the space
   the wordmark leaves. */
.site-nav {
  display: flex;
  flex: 1 1 auto;
  gap: 1.4rem;
  justify-content: center;
}

.site-head::after {
  content: "";
  width: clamp(132px, 13vw, 168px);
}

.site-nav a {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--cream);
}

/* --- shared --------------------------------------------------------------- */

.eyebrow {
  margin: 0 0 0.5rem;
  color: rgba(249, 239, 227, 0.62);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: clamp(2rem, 4.8vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 700;
}

h2 {
  margin: 0;
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.lead {
  margin: clamp(12px, 1.8vw, 20px) 0 0;
  max-width: 46ch;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.6;
  color: var(--muted);
}

.sub {
  margin: 0.6rem 0 0;
  font-size: 1.02rem;
  font-weight: 600;
  color: rgba(249, 239, 227, 0.86);
}

.actions {
  margin-top: clamp(20px, 2.6vw, 32px);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.button {
  display: inline-block;
  padding: 0.85em 1.6em;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}

.button:hover {
  transform: translateY(-1px);
}

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

.button-primary {
  background: var(--cream);
  color: var(--purple);
}

.button-primary:hover {
  background: #fff;
}

.button-secondary {
  border-color: var(--edge);
  color: var(--cream);
}

.button-secondary:hover {
  border-color: var(--cream);
  background: rgba(249, 239, 227, 0.08);
}

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

/* No min-height on purpose. A hero that fills the viewport puts a clean edge
   at the fold and reads as the whole page; letting it end early means the next
   band is already showing when the page loads. */
.hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: clamp(1.5rem, 5vw, 4rem);
  padding: clamp(2.2rem, 5vw, 4.2rem) var(--pad) clamp(1.5rem, 3vw, 2.4rem);
}

.hero > * {
  position: relative;
}

.hero-copy {
  justify-self: end;
  width: min(640px, 100%);
}

/* 404 has no portrait beside it, so the copy keeps the left edge. */
.hero-solo {
  grid-template-columns: 1fr;
  min-height: 46vh;
  align-content: center;
}

.hero-solo .hero-copy {
  justify-self: start;
}

.hero-art {
  justify-self: start;
  width: min(320px, 100%);
  /* Not flex's default `stretch`: that overrides the portrait's height:auto
     and squashes it to whatever height the row leaves, which is what it did
     once the hero stacked on a phone. */
  display: flex;
  align-items: center;
  justify-content: center;
}

.portrait {
  width: 100%;
  height: auto;
  display: block;
  /* The cutout is cropped square at the waist, so it ends on a hard horizontal
     line. In the deck that line lands on the panel edge; here it floats, and
     the cut reads as a mistake unless it is faded out. */
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
}

.backdrop {
  position: absolute;
  top: -30%;
  right: -8%;
  width: min(720px, 70vw);
  opacity: 0.8;
  pointer-events: none;
  user-select: none;
}

/* The explicit invitation: a target to click as well as a hint to scroll. */
.scroll-cue {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0 var(--pad) clamp(1.6rem, 3.5vw, 2.6rem);
  color: rgba(249, 239, 227, 0.6);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}

.scroll-cue:hover {
  color: var(--cream);
}

.scroll-cue svg {
  animation: nudge 1.9s ease-in-out infinite;
}

@keyframes nudge {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(4px); }
}

/* --- bands ---------------------------------------------------------------- */

.band {
  padding: clamp(2.6rem, 5.5vw, 4.6rem) var(--pad);
}

.band-tint {
  background: var(--tint);
  border-block: 1px solid var(--hair);
}

.band-inner {
  width: min(var(--wide), 100%);
  margin-inline: auto;
}

.columns {
  margin-top: clamp(1.6rem, 3vw, 2.6rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 40px);
}

.columns p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.62;
  color: var(--muted);
}

.columns p + p {
  border-left: 1px solid var(--hair);
  padding-left: clamp(20px, 3vw, 40px);
}

.team {
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 300px));
  gap: clamp(16px, 2.4vw, 26px);
}

.member {
  background: var(--tint);
  border: 1px solid var(--hair);
  border-radius: 18px;
  overflow: hidden;
  padding-bottom: 1.1rem;
  text-align: center;
}

.member img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

.member-name {
  margin-top: 1rem;
  padding: 0 1rem;
  font-weight: 700;
}

.member-role {
  margin: 0.35rem 0 0;
  padding: 0 1rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: rgba(249, 239, 227, 0.72);
}

.closing .lead {
  max-width: 40ch;
}

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

.site-foot {
  padding: clamp(1.6rem, 3vw, 2.4rem) var(--pad) clamp(2rem, 3.5vw, 3rem);
  border-top: 1px solid var(--hair);
}

.foot-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.2rem;
  flex-wrap: wrap;
}

.shapes {
  display: flex;
  align-items: flex-end;
  gap: clamp(10px, 1.4vw, 18px);
}

.shapes img {
  height: clamp(26px, 3.2vw, 42px);
  width: auto;
}

.contact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.95rem;
}

.contact a,
.foot-back {
  color: var(--muted);
  text-decoration: none;
}

.contact a:hover,
.foot-back:hover {
  color: var(--cream);
  text-decoration: underline;
}

.foot-back {
  font-size: 0.9rem;
}

/* --- narrow --------------------------------------------------------------- */

@media (max-width: 860px) {
  .columns {
    grid-template-columns: 1fr;
  }

  /* Stacked, the hairline belongs above each point rather than beside it. */
  .columns p + p {
    border-left: 0;
    border-top: 1px solid var(--hair);
    padding-left: 0;
    padding-top: clamp(20px, 3vw, 40px);
  }
}

@media (max-width: 760px) {
  /* The nav links are the first thing to go: the header has to keep the logo
     and the one button that leads somewhere, and the sections are a short
     scroll away regardless. */
  .site-nav,
  .site-head::after {
    display: none;
  }

  /* The headline comes first. Putting the portrait above it looks like the
     deck's cover, but it pushes the buttons off the first screen, and the
     buttons are what this page is asking for. */
  .hero {
    grid-template-columns: 1fr;
    padding-top: clamp(1.8rem, 5vw, 3rem);
  }

  .hero-copy,
  .hero-art {
    justify-self: center;
  }

  .hero-art {
    width: min(210px, 52vw);
  }

  .team {
    grid-template-columns: 1fr;
  }
}

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

  .button {
    transition: none;
  }

  .button:hover {
    transform: none;
  }

  .scroll-cue svg {
    animation: none;
  }
}