/*
  base.css · cavemans.app
  What applies to the whole page: brand colors and fonts (Brand kit v1.1), reset,
  layout utilities, buttons, header and footer.
  Look: studio terminal. Full-width dark bands, section titles as paths (~/cave-mans/…)
  and the history as a git log. A single dark theme, by brand choice.

  To change a color or font, change only the variable in :root. Each section's CSS lives in sections.css.
*/

/* --- Brand: colors, fonts and gutters ---------------------------------- */
:root {
  --cave: #050705;      /* default background */
  --panel: #0B100C;     /* cards */
  --panel-2: #0F1611;
  --bone: #C8E6CE;      /* main text */
  --muted: #96B79F;     /* secondary body */
  --dim: #849C8C;       /* card text */
  --label: #4E7359;     /* labels */
  --line: #16321D;      /* borders */
  --line-2: #1D3D26;
  --phosphor: #3EE06A;  /* the only accent */
  --phosphor-hover: #5BEA82; /* primary button on hover */
  --deep: #1D5C31;
  --ink: #0E1A11;       /* text on phosphor */
  --error: #FF8A7A;     /* form error messages */
  --video: #000;        /* background behind videos and thumbnails */
  --mono: "JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans: "IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  color-scheme: dark;
}

/* --- Reset and base ---------------------------------------------------- */
html,
body {
  margin: 0;
}
img {
  max-width: 100%;
}
[hidden] {
  display: none !important;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 72px;
}
body {
  background: var(--cave);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top,0px);
  z-index: 30;
  background: var(--cave);
}
a {
  color: inherit;
}
h1,
h2,
h3 {
  font-family: var(--mono);
  text-wrap: balance;
  margin: 0;
  color: var(--bone);
}
p {
  margin: 0;
}
.wrap {
  max-width: 1180px;
  margin-inline: auto;
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
}
.band {
  padding-block: clamp(64px,9vw,112px);
  border-top: 1px solid var(--line);
}
.label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--label);
}
.path {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--label);
  letter-spacing: .02em;
}
.path b {
  color: var(--phosphor);
  font-weight: 400;
}
.sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
  margin-bottom: clamp(32px,5vw,56px);
}
.sec-head h2 {
  font-size: clamp(28px,4vw,38px);
  font-weight: 700;
  line-height: 1.15;
  margin-top: 10px;
  max-width: 22ch;
}
.sec-head p {
  color: var(--muted);
  max-width: 46ch;
}
:focus-visible {
  outline: 2px solid var(--phosphor);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  padding: 14px 22px;
  border-radius: 8px;
  border: 1px solid var(--line-2);
  color: var(--bone);
  background: transparent;
  cursor: pointer;
  transition: border-color .15s,background .15s,color .15s;
}
.btn:hover {
  border-color: var(--phosphor);
  color: var(--phosphor);
}
.btn.primary {
  background: var(--phosphor);
  border-color: var(--phosphor);
  color: var(--ink);
  box-shadow: 0 0 24px rgba(62,224,106,.25);
}
.btn.primary:hover {
  background: var(--phosphor-hover);
  color: var(--ink);
}

/* --- Header ------------------------------------------------------------ */
header.top {
  position: sticky;
  top: env(safe-area-inset-top,0px);
  z-index: 20;
  background: rgba(5,7,5,.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.top .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 64px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  min-width: 0;
}
.brand img {
  width: 44px;
  height: auto;
  display: block;
}
.brand span {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.brand strong {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 800;
  color: var(--bone);
}
.brand small {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .3em;
  color: var(--label);
  text-transform: uppercase;
}
nav.links {
  display: flex;
  align-items: center;
  gap: 6px;
}
nav.links a {
  font-family: var(--mono);
  font-size: 13px;
  text-decoration: none;
  color: var(--muted);
  padding: 8px 10px;
  border-radius: 6px;
}
nav.links a:hover {
  color: var(--bone);
  background: var(--panel);
}
nav.links .btn {
  padding: 9px 14px;
  font-size: 13px;
  margin-left: 6px;
}
@media (max-width:820px) {
  nav.links a:not(.btn) {
    display: none;
  }
}
.cta-short {
  display: none;
}
@media (max-width:520px) {
  .cta-long {
    display: none;
  }
  .cta-short {
    display: inline;
  }
}

/* --- Footer ------------------------------------------------------------ */
footer {
  border-top: 1px solid var(--line);
  padding-block: 40px calc(40px + env(safe-area-inset-bottom,0px));
}
footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  align-items: center;
  justify-content: space-between;
}
footer .tagline {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--bone);
}
footer .meta {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--label);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}
footer a {
  text-decoration: none;
}
footer a:hover {
  color: var(--phosphor);
}
@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto;
  }
  .btn,
  .replay {
    transition: none;
  }
}

/* --- Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .btn {
    transition: none;
  }
}