/* Layout: one long page under a sticky header; photo hero and photo banners from the BEST garden; 1080px inner column.
   Palette taken from the BEST Academy logo: forest-green ring, parchment, sky, sun. */
:root{
  --bg:#f3f1e7; --surface:#fffdf6; --ink:#121a14; --muted:#4b564d; --line:#d9d6c4;
  --creosote:#1f4d2e; --creosote-soft:#e3ebdc; --marigold:#c58f12; --marigold-soft:#f8ecc8; --sky:#3f78a6;
  --shade:rgba(10,30,18,.62);
  --font-display:"Zilla Slab", Rockwell, "Roboto Slab", Georgia, serif;
  --font-body:"Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --font-data:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0e1712; --surface:#15211a; --ink:#ecf0e8; --muted:#a9b6a9; --line:#2b3a30;
  --creosote:#8fc79c; --creosote-soft:#1b2c21; --marigold:#e8b83a; --marigold-soft:#2c2513; --sky:#8ab9de; --shade:rgba(5,14,9,.7); color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#0e1712; --surface:#15211a; --ink:#ecf0e8; --muted:#a9b6a9; --line:#2b3a30;
  --creosote:#8fc79c; --creosote-soft:#1b2c21; --marigold:#e8b83a; --marigold-soft:#2c2513; --sky:#8ab9de; --shade:rgba(5,14,9,.7); color-scheme:dark }

html{scroll-behavior:smooth; scroll-padding-top:72px}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:18px; line-height:1.6}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:10; background:var(--surface)}
.wrap{max-width:1080px; margin:0 auto; padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--font-display); line-height:1.15; text-wrap:balance; margin:0}
h2{font-size:clamp(1.8rem,3.6vw,2.4rem); font-weight:700}
h3{font-size:1.3rem; font-weight:600}
p{margin:0; max-width:65ch}
a{color:var(--creosote); text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--marigold); outline-offset:2px}
.eyebrow{font-family:var(--font-data); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}

/* header */
header.site{position:sticky; top:env(safe-area-inset-top,0px); z-index:5; background:var(--surface); border-bottom:1px solid var(--line)}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; gap:12px; padding-block:10px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink)}
.brand img{width:60px; height:60px; display:block}
.brand b{font-family:var(--font-display); font-size:1.5rem; font-weight:700; letter-spacing:.02em}
.brand span{font-size:.85rem; color:var(--muted)}
nav.main{display:flex; gap:4px; flex-wrap:wrap}
nav.main a{font-weight:700; font-size:.95rem; text-decoration:none; color:var(--ink); padding:6px 10px; border-radius:6px}
nav.main a:hover{background:var(--creosote-soft)}
@media (max-width:1180px){ .brand span{display:none} }
@media (max-width:640px){ .brand span{display:none} nav.main a{padding:4px 8px; font-size:.9rem} }

/* bands */
section{padding-block:56px; border-bottom:1px solid var(--line)}
section.alt{background:var(--surface)}
.sec-head{display:grid; gap:10px; margin-bottom:28px}
.lead{font-size:1.15rem; color:var(--ink)}

