/* ============================================================
   BIOTECH DOOR: the paper. A scientific-publication interface.
   Fully standalone; does not load the main site stylesheet.
   ============================================================ */
:root{
  --paper-bg:#F7F6F1;      /* warm paper */
  --ink:#1E2A26;           /* near-black green-tinted ink */
  --muted:#5F6E67;
  --cyan:#086B5C;          /* teal, darkened for AA text contrast on paper, also read by hero-helix.js */
  --lime:#2AAE70;          /* green, also read by hero-helix.js */
  --rule:#D8D5C9;          /* hairline rules */
  --accent-bg:#EEF4EF;

  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Source Sans 3","Helvetica Neue",Arial,sans-serif;
  --mono:"Space Mono","Courier New",monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0}
body{
  background:var(--paper-bg);
  color:var(--ink);
  font-family:var(--serif);
  font-size:17px;
  line-height:1.65;
}
a{color:var(--cyan)}
::selection{background:var(--cyan);color:var(--paper-bg)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

/* ============================================================
   MASTHEAD: journal header
   ============================================================ */
.masthead{
  border-bottom:1px solid var(--rule);
  background:var(--paper-bg);
  position:sticky;top:0;z-index:50;
}
.mast-in{
  max-width:760px;margin:0 auto;
  padding:14px 24px;
  display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;
}
.mast-brand{
  font-family:var(--serif);font-weight:700;font-size:20px;
  letter-spacing:.04em;color:var(--ink);text-decoration:none;
}
.mast-sub{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);
}
.mast-nav{margin-left:auto;display:flex;gap:20px}
.mast-nav a{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;
}
.mast-nav a:hover{color:var(--cyan)}
.nav-mobile-only{display:none}

.nav-burger{
  display:none;
  width:38px;height:38px;
  padding:0;cursor:pointer;margin-left:auto;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
  border:1px solid var(--rule);border-radius:6px;background:transparent;
}
.nav-burger span{display:block;width:15px;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .25s ease,opacity .25s ease}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============================================================
   THE PAPER BODY
   ============================================================ */
.paper{
  max-width:760px;margin:0 auto;
  padding:clamp(36px,6vh,72px) 24px 40px;
}

.titleblock{text-align:left;margin-bottom:44px}
.doctype{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 18px;
}
h1{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(1.7rem,4.4vw,2.6rem);
  line-height:1.18;letter-spacing:-.01em;
  margin:0 0 18px;
}
.authors{font-size:1.05rem;margin:0 0 4px}
.authors sup{color:var(--cyan)}
.affil{font-family:var(--sans);font-size:.85rem;color:var(--muted);margin:0 0 28px}
.affil a{color:var(--muted)}

.abstract{
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--rule);
  padding:18px 0 16px;
  margin-bottom:14px;
}
.abs-label{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);margin:0 0 10px;font-weight:700;
}
.abstract p{margin:0;font-size:1.02rem;line-height:1.7}
.keywords{font-family:var(--sans);font-size:.85rem;color:var(--muted);margin:0}
.keywords b{color:var(--ink);font-weight:600}
.title-cta{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0 0}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--ink);color:var(--paper-bg);
  padding:12px 18px;border-radius:4px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;
}
.skip-link:focus{left:12px;top:12px}

/* ============================================================
   SECTIONS
   ============================================================ */
.sec{margin:46px 0}
.sec h2{
  font-family:var(--serif);font-weight:700;
  font-size:1.45rem;letter-spacing:-.01em;
  border-bottom:1px solid var(--rule);
  padding-bottom:8px;margin:0 0 18px;
}
.secnum{color:var(--cyan);margin-right:6px}
.sec p{margin:0 0 16px}
.sec-intro{font-style:italic;color:var(--muted)}

.protocols{list-style:none;margin:0 0 8px;padding:0}
.protocols li{
  padding:13px 0;
  border-bottom:1px dotted var(--rule);
  font-size:.98rem;line-height:1.65;
}
.protocols li:last-child{border-bottom:none}
.protocols b{font-family:var(--mono);font-size:.82rem;letter-spacing:.02em;color:var(--cyan);font-weight:700}

/* ============================================================
   FIGURE 1: the helix
   ============================================================ */
