/* fonts come from vendor/fonts.css, linked in index.html */

:root{
  --r1:#23256B; --r2:#56347E; --r3:#8B3A80; --r4:#C03B7C; --r5:#F63E7E;
  --d1:#0F3A42; --d2:#2C7C80; --d3:#9AC5BD; --d4:#E9E5DC; --d5:#F7A8C1; --d6:#F63E7E; --d7:#8E1048;
  --accent:#C03B7C; --accent-soft:rgba(246,62,126,.16);
  --ink:#15161B; --ink-2:#43454F; --ink-3:#7A7C87;
  --paper:#F6F4EF; --panel:#FFFFFF; --wash:#EDEAE3;
  --rule:#15161B; --line:#DFDBD2; --line-2:#C5C0B4;
  --geo-line:#A8A297; --geo-fill:#FFFFFF; --geo-line-dim:#D3CFC5; --geo-fill-dim:#F1EFE9;
  --geo-hover:#FBE4EC; --geo-region:#B3ACA0;
  --glass:rgba(255,255,255,.82);
  --sans:'Archivo',Helvetica,sans-serif;
  --display:'Instrument Serif',Georgia,serif;
  --mono:'Spline Sans Mono','Courier New',monospace;
}
[data-theme="dark"]{
  --r1:#6E74D6; --r2:#8E6BC0; --r3:#B65FA8; --r4:#DC5B92; --r5:#FF6FA0;
  --d1:#8CEDE9; --d2:#3FB6BA; --d3:#23767D; --d4:#2E3239; --d5:#8E3357; --d6:#F2588C; --d7:#FFAECB;
  --accent:#FF6FA0; --accent-soft:rgba(255,111,160,.2);
  --ink:#F1F0EC; --ink-2:#B4B6BF; --ink-3:#83868F;
  --paper:#111216; --panel:#181A1F; --wash:#1E2026;
  --rule:#585B66; --line:#2A2D34; --line-2:#3C4048;
  --geo-line:#4E525C; --geo-fill:#22252B; --geo-line-dim:#2B2E35; --geo-fill-dim:#1A1C21;
  --geo-hover:#3A2733; --geo-region:#454953;
  --glass:rgba(24,26,31,.84);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-2)}
a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.mono{font-family:var(--mono)}
.lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}

/* masthead */
.masthead{position:sticky;top:0;z-index:600;background:var(--paper)}
.mh-2{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--panel)}
.mh-2-in{display:flex;align-items:stretch;gap:26px;max-width:1240px;margin:0 auto;padding:0 26px}
.mark{display:flex;align-items:center;padding:12px 0;border:0}
.mark:hover{color:inherit}
.mark-t{font-family:var(--display);font-size:26px;line-height:1.05}
/* the explore page runs edge to edge, so there the masthead does too: the
   site title lines up with the filters instead of floating in from the left */
