/* ==========================================================================
   WORLD 00 — BLACK ALBINISM
   The organisation itself. Editorial, warm, dignified. Ink on cream, with
   sunlight used as an accent rather than a threat.
   ========================================================================== */
:root{
  /* Palette taken straight from the Black Albinism logo:
     black letterforms, #FAB727 gold, #E61C2D red. */
  --ink:#141210;
  --paper:#FFFCF7;
  --surface:#F7F1E7;
  --surface-2:#EFE5D5;
  --muted:#5C554C;
  --line:rgba(20,18,16,.14);
  --brand:#FAB727;          /* logo gold, graphic use */
  --brand-ink:#141210;
  --red:#E61C2D;            /* logo red, graphic use */
  --accent:#C81422;         /* deepened red, safe for small text */
  --deep:#141210;
  --focus:#1C6DD0;
  --foot-bg:#141210;
  --foot-fg:#FFFCF7;

  --font-display:"Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
h1,h2,h3{ font-variation-settings:"SOFT" 0, "WONK" 1; }
.eyebrow,.link-arrow,.card__kicker{ color:var(--accent); }
::selection{ background:var(--brand); color:var(--brand-ink); }

/* ------------------------------------------------------------------ HERO */
.hero{
  position:relative; isolation:isolate;
  min-height:min(92svh, 860px);
  display:flex; flex-direction:column; justify-content:flex-end;
  color:#fff;
  padding-block:clamp(4rem,12vh,8rem) clamp(1.5rem,4vh,2.5rem);
  background:#191411;
}
.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to top, rgba(10,8,6,.94) 2%, rgba(10,8,6,.62) 46%, rgba(10,8,6,.26) 82%),
    linear-gradient(100deg, rgba(10,8,6,.80) 0%, rgba(10,8,6,.35) 46%, transparent 70%);
}
.hero__in{ position:relative; z-index:2; width:100%; }
/* The strapline, broken. "Greatness" is the only gold word and it sits on
   its own line so it never lands on top of a busy photograph. */
.hero__title{
  margin:0 0 1.1rem; font-weight:900; letter-spacing:-.04em;
  display:flex; flex-direction:column; align-items:flex-start;
  line-height:.9;
}
.hero__title .l1{
  font-size:var(--step-3); font-weight:600; letter-spacing:-.01em;
  color:rgba(255,255,255,.9); margin-bottom:.12em;
}
.hero__title .l2{
  font-size:var(--step-8); color:var(--brand); line-height:.86;
  font-variation-settings:"WONK" 1;
  text-shadow:0 8px 40px rgba(10,8,6,.75);
}
.hero__title .l3{
  font-size:var(--step-3); font-style:italic; font-weight:400;
  color:rgba(255,255,255,.9); margin-top:.1em;
  font-variation-settings:"WONK" 1;
}
.hero__title .l3 b{ font-style:normal; font-weight:600; color:var(--brand); }
.hero__lede{
  font-size:var(--step-1); max-width:48ch; color:rgba(255,255,255,.86);
  margin-bottom:var(--sp-5);
}
.hero__foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-5);
  justify-content:space-between; margin-top:var(--sp-7);
  padding-top:var(--sp-4); border-top:1px solid rgba(255,255,255,.2);
}
.hero__scroll{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:var(--step--2); letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.7); text-decoration:none; font-weight:700;
}
.hero__scroll i{
  width:26px; height:40px; border:1.5px solid rgba(255,255,255,.5); border-radius:14px;
  position:relative; display:inline-block;
}
.hero__scroll i::after{
  content:""; position:absolute; left:50%; top:8px; width:3px; height:7px; border-radius:2px;
  background:var(--brand); transform:translateX(-50%);
  animation:mouse 1.8s var(--ease) infinite;
}
@keyframes mouse{ 0%,100%{ transform:translate(-50%,0); opacity:1 } 60%{ transform:translate(-50%,12px); opacity:.2 } }

/* --------------------------------------------------------- OFFERS TICKER */
.offers{
  background:var(--ink); color:#fff; border:0;
  position:relative; z-index:3;
}
.offers .marquee__item{ border-right-color:rgba(255,255,255,.16); }
.offers .marquee__item strong{ color:var(--brand); }
.offers__cta{
  position:absolute; right:0; top:0; bottom:0; z-index:4;
  display:none; align-items:center; padding-inline:1.4rem;
  background:var(--brand); color:var(--brand-ink);
  font-weight:800; font-size:var(--step--2); letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none;
}
.offers__cta:hover{ filter:brightness(1.08); }
@media (min-width:720px){ .offers__cta{ display:flex; } }
.offers__wrap{ position:relative; overflow:hidden; }

