/* ──────────────────────────────────────────────────────────────────────────
   CM-iTAD palette · Knowledge Graph for GML/GNN in AEC
   Colours derived from the CM-iTAD cube logo (light blue → deep blue, gold).
   ────────────────────────────────────────────────────────────────────────── */
:root {
  --bL: #56AEE8;   /* light blue (top faces of cube) */
  --bM: #2E89D9;   /* mid blue */
  --bD: #1F5FA8;   /* deep blue (left faces) */
  --yL: #FFD27A;   /* light gold */
  --yY: #F4B73B;   /* gold (right faces / accent) */

  --bg-0: #0B1322;            /* deepest navy */
  --bg-1: #111B30;            /* surface */
  --bg-2: #18243C;            /* panel */
  --bg-3: #1F3052;            /* raised */
  --line: rgba(255,255,255,0.08);
  --line-2: rgba(255,255,255,0.14);

  --tx-0: #F1F5FA;            /* primary text on dark */
  --tx-1: #C5D0DE;            /* secondary */
  --tx-2: #8E9AAB;            /* muted */
  --tx-3: #5A6275;            /* faint */
  --tx-d: #1A2230;            /* primary on light surfaces */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%;
       text-size-adjust:100%; }   /* iOS landscape font auto-bump off */
body { font-family:'Inter','Segoe UI',Arial,sans-serif; color:var(--tx-0);
       background:var(--bg-0); line-height:1.55; -webkit-font-smoothing:antialiased;
       -webkit-tap-highlight-color:transparent;  /* no grey flash on iOS taps */
       overscroll-behavior-y:contain;            /* no Chrome pull-to-refresh */
       text-rendering:optimizeLegibility; }
body.modal-open { overflow:hidden; }              /* lock when drawer/lightbox open */
a { color:var(--bL); text-decoration:none;
    touch-action:manipulation; }                  /* zero-delay taps */
a:hover { color:var(--yY); }
a:focus-visible, button:focus-visible,
input:focus-visible, label:focus-visible {
  outline:2px solid var(--bL); outline-offset:2px; border-radius:4px;
}
button, .cta-btn, .nav-link, .nav-toggle, .browse-card,
.feature-card, .img-card, .paper-card, .filter-input,
.rel-link, .badge { touch-action:manipulation; }
img { -webkit-user-drag:none; user-select:none; }   /* drag-image off on touch */

/* ── Site nav ─────────────────────────────────────────────────────────── */
.site-nav { display:flex; align-items:center; gap:0.6rem;
            padding:0.55rem 1.6rem; background:rgba(11,19,34,0.92);
            backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--line);
            position:sticky; top:0; z-index:100; }
.itad-logo { display:flex; align-items:center; gap:0.75rem; text-decoration:none;
             color:var(--tx-0); flex-shrink:0; }
/* The PNG is shipped at 480x384, but defensively cap to 54px height in the
   nav so a CSS load failure can never blow the layout. */
img.logo-png { display:block; height:54px; width:auto;
               max-height:54px; max-width:160px; flex-shrink:0;
               object-fit:contain;
               filter:drop-shadow(0 1px 3px rgba(0,0,0,0.5)); }
.itad-logo img.logo-png { height:54px; max-height:54px; }
.itad-logo .tagline { display:none; font-size:0.66rem; font-weight:600; color:var(--tx-2);
                      letter-spacing:0.18em; text-transform:uppercase; padding-left:0.7rem;
                      border-left:1px solid var(--line-2); line-height:1.3; }
@media (min-width: 760px) { .itad-logo .tagline { display:block; } }
.spacer { flex:1; }
.nav-link { padding:0.45rem 0.9rem; color:var(--tx-1); font-size:0.92rem; font-weight:500;
            border-radius:6px; transition:color 0.2s, background 0.2s; }
.nav-link:hover { color:var(--bL); background:rgba(86,174,232,0.06); }
.nav-link.active { color:var(--bL); background:rgba(86,174,232,0.10); }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero { position:relative; padding:5rem 1.5rem 4rem; text-align:center; overflow:hidden;
        background:
          radial-gradient(900px 500px at 18% 10%, rgba(86,174,232,0.18), transparent 70%),
          radial-gradient(720px 420px at 82% 90%, rgba(244,183,59,0.10), transparent 65%),
          linear-gradient(180deg, #0B1322 0%, #102140 65%, #0B1322 100%);
}
/* subtle graph-lattice pattern in the hero */
.hero::before {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0.18;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.35) 1px, transparent 1.4px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse at center, #000 40%, transparent 80%);
}
.hero-inner { position:relative; max-width:920px; margin:0 auto; }
.eyebrow { display:inline-block; padding:0.3rem 0.85rem; border-radius:999px;
           background:rgba(86,174,232,0.14); border:1px solid rgba(86,174,232,0.35);
           color:var(--bL); font-size:0.78rem; font-weight:600; letter-spacing:0.08em;
           text-transform:uppercase; margin-bottom:1.5rem; }
.hero h1 { font-size:clamp(2.1rem, 4.2vw, 3.4rem); line-height:1.12; font-weight:700;
           letter-spacing:-0.02em; margin-bottom:1.1rem; color:var(--tx-0); }
