/* ============================================================================
   CupCarbon website — shared design system (loaded AFTER each page's own
   styles: consistency, mobile layouts, performance and accessibility)
   ========================================================================== */
:root {
    --cc-blue: #38bdf8; --cc-blue-dark: #1673b1; --cc-ink: #10456b;
    --cc-text: #eef1f8; --cc-muted: #aeb8cf; --cc-border: rgba(255,255,255,.09);
}
html { -webkit-text-size-adjust: 100%; }
body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }

/* ---- keyboard focus (accessibility) ---- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible { outline: 2px solid var(--cc-blue); outline-offset: 2px; }

/* ---- navigation: consistent everywhere ---- */
nav { gap: 18px; }
nav a { position: relative; padding: 4px 0; transition: color .15s ease; }
nav a:not(.dl)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px;
    height: 2px; background: var(--cc-blue); transition: right .2s ease; }
nav a:not(.dl):hover::after { right: 0; }
nav .dl { transition: transform .15s ease, box-shadow .15s ease; }
nav .dl:hover { color: #ffffff; transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(56,189,248,.35); }
nav .brand { white-space: nowrap; }
nav .dl { margin-left: auto; background: var(--cc-blue); color: #ffffff; font-weight: 700;
    padding: 8px 16px; border-radius: 999px; }

/* ---- footer: consistent everywhere ---- */
footer { border-top: 1px solid var(--cc-border); margin-top: 20px; line-height: 1.7; }
footer a { color: var(--cc-blue); text-decoration: none; }

/* ---- cards and buttons: hover consistency ---- */
.card { transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.card:hover { transform: translateY(-4px); border-color: rgba(56,189,248,.55);
    box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.btn, .dlbtn, .cta, .download-btn { transition: transform .15s ease, box-shadow .15s ease,
    background .15s ease; }
.btn:hover, .dlbtn:hover { transform: translateY(-1px); }

/* ---- long tables scroll horizontally on small screens ---- */
@media (max-width: 720px) {
    table.sci, .panel table, .paper table { display: block; overflow-x: auto;
        white-space: nowrap; -webkit-overflow-scrolling: touch; }
    table.sci caption { white-space: normal; }
}

/* ---- responsive typography ---- */
.hero h1 { font-size: clamp(30px, 6vw, 58px); }
.hero p { font-size: clamp(15px, 2.6vw, 21px); }

/* ---- mobile layouts ---- */
@media (max-width: 720px) {
    nav { padding: 12px 4vw; gap: 10px 14px; justify-content: center; }
    nav .dl { margin-left: 0; width: 100%; text-align: center; }
    nav .brand { width: 100%; text-align: center; font-size: 18px; }
    .hero { padding-top: 96px; }                 /* below the wrapped nav */
    .hero .cta { padding: 13px 26px; font-size: 14px; }
    section { padding-left: 14px; padding-right: 14px; }
    .grid { grid-template-columns: 1fr; }
    .paper { padding: 26px 16px; margin-left: 8px; margin-right: 8px; }
    .panel { padding: 16px 14px; }
    .toc { justify-content: flex-start; }
    pre { font-size: 12px; }
    .videowrap { margin-left: 0; margin-right: 0; }
}

/* ---- performance: no background video on phones / data-saver ----
   (the fixed gradient keeps the same look without the download)  */
@media (max-width: 720px), (prefers-reduced-data: reduce) {
    #bgvid { display: none; }
    body { background: radial-gradient(1200px 600px at 50% -10%, #17324a 0%, #0a0c16 60%) fixed; }
}
/* reduced motion: static everything */
@media (prefers-reduced-motion: reduce) {
    #bgvid { display: none; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .reveal { opacity: 1 !important; transform: none !important; }
}
/* print: clean paper */
@media print {
    #bgvid, .overlay, nav, footer, .cue { display: none !important; }
    body { background: #fff; color: #000; }
    .paper { box-shadow: none; margin: 0; padding: 0; }
}