/* ============ How to Be Cool — black & gold ============ */
:root {
  --bg: #0d0805;
  --surface: #191009;
  --surface-2: #22150c;
  /* sunset: hot ember -> amber -> burnt. (legacy --gold* names kept) */
  --gold: #ef8b2c;
  --gold-bright: #ffb552;
  --gold-deep: #b4551a;
  --ember: #ff6a1a;
  --cream: #ece5d3;
  --text: #f5f0e6;
  --muted: rgba(245, 240, 230, 0.72);
  --faint: rgba(245, 240, 230, 0.45);
  --display: "Archivo Black", "Inter", sans-serif;
  --body: "Inter", -apple-system, sans-serif;
  --thumb-w: 320px;
  --thumb-gap: 28px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
}

/* ---- textured backdrop ----
   A fixed layer behind all content: fine diagonal pinstripes crossed into a
   carbon-weave, three angled "claw" streaks, and a warm glow up top. All of it
   sits at very low opacity so it reads as texture, never as pattern. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-color: var(--bg);
  background-image:
    /* faint stencil motif */
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27520%27%20height%3D%27520%27%20viewBox%3D%270%200%20520%20520%27%3E%3Cg%20opacity%3D%270.055%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23ef8b2c%27%20stroke-width%3D%273%27%3E%3Cpath%20d%3D%27M96%20128%20L108%20163%20L145%20163%20L115%20185%20L127%20220%20L96%20198%20L65%20220%20L77%20185%20L47%20163%20L84%20163%20Z%27%2F%3E%3Cpath%20d%3D%27M392%20372%20L401%20398%20L429%20398%20L406%20415%20L415%20441%20L392%20425%20L369%20441%20L378%20415%20L355%20398%20L383%20398%20Z%27%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%27%23ef8b2c%27%3E%3Cpath%20d%3D%27M300%2096%20L306%20114%20L325%20114%20L310%20126%20L316%20144%20L300%20133%20L284%20144%20L290%20126%20L275%20114%20L294%20114%20Z%27%2F%3E%3Cpath%20d%3D%27M40%20300%20l150%20-34%20l4%2013%20l-150%2034%20Z%27%2F%3E%3Cpath%20d%3D%27M60%20330%20l110%20-25%20l3%2010%20l-110%2025%20Z%27%2F%3E%3Cpath%20d%3D%27M300%20210%20l140%20-32%20l4%2013%20l-140%2032%20Z%27%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
    /* low sun burning on the horizon */
    radial-gradient(ellipse 120% 62% at 50% 118%, rgba(255,106,26,0.30), rgba(239,139,44,0.10) 42%, transparent 72%),
    /* heat haze up top */
    radial-gradient(ellipse 95% 42% at 50% -12%, rgba(255,150,60,0.13), transparent 62%),
    /* dust drifting across */
    linear-gradient(96deg, rgba(255,140,50,0.05) 0%, transparent 35%, transparent 65%, rgba(255,140,50,0.06) 100%);
  background-size: 520px 520px, 100% 100%, 100% 100%, 100% 100%;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
}
/* faint grain so large flat areas never look like banded gradient */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.30;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.30'/%3E%3C/svg%3E");
}
img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
section { padding: 88px 0; }