body:has(#page-explore.on) .mh-2-in{max-width:none;padding-left:20px;padding-right:20px}
nav.main{display:flex;margin-left:auto;align-items:stretch;overflow-x:auto;scrollbar-width:none}
nav.main::-webkit-scrollbar{display:none}
nav.main a{display:flex;align-items:center;white-space:nowrap;padding:0 14px;font-size:15.5px;font-weight:500;color:var(--ink-2);border:0;position:relative}
nav.main a:hover{color:var(--ink);background:var(--wash)}
nav.main a.on{color:var(--ink);font-weight:600}
nav.main a.on::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:3px;background:var(--accent)}
.theme-btn{align-self:center;margin-left:10px;background:none;border:1px solid var(--line-2);
  color:var(--ink-2);font-family:var(--mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;
  padding:5px 8px;cursor:pointer}
.theme-btn:hover{border-color:var(--accent);color:var(--accent)}

/* language switcher: the current language, then the others on a click */
.lang{position:relative;align-self:center;margin-left:12px}
.lang > button{display:flex;align-items:center;gap:6px;background:none;cursor:pointer;
  border:1px solid var(--line-2);color:var(--ink-2);padding:5px 8px;
  font-family:var(--mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase}
.lang > button:hover,.lang.open > button{border-color:var(--accent);color:var(--accent)}
.lang .car{font-size:9px}
.lang-pop{display:none;position:absolute;top:calc(100% + 5px);right:0;min-width:132px;z-index:700;
  background:var(--panel);border:1px solid var(--rule);box-shadow:5px 5px 0 var(--accent-soft)}
.lang.open .lang-pop{display:block}
.lang-pop button{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  padding:8px 11px;font-family:var(--sans);font-size:13px;color:var(--ink-2)}
.lang-pop button:hover{background:var(--wash);color:var(--ink)}
.lang-pop button.on{color:var(--accent)}
.lang-pop button.on::after{content:" ✓"}

.page{display:none}
.page.on{display:block}

/* page hero: words on the left, the dataset itself on the right */
.hero{border-bottom:1px solid var(--rule);background:var(--panel)}
.hero-in{max-width:1240px;margin:0 auto;padding:0 26px;display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);align-items:stretch}
.hero-txt{padding:52px 56px 52px 0;display:flex;flex-direction:column;justify-content:center}
.hero.tall .hero-txt{padding-top:72px;padding-bottom:72px}
.hero-act{display:flex;gap:9px;flex-wrap:wrap;margin-top:32px}
.hero-art{position:relative;margin:0;border-left:1px solid var(--line);
  min-height:320px;background:var(--wash);overflow:hidden}
.hero.tall .hero-art{min-height:400px}
.hero-art canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* drop a photograph in with data-photo="img/about.jpg"; see docs/img/README.md */
.hero-art.photo{background-size:cover;background-position:center}
.hero-art.photo canvas{display:none}

/* contact page: one full-bleed panel, the brand ramp laid over the photograph */
.contact{position:relative;background:url("img/contact.jpg") center/cover;color:#fff}
.contact::before{content:"";position:absolute;inset:0;
  background:linear-gradient(118deg,var(--r1),var(--r3) 48%,var(--r5));opacity:.8}
.contact-in{position:relative;max-width:1240px;margin:0 auto;padding:62px 26px 70px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:0 60px;align-items:start}
.contact .kicker{color:rgba(255,255,255,.72)}
.contact-say h1{font-family:var(--display);font-size:clamp(34px,4.3vw,56px);line-height:1.02;
  margin:14px 0 0;max-width:15ch;font-weight:400;text-wrap:pretty}
.contact-say > p{font-size:16px;line-height:1.7;max-width:46ch;margin:22px 0 0;color:rgba(255,255,255,.84)}
.contact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 40px;margin-top:54px}
.contact-grid .lbl{display:block;color:rgba(255,255,255,.62);margin-bottom:8px}
.contact-grid p{margin:0;font-size:15px;line-height:1.5}
.contact-grid a{color:#fff;border-bottom-color:rgba(255,255,255,.45)}
.contact-grid a:hover{color:#fff;border-bottom-color:#fff}

.contact-form{background:var(--panel);color:var(--ink);padding:36px 38px 40px;
  display:flex;flex-direction:column;gap:24px}
.contact-form label{display:block}
.contact-form label span{display:block;font-size:14px;color:var(--ink-2);margin-bottom:9px}
.contact-form input,.contact-form textarea{width:100%;border:0;border-bottom:1px solid var(--line-2);
  background:none;border-radius:0;padding:6px 0;font-family:var(--sans);font-size:15px;color:var(--ink)}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-bottom-color:var(--accent)}
.contact-form textarea{resize:vertical}
.contact-form .btn{align-self:flex-start;margin-top:4px}
.form-note{margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--ink-3)}

/* the panel runs the full height of the page, so no gap before the footer */
body:has(#page-contact.on) footer,
body:has(#page-involved.on) footer{margin-top:0}
/* the same panel, used as a banner with no form beside it */
.contact.wide .contact-in{grid-template-columns:minmax(0,1fr);padding-bottom:58px}
/* Get involved shows the photograph as shot. Nothing is laid over the picture
   itself; the words sit on their own panel, which covers about half of it and
   leaves the rest clear. */
#submit-hero{background-image:url("img/involved.jpg");min-height:clamp(420px,46vw,560px);
  display:flex;align-items:center}
#submit-hero::before{content:none}
#submit-hero .contact-in{width:100%;padding:34px 26px}
#submit-hero .contact-say{background:rgba(16,13,20,.62);padding:40px 44px 44px;max-width:620px}
#submit-hero .contact-say h1{max-width:16ch}
#submit-hero .contact-say > p{max-width:none;margin-top:18px}

/* the three notes, moved off the photograph onto the tint below it */
.submit-notes{max-width:900px;margin:0 auto 30px;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 32px}
.submit-notes .lbl{display:block;margin-bottom:8px}
.submit-notes p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-2)}