.hero h1 .accent { background:linear-gradient(90deg,var(--bL) 0%, var(--yY) 100%);
                   -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p { font-size:1.05rem; max-width:740px; margin:0 auto 2.2rem; color:var(--tx-1); }
.cta-row { display:flex; gap:0.7rem; justify-content:center; flex-wrap:wrap; }
.cta-btn { display:inline-flex; align-items:center; gap:0.5rem;
           padding:0.78rem 1.5rem; font-weight:600; font-size:0.96rem;
           border-radius:8px; text-decoration:none; transition:all 0.18s;
           border:1px solid transparent; }
.cta-btn.primary { background:linear-gradient(135deg, var(--bM), var(--bD)); color:#fff;
                   box-shadow:0 4px 14px rgba(46,137,217,0.32); }
.cta-btn.primary:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(46,137,217,0.45);
                         color:#fff; }
.cta-btn.secondary { background:rgba(255,255,255,0.05); color:var(--tx-0);
                     border-color:rgba(255,255,255,0.18); }
.cta-btn.secondary:hover { background:rgba(255,255,255,0.10); border-color:var(--yY);
                           color:var(--yY); transform:translateY(-2px); }

/* ── Stats bar ────────────────────────────────────────────────────────── */
.stats-bar { display:grid; grid-template-columns:repeat(6, 1fr); gap:0;
             background:linear-gradient(180deg, var(--bg-1), var(--bg-2));
             border-top:1px solid var(--line); border-bottom:1px solid var(--line);
             padding:0.4rem 0; }
.stat { padding:1.4rem 1.2rem; text-align:center;
        border-right:1px solid var(--line); position:relative; }
.stat:last-child { border-right:none; }
.stat::before { content:""; position:absolute; left:50%; top:8px; transform:translateX(-50%);
                width:6px; height:6px; border-radius:50%; background:var(--bL); opacity:0.55; }
.stat:nth-child(2)::before { background:var(--yY); }
.stat:nth-child(3)::before { background:var(--bL); }
.stat:nth-child(4)::before { background:var(--yY); }
.stat:nth-child(5)::before { background:var(--bL); }
.stat:nth-child(6)::before { background:var(--yY); }
.stat .num { display:block; font-size:2.05rem; font-weight:700; color:var(--tx-0);
             font-feature-settings:"tnum"; letter-spacing:-0.01em; }
.stat .lbl { font-size:0.7rem; color:var(--tx-2); text-transform:uppercase;
             letter-spacing:0.12em; font-weight:600; }
@media (max-width: 980px) { .stats-bar { grid-template-columns:repeat(3,1fr); }
                            .stat:nth-child(3) { border-right:none; } }
@media (max-width: 560px) { .stats-bar { grid-template-columns:repeat(2,1fr); } }

/* ── Sections ─────────────────────────────────────────────────────────── */
.section { padding:4rem 1.5rem; max-width:1280px; margin:0 auto; }
.section h2 { font-size:1.7rem; font-weight:700; color:var(--tx-0); letter-spacing:-0.01em;
              margin-bottom:0.4rem; position:relative; padding-left:0.9rem; }
.section h2::before { content:""; position:absolute; left:0; top:0.3rem; bottom:0.3rem;
                      width:4px; border-radius:2px;
                      background:linear-gradient(180deg, var(--bL), var(--yY)); }
.section .subtitle { color:var(--tx-2); margin-bottom:2rem; font-size:0.97rem; }
.section .subtitle a { color:var(--bL); }
.section .subtitle a:hover { color:var(--yY); }

/* ── Feature cards (What's inside) ────────────────────────────────────── */
.feature-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:1rem; }
.feature-card { padding:1.4rem 1.3rem; border-radius:10px;
                background:linear-gradient(155deg, var(--bg-1), var(--bg-2));
                border:1px solid var(--line); transition:transform 0.18s, border-color 0.18s; }
.feature-card:hover { transform:translateY(-3px); border-color:var(--bL); }
.feature-card .ic { font-size:1.4rem; line-height:1; margin-bottom:0.65rem;
                    display:inline-block; width:38px; height:38px; border-radius:9px;
                    background:linear-gradient(135deg, rgba(86,174,232,0.18), rgba(244,183,59,0.10));
                    border:1px solid var(--line-2); display:grid; place-items:center; }
.feature-card h3 { font-size:0.98rem; font-weight:700; color:var(--tx-0); margin-bottom:0.4rem; }
.feature-card p  { font-size:0.86rem; color:var(--tx-1); line-height:1.5; }
.feature-card .lnk { display:inline-block; margin-top:0.7rem; font-size:0.82rem;
                     font-weight:600; color:var(--bL); }
.feature-card .lnk:hover { color:var(--yY); }

/* ── Image / paper grid ───────────────────────────────────────────────── */
.img-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(350px,1fr)); gap:1.3rem; }
.img-card { background:var(--bg-1); border:1px solid var(--line); border-radius:10px;
            overflow:hidden; transition:transform 0.2s, box-shadow 0.2s, border-color 0.2s; }
.img-card:hover { transform:translateY(-4px); border-color:var(--bL);
                  box-shadow:0 14px 32px rgba(0,0,0,0.45); }
