/* =============================================================================
   ReLeaf: the standard sub-page
   -----------------------------------------------------------------------------
   Every page under Project, Wet Lab, Dry Lab and Engagement is this file plus a
   body of sections. Home, Members and Attribution have their own stylesheets.

   The shape follows iGEM Brno 2025's sub-pages, which are the clearest of the
   recent wikis at the one job these pages have, which is letting a judge find a
   specific claim in under a minute:

     · a header band that names the section, the page and the argument
     · one column of prose at a fixed measure, never full-bleed
     · a table of contents that stays on screen and tracks position
     · every heading numbered, so a judge can say "2.3" and be understood
     · figures, callouts and tables as bordered blocks with a green left edge
     · a references list at the foot, with [n] linking both ways

   Where we depart from Brno: their body text is justified, which opens rivers
   at this measure; ours is ragged right. Their cards are shadowed; ours use a
   hairline, because thirty pages of drop shadow reads as a slide deck.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1.5rem);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.68;
  color: var(--black);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: var(--leaf-700); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--leaf-900); }

:focus-visible { outline: 2px solid var(--leaf-700); outline-offset: 3px; border-radius: 2px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.sitenav-spacer { height: var(--nav-h); }

/* ======================================================== HEADER BAND ====== */

.pagehead {
  background: linear-gradient(180deg, var(--leaf-50), var(--white) 78%);
  border-bottom: 1px solid var(--gray-200);
}
.pagehead__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--sp-8) var(--sp-5) var(--sp-7);
}
@media (min-width: 640px) { .pagehead__inner { padding-left: var(--sp-6); padding-right: var(--sp-6); } }

/* breadcrumb: which tab this page hangs under */
.pagehead__eyebrow {
  display: flex; align-items: center; gap: .5rem;
  margin: 0 0 var(--sp-4);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--leaf-700);
}
.pagehead__eyebrow a { color: inherit; text-decoration: none; }
.pagehead__eyebrow a:hover { text-decoration: underline; }
.pagehead__eyebrow i { font-style: normal; color: var(--gray-450); }

.pagehead__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.022em;
  color: var(--leaf-900);
  max-width: 20ch;
}

/* the one-sentence answer to "what is this page for" */
.pagehead__lede {
  margin: var(--sp-5) 0 0;
  max-width: 58ch;
  font-size: var(--text-lede);
  line-height: 1.52;
  color: var(--gray-600);
}

/* a rail of small facts: last edited, who owns the page, medal criterion */
.pagehead__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
  margin: var(--sp-6) 0 0;
  padding: var(--sp-4) 0 0;
  border-top: 1px solid var(--leaf-200);
  list-style: none;
  font-size: var(--text-xs);
  color: var(--gray-500);
}
.pagehead__meta b {
  display: block;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gray-450);
  font-size: .6875rem;
}
.pagehead__meta span { color: var(--gray-700); font-size: var(--text-sm); }

/* ============================================================= LAYOUT ====== */

.pagewrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--sp-7) var(--sp-5) var(--sp-8);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-7);
}
@media (min-width: 640px) { .pagewrap { padding-left: var(--sp-6); padding-right: var(--sp-6); } }
@media (min-width: 1040px) {
  .pagewrap { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
}

.pagebody { max-width: var(--measure); min-width: 0; }
.pagebody > * + * { margin-top: var(--sp-5); }

/* ================================================ TABLE OF CONTENTS ======== */

.toc {
  position: sticky;
  top: calc(var(--nav-h) + var(--sp-5));
  align-self: start;
  font-size: var(--text-sm);
  order: -1;
}
/* Each page's rail takes its banner's colour (page.js copies the tab from
   #site-nav onto .toc). --toc-ink is the banner's label colour, dark enough
   for small text on --toc-pill; --toc-line is the banner's deep colour. */
.toc                     { --toc-ink: #3f7374; --toc-line: #57a0a1; --toc-pill: #e7f2f2; }
.toc[data-tab="project"]    { --toc-ink: #b6455b; --toc-line: #ce7e8e; --toc-pill: #fdecef; }
.toc[data-tab="drylab"]     { --toc-ink: #317681; --toc-line: #43a0b0; --toc-pill: #e9f5f7; }
.toc[data-tab="engagement"] { --toc-ink: #a4573e; --toc-line: #c8846e; --toc-pill: #fbeeea; }
.toc[data-tab="team"]       { --toc-ink: #447939; --toc-line: #5ca44e; --toc-pill: #eaf4e8; }

.toc__title {
  margin: 0 0 var(--sp-3);
  padding-left: .85rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gray-450);
}
.toc__list { margin: 0; padding: 0; list-style: none; }
.toc__list ol { margin: 0; padding: 0; list-style: none; }

/* a section: number, then its name */
.toc__h {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  align-items: baseline;
  padding: .5rem .85rem;
  border-radius: 10px;
  color: var(--gray-900, #171717);
  font-weight: 650;
  line-height: 1.3;
  text-decoration: none;
  transition: background .25s, color .25s;
}
.toc__no {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--gray-450);
  transition: color .25s;
}
.toc__h:hover { background: var(--gray-50, #fafafa); }
.toc__sec.is-here > .toc__h { background: var(--toc-pill); color: var(--toc-ink); }
.toc__sec.is-here > .toc__h .toc__no { color: var(--toc-ink); font-weight: 650; }

/* its sub-sections: folded until the reader is inside the section, then
   they open under a thin line in the accent colour, one after another */
.toc__list .toc__subs {
  position: relative;
  margin: 0 0 .35rem 2.45rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s cubic-bezier(.2, .7, .3, 1);
}
.toc__list .toc__sec.is-here > .toc__subs { max-height: 40rem; }
.toc__sub {
  position: relative;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .25s, transform .3s cubic-bezier(.2, .7, .3, 1);
}
.toc__sec.is-here .toc__sub {
  opacity: 1; transform: none;
  transition-delay: calc(80ms + var(--i, 0) * 40ms);
}
.toc__sub a {
  display: block;
  padding: .28rem 0 .28rem 1rem;
  border-left: 1.5px solid var(--toc-line);
  font-size: var(--text-xs, .8125rem);
  line-height: 1.35;
  color: var(--gray-500);
  text-decoration: none;
  transition: color .2s;
}
.toc__sub:first-child a { padding-top: .5rem; }
.toc__sub:last-child a  { padding-bottom: .55rem; }
.toc__sub a:hover { color: var(--toc-ink); }
/* the dot rides on the line beside the sub-section being read */
.toc__sub a::before {
  content: "";
  position: absolute; left: -3.25px; top: 50%;
  width: 8px; height: 8px; margin-top: -4px;
  border-radius: 50%;
  background: var(--toc-line);
  transform: scale(0);
  transition: transform .25s cubic-bezier(.2, .7, .3, 1);
}
.toc__sub:first-child a::before { margin-top: -1px; }
.toc__sub:last-child a::before  { margin-top: -6px; }
.toc__sub a.is-active { color: var(--toc-ink); font-weight: 600; }
.toc__sub a.is-active::before { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .toc__subs, .toc__sub, .toc__sub a::before, .toc__h { transition: none !important; }
}

/* on narrow screens the rail becomes a closed summary above the prose */
@media (max-width: 1039px) {
  .toc {
    position: static;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    background: var(--gray-50);
    padding: 0;
  }
  .toc > summary {
    cursor: pointer;
    padding: var(--sp-3) var(--sp-4);
    font-size: .6875rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--gray-600);
  }
  .toc__inner { padding: 0 var(--sp-4) var(--sp-4); }
  .toc__title { display: none; }
}
@media (min-width: 1040px) {
  .toc > summary { display: none; }
  .toc[open] .toc__inner, .toc .toc__inner { display: block; }
}

/* =========================================================== SECTIONS ====== */

.sec { scroll-margin-top: calc(var(--nav-h) + 1.5rem); }
.sec + .sec { margin-top: var(--sp-7); }

.sec h2 {
  margin: 0 0 var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--gray-200);
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.015em;
  color: var(--leaf-900);
}
.sec h3 {
  margin: var(--sp-6) 0 var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 650;
  line-height: 1.3;
  color: var(--gray-700);
}
.sec h4 {
  margin: var(--sp-5) 0 var(--sp-2);
  font-size: var(--text-base);
  font-weight: 650;
  color: var(--gray-700);
}

/* the number a judge can quote back at you */
.sec__no {
  display: inline-block;
  min-width: 2.1ch;
  margin-right: .55em;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--leaf-500);
}
.sec h3 .sec__no { color: var(--gray-450); font-size: .9em; }

.sec p { margin: 0 0 var(--sp-4); }
.sec p:last-child { margin-bottom: 0; }
.sec ul, .sec ol { margin: 0 0 var(--sp-4); padding-left: 1.4em; }
.sec li + li { margin-top: var(--sp-2); }
.sec li::marker { color: var(--leaf-500); }
/* A list laid out as a grid or a row of cards is not a bulleted list: it
   keeps neither the bullet indent nor the gap above each item (the gap
   pushed every card after the first out of line with the first). Pages add
   their own grid lists here by class. */
.sec :is(ul, ol):is(.phases, .loop, .statekey, .dbtl, .chain__list, .dl, .keyfacts,
  .pd-casslist, .runs, .carousel__track, .kap__key) { padding-left: 0; }
.sec :is(ul, ol):is(.phases, .loop, .statekey, .dbtl, .chain__list, .dl, .keyfacts,
  .pd-casslist, .runs, .carousel__track, .kap__key) > li + li { margin-top: 0; }

.lede { font-size: var(--text-lede); line-height: 1.55; color: var(--gray-600); }

/* a heading you can link to: the ¶ appears on hover */
.anchor {
  margin-left: .4em;
  opacity: 0;
  font-weight: 400;
  color: var(--gray-450);
  text-decoration: none;
  transition: opacity .15s;
}
h2:hover .anchor, h3:hover .anchor, .anchor:focus-visible { opacity: 1; }

/* =========================================================== CALLOUTS ====== */
/* Left edge carries the meaning; the fill is barely there so a page with four
   of them still reads as one page.                                            */

.callout {
  margin: var(--sp-5) 0;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--gray-200);
  border-left: 4px solid var(--leaf-700);
  border-radius: var(--radius-sm);
  background: var(--leaf-50);
  font-size: var(--text-sm);
}
.callout > :first-child { margin-top: 0; }
.callout > :last-child { margin-bottom: 0; }
.callout__label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: .6875rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--leaf-700);
}

/* what iGEM asks this page to prove */
.callout--medal { border-left-color: var(--amber-700); background: var(--amber-100); }
.callout--medal .callout__label { color: var(--amber-700); }

/* a claim we have not earned yet. The brief requires these to sit next to the
   claim they limit, at the same size, never in a footnote.                    */
.callout--unproven { border-left-color: var(--rust-700); background: var(--rust-100); }
.callout--unproven .callout__label { color: var(--rust-700); }

/* a number or a method taken from somebody else's paper */
.callout--borrowed { border-left-color: var(--slate-700); background: var(--slate-100); }
.callout--borrowed .callout__label { color: var(--slate-700); }

/* ============================================================= FIGURES ===== */

.fig { margin: var(--sp-6) 0; }
/* height:auto matters. A width/height pair on the <img> is a presentational
   hint for BOTH properties: width:100% here overrides the width hint, but the
   height hint survives and pins the image to its attribute height, which
   squeezes every landscape photo on the page. With height auto the two
   attributes go back to doing their real job — holding the aspect ratio and
   reserving the space before the file arrives.                              */
.fig img, .fig video, .fig svg {
  width: 100%;
  height: auto;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--gray-50);
}
.fig img { cursor: zoom-in; }
.fig figcaption {
  margin-top: var(--sp-3);
  padding-left: var(--sp-3);
  border-left: 2px solid var(--leaf-200);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--gray-600);
}
.fig figcaption b { color: var(--leaf-700); font-weight: 650; }

