/* ============================================================
   Lab for Plant Genomic Diversity & Design — base styles
   Tokens, theming (light/dark), layout, nav, shared elements.
   No build step; plain CSS. Sibling to the CERCA landing repo.
   ============================================================ */

:root{
  /* brand palette */
  --gold:#E3A324;          /* kernel gold — primary accent */
  --gold-soft:#F0B23A;
  --green:#2A5C43;         /* mid leaf */
  --forest:#16342A;        /* deep canopy — always-dark bands */
  --forest-2:#0E241C;      /* darker */
  --anthocyanin:#6B2C4D;   /* maize pigment — secondary accent */

  /* light theme surfaces + text */
  --bg:#F7F5EE;            /* warm paper */
  --band:#F7F5EE;          /* light band (research, join) */
  --band-alt:#E7EADF;      /* muted sage band (institutions, news) */
  --surface:#ffffff;
  --line:#D3D9C8;
  --text-main:#16201B;
  --text-soft:#5E6B62;
  --on-dark:#F6F4EC;       /* text on deep-green bands */
  --on-dark-soft:#B9C4B4;

  /* structure */
  --max:1180px;
  --nav-h:68px;
  --section-nav-h:46px;
  --radius-lg:6px;
  --radius-md:4px;
  --radius-sm:2px;
  --shadow-soft:0 14px 34px rgba(22,52,42,.10);
}

body.theme-dark{
  --bg:#0E1F18;
  --band:#12241C;
  --band-alt:#0C1B15;
  --surface:#15291F;
  --line:rgba(246,244,236,.12);
  --text-main:#F3F1E6;
  --text-soft:rgba(243,241,230,.72);
}

*{box-sizing:border-box;margin:0;padding:0}
html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + var(--section-nav-h) + 12px);
}
body{
  font-family:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--text-main);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .35s ease,color .35s ease;
}
h1,h2,h3,h4{font-family:"Spectral",Georgia,serif;font-weight:400}
.mono{font-family:"IBM Plex Mono",monospace}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer}
.container,.wrap{width:min(calc(100% - 44px),var(--max));margin:0 auto}
.section{padding:96px 0;position:relative}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.sec-num{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--gold);letter-spacing:.16em;display:block;margin-bottom:14px}

/* ---------- primary nav ---------- */
.nav-wrap{
  position:sticky;top:0;z-index:60;
  background:rgba(22,52,42,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
body.theme-dark .nav-wrap{background:rgba(7,19,14,.92)}
.nav{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h)}
.brand{display:flex;align-items:center;gap:12px;color:var(--on-dark)}
.brand .mark{width:28px;height:28px;flex:none}
.brand .wordmark{display:flex;flex-direction:column;line-height:1.05}
.brand .name{font-family:"Spectral",serif;font-size:15.5px;letter-spacing:.005em;white-space:nowrap}
.brand .name b{font-weight:600;color:var(--gold)}
.brand .byline{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-soft);margin-top:4px}
.nav-right{display:flex;align-items:center;gap:26px}
.nav-links{display:flex;gap:26px}
.nav-links a{color:var(--on-dark);font-size:14.5px;font-weight:500;opacity:.82;padding:6px 0;position:relative;transition:opacity .2s}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;background:var(--gold);transition:width .25s ease}
.nav-links a:hover{opacity:1}
.nav-links a:hover::after{width:100%}
.nav-links a[aria-current="page"]{opacity:1}
.nav-links a[aria-current="page"]::after{width:100%}
.theme-toggle{display:flex;align-items:center;gap:8px;background:none;border:0;color:var(--on-dark);opacity:.85}
.theme-toggle:hover{opacity:1}
.theme-toggle .track{width:34px;height:18px;border-radius:20px;background:rgba(255,255,255,.22);position:relative;transition:background .2s}
.theme-toggle .thumb{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--gold);transition:transform .2s}
body.theme-dark .theme-toggle .thumb{transform:translateX(16px)}
.theme-toggle .lbl{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.mobile-toggle{display:none;background:none;border:0;color:var(--on-dark);font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase}

/* ---------- section (scroll-spy) nav ---------- */
.section-nav{
  position:sticky;top:var(--nav-h);z-index:55;
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.section-nav-inner{display:flex;justify-content:center;height:var(--section-nav-h);align-items:center;gap:6px;overflow-x:auto}
.section-link{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-soft);padding:6px 12px;border-radius:20px;white-space:nowrap;transition:background .2s,color .2s}
.section-link:hover{color:var(--text-main)}
.section-link.active{background:rgba(227,163,36,.16);color:var(--text-main)}

/* ---------- floating dot indicator ---------- */
.floating-indicator{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:12px}
.floating-dot{width:9px;height:9px;border-radius:50%;background:var(--line);border:1px solid transparent;transition:background .2s,transform .2s}
.floating-dot:hover{transform:scale(1.3)}
.floating-dot.active{background:var(--gold);transform:scale(1.25)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;padding:13px 24px;border-radius:var(--radius-sm);font-weight:600;font-size:14.5px;transition:transform .18s ease,background .18s ease}
.btn-primary{background:var(--gold);color:var(--forest-2)}
.btn-primary:hover{transform:translateY(-2px);background:var(--gold-soft)}
.btn-ghost{border:1px solid rgba(255,255,255,.28);color:var(--on-dark)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn-outline-dark{border:1px solid var(--forest);color:var(--forest)}
body.theme-dark .btn-outline-dark{border-color:var(--gold);color:var(--gold)}
.btn-outline-dark:hover{background:var(--forest);color:var(--on-dark);transform:translateY(-2px)}
body.theme-dark .btn-outline-dark:hover{background:var(--gold);color:var(--forest-2)}

/* ---------- section headings ---------- */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:48px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(28px,3.6vw,42px);line-height:1.08;letter-spacing:-.01em;max-width:16ch}
.sec-head p{color:var(--text-soft);max-width:40ch;font-size:15.5px}

/* ---------- footer ---------- */
footer{background:var(--forest-2);color:var(--on-dark-soft);padding:70px 0 40px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.1)}
.foot-grid h4{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark);margin-bottom:16px;font-weight:500}
.foot-brand .name{font-family:"Spectral",serif;font-size:23px;color:var(--on-dark);margin-bottom:6px;line-height:1.15}
.foot-brand .fd{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.foot-brand .heritage{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--on-dark-soft);margin-top:16px;opacity:.75}
.foot-grid a{display:block;color:var(--on-dark-soft);font-size:14.5px;padding:5px 0;transition:color .2s}
.foot-grid a:hover{color:var(--gold)}
.foot-grid p{font-size:14px;line-height:1.7}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:26px;flex-wrap:wrap;gap:14px}
.foot-bottom p{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.03em}
.foot-social{display:flex;gap:10px}
.foot-social a{width:36px;height:36px;border:1px solid rgba(255,255,255,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--on-dark-soft);transition:all .2s}
.foot-social a:hover{border-color:var(--gold);color:var(--gold)}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media(max-width:860px){
  .nav-links{display:none}
  .mobile-toggle{display:block}
  .nav-links.open{display:flex;position:absolute;top:var(--nav-h);left:0;right:0;flex-direction:column;background:var(--forest-2);padding:18px 22px;gap:14px}
  .brand .name{font-size:13px}
  .brand .byline{display:none}
  .floating-indicator{display:none}
  .section{padding:70px 0}
  .foot-grid{grid-template-columns:1fr;gap:30px}
}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *{scroll-behavior:auto}
  .drift{animation:none!important}
}