/* Shared editorial layer for every page.
   One heading pattern (title, then a deck that states the finding), hairline rules
   instead of white cards, full-width white bands for figures, and one motion budget:
   rise-and-unblur entrances on cubic-bezier(.25,1,.5,1), staggered by 70–90ms. */
:root{--ease:cubic-bezier(.25,1,.5,1);--t-data:#3f6aa1;--t-tools:#347764;--t-strategy:#915f30;--t-user:#a34a62;--t-domain:#715c95}

/* Navigation: the current-page rule is drawn in; hovering previews it in grey. */
#site-navigation a::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:3px;background:#d2d2cf;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
#site-navigation a:hover::after{transform:scaleX(1)}
#site-navigation a[aria-current=page]::after{background:var(--ink);animation:rule-in .6s .15s var(--ease) both;transform:scaleX(1)}
@keyframes rule-in{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* Arrows sit inside the underline, like the arrows written straight into link text. */
.nav-paper span{display:inline-block;transition:transform .25s var(--ease)}
.nav-paper:hover span{transform:translate(2px,-2px)}

/* Headings */
.kicker{margin:0 0 12px;font:600 .74rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
@keyframes hero-in{from{opacity:0;filter:blur(10px);transform:translateY(18px)}to{opacity:1;filter:none;transform:none}}

.page-main{padding-top:58px}
.page-heading{display:block;max-width:none;margin-bottom:52px;padding-bottom:40px;border-bottom:1px solid var(--line)}
.page-heading>*{animation:hero-in .9s cubic-bezier(.25,.1,.25,1) both}
.page-heading>:nth-child(2){animation-delay:.08s}
.page-heading>:nth-child(3){animation-delay:.2s}
.page-heading:has(+ .band){padding-bottom:0;border-bottom:0}
.page-heading h1{margin:0;font:800 var(--fs-display)/.98 var(--display);letter-spacing:-.05em;color:var(--ink)}
.page-heading>p.page-deck{max-width:52ch;margin:24px 0 0;font-size:var(--fs-lg);line-height:1.6;color:var(--ink)}
.page-deck span{color:var(--muted)}
.page-deck strong{font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}

.section-heading{max-width:760px;margin-bottom:40px}
.section-heading h2{margin:0;font:800 var(--fs-2xl)/1.08 var(--display);letter-spacing:-.04em;color:var(--ink)}
.section-heading>.section-deck{max-width:60ch;margin:16px 0 0;font-size:var(--fs-md);line-height:1.7;color:#545350}
.section-deck strong{font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums}
.section-heading>a{display:inline-block;margin-top:16px;font-size:var(--fs-sm)}
.section-heading>a+a{margin-left:32px}

/* A full-width white band for the figure a page is built around. */
.band{position:relative;margin:0 calc(50% - 50vw);padding:56px calc(50vw - 50%);background:var(--paper);border-block:1px solid var(--line)}

/* Captions keep a readable measure (about 80 characters after the hanging "Figure N.") at any width. */
.fig-label{display:flex;gap:12px;align-items:baseline;max-width:78ch;margin:0 0 8px;font:var(--fs-sm)/1.5 var(--sans);color:var(--muted)}
.fig-label>span:first-child{flex:0 0 auto;font:650 var(--fs-sm)/1.5 var(--sans);color:var(--ink)}

/* Underlined text tabs */
.text-tabs{display:flex;gap:24px;border-bottom:1px solid var(--line)}
.text-tabs button{position:relative;padding:12px 0;border:0;background:none;font-size:var(--fs-sm);font-weight:550;color:var(--muted);transition:color .15s ease}
.text-tabs button::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.text-tabs button:hover,.text-tabs button[aria-pressed=true],.text-tabs button[aria-selected=true]{color:var(--ink)}
.text-tabs button[aria-pressed=true]::after,.text-tabs button[aria-selected=true]::after{transform:scaleX(1)}

/* Scroll entrances. app.js adds .reveal-js only when motion is allowed and animates
   with the Web Animations API, so components keep their own CSS transitions. */
.reveal-js [data-reveal]:not(.is-in):not([data-reveal=stagger]),.reveal-js [data-reveal=stagger]:not(.is-in)>*{opacity:0}

@media(max-width:600px){
  .page-main{padding-top:36px}
  .page-heading{margin-bottom:36px;padding-bottom:28px}
  .page-heading h1{font-size:var(--fs-display)}
  .page-heading>p.page-deck{margin-top:16px;font-size:var(--fs-md)}
  .section-heading{margin-bottom:28px}
  .section-heading>.section-deck{margin-top:12px;font-size:var(--fs-md)}
  .band{padding-block:40px}
  .text-tabs{gap:16px}
}
@media(prefers-reduced-motion:reduce){
  .page-heading>*,#site-navigation a[aria-current=page]::after{animation:none}
}
.browser-heading>*{animation:hero-in .9s cubic-bezier(.25,.1,.25,1) both}
.browser-heading>:nth-child(2){animation-delay:.12s}
@media(prefers-reduced-motion:reduce){.browser-heading>*{animation:none}}

/* ===== Colour blocks ======================================================
   Every page opens on one full-width dark block holding only its title and deck.
   The block bleeds to the window edges with an outset border image (one solid fill, painted
   in a single pass so its edges cannot seam); outset paint never widens the page. */
.full-bleed,.page-heading,.home-intro{border-image:linear-gradient(var(--block) 0 0) fill 0/0/0 100vmax}
.page-main:has(>.page-heading:first-child){padding-top:0}
.page-heading,.page-heading:has(+ .band){max-width:none;margin-bottom:64px;padding:72px 0 76px;border-bottom:0;color:var(--on-block)}
.page-heading h1{color:var(--on-block)}
.page-heading>p.page-deck{max-width:46ch;color:var(--on-block)}
.page-heading .page-deck span{color:var(--on-block-muted)}
.page-heading :focus-visible{outline-color:var(--on-block)}
.page-heading+.band{padding-top:0;border-top:0}
/* A title with a deck sets them side by side, bottoms aligned, so the block has no empty half;
   at 900px and below they stack again. */
@media(min-width:901px){
  .page-heading:has(>p.page-deck){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:80px;align-items:end}
  .page-heading:has(>p.page-deck)>p.page-deck{max-width:46ch;margin:0 0 6px}
}
@media(max-width:600px){
  .page-heading,.page-heading:has(+ .band){margin-bottom:40px;padding:44px 0 48px}
}