/* assets/site-base.css  —  THE HOUSE RULES, applied to every page.
   ------------------------------------------------------------------
   site-nav.js loads this file (and site.css, the tokens) on every page
   that has  <script src="/assets/site-nav.js" defer></script>.
   A new page needs nothing else: no wrapper class, no font link, no
   copy of the rail maths. Everything below is what Manisha settled on in
   the September 2026 redesign, in one place.

   Two kinds of rule live here:
   1. DEFAULTS, written with :where() so they have zero specificity.
      A page's own <style> can override any of them by writing the
      same property. (Fonts, sizes, spacing, links, tables.)
   2. LOCKED rules, written with normal specificity so a page's own
      style cannot undo them. (One rail, no second gutter, light-only,
      interactives as wide as the rail, no overflow.)
   ------------------------------------------------------------------ */

/* ===== 1. rail: 1600 px max, 40 px gutter, one edge for everything ===== */
:root{--shell-max:var(--ua-page-max,1600px);}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
:where(body){margin:0;background:var(--ua-bg,#FAF9F6);color:var(--ua-text,#102436);
  font-family:var(--ua-font-sans,'Inter',system-ui,sans-serif);font-size:var(--ua-font-size-body,1rem);
  line-height:var(--ua-line-height-body,1.55);-webkit-font-smoothing:antialiased;}
*,*::before,*::after{box-sizing:border-box;}

/* LOCKED. main is the rail. Nothing inside it adds a second gutter. */
main:not(.ua-full){display:block;max-width:var(--shell-max,1600px);width:calc(100% - (2 * var(--ua-page-gutter,40px)));
  margin-left:auto;margin-right:auto;padding-left:0;padding-right:0;}
main.ua-full{width:auto;max-width:none;}
main:not(.ua-full) > .wrap,main:not(.ua-full) > .pw,main:not(.ua-full) > .page,main:not(.ua-full) > .shell,main:not(.ua-full) > .container,main:not(.ua-full) > .ua-shell{width:auto;max-width:none;margin-left:0;margin-right:0;padding-left:0;padding-right:0;}
/* Full-layout pages (home, research, publications, resources, about) are
   full-bleed on purpose; their .pw inners ARE the rail and keep their width. */
main.ua-full .pw{width:calc(100% - (2 * var(--ua-page-gutter,40px)));max-width:var(--shell-max,1600px);margin-left:auto;margin-right:auto;}
body > div.wrap:has(> main){width:auto;max-width:none;padding-left:0;padding-right:0;margin-left:0;margin-right:0;}
/* Story pages: the scrolling stage is deliberately full-bleed, but the title
   block, the collection of cards at the end, the outro and the Where-next
   block are ordinary content and sit on the rail like every other page. */
main.ua-story > *:not(#story):not(.st-stage):not(.ua-bleed):not(noscript):not(script){
  width:calc(100% - (2 * var(--ua-page-gutter,40px)));max-width:var(--shell-max,1600px);
  margin-left:auto;margin-right:auto;padding-left:0;padding-right:0;box-sizing:border-box;}
main.ua-story > #story,main.ua-story > .st-stage{width:auto;max-width:none;}
/* The two end-of-story blocks carry their own id rule (920-1040 px caps from
   before the rail existed); name them so the rail wins. */
main.ua-story > #collection,main.ua-story > #arrival{
  width:calc(100% - (2 * var(--ua-page-gutter,40px)));max-width:var(--shell-max,1600px);
  margin-left:auto;margin-right:auto;padding-left:0;padding-right:0;}
/* Old reading-column caps (900-1240 px) that pages carry: lifted to the rail. */
main .wrap,main .prose,main .intro,main .dek,main .deck,main .lead,main .lede,main .sub,main .head-wrap,main .arrive,main .arr-in,main .outro,
main .pagehead h1,main .pagehead .sub,main header.hero,main header.top h1,main header.top p.lede,main .viewcard,main .canvas-wrap,main .words,
main .short-answer,main .limits-card,main .ua-next,main .ua-toc,main .citebox,main .demo,main .module,main .topbar-in,main .footer,main .serieswrap,
main .crosslink,main:not(.ua-full) .panel,main:not(.ua-full) .card,main .lab,main .stage,main .sim,main .tool,main figure,main table,main p,main li,main blockquote{max-width:none;}
@media (min-width:700px){main .wrap,main.wrap,main .prose,main .head-wrap,main .arrive,main .outro{padding-left:0;padding-right:0;}}
/* Full-bleed sections (heroes with an image) may leave the rail on purpose,
   but the page itself never scrolls sideways. */
html,body{overflow-x:clip;}
.ua-bleed{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);}

/* ===== 2. light only ===== */
html{color-scheme:light;}
[data-theme="dark"]{color-scheme:light;}
.themebtn,#themeBtn,.theme-toggle{display:none !important;}

