/* ==========================================================================
   Live Life Inspired — design system

   Black canvas, condensed uppercase display type, one accent colour, red
   numbered badges. What changed is *how much* of it, and how hard it works:

   1. The accent is split into two jobs. A rich accent is reserved for the
      one thing we want clicked. A softer, lower-chroma tint does the quiet
      accent work. High-chroma warm colour on black vibrates (halation), and
      it was being used on roughly every element on the page.
   2. Large accent areas are gone from headings. The accent now marks a short
      phrase, not half a sentence, so the eye has somewhere to rest.
   3. Type is set for reading, not for shouting: looser leading, positive
      tracking on caps, softer off-white instead of pure white, larger body
      text, and left-aligned paragraphs instead of centred ones.
   ========================================================================== */

:root {
  /* surfaces */
  --bg:           #0B0B0C;
  --panel:        #131316;
  --panel-2:      #17171A;
  --line:         #2B2B30;
  --line-soft:    #1F1F23;

  /* THE ACCENT — the whole palette is swappable from these six values.
     Original MJB gold, restored to the values the page launched with. */
  --accent:         #C9A227;
  --accent-soft:    #C9A227;
  --accent-line:    #8A7020;

  --btn-1:        #E0BC4E;
  --btn-2:        #C9A227;
  --btn-ink:      #0A0A0A;

  /* support */
  --red:          #B93A2C;

  /* text — softened off-white, never pure #fff on black */
  --white:        #F4F2EE;
  --ink:          #C6C3BD;
  --muted:        #A5A29B;
  --muted-2:      #8E8B85;

  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body:    "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif:   "Lora", Georgia, serif;

  --wrap: 1160px;
  --gap: clamp(1.25rem, 4vw, 2.75rem);
  --section-y: clamp(4.5rem, 9vw, 8rem);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.125rem;          /* 18px — up from 17px */
  line-height: 1.85;            /* more air between lines */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 800; color: var(--white); }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--btn-ink); padding: .75rem 1rem; font-weight: 600;
}
.skip:focus { left: 1rem; top: 1rem; }

:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 3px; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gap); }
.narrow { max-width: 780px; }
.center { text-align: center; }
.section { padding-block: var(--section-y); }
.section-alt {
  background: var(--panel);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

/* ---------- type ---------- */
.eyebrow {
  font-family: var(--display);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin-bottom: 1.4rem;
}
.eyebrow-sm {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin-bottom: .5rem;
}

h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.15rem, 4.8vw, 3.7rem);
  line-height: 1.1;             /* was 0.98 — caps need room */
  letter-spacing: .004em;       /* was negative — caps need tracking */
  text-transform: uppercase;
}
h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.65rem, 3.3vw, 2.55rem);
  line-height: 1.16;
  letter-spacing: .012em;
  text-transform: uppercase;
  margin-bottom: 1.6rem;
}
h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.28;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.accent { color: var(--accent-soft); }

/* Body copy: left-aligned even inside centred sections. Centred paragraphs
   give the eye no consistent starting point, which is most of what makes
   long copy feel like hard work. */
.lede,
.body-lg {
  text-align: left;
  max-width: 60ch;
}
.center .lede,
.center .body-lg { margin-inline: auto; }

.lede { font-size: 1.16rem; line-height: 1.8; margin-bottom: 2.25rem; }
.body-lg { margin-bottom: 1.4rem; }
.body-lg:last-child { margin-bottom: 0; }
.muted { color: var(--muted); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: .085em;
  text-transform: uppercase;
  color: var(--btn-ink);
  background: linear-gradient(180deg, var(--btn-1), var(--btn-2));
  border: none;
  border-radius: 3px;
  padding: 1.1rem 2.15rem;
  cursor: pointer;
  transition: filter .18s ease, transform .18s ease;
}
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-sm { font-size: .84rem; padding: .7rem 1.2rem; letter-spacing: .07em; }
.btn-lg { font-size: 1.15rem; padding: 1.3rem 2.8rem; }

.cta-row { display: flex; flex-wrap: wrap; gap: 1rem; }
.center .cta-row { justify-content: center; }

