@font-face{font-family:"Archivo";src:url(/fonts/archivo.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Source Serif";src:url(/fonts/sourceserif.woff2) format("woff2");font-weight:200 900;font-display:swap}
@font-face{font-family:"Source Serif";src:url(/fonts/sourceserif-italic.woff2) format("woff2");font-weight:200 900;font-style:italic;font-display:swap}

:root{
  --paper:#F5F7F2;
  --panel:#FFFFFF;
  --ink:#16201C;
  --ink-soft:#4A5751;
  --leaf:#2E6A4E;
  --leaf-wash:#E3EEE6;
  --yolk:#F1C232;
  --beet:#8A2B47;
  --rule:#16201C;
  --hair:#C9D3CC;
  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Source Serif",Georgia,"Times New Roman",serif;
  --measure:66ch;
  --gutter:clamp(16px,4vw,40px);
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#121A17;--panel:#18221E;--ink:#E6EDE8;--ink-soft:#A8B6AE;
    --leaf:#7CC4A0;--leaf-wash:#1E2E27;--yolk:#E8BC3A;--beet:#E48AA3;
    --rule:#E6EDE8;--hair:#33433C;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:1.1875rem;line-height:1.6;font-optical-sizing:auto}
img,svg{max-width:100%;display:block}
a{color:var(--leaf);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--yolk);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--yolk);color:#16201C;padding:.5rem 1rem;font-family:var(--sans);z-index:10}
.skip:focus{left:1rem;top:1rem}

/* Masthead */
.top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:18px var(--gutter);max-width:1180px;margin:0 auto;font-family:var(--sans)}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--ink);text-decoration:none;font-weight:800;font-stretch:88%;font-size:1.35rem;letter-spacing:-.01em}
.brand svg{width:30px;height:30px}
.top nav{display:flex;gap:1.25rem;flex-wrap:wrap}
.top nav a{color:var(--ink);text-decoration:none;font-size:.95rem;font-weight:500}
.top nav a:hover,.top nav a[aria-current]{text-decoration:underline;text-decoration-thickness:2px}

/* Hero */
.hero{max-width:1180px;margin:0 auto;padding:clamp(28px,6vw,72px) var(--gutter) clamp(40px,7vw,88px);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,72px);align-items:start}
.hero h1{font-family:var(--sans);font-weight:850;font-stretch:78%;font-size:clamp(2.6rem,6.4vw,5.1rem);line-height:.98;letter-spacing:-.02em;margin:0 0 1.4rem}
.hero .lede{font-size:clamp(1.15rem,1.6vw,1.35rem);max-width:34ch;color:var(--ink-soft);margin:0 0 1.75rem}
.actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;font-family:var(--sans)}
.btn{display:inline-block;background:var(--ink);color:var(--paper);text-decoration:none;font-weight:700;padding:.85rem 1.3rem;border-radius:999px;font-size:1rem}
.btn:hover{background:var(--leaf);color:#fff}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.status{font-family:var(--sans);font-size:.95rem;color:var(--ink-soft);margin-top:1.1rem}

/* The Genome Facts panel: the one loud element */
.facts{background:var(--panel);color:var(--ink);border:3px solid var(--rule);padding:10px 14px 12px;font-family:var(--sans);max-width:420px;justify-self:end;width:100%}
.facts h2{font-weight:900;font-stretch:72%;font-size:2.7rem;line-height:1;margin:0;letter-spacing:-.01em}
.facts .sub{font-size:.95rem;margin:.2rem 0 .35rem;border-bottom:10px solid var(--rule);padding-bottom:.4rem}
.facts .sub b{font-weight:800}
.facts dl{margin:0}
.facts .row{display:grid;grid-template-columns:1fr auto;gap:.5rem;border-top:1px solid var(--rule);padding:.42rem 0;align-items:baseline}
.facts .row:first-child{border-top:0}
.facts dt{font-weight:800;font-size:1rem}
.facts dt span{font-weight:400;font-size:.85rem;color:var(--ink-soft);display:block;font-variant-numeric:tabular-nums}
.facts dd{margin:0;font-weight:700;font-size:.92rem;text-align:right;font-variant-numeric:tabular-nums}
.facts .thick{border-top:5px solid var(--rule)}
.facts .foot{border-top:10px solid var(--rule);margin-top:.2rem;padding-top:.45rem;font-size:.82rem;line-height:1.35}
.facts .foot strong{background:var(--yolk);color:#16201C;padding:0 .2em}

/* Sections */
main{display:block}
.band{border-top:3px solid var(--rule)}
.wrap{max-width:1180px;margin:0 auto;padding:clamp(40px,6vw,80px) var(--gutter)}
.split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,72px)}
h2.sec{font-family:var(--sans);font-weight:800;font-stretch:82%;font-size:clamp(1.9rem,3.6vw,2.8rem);line-height:1.05;letter-spacing:-.01em;margin:0 0 1rem}
.prose{max-width:var(--measure)}
.prose p{margin:0 0 1.1em}