/* a figure that has not been shot or drawn yet */
.fig--pending img, .fig--pending .fig__slot {
  display: grid; place-items: center;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--gray-200);
  background: repeating-linear-gradient(45deg, var(--gray-50), var(--gray-50) 10px, var(--white) 10px, var(--white) 20px);
  color: var(--gray-450);
  font-size: var(--text-sm);
  text-align: center;
  padding: var(--sp-5);
  cursor: default;
}

/* click a figure and it fills the window */
.lightbox {
  position: fixed; inset: 0; z-index: 60;
  display: none; place-items: center;
  padding: var(--sp-5);
  background: rgb(10 20 15 / .88);
}
.lightbox.is-open { display: grid; }
.lightbox img { max-width: 100%; max-height: 86vh; border-radius: var(--radius-sm); }
.lightbox figcaption { margin-top: var(--sp-4); max-width: 60ch; color: var(--gray-200); font-size: var(--text-sm); }
.lightbox__close {
  position: absolute; top: var(--sp-4); right: var(--sp-4);
  width: 2.5rem; height: 2.5rem;
  border: 0; border-radius: 50%;
  background: rgb(255 255 255 / .12); color: var(--white);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.lightbox__close:hover { background: rgb(255 255 255 / .22); }

/* Engagement pages: one rule for every figure caption.

   A page that numbers its figures carries `fignums` on <body> (IHP, Education,
   Geospatial Analysis, Data Physicalization). There a picture's caption reads
   "Figure N. legend" on one line, under the picture, and the same text is
   repeated along the bottom of the lightbox.

   The other three Engagement pages do not number figures and their legends run
   200 to 400 characters, so a picture there still carries no caption and the
   legend is read in the lightbox alone. Tables and live maps, which have no
   <img>, keep their captions everywhere. */
figure:has(img) > figcaption .figlegend { display: none; }
figure:has(img) > figcaption:has(> .figlegend):not(:has(.fignum)) { display: none; }
.fignums figure:has(img) > figcaption .figlegend { display: inline; }
.fignums figure:has(img) > figcaption:has(> .figlegend) { display: block; }
.fignum { font-weight: 650; color: var(--gray-600, #555); }
.fignum::after { content: "."; }
/* keep the number and its legend on one line for as long as the line allows */
.fignums figure:has(img) > figcaption { text-wrap: pretty; }
:is(.engage, .ihp) .lightbox { padding-bottom: 0; }
:is(.engage, .ihp) .lightbox img { max-height: calc(100vh - 10rem); }
:is(.engage, .ihp) .lightbox figcaption {
  position: fixed; left: 0; right: 0; bottom: 0;
  margin: 0; max-width: none; max-height: 30vh; overflow-y: auto;
  padding: var(--sp-4) var(--sp-5);
  padding-left: var(--sp-5) !important; /* fulllines.css zeroes it on every figcaption */
  background: rgb(0 0 0 / .72);
  color: var(--gray-100, #eee); text-align: left;
  font-size: var(--text-sm); line-height: 1.55;
}

/* The seven Engagement pages carry `flatcap`: there the strip is one flat line
   and a legend never breaks. page.js steps the type down to fit the window,
   and the two legends that pass that floor scroll sideways instead of wrapping.
   Every other page using this strip keeps the wrapping version above. */
.flatcap .lightbox figcaption {
  max-height: none;
  white-space: nowrap; overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain;
}
.flatcap .lightbox figcaption::-webkit-scrollbar { height: 4px; }
.flatcap .lightbox figcaption::-webkit-scrollbar-thumb {
  background: rgb(255 255 255 / .28); border-radius: 2px;
}
:is(.engage, .ihp) .lightbox figcaption:empty { display: none; }
:is(.engage, .ihp) .lightbox figcaption b { color: var(--white); }
:is(.engage, .ihp) .lightbox figcaption a { color: inherit; text-decoration: underline; }

/* =============================================================== CARDS ===== */

.grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin: var(--sp-5) 0; }
.card2 {
  padding: var(--sp-5);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--white);
}
.card2 h4 { margin-top: 0; color: var(--leaf-900); }
.card2 p:last-child { margin-bottom: 0; }
.card2 .num {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem; font-weight: 700; line-height: 1;
  color: var(--leaf-700);
  font-variant-numeric: tabular-nums;
}

/* ============================================================== TABLES ===== */

.tablewrap { overflow-x: auto; margin: var(--sp-5) 0; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); }
table.data { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
table.data th, table.data td { padding: .6rem .85rem; text-align: left; vertical-align: top; }
table.data thead th {
  background: var(--leaf-50);
  border-bottom: 1px solid var(--leaf-200);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--leaf-900); white-space: nowrap;
}
table.data tbody tr + tr { border-top: 1px solid var(--gray-200); }
table.data tbody tr:hover { background: var(--gray-50); }
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ================================================================ TABS ===== */
/* Plants runs three growth systems on one page. Same page, same URL, three
   panels, so a judge landing on /plant sees all three exist.                  */

.tabs { margin: var(--sp-6) 0; }
.tabs__strip {
  display: flex; flex-wrap: wrap; gap: var(--sp-1);
  border-bottom: 1px solid var(--gray-200);
}
.tabs__btn {
  appearance: none;
  padding: .6rem 1.1rem;
  border: 0; border-bottom: 3px solid transparent;
  background: none;
  font: inherit; font-size: var(--text-sm); font-weight: 600;
  color: var(--gray-500); cursor: pointer;
}
.tabs__btn:hover { color: var(--leaf-900); background: var(--leaf-50); }
.tabs__btn[aria-selected="true"] { color: var(--leaf-900); border-bottom-color: var(--leaf-700); }
.tabs__panel { padding-top: var(--sp-5); }
.tabs__panel[hidden] { display: none; }

/* =========================================================== REFERENCES ==== */

.refs { margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid var(--gray-200); }
.refs h2 { border: 0; padding: 0; font-size: var(--text-h3); }
.refs ol { margin: 0; padding-left: 2.1em; font-size: var(--text-sm); color: var(--gray-600); }
.refs li { margin-bottom: var(--sp-3); scroll-margin-top: calc(var(--nav-h) + 2rem); }
.refs li:target { background: var(--leaf-100); border-radius: 3px; box-shadow: 0 0 0 .4rem var(--leaf-100); }
.refs a { word-break: break-word; }

/* the [3] in running text */
a.cite {
  font-size: .84em; font-weight: 600; vertical-align: .25em;
  text-decoration: none; color: var(--leaf-700);
  padding: 0 .1em;
}
a.cite:hover { text-decoration: underline; }

/* ========================================================= PAGE STATUS ===== */
/* Delete the whole block when a page is written. It exists so nobody mistakes
   a scaffold for a draft, and so the team can see at a glance what is left.   */

.status {
  margin: var(--sp-6) 0 0;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--gray-50);
  font-size: var(--text-sm);
  color: var(--gray-600);
}
.status b { display: block; color: var(--gray-700); margin-bottom: var(--sp-1); }
.status code { font-family: var(--font-mono); font-size: .9em; background: var(--gray-200); padding: .1em .35em; border-radius: 3px; }