.micro {
  margin-top: 1.1rem;
  font-size: .84rem;
  color: var(--muted-2);
  letter-spacing: .015em;
  max-width: 60ch;
}
.center .micro { margin-inline: auto; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11, 11, 12, .93);
  backdrop-filter: saturate(130%) blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 70px;
}
.lockup { display: inline-flex; align-items: center; gap: .7rem; flex-shrink: 0; }
.lockup-brand {
  font-family: var(--display); font-weight: 700; font-size: .9rem;
  letter-spacing: .19em; text-transform: uppercase; color: var(--white);
}
.lockup-rule { width: 1px; height: 16px; background: var(--accent-line); display: inline-block; }
.lockup-sub {
  font-family: var(--display); font-weight: 600; font-size: .82rem;
  letter-spacing: .17em; text-transform: uppercase; color: var(--muted);
}

.site-nav { display: flex; gap: 1.85rem; }
.site-nav a {
  font-family: var(--display); font-weight: 600; font-size: .84rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted);
  transition: color .16s ease;
}
.site-nav a:hover { color: var(--white); }

/* ---------- hero ---------- */
.hero { padding-block: clamp(3rem, 7vw, 6rem); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.hero h1 { margin-bottom: 1.75rem; }

.facts {
  display: flex; flex-wrap: wrap; gap: 2.5rem;
  margin: 2.25rem 0 2.5rem;
  padding-top: 1.9rem;
  border-top: 1px solid var(--line);
}
.facts li { display: flex; flex-direction: column; }
.facts strong {
  font-family: var(--display); font-weight: 700; font-size: 1.5rem;
  color: var(--white); line-height: 1.1; letter-spacing: .01em;
}
.facts span {
  font-family: var(--display); font-weight: 600; font-size: .74rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  margin-top: .35rem;
}

.hero-media { margin: 0; }
.hero-media img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border: 1px solid var(--line);
  border-bottom: none;
}
.hero-media figcaption {
  border: 1px solid var(--line); border-top: none;
  background: var(--panel); padding: 1.05rem 1.2rem;
  display: flex; flex-direction: column;
}
.hero-media figcaption strong {
  font-family: var(--display); font-weight: 700; font-size: 1.1rem;
  letter-spacing: .05em; text-transform: uppercase; color: var(--white);
}
.hero-media figcaption .muted { font-size: .8rem; letter-spacing: .03em; }

/* ---------- stats ---------- */
.stats {
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: var(--panel);
}
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat {
  padding: 2.4rem 1rem; text-align: center;
  border-right: 1px solid var(--line-soft);
}
.stat:last-child { border-right: none; }
.stat strong {
  display: block;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.55rem, 2.8vw, 2.1rem);
  color: var(--accent-soft); line-height: 1;
}
.stat span {
  display: block; margin-top: .55rem;
  font-family: var(--display); font-weight: 600; font-size: .74rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}

/* ---------- points ---------- */
.points {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); margin-bottom: 3.25rem;
}
.points li { background: var(--bg); padding: 1.9rem 2rem; }
.section-alt .points li { background: var(--panel-2); }
.points h3 { font-size: 1.14rem; margin-bottom: .55rem; color: var(--white); }
.points p { color: var(--muted); font-size: 1.02rem; line-height: 1.8; }

/* ---------- pull quote ---------- */
.pull {
  margin: 0; padding: 2.25rem 0 0;
  border-top: 1px solid var(--line);
  text-align: center;
}
.pull p {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.25rem, 2.3vw, 1.6rem); line-height: 1.5;
  color: var(--white); max-width: 34ch; margin-inline: auto;
}

/* ---------- cards ---------- */
.cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  margin-top: 3.25rem;
}
.card { background: var(--panel); padding: 2.4rem 2rem 2.6rem; }
.badge {
  display: inline-block;
  font-family: var(--display); font-weight: 700; font-size: .7rem;
  letter-spacing: .15em; text-transform: uppercase;
  background: var(--red); color: #fff;
  padding: .32rem .58rem; margin-bottom: 1.6rem;
}
.card h3 { margin-bottom: .5rem; }
.card-sub {
  font-family: var(--display); font-weight: 600; font-size: .76rem;
  letter-spacing: .15em; text-transform: uppercase; color: var(--muted-2);
  margin-bottom: 1.1rem;
}
.card p:last-child { color: var(--muted); font-size: 1.02rem; line-height: 1.8; }

