/* Bluebonnet Genome Foundation.
Part 1 is the original stylesheet (kept so pages that have not been converted still render).
Part 2 is the "Chapters" layout system v2. New pages compose from part 2.
Colors are measured from the campaign artwork; see bb-design/design-language.md. */
/* ==========================================================================
0. Tokens
========================================================================== */
:root{
/* brand */
--navy:#1B2A55;
--blue:#2D4CAE;
--blue-soft:#E9EEFA;
--cobalt:#15329E; /* numerals and big figures only */
--sage:#4A6656; /* AA on every tint we use (was #5E7C69) */
--sage-soft:#EAF1EC;
--sage-badge:#DEE6DE;
--sage-ink:#3A5246;
--sage-rule:#78957A;
--sky:#E1EBF5;
--sky-wash:#E7F0FA;
--ink:#24304F;
--muted:#56627E;
--line:#DCE2EF;
--glass:rgba(255,255,255,.94);
--glass-line:#DDE6F3;
--tile:#F7F8F8;
--tile-line:#E9EDF2;
--field-line:#7C89A8; /* form field borders: 3.50:1, WCAG 1.4.11 */
--bg:#FFFFFF;
--bg-alt:#F5F7FC;
--warn:#9A4E17;
--warn-soft:#FBF0E6;
--script-ink:#2F4062;
/* shape */
--radius:14px;
--r-card:22px; --r-banner:20px; --r-tile:15px; --r-sm:12px;
--shadow-soft:0 10px 30px rgba(27,42,85,.06);
--shadow-lift:0 16px 40px rgba(27,42,85,.09);
--shadow-cut:drop-shadow(0 18px 42px rgba(27,42,85,.10));
/* type */
--display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
--body:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
--script:"Oooh Baby","Segoe Script","Snell Roundhand",cursive;
--t-display:clamp(2.9rem,1.55rem + 5.6vw,5.6rem); /* short campaign titles */
--t-sentence:clamp(2.05rem,1.35rem + 2.2vw,3.3rem); /* sentence-length H1s */
--t-h1:clamp(2.35rem,1.5rem + 3.5vw,4.1rem);
--t-h2:clamp(1.95rem,1.4rem + 2.2vw,3rem);
--t-h3:clamp(1.28rem,1.15rem + .6vw,1.6rem);
--t-quote:clamp(1.85rem,1.05rem + 3.3vw,3.5rem);
--t-num:clamp(2.7rem,1.5rem + 4.6vw,4.9rem);
--t-lede:clamp(1.16rem,1.05rem + .52vw,1.42rem);
--t-body:clamp(1.0625rem,1.02rem + .22vw,1.18rem); /* 17px floor */
--t-small:clamp(.94rem,.9rem + .18vw,1rem); /* 15px floor */
--t-caps:clamp(.8rem,.76rem + .2vw,.92rem); /* 12.8px floor */
--measure:63ch;
--measure-tight:52ch;
/* space */
--s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
--s7:clamp(40px,4.4vw,56px);
--s8:clamp(56px,6.4vw,80px);
--s9:clamp(72px,9vw,120px);
--s10:clamp(96px,13vw,176px);
/* grid */
--gutter:clamp(20px,5vw,44px);
--wrap:1160px;
--col-gap:clamp(14px,1.6vw,24px);
--col:calc((var(--wrap) - 11 * var(--col-gap)) / 12);
--feature-pad:clamp(0px,6.4vw,140px);
/* layering. The header sits above everything. */
--z-back:0; --z-photo:1; --z-panel:2; --z-text:3; --z-float:4;
/* motion */
--ease:cubic-bezier(.2,.7,.2,1);
--dur:200ms;
/* the sticky header. Anchors, the Act rail and hanging heads all read this. */
--header-h:66px;
/* the bar's own minimum height. Kept separate from --header-h: site.js writes the measured header
height into --header-h, so the bar must never read it back or the header grows on every frame. */
--bar-min:66px;
color-scheme:light;
}
@media (max-width:420px){:root{--header-h:58px;--bar-min:58px}}
/* ==========================================================================
1. Base
========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);
font:400 var(--t-body)/1.62 var(--body);
-webkit-font-smoothing:antialiased;
overflow-x:clip;
padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
img{max-width:100%;height:auto}
a{color:var(--blue)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}
/* on a navy surface the blue ring is 1.83:1, so it turns white */
.on-navy a:focus-visible,.on-navy button:focus-visible,.on-navy summary:focus-visible,
a.on-navy:focus-visible,.next-steps .give .row-link:focus-visible{outline-color:#fff}
.skip{position:absolute;left:-9999px;top:8px;background:var(--navy);color:#fff;padding:8px 14px;border-radius:8px;z-index:30}
.skip:focus{left:12px}
.wrap{width:100%;max-width:1120px;margin:0 auto;padding-inline:20px}
h1,h2,h3{font-family:var(--display);color:var(--navy);font-weight:700;letter-spacing:-.018em;text-wrap:balance;margin:0}
h1{font-size:var(--t-h1);line-height:.99}
h2{font-size:var(--t-h2);line-height:1.04}
h3{font-size:var(--t-h3);line-height:1.16;letter-spacing:-.008em}
p{margin:0}
.muted{color:var(--muted)}
.stack>*+*{margin-top:16px}
/* the inline SVG sprite build.mjs injects after the skip link */
.bb-sprite{position:absolute;width:0;height:0;overflow:hidden}
/* ==========================================================================
2. Original components (kept: pages not yet converted still render)
========================================================================== */
.eyebrow{display:flex;align-items:center;gap:var(--s3);margin:0 0 var(--s4);
font:600 var(--t-caps)/1.2 var(--body);letter-spacing:.26em;text-transform:uppercase;color:var(--sage)}
.eyebrow::after{content:"";flex:none;width:clamp(40px,6vw,72px);height:2px;border-radius:2px;
background:var(--sage-rule);transform-origin:0 50%}
.eyebrow--plain::after{display:none}
@media (max-width:640px){
.eyebrow{display:block}
.eyebrow::after{display:block;width:44px;margin-top:var(--s3)}
}
.rule{display:block;width:40px;height:2px;border-radius:2px;background:var(--sage-rule)}
.rule.long{width:clamp(64px,8.8vw,98px)}
.lede{font-size:var(--t-lede);line-height:1.5;color:var(--ink);max-width:var(--measure-tight)}
.lede-narrow{max-width:30ch}
.lede-wide{max-width:var(--measure)}
/* language bar above the header */
.util-bar{background:var(--navy)}
.util-inner{max-width:var(--wrap);margin:0 auto;padding:3px var(--gutter);display:flex;justify-content:flex-end}
.lang-switch{display:inline-flex;align-items:center;gap:6px;color:#fff;text-decoration:none;font-size:.94rem;font-weight:500;padding:4px 10px;border-radius:999px;min-height:26px}
.util-bar .lang-switch:hover{background:rgba(255,255,255,.14)}
.lang-switch svg{flex:none}
/* header */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;position:relative;
min-height:var(--bar-min);padding-block:10px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--navy)}
.brand img{width:40px;height:40px;border-radius:50%}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-name{font-family:var(--display);font-weight:700;font-size:1.35rem;letter-spacing:.12em;text-transform:uppercase}
.brand-sub{font-size:.68rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.bar-end{display:flex;align-items:center;gap:10px}
.menu>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;min-height:44px;
font-weight:600;font-size:.95rem;color:var(--navy);border:1px solid var(--line);border-radius:999px;padding:0 16px}
.menu summary::-webkit-details-marker{display:none}
.menu nav{position:absolute;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 12px 30px rgba(27,42,85,.12);padding:8px;display:flex;flex-direction:column;min-width:260px;max-height:calc(100vh - 110px);overflow-y:auto;z-index:2}
.menu nav a,.sub>summary{color:var(--ink);text-decoration:none;padding:11px 14px;border-radius:10px;font-weight:500;min-height:44px;display:flex;align-items:center}
.menu nav a:hover,.sub>summary:hover{background:var(--bg-alt)}
.menu nav a[aria-current="page"]{color:var(--blue);background:var(--blue-soft)}
/* dropdown groups: a tap-to-open list inside the phone menu, a drop-down panel on wide screens */
.sub>summary{list-style:none;cursor:pointer;justify-content:space-between;gap:8px}
.sub>summary::after{content:"";flex:none;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s}
.sub[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
.sub[data-current]>summary{color:var(--blue)}
.sub-panel{display:flex;flex-direction:column;margin:2px 0 6px 14px;padding-left:8px;border-left:2px solid var(--line)}
.donate-btn{display:inline-flex;align-items:center;min-height:44px;font-weight:600;font-size:.95rem;text-decoration:none;background:var(--navy);color:#fff;border-radius:999px;padding:0 18px;white-space:nowrap}
.donate-btn:hover{background:var(--blue)}
.donate-btn[aria-current="page"]{background:var(--blue)}
.donate-btn:focus-visible{outline-color:var(--navy)}
@media (max-width:460px){
.bar{gap:10px}
.bar-end{gap:8px}
.brand{gap:8px}
.brand-name{font-size:1.1rem;letter-spacing:.08em}
.brand-sub{font-size:.52rem;letter-spacing:.22em}
.menu>summary,.donate-btn{padding-inline:13px}
}
/* no room for the wordmark beside Menu and Donate below 390px; the link keeps its aria-label */
@media (max-width:389px){.brand-text{display:none}}
/* The width at which the menu becomes a row of links. It is published as --menu-bp because CSS
cannot put a custom property in a media query: site.js and the header's inline script both read
the token, so changing the number here changes all three. */
:root{--menu-bp:1280px}
@media (min-width:1280px){
.bar-end{gap:14px}
.menu>summary{display:none}
.menu nav{position:static;display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;gap:2px;border:0;box-shadow:none;padding:0;min-width:0;background:transparent;max-height:none;overflow:visible}
.menu nav a,.sub>summary{padding:8px 10px;font-size:.94rem;min-height:40px;white-space:nowrap}
.sub{position:relative}
.sub-panel{position:absolute;left:0;top:calc(100% + 8px);min-width:250px;margin:0;padding:8px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:0 12px 30px rgba(27,42,85,.12);z-index:6}
.sub-panel::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.menu .sub-panel a{padding:10px 14px}
}
/* sections */
.section{padding-block:72px}
.section.alt{background:linear-gradient(180deg,#fff 0,var(--sky-wash) 30%,var(--sky-wash) 70%,#fff 100%)}
.section-head{max-width:720px;margin-bottom:34px}
.section-head .lede{margin-top:14px}
/* hero */
.hero{padding-block:56px 64px;background:linear-gradient(180deg,#fff 0%,#fff 55%,var(--sky-wash) 100%)}
.hero-grid{display:grid;gap:36px;align-items:center}
@media (min-width:900px){.hero-grid{grid-template-columns:1.15fr .85fr}}
.hero h1{margin-bottom:18px}
.hero-art{justify-self:center;width:min(360px,78vw)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.legal-status{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 0 20px;max-width:60ch;font-size:.95rem;color:var(--muted)}
/* no capitals here: the legal term is 501(c)(3), lowercase c */
.legal-status .pill{align-self:center;text-transform:none;letter-spacing:.02em;font-size:.8rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 1rem var(--body);text-decoration:none;border-radius:999px;padding:12px 22px;min-height:48px;border:1px solid transparent;cursor:pointer;
transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.btn.primary{background:var(--navy);color:#fff}
.btn.primary:hover{background:var(--blue)}
.btn.ghost{border-color:var(--navy);color:var(--navy);background:transparent}
.btn.ghost:hover{background:var(--blue-soft)}
.page-hero{padding-block:56px 40px;background:linear-gradient(180deg,#fff 0%,var(--sky-wash) 100%);border-bottom:1px solid var(--line)}
.page-hero .lede{margin-top:16px}
/* facts */
.facts{display:grid;gap:18px}
@media (min-width:760px){.facts{grid-template-columns:repeat(3,1fr)}}
.fact{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.fact .num{font-family:var(--display);font-weight:700;font-size:3rem;line-height:1;color:var(--cobalt);font-variant-numeric:lining-nums}
.fact p{margin-top:10px}
.fact .src{display:block;margin-top:12px;font-size:.8rem;color:var(--muted)}
/* cards */
.cards{display:grid;gap:18px}
@media (min-width:760px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.cards.three{grid-template-columns:repeat(3,1fr)}.cards.four{grid-template-columns:repeat(4,1fr)}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;display:flex;flex-direction:column;gap:12px}
.card h3{font-size:1.5rem}
.pill{align-self:flex-start;font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;border-radius:999px;padding:4px 10px;background:var(--sage-soft);color:var(--sage)}
.pill.blue{background:var(--blue-soft);color:var(--blue)}
.card .more{margin-top:auto;font-weight:600;text-decoration:none}
.card .more:hover{text-decoration:underline}
/* lists and prose */
.prose{max-width:70ch}
.prose h2{margin-top:44px;margin-bottom:12px}
.prose h3{margin-top:28px;margin-bottom:8px}
.prose p+p{margin-top:14px}
.prose ul{padding-left:1.2em;margin:14px 0 0}
.prose li+li{margin-top:8px}
.checklist{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:12px}
.checklist li{position:relative;padding-left:32px}
.checklist li::before{content:"";position:absolute;left:0;top:.35em;width:18px;height:18px;border-radius:50%;background:var(--sage-soft);box-shadow:inset 0 0 0 5px var(--sage)}
.two-col{display:grid;gap:40px}
@media (min-width:900px){.two-col{grid-template-columns:1fr 1fr}}
.callout{background:var(--blue-soft);border-radius:var(--radius);padding:22px 24px}
.callout h3{margin-bottom:8px}
.timeline{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:0;border-left:2px solid var(--line)}
.timeline li{padding:0 0 18px 22px;position:relative}
.timeline li::before{content:"";position:absolute;left:-7px;top:.45em;width:12px;height:12px;border-radius:50%;background:var(--blue)}
.timeline b{display:block;color:var(--navy)}
/* resources */
.resources{display:grid;gap:14px}
@media (min-width:760px){.resources{grid-template-columns:repeat(2,1fr)}}
.res{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px}
.res a{font-weight:600;text-decoration:none;font-size:1.05rem}
.res a:hover{text-decoration:underline}
.res p{margin-top:6px;color:var(--muted);font-size:.96rem}
.res-group+.res-group{margin-top:40px}
.res-group h2{font-size:1.8rem;margin-bottom:16px}
/* people */
.people{display:grid;gap:18px}
@media (min-width:760px){.people{grid-template-columns:repeat(2,1fr)}}
.person{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}
.avatar{width:72px;height:72px;border-radius:50%;background:var(--sky);display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:1.6rem;color:var(--navy)}
/* a photographic avatar fills its circle rather than sitting in it */
img.avatar.board-photo{display:block;object-fit:cover;object-position:50% 22%;background:var(--sky);box-shadow:0 2px 10px rgba(27,42,85,.14)}
.person h3{font-size:1.5rem}
.person .role{font-size:.9rem;color:var(--sage);font-weight:600;margin-top:2px}
.person p{margin-top:10px}
/* draft placeholders (replace before launch) */
.draft{border:2px dashed var(--warn);background:var(--warn-soft);color:var(--ink);border-radius:12px;padding:14px 16px}
.draft::before{content:"Draft: replace before launch";display:block;font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--warn);margin-bottom:6px}
:root:lang(es) .draft::before{content:"Borrador: reemplazar antes de publicar"}
/* signup */
.signup{background:var(--glass);border:1px solid var(--glass-line);border-radius:var(--r-card);padding:28px;box-shadow:var(--shadow-soft)}
.signup h2{font-size:clamp(1.7rem,3.4vw,2.2rem)}
.signup .form-intro{margin-top:10px}
.form-grid{display:grid;gap:16px;margin-top:20px}
@media (min-width:700px){.form-grid.two{grid-template-columns:1fr 1fr}}
.field{display:flex;flex-direction:column;gap:6px;font-weight:500;font-size:.95rem}
.field input,.field select{font:400 1rem var(--body);color:var(--ink);background:#fff;border:1px solid var(--field-line);border-radius:10px;padding:12px;width:100%;min-height:48px}
.field input:focus,.field select:focus{border-color:var(--blue)}
fieldset{border:0;padding:0;margin:0}
legend{font-weight:500;font-size:.95rem;padding:0;margin-bottom:8px}
.checks{display:grid;gap:8px}
@media (min-width:700px){.checks{grid-template-columns:1fr 1fr}}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.96rem;min-height:24px}
.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--navy);flex:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{font-size:var(--t-small);color:var(--muted)}
.form-status{min-height:1.5em;font-weight:500}
.form-status.ok{color:var(--sage)}
.form-status.bad{color:var(--warn)}
/* Lone Star Genome Act page */
.act-hero{padding-block:56px 0;background:linear-gradient(180deg,#fff 0%,var(--sky-wash) 100%);border-bottom:1px solid var(--line)}
.act-hero .lede{margin-top:16px}
.act-status{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.act-status span{font-size:.8rem;font-weight:600;letter-spacing:.04em;border-radius:999px;padding:6px 12px;background:#fff;border:1px solid var(--line);color:var(--navy)}
.act-status .now{background:var(--navy);border-color:var(--navy);color:#fff}
.stat-strip{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin:36px 0 -32px;position:relative;box-shadow:0 14px 34px rgba(27,42,85,.07)}
@media (min-width:900px){.stat-strip{grid-template-columns:repeat(4,1fr)}}
.stat{background:#fff;padding:18px 20px;display:flex;flex-direction:column;gap:6px}
.stat b{font-family:var(--display);font-weight:700;font-size:2.3rem;line-height:1;color:var(--cobalt);font-variant-numeric:lining-nums}
.stat span{font-size:.9rem;color:var(--muted);line-height:1.4}
.act-layout{display:grid;gap:8px;padding-top:64px}
@media (min-width:1040px){.act-layout{grid-template-columns:210px minmax(0,1fr);gap:48px}}
.toc-box{border:1px solid var(--line);border-radius:12px;background:#fff}
.toc-box summary{cursor:pointer;list-style:none;padding:12px 16px;font-weight:600;color:var(--navy);display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
.toc-box summary::-webkit-details-marker{display:none}
.toc ol{list-style:none;margin:0;padding:0 8px 10px;counter-reset:toc}
.toc li a{display:block;padding:9px 10px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:.95rem}
.toc li a:hover{background:var(--bg-alt);color:var(--blue)}
@media (min-width:1040px){
.toc{position:sticky;top:calc(var(--header-h) + var(--s5));align-self:start}
.toc-box{border:0;background:transparent}
.toc-box summary{padding:0 10px 8px;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sage);cursor:default;pointer-events:none}
.toc-box summary::after{display:none}
.toc ol{padding:0;border-left:2px solid var(--line)}
.toc li a{border-radius:0 8px 8px 0;margin-left:-2px;border-left:2px solid transparent}
.toc li a:hover{border-left-color:var(--blue)}
}
.act-main{min-width:0}
.act-section{padding-block:44px;border-bottom:1px solid var(--line);scroll-margin-top:calc(var(--header-h) + var(--s4))}
.act-section:last-child{border-bottom:0}
.act-section h2{margin-bottom:14px}
.act-section>.lede{margin-bottom:24px}
.glance{display:grid;gap:12px;margin:22px 0 0}
@media (min-width:700px){.glance{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1200px){.glance{grid-template-columns:repeat(3,1fr)}}
.glance div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.glance dt{font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--sage)}
.glance dd{margin:6px 0 0}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
table.compare{border-collapse:collapse;width:100%;min-width:620px;font-size:.95rem}
table.compare caption{position:absolute;left:-9999px}
table.compare th,table.compare td{text-align:left;vertical-align:top;padding:13px 16px;border-bottom:1px solid var(--line)}
table.compare thead th{background:var(--navy);color:#fff;font-weight:600;font-size:.9rem}
table.compare tbody th{color:var(--navy);font-weight:600;width:22%}
table.compare td.us{background:var(--blue-soft)}
table.compare tbody tr:last-child th,table.compare tbody tr:last-child td{border-bottom:0}
.flow{list-style:none;margin:22px 0 0;padding:0;counter-reset:step;display:grid;gap:14px}
@media (min-width:760px){.flow{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1200px){.flow{grid-template-columns:repeat(3,1fr)}}
.flow li{counter-increment:step;position:relative;background:#fff;border:1px solid var(--line);border-radius:12px;padding:62px 18px 18px}
.flow li::before{content:counter(step);position:absolute;left:18px;top:18px;width:32px;height:32px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:600;font-size:.95rem}
.flow h3{font-size:1.3rem;margin-bottom:6px}
.protect{display:grid;gap:12px}
@media (min-width:700px){.protect{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1200px){.protect{grid-template-columns:repeat(3,1fr)}}
.protect article{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px}
.protect h3{font-size:1.25rem;margin-bottom:6px;padding-left:26px;position:relative}
.protect h3::before{content:"";position:absolute;left:0;top:.28em;width:16px;height:16px;border-radius:50%;background:var(--sage-soft);box-shadow:inset 0 0 0 4px var(--sage)}
.facts-list{display:grid;gap:14px;margin-top:22px}
@media (min-width:760px){.facts-list{grid-template-columns:repeat(2,1fr)}}
.facts-list>div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px}
.facts-list h3{font-size:1.3rem;margin-bottom:6px}
.track{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:0}
@media (min-width:900px){.track{grid-template-columns:repeat(6,1fr)}}
.track li{position:relative;padding:0 0 22px 34px;border-left:2px solid var(--line);margin-left:9px}
.track li::before{content:"";position:absolute;left:-11px;top:0;width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--line)}
.track li.done::before{background:var(--sage);border-color:var(--sage)}
.track li.now::before{background:#fff;border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-soft)}
.track b{display:block;color:var(--navy)}
.track span{display:block;font-size:.92rem;color:var(--muted);margin-top:2px}
/* "In progress" as real markup. Page builders use In progress
(Spanish "En curso"). The CSS-generated fallback below keeps the current page correct in both
languages until that page is converted, and disappears as soon as a real tag is present. */
.track-tag{display:inline-block;margin-left:8px;font-size:.8rem;font-weight:600;letter-spacing:.1em;
text-transform:uppercase;color:var(--blue);background:var(--blue-soft);border-radius:999px;padding:3px 8px;vertical-align:.12em}
.track li.now b:not(:has(.track-tag))::after{content:"In progress";margin-left:8px;font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);background:var(--blue-soft);border-radius:999px;padding:3px 8px}
:root:lang(es) .track li.now b:not(:has(.track-tag))::after{content:"En curso"}
@media (min-width:900px){
.track li{padding:34px 12px 0 0;border-left:0;border-top:2px solid var(--line);margin-left:0}
.track li::before{left:0;top:-11px}
.track li.now b:not(:has(.track-tag))::after{display:table;margin:6px 0 0}
.track-tag{display:table;margin:6px 0 0}
}
.faq{display:grid;gap:10px;margin-top:22px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:12px}
.faq summary{list-style:none;cursor:pointer;padding:15px 18px;font-weight:600;color:var(--navy);display:flex;justify-content:space-between;gap:12px;min-height:52px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
/* plus and minus drawn as two bars: no en dash glyph, and it survives forced colors */
.faq summary::after,.toc-box summary::after{content:"";flex:none;align-self:center;width:16px;height:16px;
background:
linear-gradient(var(--blue),var(--blue)) 50% 50%/16px 2px no-repeat,
linear-gradient(var(--blue),var(--blue)) 50% 50%/2px 16px no-repeat;
transition:background-size var(--dur) var(--ease)}
.faq details[open] summary::after,.toc-box[open] summary::after{background-size:16px 2px,2px 0}
.toc-box summary::after{background-image:linear-gradient(var(--muted),var(--muted)),linear-gradient(var(--muted),var(--muted))}
.faq details p{padding:0 18px 16px;color:var(--ink)}
.small-h{font-size:1.4rem}
.sources ul{margin:12px 0 0;padding-left:1.2em;font-size:.92rem;color:var(--muted)}
.sources li+li{margin-top:6px}
/* footer */
.site-footer{background:var(--navy);color:#DDE3F3;padding-block:48px 28px;margin-top:0}
.site-footer a{color:#fff}
.foot-grid{display:grid;gap:28px}
@media (min-width:860px){.foot-grid{grid-template-columns:1fr 1.6fr;align-items:start}}
.foot-brand{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
/* a flex child will not shrink below its longest unbreakable word, and the email address is one.
min-width:0 lets it shrink; overflow-wrap lets the address break rather than push the page wide. */
.foot-brand p{min-width:0;overflow-wrap:anywhere}
/* An email address or URL shown as visible text is one unbreakable word and will push a
narrow page sideways. Let those break; ordinary prose is untouched. */
a[href^="mailto:"],a[href^="http"]:not(.pill-cta):not(.btn),.email-big{overflow-wrap:anywhere}
.foot-brand img{background:#fff;border-radius:50%;padding:4px;width:72px;height:auto}
.foot-nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:24px 20px}
.foot-nav div{display:flex;flex-direction:column;gap:4px}
.foot-h{font-family:var(--body);font-size:.8rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#B9C3DE;margin-bottom:2px}
.foot-nav a{text-decoration:none;padding-block:6px}
.foot-nav a:hover{text-decoration:underline}
.foot-legal{margin-top:32px;padding-top:18px;border-top:1px solid rgba(255,255,255,.15);font-size:var(--t-small);color:#B9C3DE;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px}
.foot-legal .lang-switch{padding:0;font-size:var(--t-small);text-decoration:underline}
/* in-page link targets: land below the sticky header, and show where you landed */
[id]{scroll-margin-top:calc(var(--header-h) + var(--s5))}
.card:target,.res-group:target{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.inline-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
/* donate and contact */
.btn-big{font-size:1.15rem;padding:16px 34px;min-height:60px}
.give-soon{margin-top:26px;max-width:720px;background:#fff;border:1px solid var(--glass-line);border-radius:var(--r-card);padding:24px 26px;box-shadow:var(--shadow-soft)}
.give-soon h2{font-size:clamp(1.6rem,3.2vw,2rem);margin-top:12px}
.give-soon p{margin-top:10px}
.email-box{margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;background:#fff;border:1px solid var(--glass-line);border-radius:var(--r-card);padding:20px 24px;max-width:720px}
.email-label{flex-basis:100%;font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--sage)}
.email-big{font-size:clamp(1.15rem,4.4vw,1.5rem);font-weight:600;word-break:break-all}
.copy-btn{padding:10px 16px;font-size:.92rem;min-height:44px}
.email-tip{flex-basis:100%;font-size:.9rem}
/* ==========================================================================
3. Layout system v2 - "Chapters"
========================================================================== */
/* ---- 3.1 One canvas grid, site-wide ------------------------------------ */
/* Named break-out lines. Every child defaults to `wrap`; break out by naming
a line, e.g. grid-column: c 7 / full-end. */
.canvas{
display:grid;
position:relative; /* the containing block for .ch-plate */
column-gap:var(--col-gap);
grid-template-columns:
[full-start] minmax(var(--gutter),1fr)
[feature-start] minmax(0,var(--feature-pad))
[wrap-start] repeat(12,[c] minmax(0,var(--col)))
[wrap-end] minmax(0,var(--feature-pad))
[feature-end] minmax(var(--gutter),1fr)
[full-end];
}
.canvas > *{grid-column:wrap}
.bleed-full{grid-column:full}
.bleed-feature{grid-column:feature}
/* The gutter and the feature pad each pick up a column gap, which on a phone would push the
reading column in by another 28px on each side. Take that back below 900px so the side margin
really is the gutter. Desktop is left exactly as it was measured. */
@media (max-width:899px){
.canvas{--feature-pad:0px;
grid-template-columns:
[full-start] minmax(max(0px,calc(var(--gutter) - 2 * var(--col-gap))),1fr)
[feature-start] minmax(0,var(--feature-pad))
[wrap-start] repeat(12,[c] minmax(0,var(--col)))
[wrap-end] minmax(0,var(--feature-pad))
[feature-end] minmax(max(0px,calc(var(--gutter) - 2 * var(--col-gap))),1fr)
[full-end]}
}
/* Placement utilities live only at 900px and up, so phones fall back to one
`wrap` column with nothing to undo. .cA-B spans columns A to B inclusive. */
@media (min-width:900px){
.c1-3{grid-column:c 1 / c 4} .c1-4{grid-column:c 1 / c 5}
.c1-5{grid-column:c 1 / c 6} .c1-6{grid-column:c 1 / c 7}
.c1-7{grid-column:c 1 / c 8} .c1-8{grid-column:c 1 / c 9}
.c1-9{grid-column:c 1 / c 10} .c1-10{grid-column:c 1 / c 11}
.c1-11{grid-column:c 1 / c 12} .c1-12{grid-column:c 1 / wrap-end}
.c2-7{grid-column:c 2 / c 8} .c2-8{grid-column:c 2 / c 9}
.c2-9{grid-column:c 2 / c 10} .c2-11{grid-column:c 2 / c 12}
.c3-9{grid-column:c 3 / c 10} .c3-11{grid-column:c 3 / c 12}
.c4-10{grid-column:c 4 / c 11} .c4-11{grid-column:c 4 / c 12}
.c4-12{grid-column:c 4 / wrap-end}
.c5-10{grid-column:c 5 / c 11} .c5-11{grid-column:c 5 / c 12}
.c5-12{grid-column:c 5 / wrap-end}
.c6-12{grid-column:c 6 / wrap-end}
.c7-12{grid-column:c 7 / wrap-end}
.c8-12{grid-column:c 8 / wrap-end}
.c9-12{grid-column:c 9 / wrap-end}
/* break-outs: one edge on a column line, the other off the page */
.c5-full{grid-column:c 5 / full-end}
.c6-full{grid-column:c 6 / full-end}
.c7-full{grid-column:c 7 / full-end}
.c8-full{grid-column:c 8 / full-end}
.full-c5{grid-column:full-start / c 5}
.full-c6{grid-column:full-start / c 6}
.full-c7{grid-column:full-start / c 7}
.full-c8{grid-column:full-start / c 8}
.c1-feat{grid-column:c 1 / feature-end}
.feat-c12{grid-column:feature-start / wrap-end}
.feat-c7{grid-column:feature-start / c 7}
.c7-feat{grid-column:c 7 / feature-end}
/* rows, for deliberate overlap inside a chapter */
.row1{grid-row:1}.row2{grid-row:2}.row3{grid-row:3}
.row1-2{grid-row:1 / 3}.row1-3{grid-row:1 / 4}.row2-3{grid-row:2 / 4}
}
/* ---- 3.2 Chapter rhythm ------------------------------------------------- */
.ch{position:relative;padding-block:var(--s9)}
.ch--airy{padding-block:var(--s10)}
.ch--tight{padding-block:var(--s8)}
.ch--band{padding-block:0}
.ch--quiet{padding-block:var(--s10)}
.ch--index{padding-block:var(--s9)}
.ch p + p{margin-top:var(--s5)}
/* a chapter climbs into the one above it */
.ch--lift{margin-block-start:calc(-1 * var(--lift,var(--s8)))}
.lifted{position:relative;z-index:var(--z-panel)}
/* chapter surfaces. Never a flat grey band. */
.sky-wash{background:linear-gradient(176deg,#fff 0,var(--sky-wash) 46%,#fff 100%)}
.sky-right{background:linear-gradient(104deg,#fff 0,#fff 42%,var(--sky-wash) 100%)}
.sage-panel{background:var(--sage-soft)}
/* A tinted plate on the grid behind a chapter. It is positioned rather than placed, so it never
pushes an auto-placed sibling into a second row: put it first inside the canvas, give it a
column utility, and the rest of the chapter lays out as if it were not there. --plate-y is how
far it reaches past the content, into the chapter's own padding. */
.ch-plate{position:absolute;left:0;right:0;pointer-events:none;z-index:var(--z-back);
top:calc(-1 * var(--plate-y,var(--s7)));bottom:calc(-1 * var(--plate-y,var(--s7)));
background:linear-gradient(126deg,var(--sky-wash) 0,var(--sky) 100%);
border-radius:var(--r-card) 0 0 var(--r-card)}
.ch-plate--sage{background:var(--sage-soft)}
.ch-plate--white{background:#fff}
.ch-plate--left{border-radius:0 var(--r-card) var(--r-card) 0}
.ch-plate--round{border-radius:var(--r-card)}
.ch-plate--flush{--plate-y:0px}
.ch-plate--tall{--plate-y:var(--s9)}
/* ---- 3.3 Typography ----------------------------------------------------- */
.display{font-size:var(--t-display);line-height:.92;letter-spacing:-.024em;font-feature-settings:"liga","kern"}
.display--sentence{font-size:var(--t-sentence);line-height:.99;letter-spacing:-.02em}
.measure{max-width:var(--measure)}
.measure-tight{max-width:var(--measure-tight)}
/* spacing utilities, so a page never needs an inline style */
.mt0{margin-top:0}.mt3{margin-top:var(--s3)}.mt4{margin-top:var(--s4)}.mt5{margin-top:var(--s5)}
.mt6{margin-top:var(--s6)}.mt7{margin-top:var(--s7)}.mt8{margin-top:var(--s8)}
.mb0{margin-bottom:0}.mb4{margin-bottom:var(--s4)}.mb5{margin-bottom:var(--s5)}.mb6{margin-bottom:var(--s6)}
.meta{font-size:var(--t-small);color:var(--muted);line-height:1.45}
.num{display:block;font:700 var(--t-num)/.92 var(--display);font-variant-numeric:lining-nums;
letter-spacing:-.012em;color:var(--cobalt)}
.num-cap{display:block;margin-top:var(--s3);font-size:var(--t-body);color:var(--ink);max-width:22ch}
.num-src{display:block;margin-top:var(--s3);font-size:var(--t-small);color:var(--muted)}
.num-src a{color:var(--blue);text-underline-offset:3px}
/* a hung numeral on a sage rule: no box */
.hung-num{border-top:2px solid var(--sage-rule);padding-top:var(--s5)}
.quote{font:700 var(--t-quote)/1.08 var(--display);color:var(--navy);letter-spacing:-.02em;
text-wrap:balance;margin:0;max-width:20ch}
.quote--wide{max-width:26ch}
.script{font:400 clamp(1.5rem,1.05rem + 1.7vw,2.15rem)/1.14 var(--script);color:var(--script-ink);margin:0}
.script--tilt{transform:rotate(-6deg);transform-origin:0 100%}
/* hanging heads: the heading sits in the left margin, prose stays in the measure */
@media (max-width:899px){.hang > :first-child{margin-bottom:var(--s5)}}
@media (min-width:900px){
.hang{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);
gap:var(--col-gap) calc(var(--col-gap) * 2);align-items:start}
.hang > :first-child{position:sticky;top:calc(var(--header-h) + var(--s5))}
}
/* ---- 3.4 The Texas window ---------------------------------------------- */
/* Three independent clips so the photograph can never escape the outline:
1. overflow:clip keeps the oversized ![]()
inside its box while it animates
2. clip-path:url(#tx-clip) from the inline