.todo {
  display: inline-block;
  padding: .1em .5em;
  border-radius: 3px;
  background: var(--amber-100);
  border: 1px solid #e8cf95;
  color: var(--amber-700);
  font-size: var(--text-xs); font-weight: 650;
  letter-spacing: .03em;
}

/* ============================================================ PAGE NAV ===== */

.pagenav {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--sp-5) var(--sp-8);
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
@media (min-width: 640px) { .pagenav { padding-left: var(--sp-6); padding-right: var(--sp-6); } }
.pagenav a {
  display: block;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color .18s, background .18s;
}
.pagenav a:hover { border-color: var(--leaf-500); background: var(--leaf-50); }
.pagenav b { display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--gray-450); margin-bottom: .3rem; }
.pagenav span { font-size: var(--text-base); font-weight: 600; color: var(--leaf-900); }
.pagenav .is-next { text-align: right; }

/* ============================================================== FOOTER ===== */

.footer2 {
  border-top: 1px solid var(--gray-200);
  background: var(--gray-50);
}
.footer2__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--sp-7) var(--sp-5);
  display: grid; gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  font-size: var(--text-sm);
  color: var(--gray-600);
}
@media (min-width: 640px) { .footer2__inner { padding-left: var(--sp-6); padding-right: var(--sp-6); } }
.footer2 h3 { margin: 0 0 var(--sp-3); font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-450); }
.footer2 ul { margin: 0; padding: 0; list-style: none; }
.footer2 li + li { margin-top: .35rem; }
.footer2 a { color: var(--gray-700); text-decoration: none; }
.footer2 a:hover { color: var(--leaf-700); text-decoration: underline; }
.footer2__legal { grid-column: 1 / -1; padding-top: var(--sp-5); border-top: 1px solid var(--gray-200); font-size: var(--text-xs); color: var(--gray-500); }
/* a footer carrying only the legal block has nothing above the rule for it to
   separate, so the rule and the space it held go too */
