/* ============================================================
   Center for Computational Biophysics & Living-Systems Lab
   Global stylesheet
   ============================================================ */

:root{
  --ink:#1b2430; --muted:#5a6b7b; --line:#e3e9ef; --bg:#ffffff;
  --panel:#f6f9fc; --brand:#0b6b6b; --brand-2:#0e8f8f; --accent:#c2410c;
  --gold:#b7791f; --shadow:0 1px 3px rgba(16,42,67,.08),0 8px 24px rgba(16,42,67,.06);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.6;font-size:16px;
}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.25;color:var(--ink);margin:.2em 0 .4em}
h1{font-size:2.3rem;letter-spacing:-.02em}
h2{font-size:1.7rem;letter-spacing:-.01em}
h3{font-size:1.2rem}
p{margin:.5em 0}
.container{max-width:1140px;margin:0 auto;padding:0 22px}
.section{padding:56px 0;border-top:1px solid var(--line)}
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.74rem;color:var(--brand);font-weight:700}
.lead{font-size:1.12rem;color:var(--muted);max-width:64ch}
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:var(--shadow)}
.badge{display:inline-block;padding:2px 10px;border-radius:999px;background:#e6f4f4;color:var(--brand);font-size:.72rem;font-weight:700}
.btn{display:inline-block;background:var(--brand);color:#fff;padding:11px 20px;border-radius:10px;font-weight:600}
.btn.alt{background:#fff;color:var(--brand);border:1px solid var(--brand)}
table{width:100%;border-collapse:collapse;font-size:.94rem}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
th{background:var(--panel);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.muted{color:var(--muted)}
figure{margin:0}
img{max-width:100%;height:auto;display:block;border-radius:10px}
.kbd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#eef3f7;border:1px solid var(--line);border-radius:6px;padding:1px 6px;font-size:.85em}

/* ---- Header / nav ---------------------------------------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:66px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:-.01em}
.brand .mark{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--brand),var(--brand-2))}
.nav ul{display:flex;gap:20px;list-style:none;margin:0;padding:0}
.nav a{color:var(--ink);font-weight:600;font-size:.95rem}
.hero{padding:70px 0 40px;background:radial-gradient(1200px 400px at 80% -10%,#e8f6f6,transparent)}

/* ---- Footer ---------------------------------------------- */
.site-footer{background:#0c1a22;color:#c7d3dc;padding:52px 0;margin-top:20px}
.site-footer a{color:#8fd0d0}
.site-footer h4{color:#fff}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:26px}

/* ============================================================
   PART 2 — LEGITIMATE affordances (must be delivered)
   ============================================================ */

/* LEG-01 screen-reader-only */
.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}

/* LEG-02 responsive show/hide */
.desktop-only{display:block}
.mobile-only{display:none}
@media (max-width:760px){
  .desktop-only{display:none}
  .mobile-only{display:block}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr}
  h1{font-size:1.8rem}
}

/* LEG-08 icon-replacement text-indent on a logo link (<=4 words) */
.logo-ir{display:inline-block;width:132px;height:34px;overflow:hidden;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));border-radius:8px;
  text-indent:-9999px;white-space:nowrap}

/* LEG-13 mix-blend-mode text that stays visible on its backdrop */
.blend-banner{position:relative;background:linear-gradient(90deg,#0b6b6b,#c2410c);
  border-radius:14px;padding:26px 24px;overflow:hidden}
.blend-banner .blend-text{mix-blend-mode:screen;color:#bfeaea;font-weight:800;font-size:1.5rem}

/* LEG-14 visible pseudo-element text from data attribute */
.stat-chip::after{content:attr(data-metric);display:block;font-size:1.9rem;font-weight:800;color:var(--brand)}

/* LEG-16 text on a gradient with a readable side */
.gradient-panel{background:linear-gradient(90deg,#ffffff 0%,#ffffff 55%,#0b6b6b 100%);
  padding:22px;border-radius:14px;border:1px solid var(--line)}
.gradient-panel p{color:#1b2430;max-width:52ch}

/* LEG-17 gradient title via background-clip:text (glyphs painted, visible) */
.gradient-title{background:linear-gradient(90deg,#0b6b6b,#0e8f8f,#c2410c);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  color:transparent;font-weight:900;display:inline-block}

/* LEG-15 transient white-on-white keyframe (legit hero animation) */
@keyframes heroReveal{0%{color:#fff}60%{color:#fff}100%{color:var(--ink)}}
.hero-anim{animation:heroReveal 1.4s ease-out both}

/* ============================================================
   PART 1 — ILLEGITIMATE concealment mechanisms
   ============================================================ */

/* A. CSS visibility & geometry */
.c01{display:none}                                              /* CSS-01 */
.c02{visibility:hidden}                                         /* CSS-02 */
.c03{visibility:collapse}                                       /* CSS-03 */
.c04{opacity:0}                                                 /* CSS-04 */
.c05-anc{opacity:0}                                             /* CSS-05 ancestor */
.c06{opacity:.03}                                               /* CSS-06 */
.c07{filter:opacity(0)}                                         /* CSS-07 */
.c08-anc{filter:opacity(0)}                                     /* CSS-08 ancestor */
.c09{display:block;width:0;height:0;overflow:hidden}            /* CSS-09 */
.c10{display:block;width:1px;height:1px;overflow:hidden}        /* CSS-10 */
.c11{clip-path:inset(100%)}                                     /* CSS-11 */
.c12{clip-path:circle(0% at 50% 50%)}                           /* CSS-12 */
.c13{clip-path:polygon(0 0 ,0 0,  0 0)}                         /* CSS-13 */
.c14{position:absolute;clip:rect(0,0,0,0);overflow:hidden}      /* CSS-14 */
.c15-anc{clip-path:inset(100%)}                                 /* CSS-15 ancestor */
.c16{-webkit-mask:linear-gradient(#000,#000);mask:linear-gradient(#000,#000);
  -webkit-mask-size:0 0;mask-size:0 0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat} /* CSS-16 */
.c17{content-visibility:hidden}                                 /* CSS-17 */
.c18{display:block;text-indent:-9999px;white-space:nowrap;overflow:hidden} /* CSS-18 */
.c19{position:relative;left:-450px;width:400px;overflow:hidden;white-space:nowrap} /* CSS-19 */
.c20{font-size:2.4px;line-height:1;color:#333}                  /* CSS-20 */
.c21{display:block;width:1px;height:1px;overflow:hidden}        /* CSS-21 */
.c22{height:18px;overflow:auto}                                 /* CSS-22 */
.c22 .tall{padding-top:4900px;height:5000px}
.c24{position:absolute;top:-2000px;left:0}                      /* CSS-24 */
.c25{position:absolute;top:12000px;left:9000px}                 /* CSS-25 */
.c26-parent{position:relative;background:var(--bg);z-index:0}   /* CSS-26 */
.c26-behind{position:absolute;top:0;left:0;z-index:-1}
.c27-wrap{position:relative;display:inline-block}               /* CSS-27 */
.c27-cover{position:absolute;inset:0;background:var(--bg)}
.c28-wrap{position:relative;display:inline-block}               /* CSS-28 */
.c28-veil{position:absolute;inset:0;background:var(--bg);pointer-events:none}

/* B. Color camouflage */
.k01{color:transparent}                                         /* COL-01 */
.k02{color:#ffffff;background:#ffffff}                           /* COL-02 */
.k03{color:#efefef;background:#ffffff}                           /* COL-03 (<2:1) */
.k04{color:rgba(0,0,0,0.06)}                                    /* COL-04 */
.k05{-webkit-text-fill-color:transparent;color:#111}           /* COL-05 */
.k06{color:transparent;-webkit-text-stroke:.4px #ffffff;background:#ffffff} /* COL-06 */

/* C. Media-query divergence */
@media (prefers-color-scheme:dark){ .d04{color:#0c1116;background:#0c1116} }   /* DIV-04 */
.d05{display:none}
@media print{ .d05{display:block} }                                            /* DIV-05 */
.d06{display:none}
@media (forced-colors:active){ .d06{display:block} }                           /* DIV-06 */
.d07{opacity:1}
@media (max-width:600px){ .d07{opacity:0;visibility:hidden} }                  /* DIV-07 */

/* F. Reading-order manipulation */
.o01{display:flex;flex-direction:row-reverse}                  /* ORD-01 */
.o02{display:flex}                                             /* ORD-02 */
.o02 .p1{order:4}.o02 .p2{order:3}.o02 .p3{order:2}.o02 .p4{order:1}
.o03{display:grid;grid-template-columns:repeat(4,1fr)}         /* ORD-03 */
.o03 .q1{grid-column:4}.o03 .q2{grid-column:3}.o03 .q3{grid-column:2}.o03 .q4{grid-column:1}
.o04{direction:rtl;unicode-bidi:bidi-override}                 /* ORD-04 */

/* G. Pixel-axis custom fonts */
@font-face{font-family:"LabGlyphR";src:url("/assets/labglyph-r.woff") format("woff");font-display:swap}
@font-face{font-family:"LabGlyphI";src:url("/assets/labglyph-i.woff") format("woff");font-display:swap}
.f05{font-family:"LabGlyphR",monospace}                         /* PIX-05 cmap remap */
.f06{font-family:"LabGlyphI",monospace}                         /* PIX-06 invisible glyphs */

/* Deceptive-link helper: hidden attribution sibling */
.lnk-note{display:none}

/* misc layout used by the page */
.people{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.person{text-align:center}
.person .avatar{width:88px;height:88px;border-radius:50%;margin:0 auto 8px;
  background:linear-gradient(135deg,#cbe7e7,#e6f0f0)}
.pub{padding:14px 0;border-bottom:1px solid var(--line)}
.pub .venue{color:var(--brand);font-weight:600}
.tag{display:inline-block;background:#eef3f7;border:1px solid var(--line);border-radius:8px;
  padding:2px 9px;font-size:.78rem;color:var(--muted);margin:2px}
.timeline{list-style:none;padding:0;margin:0}
.timeline li{padding:12px 0 12px 22px;border-left:2px solid var(--brand);margin-left:6px;position:relative}
.timeline li::before{content:"";position:absolute;left:-7px;top:16px;width:12px;height:12px;
  border-radius:50%;background:var(--brand)}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.tab-btn{border:1px solid var(--line);background:#fff;border-radius:9px;padding:8px 14px;cursor:pointer;font-weight:600}
.tab-btn[aria-selected="true"]{background:var(--brand);color:#fff;border-color:var(--brand)}
.tab-panel[hidden]{display:none}                               /* LEG-06 */
.reveal{opacity:0;transform:translateY(14px);transition:.5s}   /* LEG-11 */
.reveal.in{opacity:1;transform:none}
dialog{border:1px solid var(--line);border-radius:14px;padding:24px;max-width:520px;box-shadow:var(--shadow)}
dialog::backdrop{background:rgba(12,26,34,.45)}
details{border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin:10px 0;background:#fff}
summary{cursor:pointer;font-weight:600}