.img-card .img-wrap { position:relative; aspect-ratio:4/3; overflow:hidden;
                      background:#fff; cursor:zoom-in; }
.img-card img { width:100%; height:100%; object-fit:cover; display:block; }
.img-card .badge-tag { position:absolute; top:10px; left:10px; padding:3px 8px;
                       font-size:0.68rem; font-weight:700; letter-spacing:0.05em;
                       text-transform:uppercase; border-radius:4px; color:var(--bg-0);
                       background:linear-gradient(135deg, var(--yL), var(--yY)); }
.img-card .cap { padding:0.95rem 1.05rem 1.05rem; }
.img-card .cap strong { display:block; font-size:0.95rem; font-weight:600;
                        color:var(--tx-0); margin-bottom:0.25rem; }
.img-card .cap span { font-size:0.82rem; color:var(--tx-2); line-height:1.45; }

/* ── Recently published cards ─────────────────────────────────────────── */
.paper-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(290px,1fr)); gap:0.9rem; }
.paper-card { background:var(--bg-1); border:1px solid var(--line); border-radius:8px;
              padding:0.95rem 1.1rem; position:relative; overflow:hidden;
              transition:transform 0.15s, border-color 0.18s; }
.paper-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
                      background:linear-gradient(180deg, var(--bL), var(--bD)); }
.paper-card:nth-child(even)::before { background:linear-gradient(180deg, var(--yL), var(--yY)); }
.paper-card:hover { transform:translateY(-2px); border-color:var(--bL); }
.paper-card a { display:block; }
.paper-card .num  { font-family:'JetBrains Mono', monospace; font-size:0.74rem;
                    color:var(--tx-2); font-weight:600; letter-spacing:0.04em; }
.paper-card .ttl  { font-size:0.92rem; font-weight:600; color:var(--tx-0); margin:0.3rem 0;
                    line-height:1.4; }
.paper-card .meta { font-size:0.76rem; color:var(--tx-2); }

/* ── Paper detail page (preserved from previous design, polished) ─────── */
.paper-detail { max-width:880px; margin:2rem auto; padding:0 1.5rem; color:var(--tx-0); }
.paper-detail h1 { font-size:1.55rem; margin-bottom:1rem; color:var(--tx-0); line-height:1.3; }
.badge { display:inline-block; padding:0.22rem 0.7rem; border-radius:999px;
         font-size:0.74rem; font-weight:600; margin:0.2rem 0.15rem;
         background:rgba(86,174,232,0.14); color:var(--bL);
         border:1px solid rgba(86,174,232,0.30); }
.badge.cat  { background:rgba(244,183,59,0.14); color:var(--yY);
              border-color:rgba(244,183,59,0.30); }
.badge.dom  { background:rgba(46,137,217,0.16); color:var(--bM);
              border-color:rgba(46,137,217,0.32); }
.badge.year { background:rgba(255,210,122,0.12); color:var(--yL);
              border-color:rgba(255,210,122,0.28); }
table.meta-table { width:100%; border-collapse:collapse; margin:1rem 0; font-size:0.9rem;
                   background:var(--bg-1); border:1px solid var(--line); border-radius:8px;
                   overflow:hidden; }
table.meta-table th { background:var(--bg-2); padding:0.55rem 0.9rem; text-align:left;
                      width:30%; color:var(--tx-1); border-bottom:1px solid var(--line);
                      font-weight:600; }
table.meta-table td { padding:0.55rem 0.9rem; border-bottom:1px solid var(--line);
                      color:var(--tx-0); }
table.meta-table tr:last-child th, table.meta-table tr:last-child td { border-bottom:none; }
.rel-section { margin:1.5rem 0; }
.rel-section h3 { font-size:1rem; margin-bottom:0.55rem; color:var(--tx-1);
                  text-transform:uppercase; letter-spacing:0.06em; font-size:0.82rem; }
.rel-link { display:inline-block; padding:0.27rem 0.7rem;
            background:rgba(86,174,232,0.10); color:var(--bL);
            border:1px solid rgba(86,174,232,0.25); border-radius:6px;
            font-size:0.82rem; margin:0.18rem; text-decoration:none;
            transition:all 0.15s; }
.rel-link:hover { background:rgba(244,183,59,0.14); color:var(--yY);
                  border-color:rgba(244,183,59,0.35); }