/* Trait table */
.traits{width:100%;border-collapse:collapse;font-family:var(--sans)}
.traits caption{text-align:left;font-size:.95rem;color:var(--ink-soft);padding-bottom:.75rem}
.traits th,.traits td{text-align:left;vertical-align:top;padding:1rem .75rem 1rem 0;border-top:1px solid var(--hair)}
.traits thead th{font-size:.85rem;font-weight:600;color:var(--ink-soft);border-top:0;padding-top:0}
.traits tbody tr:first-child th,.traits tbody tr:first-child td{border-top:3px solid var(--rule)}
.traits tbody th{font-weight:800;font-size:1.1rem;width:28%}
.traits tbody th a{color:var(--ink)}
.traits .gene{display:block;font-weight:500;font-size:.85rem;color:var(--ink-soft);margin-top:.15rem}
.traits td{font-family:var(--serif);font-size:1.05rem}

/* Privacy flow */
.flow{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:stretch;font-family:var(--sans);margin-top:1.5rem}
.flow .box{border:3px solid var(--rule);padding:1.1rem 1.2rem;background:var(--panel)}
.flow .box h3{margin:0 0 .4rem;font-size:1.15rem;font-weight:800}
.flow .box p{margin:0;font-family:var(--serif);font-size:1.02rem}
.flow .box.empty{border-style:dashed;background:transparent;color:var(--ink-soft)}
.flow .wall{width:clamp(28px,5vw,64px);display:flex;align-items:center;justify-content:center}
.flow .wall span{writing-mode:vertical-rl;transform:rotate(180deg);font-size:.8rem;font-weight:700;color:var(--beet)}
.flow .wall{background:repeating-linear-gradient(90deg,transparent 0 6px,var(--hair) 6px 7px)}

/* Won't do list */
.nope{list-style:none;padding:0;margin:0}
.nope li{padding:1rem 0;border-top:1px solid var(--hair)}
.nope li:first-child{border-top:3px solid var(--rule)}
.nope b{font-family:var(--sans);font-weight:800;display:block}

/* FAQ */
.faq details{border-top:1px solid var(--hair);padding:1rem 0}
.faq details:first-of-type{border-top:3px solid var(--rule)}
.faq summary{font-family:var(--sans);font-weight:700;font-size:1.1rem;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;font-size:1.4rem;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:.75rem 0 0;max-width:var(--measure)}