/* ---- shared text styles ---- */
.kicker {
  font-family: var(--body);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.section-title {
  font-family: var(--display);
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  line-height: 1.1;
  margin-bottom: 20px;
}

/* ---- buttons ---- */
.btn {
  display: inline-block;
  font-weight: 800;
  font-size: 1rem;
  padding: 15px 30px;
  border-radius: 999px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover { transform: translateY(-2px) scale(1.02); }
.btn-blue {
  border: 2px solid var(--gold);
  color: var(--gold-bright);
  background: transparent;
}
.btn-blue:hover { background: rgba(239, 139, 44, 0.12); box-shadow: 0 0 30px rgba(239, 139, 44, 0.25); }
.btn-lime {
  background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 55%, var(--ember) 100%);
  color: #1c0d03;
  box-shadow: 0 0 30px rgba(255, 106, 26, 0.45);
}
.btn-lime:hover { box-shadow: 0 0 52px rgba(255, 106, 26, 0.75); }
.btn-big { font-size: 1.15rem; padding: 18px 38px; }
.btn-small { font-size: 0.85rem; padding: 10px 20px; }

/* ---- nav ---- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  background: rgba(13, 8, 5, 0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(239, 139, 44, 0.25);
}
.nav-logo {
  font-family: var(--display);
  font-size: 1rem;
  letter-spacing: 0.06em;
}
.nav-logo em { font-style: normal; color: var(--gold); }
.nav-links { display: flex; align-items: center; gap: 26px; font-weight: 600; font-size: 0.95rem; }
.nav-links a:not(.btn):hover { color: var(--gold-bright); }
.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text);
  font-size: 1.6rem;
  cursor: pointer;
}

/* ---- hero ---- */
.hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  background: var(--bg) url("../img/hero-tiger.jpg") right center / cover no-repeat;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(13, 8, 5, 0.96) 0%,
    rgba(13, 8, 5, 0.90) 34%,
    rgba(13, 8, 5, 0.62) 60%,
    rgba(13, 8, 5, 0.42) 100%);
}
.hero-inner {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 76px 24px 84px;
  text-align: left;
}
.hero h1 {
  font-family: var(--display);
  font-size: clamp(2.2rem, 5.2vw, 3.8rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
  max-width: 660px;
}
.glow-lime {
  color: var(--gold);
  text-shadow: 0 0 46px rgba(255, 106, 26, 0.55), 0 0 14px rgba(255, 181, 82, 0.35);
}
.hero-sub {
  color: var(--muted);
  font-size: 1.2rem;
  max-width: 480px;
  margin: 22px 0 0;
}
.hero-tag {
  margin-top: 28px;
  color: var(--faint);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ---- manifesto ---- */
.manifesto { background: rgba(19, 16, 11, 0.88); border-top: 1px solid rgba(239, 139, 44, 0.2); }
.manifesto-top {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 48px;
  align-items: center;
}
.badge-img {
  width: 260px;
  justify-self: end;
  filter: drop-shadow(0 8px 30px rgba(0, 0, 0, 0.6));
  transform: rotate(6deg);
}
.manifesto-big {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.6vw, 2.4rem);
  line-height: 1.3;
  max-width: 900px;
}
.hl-blue { color: var(--gold-bright); }
.hl-lime { color: var(--gold); }
.hl-orange { color: var(--cream); }
.manifesto-rules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
  margin-top: 48px;
}
.rule span {
  font-family: var(--display);
  font-size: 2rem;
  color: var(--gold);
  display: block;
  margin-bottom: 8px;
}
.rule p { color: var(--muted); }

/* ---- advice ---- */
.track { margin-top: 56px; }
.track:first-child { margin-top: 0; }
.track-name {
  font-family: var(--display);
  font-size: 1.7rem;
  letter-spacing: 0.04em;
  margin-bottom: 26px;
  padding: 6px 0 6px 18px;
  border-left: 0;
  position: relative;
  transform: skewX(-7deg);
  text-shadow: 0 0 26px rgba(255,106,26,0.35);
}
.track-name::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 7px;
  background: linear-gradient(180deg, var(--gold-bright), var(--ember));
  box-shadow: 0 0 18px rgba(255,106,26,0.55);
}
.track-blue, .track-lime, .track-orange { border-color: var(--gold); }
/* One card per row — no gallery grid. Held to a readable width and centred so
   the photos don't blow up to full page width on a big monitor. */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
  max-width: 900px;
  margin: 0 auto;
}
.card {
  position: relative;
  display: grid;
  grid-template-columns: var(--thumb-w) 1fr;
  gap: var(--thumb-gap);
  align-items: center;
  background: none;
  border: none;
  padding: 0;
  transition: transform 0.2s ease;
}
.card:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.card:hover { transform: translateY(-4px) scale(1.015); }
/* The photos are dark-on-black already, so `lighten` drops their black
   backgrounds straight out and only the lit subject survives. The mask feathers
   the edges so nothing reads as a rectangle sitting on the page. */