.footer2__inner--legal { grid-template-columns: 1fr; }
.footer2__inner--legal .footer2__legal { padding-top: 0; border-top: 0; }
.footer2__legal p { margin: 0 0 var(--sp-2); }
/* underlined: in a line of grey text a link told apart by colour alone fails WCAG 1.4.1 */
.footer2__legal a { text-decoration: underline; text-underline-offset: 2px; }

@media print {
  .sitenav, .toc, .pagenav, .sitenav-spacer { display: none !important; }
  .pagewrap { display: block; }
}

/* =========================================================== SCAFFOLD ====== */
/* A note left in place of the prose that has not been written. Every one of
   these is meant to be deleted, and the page is not finished while one is
   still on it. They are visibly not prose: grey, italic, and marked.          */

p.scaffold {
  margin: 0 0 var(--sp-4);
  padding-left: var(--sp-4);
  border-left: 2px solid var(--gray-200);
  color: var(--gray-500);
  font-style: italic;
  font-size: var(--text-sm);
}
p.scaffold::before {
  content: "To write";
  display: block;
  font-style: normal;
  font-size: .625rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gray-450);
  margin-bottom: .15rem;
}

/* ========================================================= HEADER HERO ===== */
/* A full-bleed photograph as the first thing on the page, with the title set
   into it rather than stacked above it. .pagehead has no max-width of its own,
   so the hero is already the width of the window — no negative-margin trick,
   and no gutter for a scrollbar to fight over.

   The scrim is two gradients, not a flat wash: the top of the frame stays a
   photograph and only the corner the type sits in goes dark. Bottom-left,
   because on this page's photograph that corner is blackboard. Its stops are
   in rem rather than per cent, so the dark band is the height of the type
   block and not a fraction of the picture — on a phone, where the hero is a
   third of its desktop height, a percentage scrim leaves the eyebrow sitting
   on bare photograph.                                                       */