/* dataset submission form: one page, options picked as chips.
   The colour carries on below the banner and settles into the page, so the
   white card sits on the gradient rather than on bare paper. */
.submit{background:linear-gradient(180deg,
    color-mix(in srgb,var(--d2) 34%,transparent),
    color-mix(in srgb,var(--d3) 30%,transparent) 24%,
    color-mix(in srgb,var(--d4) 34%,transparent) 50%,
    color-mix(in srgb,var(--d5) 32%,transparent) 74%,
    color-mix(in srgb,var(--d6) 26%,transparent)),var(--paper);
  padding:54px 26px 64px}
.submit-form{max-width:900px;margin:0 auto;background:var(--panel);
  border:1px solid var(--line);padding:40px 44px 36px}
.f-sec{margin:0 0 34px}
.f-sec + .f-sec{border-top:1px solid var(--line);padding-top:32px}
.f-sec > h2{font-family:var(--display);font-size:clamp(24px,2.6vw,32px);font-weight:400;
  color:var(--ink);margin:0 0 22px;line-height:1.1}
.submit-form label{display:block;margin-bottom:20px}
.submit-form label > span{display:block;font-size:14px;color:var(--ink-2);margin-bottom:7px}
.submit-form input,.submit-form textarea{width:100%;border:0;
  border-bottom:1px solid var(--line-2);background:none;border-radius:0;padding:7px 0;
  font-family:var(--sans);font-size:15px;color:var(--ink)}
.submit-form input:focus,.submit-form textarea:focus{outline:none;border-bottom-color:var(--accent)}
.submit-form textarea{resize:vertical}
.f-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}
.f-hint{font-size:13px;line-height:1.55;color:var(--ink-3);margin:-8px 0 20px}
.f-q{display:block;font-size:14px;color:var(--ink-2);margin:0 0 11px}

/* chips: the whole label is the target, the real input stays for keyboard use */
.chips-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.submit-form .pick{display:inline-flex;align-items:center;gap:9px;margin:0;padding:8px 14px;
  border:1px solid var(--line-2);background:var(--paper);cursor:pointer;
  font-size:14px;line-height:1.3;color:var(--ink-2)}
.submit-form .pick > span{display:inline;margin:0;font-size:14px;color:inherit}
.submit-form .pick b{font-family:var(--mono);font-size:10.5px;font-weight:400;
  text-transform:uppercase;opacity:.55}
