:root{
  /* ============================================================
     THEME PALETTE - edit ONLY this block to reskin the whole site.
     The variable names are historical (navy / teal) but act as
     semantic roles:  navy* = dark brand colour,  teal* = accent.
     Everything else (tints, borders, shadows, gradients) is derived
     from these with color-mix(), so changing the values below
     re-skins every page.

     Light/dark is one header button: data-mode="light" | "dark" on
     <html>, set by site.js and remembered in localStorage; DEFAULT_MODE
     there decides what a first visit gets.
     ============================================================ */

  /* --- LACMIS navy-gray --- */
  --navy:#003667; --navy-2:#0b4d78; --navy-strong:#064b7e; --navy-deep:#061f34;
  --teal:#0397a2; --teal-dark:#087985;
  --ink:#172a3a; --muted:#61717e; --body:#405766; --body-strong:#29445a;
  --on-dark:#d6e2ea; --on-dark-dim:#9bb0bf;
  /* Teal for small text on a dark fill (.section.dark, .contact-panel);
     --teal-dark is too dark there to read. */
  --on-dark-accent:#2fbecb;
  --line:#d8dfe3; --paper:#fbfcfb; --white:#ffffff; --gray:#9ea3a6;

  /* Derived tokens - follow the palette automatically; no need to edit.
     --brand-fill is the brand colour used as a FILLED SURFACE (primary
     button, dark band, contact panel, avatar). In light mode it is just
     --navy; dark mode keeps it dark while --navy itself turns into a
     light blue for text. --white is the base SURFACE colour: cards and
     panels sit on it and every tint is mixed against it, so in dark mode
     it is the raised dark surface rather than white. */
  --brand-fill: var(--navy); --brand-fill-hover: var(--navy-strong);
  --plate:#f5f9fa;
  --soft:#eef4f4; --sand:#e9e3d7;
  --tint: color-mix(in srgb, var(--teal) 7%, var(--white));
  --tint-2: color-mix(in srgb, var(--teal) 13%, var(--white));
  --accent-border: color-mix(in srgb, var(--teal) 26%, var(--white));
  --accent-ring: color-mix(in srgb, var(--teal) 32%, transparent);
  --line-strong: color-mix(in srgb, var(--navy) 24%, var(--white));
  --max:1180px; --radius:22px;
  --shadow:0 18px 55px color-mix(in srgb, var(--navy) 12%, transparent);
}
/* ============================================================
   DARK MODE - data-mode="dark" on <html>, applied on top of the palette
   above. Only the base tokens are restated:
   every derived tint, border, ring and shadow is mixed against --white
   or --navy, so all of them follow on their own.

   In dark mode one value can no longer do both of the brand colour's
   jobs, so they split: --navy is the brand colour as TEXT (headings,
   links) and becomes a light blue, while --brand-fill is the brand
   colour as a FILLED SURFACE and stays dark. --teal-dark keeps its
   historical name but is LIGHTER than --teal here, because it is only
   ever used as accent text.
   ============================================================ */
