/* Base styles shared by all three sites. */
*{box-sizing:border-box}
html{scroll-padding-top:64px}
body{background:var(--ground); color:var(--ink); font-family:var(--sans);
  font-size:16px; line-height:1.55; margin:0; -webkit-font-smoothing:antialiased}
img{max-width:100%; height:auto}
.wrap{max-width:var(--wrap); margin:0 auto; padding-inline:16px}
p{margin:0 0 1em}
a{color:inherit; text-underline-offset:3px; text-decoration-color:var(--rule-strong)}
a:hover{text-decoration-color:var(--flag)}
:focus-visible{outline:2px solid var(--flag); outline-offset:2px; border-radius:2px}
h1,h2,h3{text-wrap:balance; margin:0; font-weight:600; letter-spacing:-.011em}
.prose{font-family:var(--serif); font-size:1.0625rem; line-height:1.68; max-width:var(--prose); color:var(--ink-2)}
.eyebrow{font-size:.8125rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-2); margin:0 0 .9rem}

/* Language: elements marked data-l="en" or data-l="es" show only in their language */
html[lang="en"] [data-l="es"], html[lang="es"] [data-l="en"]{display:none}

/* Masthead. Row one is the full logo, row two the navigation with the language switch. */
.masthead{background:var(--surface); border-bottom:1px solid var(--rule)}
/* The logo row scrolls away and the menu row stays pinned. site.js measures the logo row
   and sets --brand-h, so the masthead sticks at exactly minus that height. */
.masthead{position:sticky; top:calc(-1 * var(--brand-h, 82px)); z-index:1000}
.brand{display:inline-block; padding-top:16px; line-height:0}
.brand img{display:block; height:54px; width:auto; max-width:100%}
.navrow{display:flex; align-items:center; gap:16px; margin-top:12px}
.nav{display:flex; gap:20px; flex:1; min-width:0; overflow-x:auto; scrollbar-width:none;
  font-size:.9375rem; font-weight:500; white-space:nowrap}
.nav::-webkit-scrollbar{display:none}
.nav a{text-decoration:none; color:var(--ink-2); padding:8px 0 10px; border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--flag)}
.nav .sep{flex:none; width:1px; margin:8px 0 10px; background:var(--rule-strong)}
.lang{display:flex; flex:none; border:1px solid var(--rule-strong); border-radius:2px; overflow:hidden}
.lang button{font:inherit; font-size:.75rem; font-weight:600; letter-spacing:.04em; background:transparent;
  color:var(--ink-3); border:0; padding:4px 9px; cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--ink); color:var(--ground)}
@media (max-width:560px){
  .brand{display:block}
  .brand img{height:auto; width:100%; max-width:428px}
  .nav{gap:16px; font-size:.875rem;
    /* fade the right edge so it is clear the menu scrolls sideways */
    -webkit-mask-image:linear-gradient(to right,#000 85%,transparent); mask-image:linear-gradient(to right,#000 85%,transparent); padding-right:24px}
}

/* Page furniture shared by the lab pages */
.pagehead{padding-block:36px 8px}
.pagehead h1{font-size:clamp(1.6rem,4.2vw,2.25rem); line-height:1.15; margin-bottom:12px}
.jumps{display:flex; flex-wrap:wrap; gap:6px 16px; font-size:.875rem; margin:0 0 8px; padding:0; list-style:none}
.jumps a{color:var(--ink-2); text-decoration:none; border-bottom:1px solid var(--rule-strong)}
.jumps a:hover{color:var(--ink); border-bottom-color:var(--flag)}
.sitefoot{padding-block:32px; margin-top:48px; color:var(--ink-3); font-size:.8125rem; border-top:1px solid var(--rule)}

/* Paper theme: the masthead and footer keep the dark ground, everything else turns to paper */
body[data-theme="paper"] .masthead{background:#0B1416; border-bottom-color:rgba(230,237,237,.14)}
body[data-theme="paper"] .masthead .nav a{color:#B8C6C9}
body[data-theme="paper"] .masthead .nav a:hover,
body[data-theme="paper"] .masthead .nav a[aria-current="page"]{color:#E6EDED}
body[data-theme="paper"] .masthead .nav .sep{background:rgba(230,237,237,.25)}
body[data-theme="paper"] .masthead .lang{border-color:rgba(230,237,237,.25)}
body[data-theme="paper"] .masthead .lang button{color:#8FA2A6}
body[data-theme="paper"] .masthead .lang button[aria-pressed="true"]{background:#E6EDED; color:#0B1416}
body[data-theme="paper"] .sitefoot{border-top-color:var(--rule)}