.submit-form .pick input{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.submit-form .pick:hover{border-color:var(--ink-3);color:var(--ink)}
/* a picked chip takes a colour from the same scale as the heatmap */
.chips-row[data-vocab="practice"]{--pick:var(--d2)}
.chips-row[data-vocab="outcome"]{--pick:var(--d1)}
.chips-row[data-vocab="crop"]{--pick:var(--d6)}
.chips-row[data-vocab="region"]{--pick:var(--d7)}
.submit-form .pick:has(input:checked){color:var(--ink);
  background:color-mix(in srgb,var(--pick,var(--accent)) 22%,transparent);
  border-color:color-mix(in srgb,var(--pick,var(--accent)) 70%,transparent)}
.submit-form .pick:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.f-file input{border:1px dashed var(--line-2);padding:14px;background:var(--paper);
  font-size:14px;color:var(--ink-2);cursor:pointer}
.f-file input:hover{border-color:var(--accent)}
.f-send{border-top:1px solid var(--line);padding-top:26px;display:flex;
  align-items:center;gap:18px;flex-wrap:wrap}

@media (max-width:760px){
  .f-row,.f-ticks,.ticks.wide{grid-template-columns:minmax(0,1fr)}
  .submit-notes{grid-template-columns:minmax(0,1fr);gap:20px}
}

@media (max-width:900px){
  .contact-in{grid-template-columns:minmax(0,1fr);gap:40px}
  .contact-grid{margin-top:38px}
}

/* document pages */
.doc{max-width:1240px;margin:0 auto;padding:46px 26px 0;display:grid;
  grid-template-columns:minmax(0,1fr) 316px;gap:0 60px;align-items:start}
.doc.solo{grid-template-columns:minmax(0,1fr)}  /* a page with no rail */
.doc-main{min-width:0}
.doc-rail{min-width:0;position:sticky;top:calc(var(--mh,58px) + 26px)}
.doc-rail .doc-sec:first-child{margin-top:0}
.kicker{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent)}
/* the Hub's name, leading the welcome page */
.sitename{font-family:var(--display);font-size:clamp(32px,3.9vw,50px);line-height:1.02;
  margin:0 0 22px;color:var(--accent);max-width:14ch}
.hero.tall .title{font-size:clamp(27px,3.1vw,39px);max-width:26ch}
.title{font-family:var(--display);font-size:clamp(34px,4.6vw,56px);line-height:1.04;margin:14px 0 0;
  max-width:20ch;text-wrap:pretty;font-weight:400}
.standfirst{font-family:var(--display);font-size:20px;line-height:1.45;color:var(--ink-2);
  margin:18px 0 0;max-width:44ch}
.hr{border:0;border-top:1px solid var(--line);margin:30px 0}

.copy{font-size:16px;line-height:1.78;color:var(--ink-2);max-width:70ch}
.copy p{margin:0 0 17px}
.copy p:last-child{margin-bottom:0}
.copy > p.open::first-letter{font-family:var(--display);font-size:54px;line-height:.84;
  float:left;margin:6px 10px 0 0;color:var(--ink)}
.copy h2{font-family:var(--display);font-size:26px;line-height:1.2;color:var(--ink);margin:34px 0 9px;font-weight:400}
.copy h2 .step{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);display:block;margin-bottom:5px}
.copy ul{margin:0 0 17px;padding-left:19px}
.copy li{margin-bottom:7px}
.copy strong{color:var(--ink);font-weight:500}
.pull{border-left:2px solid var(--accent);padding:1px 0 1px 17px;margin:24px 0;
  font-family:var(--display);font-size:19px;line-height:1.42;color:var(--ink);max-width:52ch}

.meta-t{width:100%;border-collapse:collapse}
.meta-t td{padding:7px 0;border-bottom:1px dotted var(--line-2);font-size:13px;vertical-align:baseline}
.meta-t td:first-child{width:40%;color:var(--ink-3);font-family:var(--mono);font-size:11px;
  letter-spacing:.05em;text-transform:uppercase;padding-right:16px}
.meta-t td:last-child{font-family:var(--mono);font-size:12.5px;color:var(--ink)}
.meta-t tr:last-child td{border-bottom:0}

.doc-sec{margin-top:40px;padding-top:15px;border-top:1px solid var(--line)}
.doc-sec > .lbl{display:block;margin-bottom:11px}
.doc-foot{max-width:1240px;margin:56px auto 0;padding:13px 26px 0;border-top:1px solid var(--rule);
  display:flex;gap:20px;
  flex-wrap:wrap;font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}

/* partner marks, centred at the foot of a page */
.partners{max-width:1240px;margin:64px auto 0;padding:34px 26px 6px;
  border-top:1px solid var(--line);text-align:center}
.partners .lbl{display:block;margin-bottom:20px}
.partners hr{border:0;border-top:1px solid var(--line);width:180px;margin:34px auto}
/* equal-width slots, so names of very different lengths still sit evenly */
.logos{display:flex;flex-wrap:wrap;justify-content:center;gap:26px 0}
.logo{flex:0 1 270px;display:flex;justify-content:center;align-items:center;text-align:center;
  padding:0 18px;border:0;font-family:var(--display);font-size:19px;line-height:1.3;color:var(--ink)}