/* ── Footer ───────────────────────────────────────────────────────────── */
footer { background:linear-gradient(180deg, var(--bg-0), #060B16);
         border-top:1px solid var(--line); color:var(--tx-2);
         padding:2.4rem 1.5rem; text-align:center; font-size:0.85rem; margin-top:5rem; }
footer a { color:var(--bL); }
.footer-brand { display:flex; align-items:center; justify-content:center;
                gap:0.55rem; margin-bottom:0.8rem; font-size:1rem; font-weight:600;
                color:var(--tx-0); }
.footer-brand img.logo-png { height:42px; max-height:42px; max-width:120px;
                             width:auto; display:block; object-fit:contain;
                             filter:drop-shadow(0 1px 2px rgba(0,0,0,0.4)); }

/* ── Back button (paper pages) ────────────────────────────────────────── */
.paper-back-row { max-width:880px; margin:1rem auto 0; padding:0 1.5rem; }
.paper-back {
  display:inline-flex; align-items:center; gap:0.55rem;
  padding:0.62rem 1.2rem 0.62rem 1.05rem;
  background:linear-gradient(135deg, rgba(46,137,217,0.18), rgba(86,174,232,0.10));
  backdrop-filter:saturate(140%) blur(10px);
  border:1px solid rgba(86,174,232,0.42);
  border-radius:999px;
  color:var(--bL); text-decoration:none;
  font-size:0.92rem; font-weight:600; letter-spacing:0.01em;
  min-height:42px;
  box-shadow:0 2px 10px rgba(0,0,0,0.18);
  transition:all 0.15s;
  -webkit-tap-highlight-color:transparent;
}
.paper-back:hover {
  color:var(--yY); border-color:rgba(244,183,59,0.55);
  background:linear-gradient(135deg, rgba(244,183,59,0.18), rgba(255,210,122,0.10));
  box-shadow:0 4px 16px rgba(244,183,59,0.18);
}
.paper-back:hover .arrow { transform:translateX(-3px); }
.paper-back:active { transform:scale(0.97); }
.paper-back .arrow {
  transition:transform 0.18s;
  font-size:1.05rem; font-weight:700; line-height:1;
}
.paper-back .label { line-height:1; }

/* ── Breadcrumb (paper pages, wiki sub-pages) ─────────────────────────── */
.breadcrumb { color:var(--tx-2); font-size:0.82rem; margin-bottom:1rem;
              letter-spacing:0.02em; }
.breadcrumb a { color:var(--bL); }
.breadcrumb a:hover { color:var(--yY); }
.breadcrumb .sep { margin:0 0.4rem; opacity:0.55; }

/* ── Page hero (smaller than the home hero, for inner pages) ──────────── */
.page-hero { padding:3.2rem 1.5rem 2.5rem; text-align:center;
             background:
               radial-gradient(900px 360px at 30% 10%, rgba(86,174,232,0.14), transparent 70%),
               linear-gradient(180deg, var(--bg-1), var(--bg-0));
             border-bottom:1px solid var(--line); }
.page-hero h1 { font-size:clamp(1.7rem, 3.2vw, 2.4rem); font-weight:700;
                letter-spacing:-0.015em; color:var(--tx-0); margin-bottom:0.5rem; }
.page-hero h1 .accent { background:linear-gradient(90deg,var(--bL),var(--yY));
                        -webkit-background-clip:text; background-clip:text; color:transparent; }
.page-hero p { font-size:1rem; color:var(--tx-1); max-width:720px; margin:0 auto; }

/* ── Browse cards (wiki landing — categories / domains / lineages) ────── */
.browse-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
               gap:0.7rem; margin-bottom:2rem; }
.browse-card { background:var(--bg-1); border:1px solid var(--line); border-radius:8px;
               padding:0.85rem 1rem; cursor:pointer; transition:all 0.15s;
               position:relative; overflow:hidden; }
.browse-card::after { content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
                      background:var(--bL); opacity:0; transition:opacity 0.15s; }
.browse-card:hover { border-color:var(--bL); transform:translateY(-2px);
                     box-shadow:0 8px 18px rgba(0,0,0,0.3); }
.browse-card:hover::after { opacity:1; }
.browse-card.active { border-color:var(--yY); }
.browse-card.active::after { background:var(--yY); opacity:1; }
.browse-card .lbl { font-size:0.92rem; font-weight:600; color:var(--tx-0);
                    line-height:1.3; }
.browse-card .cnt { font-size:0.74rem; color:var(--tx-2); margin-top:0.2rem;
                    letter-spacing:0.05em; text-transform:uppercase; font-weight:600; }
.browse-card.dom .cnt { color:var(--bM); }
.browse-card.lin .cnt { color:var(--yY); }

.browse-section { margin-bottom:2rem; }
.browse-section > h3 { font-size:0.78rem; color:var(--tx-2); text-transform:uppercase;
                       letter-spacing:0.13em; font-weight:600; margin-bottom:0.7rem;
                       display:flex; align-items:center; gap:0.5rem; }
.browse-section > h3::before { content:""; width:14px; height:2px; background:var(--bL);
                               border-radius:2px; }
.browse-section.lin > h3::before { background:var(--yY); }

/* ── Filter / search input (wiki) ─────────────────────────────────────── */
.filter-controls { display:flex; gap:0.6rem; align-items:center; flex-wrap:wrap;
                   margin-bottom:1.2rem; }
.filter-input { flex:1 1 280px; max-width:520px; padding:0.65rem 0.95rem;
                background:var(--bg-1); color:var(--tx-0);
                border:1px solid var(--line-2); border-radius:8px;
                font-size:0.95rem; font-family:inherit;
                transition:border-color 0.15s, box-shadow 0.15s; }
.filter-input::placeholder { color:var(--tx-3); }
.filter-input:focus { outline:none; border-color:var(--bL);
                      box-shadow:0 0 0 3px rgba(86,174,232,0.15); }
.filters-toggle { display:none; align-items:center; gap:0.4rem;
                  padding:0.65rem 1.05rem; background:var(--bg-1);
                  color:var(--tx-0); border:1px solid var(--line-2);
                  border-radius:8px; font-family:inherit; font-size:0.92rem;
                  font-weight:600; cursor:pointer; min-height:44px;
                  transition:all 0.15s; }
.filters-toggle:hover { border-color:var(--bL); color:var(--bL); }
.filters-toggle.open { background:rgba(86,174,232,0.10);
                       border-color:var(--bL); color:var(--bL); }
.filters-toggle .ft-icon { font-size:1.05rem; line-height:1;
                            transition:transform 0.18s; }
.filters-toggle.open .ft-icon { transform:rotate(45deg); }
.filters-toggle .ft-count { color:var(--yY); font-weight:700;
                             margin-left:0.15rem; }
/* Stack panel — desktop always shows it, mobile toggles via data attr */
.browse-stack { transition:max-height 0.28s ease, opacity 0.18s; }
.browse-stack[data-collapsed="true"] { display:none; }

