/* =========================================================
   JACKIE HOFFMAN — Personal site
   athlete × movement builder × speaker × cultural force
   ========================================================= */

:root{
  --bg:        #f4f1ec;      /* warm off-white concrete */
  --bg-2:      #ebe7df;
  --ink:       #0a0a0a;
  --ink-soft:  #1a1a1a;
  --muted:     #6b665d;
  --line:      #d9d3c7;

  --red:       #e63946;
  --red-deep:  #c8202d;
  --green:     #c6ff3a;       /* neon performance green */

  --display:   "Anton", "Archivo Black", Impact, sans-serif;
  --sans:      "Archivo", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono:      "JetBrains Mono", ui-monospace, Menlo, monospace;

  --maxw:      1440px;
  --pad:       clamp(24px, 4vw, 80px);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:400;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}

body{
  background:
    radial-gradient(1100px 600px at 100% 0%, #ece7dc 0%, transparent 60%),
    var(--bg);
}

::selection{ background:var(--red); color:#fff }

/* ===== Reveal ===== */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease }
.reveal.is-in{ opacity:1; transform:none }

/* ===== Bits ===== */
.dot{display:inline-block;width:8px;height:8px;border-radius:99px;background:var(--red);margin-right:10px;vertical-align:middle;animation:pulse 2.5s infinite}
.dot--green{background:var(--green)}
.dot--red{background:var(--red)}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.8)}}

.eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); display:flex; align-items:center;
}
.eyebrow--light{color:#bcb7ad}

.display{
  font-family:var(--display); font-weight:400;
  font-size:clamp(40px, 6.6vw, 104px);
  line-height:.92; letter-spacing:-.01em; margin:.2em 0 .3em;
  text-transform:uppercase;
}
.hl{color:var(--red); font-style:italic }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--sans); font-weight:700; font-size:14px;
  letter-spacing:.08em; text-transform:uppercase;
  padding:18px 26px; border-radius:999px;
  border:1.5px solid var(--ink); background:transparent; color:var(--ink);
  transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn--red{background:var(--red); border-color:var(--red); color:#fff}
.btn--red:hover{background:var(--red-deep); border-color:var(--red-deep)}
.btn--ghost{border-color:#fff; color:#fff; background:transparent}
.btn--ghost:hover{background:#fff; color:var(--ink)}
.btn--big{padding:22px 32px; font-size:15px}

/* ===== Top ticker ===== */
.ticker{
  background:var(--ink); color:var(--bg);
  overflow:hidden; border-bottom:1px solid #222;
  font-family:var(--display); letter-spacing:.04em;
  font-size:14px; padding:10px 0;
}
.ticker__track{
  display:inline-flex; gap:32px; white-space:nowrap;
  animation:scroll 38s linear infinite;
  padding-left:32px;
}
.ticker__track span{ flex:0 0 auto }
.ticker__track .dotsep{ color:var(--red); font-size:10px; }
@keyframes scroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ===== Nav ===== */
.nav{
  position:sticky; top:0; z-index:20;
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:24px;
  padding:16px var(--pad);
  background:rgba(244,241,236,.85); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav__brand{display:flex;align-items:center;gap:14px}
.nav__mono{
  font-family:var(--display); font-size:14px;
  background:var(--ink); color:#fff;
  width:36px; height:36px; display:grid; place-items:center;
  border-radius:6px; letter-spacing:.04em;
}
.nav__brandtext{ font-family:var(--display); font-size:16px; letter-spacing:.04em }

.nav__links{ display:flex; gap:28px; justify-content:center;
  font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;}
.nav__links a{ position:relative; padding-bottom:2px }
.nav__links a:hover{ color:var(--red) }
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:var(--red); transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}
.nav__links a:hover::after{ transform:scaleX(1)}

.nav__cta{
  font-family:var(--sans); font-weight:800; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; padding:12px 18px; border-radius:99px;
  background:var(--ink); color:#fff;
  display:inline-flex; align-items:center; gap:8px;
}
.nav__cta:hover{ background:var(--red) }

@media (max-width:900px){
  .nav__links{display:none}
  .nav{ grid-template-columns:auto auto }
}

/* ============================================
   HERO
   ============================================ */
.hero{
  position:relative; min-height:calc(100vh - 90px); overflow:hidden;
  color:#fff; background:#000;
}
.hero__media{ position:absolute; inset:0 }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center 25%; filter:grayscale(.2) contrast(1.08) }
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.2) 35%, rgba(0,0,0,.85) 100%),
    radial-gradient(900px 500px at 10% 80%, rgba(230,57,70,.28), transparent 70%);
}

