:root{--bg:#0b0d12;--panel:#12151c;--text:#e8ecf3;--muted:#a7b0c0;--accent:#62a0ff;--accent-2:#7be3d6;--border:#1c2230;--radius:16px;--shadow:rgba(0,0,0,.28)}
*{box-sizing:border-box}html,body{margin:0;padding:0}
body{font-family:ui-sans-serif,-apple-system,Segoe UI,Roboto,Helvetica,Arial;background:radial-gradient(1200px 900px at 80% -10%,#0f1320,var(--bg)) fixed;color:var(--text);line-height:1.6}
.container{width:min(1100px,92vw);margin:0 auto;padding:24px 0 80px}
.header{position:sticky;top:0;backdrop-filter:blur(10px);background:color-mix(in oklab,var(--bg) 90%,transparent);border-bottom:1px solid var(--border);z-index:10}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0}
.brand a{color:var(--text);text-decoration:none;font-weight:800;letter-spacing:.2px}.brand small{display:block;color:var(--muted);font-weight:500;margin-top:-2px}
.menu{display:flex;gap:16px;align-items:center}.menu a{color:var(--muted);text-decoration:none;padding:8px 12px;border-radius:10px}.menu a:hover,.menu a.active{color:var(--text);background:var(--panel)}
.btn{display:inline-block;text-decoration:none;color:#00121a;background:linear-gradient(135deg,var(--accent),var(--accent-2));padding:10px 14px;border-radius:12px;font-weight:700;box-shadow:0 8px 24px var(--shadow)}
.btn.secondary{background:none;color:var(--accent);border:1px solid var(--accent)}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center;padding:36px 0 10px}
.hero h1{font-size:clamp(28px,3.2vw,44px);line-height:1.15;margin:0 0 8px}.hero p.lead{color:var(--muted);margin:0 0 18px;font-size:clamp(14px,1.2vw,20px)}
.card{background:linear-gradient(180deg,color-mix(in oklab,var(--panel) 85%,transparent),var(--panel));border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 10px 30px var(--shadow);padding:20px}
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.kicker{color:var(--accent);font-weight:700;text-transform:uppercase;letter-spacing:.18em;font-size:12px}
.section h2{font-size:clamp(22px,2.4vw,34px);margin:10px 0 6px}.section p{color:var(--muted)}
.list{list-style:none;padding:0;margin:0;display:grid;gap:14px}.list li{padding:12px 14px;background:color-mix(in oklab,var(--panel) 70%,transparent);border:1px solid var(--border);border-radius:12px}.list li strong{display:block}
.tag{display:inline-block;font-size:12px;color:var(--accent);border:1px solid var(--accent);padding:4px 8px;border-radius:999px;margin-right:6px}
.footer{margin-top:64px;border-top:1px solid var(--border);color:var(--muted);padding-top:18px;font-size:14px}
@media (max-width:880px){.hero{grid-template-columns:1fr}}
details{background:color-mix(in oklab,var(--panel) 65%,transparent);border:1px solid var(--border);border-radius:12px;padding:12px 14px}
summary{cursor:pointer;font-weight:700;color:var(--text)}
/* Responsive image cards */
.media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;   /* consistent card shape */
  object-fit: cover;        /* crop edges nicely */
  border-radius: 12px;
  margin-bottom: 10px;
}
/* --- Mobile polish --- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn, .menu a { min-height: 44px; } /* finger-friendly tap targets */

.menu-toggle {
  display: none; border: 1px solid var(--border); background: var(--panel);
  color: var(--text); padding: 8px 12px; border-radius: 10px; font-weight: 700;
}

/* Narrow screens */
@media (max-width: 880px) {
  .container { padding: 18px 0 64px; }
  .hero { grid-template-columns: 1fr; }
  .grid { grid-template-columns: 1fr; }
  .card { padding: 16px; }

  .menu-toggle { display: inline-flex; align-items: center; gap: 8px; }
  .menu {
    position: fixed; top: 60px; right: 16px; left: 16px; z-index: 12;
    display: none; flex-direction: column; gap: 6px;
    background: color-mix(in oklab, var(--panel) 88%, transparent);
    border: 1px solid var(--border); border-radius: 14px; padding: 10px;
    box-shadow: 0 18px 40px var(--shadow);
  }
  .menu[data-open="true"] { display: flex; }
  .menu a { padding: 12px 10px; background: transparent; border-radius: 10px; }
  .menu a:hover { background: var(--panel); color: var(--text); }
}
/* Ensure images never overflow on small screens */
img { max-width: 100%; height: auto; display: block; }

/* Hero layout & image sizing */
.hero { display: grid; gap: 24px; }
.hero-img { width: 100%; height: auto; border-radius: 12px; object-fit: cover; }

/* Tight, scroll-proof layout on phones */
@media (max-width: 880px) {
  .hero { grid-template-columns: 1fr; align-items: start; }
  .tag { display: inline-block; margin-top: 6px; } /* wrap tags instead of stretching row */
}

/* Optional belt-and-suspenders if something still overflows */
html, body { overflow-x: hidden; }

/* === Desktop nav: keep everything on one row === */
@media (min-width: 881px) {
  .nav { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap: nowrap; }
  .menu { display:flex; gap:14px; flex-wrap: nowrap; }
  .menu a { white-space: nowrap; }           /* prevent per-link wrapping */
  .menu-toggle { display:none !important; }  /* button only on mobile */
  /* If space is tight on mid-size laptops, hide the tagline to keep one-row nav */
  .brand small { display: inline; }
}
@media (min-width: 881px) and (max-width: 1150px) {
  .brand small { display: none; }            /* frees space for the long menu labels */
}

/* Wider content on large screens (without touching mobile) */
@media (min-width: 1200px) {
  .container { max-width: 1140px; margin: 0 auto; }
}

/* Long links (e.g., DOIs) shouldn't push layout wide */
.list a, a { overflow-wrap: anywhere; word-break: break-word; }

/* Optional: nicer hover/active states on desktop */
@media (min-width: 881px) {
  .menu a { border-radius: 8px; padding: 6px 8px; }
  .menu a:hover { background: color-mix(in oklab, var(--panel) 85%, transparent); }
  .menu a.active { color: var(--accent); font-weight: 600; }
}
@media (min-width: 881px) {
  .header { position: sticky; top: 0; z-index: 50;
    background: color-mix(in oklab, var(--panel) 92%, transparent);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--border);
  }
}
@media (min-width: 1100px) {
  .hero { display:grid; grid-template-columns: 1.2fr 1fr; align-items:center; gap: 28px; }
}
.section p, .lead { max-width: 72ch; }
@media (min-width: 1100px) {
  .grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
.footer, .footer * { max-width: 100%; overflow-wrap: anywhere; }