/* ------------------------------------------------------------ DATA CARDS */
.datacard{
  background:linear-gradient(160deg,#1D1A16,#141210); color:#fff;
  border-radius:var(--r-lg); padding:clamp(1.5rem,3vw,2.4rem);
  display:grid; gap:1.4rem;
}
.datacard h3{ font-size:var(--step-1); margin:0; }
.dataline{ display:grid; gap:.5rem; }
.dataline__top{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; font-size:var(--step--1); }
.dataline__bar{ height:9px; border-radius:5px; background:rgba(255,255,255,.16); overflow:hidden; }
.dataline__bar i{ display:block; height:100%; background:var(--brand); border-radius:5px; width:var(--w,0%); }
.dataline__bar--empty{ background:repeating-linear-gradient(115deg, rgba(255,255,255,.16) 0 6px, transparent 6px 12px); }

/* --------------------------------------------------------------- REASONS */
.reason{
  position:relative; padding-top:var(--sp-6);
  border-top:2px solid var(--ink);
}
.reason::after{ content:""; position:absolute; top:-2px; left:0; width:3.2rem; height:2px; background:var(--red); }
.reason__n{
  font-family:var(--font-mono); font-size:var(--step--1); font-weight:600;
  letter-spacing:.2em; color:var(--accent); display:block; margin-bottom:.9rem;
}
.reason h3{ font-size:var(--step-2); margin-bottom:.6rem; }
.reason p{ color:var(--muted); }

/* --------------------------------------------------------------- STORIES */
.storycard{
  display:grid; gap:0; text-decoration:none; position:relative;
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.storycard:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.storycard .imgph{ border-radius:0; }
.storycard__body{ padding:var(--sp-5); }
.storycard__meta{
  display:flex; gap:.7rem; align-items:center; flex-wrap:wrap;
  font-size:var(--step--2); letter-spacing:.1em; text-transform:uppercase;
  font-weight:700; color:var(--accent); margin-bottom:.7rem;
}
.storycard h3{ font-size:var(--step-2); margin-bottom:.5rem; }
.storycard p{ color:var(--muted); font-size:var(--step--1); }

/* -------------------------------------------------------------- PARTNERS */
.partners{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr)); }
.partner{
  background:var(--paper); min-height:118px;
  display:grid; place-items:center; gap:.5rem; padding:1.2rem; text-align:center;
}
.partner__slot{
  width:100%; max-width:130px; height:44px; border-radius:var(--r-sm);
  border:1.5px dashed var(--line);
  display:grid; place-items:center;
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:color-mix(in srgb, var(--ink) 72%, transparent);
}

/* ---------------------------------------------------------------- PEOPLE */
.person{ text-align:left; }
.person .imgph{ margin-bottom:.9rem; --ph-a:#C98A3E; --ph-b:#2B211A; }
.person h3{ font-size:var(--step-1); margin-bottom:.2rem; }
.person p{ font-size:var(--step--1); color:var(--muted); margin:0; }
.person__role{ color:var(--accent); font-weight:700; }

/* ---------------------------------------------------------------- TRACKS */
.track{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column; justify-content:flex-end;
  min-height:340px; padding:var(--sp-5);
  border-radius:var(--r-lg); color:#fff; text-decoration:none;
  background:var(--ink);
}
.track .imgph{ position:absolute; inset:0; z-index:-2; border-radius:0; }
.track::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top, rgba(10,8,6,.9), rgba(10,8,6,.25) 62%, transparent);
  transition:background var(--dur) var(--ease);
}
.track:hover::after{ background:linear-gradient(to top, rgba(10,8,6,.94), rgba(10,8,6,.5) 70%, rgba(0,0,0,.15)); }
.track__n{ font-family:var(--font-mono); font-size:var(--step--2); letter-spacing:.2em; opacity:.75; }
.track h3{ font-size:var(--step-2); margin:.3rem 0 .4rem; }
.track p{ font-size:var(--step--1); opacity:.85; margin:0 0 .8rem; max-width:34ch; }

/* ------------------------------------------------------------ PULL QUOTE */
.pullquote{
  border-left:4px solid var(--brand);
  padding-left:clamp(1.2rem,3vw,2.2rem);
}
.pullquote .quote{ font-style:italic; }

/* --------------------------------------------------------------- BANDS */
.band-deep{ background:var(--deep); color:#fff; }
.band-deep .stat{ background:#1D1A16; }
.band-deep .lede{ color:rgba(255,255,255,.8); }
.band-deep .eyebrow{ color:var(--brand); }
.band-deep .card{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); color:#fff; }
.band-deep .stats{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.2); }
.band-deep .stat{ background:#1D1A16; color:#fff; }
.band-deep .stat__label{ color:rgba(255,255,255,.75); }
.band-deep .ni{ color:rgba(255,255,255,.8); }
.band-deep .ni-figure__slot,.band-deep .stat__val{ color:rgba(255,255,255,.5); }
.band-cream{ background:var(--surface); }
.band-ink{ background:var(--ink); color:#fff; }
.band-ink .lede,.band-ink p{ color:rgba(255,255,255,.8); }
.band-ink .eyebrow{ color:var(--brand); }

/* ----------------------------------------------------------- CTA CLOSER */
.closer{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--ink); color:#fff;
  padding-block:clamp(4rem,9vw,7rem);
}
.closer::before{
  content:""; position:absolute; z-index:-1; inset:-40% -10% auto auto;
  width:min(70vw,720px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(233,161,59,.42), transparent 62%);
}
.closer h2{ font-size:var(--step-5); max-width:16ch; }

/* --------------------------------------------------------------- FIGURE */
.figure-note{ font-size:var(--step--2); color:var(--muted); margin-top:.6rem; }
.two-col-text{ column-gap:var(--sp-7); }
@media (min-width:820px){ .two-col-text{ column-count:2; } }