.card-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin-bottom: 0;
  mix-blend-mode: lighten;
  filter: sepia(0.30) saturate(1.65) hue-rotate(-14deg) contrast(1.18) brightness(1.06);
  -webkit-mask-image: radial-gradient(ellipse 88% 86% at 50% 47%, #000 64%, rgba(0,0,0,0.55) 86%, transparent 100%);
          mask-image: radial-gradient(ellipse 88% 86% at 50% 47%, #000 64%, rgba(0,0,0,0.55) 86%, transparent 100%);
  transition: filter 0.2s ease;
}
.card:hover .card-thumb { filter: sepia(0.22) saturate(1.9) hue-rotate(-14deg) contrast(1.24) brightness(1.22); }
.card h4 { font-size: 1.12rem; font-weight: 800; margin-bottom: 0; color: var(--cream); }

/* Description is hidden until you hover (or keyboard-focus) the card. It sits
   exactly over the thumbnail — same inset + aspect ratio — so revealing it never
   changes the card's height and the grid never reflows. */
.card p {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: calc(var(--thumb-w) + var(--thumb-gap));
  right: 0;
  margin: 0;
  padding: 16px 18px;
  border-radius: 10px;
  background: rgba(13, 8, 5, 0.97);
  border: 1px solid rgba(239, 139, 44, 0.5);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.7);
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
/* the panel grows past the card, so lift the hovered card above its neighbours */
.card:hover,
.card:focus,
.card:focus-within { z-index: 5; }
.card:hover p,
.card:focus p,
.card:focus-within p {
  opacity: 1;
  visibility: visible;
}

/* Touch devices have no hover, so never hide the advice there —
   show it in normal flow under the title, exactly as before. */
@media (hover: none) {
  .card h4 { margin-bottom: 10px; }
  .card p {
    position: static;
    transform: none;
    left: auto;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-size: 0.97rem;
    line-height: 1.6;
    opacity: 1;
    visibility: visible;
  }
}
.advice-more {
  margin-top: 64px;
  text-align: center;
  color: var(--muted);
  font-size: 1.1rem;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.advice-more a { color: var(--gold-bright); font-weight: 800; border-bottom: 2px solid var(--gold); }
.advice-more a:hover { color: var(--cream); }

/* ---- downloads ---- */
.downloads { background: rgba(19, 16, 11, 0.88); }
.dl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
  margin-top: 36px;
}
.dl-card {
  display: block;
  background: var(--surface-2);
  border: 1px solid rgba(239, 139, 44, 0.3);
  border-radius: 18px;
  padding: 30px 26px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.dl-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 8px 34px rgba(239, 139, 44, 0.18);
}
.dl-emoji { font-size: 2.2rem; display: block; margin-bottom: 12px; }
.dl-card h4 { font-size: 1.15rem; font-weight: 800; margin-bottom: 8px; color: var(--cream); }
.dl-card p { color: var(--muted); font-size: 0.95rem; margin-bottom: 18px; }
.dl-btn { color: var(--gold-bright); font-weight: 800; font-size: 0.95rem; }

/* ---- eyes divider ---- */
.eyes-divider { line-height: 0; }
.eyes-divider img { width: 100%; display: block; }

/* ---- manual ---- */
.manual {
  background:
    radial-gradient(ellipse 50% 60% at 20% 50%, rgba(239, 139, 44, 0.08), transparent),
    url("../img/texture-dark.jpg") center / cover;
}
.manual-wrap {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 60px;
  align-items: center;
}
.cover-img {
  display: block;
  width: 100%;
  border-radius: 14px;
  border: 2px solid var(--gold);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.65), 0 0 50px rgba(239, 139, 44, 0.22);
  transform: rotate(-3deg);
}
.manual-lede { color: var(--muted); font-size: 1.15rem; margin-bottom: 22px; }
.manual-list { list-style: none; margin-bottom: 32px; }
.manual-list li { padding: 8px 0 8px 34px; position: relative; color: var(--muted); }
.manual-list li::before {
  content: "★";
  position: absolute;
  left: 0;
  color: var(--gold);
  font-weight: 800;
}
.manual-note { margin-top: 16px; color: var(--faint); font-size: 0.9rem; }

/* ---- quotes ---- */
.quotes { background: rgba(19, 16, 11, 0.88); }
.quotes-lede { color: var(--muted); max-width: 640px; margin-bottom: 40px; }
.quote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}
.quote-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-2);
  border-radius: 16px;
  padding: 28px 24px;
  border: 1px solid rgba(239, 139, 44, 0.18);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.quote-card:hover { border-color: rgba(239, 139, 44, 0.5); transform: translateY(-3px); }