:root[data-mode="dark"]{
  color-scheme:dark;
  --navy:#8fbfe6; --navy-2:#14568a; --navy-strong:#abd2f0; --navy-deep:#070d13;
  --brand-fill:#0c3f6b; --brand-fill-hover:#155a93;
  --teal:#2fbecb; --teal-dark:#5ad4de; --on-dark-accent:var(--teal-dark);
  --ink:#e9eff4; --muted:#93a4b1; --body:#b6c5d1; --body-strong:#d5e1ea;
  --line:#27333d; --paper:#0c1319; --white:#151e26; --gray:#6e7d89;
  --plate:#dfe7ec; --shadow:0 18px 55px rgba(0,0,0,.6);
}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;color:var(--ink);background:var(--paper);font-family:"Segoe UI",system-ui,Arial,sans-serif;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:var(--navy);text-decoration-thickness:1px;text-underline-offset:.2em} a:hover{color:var(--teal-dark)}
img,svg{max-width:100%;height:auto}.wrap{width:min(var(--max),calc(100% - 40px));margin-inline:auto}.narrow{width:min(780px,calc(100% - 40px));margin-inline:auto}
/* A heading for screen readers only: gives a page its h2 where the design shows none. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-10000px;top:auto}.skip:focus{left:16px;top:16px;z-index:999;background:var(--white);color:var(--ink);padding:10px 14px;border:2px solid var(--navy);border-radius:8px}
.site-header{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--paper) 96%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid color-mix(in srgb,var(--navy) 10%,transparent)}
.nav-shell{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--navy);margin-right:auto}.brand-mark{width:46px;height:46px;object-fit:contain}.brand-word{height:22px;width:auto;display:block}.unizd-link{display:inline-flex;align-items:center;padding-left:18px;margin-left:2px;border-left:1px solid var(--line)}.unizd-link img{height:42px;width:auto;display:block;transition:opacity .18s ease}.unizd-link:hover img{opacity:.75}
.mode-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;margin-left:14px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--white);color:var(--navy);cursor:pointer;transition:border-color .18s ease,color .18s ease,transform .12s ease}.mode-toggle:hover{border-color:var(--line-strong);color:var(--teal-dark)}.mode-toggle:active{transform:scale(.93)}.mode-toggle svg{display:block}.mode-toggle{margin-left:8px}.brand-mark,.menu-button,.unizd-link,.mode-toggle{flex:none}.brand{min-width:0}.mode-toggle .icon-sun{display:none}:root[data-mode="dark"] .mode-toggle .icon-sun{display:block}:root[data-mode="dark"] .mode-toggle .icon-moon{display:none}.nav-links{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0}.nav-links a{display:block;padding:9px 10px;border-radius:10px;text-decoration:none;font-size:.92rem;font-weight:620;color:var(--body-strong)}.nav-links a:hover,.nav-links a[aria-current="page"]{background:var(--tint-2);color:var(--navy)}
.nav-cta{background:var(--brand-fill)!important;color:#fff!important;padding:10px 14px!important}.nav-cta:hover{background:var(--teal-dark)!important}.menu-button{display:none;border:1px solid var(--line);background:var(--white);color:var(--navy);border-radius:11px;padding:9px 12px;font:inherit;font-weight:700}
.hero{position:relative;overflow:hidden;padding:78px 0 64px;border-bottom:1px solid var(--line);background:linear-gradient(135deg,var(--paper) 0%,var(--tint) 58%,var(--tint-2) 100%)}.hero:after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;right:-140px;top:-170px;border:1px solid var(--accent-ring);box-shadow:0 0 0 50px color-mix(in srgb,var(--teal) 4%,transparent),0 0 0 110px color-mix(in srgb,var(--navy) 3%,transparent)}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;gap:72px;align-items:center}.eyebrow{font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-dark);margin:0 0 16px}.hero h1,.page-hero h1{font-size:clamp(2.55rem,5.5vw,5.2rem);line-height:.98;letter-spacing:-.055em;color:var(--navy);margin:0}.hero .lead{font-size:clamp(1.08rem,1.6vw,1.32rem);max-width:760px;color:var(--body);margin:26px 0 30px}.hero-logo{display:flex;justify-content:center}.hero-logo img{width:min(390px,100%);filter:drop-shadow(0 18px 30px color-mix(in srgb,var(--navy) 8%,transparent))}.hero-actions{display:flex;flex-wrap:wrap;gap:12px}.button{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:12px 18px;text-decoration:none;font-weight:720;border:1px solid var(--navy);transition:.18s ease}.button.primary{background:var(--brand-fill);border-color:var(--brand-fill);color:#fff}.button.primary:hover{background:var(--brand-fill-hover)}.button.secondary{background:transparent;color:var(--navy)}.button.secondary:hover{background:var(--white)}.button.ghost{border-color:var(--line);background:var(--white);color:var(--navy)}
.signal-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}.signal{border:1px solid var(--line);background:color-mix(in srgb,var(--white) 75%,transparent);border-radius:999px;padding:7px 11px;font-size:.82rem;color:var(--body)}
.section{padding:82px 0}.section.compact{padding:58px 0}.section.tint{background:var(--tint)}.section.dark{background:var(--brand-fill);color:#fff}.section.dark h2,.section.dark h3{color:#fff}.section.dark p{color:var(--on-dark)}.section.dark .eyebrow{color:var(--on-dark-accent)}.section.dark a.link{color:#fff}.section.dark a.link:hover{color:var(--on-dark-accent)}.section-head{display:block;margin-bottom:34px}.thesis-head{margin-top:48px}.section-head h2{font-size:clamp(2rem,3.6vw,3.15rem);line-height:1.03;letter-spacing:-.04em;color:var(--navy);margin:0}.section-head p{max-width:none;margin:14px 0 0;color:var(--muted)}
.grid-3,.grid-2,.grid-4{display:grid;gap:20px}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}.themes{align-items:start}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:28px;position:relative;overflow:hidden}.card:hover{border-color:var(--line-strong)}.card h3{color:var(--navy);font-size:1.18rem;letter-spacing:-.02em;margin:12px 0 8px}.card p{color:var(--muted);margin:0}.card .num{font-size:.76rem;font-weight:820;letter-spacing:.12em;color:var(--teal-dark)}.card.feature{box-shadow:var(--shadow);border:0}.card .link{display:inline-block;margin-top:16px;font-weight:700;text-decoration:none}
.pillar{border-top:3px solid var(--teal);padding-top:22px}.pillar strong{display:block;color:var(--navy);font-size:1.1rem;margin-bottom:5px}
.band{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.metric{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:18px}.metric b{display:block;font-size:1.65rem;color:var(--navy);letter-spacing:-.04em}.metric span{font-size:.82rem;color:var(--muted)}
.neural-canvas{min-height:330px;border-radius:32px;background:linear-gradient(145deg,var(--brand-fill),var(--navy-2));position:relative;overflow:hidden;box-shadow:var(--shadow)}.neural-canvas:before,.neural-canvas:after{content:"";position:absolute;border:1px solid rgba(255,255,255,.18);border-radius:50%}.neural-canvas:before{width:310px;height:310px;left:-80px;top:25px}.neural-canvas:after{width:220px;height:220px;right:-40px;bottom:-45px}.nodes{position:absolute;inset:0}.node{position:absolute;width:18px;height:18px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 8px color-mix(in srgb,var(--teal) 12%,transparent)}.node.n1{left:20%;top:22%}.node.n2{left:45%;top:42%}.node.n3{left:66%;top:21%}.node.n4{left:78%;top:61%}.node.n5{left:30%;top:72%}.line{position:absolute;height:2px;background:rgba(255,255,255,.55);transform-origin:left center}.line.l1{width:31%;left:21%;top:25%;transform:rotate(31deg)}.line.l2{width:27%;left:46%;top:44%;transform:rotate(-36deg)}.line.l3{width:34%;left:47%;top:45%;transform:rotate(29deg)}.line.l4{width:28%;left:31%;top:73%;transform:rotate(-45deg)}
.codes-figure{position:relative;overflow:hidden;min-height:330px;border-radius:32px;background:var(--plate);display:grid;place-items:center;padding:38px;box-shadow:var(--shadow)}
.codes-figure canvas.hero-net{opacity:.7}
/* Infrastructure band: the workstation photo sits behind the whole section,
   on the left, lightened against the tint and faded out towards the text on
   the right so the heading and the spec table stay legible over it. */
