/* Food systems atlas tokens v0.1: the look of study E, "the atlas at night".
   Shared variables and classes so every later food-systems page matches. */
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@300;400;500;600&family=Barlow:wght@300;400;500&display=swap");

:root{
  --sea:#060a12;
  --land:#16202f;
  --coast:rgba(185,205,230,.30);
  --ink:#ece4d2;
  --soft:#b9b2a3;
  --faint:#7f7a70;
  --rule:rgba(236,228,210,.16);
  --taken:#f4a640;
  --closed:#78b8e0;
  --panel:rgba(7,11,19,.86);
  --font-display:"Barlow Condensed","Arial Narrow",sans-serif;
  --font-body:"Barlow",system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--sea);color:var(--ink)}
body{font-family:var(--font-body);font-weight:300;-webkit-font-smoothing:antialiased;line-height:1.4}

.kicker{font-family:var(--font-display);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.headline{font-family:var(--font-display);font-weight:400;font-size:29px;line-height:1.12;letter-spacing:.005em;color:var(--ink)}
.headline em{font-style:normal;color:var(--taken)}
.lede{font-size:13px;line-height:1.4;color:var(--soft)}
.label{font-family:var(--font-display);font-weight:500;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.big-number{font-family:var(--font-display);font-weight:500;font-size:40px;line-height:1;color:var(--ink)}
.source{font-size:10.5px;line-height:1.45;color:var(--faint)}
.panel{background:var(--panel);border:1px solid var(--rule);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:22px 24px 18px}
.glow{stroke:var(--taken);filter:drop-shadow(0 0 4px rgba(244,166,64,.85)) drop-shadow(0 0 12px rgba(244,166,64,.45))}
.dashed{stroke:var(--closed);stroke-dasharray:6 7;opacity:.55;filter:drop-shadow(0 0 3px rgba(120,184,224,.6))}
.screen{position:relative;min-height:100vh;min-height:100svh;padding:24px;overflow:hidden}

@media (max-width:600px){
  .screen{padding:16px}
  .headline{font-size:24px}
  .big-number{font-size:30px}
}