/* =====================================================================
   JUNETEENTH.CSS — OAF Juneteenth One-Pager
   First flagship proof point of the Cultural Infrastructure repositioning.
   INHERITS brand.css (Fraunces / Space Mono / Inter, buttons, reveals,
   layout helpers). This file ONLY shifts the palette into Juneteenth
   expression (red / black / green + gold) and adds page components.
   ===================================================================== */

/* ---------- 1. PALETTE SHIFT (overrides brand.css tokens) ----------- */
:root {
  /* Juneteenth tricolor + gold */
  --red:        #CE1126;   /* freedom red */
  --red-deep:   #8E0A1B;
  --red-bright: #E63140;
  --green:      #1B7A3D;   /* legacy green */
  --green-deep: #0E5C2C;
  --green-soft: #2A9D52;
  --gold:       #E3A53A;   /* heritage gold */
  --gold-bright:#F6C453;

  --ink:        #0B0B0C;
  --ink-800:    #141210;
  --cream:      #F8F1E1;   /* warm parchment */
  --cream-dim:  #EFE5CE;
  --cream-pure: #FFFDF7;

  /* remap functional tokens onto Juneteenth ground */
  --paper:      var(--cream);
  --paper-pure: var(--cream-pure);
  --paper-dim:  var(--cream-dim);
  --bg:         var(--cream);
  --fg:         var(--ink);
  --accent:     var(--green);

  --ink-mute:   rgba(11,11,12,.64);
  --ink-faint:  rgba(11,11,12,.42);
  --line:       rgba(11,11,12,.16);
  --line-soft:  rgba(11,11,12,.09);
}
html { scroll-padding-top: 92px; }

/* Eyebrow accent -> green for civic-cultural feel */
.eyebrow { color: var(--green); }
.ground-dark { --accent: var(--gold-bright); }
.ground-dark .eyebrow { color: var(--gold-bright); }
::selection { background: var(--green); color: #fff; }

/* Add green + gold button variants on top of brand.css */
.btn--green { background: var(--green); color: #fff; }
.btn--green:hover { background: var(--green-deep); }
.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold:hover { background: var(--gold-bright); }

/* ---------- 2. TRICOLOR PRIMITIVE ----------------------------------- */
.tricolor { display: flex; height: 6px; width: 100%; }
.tricolor span { flex: 1; }
.tricolor span:nth-child(1){ background: var(--red); }
.tricolor span:nth-child(2){ background: var(--ink); }
.tricolor span:nth-child(3){ background: var(--green); }
.tricolor--gold span:nth-child(2){ background: var(--gold); }
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 210; }
#experience, #step-show, #involved { scroll-margin-top: 92px; }

/* ---------- 3. NAV -------------------------------------------------- */
.jt-nav {
  position: fixed; inset: 6px 0 auto 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem var(--gutter);
  color: var(--cream);
  transition: background .5s var(--ease), padding .5s var(--ease), box-shadow .5s var(--ease);
}
.jt-nav.is-scrolled {
  background: rgba(248,241,225,.88);
  color: var(--ink);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  box-shadow: 0 1px 0 var(--line-soft);
  padding-block: .7rem;
}
.jt-lock { display: flex; align-items: center; gap: .7rem; }
.jt-lock__mark { width: 38px; height: 38px; flex: none; }
.jt-lock__text { line-height: 1.05; }
.jt-lock__name { font-family: var(--font-display); font-weight: 540; font-size: 1.15rem; letter-spacing: -.01em; }
.jt-lock__sub { font-family: var(--font-mono); font-size: .55rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--green); }
.jt-nav:not(.is-scrolled) .jt-lock__sub { color: var(--green-soft); }
.jt-nav__right { display: flex; align-items: center; gap: 1.5rem; }
.jt-nav__date { font-family: var(--font-mono); font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(248,241,225,.66); }
.jt-nav.is-scrolled .jt-nav__date { color: var(--ink-mute); }
@media (max-width: 720px){ .jt-nav__date { display:none; } }