.infra{position:relative;overflow:hidden}
.infra-photo{position:absolute;inset:0;pointer-events:none;opacity:.42}
.infra-photo img{width:100%;height:100%;object-fit:cover;object-position:38% 50%}
.infra-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(to left,var(--tint) 0 32%,color-mix(in srgb,var(--tint) 76%,transparent) 48%,color-mix(in srgb,var(--tint) 30%,transparent) 66%,transparent 86%)}
.infra>.wrap{position:relative;z-index:1}
.infra-content{max-width:620px;margin-left:auto}
.infra .section-head{display:block;margin-bottom:26px}
.infra .section-head p{margin-top:12px;max-width:none}
@media(max-width:900px){.infra-content{max-width:none;margin-left:0}.infra-photo{opacity:.34}.infra-photo img{object-position:42% 50%}.infra-photo:after{background:color-mix(in srgb,var(--tint) 74%,transparent)}}

/* Photo figure (homepage location band). */
.photo-figure{position:relative;margin:0}
.photo-figure img{display:block;width:100%;height:100%;min-height:330px;object-fit:cover;border-radius:32px;box-shadow:var(--shadow)}
.photo-figure figcaption{padding:12px 4px 0;font-size:.82rem;color:var(--muted);line-height:1.45}
.codes-figure img{position:relative;z-index:1;width:min(92%,460px);height:auto;filter:drop-shadow(0 12px 26px color-mix(in srgb,var(--navy) 14%,transparent))}
.page-hero{padding:70px 0 52px;border-bottom:1px solid var(--line);background:linear-gradient(135deg,var(--paper),var(--tint));position:relative;overflow:hidden}.page-hero>.wrap,.page-hero>.narrow{position:relative;z-index:1}.hero-net{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.9}.page-hero h1{font-size:clamp(2.7rem,5vw,4.8rem)}.page-hero p{font-size:1.2rem;color:var(--body);max-width:820px;margin:22px 0 0}.crumb{font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;color:var(--teal-dark);font-weight:800;margin-bottom:16px}
.prose h2{font-size:2rem;color:var(--navy);letter-spacing:-.03em;margin:44px 0 12px}.prose h3{color:var(--navy);margin-top:30px}.prose p,.prose li{color:var(--body)}.prose ul{padding-left:1.2rem}.quote{border-left:4px solid var(--teal);padding:8px 0 8px 22px;font-size:1.22rem;color:var(--body-strong);margin:28px 0}
.theme{min-height:0;padding-bottom:26px}
.theme>summary{list-style:none;cursor:pointer}
.theme>summary::-webkit-details-marker{display:none}
.theme>summary::marker{content:""}
.theme>summary:focus-visible{outline:2px solid var(--teal);outline-offset:4px;border-radius:10px}
.theme summary h3{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:0}
.theme summary:hover h3{color:var(--teal-dark)}
.theme>p{margin-top:12px}.theme .tag{font-size:.72rem;text-transform:uppercase;letter-spacing:.11em;color:var(--teal-dark);font-weight:800}.theme h3{font-size:1.32rem}.theme:before{content:"";position:absolute;width:90px;height:90px;border:1px solid var(--accent-border);border-radius:50%;right:-28px;top:-30px}
.project{display:grid;grid-template-columns:180px 1fr minmax(160px,220px);gap:32px;padding:28px 0;border-top:1px solid var(--line);align-items:start}.project:first-child{border-top:0}.project-meta{font-size:.82rem;color:var(--muted)}.project h3{font-size:1.55rem;color:var(--navy);margin:0 0 8px}.project-muted{color:var(--muted)}.project-figure{margin:0}.project-figure img{display:block;width:100%;height:auto;border-radius:16px;background:var(--white)}.funder-copy{margin-top:28px}.status{display:inline-block;padding:5px 9px;border-radius:999px;background:var(--tint-2);color:color-mix(in srgb,var(--teal-dark) 85%,var(--ink));font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.people-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.person{padding:24px;border:1px solid var(--line);border-radius:20px;background:var(--white)}.avatar{width:80px;height:80px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand-fill),var(--teal));color:#fff;font-weight:800;margin-bottom:16px}.person h3{margin:0;color:var(--navy);font-size:1.12rem}.role{color:var(--teal-dark);font-size:.82rem;font-weight:760;margin:4px 0 12px}.person p{margin:0;color:var(--muted);font-size:.92rem}.person-links{margin-top:12px!important;display:flex;flex-wrap:wrap;gap:6px 14px}.person-links a{font-weight:700;font-size:.86rem}a.person{display:block;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s}a.person:hover{border-color:var(--line-strong);box-shadow:var(--shadow)}a.person:hover h3{color:var(--teal-dark)}.avatar{overflow:hidden}.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}.person h3 .ext,.partner h3 .ext{font-size:.78em;color:var(--teal-dark);margin-left:3px}
.spec-table{width:100%;border-collapse:collapse;border-top:2px solid var(--navy)}.spec-table th,.spec-table td{text-align:left;padding:15px 12px;border-bottom:1px solid var(--line);vertical-align:top}.spec-table th{color:var(--navy);font-size:.82rem;text-transform:uppercase;letter-spacing:.06em}.spec-table td{color:var(--body)}
.deliverables{margin:14px 0 0;padding-left:18px;color:var(--muted);font-size:.91rem}
.update{border-top:1px solid var(--line);padding:22px 0;display:grid;grid-template-columns:150px 1fr;gap:28px}.update:first-child{border-top:0}.update .meta{font-size:.78rem;color:var(--teal-dark);font-weight:800;text-transform:uppercase;letter-spacing:.08em}.update h3{margin:0 0 6px;color:var(--navy)}.update h3 a{color:var(--navy);text-decoration:none}.update h3 a:hover{color:var(--teal-dark);text-decoration:underline}.update p{margin:0;color:var(--muted)}
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:42px}.contact-panel{background:var(--brand-fill);color:#fff;border-radius:28px;padding:34px}.contact-panel h2{color:#fff;margin-top:0}.contact-panel p{color:var(--on-dark)}.contact-panel .eyebrow{color:var(--on-dark-accent)}.contact-list{list-style:none;margin:24px 0 0;padding:0}.contact-list li{border-top:1px solid rgba(255,255,255,.18);padding:13px 0}.contact-list a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.45)}.contact-list a:hover{color:var(--on-dark-accent);text-decoration-color:var(--on-dark-accent)}.contact-panel-actions{margin-top:24px}.contact-panel-button{border-color:#fff;color:#fff}.prototype-form{display:grid;gap:15px}.prototype-form label{font-weight:700;color:var(--body-strong)}.prototype-form input,.prototype-form textarea,.prototype-form select{width:100%;padding:12px 13px;border:1px solid var(--line-strong);border-radius:10px;background:var(--white);font:inherit;color:var(--ink)}.prototype-form textarea{min-height:130px;resize:vertical}.form-note{font-size:.84rem;color:var(--muted)}
/* Partner labs (people page): the whole card is a link out. */
a.card{display:block;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s}
a.card:hover{border-color:var(--line-strong);box-shadow:var(--shadow)}
a.card:hover h3{color:var(--teal-dark)}
.partner h3{margin-top:0}
.partner .partner-sub{font-size:.84rem;color:var(--teal-dark);font-weight:600;margin:0 0 12px}
.partner .partner-link{display:inline-block;margin-top:16px;font-weight:700;color:var(--teal-dark);font-size:.9rem}

.callout{background:var(--tint-2);border:1px solid var(--accent-border);border-radius:20px;padding:24px}.callout h3{color:var(--navy);margin-top:0}.callout p:last-child{margin-bottom:0}.tbd{border-left:3px solid var(--gray);padding-left:16px;color:var(--muted)}
.site-footer{background:var(--navy-deep);color:var(--on-dark);padding:54px 0 28px;margin-top:0}.footer-grid{display:grid;grid-template-columns:1.25fr .75fr .75fr;gap:48px}.footer-logo{width:170px;background:#fff;border-radius:18px;padding:10px}.site-footer h3{color:#fff;font-size:.9rem;text-transform:uppercase;letter-spacing:.1em;margin:0 0 14px}.site-footer a{color:var(--on-dark)}.site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}.footer-bottom{margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);font-size:.8rem;color:var(--on-dark-dim);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.reveal{opacity:0;transform:translateY(10px);transition:.45s ease}.reveal.visible{opacity:1;transform:none}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}}
@media(max-width:980px){.menu-button{display:block}.nav-links{display:none;position:absolute;top:78px;left:20px;right:20px;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:12px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}.nav-links.open{display:flex}.nav-links a{padding:11px 12px}.hero-grid,.band,.contact-grid{grid-template-columns:1fr}.hero-logo{order:-1}.hero-logo img{width:280px}.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3,.people-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:1/-1}}
@media(max-width:640px){.wrap,.narrow{width:min(100% - 28px,var(--max))}.hero{padding:42px 0 45px}.hero-grid{gap:26px}.hero h1,.page-hero h1{font-size:2.65rem}.section{padding:58px 0}.section-head{display:block}.section-head p{margin-top:12px}.grid-2,.grid-3,.grid-4,.people-grid,.metric-grid{grid-template-columns:1fr}.project,.update{grid-template-columns:1fr;gap:8px}.project-figure{max-width:280px}.footer-grid{grid-template-columns:1fr}.footer-grid>div:first-child{grid-column:auto}.brand-mark{width:40px;height:40px}.brand-word{height:19px}.unizd-link{padding-left:12px}.unizd-link img{height:34px}.mode-toggle{width:34px;height:34px;margin-left:10px}.mode-toggle{margin-left:6px}.nav-shell{gap:8px}.nav-shell{min-height:68px}.nav-links{top:68px}.hero-logo img{width:235px}.page-hero{padding:48px 0 40px}}

/* Home hero: the full LACMIS logo sits in a large soft identity field. */
.home .hero{padding:70px 0 72px}
.home .hero-grid{grid-template-columns:minmax(0,1.32fr) minmax(340px,.8fr);gap:40px}.home .hero h1{font-size:clamp(2.1rem,4.4vw,3.95rem);line-height:1.04;letter-spacing:-.03em}
.home .hero-logo{position:relative;min-height:600px;display:grid;place-items:center;isolation:isolate}
.home .hero-logo::before{content:"";position:absolute;width:min(600px,118%);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 48%,rgba(255,255,255,.98) 0 52%,rgba(255,255,255,.55) 74%,color-mix(in srgb,var(--teal) 7%,transparent) 100%);border:1px solid var(--accent-ring);box-shadow:0 28px 80px color-mix(in srgb,var(--navy) 10%,transparent);z-index:-1}
.home .hero-logo img{width:min(398px,84%);max-width:none;filter:drop-shadow(0 22px 34px color-mix(in srgb,var(--navy) 10%,transparent))}
@media(max-width:980px){.home .hero-grid{grid-template-columns:1fr;gap:30px}.home .hero-logo{min-height:440px;order:-1}.home .hero-logo::before{width:440px}.home .hero-logo img{width:320px;max-width:88%}}
@media(max-width:640px){.home .hero{padding:34px 0 46px}.home .hero h1{font-size:2rem}.home .hero-logo{min-height:340px}.home .hero-logo::before{width:330px}.home .hero-logo img{width:250px;max-width:90%}}