.filter-meta { color:var(--tx-2); font-size:0.82rem; margin-bottom:1rem; }
.filter-meta strong { color:var(--bL); }
.clear-filter { display:none; padding:0.18rem 0.6rem; margin-left:0.5rem;
                background:rgba(244,183,59,0.14); color:var(--yY);
                border:1px solid rgba(244,183,59,0.32); border-radius:999px;
                font-size:0.72rem; font-weight:600; cursor:pointer; }
.clear-filter.show { display:inline-block; }
.clear-filter:hover { background:rgba(244,183,59,0.22); }

/* ── Wiki paper table ─────────────────────────────────────────────────── */
.wiki-table-wrap { background:var(--bg-1); border:1px solid var(--line);
                   border-radius:10px; overflow:hidden; }
table.wiki-table { width:100%; border-collapse:collapse; font-size:0.86rem; color:var(--tx-0); }
table.wiki-table thead th { background:var(--bg-2); color:var(--tx-1);
                            padding:0.7rem 0.85rem; text-align:left; font-weight:600;
                            font-size:0.78rem; text-transform:uppercase;
                            letter-spacing:0.06em; border-bottom:1px solid var(--line-2);
                            position:sticky; top:0; z-index:5; }
table.wiki-table tbody td { padding:0.55rem 0.85rem; border-bottom:1px solid var(--line);
                            vertical-align:top; }
table.wiki-table tbody tr:last-child td { border-bottom:none; }
table.wiki-table tbody tr:hover td { background:rgba(86,174,232,0.05); }
table.wiki-table .ref { font-family:'JetBrains Mono', monospace; color:var(--bL);
                        font-weight:600; font-size:0.85rem; white-space:nowrap; }
table.wiki-table .ref a { color:inherit; text-decoration:none; }
table.wiki-table .ref a:hover { color:var(--yY); }
table.wiki-table .yr  { color:var(--tx-2); font-family:'JetBrains Mono', monospace;
                        font-size:0.8rem; }
table.wiki-table .ttl a { color:var(--tx-0); text-decoration:none; font-weight:500; }
table.wiki-table .ttl a:hover { color:var(--bL); }
table.wiki-table .auth, table.wiki-table .cat, table.wiki-table .dom {
        font-size:0.78rem; color:var(--tx-2); }
table.wiki-table .cat { color:var(--yY); }
table.wiki-table .dom { color:var(--bM); }

/* ── Lineages landing (/wiki/lineages/index.html) ─────────────────────── */
.lineage-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(420px,1fr));
                gap:1.2rem; }
.lineage-card { background:var(--bg-1); border:1px solid var(--line);
                border-radius:12px; padding:1.3rem 1.4rem;
                position:relative; overflow:hidden;
                transition:transform 0.18s, border-color 0.18s; }
.lineage-card::before { content:""; position:absolute; left:0; top:0; bottom:0;
                        width:4px; background:var(--lin-color, var(--bL)); }
.lineage-card:hover { transform:translateY(-3px); border-color:var(--lin-color, var(--bL)); }
.lineage-card-head { display:flex; align-items:flex-start; justify-content:space-between;
                     gap:0.7rem; margin-bottom:0.5rem; flex-wrap:wrap; }
.lineage-card-head h2 { font-size:1.05rem; font-weight:700; color:var(--tx-0);
                        margin:0; padding:0; line-height:1.3; flex:1 1 200px; }
.lineage-card-head h2::before { display:none; }
.lineage-card-meta { display:flex; gap:0.4rem; flex-shrink:0; }
.lineage-card-meta .pill { font-size:0.74rem; color:var(--tx-2);
                            padding:0.18rem 0.55rem;
                            background:rgba(255,255,255,0.04);
                            border:1px solid var(--line);
                            border-radius:999px; font-weight:500; white-space:nowrap; }
.lineage-card-meta .pill strong { color:var(--lin-color, var(--bL));
                                   font-weight:700; margin-right:0.18rem; }
.lineage-blurb { color:var(--tx-1); font-size:0.9rem; line-height:1.55;
                 margin-bottom:0.85rem; }
.lineage-card details { margin-top:0.6rem; }
.lineage-card details summary { cursor:pointer; color:var(--bL);
                                 font-size:0.84rem; font-weight:600;
                                 padding:0.4rem 0; outline:none;
                                 -webkit-tap-highlight-color:transparent;
                                 list-style:none; }
.lineage-card details summary::-webkit-details-marker { display:none; }
.lineage-card details summary::before { content:"▸ "; transition:transform 0.18s;
                                         display:inline-block; }
.lineage-card details[open] summary::before { content:"▾ "; }
.lineage-card details summary:hover { color:var(--yY); }
.lineage-member-list { list-style:none; padding:0.5rem 0 0;
                       border-top:1px solid var(--line); margin-top:0.4rem; }
.lin-member { padding:0.35rem 0; }
.lin-member a { display:block; padding:0.4rem 0.6rem; border-radius:6px;
                color:var(--tx-1); text-decoration:none;
                font-size:0.84rem; line-height:1.4;
                transition:background 0.12s, color 0.12s; }
.lin-member a:hover { background:rgba(86,174,232,0.08); color:var(--tx-0); }
.lin-member .ref { font-family:'JetBrains Mono', monospace;
                    color:var(--lin-color, var(--bL));
                    font-weight:600; font-size:0.82rem; margin-right:0.3rem; }
