/* GoatHam promotional site
   Palette sampled from design/brand/app_icon.png in the app repository.
   See DESIGN.md for the reasoning behind every value here. */

:root {
  --cream:       oklch(0.975 0.020 84.6);
  --cream-shade: oklch(0.945 0.024 82);
  --navy:        oklch(0.247 0.031 262.6);
  --navy-soft:   oklch(0.420 0.028 260);
  --sun:         oklch(0.698 0.163 44.3);
  --sun-deep:    oklch(0.636 0.158 42);
  --slate:       oklch(0.593 0.032 250);
  --slate-pale:  oklch(0.756 0.016 248);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --gut: clamp(1.25rem, 5vw, 5rem);
  --sect: clamp(5rem, 12vh, 9rem);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font-family: Archivo, system-ui, sans-serif;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  line-height: 1.6;
  overflow-x: hidden;
  font-variant-numeric: tabular-nums;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* screenprint tooth. the only decorative effect on the page. */
.grain {
  position: fixed; inset: 0; z-index: 99; pointer-events: none;
  opacity: 0.035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap { width: min(1180px, 100% - var(--gut) * 2); margin-inline: auto; }

/* ─────────── type scale ─────────── */

h1, h2 {
  font-family: Anton, Impact, sans-serif;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.92;
  text-transform: uppercase;
  margin: 0;
}

h1 { font-size: clamp(3.4rem, 11vw, 8.5rem); }

.section-head { font-size: clamp(2.4rem, 6vw, 4.6rem); }
.section-head.light { color: var(--cream); }

.kicker {
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--slate); margin: 0 0 1.4rem;
}

.lede {
  font-size: clamp(1.1rem, 0.98rem + 0.6vw, 1.45rem);
  line-height: 1.45; max-width: 34ch; color: var(--navy-soft);
  margin: 1.6rem 0 2.4rem;
}

.section-lede { max-width: 56ch; color: var(--navy-soft); margin: 1.5rem 0 0; }

p { max-width: 68ch; }

/* ─────────── top bar ─────────── */

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.4rem var(--gut) 0;
}

.wordmark {
  display: flex; align-items: center; gap: 0.6rem;
  text-decoration: none; font-weight: 700; letter-spacing: -0.01em;
  font-size: 1.05rem;
}
.wordmark img { border-radius: 8px; }

.topbar nav { display: flex; gap: clamp(1rem, 3vw, 2.2rem); }
.topbar nav a {
  text-decoration: none; font-size: 0.92rem; font-weight: 500;
  color: var(--navy-soft); padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.topbar nav a:hover { color: var(--navy); border-bottom-color: var(--sun); }
@media (max-width: 560px) { .topbar nav a:first-child { display: none; } }

/* ─────────── hero ─────────── */

.hero { padding: clamp(3rem, 9vh, 6.5rem) 0 0; }

.hero-type { width: min(1180px, 100% - var(--gut) * 2); margin-inline: auto; }

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.btn {
  display: inline-block; text-decoration: none;
  font-weight: 600; font-size: 1rem; letter-spacing: 0.005em;
  padding: 0.95rem 1.5rem; border-radius: 3px;
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease);
}
.btn-primary { background: var(--sun); color: var(--navy); }
.btn-primary:hover { background: var(--sun-deep); transform: translateY(-2px); }
.btn-ghost { border: 1.5px solid var(--navy); color: var(--navy); }
.btn-ghost:hover { background: var(--navy); color: var(--cream); transform: translateY(-2px); }

.fineprint { font-size: 0.88rem; color: var(--slate); margin: 1.4rem 0 0; }

/* the artwork runs edge to edge. its sky is the same cream as the page,
   so the top of the picture dissolves into the ground on its own and needs
   no mask over the subject. object-fit keeps the goat and the sun in shot
   while the band's height stays under control on wide viewports. */
.hero-art { margin-top: clamp(1rem, 3vw, 2.5rem); }
.hero-art img {
  width: 100%;
  height: clamp(300px, 52vw, 780px);
  object-fit: cover;
  object-position: center top;
}

/* ─────────── programmes ─────────── */

.programmes { background: var(--navy); color: var(--cream); padding: var(--sect) 0; }
.programmes .section-head { color: var(--cream); }
.programmes .section-lede { color: var(--slate-pale); }

.prog-list {
  list-style: none; margin: clamp(2.5rem, 6vw, 4rem) 0 0; padding: 0;
  display: grid; gap: 0;
}
.prog-list li {
  display: flex; align-items: baseline; gap: clamp(0.8rem, 2vw, 1.6rem);
  padding: clamp(0.9rem, 2vw, 1.3rem) 0;
  border-top: 1px solid oklch(0.42 0.028 260);
}
.prog-list li:last-child { border-bottom: 1px solid oklch(0.42 0.028 260); }

.dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--c); flex: none; transform: translateY(-2px);
}
.prog-list b {
  font-family: Anton, Impact, sans-serif; font-weight: 400;
  font-size: clamp(1.8rem, 5vw, 3.2rem); letter-spacing: -0.01em;
  line-height: 1; min-width: 4.6ch;
}
.prog-full { color: var(--slate-pale); font-size: clamp(0.95rem, 2vw, 1.15rem); }

.prog-note { color: var(--slate-pale); margin: 2.2rem 0 0; max-width: 46ch; }

/* ─────────── the three acts ─────────── */

.act {
  display: grid; gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
  width: min(1180px, 100% - var(--gut) * 2); margin-inline: auto;
  padding: var(--sect) 0;
}
@media (min-width: 900px) {
  .act { grid-template-columns: 0.85fr 1fr; }
  .act-flip .act-art { order: 2; }
}