/* ---------- 4. HERO ------------------------------------------------- */
.jt-hero {
  position: relative; min-height: 100svh; display: flex; align-items: center;
  padding: 7rem var(--gutter) 4rem; overflow: hidden;
  background: var(--ink); color: var(--cream);
  text-align: center;
}
.jt-hero__bg { position:absolute; inset:0; pointer-events:none; }
.jt-hero__glow {
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(42% 38% at 50% 8%, rgba(227,165,58,.30), transparent 62%),
    radial-gradient(45% 45% at 12% 88%, rgba(206,17,38,.34), transparent 60%),
    radial-gradient(45% 45% at 88% 85%, rgba(27,122,61,.36), transparent 60%);
}
.jt-hero__rays {
  position:absolute; left:50%; top:42%; width:140vmax; height:140vmax; transform:translate(-50%,-50%);
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(227,165,58,.06) 0deg 6deg, transparent 6deg 12deg);
  -webkit-mask-image: radial-gradient(closest-side, #000, transparent 72%);
  mask-image: radial-gradient(closest-side, #000, transparent 72%);
  animation: jt-spin 120s linear infinite; pointer-events:none;
}
@keyframes jt-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
.jt-hero__inner { position: relative; max-width: 960px; margin-inline: auto; }
.jt-hero__star { width: clamp(56px,8vw,86px); height: clamp(56px,8vw,86px); margin: 0 auto 1.6rem; }
.jt-hero__kicker {
  font-family: var(--font-mono); font-size: .72rem; font-weight: 700; letter-spacing: .34em; text-transform: uppercase;
  color: var(--gold-bright); margin-bottom: 1.5rem;
  display:inline-flex; align-items:center; gap:1rem;
}
.jt-hero__kicker::before, .jt-hero__kicker::after { content:""; width:36px; height:1px; background: currentColor; opacity:.6; }
.jt-hero__title {
  font-family: var(--font-display); font-weight: 360; line-height: .94; letter-spacing: -.025em;
  font-size: clamp(3.4rem, 11vw, 9rem);
}
.jt-hero__title .yr { display:block; font-style: italic; font-weight: 340; }
.jt-hero__title .accent-r { color: var(--red-bright); }
.jt-hero__title .accent-g { color: var(--green-soft); }
.jt-hero__lead {
  font-size: var(--t-lead); color: rgba(248,241,225,.82); max-width: 56ch; margin: 1.8rem auto 0; line-height: 1.5;
}
.jt-hero__meta {
  display:flex; flex-wrap:wrap; justify-content:center; gap: 1.2rem 2.5rem; margin-top: 2.2rem;
}
.jt-hero__meta div { display:flex; flex-direction:column; gap:.35rem; }
.jt-hero__meta dt { font-family: var(--font-mono); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color: var(--gold); }
.jt-hero__meta dd { font-family: var(--font-display); font-size: 1.35rem; }
.jt-hero__actions { display:flex; flex-wrap:wrap; gap:.85rem; justify-content:center; margin-top: 2.6rem; }
.jt-hero__present { margin-top: 2.6rem; font-family: var(--font-mono); font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color: rgba(248,241,225,.5); }

/* ---------- 5. FREEDOM STATEMENT ----------------------------------- */
.jt-statement { text-align:center; }
.jt-statement p {
  font-family: var(--font-display); font-weight: 360; font-size: var(--t-h1); line-height: 1.12; letter-spacing:-.02em;
  max-width: 22ch; margin-inline:auto;
}
.jt-statement .hl-r { color: var(--red); font-style: italic; }
.jt-statement .hl-g { color: var(--green); font-style: italic; }
.jt-statement__sub { font-family: var(--font-sans); font-size: var(--t-lead); color: var(--ink-mute); max-width: 60ch; margin: 2rem auto 0; line-height:1.55; }

/* ---------- 6. VALUES / PILLARS ------------------------------------ */
.jt-values { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(1rem,1.5vw,1.25rem); }
.jt-value {
  position: relative; background: var(--cream-pure); border:1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.6rem,2.4vw,2.25rem); overflow:hidden;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.jt-value::after { content:""; position:absolute; left:0; bottom:0; height:4px; width:100%; transform: scaleX(0); transform-origin:left; transition: transform .5s var(--ease); }
.jt-value:nth-child(3n+1)::after { background: var(--red); }
.jt-value:nth-child(3n+2)::after { background: var(--ink); }
.jt-value:nth-child(3n+3)::after { background: var(--green); }
.jt-value:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.jt-value:hover::after { transform: scaleX(1); }
.jt-value__ico { width:34px; height:34px; color: var(--green); margin-bottom: 1.2rem; }
.jt-value:nth-child(3n+1) .jt-value__ico { color: var(--red); }
.jt-value:nth-child(3n+3) .jt-value__ico { color: var(--green); }
.jt-value__no { position:absolute; top:1.4rem; right:1.6rem; font-family: var(--font-mono); font-size:.7rem; font-weight:700; letter-spacing:.18em; color: var(--ink-faint); }
.jt-value__title { font-family: var(--font-display); font-weight: 480; font-size: var(--t-h3); line-height:1.05; letter-spacing:-.01em; }
.jt-value__desc { color: var(--ink-mute); margin-top:.85rem; font-size:.95rem; }

/* ---------- 7. OAF ROLE (split band, dark) ------------------------- */
.jt-role__inner { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,5rem); align-items:center; }
.jt-role__title { font-family: var(--font-display); font-weight: 360; font-size: var(--t-h2); line-height:1.04; letter-spacing:-.02em; }
.jt-role__title em { font-style:italic; color: var(--gold-bright); }
.jt-role__copy { color: rgba(248,241,225,.78); margin-top:1.4rem; font-size: var(--t-body); line-height:1.65; }
.jt-role__list { margin-top:1.8rem; display:grid; gap:.2rem; }
.jt-role__list li { display:flex; gap:1rem; align-items:flex-start; padding:.9rem 0; border-top:1px solid var(--line-inv); font-size:.98rem; }
.jt-role__list li:last-child { border-bottom:1px solid var(--line-inv); }
.jt-role__list b { font-family: var(--font-display); font-weight:480; }
.jt-role__list .mk { color: var(--gold-bright); font-family: var(--font-mono); font-size:.8rem; font-weight:700; padding-top:.15rem; }
.jt-role__aside {
  border:1px solid var(--line-inv); border-radius: var(--r-xl); padding: clamp(1.8rem,3vw,2.6rem);
  background: linear-gradient(160deg, rgba(227,165,58,.08), rgba(27,122,61,.08));
}
.jt-role__quote { font-family: var(--font-display); font-weight:360; font-size: var(--t-h3); line-height:1.28; }
.jt-role__quote .q { color: var(--red-bright); }
.jt-role__cite { margin-top:1.5rem; font-family: var(--font-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color: rgba(248,241,225,.6); }

/* ---------- 8. EXPERIENCE / PROGRAMMING ---------------------------- */
.jt-exp { display:grid; grid-template-columns: repeat(12,1fr); gap: clamp(1rem,1.4vw,1.1rem); }
.jt-card {
  border:1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.5rem,2.4vw,2.1rem);
  background: var(--cream-pure); display:flex; flex-direction:column; min-height: 210px;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.jt-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.jt-card--wide { grid-column: span 6; }
.jt-card--third { grid-column: span 4; }
.jt-card--feature { grid-column: span 6; background: var(--ink); color: var(--cream); border-color: transparent; position:relative; overflow:hidden; }
.jt-card--feature::before { content:""; position:absolute; inset:0; background: radial-gradient(60% 70% at 80% 10%, rgba(227,165,58,.25), transparent 60%); }
.jt-card__tag { font-family: var(--font-mono); font-size:.62rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color: var(--green); }
.jt-card--feature .jt-card__tag { color: var(--gold-bright); }
.jt-card__h { font-family: var(--font-display); font-weight: 460; font-size: var(--t-h3); line-height:1.08; margin-top: auto; padding-top:1.4rem; letter-spacing:-.01em; position:relative; }
.jt-card__p { color: var(--ink-mute); margin-top:.7rem; font-size:.93rem; position:relative; }
.jt-card--feature .jt-card__p { color: rgba(248,241,225,.78); }
@media (max-width:900px){ .jt-card--wide,.jt-card--feature{grid-column:span 12;} .jt-card--third{grid-column:span 6;} }
@media (max-width:600px){ .jt-card--third{grid-column:span 12;} }

/* ---------- 9. STEP SHOW RUN OF SHOW ------------------------------ */
.jt-step { background: var(--cream-pure); }
.jt-run {
  display:grid; grid-template-columns: minmax(260px,.75fr) 1.25fr; gap:1px;
  background: var(--line); border:1px solid var(--line); border-radius: var(--r-lg); overflow:hidden;
}
.jt-run__main {
  background: var(--ink); color: var(--cream); padding: clamp(1.8rem,3vw,2.6rem);
  display:flex; flex-direction:column; justify-content:flex-end; min-height: 360px;
}
.jt-run__main h3 {
  font-family: var(--font-display); font-size: clamp(2rem,4vw,4rem); font-weight:360;
  line-height:1; letter-spacing:-.02em; margin-top:1.2rem;
}
.jt-run__main p { margin-top:1rem; color: rgba(248,241,225,.78); max-width:44ch; }
.jt-run__timeline { display:grid; grid-template-columns: repeat(2,1fr); gap:1px; background: var(--line); }
.jt-run__timeline div {
  background: var(--cream); padding: clamp(1.25rem,2vw,1.8rem); min-height:132px;
  display:flex; flex-direction:column; justify-content:space-between; gap:1.25rem;
}
.jt-run__timeline time {
  font-family: var(--font-mono); font-size:.68rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color: var(--red);
}
.jt-run__timeline span { color: var(--ink-mute); line-height:1.5; }
.jt-flow {
  display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(1rem,1.4vw,1.1rem);
  margin-top: clamp(1rem,1.8vw,1.4rem);
}
.jt-flow article {
  border:1px solid var(--line); background: var(--cream); border-radius: var(--r-lg);
  padding: clamp(1.4rem,2.2vw,2rem);
}
.jt-flow__label {
  display:block; font-family: var(--font-mono); font-size:.66rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color: var(--green); margin-bottom:.9rem;
}
.jt-flow p { color: var(--ink-mute); font-size:.94rem; line-height:1.6; }
@media (max-width:900px){
  .jt-run { grid-template-columns:1fr; }
  .jt-run__main { min-height:260px; }
  .jt-flow { grid-template-columns:1fr; }
}
@media (max-width:620px){
  .jt-run__timeline { grid-template-columns:1fr; }
}

/* ---------- 10. GET INVOLVED (audience CTAs) ---------------------- */
.jt-involve { display:grid; grid-template-columns: repeat(4,1fr); gap:1px; background: var(--line); border:1px solid var(--line); border-radius: var(--r-lg); overflow:hidden; }
.jt-inv { background: var(--cream); padding: clamp(1.6rem,2.5vw,2.25rem); display:flex; flex-direction:column; gap:1rem; transition: background .4s var(--ease); }
.jt-inv:hover { background: var(--cream-pure); }
.jt-inv__top { display:flex; align-items:center; justify-content:space-between; }
.jt-inv__ico { width:30px; height:30px; }
.jt-inv:nth-child(1) .jt-inv__ico { color: var(--red); }
.jt-inv:nth-child(2) .jt-inv__ico { color: var(--green); }
.jt-inv:nth-child(3) .jt-inv__ico { color: var(--gold); }
.jt-inv:nth-child(4) .jt-inv__ico { color: var(--ink); }
.jt-inv__no { font-family: var(--font-mono); font-size:.66rem; font-weight:700; letter-spacing:.16em; color: var(--ink-faint); }
.jt-inv__name { font-family: var(--font-display); font-weight:480; font-size: 1.5rem; line-height:1.05; }
.jt-inv__desc { color: var(--ink-mute); font-size:.9rem; flex:1; }
.jt-inv__link { font-family: var(--font-mono); font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color: var(--green); display:inline-flex; gap:.5em; }
.jt-inv:nth-child(1) .jt-inv__link{color:var(--red);} .jt-inv:nth-child(3) .jt-inv__link{color:var(--gold-deep,#b8801f);} .jt-inv:nth-child(4) .jt-inv__link{color:var(--ink);}
.jt-inv__link span{transition:transform .3s var(--ease);} .jt-inv:hover .jt-inv__link span{transform:translateX(4px);}
@media (max-width:900px){ .jt-involve{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .jt-involve{grid-template-columns:1fr;} }

/* ---------- 11. QR / SHARE BAND ----------------------------------- */
.jt-share__inner { display:grid; grid-template-columns: auto 1fr; gap: clamp(2rem,5vw,4rem); align-items:center; }
.jt-qr {
  width: clamp(150px,20vw,190px); aspect-ratio:1; border-radius: var(--r-lg); background: var(--cream-pure);
  border: 2px solid var(--ink); display:grid; place-items:center; padding: 14px; position:relative;
}
.jt-qr svg, .jt-qr img { width:100%; height:100%; }
.jt-qr__cap { position:absolute; bottom:-2.1rem; left:0; right:0; text-align:center; font-family: var(--font-mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color: rgba(248,241,225,.6); }
.jt-share__title { font-family: var(--font-display); font-weight:360; font-size: var(--t-h2); line-height:1.04; letter-spacing:-.02em; }
.jt-share__title em { font-style:italic; color: var(--gold-bright); }
.jt-share__sub { color: rgba(248,241,225,.78); margin-top:1.2rem; max-width:50ch; font-size: var(--t-body); line-height:1.6; }
.jt-share__actions { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.8rem; }
@media (max-width:680px){ .jt-share__inner{grid-template-columns:1fr; justify-items:center; text-align:center;} .jt-share__sub{margin-inline:auto;} .jt-share__actions{justify-content:center;} }

/* ---------- 12. FOOTER (OAF tie-back) ----------------------------- */
.jt-foot { background: var(--ink); color: var(--cream); }
.jt-foot__cta { text-align:center; padding-block: clamp(3rem,6vw,5rem); border-bottom:1px solid var(--line-inv); }
.jt-foot__cta h3 { font-family: var(--font-display); font-weight:360; font-size: var(--t-h2); line-height:1.05; letter-spacing:-.02em; max-width:24ch; margin-inline:auto; }
.jt-foot__cta em { font-style:italic; color: var(--green-soft); }
.jt-foot__cta p { color: rgba(248,241,225,.7); max-width: 54ch; margin: 1.4rem auto 0; }
.jt-foot__bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; padding-block: 2.2rem; }
.jt-foot__bottom p { font-family: var(--font-mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color: rgba(248,241,225,.5); }
.jt-foot__lock { display:flex; align-items:center; gap:.6rem; }

/* ---------- 13. RESPONSIVE --------------------------------------- */
@media (max-width: 980px){
  .jt-values { grid-template-columns: repeat(2,1fr); }
  .jt-role__inner { grid-template-columns: 1fr; }
}
@media (max-width: 620px){
  .jt-values { grid-template-columns: 1fr; }
  .jt-hero__meta { gap: 1rem 1.5rem; }
}