.lin-member .auth { color:var(--tx-0); font-weight:500; margin-right:0.2rem; }
.lin-member .yr { color:var(--tx-2); font-size:0.78rem; margin-right:0.3rem; }
.lin-member .ttl { color:var(--tx-1); font-size:0.82rem; }

/* ── About page extras ────────────────────────────────────────────────── */
.about-prose { max-width:780px; margin:0 auto; }
.about-prose p { color:var(--tx-1); margin:0.8rem 0; line-height:1.7; }
.about-prose h3 { font-size:1.05rem; font-weight:700; color:var(--tx-0);
                  margin:1.7rem 0 0.7rem; padding-left:0.7rem; position:relative; }
.about-prose h3::before { content:""; position:absolute; left:0; top:0.35rem;
                          bottom:0.35rem; width:3px; border-radius:2px;
                          background:linear-gradient(180deg, var(--bL), var(--yY)); }
.about-prose ul, .about-prose ol { margin:0.5rem 0 1rem 1.3rem; line-height:1.85;
                                   color:var(--tx-1); }
.about-prose li { margin:0.25rem 0; }
.about-prose li strong { color:var(--tx-0); }
.about-prose code { font-family:'JetBrains Mono', monospace; font-size:0.85em;
                    background:rgba(86,174,232,0.08); color:var(--bL);
                    padding:1px 6px; border-radius:4px;
                    border:1px solid rgba(86,174,232,0.16); }
.kv-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
           gap:0.7rem; margin:1rem 0 1.6rem; }
.kv-card { background:var(--bg-1); border:1px solid var(--line);
           border-radius:8px; padding:0.9rem 1rem; }
.kv-card .k { font-size:0.72rem; color:var(--tx-2); text-transform:uppercase;
              letter-spacing:0.1em; font-weight:600; margin-bottom:0.3rem; }
.kv-card .v { font-size:1.4rem; font-weight:700; color:var(--tx-0);
              font-feature-settings:"tnum"; }
.kv-card .v small { font-size:0.75rem; color:var(--tx-2); font-weight:500;
                    margin-left:0.3rem; }

/* ── Citation block (about page) ──────────────────────────────────────── */
.cite-block { margin:1.6rem 0 2rem; padding:1.4rem 1.5rem;
              background:linear-gradient(155deg, rgba(86,174,232,0.08), rgba(244,183,59,0.04));
              border:1px solid rgba(86,174,232,0.32); border-radius:12px;
              max-width:780px; margin-left:auto; margin-right:auto; }
.cite-head { display:flex; align-items:center; gap:0.7rem; margin-bottom:0.9rem; }
.cite-pill { background:linear-gradient(135deg, var(--bM), var(--bD));
             color:#fff; font-size:0.7rem; font-weight:700; letter-spacing:0.12em;
             padding:3px 9px; border-radius:999px; text-transform:uppercase; }
.cite-head h3 { font-size:1.05rem; color:var(--tx-0); font-weight:700;
                margin:0; padding:0; }
.cite-head h3::before { display:none; }
.cite-row { display:flex; align-items:baseline; flex-wrap:wrap; gap:0.5rem;
            font-size:0.88rem; color:var(--tx-1); margin:0.4rem 0; }
.cite-row .cite-k { color:var(--tx-2); font-size:0.74rem; font-weight:600;
                    letter-spacing:0.07em; text-transform:uppercase; min-width:140px; }
.cite-row a { color:var(--bL); font-family:'JetBrains Mono', monospace;
              font-size:0.84rem; word-break:break-all; }
.cite-row a:hover { color:var(--yY); }
.cite-quote { margin-top:1rem; padding:0.9rem 1.05rem;
              background:rgba(11,19,34,0.65); border:1px solid var(--line);
              border-radius:8px; color:var(--tx-1); font-size:0.84rem;
              line-height:1.5; white-space:pre-wrap; word-break:break-word;
              font-family:'Inter','Segoe UI',Arial,sans-serif; }

/* DOI badge in the home hero */
.doi-badge { display:inline-flex; align-items:center; gap:0.4rem;
             padding:0.3rem 0.85rem; border-radius:999px; font-size:0.78rem;
             font-weight:600; letter-spacing:0.06em; text-decoration:none;
             background:rgba(244,183,59,0.12); border:1px solid rgba(244,183,59,0.4);
             color:var(--yY); margin-top:1rem; transition:all 0.18s; }
.doi-badge:hover { background:rgba(244,183,59,0.22); color:var(--yY);
                   transform:translateY(-1px); }
.doi-badge .doi-pill { background:var(--yY); color:var(--bg-0);
                       font-size:0.66rem; font-weight:800; letter-spacing:0.08em;
                       padding:1px 6px; border-radius:3px; }

/* ── Lightbox ─────────────────────────────────────────────────────────── */
.lightbox { display:none; position:fixed; inset:0;
            background:rgba(5,8,15,0.92); z-index:1000;
            align-items:center; justify-content:center; }
.lightbox.open { display:flex; }
.lightbox img { max-width:95vw; max-height:92vh; border-radius:6px;
                box-shadow:0 30px 80px rgba(0,0,0,0.6); }
.lightbox-close { position:fixed; top:1rem; right:1.5rem; color:#fff;
                  font-size:2rem; cursor:pointer; z-index:1001; line-height:1;
                  width:42px; height:42px; border-radius:50%;
                  background:rgba(255,255,255,0.08); display:grid; place-items:center;
                  transition:background 0.15s; }
