/* Root 7 brand typography, as on the live site: Prata for headings, Inter for text.
   Loaded after site.css by the website pages only (the film keeps its own type). */

:root{
  --display:"Prata",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --mono:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
body{font-weight:300;letter-spacing:0;line-height:1.65}
strong,b{font-weight:500}

/* Prata has one weight. Never let the browser fake a bold or an italic from it. */
h1,h2,h3,h4,.intertitle,.targets dt{font-family:var(--display);font-weight:400;font-style:normal;font-synthesis:none;letter-spacing:-.012em;line-height:1.12}
.hero h1{font-size:clamp(2.5rem,4.9vw,4.4rem);line-height:1.06;letter-spacing:-.018em}
.page-hero h1{font-size:clamp(2.3rem,4.3vw,3.8rem);line-height:1.08;letter-spacing:-.015em;max-width:18ch}
.cta h2{font-size:clamp(2.2rem,4.3vw,3.8rem);line-height:1.08;letter-spacing:-.015em}
.h2{font-size:clamp(1.95rem,3.4vw,3rem);line-height:1.12;max-width:20ch}
.spot-card .h2{font-size:clamp(1.65rem,2.6vw,2.35rem)}
.intertitle{font-size:clamp(1.5rem,2.6vw,2.3rem);line-height:1.25}
.area h3{font-size:1.7rem}
.targets dt{font-size:clamp(2.1rem,3.4vw,2.9rem);letter-spacing:-.01em}
.model-panel h3{font-size:1.5rem;letter-spacing:-.01em}

/* Small working headings read better in the text face */
.problem h3,.expect h2,.foot h2,.wa-menu h2,.stage h3,.who h3,.model-list h3,.model-steps h3{font-family:var(--sans);font-weight:500;letter-spacing:-.005em;line-height:1.3}
.stage h3{font-size:1.08rem}
.who h3{font-size:1.02rem}

.lede{font-weight:300}
.prose p.big{font-weight:300}
.btn,.nav .btn{font-weight:500}
.nav a{font-weight:400}
.node span{font-weight:500}
.status,.more,.field label{font-weight:500}

/* The live wordmark */
.brand svg{width:122px;aspect-ratio:1790/589}
.foot .brand svg{width:132px}
@media (max-width:640px){.brand svg{width:104px}}

/* The dusk and dawn glow, in the brand's mint (the cursor colour) instead of orange. */
.grade-warm{background:
  radial-gradient(ellipse 85% 50% at 62% 80%,rgba(142,216,194,.17),transparent 68%),
  linear-gradient(0deg,rgba(18,64,58,.36),transparent 58%)}

/* The hero tree now runs behind the header, so the header carries its own shade until it turns to glass. */
.site-header:not(.scrolled){background:linear-gradient(180deg,rgba(6,8,11,.86),rgba(6,8,11,.5) 60%,transparent)}
.nav a{color:var(--text)}
.rail{text-shadow:0 0 10px #06080B,0 0 4px #06080B}