/* Article pages */
.article{max-width:1180px;margin:0 auto;padding:clamp(24px,5vw,56px) var(--gutter) clamp(48px,7vw,96px);display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(28px,5vw,64px)}
.crumbs{font-family:var(--sans);font-size:.9rem;color:var(--ink-soft);margin-bottom:1.25rem}
.crumbs a{color:var(--ink-soft)}
.article h1{font-family:var(--sans);font-weight:850;font-stretch:80%;font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.02;letter-spacing:-.015em;margin:0 0 1rem}
.article .dek{font-size:1.3rem;color:var(--ink-soft);max-width:var(--measure);margin:0 0 1.5rem}
.byline{font-family:var(--sans);font-size:.88rem;color:var(--ink-soft);margin:0 0 2rem}
.answer{background:var(--leaf-wash);border-left:6px solid var(--leaf);padding:1.1rem 1.3rem;margin:0 0 2rem;max-width:var(--measure)}
.answer h2{font-family:var(--sans);font-size:1rem;font-weight:800;margin:0 0 .35rem}
.answer p{margin:0}
.body h2{font-family:var(--sans);font-weight:800;font-stretch:85%;font-size:1.7rem;line-height:1.15;margin:2.4rem 0 .8rem}
.body h3{font-family:var(--sans);font-weight:700;font-size:1.2rem;margin:1.6rem 0 .5rem}
.body p,.body ul,.body ol{max-width:var(--measure)}
.body li{margin-bottom:.4rem}
.body table{border-collapse:collapse;font-family:var(--sans);font-size:.98rem;margin:1rem 0 1.5rem;width:100%;max-width:var(--measure)}
.body th,.body td{text-align:left;padding:.6rem .7rem .6rem 0;border-top:1px solid var(--hair);vertical-align:top}
.body thead th{border-top:0;font-weight:600;color:var(--ink-soft);font-size:.85rem}
.body tbody tr:first-child td{border-top:3px solid var(--rule)}
.body td:first-child{font-weight:700;white-space:nowrap}
.caution{border:2px solid var(--beet);padding:1rem 1.2rem;max-width:var(--measure);margin:1.5rem 0}
.caution p{margin:0}
.sources{font-size:1rem}
.sources ol{padding-left:1.2rem}
.sources li{margin-bottom:.6rem}
aside.side{font-family:var(--sans);align-self:start;position:sticky;top:24px}
aside.side h2{font-size:.95rem;font-weight:800;margin:0 0 .6rem}
aside.side ul{list-style:none;padding:0;margin:0 0 1.5rem;border-top:3px solid var(--rule)}
aside.side li{border-bottom:1px solid var(--hair)}
aside.side a{display:block;padding:.6rem 0;color:var(--ink);text-decoration:none;font-size:.98rem}
aside.side a:hover,aside.side a[aria-current]{text-decoration:underline}
aside.side .note{font-size:.88rem;color:var(--ink-soft);line-height:1.45}

/* Science index cards as a list, not cards */
.index-list{list-style:none;padding:0;margin:0;border-top:3px solid var(--rule)}
.index-list li{border-bottom:1px solid var(--hair);padding:1.1rem 0}
.index-list a{font-family:var(--sans);font-weight:800;font-size:1.3rem;color:var(--ink);text-decoration:none}
.index-list a:hover{text-decoration:underline}
.index-list p{margin:.25rem 0 0;max-width:var(--measure)}

/* Footer */
.foot-site{border-top:3px solid var(--rule);font-family:var(--sans);font-size:.92rem;color:var(--ink-soft)}
.foot-site .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem;padding-top:40px;padding-bottom:48px}
.foot-site h2{font-size:.95rem;color:var(--ink);margin:0 0 .5rem}
.foot-site ul{list-style:none;padding:0;margin:0}
.foot-site li{margin:.3rem 0}
.foot-site a{color:var(--ink-soft)}
.foot-site p{margin:0 0 .6rem;max-width:44ch}

@media (max-width:860px){
  .hero,.split,.article{grid-template-columns:1fr}
  .facts{justify-self:start;max-width:none}
  aside.side{position:static}
  .foot-site .wrap{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr}
  .flow .wall{width:auto;height:44px;background:repeating-linear-gradient(0deg,transparent 0 6px,var(--hair) 6px 7px)}
  .flow .wall span{writing-mode:horizontal-tb;transform:none}
  .traits thead{display:none}
  .traits tr{display:block;border-top:1px solid var(--hair);padding:1rem 0}
  .traits tbody tr:first-child{border-top:3px solid var(--rule)}
  .traits th,.traits td{display:block;border:0!important;padding:.2rem 0;width:auto}
  .body td:first-child{white-space:normal}
}
@media (max-width:520px){
  .top{flex-direction:column;align-items:flex-start;gap:.6rem}
  .top nav{gap:1rem}
  .facts h2{font-size:2.2rem}
}
@media (prefers-reduced-motion:no-preference){
  .facts{animation:print .7s cubic-bezier(.2,.7,.2,1) both .1s}
  @keyframes print{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
}