.lightbox-close:hover { background:rgba(255,255,255,0.18); }

/* ── Nav-toggle (hamburger) — hidden on desktop, shown on mobile ──────── */
.nav-toggle { display:none; background:transparent; border:1px solid var(--line-2);
              border-radius:8px; padding:0.5rem 0.55rem; cursor:pointer;
              flex-direction:column; gap:4px; align-items:center; justify-content:center;
              width:42px; height:42px; }
.nav-toggle:hover { border-color:var(--bL); }
.nav-toggle-bar { display:block; width:18px; height:2px; background:var(--tx-1);
                  border-radius:1px; transition:transform 0.18s, opacity 0.18s; }
.nav-toggle.open .nav-toggle-bar:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.nav-toggle.open .nav-toggle-bar:nth-child(2) { opacity:0; }
.nav-toggle.open .nav-toggle-bar:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
/* On desktop, .nav-links is just inline — no special wrapper styling. */
.nav-links { display:flex; align-items:center; gap:0.25rem; }

/* ── Reduced motion: respect user preference ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:0.01ms !important;
                            animation-iteration-count:1 !important;
                            transition-duration:0.01ms !important; }
  html { scroll-behavior:auto !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   ── Mobile (≤ 760px) ────────────────────────────────────────────────────
   All rules below ONLY apply on narrow viewports. Desktop (>760px) is
   completely untouched — the cascade never enters this block on a
   desktop browser, so layout / paint / specificity are byte-identical
   to the pre-mobile build.
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {

  /* nav: hamburger replaces inline link list */
  .site-nav { padding:0.5rem 0.9rem; gap:0.4rem; }
  .nav-toggle { display:flex; }
  .itad-logo .tagline { display:none; }
  .nav-links { display:none; position:absolute; top:100%; right:0.6rem;
               flex-direction:column; align-items:stretch; gap:0;
               background:rgba(11,19,34,0.98); backdrop-filter:saturate(140%) blur(10px);
               border:1px solid var(--line-2); border-radius:10px;
               padding:0.4rem; min-width:200px;
               box-shadow:0 14px 32px rgba(0,0,0,0.45); }
  .nav-links.open { display:flex; }
  .nav-links .nav-link { padding:0.7rem 0.95rem; border-radius:6px;
                          font-size:0.95rem; }

  /* Hero — tighten paddings, smaller H1 (already clamp() but cap further) */
  .hero { padding:3.2rem 1rem 2.6rem; }
  .hero h1 { font-size:1.85rem; line-height:1.15; }
  .hero p { font-size:0.95rem; }
  .cta-row { flex-direction:column; gap:0.6rem; }
  .cta-btn { width:100%; justify-content:center; }
  .doi-badge { font-size:0.72rem; padding:0.28rem 0.7rem; }

  /* Page hero on inner pages */
  .page-hero { padding:2.4rem 1rem 1.8rem; }
  .page-hero h1 { font-size:1.65rem; }
  .page-hero p { font-size:0.92rem; }

  /* Stats bar — already collapses, just reduce paddings + font */
  .stat { padding:1rem 0.6rem; }
  .stat .num { font-size:1.55rem; }
  .stat .lbl { font-size:0.62rem; letter-spacing:0.08em; }

  /* Sections */
  .section { padding:2.4rem 1rem; }
  .section h2 { font-size:1.35rem; }
  .section .subtitle { font-size:0.88rem; }

  /* Feature / browse / image / paper grids — single column on phone */
  .feature-grid, .browse-grid { grid-template-columns:1fr; }
  .img-grid { grid-template-columns:1fr; gap:1rem; }
  .paper-grid { grid-template-columns:1fr; gap:0.7rem; }

  /* Wiki: show the filter-toggle button (desktop hides it). */
  .filters-toggle { display:inline-flex; }
  /* Sticky filter row — search + Filters button stay visible while
     scrolling so the user always has filtering at hand. */
  .filter-controls { position:sticky;
                     top:max(0.4rem, env(safe-area-inset-top));
                     z-index:30; padding:0.5rem 0;
                     background:linear-gradient(180deg, var(--bg-0) 0%, var(--bg-0) 75%, transparent 100%);
                     margin:-0.5rem 0 0.6rem; }
  .filter-input { font-size:16px; }   /* iOS auto-zoom suppression */
  /* When chip stack is open on mobile it's a sheet of chips — give it
     room to breathe and a tighter 2-col grid so it doesn't dominate. */
  .browse-stack[data-collapsed="false"] {
    margin-bottom:1rem; padding:0.5rem 0;
    border-bottom:1px solid var(--line);
  }
  .browse-section { margin-bottom:1.1rem; }
  .browse-section > h3 { font-size:0.7rem; margin-bottom:0.5rem; }
  .browse-grid {
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:0.5rem;
  }
  .browse-card { padding:0.6rem 0.75rem; min-height:56px; }
  .browse-card .lbl { font-size:0.82rem; line-height:1.25; }
  .browse-card .cnt { font-size:0.65rem; }

  /* Wiki table — horizontal scroll for the 6-col layout */
  .wiki-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch;
                     border-radius:8px; }
  table.wiki-table { font-size:0.78rem; min-width:640px; }
  table.wiki-table thead th { padding:0.55rem 0.6rem; font-size:0.66rem; }
  table.wiki-table tbody td { padding:0.45rem 0.6rem; }
  /* Hide the 'Author' and 'Domain' text columns on phone — info still on
     the per-paper page; reduces horizontal scroll need. */
  table.wiki-table .auth, table.wiki-table .dom,
  table.wiki-table thead th:nth-child(4),
  table.wiki-table thead th:nth-child(6) { display:none; }
  .filter-input { font-size:16px; padding:0.65rem 0.85rem; }
  /* iOS: any input <16px triggers auto-zoom on focus; 16px prevents that */

  /* Browse cards — slightly smaller chips */
  .browse-card { padding:0.7rem 0.8rem; }
  .browse-card .lbl { font-size:0.86rem; }
  .browse-card .cnt { font-size:0.68rem; }

  /* Paper detail */
  .paper-detail { padding:0 1rem; margin-top:0.5rem; }

  /* Sticky back button on mobile so it stays visible while scrolling
     long paper pages. Below the site-nav (which is sticky too). */
  .paper-back-row {
    position:sticky;
    top:max(0.55rem, env(safe-area-inset-top));
    z-index:25;
    margin:0.6rem auto 0.4rem;
    padding:0 1rem;
    pointer-events:none;     /* row is just a positioning host */
  }
  .paper-back {
    pointer-events:auto;     /* but the button itself is tappable */
    min-height:44px;
    padding:0.65rem 1.1rem 0.65rem 0.95rem;
    font-size:0.88rem;
    background:rgba(11,19,34,0.92);
    box-shadow:0 4px 14px rgba(0,0,0,0.35);
  }
  .paper-detail h1 { font-size:1.25rem; line-height:1.3; }
  .breadcrumb { font-size:0.78rem; }
  .breadcrumb .sep { margin:0 0.25rem; }
  table.meta-table { font-size:0.82rem; display:block; overflow-x:auto;
                     -webkit-overflow-scrolling:touch; }
  table.meta-table th { width:auto; min-width:130px; padding:0.45rem 0.6rem; }
  table.meta-table td { padding:0.45rem 0.6rem; word-break:break-word; }

  /* About prose */
  .about-prose h3 { font-size:0.98rem; margin:1.3rem 0 0.5rem; }
  .about-prose ul, .about-prose ol { margin-left:1.1rem; line-height:1.7; }
  .kv-grid { grid-template-columns:repeat(2, 1fr); gap:0.5rem; }
  .kv-card { padding:0.7rem 0.8rem; }
  .kv-card .v { font-size:1.1rem; }

  /* Citation block — keep DOI URLs from horizontal scroll */
  .cite-block { padding:1rem 1.05rem; }
  .cite-row { font-size:0.82rem; }
  .cite-row .cite-k { min-width:auto; flex:0 0 100%; margin-bottom:0.1rem; }
  .cite-quote { font-size:0.78rem; padding:0.7rem 0.85rem; }

  /* Footer */
  footer { padding:1.8rem 1rem; font-size:0.8rem; }
  .footer-brand img.logo-png { height:36px; }

  /* Lightbox close button — bigger tap target */
  .lightbox-close { width:48px; height:48px; top:0.5rem; right:0.6rem; }

  /* Safe-area insets for notched phones */
  body { padding-left:env(safe-area-inset-left);
         padding-right:env(safe-area-inset-right); }
  .site-nav { padding-left:max(0.9rem, env(safe-area-inset-left));
              padding-right:max(0.9rem, env(safe-area-inset-right)); }
  footer { padding-bottom:max(1.8rem, env(safe-area-inset-bottom)); }
}