/* ---------- inline quotes ---------- */
.quotes {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem; margin-top: 3.25rem; text-align: center;
}
.quote {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.05rem, 1.9vw, 1.3rem); line-height: 1.55;
  color: var(--white);
  padding-top: 1.6rem; border-top: 1px solid var(--line);
}

/* ---------- checklist ---------- */
.checklist {
  margin-top: 2.75rem; display: grid; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
}
.checklist li {
  background: var(--bg);
  padding: 1.25rem 1.5rem 1.25rem 3.4rem;
  position: relative; font-size: 1.05rem; line-height: 1.75;
  color: var(--ink); text-align: left;
}
.section-alt .checklist li { background: var(--panel-2); }
.checklist li::before {
  content: "";
  position: absolute; left: 1.45rem; top: 1.72rem;
  width: 10px; height: 2px; background: var(--accent-soft);
}

/* ---------- sessions ---------- */
.sessions {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  margin-top: 3.25rem;
}
.session { background: var(--panel-2); padding: 2.25rem 2rem 2.5rem; }
.session h3 { font-size: 1.3rem; margin-bottom: 1.6rem; }
.tz { width: 100%; border-collapse: collapse; }
.tz th, .tz td {
  text-align: left; padding: .68rem 0;
  border-bottom: 1px solid var(--line); font-size: 1rem;
}
.tz tr:last-child th, .tz tr:last-child td { border-bottom: none; }
.tz th {
  font-family: var(--display); font-weight: 600; font-size: .8rem;
  letter-spacing: .11em; text-transform: uppercase; color: var(--muted);
  width: 44%;
}
.tz td { color: var(--white); font-variant-numeric: tabular-nums; }

/* ---------- presenter ---------- */
.presenter {
  display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.presenter-media { margin: 0; }
.presenter-media img { border: 1px solid var(--line); width: 100%; }
.presenter-copy h2 { margin-bottom: 1.4rem; }

/* ---------- faq ---------- */
.faq { margin-top: 3.25rem; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 1.5rem 3rem 1.5rem 0; position: relative;
  font-family: var(--display); font-weight: 700; font-size: 1.18rem;
  letter-spacing: .015em; color: var(--white);
  transition: color .16s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-soft); }
.faq summary::after {
  content: "+";
  position: absolute; right: .4rem; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400; color: var(--accent-soft); line-height: 1;
}
.faq details[open] summary::after { content: "–"; }
.faq-body { padding: 0 3rem 1.8rem 0; }
.faq-body p { color: var(--muted); font-size: 1.05rem; line-height: 1.85; }

/* ---------- final ---------- */
.final { border-top: 1px solid var(--line-soft); background: var(--panel); }
.final h2 { margin-bottom: 1.6rem; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line-soft); background: var(--bg); }
.footer-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.25rem; padding-block: 2.5rem;
}
.copyright { font-size: .85rem; color: var(--muted-2); letter-spacing: .015em; }
.footer-nav { display: flex; gap: 1.6rem; }
.footer-nav a {
  font-family: var(--display); font-weight: 600; font-size: .8rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted);
}
.footer-nav a:hover { color: var(--white); }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(10px); transition: opacity .55s ease, transform .55s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .site-nav { display: none; }
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-media { max-width: 460px; }
  .cards { grid-template-columns: 1fr; }
  .sessions { grid-template-columns: 1fr; }
  .presenter { grid-template-columns: 1fr; }
  .presenter-media { max-width: 420px; }
}

@media (max-width: 760px) {
  body { font-size: 1.0625rem; line-height: 1.8; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat { border-bottom: 1px solid var(--line-soft); }
  .stat:nth-child(2n) { border-right: none; }
  .stat:nth-last-child(-n+2) { border-bottom: none; }
  .quotes { grid-template-columns: 1fr; }
  .facts { gap: 1.5rem 2rem; }
  .header-inner { min-height: 62px; }
  .lockup-sub { display: none; }
  .lockup-rule { display: none; }
  .btn-sm { font-size: .74rem; padding: .62rem .9rem; letter-spacing: .05em; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .pull p { max-width: none; }
}