/* base.css — reset, page shell, typography and the shared background decoration.
   Loaded on every page, straight after tokens.css. */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);font-size:17px;
  background:var(--bg);color:var(--fg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  min-height:100vh;display:flex;flex-direction:column;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}

/* Skip link — first thing a keyboard or screen reader user meets. */
.skip{position:absolute;left:-9999px;top:0;z-index:100;padding:14px 22px;border-radius:0 0 var(--r-sm) 0;
  background:var(--red);color:#fff;font-family:var(--font-head);font-weight:700}
.skip:focus{left:0}

/* ---------- layout ---------- */
main{flex:1 0 auto;position:relative}
.section{position:relative;overflow:hidden;padding:clamp(72px,10vh,120px) 0}
.section.first{padding-top:clamp(116px,15vh,168px)}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--edge);position:relative;z-index:2}

.split{display:grid;align-items:center;gap:clamp(24px,4vw,64px);grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}
/* On a wide screen the two halves of a split start on the same line, so a
   photograph never floats above or below the text beside it. */
@media(min-width:861px){ .split{align-items:start} }

/* ---------- typography ---------- */
.eyebrow{font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;font-weight:600;
  display:inline-flex;align-items:center;gap:12px;opacity:.72;margin-bottom:16px}
.eyebrow::before{content:"";width:34px;height:1px;background:currentColor;opacity:.6}
h1,h2{font-family:var(--font-head);font-weight:800;line-height:1.02;letter-spacing:-.025em;text-wrap:balance}
h1{font-size:clamp(2.5rem,6.2vw,4.9rem)}
h2{font-size:clamp(2rem,4.4vw,3.4rem)}
h3{font-family:var(--font-head);font-weight:700;font-size:1.12rem;letter-spacing:-.012em;line-height:1.25}
.script{font-family:var(--font-head);font-weight:700;color:var(--red);font-size:.27em;
  letter-spacing:.18em;text-transform:uppercase;display:block;line-height:1.3;margin-bottom:.72em}
.lede{font-size:clamp(1.04rem,1.4vw,1.2rem);line-height:1.66;max-width:54ch;opacity:.9}
p.body{font-size:1.02rem;line-height:1.72;opacity:.88;max-width:58ch}
.hl{color:var(--red);font-weight:600}
.rule{height:1px;background:currentColor;opacity:.13;margin:34px 0}
.big-link{font-family:var(--font-head);font-size:clamp(1.5rem,3.2vw,2.35rem);font-weight:800;
  letter-spacing:-.02em;display:inline-block;position:relative;transition:color .4s var(--ease)}
.big-link::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:2px;
  background:var(--red);transition:right .55s var(--ease)}
.big-link:hover{color:var(--red)}
.big-link:hover::after{right:0}

/* ---------- background decoration ---------- */
.grain{position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.22;mix-blend-mode:overlay;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")}
.blob{position:absolute;border-radius:50% 42% 58% 46%/48% 54% 44% 56%;filter:blur(60px);
  pointer-events:none;z-index:0;animation:drift 22s ease-in-out infinite alternate}
@keyframes drift{
  0%{transform:translate3d(0,0,0) rotate(0deg) scale(1)}
  100%{transform:translate3d(4%,-5%,0) rotate(24deg) scale(1.14)}
}

/* ---------- entrance animation ---------- */
.fade-up{opacity:0;transform:translateY(26px);animation:fu .95s var(--ease) forwards}
@keyframes fu{to{opacity:1;transform:none}}
.d1{animation-delay:.06s}.d2{animation-delay:.15s}.d3{animation-delay:.24s}
.d4{animation-delay:.33s}.d5{animation-delay:.42s}.d6{animation-delay:.5s}

@media(max-width:860px){
  .split{grid-template-columns:1fr;gap:clamp(22px,5vw,34px)}
  /* Page introductions centre up on a phone. Running paragraphs stay
     left-aligned, because centred body copy is hard to read. */
  .section .eyebrow{display:flex;justify-content:center}
  .section h1,.section h2,.section .lede{text-align:center}
  .section .lede{margin-inline:auto}
  .section .ctas,.section .pills{justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .fade-up{opacity:1;transform:none}
}