/* Even narrower phones (≤ 380px, e.g. iPhone SE 1st gen) */
@media (max-width: 380px) {
  .hero h1 { font-size:1.6rem; }
  .stat .num { font-size:1.35rem; }
  .kv-grid { grid-template-columns:1fr; }
}

/* ── Landscape phones (≤ 768px AND short height) ──────────────────────
   Vertical space is the constraint. Compress hero + section paddings
   so users see content without scrolling past the title. */
@media (max-width: 768px) and (orientation: landscape) and (max-height: 500px) {
  .hero { padding:1.8rem 1rem 1.4rem; }
  .hero h1 { font-size:1.5rem; line-height:1.15; margin-bottom:0.6rem; }
  .hero p { font-size:0.85rem; max-width:560px; margin-bottom:1rem; }
  .eyebrow { margin-bottom:0.7rem; padding:0.22rem 0.7rem; font-size:0.7rem; }
  .cta-row { flex-direction:row; gap:0.5rem; }
  .cta-btn { width:auto; padding:0.55rem 1rem; font-size:0.88rem; }
  .doi-badge { margin-top:0.6rem; }

  .page-hero { padding:1.4rem 1rem 1rem; }
  .page-hero h1 { font-size:1.35rem; margin-bottom:0.3rem; }
  .page-hero p { font-size:0.85rem; }

  .stats-bar { padding:0.2rem 0; }
  .stat { padding:0.7rem 0.5rem; }
  .stat .num { font-size:1.3rem; }

  .section { padding:1.4rem 1rem; }
  .section h2 { font-size:1.2rem; }
}

/* ── iOS Safari URL-bar fix ──────────────────────────────────────────
   100vh on iOS Safari includes the address bar even when it's hiding
   content. 100dvh (dynamic viewport height) tracks the actual visible
   area. Browsers without dvh support fall back to vh — we set both. */
@supports (height: 100dvh) {
  .lightbox { height:100dvh; }
}