/* Palette N3 "Ink and linen" (owner, 2026-10-10). Base nudged toward PlayBracket's
   tokens-v.css so the studio and its product read as one family. */
:root {
  --bg: #f7f3eb;
  --bg-sunk: #ece5d6;
  --ink: #14213d;
  --ink-muted: #5c574d;
  --line: #dad0bc;
  --primary: #14213d;
  --on-primary: #f7f3eb;
  --accent: #2f6f5e;
}

:root {
  --font: "Plus Jakarta Sans", system-ui, sans-serif;
  --max: 1160px;
  --gutter: clamp(16px, 4vw, 40px);
  --section-gap: clamp(72px, 8vw, 104px);
  /* Sections in main: space above the hairline that opens each one, then the section's padding. */
  --rule-gap: clamp(48px, 5vw, 64px);
  --section-pad: clamp(56px, 6vw, 72px);
  --header-h: 68px;
  /* Space between the sticky header and a section's first line after an anchor jump. */
  --jump-gap: 28px;
  color-scheme: light;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--primary);
  color: var(--on-primary);
  padding: 8px 14px;
  z-index: 10;
}

.skip-link:focus {
  left: 8px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}

.nowrap {
  white-space: nowrap;
}

.accent-text,
.amp {
  color: var(--accent);
}

/* ---- Header -------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.site-header.is-scrolled {
  border-bottom-color: var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 14px;
}

.logo {
  display: grid;
  text-decoration: none;
  line-height: 1.1;
}

.logo-name {
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}

.logo-brand {
  font-weight: 400;
  font-size: 0.95rem;
}

.logo-brand .amp {
  font-weight: 600;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.5vw, 32px);
  font-size: 0.95rem;
  font-weight: 500;
}

.site-nav a {
  text-decoration: none;
  color: var(--ink-muted);
}

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

.site-nav .nav-cta {
  color: var(--ink);
  border: 1.5px solid currentColor;
  border-radius: 999px;
  padding: 6px 16px;
}

/* ---- Hero ---------------------------------------------------------------- */

/* On a computer the opening fills the first screen under the menu, its content in the middle, so
   PlayBracket starts below the fold (owner). A phone keeps the usual top-down flow (below). */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100svh - var(--header-h));
  text-align: center;
  padding-block: 32px 64px;
}

.hero h1 {
  font-size: clamp(2rem, 4.6vw, 3.8rem);
  max-width: 17ch;
}

.lede {
  margin-top: 20px;
  max-width: 50ch;
  color: var(--ink-muted);
  font-size: 1.15rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.98rem;
  text-decoration: none;
  transition: transform 0.15s ease;
}

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

.btn-primary {
  background: var(--primary);
  color: var(--on-primary);
}

.btn-ghost {
  border: 1.5px solid var(--accent);
  color: var(--accent);
}

/* Motion: the hero settles in on load, each later block rises in once on scroll, the
   "in testing" dot pulses. Nothing moves under reduced motion. Reveal hides a block only when
   the script can show it again (html.js) and only on screen, so print and no-JS see everything.
   Reveal animates `translate`, hover animates `transform`, so the two never fight. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  .hero > * {
    animation: settle 0.8s cubic-bezier(0.2, 0.7, 0.1, 1) both;
  }

  .hero > :nth-child(2) { animation-delay: 0.12s; }
  .hero > :nth-child(3) { animation-delay: 0.24s; }

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

  .status-dot {
    animation: pulse 2.4s ease-out infinite;
  }

  @keyframes pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 45%, transparent); }
    70%, 100% { box-shadow: 0 0 0 9px transparent; }
  }
}

@media screen and (prefers-reduced-motion: no-preference) {
  .js .reveal:not(.is-visible) {
    opacity: 0;
  }

  .js .reveal.is-visible {
    animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.1, 1) both;
  }

  .js li.reveal:nth-child(2) { animation-delay: 0.08s; }
  .js li.reveal:nth-child(3) { animation-delay: 0.16s; }

  @keyframes rise {
    from { opacity: 0; translate: 0 20px; }
    to { opacity: 1; translate: none; }
  }
}

/* ---- Sections ------------------------------------------------------------- */

/* A hairline opens each section (owner, 2026-10-12: with one background and spacing alone the page
   read as one flat run). The footer carries the same rule. */
.section {
  margin-top: var(--rule-gap);
  padding-top: var(--section-pad);
  border-top: 1px solid var(--line);
  /* An anchor jump lands with the eyebrow just under the sticky header, not a whole section padding
     below it (negative on desktop, where the padding is taller than the header). */
  scroll-margin-top: calc(var(--header-h) + var(--jump-gap) - var(--section-pad));
}

/* The PlayBracket status rides next to the product name instead of taking its own line. */
.title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}

.title-row .eyebrow {
  margin-bottom: 0;
}

.section h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  max-width: 20ch;
}

.section-lede {
  margin-top: 16px;
  max-width: 54ch;
  color: var(--ink-muted);
  font-size: 1.125rem;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 18%, transparent);
}