.act-no {
  font-family: Anton, Impact, sans-serif; font-size: 1.6rem;
  color: var(--sun); margin: 0 0 0.6rem; letter-spacing: 0.02em;
}
.act h2 { font-size: clamp(2.2rem, 5.5vw, 3.8rem); margin-bottom: 1.2rem; }
.act p { color: var(--navy-soft); }

.plain { list-style: none; padding: 0; margin: 1.8rem 0 0; }
.plain li {
  padding: 0.75rem 0 0.75rem 1.6rem; position: relative;
  border-top: 1px solid oklch(0.88 0.018 84);
  color: var(--navy-soft); max-width: 60ch;
}
.plain li::before {
  content: ""; position: absolute; left: 0; top: 1.35rem;
  width: 7px; height: 7px; background: var(--sun); border-radius: 50%;
}

/* device frame: what keeps the app's green interface from reading
   as one of the brand colours. */
.frame {
  background: var(--navy); border-radius: 2.2rem; padding: 0.55rem;
  width: min(330px, 78vw); margin-inline: auto;
  box-shadow: 0 30px 60px -32px oklch(0.247 0.031 262.6 / 0.55);
}
.frame img { border-radius: 1.75rem; }
.frame-light { background: var(--cream); }

/* ─────────── boundary ─────────── */

.boundary { background: var(--navy); color: var(--cream); padding: var(--sect) 0; }
.boundary-inner { display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
@media (min-width: 900px) { .boundary-inner { grid-template-columns: 1fr 0.8fr; } }
.boundary p { color: var(--slate-pale); }
.boundary .aside {
  border-top: 1px solid oklch(0.42 0.028 260);
  /* slate would be 3.98:1 on this navy. slate-pale is 7.42:1. */
  padding-top: 1.1rem; margin-top: 1.8rem;
  color: var(--slate-pale); font-size: 0.95rem; max-width: 44ch;
}

/* ─────────── log ─────────── */

.log { background: var(--cream-shade); padding: var(--sect) 0; }
.log .act-no { margin-bottom: 1rem; }
.log-grid { display: grid; gap: clamp(1.4rem, 3vw, 2.6rem); margin-top: 2.6rem; }
@media (min-width: 760px) { .log-grid { grid-template-columns: 1fr 1fr; } }
.log-grid p { color: var(--navy-soft); margin: 0; }

/* ─────────── get it ─────────── */

.get { padding: var(--sect) 0; text-align: center; }
/* sits flush on the footer so the silhouette and the footer are one mass */
.ridge-rule {
  display: block; width: 100%; height: clamp(46px, 6.5vw, 86px);
  color: var(--navy); margin-bottom: -2px;
}
.get-inner { padding-top: 0; }
.get .actions { justify-content: center; margin-top: 2.2rem; }
.get-lede { margin: 1.4rem auto 0; color: var(--navy-soft); max-width: 46ch; }
.get .fineprint { margin: 1.6rem auto 0; }

/* ─────────── footer ─────────── */

footer { background: var(--navy); color: var(--slate-pale); padding: clamp(2.5rem, 6vw, 4rem) 0; }
.foot-inner { display: grid; gap: 1.6rem; }
@media (min-width: 860px) {
  .foot-inner { grid-template-columns: auto 1fr auto; align-items: center; gap: 3rem; }
}
.foot-brand {
  display: flex; align-items: center; gap: 0.6rem;
  color: var(--cream); font-weight: 700;
}
.foot-brand img { border-radius: 7px; }
.foot-legal { font-size: 0.85rem; line-height: 1.55; margin: 0; max-width: 62ch; }
.foot-legal a { color: var(--slate-pale); }
.foot-links { display: flex; gap: 1.5rem; }
.foot-links a { font-size: 0.9rem; text-decoration: none; color: var(--cream); }
.foot-links a:hover { color: var(--sun); }

/* ─────────── reveal ─────────── */

.reveal { opacity: 0; transform: translateY(12px); }
.reveal.in {
  opacity: 1; transform: none;
  transition: opacity 0.7s var(--ease) var(--d, 0ms), transform 0.7s var(--ease) var(--d, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.in { opacity: 1; transform: none; transition: none; }
  .btn:hover { transform: none; }
}

/* ─────────── document pages (privacy) ─────────── */

.doc { padding: clamp(3rem, 8vh, 6rem) 0 var(--sect); }
.doc-title { font-size: clamp(3rem, 9vw, 6rem); margin-bottom: 1.5rem; }
.doc-meta { color: var(--slate); font-size: 0.92rem; line-height: 1.7; margin: 0 0 2.5rem; }
.doc code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em; background: var(--cream-shade);
  padding: 0.12em 0.36em; border-radius: 3px; word-break: break-word;
}

/* the honest précis, before the detail. one panel on the page, not a card system. */
.doc-summary {
  border-top: 3px solid var(--navy); border-bottom: 1px solid oklch(0.88 0.018 84);
  padding: 1.6rem 0; margin-bottom: 3rem;
}
.doc-summary p { margin: 0; font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem); line-height: 1.5; }

.doc h2 {
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  margin: clamp(2.8rem, 6vw, 4rem) 0 1rem;
}
.doc h3 {
  font-family: Archivo, system-ui, sans-serif;
  font-size: 1.05rem; font-weight: 700; letter-spacing: 0;
  text-transform: none; margin: 2rem 0 0.6rem;
}
.doc p { color: var(--navy-soft); margin: 0 0 1.1rem; }
.doc a { color: var(--navy); text-decoration-color: var(--sun); text-underline-offset: 3px; }
.doc a:hover { color: var(--sun-deep); }

.doc-list { margin: 0 0 1.4rem; }
.doc-list li { max-width: 68ch; }
.doc-list b { color: var(--navy); }