.hero__chrome{
  position:relative; z-index:2;
  padding:32px var(--pad) 180px;
  min-height:calc(100vh - 90px);
  display:flex; flex-direction:column; gap:32px;
}

.hero__row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px }
.hero__meta{
  font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  display:flex; align-items:center; color:#e5e1d8;
}
.hero__locale{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:#bcb7ad; text-transform:uppercase }
.hero__locale b{ color:#fff; margin-left:8px; font-weight:700 }

.hero__title{
  font-family:var(--display);
  font-size:clamp(54px, 9.5vw, 168px);
  line-height:.92; letter-spacing:-.015em;
  margin:auto 0; text-transform:uppercase;
  display:flex; flex-direction:column;
}
.hero__title .line{ display:block }
.hero__title .line--italic{ font-style:italic; color:#dcd8cf }
.hero__title .line--accent{ color:var(--red); }
.hero__title .line--outline{
  -webkit-text-stroke:2px #fff; color:transparent;
}

.hero__foot{
  display:grid; grid-template-columns:1fr auto; gap:48px; align-items:end;
  padding-top:16px;
}
.hero__name{}
.hero__namelabel{
  font-family:var(--mono); font-size:12px; letter-spacing:.18em; color:#bcb7ad;
  text-transform:uppercase; margin-bottom:6px;
}
.hero__nameroles{ font-family:var(--display); font-size:clamp(22px, 2.2vw, 30px); letter-spacing:.02em; color:#fff; text-transform:uppercase }
.hero__ctas{ display:flex; gap:14px; flex-wrap:wrap }

@media (max-width:780px){
  .hero__foot{ grid-template-columns:1fr; gap:24px }
}

.hero__counter{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  display:grid; grid-template-columns:repeat(4,1fr);
  background:var(--ink); border-top:1px solid #222;
}
.hero__counter > div{
  padding:18px var(--pad);
  border-right:1px solid #222;
}
.hero__counter > div:last-child{border-right:none}
.hero__counter b{
  display:block; color:#fff; font-family:var(--display); font-weight:400;
  font-size:36px; letter-spacing:-.01em; line-height:1;
}
.hero__counter span{
  display:block; margin-top:4px;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  color:#8a8579; text-transform:uppercase;
}
@media (max-width:780px){
  .hero__counter{ grid-template-columns:repeat(2,1fr) }
  .hero__counter > div:nth-child(2){border-right:none}
}

/* ============================================
   IDENTITY STRIP
   ============================================ */
.identity{ padding:clamp(80px,9vw,140px) var(--pad); max-width:var(--maxw); margin:0 auto }
.identity__inner{ display:grid; grid-template-columns:240px 1fr; gap:48px; align-items:start }
.identity__list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column }
.identity__list li{
  display:grid; grid-template-columns:80px 1fr; align-items:center; gap:32px;
  padding:18px 0; border-bottom:1px solid var(--line);
  font-family:var(--display); font-size:clamp(36px, 5.5vw, 88px);
  text-transform:uppercase; line-height:1; letter-spacing:-.01em;
  transition:color .25s ease;
}
.identity__list li:first-child{ border-top:1px solid var(--line) }
.identity__list li:hover{ color:var(--red) }
.identity__list li:hover .identity__num{ color:var(--red); border-color:var(--red) }
.identity__num{
  font-family:var(--mono); font-size:13px; letter-spacing:.14em;
  color:var(--muted); border:1px solid var(--line); border-radius:99px;
  width:48px; height:48px; display:grid; place-items:center;
  text-transform:uppercase;
  transition:color .25s ease, border-color .25s ease;
}
.identity__txt em{ color:var(--red); font-style:italic }
.identity__belief{
  grid-column:2; margin-top:32px; max-width:680px;
  font-size:20px; line-height:1.5; color:var(--ink);
}
.identity__belief strong{ font-family:var(--display); font-weight:400; letter-spacing:.01em }

@media (max-width:900px){
  .identity__inner{ grid-template-columns:1fr; gap:24px }
  .identity__belief{ grid-column:1 }
  .identity__list li{ grid-template-columns:56px 1fr; gap:20px }
  .identity__num{ width:36px; height:36px; font-size:11px }
}

/* ============================================
   ABOUT
   ============================================ */
.about{ background:#fff; padding:clamp(80px, 10vw, 160px) var(--pad); }
.about__grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:5fr 7fr; gap:80px; align-items:start;
}
.about__media{ position:relative; position:sticky; top:120px }
.about__media img{ width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:8px; filter:contrast(1.05) }
.about__sticker{
  position:absolute; right:-24px; bottom:-24px;
  background:var(--ink); color:#fff; padding:18px 22px;
  display:flex; align-items:center; gap:16px;
  border-radius:8px; max-width:300px;
  box-shadow:0 24px 40px -20px rgba(0,0,0,.5);
}
.about__sticker-mark{
  font-family:var(--display); color:var(--red); font-size:32px; line-height:1;
}
.about__sticker-num{ font-family:var(--display); color:var(--green); font-size:36px; line-height:.9 }
.about__sticker-txt{ font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; line-height:1.45; color:#dcd8cf }

.about__title{ font-size:clamp(56px, 7.5vw, 128px); margin:14px 0 32px }
.about__lede{ font-size:22px; line-height:1.45; color:var(--ink); margin:0 0 24px;
  max-width:620px }
.about__copy{ font-size:16px; line-height:1.7; color:#2a2a2a; max-width:620px; margin:0 0 40px }

.about__bullets{ list-style:none; padding:0; margin:0 0 48px; border-top:1px solid var(--line) }
.about__bullets li{
  display:grid; grid-template-columns:180px 1fr; gap:24px;
  padding:18px 0; border-bottom:1px solid var(--line); align-items:baseline;
}
.about__bullets b{ font-family:var(--display); font-weight:400; font-size:26px;
  text-transform:uppercase; letter-spacing:-.005em }
.about__bullets span{ font-size:15px; line-height:1.5; color:var(--muted) }

.about__quote{
  margin:0; padding:32px; background:var(--bg-2); border-left:6px solid var(--red);
  border-radius:0 8px 8px 0; position:relative;
}
.about__mark{ font-family:var(--display); font-size:100px; color:var(--red);
  position:absolute; top:-30px; left:18px; line-height:1 }
.about__quote p{
  font-family:var(--display); font-size:clamp(28px, 3.5vw, 48px);
  text-transform:uppercase; line-height:1; margin:0; letter-spacing:-.01em;
}

@media (max-width:900px){
  .about__grid{ grid-template-columns:1fr; gap:48px }
  .about__media{ position:relative; top:0 }
  .about__bullets li{ grid-template-columns:1fr; gap:6px }
}

/* ============================================
   SPEAKING
   ============================================ */
.speak{ background:var(--ink); color:#fff; padding:clamp(80px, 10vw, 160px) var(--pad); }
.speak__inner{ max-width:var(--maxw); margin:0 auto }

.speak__head{
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:end;
  margin-bottom:56px;
}
.speak__title{
  font-family:var(--display); font-size:clamp(56px, 8vw, 128px); line-height:.92;
  text-transform:uppercase; margin:16px 0 0; letter-spacing:-.01em;
}
.speak__title-accent{ color:var(--green); font-style:italic; }
.speak__lede{ font-size:18px; line-height:1.55; color:#cfc9be; max-width:520px; margin:0 0 24px }

.speak__media{ position:relative; border-radius:8px; overflow:hidden;
  margin-bottom:64px; max-height:560px;
}
.speak__media img{ width:100%; height:560px; object-fit:cover; object-position:center 20%; filter:contrast(1.05) }
.speak__caption{
  position:absolute; left:24px; bottom:24px; right:24px;
  display:flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:#fff;
  text-transform:uppercase;
  background:rgba(0,0,0,.55); padding:10px 14px; border-radius:99px;
  backdrop-filter:blur(8px); width:fit-content;
}

.speak__topics{ display:grid; grid-template-columns:200px 1fr; gap:48px; margin-bottom:64px }
.speak__topics-label{
  font-family:var(--mono); font-size:12px; letter-spacing:.18em;
  color:var(--green); text-transform:uppercase;
}
.speak__topics-list{ list-style:none; padding:0; margin:0; border-top:1px solid #222 }
.speak__topics-list li{
  display:grid; grid-template-columns:80px 1fr 2fr; gap:32px; align-items:baseline;
  padding:28px 0; border-bottom:1px solid #222;
  transition:padding-left .3s ease, background .3s ease;
}
.speak__topics-list li:hover{ padding-left:16px; background:linear-gradient(90deg, rgba(198,255,58,.07), transparent 60%) }
.topic__num{ font-family:var(--mono); font-size:12px; color:#6b665d; letter-spacing:.14em }
.topic__title{ font-family:var(--display); font-size:clamp(28px, 3vw, 40px);
  text-transform:uppercase; line-height:1; letter-spacing:-.005em }
.topic__desc{ font-size:15px; line-height:1.55; color:#bcb7ad }

@media (max-width:900px){
  .speak__head{ grid-template-columns:1fr; gap:24px }
  .speak__topics{ grid-template-columns:1fr; gap:24px }
  .speak__topics-list li{ grid-template-columns:1fr; gap:8px; padding:20px 0 }
  .topic__title{ font-size:28px }
}

.speak__formats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border:1px solid #222; border-radius:8px; overflow:hidden;
}
.speak__formats .format{
  padding:24px; border-right:1px solid #222;
  transition:background .25s ease;
}
.speak__formats .format:last-child{ border-right:none }
.speak__formats .format:hover{ background:#111 }
.speak__formats b{ font-family:var(--display); font-size:24px; display:block;
  text-transform:uppercase; letter-spacing:-.005em; margin-bottom:6px }
.speak__formats span{ font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:#8a8579 }
@media (max-width:780px){
  .speak__formats{ grid-template-columns:1fr 1fr }
  .speak__formats .format:nth-child(2){ border-right:none }
}

/* ============================================
   BAND
   ============================================ */
.band{
  position:relative; min-height:60vh; color:#fff; background:#000;
  display:grid; place-items:center; overflow:hidden;
}
.band__media{ position:absolute; inset:0 }
.band__media img{ width:100%; height:100%; object-fit:cover; opacity:.55; filter:grayscale(.4) contrast(1.1) }
.band::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.75));
}
.band__quote{
  position:relative; z-index:2; margin:0; padding:80px var(--pad); max-width:1200px;
  text-align:center;
}
.band__quote p{
  font-family:var(--display); font-size:clamp(48px, 9vw, 144px);
  line-height:.95; letter-spacing:-.01em; text-transform:uppercase; margin:0;
}
.band__quote p em{ color:var(--red); font-style:italic }
.band__quote footer{ margin-top:32px; font-family:var(--mono); font-size:13px;
  letter-spacing:.16em; text-transform:uppercase; color:#bcb7ad }

/* ============================================
   IMPACT
   ============================================ */
.impact{ padding:clamp(80px,10vw,160px) var(--pad); max-width:var(--maxw); margin:0 auto }
.impact__head{ max-width:820px; margin-bottom:56px }
.impact__lede{ font-size:18px; color:var(--muted); max-width:540px; line-height:1.55; margin:0 }

.impact__grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border-top:1px solid var(--ink); border-left:1px solid var(--ink);
  margin-bottom:64px;
}
.stat{
  padding:36px 28px; border-right:1px solid var(--ink); border-bottom:1px solid var(--ink);
  background:#fff;
  display:flex; flex-direction:column; justify-content:space-between; min-height:240px;
  transition:background .2s ease;
}
.stat:hover{ background:var(--bg-2) }
.stat__num{
  font-family:var(--display); font-size:clamp(56px, 6.5vw, 96px);
  line-height:.9; letter-spacing:-.02em;
}
.stat__num sup{ font-size:.45em; vertical-align:top; color:var(--red); margin-left:4px }
.stat__small{ font-size:.5em; color:var(--muted) }
.stat__label{ font-family:var(--mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); line-height:1.5;
  margin-top:20px;
}

.stat--red{ background:var(--red); color:#fff }
.stat--red .stat__label{ color:#ffd7da }
.stat--red:hover{ background:var(--red-deep) }
.stat--green{ background:var(--green); color:var(--ink) }
.stat--green .stat__num sup,
.stat--green .stat__small{ color:var(--ink) }
.stat--green:hover{ background:#b8f02b }
.stat--dark{ background:var(--ink); color:#fff }
.stat--dark .stat__label{ color:#a8a39a }

@media (max-width:900px){ .impact__grid{ grid-template-columns:1fr 1fr } }
@media (max-width:560px){ .impact__grid{ grid-template-columns:1fr } }

.impact__awards{
  display:grid; grid-template-columns:240px 1fr; gap:48px;
  padding-top:48px; border-top:1px dashed var(--line)
}
.awards__label{ font-family:var(--mono); font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted) }
.awards__list{ list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:14px 32px;
  font-size:15px; line-height:1.4 }
.awards__list li{ padding-bottom:12px; border-bottom:1px solid var(--line) }
.awards__list b{ font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  color:var(--red); margin-right:10px }
@media (max-width:780px){
  .impact__awards{ grid-template-columns:1fr }
  .awards__list{ grid-template-columns:1fr }
}

/* ============================================
   MOVEMENT (Peace Runners section)
   ============================================ */
.movement{
  position:relative; color:#fff; overflow:hidden;
  padding:clamp(80px,12vw,180px) var(--pad);
  min-height:90vh; display:flex; align-items:center;
}
.movement__media{ position:absolute; inset:0; z-index:0 }
.movement__media img{ width:100%; height:100%; object-fit:cover; object-position:center 30%;
  filter:grayscale(.2) contrast(1.1) }
.movement__overlay{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.4) 60%, rgba(0,0,0,.7) 100%);
}
.movement__inner{ position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; width:100% }
.movement__title{
  font-family:var(--display); font-size:clamp(56px, 11vw, 200px);
  line-height:.9; letter-spacing:-.02em; text-transform:uppercase;
  margin:18px 0 24px;
}
.movement__seven{ color:var(--red); font-style:italic }
.movement__lede{ font-size:19px; line-height:1.5; color:#dcd8cf; max-width:620px; margin:0 0 48px }

.movement__cards{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:48px;
}
.mcard{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
  padding:22px; border-radius:8px;
  backdrop-filter:blur(8px);
  display:flex; flex-direction:column; gap:8px;
  transition:background .25s ease, transform .25s ease;
}
.mcard:hover{ background:rgba(255,255,255,.12); transform:translateY(-3px) }
.mcard__label{ font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  color:var(--red); text-transform:uppercase }
.mcard__title{ font-family:var(--display); font-size:28px; line-height:1; text-transform:uppercase; letter-spacing:-.005em }
.mcard__sub{ font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  color:#bcb7ad; text-transform:uppercase }
.mcard--accent{ background:var(--green); color:var(--ink); border-color:var(--green) }
.mcard--accent .mcard__label{ color:#1a1a1a }
.mcard--accent .mcard__sub{ color:#1a1a1a }
.mcard--accent:hover{ background:#b8f02b }

@media (max-width:900px){ .movement__cards{ grid-template-columns:1fr 1fr } }

/* ============================================
   MEDIA / APPEARANCES
   ============================================ */
.media{ padding:clamp(80px,10vw,160px) var(--pad); max-width:var(--maxw); margin:0 auto }
.media__head{
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:end;
  margin-bottom:48px;
}
.media__lede{ font-size:18px; color:var(--muted); max-width:520px; line-height:1.55; justify-self:end; text-align:right; margin:0 }
@media (max-width:780px){
  .media__head{ grid-template-columns:1fr }
  .media__lede{ text-align:left; justify-self:start }
}

.media__grid{
  display:grid; grid-template-columns:repeat(6,1fr); gap:18px;
}
.media__item{
  margin:0; position:relative; border-radius:8px; overflow:hidden;
  grid-column:span 2; aspect-ratio:4/5;
  background:#222;
}
.media__item--lg{ grid-column:span 3; aspect-ratio:16/11 }
.media__item img{ width:100%; height:100%; object-fit:cover;
  transition:transform .8s ease, filter .5s ease;
  filter:grayscale(.1) contrast(1.05);
}
.media__item:hover img{ transform:scale(1.05); filter:grayscale(0) contrast(1.1) }
.media__item figcaption{
  position:absolute; left:14px; right:14px; bottom:14px;
  display:flex; flex-direction:column; gap:6px;
  background:rgba(0,0,0,.55); backdrop-filter:blur(8px);
  padding:12px 14px; border-radius:6px;
  color:#fff;
}
.media__tag{ font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  color:var(--green); text-transform:uppercase }
.media__title{ font-family:var(--display); font-size:18px; text-transform:uppercase;
  letter-spacing:.01em; line-height:1.1 }

@media (max-width:900px){
  .media__grid{ grid-template-columns:repeat(2,1fr) }
  .media__item, .media__item--lg{ grid-column:span 1; aspect-ratio:4/5 }
}

/* ============================================
   BOOK / CTA
   ============================================ */
.book{ background:#000; color:#fff; padding:clamp(80px,10vw,160px) var(--pad); position:relative; overflow:hidden }
.book::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(700px 400px at 90% 0%, rgba(230,57,70,.18), transparent 60%),
    radial-gradient(500px 350px at 0% 100%, rgba(198,255,58,.08), transparent 60%);
  pointer-events:none;
}
.book__inner{
  position:relative; max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1.1fr 1fr; gap:64px; align-items:start;
}
.book__col{}
.book__title{
  font-family:var(--display); font-size:clamp(56px, 8vw, 128px);
  line-height:.94; letter-spacing:-.01em; text-transform:uppercase; margin:16px 0 24px;
}
.book__title-accent{ color:var(--red); font-style:italic }
.book__lede{ font-size:18px; line-height:1.55; color:#cfc9be; max-width:520px; margin:0 0 40px }

.book__opts{ list-style:none; padding:0; margin:0; border-top:1px solid #222 }
.book__opts li{
  display:grid; grid-template-columns:60px 1fr auto; gap:24px; align-items:center;
  padding:24px 0; border-bottom:1px solid #222;
  transition:padding-left .3s ease, background .3s ease;
}
.book__opts li:hover{ padding-left:14px; background:linear-gradient(90deg, rgba(230,57,70,.08), transparent 60%) }
.book__optnum{ font-family:var(--mono); font-size:12px; color:#6b665d; letter-spacing:.14em }
.book__optbody{ display:flex; flex-direction:column; gap:4px }
.book__optbody b{ font-family:var(--display); font-weight:400; font-size:28px;
  text-transform:uppercase; letter-spacing:-.005em }
.book__optbody span{ font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  color:#a8a39a; text-transform:uppercase }
.book__optcta{ font-family:var(--mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:#fff;
  border-bottom:2px solid var(--red); padding-bottom:4px;
}
.book__optcta:hover{ color:var(--red) }

/* Form */
.book__form{
  background:#0e0e0e; border:1px solid #2a2a2a; border-radius:10px;
  padding:32px;
}
.book__formlabel{ font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  color:var(--green); text-transform:uppercase; margin-bottom:18px }
.book__form form{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
.book__form label{ display:flex; flex-direction:column; gap:6px }
.book__form label span{ font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  color:#8a8579; text-transform:uppercase }
.book__form input, .book__form select, .book__form textarea{
  background:transparent; border:1px solid #2a2a2a; color:#fff;
  padding:12px 14px; font-family:var(--sans); font-size:14px;
  border-radius:6px;
}
.book__form input::placeholder, .book__form textarea::placeholder{ color:#5a5650 }
.book__form input:focus, .book__form select:focus, .book__form textarea:focus{
  outline:none; border-color:var(--red);
}
.book__formfull{ grid-column:1 / -1 }
.book__form button{
  grid-column:1 / -1;
  background:var(--red); color:#fff; border:none;
  padding:16px; font-family:var(--sans); font-weight:800;
  font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  border-radius:6px; margin-top:8px;
  transition:background .2s ease;
}
.book__form button:hover{ background:var(--red-deep) }
.book__form button:disabled{ opacity:.6; cursor:not-allowed }

.book__formstatus{
  grid-column:1 / -1;
  font-family:var(--mono); font-size:12px; letter-spacing:.06em;
  min-height:18px; line-height:1.4;
}
.book__formstatus[data-kind="ok"]{ color:var(--green) }
.book__formstatus[data-kind="err"]{ color:#ff8a93 }

@media (max-width:1000px){
  .book__inner{ grid-template-columns:1fr; gap:48px }
}
@media (max-width:560px){
  .book__form form{ grid-template-columns:1fr }
}

/* ============================================
   FOOTER
   ============================================ */
.foot{ background:#000; color:#fff; padding:80px var(--pad) 32px; position:relative; }
.foot__big{
  font-family:var(--display); font-size:clamp(72px, 14vw, 240px);
  line-height:.86; letter-spacing:-.02em;
  max-width:var(--maxw); margin:0 auto 56px;
  text-transform:uppercase;
}

.foot__cols{
  max-width:var(--maxw); margin:0 auto 48px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:32px;
  padding-top:32px; border-top:1px solid #222;
}
.foot__label{ font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  color:var(--red); text-transform:uppercase; margin-bottom:12px }
.foot__cols p{ font-size:14px; line-height:1.6; color:#cfc9be; margin:0 }
.foot__cols a{ color:#cfc9be }
.foot__cols a:hover{ color:#fff }

.foot__bottom{
  max-width:var(--maxw); margin:0 auto;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-top:24px; border-top:1px solid #222;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  color:#8a8579; text-transform:uppercase;
}
.foot__tag{ color:var(--green) }
@media (max-width:780px){ .foot__cols{ grid-template-columns:1fr 1fr } }