.quote-card blockquote {
  font-family: var(--display);
  font-size: 1.08rem;
  line-height: 1.38;
  margin-bottom: 18px;
  color: var(--cream);
  flex: 1;
}
.quote-card figcaption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 14px;
  border-top: 1px solid rgba(239, 139, 44, 0.22);
}
.quote-who {
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--gold-bright);
  letter-spacing: 0.01em;
}
.quote-src {
  font-size: 0.78rem;
  color: var(--faint);
  line-height: 1.35;
}
.quote-src:hover { color: var(--gold); text-decoration: underline; }
.quotes-cta {
  margin-top: 44px;
  text-align: center;
  background: var(--surface-2);
  border-radius: 18px;
  padding: 36px 24px;
  border: 1px solid rgba(239, 139, 44, 0.3);
}
.quotes-cta p { margin-bottom: 18px; color: var(--muted); }

/* ---- closing CTA ---- */
.final-cta {
  text-align: center;
  border-top: 1px solid rgba(239, 139, 44, 0.22);
  background: radial-gradient(ellipse 65% 80% at 50% 0%, rgba(239, 139, 44, 0.10), transparent 66%);
}
.final-cta .wrap { max-width: 660px; }
.final-lede { color: var(--muted); font-size: 1.1rem; margin-bottom: 30px; }

/* ---- hero eyebrow ---- */
.hero-eyebrow {
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--gold);
  margin-bottom: 18px;
  max-width: 460px;
}
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 28px; }