/* ===== 3. type: Source Serif 4 for titles and nav, Inter for text (scale A) ===== */
:where(h1,h2,h3,h4){font-family:var(--ua-font-display,'Source Serif 4',Georgia,serif);color:var(--ua-text,#102436);
  line-height:var(--ua-line-height-heading,1.15);text-wrap:balance;font-weight:600;margin:0;}
:where(main h1){font-size:var(--ua-font-size-page-title,2.6rem);letter-spacing:var(--ua-tracking-hero,-.035em);line-height:var(--ua-line-height-tight,1.08);}
:where(main h2){font-size:var(--ua-font-size-h2,1.7rem);letter-spacing:var(--ua-tracking-h2,-.02em);}
:where(main h3){font-size:var(--ua-font-size-h3,1.15rem);}
:where(main h4){font-size:1rem;}
:where(main p,main li,main dd,main figcaption,main td,main th){font-size:var(--ua-font-size-article,1.05rem);line-height:var(--ua-line-height-article,1.72);}
:where(main figcaption,main small,main .meta,main .cap){font-size:var(--ua-font-size-small,.875rem);color:var(--ua-text-muted,#5E6773);line-height:1.45;}
:where(.eyebrow,.kicker,.k){font-family:var(--ua-font-sans);font-size:var(--ua-font-size-eyebrow,.6875rem);font-weight:700;letter-spacing:var(--ua-tracking-label,.2em);text-transform:uppercase;color:var(--ua-accent-text,#C7382B);}
:where(a){color:var(--ua-accent-text,#C7382B);text-decoration:none;}
:where(a:hover){text-decoration:underline;text-underline-offset:2px;}
:where(code,kbd,pre){font-family:var(--ua-font-mono,ui-monospace,monospace);font-size:.92em;}
:where(button,input,select,textarea){font-family:inherit;font-size:inherit;}
:where(main strong){font-weight:650;}

/* ===== 4. spacing: tight. 48 px between sections, 16 px under a heading, 12 px between paragraphs ===== */
:where(main > :first-child){margin-top:0;}
:where(main p){margin:0 0 12px;}
:where(main ul,main ol){margin:0 0 12px;padding-left:1.3em;}
:where(main li + li){margin-top:4px;}
:where(main h2){margin:var(--ua-page-section-gap,48px) 0 var(--ua-heading-gap,16px);}
:where(main h3){margin:24px 0 10px;}
:where(main h4){margin:16px 0 8px;}
:where(main section + section,main article + article){margin-top:var(--ua-page-section-gap,48px);}
:where(main section[role=tabpanel]){margin-top:0;}
/* Tool page titles line up with the lab panels below them (no extra side inset). */
main .pagehead{max-width:none;margin-left:0;margin-right:0;padding-left:0;padding-right:0;}
main .pagehead h1,main .pagehead .quip,main .pagehead .sub{max-width:none;}
/* Alignment sweep (23 Sept 2026). Rule: every row in <main> starts on the rail and boxes reach its right edge;
   no narrow column beside an empty band. These win over old page-level styles, hence !important. */
main > header:not(.uax-site){max-width:none !important;margin-left:0 !important;margin-right:0 !important;padding-left:0 !important;padding-right:0 !important;}
main > header h1,main > header p,main .ua-toc,main p.intro,main p.lede,main .honest-note,main .page-hero .hero-copy{max-width:none !important;}
main:not(.ua-full) .citebox,main section.explainer{max-width:none !important;margin-left:0 !important;margin-right:0 !important;}
main section.explainer{padding-left:0 !important;padding-right:0 !important;}
main .ddc-cards{max-width:none !important;padding-left:0 !important;padding-right:0 !important;}
main .wrap,main .head-wrap{padding-left:0 !important;padding-right:0 !important;}
@media (max-width:699px){main .ahero .pw{grid-template-columns:minmax(0,1fr);}main .ahero .pw > *{min-width:0;}main .ahero h1{font-size:2.3rem;}}
main .ua-toc,main .ua-toc li{text-align:left;hyphens:none;}
:where(main figure){margin:16px 0;}
:where(main hr){border:0;border-top:1px solid var(--ua-border,#E1E6EA);margin:32px 0;}
:where(main blockquote){margin:16px 0;padding:0 0 0 16px;border-left:3px solid var(--ua-accent,#FF5F43);}
:where(main .pagehead,main header.top,main .head){margin-bottom:24px;}
:where(main .pagehead h1 + p,main header.top h1 + p,main h1 + p){margin-top:8px;}

/* ===== 5. hero: text left, picture right, picture fades into the page ===== */
:where(.ua-hero){display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px;align-items:center;
  padding:var(--ua-hero-padding,36px) 0;min-height:var(--ua-hero-visual-min-h,240px);}
:where(.ua-hero .ua-hero-img){position:relative;min-height:var(--ua-hero-visual-min-h,240px);}
:where(.ua-hero .ua-hero-img img){width:100%;height:100%;object-fit:cover;display:block;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 100%);mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 100%);}
:where(.ua-hero p){font-size:1.06rem;line-height:1.55;color:var(--ua-text-secondary,#435363);}
@media (max-width:1000px){:where(.ua-hero){grid-template-columns:1fr;gap:16px;padding:20px 0;}:where(.ua-hero .ua-hero-img){min-height:200px;}}

/* ===== 6. interactives: as wide as the rail, crisp, never overflowing ===== */
:where(main img,main video,main iframe,main svg){max-width:100%;height:auto;}
:where(main canvas){display:block;max-width:100%;}
:where(main figure > canvas,main figure > svg,main figure > img,main .panel > canvas,main .demo > canvas,main .demo-body > canvas,main .card > canvas,main .lab > canvas,main .stage > canvas){width:100%;height:auto;}
:where(main .ua-tool){display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:20px;align-items:start;}
@media (max-width:1000px){:where(main .ua-tool){grid-template-columns:minmax(0,1fr);}}
:where(main .ua-2col){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
@media (max-width:760px){:where(main .ua-2col){grid-template-columns:1fr;}}
:where(main .ua-panel,main .panel,main .viewcard,main .demo){background:var(--ua-surface,#fff);border:1px solid var(--ua-border,#E1E6EA);border-radius:var(--ua-radius-md,12px);}
:where(main .ua-panel){padding:14px;}

/* ===== 7. tables ===== */
:where(main table){width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;}
:where(main th,main td){padding:8px 10px;text-align:left;border-bottom:1px solid var(--ua-border,#E1E6EA);vertical-align:top;}
:where(main th){font-family:var(--ua-font-sans);font-size:0.69rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ua-text-muted,#5E6773);font-weight:700;}
:where(main .tablewrap,main .wide-table,main .tblwrap){overflow-x:auto;}
:where(td.num,th.num){text-align:right;}

/* ===== 8. controls (sliders, buttons, pills) ===== */
:where(main .btn,main button.btn){display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 14px;border-radius:999px;
  border:1px solid var(--ua-border,#E1E6EA);background:var(--ua-surface,#fff);color:var(--ua-text,#102436);cursor:pointer;font-size:0.88rem;}
:where(main .btn.primary,main .btn.on,main .btn[aria-pressed="true"]){background:var(--ua-accent-fill,#E22C1B);border-color:var(--ua-accent-fill,#E22C1B);color:#fff;}
:where(main input[type="range"]){accent-color:var(--ua-accent,#FF5F43);width:100%;}
:where(main .controls label){display:block;font-size:0.88rem;margin:0 0 10px;}
:where(main .pill){display:inline-block;padding:3px 10px;border-radius:999px;font-size:0.81rem;background:var(--ua-surface-soft,#F8F9FA);border:1px solid var(--ua-border,#E1E6EA);}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--ua-accent,#FF5F43);outline-offset:2px;}

/* ===== 9. callouts (Try it / Note) ===== */
:where(main .note,main .tryit,main .callout){padding:12px 16px;border-radius:var(--ua-radius-sm,8px);border-left:4px solid var(--ua-accent-secondary,#2E6EBE);
  background:var(--ua-surface-soft,#F8F9FA);margin:12px 0;font-size:1rem;}
:where(main .note.key,main .callout.key){border-left-color:var(--ua-accent,#FF5F43);}

/* ===== 10. phones ===== */
@media (max-width:767px){
  :where(main h1){font-size:2.05rem;}
  :where(main h2){font-size:1.35rem;margin-top:32px;}
  :where(main p,main li){font-size:1rem;line-height:1.6;}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*{animation-duration:.01ms !important;transition-duration:.01ms !important;}}

/* Spacing sweep (Sept 2026, rule 4 "tight spacing"): old page templates kept their own top padding,
   section gaps, a second page bar and a pill-style kicker. The site header and breadcrumbs already do those jobs. */
div.site:has(> div.wrap > a.brand){display:none !important;}
main header.hero{padding-top:20px !important;padding-bottom:8px !important;}
main header.hero .eyebrow{background:none !important;padding:0 !important;border-radius:0 !important;}
main:has(.ua-toc) ul.jump{display:none !important;}
main section.module{margin-top:16px !important;padding-top:24px !important;}
main .page-hero{padding-top:16px !important;}
main section.ed-section{margin-top:24px !important;padding-top:16px !important;}
body > div.wrap:has(> main){padding-top:4px !important;}
main > div.wrap:not(.topbar){padding-top:12px !important;}
main > div.wrap > h1:first-of-type{margin-top:0 !important;}
main div.hero{padding-top:16px !important;}
main.ua-full > section{margin-top:0 !important;}
main.ua-full > section.s{padding-top:32px !important;padding-bottom:32px !important;}