.pagehead--hero { background: var(--white); }

.pagehead__hero {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  max-height: 78vh;
  overflow: hidden;
  background: var(--leaf-900);
}
@media (min-width: 700px)  { .pagehead__hero { aspect-ratio: 16 / 9; } }
@media (min-width: 1100px) { .pagehead__hero { aspect-ratio: 21 / 9; } }

.pagehead__hero picture { display: block; width: 100%; height: 100%; }
.pagehead__hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 72%;
}

.pagehead__hero::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to top,   rgb(6 26 16 / .88) 0, rgb(6 26 16 / .60) 4.5rem, rgb(6 26 16 / .16) 9.5rem, rgb(6 26 16 / 0) 15rem),
    linear-gradient(to right, rgb(6 26 16 / .50) 0%, rgb(6 26 16 / 0) 44%);
}

/* the type block tracks the same column the prose below it uses, so the title
   sits on the left edge of the measure rather than the left edge of the glass */
.pagehead__heroinner {
  position: absolute; z-index: 1;
  left: 0; right: 0; bottom: 0;
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-5);
}
@media (min-width: 640px) { .pagehead__heroinner { padding: var(--sp-7) var(--sp-6); } }

.pagehead__heroinner .pagehead__eyebrow { margin-bottom: var(--sp-3); color: var(--leaf-200); }
.pagehead__heroinner .pagehead__eyebrow i { color: rgb(255 255 255 / .45); }
.pagehead__heroinner .pagehead__title {
  color: var(--white);
  text-shadow: 0 1px 2px rgb(6 26 16 / .45), 0 2px 34px rgb(6 26 16 / .55);
}