/* ---- what do you say when ---- */
.moments { border-top: 1px solid rgba(239,139,44,0.22); }
.moments-lede { color: var(--muted); margin-bottom: 30px; }
.moments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}
.moment {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  font: inherit;
  cursor: pointer;
  padding: 18px 18px 16px;
  border-radius: 12px;
  border: 1px solid rgba(239,139,44,0.28);
  background: rgba(25,16,9,0.75);
  color: var(--cream);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.moment:hover { border-color: var(--gold); background: rgba(34,21,12,0.9); transform: translateY(-2px); }
.moment[aria-expanded="true"] {
  border-color: var(--ember);
  background: rgba(45,24,10,0.95);
  box-shadow: 0 0 26px rgba(255,106,26,0.28);
}
.moment-q { font-weight: 800; font-size: 1rem; line-height: 1.35; }
.moment-open { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.moments-stage {
  margin-top: 22px;
  min-height: 150px;
  border-radius: 16px;
  border: 1px dashed rgba(239,139,44,0.4);
  padding: 30px 28px;
  background: rgba(13,8,5,0.7);
}
.moments-empty { color: var(--faint); font-weight: 700; }
.moment-when {
  font-size: 0.82rem; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 12px;
}
.moment-say {
  font-family: var(--display);
  font-size: clamp(1.3rem, 3.2vw, 2rem);
  line-height: 1.25;
  color: var(--cream);
  text-shadow: 0 0 34px rgba(255,106,26,0.32);
  margin-bottom: 14px;
}
.moment-why { color: var(--muted); max-width: 640px; }
.moments-foot { margin-top: 22px; color: var(--muted); font-size: 0.95rem; }
.moments-foot a { color: var(--gold-bright); font-weight: 800; border-bottom: 2px solid var(--gold); }

.advice-intro { color: var(--muted); max-width: 640px; margin-bottom: 6px; }

@media (max-width: 620px) {
  .check-result { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ---- BUGFIX: a display: value beats the browser's [hidden] rule, so any
   panel that sets display must re-hide itself explicitly. ---- */
.moment-panel[hidden] { display: none !important; }

/* ---- the 27 as self-expanding buttons ---- */
.adv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 12px;
}
.adv-tile {
  position: relative;
  display: block;
  text-align: left;
  font: inherit;
  cursor: pointer;
  padding: 17px 18px;
  min-height: 92px;
  border-radius: 12px;
  border: 1px solid rgba(239,139,44,0.28);
  background: rgba(25,16,9,0.8);
  color: var(--cream);
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}
.adv-head { display: flex; flex-direction: column; gap: 7px; }
.adv-title { font-weight: 800; font-size: 1rem; line-height: 1.3; }
.adv-teaser {
  font-size: 0.8rem; font-weight: 800; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--gold);
}

/* the expansion: floats above its neighbours, so the grid never reflows */
.adv-more {
  position: absolute;
  left: -1px; right: -1px; top: 100%;
  display: block;
  padding: 0 18px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  border-radius: 0 0 12px 12px;
  background: rgba(28,17,9,0.99);
  border: 1px solid transparent;
  border-top: 0;
  transition: max-height 0.22s ease, opacity 0.18s ease, padding 0.22s ease;
  pointer-events: none;
}
.adv-img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 9px;
  margin-bottom: 12px;
  mix-blend-mode: lighten;
  filter: sepia(0.30) saturate(1.65) hue-rotate(-14deg) contrast(1.18) brightness(1.06);
  -webkit-mask-image: radial-gradient(ellipse 90% 88% at 50% 47%, #000 66%, rgba(0,0,0,0.5) 88%, transparent 100%);
          mask-image: radial-gradient(ellipse 90% 88% at 50% 47%, #000 66%, rgba(0,0,0,0.5) 88%, transparent 100%);
}
.adv-body { display: block; color: var(--muted); font-size: 0.92rem; line-height: 1.5; }

@media (hover: hover) {
  .adv-tile:hover {
    z-index: 20;
    transform: scale(1.035);
    border-color: var(--ember);
    background: rgba(45,24,10,0.97);
    box-shadow: 0 18px 44px rgba(0,0,0,0.72), 0 0 30px rgba(255,106,26,0.24);
  }
  .adv-tile:hover .adv-more,
  .adv-tile:focus-visible .adv-more {
    max-height: 460px;
    opacity: 1;
    padding: 4px 18px 18px;
    border-color: var(--ember);
    box-shadow: 0 18px 44px rgba(0,0,0,0.72);
  }
  .adv-tile:focus-visible { z-index: 20; transform: scale(1.035); border-color: var(--ember); }
}

/* touch: no hover, so tapping opens it inline */
@media (hover: none) {
  .adv-more { position: static; border: 0; background: none; }
  .adv-tile.open { border-color: var(--ember); background: rgba(45,24,10,0.97); }
  .adv-tile.open .adv-more { max-height: 700px; opacity: 1; padding: 14px 0 2px; }
}
.adv-tile.open { z-index: 20; }
.adv-tile.open .adv-more { max-height: 700px; opacity: 1; }

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



.footer {
  border-top: 1px solid rgba(239, 139, 44, 0.25);
  padding: 56px 0;
  font-size: 0.92rem;
  color: var(--muted);
}
.footer-wrap {
  display: grid;
  grid-template-columns: 1fr 1.6fr 1fr;
  gap: 40px;
}
.footer-logo { font-family: var(--display); color: var(--text); margin-bottom: 10px; }
.footer-logo em { font-style: normal; color: var(--gold); }
.footer h4 { color: var(--cream); margin-bottom: 10px; font-size: 0.95rem; }
.footer a:hover { color: var(--gold-bright); }
.footer-copy { margin-top: 12px; color: var(--faint); }

/* ---- mobile ---- */
@media (max-width: 820px) {
  section { padding: 64px 0; }
  .card { grid-template-columns: 1fr; gap: 0; }
  .card-thumb { margin-bottom: 12px; }
  .card p { left: 0; top: 0; transform: none; }
  .nav-toggle { display: block; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 24px 26px;
    background: rgba(13, 8, 5, 0.97);
    border-bottom: 1px solid rgba(239, 139, 44, 0.25);
  }
  .nav-links.open { display: flex; }
  .hero { min-height: 0; background-position: 72% center; }
  .hero::before {
    background: linear-gradient(180deg, rgba(13, 8, 5, 0.90) 0%, rgba(13, 8, 5, 0.78) 100%);
  }
  .hero-inner { padding: 90px 24px; }
  .manual-wrap { grid-template-columns: 1fr; gap: 44px; }
  .manual-cover { max-width: 300px; margin: 0 auto; }
  .manifesto-top { grid-template-columns: 1fr; gap: 20px; }
  .badge-img { width: 200px; justify-self: center; transform: rotate(0deg); }
  .pillars { margin-top: 44px; }
  .footer-wrap { grid-template-columns: 1fr; gap: 28px; }
}