/* hero */
.hero{position:relative; padding-block:56px 48px; border-bottom:1px solid var(--line); background:#3a3326 url("img/hero.webp") center 45%/cover no-repeat; color:#fff}
.hero::before{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(8,24,14,.82) 0%, rgba(8,24,14,.5) 45%, rgba(8,24,14,.08) 100%)}
.hero .wrap{position:relative}
.hero .eyebrow{color:#e9e4c9}
.hero .lead{color:#f4f1e4}
.hero h1 em{color:#f0c34a}
.hero .btn{border-color:#f4f1e4; color:#fff}
.hero .btn.primary{background:#f0c34a; border-color:#f0c34a; color:#14240f}
.hero .seal{justify-self:center; width:min(460px,88vw); filter:drop-shadow(0 10px 24px rgba(0,0,0,.45))}
.factband{background:var(--surface); border-bottom:1px solid var(--line)}
.factband .wrap{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; padding-block:22px}
@media (max-width:760px){ .factband .wrap{grid-template-columns:1fr} }
.hero .grid{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center}
.hero h1{font-size:clamp(2.2rem,5.4vw,3.6rem); font-weight:700}
.hero h1 em{font-style:normal}
.hero .text{display:grid; gap:18px; min-width:0}
.actions{display:flex; gap:10px; flex-wrap:wrap}
.btn{display:inline-block; font-weight:700; text-decoration:none; padding:10px 16px; border-radius:8px; border:2px solid var(--creosote); color:var(--creosote)}
.btn.primary{background:var(--creosote); color:var(--surface)}
.facts{display:grid; gap:12px; min-width:0}
.fact{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:14px 16px; display:grid; gap:4px}
.fact .num{font-family:var(--font-display); font-size:1.9rem; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.1}
.fact .num small{font-size:1rem; color:var(--muted); font-weight:600}
.fact p{font-size:.95rem; color:var(--muted)}
@media (max-width:820px){ .hero .grid{grid-template-columns:1fr; gap:28px} }

/* photo banner at the head of a section */
.banner{position:relative; height:clamp(150px,22vw,230px); background:#22382a center/cover no-repeat; border-radius:12px; overflow:hidden; margin-bottom:28px; display:flex; align-items:flex-end}
.banner::before{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(8,24,14,.78) 0%, rgba(8,24,14,.15) 70%)}
.banner .cap{position:relative; padding:18px 22px; display:grid; gap:4px; color:#fff}
.banner .cap .eyebrow{color:#e9e4c9}
.banner h2{color:#fff}
.b-research{background-image:url("img/research.webp")}
.b-plants{background-image:url("img/plants.webp"); background-position:center 40%}
.b-lectures{background-image:url("img/lectures.webp")}
.b-papers{background-image:url("img/papers.webp"); background-position:center 75%}
.papers{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px}
@media (max-width:760px){ .papers{grid-template-columns:1fr} }
.papers ul{margin:0; padding:0; list-style:none; display:grid; gap:12px}
.papers li{padding-left:12px; border-left:3px solid var(--creosote-soft)}
.papers li{font-size:.98rem}
.papers li b{font-weight:700}
.papers li span{display:block; font-size:.85rem; color:var(--muted)}
/* research */
.cards{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px}
@media (max-width:760px){ .cards{grid-template-columns:1fr} }
.card{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:20px; display:grid; gap:10px; align-content:start; min-width:0}
section.alt .card{background:var(--bg)}
.status{justify-self:start; font-family:var(--font-data); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; padding:3px 8px; border-radius:4px; background:var(--creosote-soft); color:var(--creosote)}
.status.early{background:var(--marigold-soft); color:var(--ink)}
.card ul{margin:0; padding-left:1.2em; display:grid; gap:4px}
.chill{display:grid; gap:10px}
.chill svg{width:100%; height:auto; max-width:520px}
.chill text{fill:var(--ink); font-family:var(--font-data); font-size:12px}
.chill .lbl{fill:var(--muted)}
.chill rect.bar{fill:var(--creosote)}
.chill rect.bar.now{fill:var(--marigold)}
.chill line{stroke:var(--line)}
.note{font-size:.88rem; color:var(--muted)}

/* matrix */
.legend{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:24px}
@media (max-width:820px){ .legend{grid-template-columns:repeat(2,minmax(0,1fr))} }
.leg{border:1px solid var(--line); border-radius:8px; padding:10px 12px; background:var(--bg); display:grid; gap:2px; min-width:0}
.leg code{font-family:var(--font-data); font-weight:500}
.leg b{font-size:.95rem}
.leg span{font-size:.85rem; color:var(--muted)}
.filters{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:10px; margin-bottom:12px}
@media (max-width:820px){ .filters{grid-template-columns:1fr 1fr} .filters .q{grid-column:1/-1} }
.filters label{display:grid; gap:4px; font-size:.85rem; font-weight:700; color:var(--muted); min-width:0}
.filters input,.filters select{font:inherit; font-size:1rem; padding:9px 10px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); min-width:0; width:100%}
.count{font-family:var(--font-data); font-size:.85rem; color:var(--muted); margin-bottom:10px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap}
.count button{font:inherit; background:none; border:none; color:var(--creosote); cursor:pointer; text-decoration:underline; padding:0}
.tablewrap{overflow:auto; max-height:75vh; border:1px solid var(--line); border-radius:10px; background:var(--surface)}
table.plants{border-collapse:collapse; width:100%; font-size:.95rem}
table.plants th{position:sticky; top:0; background:var(--creosote-soft); text-align:left; font-size:.8rem; letter-spacing:.04em; text-transform:uppercase; padding:10px; white-space:nowrap}
table.plants td{padding:10px; border-top:1px solid var(--line); vertical-align:top}
table.plants td.sci{font-style:italic; color:var(--muted)}
table.plants td.num{font-family:var(--font-data); font-variant-numeric:tabular-nums; white-space:nowrap}
.chip{display:inline-block; font-family:var(--font-data); font-size:.78rem; font-weight:500; padding:2px 7px; border-radius:4px; white-space:nowrap; border:1px solid var(--line)}
.chip.g0,.chip.g1{background:var(--creosote-soft)}
.chip.g4,.chip.g5{background:var(--marigold-soft)}
.empty{padding:24px; color:var(--muted)}
@media (max-width:640px){
  table.plants thead{display:none}
  table.plants,table.plants tbody,table.plants tr,table.plants td{display:block; width:100%}
  table.plants tr{padding:12px; border-top:1px solid var(--line)}
  table.plants td{border:none; padding:2px 0}
  table.plants td[data-k]::before{content:attr(data-k) ": "; font-weight:700; font-style:normal; color:var(--muted); font-family:var(--font-body)}
  table.plants td.name{font-weight:700; font-size:1.05rem}
}

/* lectures */
.series{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
@media (max-width:760px){ .series{grid-template-columns:1fr} }
.lec{display:grid; grid-template-columns:auto 1fr; gap:14px; padding:16px; border:1px solid var(--line); border-radius:10px; background:var(--bg); min-width:0}
.lec .n{font-family:var(--font-display); font-size:2rem; font-weight:700; color:var(--creosote); line-height:1; min-width:1.4em; font-variant-numeric:tabular-nums}
.lec div{display:grid; gap:6px; min-width:0}
.lec p{font-size:.95rem}
.when{font-family:var(--font-data); font-size:.8rem; color:var(--ink); background:var(--marigold-soft); border-radius:4px; padding:3px 7px; justify-self:start}
.series-head{display:grid; gap:8px; margin-bottom:22px}

/* about */
.people{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px}
@media (max-width:760px){ .people{grid-template-columns:1fr} }
.contact{margin-top:24px; display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.contact code{font-family:var(--font-data); background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:6px 10px; user-select:all}
.contact button{font:inherit; font-weight:700; padding:6px 12px; border-radius:6px; border:2px solid var(--creosote); background:none; color:var(--creosote); cursor:pointer}
footer{padding-block:28px; color:var(--muted); font-size:.85rem; background:var(--surface)}
.foot{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
.foot b{color:var(--ink)}
@media (max-width:760px){ .foot{grid-template-columns:1fr} }

/* ---- v7 multi-page additions ---- */
nav.main a[aria-current="page"]{background:var(--creosote-soft); color:var(--creosote)}
.covers{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:16px 20px; margin-bottom:28px; display:grid; gap:8px}
section.alt .covers{background:var(--bg)}
.covers h2{font-size:1.15rem}
.covers ul{margin:0; padding-left:1.2em; display:grid; gap:4px}
.page{padding-block:32px 56px}
.topics{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
@media (max-width:900px){ .topics{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .topics{grid-template-columns:1fr} }
.topic{display:grid; gap:8px; align-content:start; text-decoration:none; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden; min-width:0}
.topic .ph{height:120px; background:#2a3a2e center/cover no-repeat}
.topic .tx{padding:4px 16px 16px; display:grid; gap:6px}
.topic:hover{border-color:var(--creosote)}
.topic h3{color:var(--creosote)}
.topic p{font-size:.95rem; color:var(--muted)}
.go{font-weight:700; color:var(--creosote); font-size:.95rem}
.mx{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px}
@media (max-width:760px){ .mx{grid-template-columns:1fr} }
.mx .card{gap:12px}
.mx dl{margin:0; display:grid; gap:8px}
.mx dt{font-weight:700}
.mx dd{margin:0; color:var(--muted); font-size:.95rem}
.scorebox{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-bottom:24px}
@media (max-width:760px){ .scorebox{grid-template-columns:1fr} }
.formula{font-family:var(--font-data); font-size:.85rem; background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:10px 12px; overflow-x:auto}
.act{display:inline-block; font-size:.78rem; font-weight:700; padding:2px 8px; border-radius:4px; white-space:nowrap; border:1px solid var(--line)}
.act.expand{background:var(--creosote); color:var(--surface); border-color:var(--creosote)}
.act.hold{background:var(--creosote-soft)}
.act.trial{background:var(--marigold-soft)}
.act.phase{background:var(--bg); text-decoration:line-through; text-decoration-thickness:1px}
.act.confirm{background:var(--bg)}
.sc{font-family:var(--font-data); font-variant-numeric:tabular-nums; text-align:center}
td.more button{font:inherit; font-size:.85rem; font-weight:700; background:none; border:1px solid var(--line); border-radius:6px; padding:3px 8px; color:var(--creosote); cursor:pointer; white-space:nowrap}
tr.detail td{background:var(--bg); font-size:.92rem}
tr.detail dl{margin:0; display:grid; grid-template-columns:max-content 1fr; gap:4px 14px}
tr.detail dt{font-weight:700; color:var(--muted)}
tr.detail dd{margin:0}
@media (max-width:640px){ tr.detail dl{grid-template-columns:1fr} }
.subtable{margin-top:12px}
h2.sub{font-size:1.6rem; margin:40px 0 10px}
.warn{border:2px solid var(--marigold); background:var(--marigold-soft); border-radius:10px; padding:14px 16px; display:grid; gap:6px}
.warn b{font-size:1.05rem}
.chillbars svg{width:100%; max-width:680px; height:auto}
.chillbars text{fill:var(--ink); font-family:var(--font-body); font-size:13px}
.chillbars .v{font-family:var(--font-data); font-size:12px}
.chillbars rect{fill:var(--creosote)}
.chillbars rect.zero{fill:var(--marigold)}
.chillbars line.rng{stroke:var(--ink); stroke-width:2}
.chillbars line.grid{stroke:var(--line)}
.mapfig{margin:0; display:grid; gap:8px}
.mapfig img{border:1px solid var(--line); border-radius:10px; background:#fff}
.wide{grid-column:1/-1; order:-1}
.mxwrap{max-width:none; margin:0 auto; padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px)); padding-block:18px 12px}
.mxtitle{display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap; margin-bottom:12px}
.mxtitle h1{font-size:clamp(1.5rem,2.6vw,2rem)}
.mxtitle p{color:var(--muted); font-size:.95rem}
.mxlinks{display:flex; gap:8px; flex-wrap:wrap}
.mxlinks .btn{padding:6px 12px; font-size:.9rem}
.tablewrap.full{max-height:none; height:70vh}
@media (max-width:640px){ .tablewrap.full{height:auto; max-height:none} .tablewrap.full td{overflow-wrap:anywhere} .tablewrap.full tr, .tablewrap.full td{box-sizing:border-box; max-width:100%} }
.count .note{flex:1; text-align:center}
.tablewrap.subtable{max-height:none}
.hero .lead2{font-size:1.05rem; margin-top:-6px}
.siteaddr{margin-top:14px; font-family:var(--font-data); font-size:1.05rem; letter-spacing:.02em; color:#fff; opacity:.92}
.series-intro{margin-top:8px}
.series-intro h2{font-family:var(--font-display); margin:0 0 6px}
.series-intro ul{margin:8px 0 14px; padding-left:22px}
.series-intro li{margin:4px 0}
.actions-inline .btn{margin:4px 8px 4px 0}
.topic .ph.contain{background-size:contain; background-repeat:no-repeat; background-color:#fff}

.b-matrix{background-image:url("img/matrix-garden.webp"); background-position:center 12%}
.b-stations{background-image:url("img/station.webp"); background-position:center 50%}

.stations{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px}
.station{display:flex; flex-direction:column; gap:8px; padding:20px; border:1px solid var(--line); border-radius:14px; background:var(--surface); color:var(--ink); text-decoration:none}
.station:hover{border-color:var(--creosote)}
.station h3{margin:0; font-family:var(--font-display); font-size:1.4rem}
.station p{margin:0; color:var(--muted)}
.station .now{display:flex; flex-direction:column; gap:2px; min-height:48px}
.station .now b{font-family:var(--font-data); font-size:1.5rem; color:var(--creosote)}
.station .now span{font-size:.9rem; color:var(--muted)}
.station .go{margin-top:auto; font-weight:700; color:var(--creosote)}
.off{color:var(--marigold); font-weight:700; font-size:.95rem}
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px}
.tile{padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:var(--surface); display:flex; flex-direction:column; gap:4px}
.tile .lab{font-size:.9rem; color:var(--muted)}
.tile .val{font-family:var(--font-data); font-size:1.6rem; font-weight:600}
.tile .val small{font-size:.9rem; color:var(--muted)}
.tile .val.sm{font-size:1.05rem}
.chart{margin-bottom:14px}
.chart h3 small{font-weight:400; color:var(--muted)}
.chart svg{width:100%; height:auto; display:block}
.chart svg text{font-size:12px; fill:var(--muted); font-family:var(--font-data)}
.chart svg .grid{stroke:var(--line); stroke-width:1}
.chart svg path{fill:none; stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round}
.chart svg path.s1{stroke:var(--creosote)} .chart svg path.s2{stroke:var(--sky); stroke-dasharray:6 5} .chart svg path.s3{stroke:var(--marigold)}
.keys{display:flex; gap:16px; flex-wrap:wrap; font-size:.9rem; color:var(--muted); margin:4px 0 6px}
.keys .k i{display:inline-block; width:18px; height:3px; margin-right:6px; vertical-align:middle; background:currentColor}
.keys .k.s1 i{background:var(--creosote)} .keys .k.s2 i{background:var(--sky)} .keys .k.s3 i{background:var(--marigold)}

ul.plain, ol.plain{margin:6px 0 14px; padding-left:22px}
ul.plain li, ol.plain li{margin:3px 0}
.paperlist h4, #oehcs + .card h4{margin:18px 0 0; font-size:1rem}
.card h4 + ul.plain{margin-top:4px}
.contact{flex-wrap:wrap; max-width:100%}
.contact code{overflow-wrap:anywhere; min-width:0; max-width:100%}
.papers li span.plinks{display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; margin-top:8px; margin-bottom:6px; font-size:inherit; color:inherit}
.papers li .rg{display:inline-block; font-size:.9rem; font-weight:600}
.papers li .dl{display:inline-block; padding:4px 12px; border-radius:8px; background:var(--creosote); color:var(--surface); font-size:.9rem; font-weight:700; text-decoration:none}
.papers li .dl.alt{background:transparent; color:var(--creosote); border:1.5px solid var(--creosote)}
.sec-head .btn{justify-self:start; width:fit-content; margin-top:10px}
.tablewrap.full::-webkit-scrollbar{height:14px; width:12px}
.tablewrap.full::-webkit-scrollbar-track{background:var(--line, #ddd); border-radius:8px}
.tablewrap.full::-webkit-scrollbar-thumb{background:#5f7a52; border-radius:8px; border:3px solid transparent; background-clip:padding-box}
.tablewrap.full{scrollbar-color:#5f7a52 transparent}
.filters.five{grid-template-columns:2fr 1fr 1fr 1fr 1fr}
@media (max-width:900px){ .filters.five{grid-template-columns:1fr 1fr} .filters.five .q{grid-column:1/-1} }