/* the credit line for the hero, sitting under it with the lede and the meta */
.pagehead__herocap {
  margin: 0 0 var(--sp-5);
  max-width: 74ch;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--gray-500);
}
.pagehead__herocap b { color: var(--leaf-700); font-weight: 650; }

/* ======================================================= TOGGLE LISTS ====== */
/* A run of <details>. Used where a page has to carry the full record — every
   segment of a lesson, every piece of feedback — without making a reader
   scroll past all of it to reach the argument. The summary line has to say
   enough that a reader can decide not to open it, so it carries a lead-in
   after the title. Nothing inside is an h2 or h3: the contents rail is built
   from those, and it must not point at text behind a closed toggle.          */

.discloses { margin: var(--sp-5) 0; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); overflow: hidden; }
.discloses > .disclose + .disclose { border-top: 1px solid var(--gray-200); }

.disclose { background: var(--white); }
/* grid rather than flex so the lead-in always starts under the title rather
   than wherever the title happens to end */
.disclose > summary {
  display: grid;
  grid-template-columns: .55rem 1fr;
  column-gap: var(--sp-3);
  align-items: start;
  padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-3);
  cursor: pointer;
  list-style: none;
  font-size: var(--text-base);
  color: var(--leaf-900);
}
.disclose > summary::-webkit-details-marker { display: none; }
.disclose > summary:hover { background: var(--leaf-50); }
.disclose > summary:focus-visible { outline: 2px solid var(--leaf-500); outline-offset: -2px; }

/* the chevron is drawn, not a glyph, so it rotates cleanly and never shifts
   the baseline of the text beside it */
.disclose > summary::before {
  content: "";
  grid-column: 1; grid-row: 1;
  width: .5rem; height: .5rem;
  margin-top: .42em;
  border-right: 2px solid var(--leaf-500);
  border-bottom: 2px solid var(--leaf-500);
  transform: translateY(-.1rem) rotate(-45deg);
  transition: transform .16s ease;
}
.disclose[open] > summary::before { transform: translateY(.05rem) rotate(45deg); }
.disclose[open] > summary { background: var(--leaf-50); }

.disclose__title { grid-column: 2; grid-row: 1; font-weight: 650; line-height: 1.35; }
.disclose__hint  { grid-column: 2; grid-row: 2; margin-top: .2rem; color: var(--gray-500); font-size: var(--text-sm); font-weight: 400; line-height: 1.45; }

.disclose__body { padding: 0 var(--sp-4) var(--sp-5) calc(var(--sp-3) + .55rem + var(--sp-3)); }
.disclose__body > :first-child { margin-top: 0; }
.disclose__body > :last-child  { margin-bottom: 0; }
.disclose__body h4 { margin: var(--sp-4) 0 var(--sp-2); }
@media (max-width: 560px) { .disclose__body { padding-left: var(--sp-4); } }