.logo:hover{color:var(--accent)}
.logo img{height:38px;width:auto;display:block}

.stub{border:1px solid var(--line-2);border-left:2px solid var(--line-2);background:var(--wash);
  padding:16px 18px}
.doc-main .stub{max-width:56ch}
.stub b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;font-weight:500;color:var(--ink-2)}
.stub span{display:block;margin-top:4px;font-size:13px;color:var(--ink-3)}

.btn{display:inline-flex;align-items:center;padding:10px 17px;font-size:13px;font-weight:500;
  border:1px solid var(--ink);background:var(--ink);color:var(--panel);border-radius:0;cursor:pointer;
  font-family:var(--sans)}
.btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn.ghost:hover{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn.sm{padding:6px 11px;font-size:12px}

/* the band under the home header: a second, louder way into the data */
.band{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  max-width:1240px;margin:28px auto 0;padding:22px 26px;background:var(--accent-soft);
  border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);color:var(--ink);text-decoration:none}
.band:hover{border-color:var(--accent)}
.band-say{font-family:var(--display);font-size:clamp(18px,2vw,24px);line-height:1.3;max-width:48ch}
.band .btn{font-size:15px;padding:12px 22px;font-weight:600;background:var(--accent);border-color:var(--accent);color:#fff}
@media (max-width:860px){.band{margin:18px 16px 0}}

footer{border-top:1px solid var(--rule);margin-top:52px;padding:20px 0 46px;background:var(--paper)}
footer .f-in{max-width:1240px;margin:0 auto;padding:0 26px;display:flex;gap:20px;flex-wrap:wrap;
  align-items:baseline;font-family:var(--mono);font-size:10px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-3)}

/* one column once the rail stops earning its width */
@media (max-width:1040px){
  .doc{grid-template-columns:minmax(0,1fr);gap:0}
  .doc-rail{position:static;margin-top:8px}
}
/* below about 1100px the title, the menu and the switches no longer share one line,
   so the menu takes a full row of its own under the title; the links stay large */
@media (max-width:1100px){
  .mh-2-in{flex-wrap:wrap;row-gap:0}
  .lang{margin-left:auto}
  nav.main{order:5;flex:1 0 calc(100% + 28px);margin:0 -14px;overflow:visible;border-top:1px solid var(--rule)}
  nav.main a{padding:8px 14px 10px}
}
@media (max-width:860px){
  .hero-in{grid-template-columns:minmax(0,1fr)}
  .hero-txt{padding:38px 0 34px}
  .hero.tall .hero-txt{padding:44px 0 38px}
  .hero-art{border-left:0;border-top:1px solid var(--line);min-height:260px;
    margin:0 -26px;min-width:calc(100% + 52px)}
  .hero.tall .hero-art{min-height:280px}
}
@media (max-width:760px){
  .doc{padding:30px 22px 0}
  .doc-foot{margin-top:40px;padding-left:22px;padding-right:22px}
  .hero-in{padding:0 22px}
  .hero-art{margin:0 -22px;min-width:calc(100% + 44px)}
  /* keep the wordmark on one line so the nav keeps its room */
  .mark-t{font-size:17px;white-space:nowrap}
  .mh-2-in{padding:0 22px;gap:14px;row-gap:0}
  /* and on a phone the menu wraps onto two lines rather than scrolling off the edge */
  nav.main{flex-wrap:wrap;margin:0 -10px;flex-basis:calc(100% + 20px)}
  nav.main a{font-size:14px;padding:7px 10px 9px}
  nav.main a.on::after{left:10px;right:10px}
}

/* shown only when docs/data.js has not been generated */
.nodata{
  background:var(--accent-soft);border-bottom:1px solid var(--rule);
  padding:9px 20px;font-size:12.5px;color:var(--ink);
}
.nodata code{font-family:var(--mono,monospace);font-size:11.5px}