/* Home-only: short official block, news, theme door, goals. */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}
.about-card{height:100%}
.about-card h2,.about-card h3{margin:4px 0 8px;font-size:1.18rem;letter-spacing:-.02em;color:var(--navy)}
.about-card p{color:var(--body)}
.about-card-wide{grid-column:1/-1}
@media(max-width:640px){.about-grid{grid-template-columns:1fr}}
.theme-signals{margin-top:0}
.theme-signals a.signal{text-decoration:none;color:var(--navy);font-weight:700;transition:border-color .15s,color .15s}
.theme-signals a.signal:hover{border-color:var(--line-strong);color:var(--teal-dark)}
.goals-stack{display:grid;gap:16px;align-items:start}
.goals-stack .theme{padding-bottom:22px}
.theme .goal-list{margin-top:12px}
.goal-list{margin:0;padding-left:1.2rem;color:var(--body)}
.goal-list li{margin:7px 0}
@media(min-width:981px){
  .collaborate-grid{grid-template-columns:repeat(6,1fr)}
  .collaborate-grid .pillar{grid-column:span 2}
  .collaborate-grid .pillar:nth-child(4){grid-column:1/span 3}
  .collaborate-grid .pillar:nth-child(5){grid-column:4/span 3}
}
.home-section-action{margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.home-band-title{font-size:clamp(2rem,4vw,3.2rem);letter-spacing:-.04em;line-height:1.05}
.home-collab-title{font-size:clamp(2.1rem,4vw,3.4rem);letter-spacing:-.045em;color:var(--navy);line-height:1.05;margin:0 0 12px}
.home-collab-lead{font-size:1.12rem;color:var(--muted)}
.home-collab-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.home #infrastructure .section-head{display:block;margin-bottom:22px}
.home #infrastructure .section-head p{margin-top:12px;max-width:none}
.section.dark .funder-note{margin-top:18px;font-size:.9rem;color:var(--on-dark-dim);max-width:54ch}
.codes-credit h2{font-size:clamp(1.45rem,2.6vw,2rem);letter-spacing:-.03em;margin:0 0 10px;color:#fff}
.codes-figure-sm{min-height:200px;padding:24px}
.codes-figure-sm img{width:min(88%,280px)}
.home-news{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.home-news-item{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:24px;overflow:hidden}
.home-news-photo{display:block;margin:-24px -24px 18px;aspect-ratio:16/9;background:var(--tint)}.home-news-photo img{display:block;width:100%;height:100%;object-fit:cover}.home-news-photo.is-small img{object-fit:contain;padding:18px;box-sizing:border-box}
.home-news-item .meta{display:block;font-size:.78rem;color:var(--teal-dark);font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}
.home-news-item h3{margin:0 0 8px;font-size:1.15rem;letter-spacing:-.02em;line-height:1.3}
.home-news-item h3 a{color:var(--navy);text-decoration:none}
.home-news-item h3 a:hover{color:var(--teal-dark)}
.home-news-item p{margin:0;color:var(--muted);font-size:.95rem}
@media(max-width:980px){.home-news{grid-template-columns:1fr}}

/* News (one <details> per file in news/, rendered by site.js). Clicking a
   headline expands its text with the photo alongside. */
.news-list{margin-top:6px}
/* While news.json loads, the list holds a screen of space, so the footer is
   not in view and does not jump down once the items arrive. */
.news-list[aria-busy="true"]{min-height:100vh}.news-list>.pub-empty{margin:0}
.news-item{border-top:1px solid var(--line)}
.news-item:first-child{border-top:0}
.news-item>summary{display:grid;grid-template-columns:150px 1fr 24px;gap:28px;align-items:baseline;padding:22px 0;cursor:pointer;list-style:none}
.news-item>summary::-webkit-details-marker{display:none}
.news-item>summary::marker{content:""}
.news-item>summary:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:8px}
.news-item summary .meta{font-size:.78rem;color:var(--teal-dark);font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.news-item summary h3{margin:0;color:var(--navy);font-size:1.2rem;letter-spacing:-.01em}
.news-summary-text{min-width:0}
.news-excerpt{margin:8px 0 0;color:var(--muted);font-size:.95rem;font-weight:400}
.news-item summary:hover h3{color:var(--teal-dark)}
.news-chevron,.theme-chevron{width:11px;height:11px;flex:none;border-right:2px solid var(--teal-dark);border-bottom:2px solid var(--teal-dark);transform:translateY(-3px) rotate(45deg);transition:transform .18s}
.news-chevron{justify-self:end;align-self:center}
.news-item[open] .news-chevron,.theme[open] .theme-chevron{transform:translateY(3px) rotate(-135deg)}
.news-item[open] .news-excerpt{display:none}
.news-body{display:grid;grid-template-columns:1fr 340px;gap:32px;align-items:start;padding:0 0 30px;margin-left:178px}
.news-text p{margin:0 0 12px;color:var(--body)}
.news-text p:last-child{margin-bottom:0}
.news-link{margin:14px 0 0}
.news-link a{color:var(--teal-dark);font-weight:700;text-decoration:none}
.news-link a:hover{text-decoration:underline}
.news-item{scroll-margin-top:96px}
.news-share{margin:14px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.news-share button{border:1px solid var(--line);background:var(--white);color:var(--navy);border-radius:999px;padding:6px 14px;font:inherit;font-size:.85rem;font-weight:700;cursor:pointer}
.news-share button:hover{border-color:var(--line-strong);color:var(--teal-dark)}
.news-share button:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.news-share-status{font-size:.85rem;color:var(--muted);word-break:break-all}
/* A single photo fills the 340px column, but shrinks to its own width when it
   is smaller than that - a portrait is shown at its real size rather than
   upscaled into blur. */
.news-photo{border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
.news-photo:not(.news-gallery){width:fit-content;margin:0 auto}
.news-photo img{display:block;width:100%;height:auto}
.news-photo img{cursor:zoom-in}
.lightbox{width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(4,10,16,.96);display:none}
.lightbox[open]{display:grid;place-items:center}
.lightbox::backdrop{background:transparent}
.lightbox figure{margin:0;display:grid;place-items:center;width:100%;height:100%;padding:56px 64px;box-sizing:border-box;cursor:zoom-out}
.lightbox img{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.5);cursor:default}
.lb-close{position:absolute;top:14px;right:16px;width:42px;height:42px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:1.7rem;line-height:1;cursor:pointer}
.lb-close:hover{background:rgba(255,255,255,.26)}
.lb-close:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.lightbox .lb-nav{top:50%;width:44px;height:44px}
.lightbox .lb-nav[hidden]{display:none}
@media(max-width:640px){.lightbox figure{padding:56px 12px}}
/* An item with several photos (a "photos" list in news.json) becomes a slider.
   The strip is a plain scroll-snapping scroll container, so swipe and arrow
   keys are the browser's own; site.js only moves it for the arrows and dots.
   Slides share one 16:9 box so the panel does not jump between photos of
   different shapes - a single photo above keeps its natural proportions. */
.news-gallery{position:relative;border-radius:0;overflow:visible;box-shadow:none}
.news-track{display:grid;grid-auto-flow:column;grid-auto-columns:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;border-radius:20px;box-shadow:var(--shadow)}
.news-track::-webkit-scrollbar{display:none}
.news-track:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.news-slide{margin:0;scroll-snap-align:start}
.news-slide img{aspect-ratio:16/9;object-fit:cover}
.gal-nav{position:absolute;top:calc(50% - 10px);transform:translateY(-50%);display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:color-mix(in srgb,var(--white) 88%,transparent);color:var(--navy);box-shadow:0 2px 10px color-mix(in srgb,var(--navy) 35%,transparent);cursor:pointer;transition:opacity .18s,background .18s}
.gal-nav svg{width:15px;height:15px}
.gal-prev{left:10px}
.gal-next{right:10px}
.gal-next svg{transform:rotate(180deg)}
.gal-nav:hover{background:var(--white)}
.gal-nav:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.gal-nav[disabled]{opacity:0;pointer-events:none}
.gal-dots{display:flex;justify-content:center;gap:9px;margin-top:12px}
.gal-dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:var(--line);cursor:pointer;transition:background .18s}
.gal-dots button:hover{background:var(--gray)}
.gal-dots button[aria-current]{background:var(--teal-dark)}
.gal-dots button:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
@media(max-width:900px){.news-item>summary{grid-template-columns:1fr 24px;gap:6px 18px}.news-item summary .meta{grid-column:1/-1}.news-body{grid-template-columns:1fr;margin-left:0;gap:20px}.news-photo{order:-1}}
@media(prefers-reduced-motion:reduce){.news-chevron,.gal-nav,.gal-dots button{transition:none}}

/* Publications (rendered from assets/croris_lab_publications.bib) */
#publications,#students,#theses{scroll-margin-top:92px}
.pub-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.pub-filters button{font:inherit;font-size:.82rem;font-weight:700;border:1px solid var(--line);background:var(--white);color:var(--body-strong);border-radius:999px;padding:7px 12px;cursor:pointer}
.pub-filters button:hover{border-color:var(--line-strong);color:var(--navy)}
.pub-filters button[aria-pressed="true"]{background:var(--brand-fill);border-color:var(--brand-fill);color:#fff}
.pub-filters button .pub-filter-n{font-weight:640;opacity:.75;margin-left:2px}
.pub-list{margin-top:6px}
.pub{display:grid;grid-template-columns:60px 1fr;gap:22px;padding:15px 0;border-top:1px solid var(--line)}
.pub:first-child,.pub.pub-lead{border-top:0}
.pub.is-hidden{display:none}
.pub-year:empty{visibility:hidden}
.pub-group{border-top:1px solid var(--line-strong)}
.pub-group:first-child{border-top:0}
.pub-group>summary{display:flex;align-items:baseline;gap:16px;padding:16px 0;cursor:pointer;list-style:none}
.pub-group>summary::-webkit-details-marker{display:none}
.pub-group>summary::marker{content:""}
.pub-group>summary:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:8px}
.pub-group-year{font-size:1.25rem;font-weight:800;color:var(--navy);letter-spacing:-.01em;min-width:60px}
.pub-group-n{font-size:.82rem;color:var(--muted);font-weight:700;margin-right:auto}
.pub-group>summary:hover .pub-group-year{color:var(--teal-dark)}
.pub-group>summary .news-chevron{align-self:center}
.pub-group[open]>summary .news-chevron{transform:translateY(3px) rotate(-135deg)}
.pub-group-list{padding:0 0 14px 82px}
.pub-group .pub{grid-template-columns:1fr}
.pub-group .pub-year{display:none}
@media(max-width:640px){.pub-group-list{padding-left:0}}
.pub-body p{margin:0}
.pub-cite{font-size:.98rem;line-height:1.5}
.pub-authors{color:var(--body)}
.pub-authors strong{color:var(--navy)}
.pub-authors a.pub-member{color:inherit;text-decoration:none}
.pub-authors a.pub-member:hover strong{color:var(--teal-dark);text-decoration:underline}
.pub-title{color:var(--navy);font-weight:640}
.pub-meta{color:var(--muted);font-size:.86rem;margin-top:2px!important}
.pub-meta strong{color:var(--navy)}
.pub-meta a{color:var(--teal-dark);font-weight:700;text-decoration:none}
.pub-meta a:hover{text-decoration:underline}
.pub-empty{color:var(--muted)}
@media(max-width:640px){.pub{grid-template-columns:1fr;gap:5px}}

/* ============================================================
   DARK MODE - the few places the palette tokens above cannot reach on
   their own: light plates that exist to carry a dark logo, and photos
   that would otherwise glare against the dark page.
   ============================================================ */
/* The footer logo sits on a white plate only because the mark is dark;
   in dark mode the mark is already light, so the plate goes away. */
:root[data-mode="dark"] .footer-logo{background:transparent;padding:0}
/* The CODES/Interreg mark is multi-colour artwork with no dark variant,
   so its panel stays light, only toned down (--plate). Its drop shadow is
   tinted with --navy, which is a pale blue here, so it is dropped. */
:root[data-mode="dark"] .codes-figure img{filter:none}
/* The band behind the CODES section is --brand-fill, which in dark mode is
   still a saturated blue: against a near-black page it reads as a slab of
   the light palette, and nothing else here carries that colour. It becomes
   the page surface lifted towards the brand instead, so the band still
   separates itself from the page while staying inside the dark range. */
:root[data-mode="dark"] .section.dark{background:color-mix(in srgb,var(--brand-fill) 30%,var(--paper))}
/* The identity field behind the home-page logo is a white glow in light
   mode; here it becomes a soft lift of the surface colour instead. */
:root[data-mode="dark"] .home .hero-logo::before{background:radial-gradient(circle at 50% 48%,color-mix(in srgb,var(--white) 94%,transparent) 0 52%,color-mix(in srgb,var(--white) 52%,transparent) 74%,color-mix(in srgb,var(--teal) 9%,transparent) 100%)}
/* Photographs are lit for a white page; ease them back so they sit in
   the dark one rather than burning a hole in it. */
:root[data-mode="dark"] .infra-photo{opacity:.2}
:root[data-mode="dark"] .photo-figure img,:root[data-mode="dark"] .news-photo img{filter:brightness(.86) saturate(.94)}
/* Flipping either switch should read as a change of light, not a jump. */
body{transition:background-color .25s ease,color .25s ease}
@media(prefers-reduced-motion:reduce){body{transition:none}}
@media(max-width:460px){.brand-word{display:none}}