/* a single toggle standing on its own rather than in a run */
.disclose--solo { border: 1px solid var(--gray-200); border-radius: var(--radius-sm); margin: var(--sp-5) 0; }

/* ========================================================== DOWNLOADS ====== */
/* Best Education is judged on whether somebody else can pick the material up
   and teach it. So the files get their own object: name, what it is, format
   and weight, all before the click.                                          */

.dl { list-style: none; margin: var(--sp-5) 0; padding: 0; display: grid; gap: var(--sp-3); }
.dl li { margin: 0; }
.dl a {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--white);
  text-decoration: none;
  color: inherit;
}
.dl a:hover { border-color: var(--leaf-500); background: var(--leaf-50); }
.dl__kind {
  flex: none;
  min-width: 3.1rem;
  padding: .3rem .45rem;
  border-radius: 3px;
  background: var(--leaf-100);
  color: var(--leaf-900);
  font-family: var(--font-mono);
  font-size: .6875rem; font-weight: 700; letter-spacing: .06em;
  text-align: center;
  text-transform: uppercase;
}
.dl__name { display: block; font-weight: 650; color: var(--leaf-900); }
.dl__meta { display: block; margin-top: .15rem; font-size: var(--text-sm); color: var(--gray-500); }

/* A dense figure — a grid of small multiples, a chart with seven panels — that
   68ch of column cannot show at a readable size. It grows into the gutter
   beside the text column, and only once a gutter exists to grow into. The
   lightbox is still the fallback for the detail.                             */

@media (min-width: 1240px) {
  .fig--wide { width: min(54rem, calc(100vw - 24rem)); max-width: none; }
}

/* ========================================================= PHOTO ROWS ====== */
/* Two or three photographs that belong to one moment. They share a caption
   only when the caption would otherwise repeat.                              */

/* Ratios are left alone. A row of photographs shot at different ratios comes
   out at different heights, and that is the correct answer: cropping them to
   a common box to tidy up the grid throws away the sides of the frame.      */
.figs { display: grid; gap: var(--sp-5); margin: var(--sp-6) 0; align-items: start; }
@media (min-width: 620px) { .figs--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 620px) { .figs--3 { grid-template-columns: repeat(3, 1fr); } }
.figs .fig { margin: 0; }

/* Photographs of different ratios end at different heights, so left alone the
   captions in a row all start on a different line. Subgrid puts every image in
   one row and every caption in the next, and sits the images on the shared
   floor between them — the row lines up without a single pixel of crop.     */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 620px) {
    .figs { grid-template-rows: auto auto; }
    .figs .fig { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
    .figs .fig img { align-self: end; }
  }
}

/* figures open full-window from the keyboard too (page.js makes them focusable) */
.fig img[role="button"]:focus-visible, [data-zoom] img[role="button"]:focus-visible {
  outline: 2px solid var(--leaf-700); outline-offset: 3px;
}

/* a long identifier in <code> (a file or function name) wraps instead of
   pushing a phone-width page sideways */
.pagebody code { overflow-wrap: anywhere; }

/* ---- LaTeX maths (assets/js/math.js + assets/vendor/katex) --------------- */
.math--display { margin: 1.1rem 0; overflow-x: auto; overflow-y: hidden; padding: .2rem 0; }
.math--display .katex-display { margin: 0; }
/* A single long equation is one unbreakable line, so on a phone it used to push
   the whole page sideways instead of scrolling. Every displayed equation now
   scrolls inside its own box. The padding keeps descenders and the bottom of a
   fraction clear of the hidden vertical edge. */
.katex-display { overflow-x: auto; overflow-y: hidden; padding: .2rem 0 .35rem; }
.katex { font-size: 1.06em; }

/* A species name inside an italic passage sets upright, which is what the
   convention asks for: the name stays distinct from the text around it either
   way. Written as nested italics so the markup says "species" and nothing
   about how it looks. */
i i, em i, i em, em em { font-style: normal; }