.media-frame {
  position: relative;
  overflow: hidden;
  margin-top: 40px;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  background: var(--bg-sunk);
  border: 1px solid var(--line);
}

/* Wider screens: after a jump to PlayBracket the heading and the whole player fit on one screen
   (owner), so the frame's width follows the height left under the header, heading and lede.
   The floor keeps it usable on short landscape screens; fullscreen is in the player controls. */
@media (min-width: 601px) {
  .media-frame {
    --above-frame: 290px;
    width: min(100%, max(480px, (100svh - var(--above-frame)) * 16 / 9));
  }
}

.film {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A round button in the top-left corner: the poster's centre is the "next match" card and the
   phone stands left of it, so the corner is the only spot that stays empty at every frame width. */
.film-play {
  position: absolute;
  left: 12px;
  top: 12px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
  cursor: pointer;
  box-shadow: 0 10px 24px -12px rgb(20 33 61 / 0.6);
  transition: transform 0.15s ease;
}

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

.film-play[hidden] {
  display: none;
}

/* The circle stays small (owner); the tap target around it does not. */
.film-play::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
}

.film-play svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.features,
.pillars {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.features li {
  border-top: 2px solid var(--ink);
  padding-top: 20px;
  transition: border-color 0.2s ease;
}

.features li:hover {
  border-top-color: var(--accent);
}

.features h3,
.pillars h3 {
  font-size: 1.25rem;
  letter-spacing: -0.015em;
  margin-bottom: 10px;
}

.features p,
.pillars p {
  color: var(--ink-muted);
  font-size: 1rem;
}

.pillars li {
  background: var(--bg-sunk);
  border-radius: 18px;
  padding: 28px 26px;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pillars li {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .pillars li:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 30px -20px rgb(20 33 61 / 0.4);
  }
}

.about {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: start;
}

.prose {
  display: grid;
  gap: 18px;
  max-width: 58ch;
  font-size: 1.1rem;
}

.prose p:last-child {
  color: var(--ink-muted);
}

/* ---- Contact -------------------------------------------------------------- */

.contact-card {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: end;
  background: var(--primary);
  color: var(--on-primary);
  border-radius: 24px;
  padding: clamp(32px, 6vw, 64px);
}

.contact-card .eyebrow {
  color: var(--on-primary);
  opacity: 0.85;
}

.contact-card h2 {
  max-width: 16ch;
}

.contact-lede {
  margin-top: 16px;
  max-width: 44ch;
  opacity: 0.85;
}

.contact-actions {
  display: grid;
  gap: 12px;
  justify-items: start;
}

.contact-card .btn-primary {
  background: var(--on-primary);
  color: var(--primary);
}

.btn-lg {
  min-height: 56px;
  padding: 0 30px;
  font-size: 1.05rem;
}

.contact-email {
  font-weight: 600;
  text-underline-offset: 4px;
  overflow-wrap: anywhere;
}

.contact-meta {
  font-size: 0.92rem;
  opacity: 0.8;
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: var(--section-gap);
  padding-block: 28px 40px;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--ink-muted);
}


/* ---- Responsive ----------------------------------------------------------- */

@media (max-width: 900px) {
  .features,
  .pillars,
  .about,
  .contact-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .features,
  .pillars {
    gap: 20px;
  }
}

@media (max-width: 600px) {
  .site-nav a:not(.nav-cta) {
    display: none;
  }

  /* A slimmer sticky header leaves more of the phone screen to the content. */
  :root {
    --header-h: 64px;
  }

  .header-inner {
    padding-block: 12px;
  }

  /* A phone keeps the usual top-down flow with one section gap (owner: screen-tall sections with
     centred content left odd empty halves between blocks when scrolling freely). The opening is as
     tall as its content, so the bottom edge of the first screen cuts into PlayBracket wherever it
     falls on a given phone: that cut is the cue to scroll (owner, 2026-10-12). Text runs left here,
     since six lines of headline read badly centred; buttons take the full width. */
  .hero {
    min-height: 0;
    padding-block: 40px 0;
    align-items: stretch;
    text-align: left;
  }

  .hero h1 {
    max-width: none;
  }

  .hero .lede {
    margin-top: 16px;
  }

  .actions {
    flex-direction: column;
    margin-top: 28px;
  }

  .section-lede {
    margin-top: 20px;
  }

  /* The film runs edge to edge on a phone, so the preview gets the whole width of the screen. */
  .media-frame {
    margin: 32px calc(-1 * var(--gutter)) 0;
    border-radius: 0;
    border-inline: 0;
  }

  .features {
    gap: 32px;
  }

  .pillars {
    gap: 24px;
  }

  .film-play {
    left: var(--gutter);
    top: 12px;
    width: 30px;
    height: 30px;
  }

  .film-play::after {
    inset: -7px;
  }

  .film-play svg {
    width: 16px;
    height: 16px;
  }
}