.fig{
  margin:34px 0;
  border:1px solid var(--rule);
  background:#FFFFFF;
  padding:10px 10px 0;
}
#knot{
  display:block;width:100%;height:min(52vh,420px);touch-action:pan-y;
  background:radial-gradient(ellipse 70% 60% at 50% 45%, #1A2A24 0%, #101B17 70%, #0C1512 100%);
  border-radius:4px;
}
/* name tag that appears beside the helix when a segment is clicked */
#helixFig{position:relative}
.helix-tag{
  position:absolute;transform:translateY(-50%);
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  padding:5px 11px;border-radius:3px;white-space:nowrap;
  background:rgba(8,18,14,.88);border:1px solid currentColor;
  pointer-events:none;z-index:3;
  opacity:0;transition:opacity .25s ease;
}
.helix-tag.show{opacity:1}
.fig figcaption{
  font-family:var(--sans);font-size:.83rem;color:var(--muted);
  padding:10px 6px 12px;border-top:1px solid var(--rule);margin-top:8px;
}
.fig figcaption b{color:var(--ink)}

/* ============================================================
   SAMPLE SUBMISSION: the form
   ============================================================ */
.sample{
  border:1px solid var(--ink);
  background:#FFFFFF;
  padding:22px 24px 24px;
  margin:26px 0 0;
}
.sample h3{
  font-family:var(--serif);font-weight:700;font-size:1.15rem;
  margin:0 0 16px;display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.mono{font-family:var(--mono);font-size:.72em;letter-spacing:.06em;color:var(--cyan);font-weight:700}
.sample form{display:flex;flex-direction:column;gap:14px;max-width:420px}
.s-field{display:flex;flex-direction:column;gap:5px}
.s-field span{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.s-field input{
  font-family:var(--sans);font-size:15px;color:var(--ink);
  background:var(--paper-bg);
  border:1px solid var(--rule);border-radius:3px;
  padding:11px 12px;width:100%;
}
.s-field input:focus-visible{outline:2px solid var(--cyan);outline-offset:1px;border-color:var(--cyan)}
.s-field input::placeholder{color:#A9B3AC}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.s-note{margin:2px 0 0;font-family:var(--sans);font-size:.82rem;color:#B4452B;min-height:1.2em}

.btn-submit{
  display:inline-block;
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  color:#FFFFFF;background:var(--cyan);
  border:1px solid var(--cyan);border-radius:3px;
  padding:13px 22px;cursor:pointer;text-decoration:none;text-align:center;
  transition:background .2s ease;
}
.btn-submit:hover{background:#0B8A75}
.btn-submit:disabled{opacity:.6;cursor:default}
.btn-plain{
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);background:transparent;
  border:1px solid var(--rule);border-radius:3px;
  padding:13px 22px;cursor:pointer;
}
.btn-plain:hover{color:var(--ink);border-color:var(--muted)}
.sample.confirmed p{font-size:1rem}

.bio{
  background:var(--accent-bg);
  border-left:3px solid var(--cyan);
  padding:14px 18px;
  font-size:.95rem;
}

/* ============================================================
   COLOPHON
   ============================================================ */
.colophon{
  margin-top:60px;
  border-top:3px double var(--rule);
  padding-top:18px;
  display:flex;gap:22px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);
}
.colophon a{color:var(--muted);text-decoration:none}
.colophon a:hover{color:var(--cyan)}

/* ============================================================
   CONSENT
   ============================================================ */
.consent{
  position:fixed;left:24px;bottom:18px;z-index:95;
  max-width:380px;
  border:1px solid var(--ink);
  background:#FFFFFF;
  padding:16px 18px;
  display:none;
  font-family:var(--sans);font-size:.88rem;color:var(--ink);
  box-shadow:0 8px 30px rgba(30,42,38,.12);
}
.consent.show{display:block}
.consent p{margin:0 0 12px;line-height:1.55}
.consent-row{display:flex;gap:10px}
.consent-row .btn-submit,.consent-row .btn-plain{flex:1;padding:10px 12px;font-size:10px}
.consent-decline{
  background:none;border:0;padding:0;margin:0;
  color:var(--cyan);text-decoration:underline;text-underline-offset:2px;
  font:inherit;cursor:pointer;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .nav-burger{display:flex}
  .mast-nav{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;
    background:var(--paper-bg);
    border-bottom:1px solid var(--rule);
    padding:6px 0;
  }
  .mast-nav.open{display:flex}
  .mast-nav a{padding:14px 24px;font-size:12px;border-top:1px solid var(--rule)}
  .mast-nav .nav-mobile-only{display:block}
  .mast-sub{display:none}
}
@media (max-width:520px){
  body{font-size:16px}
  .consent{left:12px;right:12px;max-width:none}
}
@media (prefers-reduced-motion: reduce){
  .nav-burger span{transition:none}
}

/* ============================================================
   PAPER APPARATUS: dateline, table, back matter, print
   ============================================================ */
.dateline{
  font-family:var(--sans);font-size:.82rem;color:var(--muted);
  margin:-18px 0 26px;
}
.dateline b{color:var(--ink);font-weight:600}

.tbl{
  width:100%;border-collapse:collapse;
  margin:30px 0 8px;
  font-family:var(--sans);font-size:.9rem;
}
.tbl caption{
  text-align:left;font-size:.83rem;color:var(--muted);
  padding-bottom:8px;
}
.tbl caption b{color:var(--ink)}
.tbl th{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  text-align:left;color:var(--ink);
  border-top:2px solid var(--ink);border-bottom:1px solid var(--ink);
  padding:8px 10px 8px 0;
}
.tbl td{
  padding:9px 10px 9px 0;
  border-bottom:1px solid var(--rule);
  color:var(--ink);vertical-align:top;
}
.tbl tbody tr:last-child td{border-bottom:2px solid var(--ink)}
.tbl td:first-child{font-family:var(--mono);font-size:.78rem;color:var(--cyan)}
@media (min-width:640px){
  .tbl td:first-child{white-space:nowrap}
}
@media (max-width:639px){
  .tbl{font-size:.84rem}
  .tbl th,.tbl td{padding-right:8px}
}

.backmatter{
  margin:52px 0 0;
  border-top:1px solid var(--rule);
  padding-top:26px;
}
.backmatter h3{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  margin:26px 0 8px;color:var(--ink);
}
.backmatter h3:first-child{margin-top:0}
.backmatter p{margin:0;font-size:.95rem}
.bibtex{
  font-family:var(--mono);font-size:.72rem;line-height:1.6;
  background:var(--accent-bg);
  border-left:3px solid var(--cyan);
  padding:14px 16px;margin:0;
  overflow-x:auto;white-space:pre;
}
.refs{list-style:none;margin:0;padding:0}
.refs li{
  font-family:var(--sans);font-size:.85rem;color:var(--muted);
  padding:4px 0;
}
.refs a{color:var(--cyan)}

/* ============================================================
   PRINT: the paper as a leave-behind
   ============================================================ */
@media print{
  .masthead{position:static;border-bottom:2px solid #000}
  .nav-burger,.mast-nav,.consent,.no-print{display:none !important}
  body{background:#fff;color:#000;font-size:11.5pt}
  .paper{max-width:none;padding:0 0 20px}
  a{color:#000;text-decoration:none}
  .affil a,.refs a{text-decoration:underline}
  .fig{break-inside:avoid}
  .sample{break-inside:avoid}
  .tbl{break-inside:avoid}
  .bio{background:#f2f2f2;border-left-color:#000}
  .btn-submit{display:none}
  .sample form{display:none}
  .sample::after{
    content:"Submit online: aeormenlabs.com/biotech, or write to support@aeormenlabs.com";
    font-family:var(--sans);font-size:10pt;color:#000;
  }
}

/* ============================================================
   FIGURE 2: the gel assay
   ============================================================ */
.subsec{
  font-family:var(--serif);font-weight:700;font-size:1.15rem;
  margin:34px 0 12px;
}
.gelfig{padding:14px 14px 0}
.gel-q{margin:4px 2px 14px}
.gel-count{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 6px;
}
.gel-question{
  font-family:var(--serif);font-size:1.12rem;font-weight:600;
  margin:0 0 12px;min-height:2.4em;
}
.gel-btns{display:flex;gap:10px}
.gel-ans{min-width:96px}
.gel-run{margin:2px 2px 14px}

.gel{
  position:relative;
  display:grid;
  grid-template-columns:repeat(9,minmax(0,1fr));
  gap:4px;
  height:min(46vh,380px);
  background:#141110;
  border-radius:4px;
  padding:10px 8px 6px;
  overflow:hidden;
}
.gel-lane{
  position:relative;
  background:rgba(255,255,255,.025);
  border-radius:2px;
}
.well{
  position:absolute;top:2%;left:14%;right:14%;height:3.2%;
  border:1px solid rgba(255,170,90,.5);
  border-radius:1px;
  background:rgba(0,0,0,.5);
}
.band{
  position:absolute;left:12%;right:12%;height:2.6%;
  top:3%;
  transform:translateY(-50%);   /* top:% marks the band's center, matching the guides */
  border-radius:2px;
  background:#FFA94D;
  box-shadow:0 0 8px rgba(255,150,50,.85),0 0 22px rgba(255,140,40,.4);
  transition:top 2.6s cubic-bezier(.35,.05,.25,1), filter 2.6s ease;
}
.gel.run .band{filter:blur(.4px)}
.band.heavy{
  height:3.4%;
  background:#FFC178;
  box-shadow:0 0 10px rgba(255,150,50,.95),0 0 26px rgba(255,140,40,.5);
}
.lad-band{
  position:absolute;left:16%;right:16%;height:2%;
  transform:translateY(-50%);   /* centered on its top:% like the guides */
  background:rgba(255,170,90,.7);
  border-radius:2px;
  box-shadow:0 0 6px rgba(255,150,50,.45);
}
.lad-band i{
  position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-style:normal;font-size:8.5px;letter-spacing:.06em;
  color:rgba(255,215,175,.9);
  white-space:nowrap;
}
.gel-ladder{overflow:visible;z-index:2}
.gel-lanelabel{
  display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:4px;
  margin:6px 0 10px;padding:0 8px;
  font-family:var(--mono);font-size:9px;color:var(--muted);text-align:center;
}

.gel-readout{
  border:1px solid var(--ink);
  background:var(--accent-bg);
  padding:20px 22px;
  margin:0 0 26px;
}
.gel-readout h4{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  margin:0 0 10px;color:var(--ink);
}
.gel-readout p{margin:0 0 12px;font-size:.97rem}
.gel-readout ul{margin:0 0 14px;padding-left:18px;font-family:var(--sans);font-size:.9rem;color:var(--muted)}
.gel-readout li b{color:var(--cyan);font-family:var(--mono);font-size:.82rem}
.gel-reset{
  font-family:var(--sans);font-size:.82rem;color:var(--muted);
  background:none;border:none;cursor:pointer;text-decoration:underline;padding:0;margin-left:14px;
}

@media (max-width:520px){
  .lad-band i{font-size:7px;left:calc(100% + 4px)}
  .gel{height:300px}
}
@media (prefers-reduced-motion: reduce){
  .band{transition:none}
}

/* ---- ladder v3: labels outside the gel, left margin, aligned to the guides ---- */
.gel-wrap{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  column-gap:10px;
  align-items:stretch;
}
/* marks and guides both live on the LANE coordinate system: the gel has
   10px top / 6px bottom padding, so both get the same vertical insets */
.gel-marks{position:relative;min-width:162px;margin:10px 0 6px}
.gel-guides{position:absolute;top:10px;bottom:6px;left:0;right:0;pointer-events:none}
.gel-marks span{
  position:absolute;right:0;transform:translateY(-50%);
  display:flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;
  color:var(--muted);
  white-space:nowrap;
}
.gel-marks span::after{
  content:"";width:9px;height:0;
  border-top:1px dotted rgba(184,116,40,.75);
}
.gel-wrap .gel-lanelabel{grid-column:2;margin:6px 0 0}
.gel-guide{
  position:absolute;left:8px;right:8px;height:0;
  border-top:1px dotted rgba(255,170,90,.28);
  z-index:1;pointer-events:none;
}
.lad-band{left:20%;right:20%}
@media (max-width:640px){
  .gel-marks{min-width:88px}
  .gel-marks span{
    font-size:7.5px;letter-spacing:.02em;gap:4px;
    white-space:normal;text-align:right;line-height:1.25;
    max-width:88px;justify-content:flex-end;
  }
  .gel-marks span::after{width:6px;flex:0 0 6px}
  .gel-wrap{column-gap:6px}
}

/* ---- masthead book CTA ---- */
.mast-book{
  margin-left:auto;
  padding:9px 14px;font-size:10px;
}
.mast-nav{margin-left:0;gap:15px}
.mast-nav a{font-size:10px}
@media (max-width:900px){
  .mast-book{margin-left:auto;margin-right:10px}
  .nav-burger{margin-left:0}
}

/* ---- readout CTA row ---- */
.gel-cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.gel-alt{
  font-family:var(--sans);font-size:.85rem;color:var(--muted);
  text-decoration:underline;text-underline-offset:3px;
}
.gel-alt:hover{color:var(--cyan)}

/* ---- masthead: single row on small screens ---- */
@media (max-width:900px){
  .mast-in{flex-wrap:nowrap;align-items:center;gap:10px}
  .mast-brand{font-size:15px;white-space:nowrap}
  .mast-book{padding:8px 10px;font-size:9px;letter-spacing:.08em;white-space:nowrap;margin-right:0}
}
@media (max-width:900px){
  .mb-long{display:none}
}

/* ---- eligibility note ---- */
.s-elig{
  font-family:var(--sans);font-size:.85rem;color:var(--muted);
  margin:-6px 0 16px;
}

/* ---- protocols accordion (no +/- markers, the rows themselves invite the click) ---- */
.proto-click{cursor:pointer;position:relative}
.proto-click:hover{background:var(--accent-bg)}
.proto-more{
  display:block;margin-top:8px;
  font-family:var(--sans);font-size:.88rem;color:var(--muted);
  border-left:2px solid var(--rule);padding-left:12px;
}
.proto-click.flash{background:var(--accent-bg);transition:background .3s ease}

/* ---- table rows clickable ---- */
.tbl-click{cursor:pointer;transition:background .15s ease}
.tbl-click:hover td{background:var(--accent-bg)}
.proto-more[hidden]{display:none}
[hidden]{display:none!important}

/* ---- contents rail (wide screens): the one-long-page menu ---- */
.toc{display:none}
@media (min-width:1180px){
  .toc{
    display:flex;flex-direction:column;gap:9px;
    position:fixed;left:26px;top:110px;z-index:40;
    max-width:170px;
  }
  .toc-head{
    font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--ink);font-weight:700;margin-bottom:2px;
  }
  .toc a{
    font-family:var(--sans);font-size:.82rem;color:var(--muted);text-decoration:none;
    border-left:2px solid var(--rule);padding-left:10px;line-height:1.35;
  }
  .toc a:hover{color:var(--cyan);border-left-color:var(--cyan)}
}

/* keywords as service links */
.keywords a{color:var(--cyan);text-decoration:none;border-bottom:1px dotted var(--cyan)}
.keywords a:hover{border-bottom-style:solid}

/* run-gel button inside the question panel */
.gel-q .gel-run{margin:0}

/* ---- narrow-width safety: buttons may never overflow the page ---- */
.btn-submit,.btn-plain{max-width:100%;box-sizing:border-box}
.gel-btns{flex-wrap:wrap}
@media (max-width:420px){
  .gel-q .gel-run{width:100%}
  .btn-submit{letter-spacing:.06em;padding-left:14px;padding-right:14px}
}

/* ---- agent colors: source of truth for headings AND helix segments ---- */
#p31 > b{color:#086B5C}
#p32 > b{color:#2563EB}
#p33 > b{color:#D97706}
#p34 > b{color:#7C3AED}
#p35 > b{color:#16A34A}
#p36 > b{color:#DB2777}
#p31{--ac:#086B5C} #p32{--ac:#2563EB} #p33{--ac:#D97706}
#p34{--ac:#7C3AED} #p35{--ac:#16A34A} #p36{--ac:#DB2777}

@keyframes agentBlink{
  0%,100%{background:transparent}
  20%,60%{background:color-mix(in srgb, var(--ac) 14%, transparent)}
  40%,80%{background:transparent}
}
.protocols li.agent-blink{animation:agentBlink .95s ease}

/* ---- helix as a right-side rail that follows the read (wide screens) ---- */
@media (min-width:1320px){
  #helixFig{
    position:fixed;
    right:22px;top:110px;z-index:35;
    width:calc(50vw - 430px);
    min-width:220px;max-width:320px;
    margin:0;
  }
  #helixFig #knot{height:min(44vh,360px)}
  #helixFig figcaption{font-size:.76rem}
}

/* ============================================================
   MASTHEAD v3: brand + book + burger at every width.
   Inline nav links retired; the burger menu serves all sizes.
   ============================================================ */
.mast-in{flex-wrap:nowrap;align-items:center}
.nav-burger{display:flex;margin-left:0}
.mast-book{margin-left:auto;margin-right:10px;white-space:nowrap}
.mast-nav{
  display:none;
  position:absolute;top:100%;right:24px;left:auto;
  flex-direction:column;gap:0;
  width:280px;
  background:var(--paper-bg);
  border:1px solid var(--rule);
  box-shadow:0 10px 30px rgba(30,42,38,.10);
  padding:6px 0;
}
.mast-nav.open{display:flex}
.mast-nav a{padding:13px 20px;font-size:11px;border-top:1px solid var(--rule)}
.mast-nav a:first-child{border-top:none}
.mast-nav .nav-mobile-only{display:block}
@media (max-width:520px){
  .mast-nav{left:12px;right:12px;width:auto}
}

/* stuck focus ring on mouse clicks (the teal box around the logo) */
:focus:not(:focus-visible){outline:none}

/* sticky masthead must not cover anchor targets */
[id]{scroll-margin-top:80px}